Merge pull request #40068 from nkdengineer/fix/39253

fix: Video - Console error shows up when playing video
Expensify · Apr 15, 2024 · ad38df4 · ad38df4
2 parents 1cb6e00 + 89386b6
commit ad38df4
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 3 deletions.
diff --git a/src/components/VideoPlayer/BaseVideoPlayer.tsx b/src/components/VideoPlayer/BaseVideoPlayer.tsx
@@ -45,8 +45,18 @@ function BaseVideoPlayer({
     isVideoHovered = false,
 }: VideoPlayerProps) {
     const styles = useThemeStyles();
-    const {pauseVideo, playVideo, currentlyPlayingURL, sharedElement, originalParent, shareVideoPlayerElements, currentVideoPlayerRef, updateCurrentlyPlayingURL, videoResumeTryNumber} =
-        usePlaybackContext();
+    const {
+        pauseVideo,
+        playVideo,
+        currentlyPlayingURL,
+        sharedElement,
+        originalParent,
+        shareVideoPlayerElements,
+        currentVideoPlayerRef,
+        updateCurrentlyPlayingURL,
+        videoResumeTryNumber,
+        setCurrentlyPlayingURL,
+    } = usePlaybackContext();
     const {isFullScreenRef} = useFullScreenContext();
     const {isOffline} = useNetwork();
     const [duration, setDuration] = useState(videoDuration * 1000);
@@ -181,6 +191,19 @@ function BaseVideoPlayer({
         currentVideoPlayerRef.current = videoPlayerRef.current;
     }, [url, currentVideoPlayerRef, isUploading]);
 
+    const isCurrentlyURLSetRef = useRef<boolean>();
+    isCurrentlyURLSetRef.current = isCurrentlyURLSet;
+
+    useEffect(
+        () => () => {
+            if (!isCurrentlyURLSetRef.current) {
+                return;
+            }
+
+            setCurrentlyPlayingURL(null);
+        },
+        [setCurrentlyPlayingURL],
+    );
     // update shared video elements
     useEffect(() => {
         if (shouldUseSharedVideoElement || url !== currentlyPlayingURL || isFullScreenRef.current) {

diff --git a/src/components/VideoPlayerContexts/PlaybackContext.tsx b/src/components/VideoPlayerContexts/PlaybackContext.tsx
@@ -95,12 +95,13 @@ function PlaybackContextProvider({children}: ChildrenProps) {
             sharedElement,
             currentVideoPlayerRef,
             shareVideoPlayerElements,
+            setCurrentlyPlayingURL,
             playVideo,
             pauseVideo,
             checkVideoPlaying,
             videoResumeTryNumber,
         }),
-        [updateCurrentlyPlayingURL, currentlyPlayingURL, originalParent, sharedElement, shareVideoPlayerElements, playVideo, pauseVideo, checkVideoPlaying],
+        [updateCurrentlyPlayingURL, currentlyPlayingURL, originalParent, sharedElement, shareVideoPlayerElements, playVideo, pauseVideo, checkVideoPlaying, setCurrentlyPlayingURL],
     );
     return <Context.Provider value={contextValue}>{children}</Context.Provider>;
 }

diff --git a/src/components/VideoPlayerContexts/types.ts b/src/components/VideoPlayerContexts/types.ts
@@ -17,6 +17,7 @@ type PlaybackContext = {
     playVideo: () => void;
     pauseVideo: () => void;
     checkVideoPlaying: (statusCallback: StatusCallback) => void;
+    setCurrentlyPlayingURL: React.Dispatch<React.SetStateAction<string | null>>;
 };
 
 type VolumeContext = {