fix: playing prop bug

README.md

@@ -56,7 +56,7 @@ As of Chrome 66, [videos must be `muted` in order to play automatically](https:/
 Prop | Description | Default
 ---- | ----------- | -------
 `src` | The url of a video or song to play | `undefined`
-`playing` | Set to `true` or `false` to pause or play the media | `false`
+`playing` | Set to `true` or `false` to play or pause the media | `undefined`
 `preload` | Applies the `preload` attribute where supported | `undefined`
 `playsInline` | Applies the `playsInline` attribute where supported | `false`
 `crossOrigin` | Applies the `crossOrigin` attribute where supported | `undefined`

src/Player.tsx

@@ -19,10 +19,11 @@ const Player: Player = React.forwardRef((props, ref) => {
   useEffect(() => {
     if (!playerRef.current) return;
 
-    if (playerRef.current.paused && playing) {
+    // Use strict equality for `playing`, if it's nullish, don't do anything.
+    if (playerRef.current.paused && playing === true) {
       playerRef.current.play();
     }
-    if (!playerRef.current.paused && !playing) {
+    if (!playerRef.current.paused && playing === false) {
       playerRef.current.pause();
     }
 

src/props.ts

@@ -20,7 +20,7 @@ export const defaultProps: ReactPlayerProps = {
   playbackRate: 1,
 
   // custom props
-  // playing: false,
+  // playing: undefined,
   // pip: false,
   // light: false,
   // fallback: null,

test/Player.tsx

@@ -20,13 +20,13 @@ test('video.load()', async (t) => {
 
 test('video.play()', async (t) => {
   const videoRef: React.Ref<HTMLVideoElement> = React.createRef();
-  const wrapper = render(<Player ref={videoRef} src="file.mp4" activePlayer={HtmlPlayer} />);
+  const wrapper = render(<Player ref={videoRef} src="file.mp4" playing={false} activePlayer={HtmlPlayer} />);
 
   const play = sinon.fake();
   videoRef.current?.addEventListener('play', play);
 
   act(() => {
-    wrapper.update(<Player ref={videoRef} src="file.mp4" playing activePlayer={HtmlPlayer} />);
+    wrapper.update(<Player ref={videoRef} src="file.mp4" playing={true} activePlayer={HtmlPlayer} />);
   });
   await Promise.resolve();
 
@@ -36,13 +36,13 @@ test('video.play()', async (t) => {
 
 test('video.pause()', async (t) => {
   const videoRef: React.Ref<HTMLVideoElement> = React.createRef();
-  const wrapper = render(<Player ref={videoRef} src="file.mp4" playing activePlayer={HtmlPlayer} />);
+  const wrapper = render(<Player ref={videoRef} src="file.mp4" playing={true} activePlayer={HtmlPlayer} />);
 
   const pause = sinon.fake();
   videoRef.current?.addEventListener('pause', pause);
 
   act(() => {
-    wrapper.update(<Player ref={videoRef} src="file.mp4" activePlayer={HtmlPlayer} />);
+    wrapper.update(<Player ref={videoRef} src="file.mp4" playing={false} activePlayer={HtmlPlayer} />);
   });
   await Promise.resolve();