How to use useRef in functional components?

[josoroma-zz]

Hi!

I am probably missing something... I guess. But I am not able to use seekTo in the handleSeekMouseUp method:

import React, { useRef, useState } from 'react';
import ReactPlayer from 'react-player'
import Button from '@material-ui/core/Button';
import Container from '@material-ui/core/Container';

import useStyles from './index.style.js';

const Player = () => {
  const classes = useStyles();

  const inputRange = useRef(null);

  const [playing, setPlaying] = useState(true);
  const [seeking, setSeeking] = useState(false);

  const [loaded, setLoaded] = useState(0);
  const [duration, setDuration] = useState(0);
  const [played, setPlayed] = useState(0);

  console.log('---> playing', playing);
  console.log('---> seeking', seeking);
  console.log('---> played', played);
  console.log('---> duration', duration);

  const handlePlayPause = () => {
    setPlaying(!playing);
  }

  const handleSeekMouseDown = e => {
    setSeeking(true);
  }

  const handleSeekChange = e => {
    setPlayed(parseFloat(e.target.value));
  }

  const handleSeekMouseUp = e => {
    console.log('***** e.target.value', e.target.value);
    setSeeking(false);
    inputRange.current.seekTo(parseFloat(e.target.value));
  }

  const handleProgress = state => {
    console.log('onProgress', state);
    if (!seeking) {
      setPlayed(state.played);
    }
  }

  const handleDuration = (duration) => {
    console.log('onDuration', duration);
    setDuration(duration);
  }

  return (
    <div className={classes.root}>
      <ReactPlayer
        ref={inputRange}
        className={classes.reactPlayer}
        playing={playing}
        url='https://storage.googleapis.com/media-session/elephants-dream/the-wires.mp3'
        controls={false}
        volume={1}
        loop={true}
        onProgress={handleProgress}
        onDuration={handleDuration}
      />
      <Container maxWidth="sm">
         &nbsp; Seek: &nbsp;
        <input
          type='range' min={0} max={0.999999} step='any'
          value={played}
          onMouseDown={handleSeekMouseDown}
          onChange={handleSeekChange}
          onMouseUp={handleSeekMouseUp}
        />
        &nbsp; Played: &nbsp;
        <progress max={1} value={played} />
         &nbsp; Control: &nbsp;
        <button onClick={handlePlayPause}>{playing ? 'Pause' : 'Play'}</button>
      </Container>
    </div>
  );
};

export default Player;

Thanks!

[cookpete]

Fixed in v2.0.1

[josoroma-zz]

Thanks a bunch @cookpete