From e610a274d514eea74965485238b6c352de82a21f Mon Sep 17 00:00:00 2001
From: Zoe Roux <zoe.roux@zoriya.dev>
Date: Mon, 1 Jul 2024 04:19:12 +0000
Subject: [PATCH] Prevent playback state change loop on web

---
 src/Video.web.tsx | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/Video.web.tsx b/src/Video.web.tsx
index e0f5b3a0..e7b8c361 100644
--- a/src/Video.web.tsx
+++ b/src/Video.web.tsx
@@ -127,6 +127,9 @@ const Video = forwardRef<VideoRef, ReactVideoProps>(
       setVolume(volume);
     }, [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(() => {
       // Not sure about how to do this but we want to wait for nativeRef to be initialized
       setTimeout(() => {
@@ -137,9 +140,9 @@ const Video = forwardRef<VideoRef, ReactVideoProps>(
         // 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
         // the video is actaully in a paused state.
-        onPlaybackStateChanged?.({isPlaying: !nativeRef.current.paused});
+        playbackStateRef.current?.({isPlaying: !nativeRef.current.paused});
       }, 500);
-    }, [onPlaybackStateChanged]);
+    }, []);
 
     useEffect(() => {
       if (!nativeRef.current || rate === undefined) {