React-player: onProgress is not compatible to hooks.

Created on 30 Oct 2018 · 5Comments · Source: cookpete/react-player

When using react hooks + onProgress callback function, the onProgress callback can not reflect for props changing, it will always take the old props.
https://reactjs.org/docs/hooks-faq.html#is-there-something-like-instance-variables

Source

rockmandash

Most helpful comment

@CookPete Sorry that I didn't describe clearly, but I've found a way using onProgress + hooks without problem.

function App() {
  const [value, setValue] = useState(0);
  const onClick = () => {
    setValue(value + 1);
  };

  const valueRef = useRef();
  useEffect(() => {
    valueRef.current = value;
  });
  const onProgress = () => {
    console.log(valueRef.current);
  };

  return (
    <>
      <ReactPlayer onProgress={onProgress} />
      <button onClick={onClick}>Click</button>
    </>
  );
}

rockmandash on 1 Nov 2018

👍4

All 5 comments

I'm asking same question in react
https://github.com/facebook/react/issues/14031

rockmandash on 30 Oct 2018

I'm not using hooks, but my player is wrapped in an Apollo Mutation, and I want to fire that once per video (i.e. saving that the user watched the video). To get around this issue I change onProgress to an empty function. That alone didn't trigger componentWillReceiveProps so altering the progressInterval completed the work around.

<Mutation mutation={mutation} variables={variables}>
    {(mutate, { called }) => {
        // hack here to update the onProgress inside Player.js
        const interval = called ? 2001 : 2000;
        const onProgress = !called ? ({ played }) => {
            if (played >= 0.88) {
                mutate();
            }
        } : () => { };
        return <VimeoPlayer
            url={video.url}
            onProgress={onProgress}
            progressInterval={interval}
        />;
    }}
</Mutation>;

I'd be interested in trying to fix this, but looking at the React-Player source it needs a rather large body of work to update to the latest version of React.

hsimah on 31 Oct 2018

I need to understand the problem better if I'm going to be able to look at this. What are you passing in to ReactPlayer as props, what are you expecting to happen, and what is actually happening?

I'd be interested in trying to fix this, but looking at the React-Player source it needs a rather large body of work to update to the latest version of React.

@hsimah What exactly needs updating? I'm not sure I would say a library _needs_ updating to support hooks, which are still in very early stages.

cookpete on 1 Nov 2018

@CookPete Sorry that I didn't describe clearly, but I've found a way using onProgress + hooks without problem.

function App() {
  const [value, setValue] = useState(0);
  const onClick = () => {
    setValue(value + 1);
  };

  const valueRef = useRef();
  useEffect(() => {
    valueRef.current = value;
  });
  const onProgress = () => {
    console.log(valueRef.current);
  };

  return (
    <>
      <ReactPlayer onProgress={onProgress} />
      <button onClick={onClick}>Click</button>
    </>
  );
}

rockmandash on 1 Nov 2018

👍4

@hsimah What exactly needs updating? I'm not sure I would say a library _needs_ updating to support hooks, which are still in very early stages.

Nothing in particular, poor turn of phrase. As I mentioned I am not using hooks. My use case is inside an Apollo Mutation. I am tracking when a person watches a video past an arbitary point (88%).

Ideally I would do the following:

<Mutation mutation={mutation} variables={variables}>
    {(mutate, { called }) => {
        const onProgress = ({ played }) => {
            if (played >= 0.88) {
                mutate();
            }
        };
        return <VimeoPlayer
            url={video.url}
            onProgress={onProgress}
            progressInterval={interval}
        />;
    }}
</Mutation>;

When the video passes 88%, the mutate function would be called, firing off to the server that the video was watched. However, in the componentDidMount inside Player.js is not comparing if onProgress is different, it never updates the handler with my new called value. It's a similar problem to the OP issue regarding hooks. In my previous comment I showed how I worked around the issue by updating a non-function prop. I'm in the middle of a project (making heavy use of your excellent player!) so I am happy with my workaround for now.

hsimah on 11 Nov 2018

Was this page helpful?

0 / 5 - 0 ratings