railbird/react-native-video
9
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Prevent playback state change loop on web

Browse Source
This commit is contained in:
Zoe Roux 2024-07-01 04:19:12 +00:00
parent 27880f5212
commit e610a274d5
No known key found for this signature in database
1 changed files with 5 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/Video.web.tsx
View File

@ -127,6 +127,9 @@ const Video = forwardRef<VideoRef, ReactVideoProps>(
setVolume(volume); setVolume(volume);
}, [volume, setVolume]); }, [volume, setVolume]);
// we use a ref to prevent triggerring the useEffect when the component rerender with a non-stable `onPlaybackStateChanged`.
const playbackStateRef = useRef(onPlaybackStateChanged);
playbackStateRef.current = onPlaybackStateChanged;
useEffect(() => { useEffect(() => {
// Not sure about how to do this but we want to wait for nativeRef to be initialized // Not sure about how to do this but we want to wait for nativeRef to be initialized
setTimeout(() => { setTimeout(() => {
@ -137,9 +140,9 @@ const Video = forwardRef<VideoRef, ReactVideoProps>(
// Set play state to the player's value (if autoplay is denied) // Set play state to the player's value (if autoplay is denied)
// This is useful if our UI is in a play state but autoplay got denied so // This is useful if our UI is in a play state but autoplay got denied so
// the video is actaully in a paused state. // the video is actaully in a paused state.
onPlaybackStateChanged?.({isPlaying: !nativeRef.current.paused}); playbackStateRef.current?.({isPlaying: !nativeRef.current.paused});
}, 500); }, 500);
}, [onPlaybackStateChanged]); }, []);
useEffect(() => { useEffect(() => {
if (!nativeRef.current || rate === undefined) { if (!nativeRef.current || rate === undefined) {