playing prop doesn’t react to changes between `undefined` & `false`

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.

[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.