diff --git a/src/Player.tsx b/src/Player.tsx index c88fab27..b1923166 100644 --- a/src/Player.tsx +++ b/src/Player.tsx @@ -10,7 +10,7 @@ type Player = React.ForwardRefExoticComponent< >; const Player: Player = React.forwardRef((props, ref) => { - const { playing, pip } = props; + const { playing, pip, playbackRate, volume, muted, src } = props; const Player = props.activePlayer; const playerRef = useRef(null); @@ -23,13 +23,23 @@ const Player: Player = React.forwardRef((props, ref) => { if (playerRef.current.paused && playing === true) { playerRef.current.play(); } + if (!playerRef.current.paused && playing === false) { playerRef.current.pause(); } - playerRef.current.playbackRate = props.playbackRate ?? 1; - playerRef.current.volume = props.volume ?? 1; - }); + if (playbackRate !== undefined && playerRef.current.playbackRate !== playbackRate) { + playerRef.current.playbackRate = playbackRate; + } + + if (volume !== undefined && playerRef.current.volume !== volume) { + playerRef.current.volume = volume; + } + + if (muted !== undefined && playerRef.current.muted !== muted) { + playerRef.current.muted = muted; + } + }, [muted, playbackRate, playing, volume]); useEffect(() => { if (!playerRef.current || !globalThis.document) return; diff --git a/src/props.ts b/src/props.ts index ec93c019..2602ec90 100644 --- a/src/props.ts +++ b/src/props.ts @@ -16,10 +16,6 @@ export const defaultProps: ReactPlayerProps = { width: '320px', height: '180px', - // native video props - volume: 1, - playbackRate: 1, - // custom props // playing: undefined, // pip: false,