From 543113159f2f1330fb767d2cdd085fe4e51b3814 Mon Sep 17 00:00:00 2001
From: kmichel <kmichel1030@gmail.com>
Date: Sun, 14 Apr 2024 00:39:55 -0700
Subject: [PATCH 1/3] fix issue

---
 src/components/VideoPlayer/BaseVideoPlayer.tsx | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/components/VideoPlayer/BaseVideoPlayer.tsx b/src/components/VideoPlayer/BaseVideoPlayer.tsx
index 9380ce43c46a..80f0fd596ed6 100644
--- a/src/components/VideoPlayer/BaseVideoPlayer.tsx
+++ b/src/components/VideoPlayer/BaseVideoPlayer.tsx
@@ -2,7 +2,7 @@
 import type {AVPlaybackStatus, VideoFullscreenUpdateEvent} from 'expo-av';
 import {ResizeMode, Video, VideoFullscreenUpdate} from 'expo-av';
 import type {MutableRefObject} from 'react';
-import React, {useCallback, useEffect, useRef, useState} from 'react';
+import React, {useCallback, useEffect, useLayoutEffect, useRef, useState} from 'react';
 import type {GestureResponderEvent} from 'react-native';
 import {View} from 'react-native';
 import FullScreenLoadingIndicator from '@components/FullscreenLoadingIndicator';
@@ -172,6 +172,15 @@ function BaseVideoPlayer({
         });
     }, [currentVideoPlayerRef, handleFullscreenUpdate, handlePlaybackStatusUpdate]);
 
+    useLayoutEffect(() => 
+        () => {
+            if(shouldUseSharedVideoElement || videoPlayerRef.current !== currentVideoPlayerRef.current) {
+                return;
+            }
+            currentVideoPlayerRef.current = null;
+        }
+    , [currentVideoPlayerRef, shouldUseSharedVideoElement]);
+
     useEffect(() => {
         if (!isUploading || !videoPlayerRef.current) {
             return;

From 6c2c0a1c4d0008670440654051bf01bbe0e19822 Mon Sep 17 00:00:00 2001
From: kmichel <kmichel1030@gmail.com>
Date: Wed, 17 Apr 2024 17:51:23 -0700
Subject: [PATCH 2/3] add comment

---
 src/components/VideoPlayer/BaseVideoPlayer.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/VideoPlayer/BaseVideoPlayer.tsx b/src/components/VideoPlayer/BaseVideoPlayer.tsx
index 80f0fd596ed6..0480ee4314e9 100644
--- a/src/components/VideoPlayer/BaseVideoPlayer.tsx
+++ b/src/components/VideoPlayer/BaseVideoPlayer.tsx
@@ -172,6 +172,8 @@ function BaseVideoPlayer({
         });
     }, [currentVideoPlayerRef, handleFullscreenUpdate, handlePlaybackStatusUpdate]);
 
+    // use `useLayoutEffect` instead of `useEffect` because ref is null when unmount in `useEffect` hook
+    // ref url: https://reactjs.org/blog/2020/08/10/react-v17-rc.html#effect-cleanup-timing
     useLayoutEffect(() => 
         () => {
             if(shouldUseSharedVideoElement || videoPlayerRef.current !== currentVideoPlayerRef.current) {
@@ -212,7 +214,7 @@ function BaseVideoPlayer({
             }
             return;
         }
-
+        
         videoPlayerRef.current = currentVideoPlayerRef.current;
         if (currentlyPlayingURL === url && newParentRef && 'appendChild' in newParentRef) {
             newParentRef.appendChild(sharedElement as HTMLDivElement);

From 6cb32224762f5e902b5f9fc1cac01cb37b799560 Mon Sep 17 00:00:00 2001
From: kmichel <kmichel1030@gmail.com>
Date: Thu, 18 Apr 2024 16:08:16 -0700
Subject: [PATCH 3/3] prettier

---
 src/components/VideoPlayer/BaseVideoPlayer.tsx | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/components/VideoPlayer/BaseVideoPlayer.tsx b/src/components/VideoPlayer/BaseVideoPlayer.tsx
index 0480ee4314e9..04e9eaeae12f 100644
--- a/src/components/VideoPlayer/BaseVideoPlayer.tsx
+++ b/src/components/VideoPlayer/BaseVideoPlayer.tsx
@@ -174,14 +174,15 @@ function BaseVideoPlayer({
 
     // use `useLayoutEffect` instead of `useEffect` because ref is null when unmount in `useEffect` hook
     // ref url: https://reactjs.org/blog/2020/08/10/react-v17-rc.html#effect-cleanup-timing
-    useLayoutEffect(() => 
-        () => {
-            if(shouldUseSharedVideoElement || videoPlayerRef.current !== currentVideoPlayerRef.current) {
+    useLayoutEffect(
+        () => () => {
+            if (shouldUseSharedVideoElement || videoPlayerRef.current !== currentVideoPlayerRef.current) {
                 return;
             }
             currentVideoPlayerRef.current = null;
-        }
-    , [currentVideoPlayerRef, shouldUseSharedVideoElement]);
+        },
+        [currentVideoPlayerRef, shouldUseSharedVideoElement],
+    );
 
     useEffect(() => {
         if (!isUploading || !videoPlayerRef.current) {
@@ -214,7 +215,7 @@ function BaseVideoPlayer({
             }
             return;
         }
-        
+
         videoPlayerRef.current = currentVideoPlayerRef.current;
         if (currentlyPlayingURL === url && newParentRef && 'appendChild' in newParentRef) {
             newParentRef.appendChild(sharedElement as HTMLDivElement);