diff --git a/README.md b/README.md index 14656a19..f976cb7e 100644 --- a/README.md +++ b/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` diff --git a/src/Player.tsx b/src/Player.tsx index 0e98c955..39297fbf 100644 --- a/src/Player.tsx +++ b/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(); } diff --git a/src/props.ts b/src/props.ts index fc77d47b..674a1e34 100644 --- a/src/props.ts +++ b/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, diff --git a/test/Player.tsx b/test/Player.tsx index 8393646d..48201759 100644 --- a/test/Player.tsx +++ b/test/Player.tsx @@ -20,13 +20,13 @@ test('video.load()', async (t) => { test('video.play()', async (t) => { const videoRef: React.Ref = React.createRef(); - const wrapper = render(); + const wrapper = render(); const play = sinon.fake(); videoRef.current?.addEventListener('play', play); act(() => { - wrapper.update(); + wrapper.update(); }); await Promise.resolve(); @@ -36,13 +36,13 @@ test('video.play()', async (t) => { test('video.pause()', async (t) => { const videoRef: React.Ref = React.createRef(); - const wrapper = render(); + const wrapper = render(); const pause = sinon.fake(); videoRef.current?.addEventListener('pause', pause); act(() => { - wrapper.update(); + wrapper.update(); }); await Promise.resolve();