Playing state inconsistent with remote video playing state

[markfejes]

Hello!

First of all, I would like to thank you react-player, it really helped me a lot in a project im currently working on.
Last week I encountered a bug, which is: (gif is from forked project)

If you click fast enough, or just keep pressing space, the video will enter an infinite play-pause loop.
To reproduce this bug, i forked this project, placed some comment, and timeout for inner playing setState (https://github.com/Kisfejes/react-player/blob/master/src/demo/App.js#L98-L115)
With the timeout im emulating the redux slow down, which im using in the real applicaton.

I believe the root source of this bug is that, the inner playing state and the remote is not consistent. And after onPlay event from remote video api, you will initiate another play request toward to api. ((5) in the image). If you are in the middle of the setting state (500ms timeout in the example), and you got an another play or pause, the whole thing will end in an infinite loop.

Use case 1:
User clicked on youtube video to start (with native controls), the remote video API will fire onPlay event, you will change inner playing state to true, and because of this, react-player will call play() on the video (https://github.com/CookPete/react-player/blob/master/src/players/Base.js#L31-L34)

Can you suggest any solution to this problem?

[cookpete]

Hi @Kisfejes, thanks for the amazing effort put into this! There is definitely a problem here but I believe you haven't quite got the cause of the loop correct. The setState({ playing: true }) (step 3 in your diagram) will only ever cause a play() (step 5) if the previous playing prop is false. There must be something else in the mix that is causing the video to pause, which in turn causes it to play again and begin the loop.

[cookpete]

Ok so an easy way of reproducing the issue is to simply run play(); pause(); on the YoutubePlayer, which obviously plays and pauses the video in quick succession. I think the delay of the onPlay and onPause events from the Youtube API is what causes the loop:

1. Lets assume playing is false
2. play() is sent to the player API (but no onPlay event yet)
3. pause() is sent to the player API (but no onPause event yet)
4. Youtube state change to playing
5. ReactPlayer onPlay
6. App setState({ playing: true })
7. ReactPlayer componentWillReceiveProps – playing has changed from false to true, so lets run play() (but no onPlay event yet)
8. The pause from step 3 finally kicks in and YouTube state changes to paused
9. ReactPlayer onPause
10. Uh oh.. App setState({ playing: false })
11. ReactPlayer componentWillReceiveProps – playing has changed from true to false, so lets run pause() (but no onPause event yet)
12. The play from step 7 finally kicks in and YouTube state changes to playing
13. Go to Step 5 and begin an infinite loop

[markfejes]

Thank you for the quick response, and the steps, I tried to explain as clean as I can but these steps are cool :). I just want to mention one thing: So 2 thing can cause this loop: delay from youtube (onPlay event delaying), or delaying setState inside onPlay event handler (delaying cause for example: using redux, more complex logic, etc.).

I was thinking about the solution, and i think the problem is that, we want to control the player with the playing property (Controlled Component), which is a nice thing, but we use a third party service, and that is unreliable. Because of the delay this can cause inconsistent states, between Remote Video Player state and React Player state. So the solution would be to take out React Player playing state, and using play(), pause() methods ( like seekTo() ). What's your opinion about this?

[cookpete]

So the solution would be to take out React Player playing state, and using play(), pause() methods ( like seekTo() ). What's your opinion about this?

It seems like there would be no point in this being a React component if we did this. The beauty of it is the declarative nature of using props.

I've attempted a fix on the fix-quick-play-pause branch which basically delays the play and pause calls until the next tick, giving things a chance to catch up. @Kisfejes could you try and reproduce the error on that branch?

[markfejes]

I checked out the branch, but the bug is still there :(.

[cookpete]

Does increasing the timeouts here and here to 10 or 50 improve things?

[markfejes]

Yep, for example if you set 100ms in Base.js:
here and here
And you set 50ms in App.js (simulating delay of redux, or whatever):
here and here
The infinite play-pause loop does not occur ( tested with youtube and vimeo). But i think it's only a workaround, and does not solve the root cause of this problem.
On the other hand, it could be a quick workaround for the issue.

[cookpete]

But i think it's only a workaround, and does not solve the root cause of this problem.

It seems like the only viable solution that doesn't involve completely rewriting the library. The root cause is the fact that the state change events from the players happen asynchronously, some time after running play or pause on the player. So any time you manage to pause quickly enough after play to beat the onPlay from the player (or vice versa), you cause this problem.

[cookpete]

So the only current fix to the problem is hacky and slightly unreliable, and the cause of the problem is essentially down to how you implement ReactPlayer (using onPlay and onPause to update state) and not a problem with the library itself. Closing this off for now.