React-player: playing prop doesn’t react to changes between `undefined` & `false`

[mrcoles]

Current Behavior

If I render a ReactPlayer with playing set to undefined for a youtube video, then start the video by clicking play within the element, and update playing to be false, then the video continues playing.

const [ playing, setPlaying ] = useState(undefined);
return (
  <div>
    <ReactPlayer
      url={url}
      playing={playing}
      controls
      width='100%'
      height='100%' />
    <button onClick={evt => setPlaying(false)}>Stop if playing</button>
  </div>
);

https://jsfiddle.net/mrcoles/ckrnm12w/12/

Expected Behavior

I would expect when the playing prop changes from undefined to false that the video would stop playing (if it currently is).

Steps to Reproduce

1. Try this JSFiddle: https://jsfiddle.net/mrcoles/ckrnm12w/12/
2. Play the video
3. Press the “Set playing to false” button

Environment

• URL attempting to play: https://www.youtube.com/watch?v=qWVc-xVZxho (so far only tested on youtube)
• Browser: Chrome Version 85.0.4183.102 (Official Build) (64-bit)
• Operating system: Mac OSX 10.15.6
• jsFiddle example: https://jsfiddle.net/mrcoles/ckrnm12w/12/

Other Information

If instead I switch between playing = true or false it correctly starts or stops the video (see this jsfiddle).

I can imagine a number of reasons why this wouldn’t work as I’d expect, but the reason I was trying to do this was (1) I want to allow users to start the video themselves and using the play button provided by the embed seems like the most robust way to do that and (2) I want to automatically pause the video if a user scrolls or swipes it off the screen.

[mrcoles]

Perhaps, as a workaround, I can instead use the onReady handler to get a ref to the player object and then use player.getInternalPlayer() to call pauseVideo() (for youtube) or pause() (for vimeo), etc.?

[afzaalahmad]

@mrcoles why set playing undefined in the first place? Can't you use false in the default state? Since undefined and false both are evaluated as false and there is an if in the react-player that if state is same, it will not execute the expected behavior because !playing will evaluate to false, whether playing is undefined or false.

[mrcoles]

@afzaalahmad I think maybe the playing prop just has some weird quirks when the player has native controls enabled too, since the value of the prop can go out of sync with what the player is actually doing (e.g., playing={false}, but the user hit the play button within the youtube embed and now it’s playing despite the value of playing).

Similarly if you’re in a situation where the video is actually playing, but playing is already false and you try to set it as false again, nothing will happen, because the prop hasn’t changed. I was hoping going from undefined to false would somehow trigger it, but I’m seeing the only way to do this is to set it as true first and then set it as false again.

The real problem I was trying to solve is how to pause a video programmatically (and I thought I could maybe do it via some trickery with the playing prop), however for now I’m solving this by using the internal player reference. I suppose the friendlier api would be if there was a player.pause() method which abstracted away the internal player APIs for me.

[afzaalahmad]

@mrcoles yes playing prop can go out of sync with native control enabled. But you can make them sync yourself, by registering onPlay and onPause events. Have a look at this fiddle: https://jsfiddle.net/suem30ox/4/

[mrcoles]

@afzaalahmad thanks—I appreciate you going the extra mile here! I‘ll close the issue.