Merge pull request Expensify#81962 from daledah/fix/80421-1

srikarparsi · web-flow · commit a75efa68346c · 2026-03-10T17:53:49.000-04:00
fix: can't play video on a narrow viewport size on IOU report
diff --git a/src/components/VideoPlayer/BaseVideoPlayer.tsx b/src/components/VideoPlayer/BaseVideoPlayer.tsx
@@ -54,8 +54,9 @@ function BaseVideoPlayer({
     onTap,
 }: VideoPlayerProps & {reportID: string}) {
     const styles = useThemeStyles();
-    const {currentlyPlayingURL, sharedElement, originalParent, currentVideoPlayerRef, currentVideoViewRef, mountedVideoPlayersRef, playerStatus} = usePlaybackStateContext();
-    const {pauseVideo, playVideo, replayVideo, shareVideoPlayerElements, updateCurrentURLAndReportID, setCurrentlyPlayingURL, updatePlayerStatus} = usePlaybackActionsContext();
+    const {currentlyPlayingURL, sharedElement, originalParent, currentVideoPlayerRef, currentVideoViewRef, mountedVideoPlayersRef, playerStatus, shareVersion} = usePlaybackStateContext();
+    const {pauseVideo, playVideo, replayVideo, shareVideoPlayerElements, updateCurrentURLAndReportID, setCurrentlyPlayingURL, updatePlayerStatus, requestDonorReRegistration} =
+        usePlaybackActionsContext();
     const {isFullScreenRef} = useFullScreenState();
 
     const isOffline = useNetwork().isOffline;
@@ -134,6 +135,12 @@ function BaseVideoPlayer({
     const videoPlayerElementRef = useRef<View | HTMLDivElement | null>(null);
     const sharedVideoPlayerParentRef = useRef<View | HTMLDivElement | null>(null);
     const isReadyForDisplayRef = useRef(false);
+    const savedCurrentTimeRef = useRef(0);
+    const shouldUseSharedVideoElementRef = useRef(shouldUseSharedVideoElement);
+    // This needs to be updated synchronously during render (not in an effect) so that
+    // cleanup functions of useLayoutEffect always read the latest value.
+    // eslint-disable-next-line react-hooks/refs
+    shouldUseSharedVideoElementRef.current = shouldUseSharedVideoElement;
     const canUseTouchScreen = canUseTouchScreenLib();
     const isCurrentlyURLSet = currentlyPlayingURL === url;
     const isUploading = CONST.ATTACHMENT_LOCAL_URL_PREFIX.some((prefix) => url.startsWith(prefix));
@@ -295,6 +302,13 @@ function BaseVideoPlayer({
         onSourceLoaded?.(event);
     });
 
+    useEffect(() => {
+        if (currentTime <= 0) {
+            return;
+        }
+        savedCurrentTimeRef.current = currentTime;
+    }, [currentTime]);
+
     useEffect(() => {
         if (!videoPlayerRef.current.duration) {
             return;
@@ -315,7 +329,11 @@ function BaseVideoPlayer({
     // ref url: https://reactjs.org/blog/2020/08/10/react-v17-rc.html#effect-cleanup-timing
     useLayoutEffect(
         () => () => {
-            if (shouldUseSharedVideoElement || videoPlayerRef.current !== currentVideoPlayerRef.current) {
+            // Use ref to read the latest value of shouldUseSharedVideoElement, preventing
+            // destructive cleanup when this value changes during viewport resize.
+            // Without the ref, the cleanup captures the stale (old) closure value and
+            // incorrectly destroys the player when transitioning between shared/non-shared modes.
+            if (shouldUseSharedVideoElementRef.current || videoPlayerRef.current !== currentVideoPlayerRef.current) {
                 return;
             }
             if (currentVideoPlayerRef.current) {
@@ -324,7 +342,8 @@ function BaseVideoPlayer({
                 currentVideoPlayerRef.current = null;
             }
         },
-        [currentVideoPlayerRef, mountedVideoPlayersRef, shouldUseSharedVideoElement, url],
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        [currentVideoPlayerRef, mountedVideoPlayersRef, url],
     );
 
     useEffect(() => {
@@ -346,15 +365,30 @@ function BaseVideoPlayer({
 
     useEffect(
         () => () => {
-            if (shouldUseSharedVideoElement || !isCurrentlyURLSetRef.current) {
+            // Use ref to read the latest value of shouldUseSharedVideoElement, preventing
+            // premature URL clearing when this value changes during viewport resize.
+            if (shouldUseSharedVideoElementRef.current || !isCurrentlyURLSetRef.current) {
                 return;
             }
 
             setCurrentlyPlayingURL(null);
         },
-        [setCurrentlyPlayingURL, shouldUseSharedVideoElement],
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        [setCurrentlyPlayingURL],
     );
 
+    // When transitioning from non-shared to shared mode (e.g. narrow → wide viewport), the stale
+    // non-shared player refs remain in the context. Request all donors to re-register so the real
+    // donor (e.g. the chat player) reclaims the context refs.
+    const prevShouldUseSharedVideoElementRef = useRef(shouldUseSharedVideoElement);
+    useEffect(() => {
+        const wasShared = prevShouldUseSharedVideoElementRef.current;
+        if (shouldUseSharedVideoElement && !wasShared) {
+            requestDonorReRegistration();
+        }
+        prevShouldUseSharedVideoElementRef.current = shouldUseSharedVideoElement;
+    }, [shouldUseSharedVideoElement, requestDonorReRegistration, url]);
+
     // update shared video elements
     useEffect(() => {
         // On mobile safari, we need to auto-play when sharing video element here
@@ -373,6 +407,7 @@ function BaseVideoPlayer({
         currentlyPlayingURL,
         shouldUseSharedVideoElement,
         shareVideoPlayerElements,
+        shareVersion,
         url,
         isUploading,
         reportID,
@@ -409,6 +444,11 @@ function BaseVideoPlayer({
                 newParentRef.appendChild(sharedElement as HTMLDivElement);
             }
         }
+        // Restore the playback position after moving the video element in the DOM.
+        // Moving elements can reset currentTime to 0 in some browsers/video implementations.
+        if (videoPlayerRef.current && savedCurrentTimeRef.current > 0 && videoPlayerRef.current.currentTime === 0) {
+            videoPlayerRef.current.currentTime = savedCurrentTimeRef.current;
+        }
         return () => {
             if (!originalParent || !('appendChild' in originalParent)) {
                 return;
diff --git a/src/components/VideoPlayerContexts/PlaybackContext/index.tsx b/src/components/VideoPlayerContexts/PlaybackContext/index.tsx
@@ -17,6 +17,7 @@ function PlaybackContextProvider({children}: ChildrenProps) {
     const [sharedElement, setSharedElement] = useState<PlaybackStateContextValues['sharedElement']>(null);
     const [originalParent, setOriginalParent] = useState<OriginalParent>(null);
     const [currentRouteReportID, setCurrentRouteReportID] = useState<ProtectedCurrentRouteReportID>(NO_REPORT_ID);
+    const [shareVersion, setShareVersion] = useState(0);
     const mountedVideoPlayersRef = useRef<string[]>([]);
     const playerStatus = useRef<VideoPlayerStatus>('loading');
 
@@ -55,11 +56,10 @@ function PlaybackContextProvider({children}: ChildrenProps) {
                 reportIDtoSet = reportID;
             }
 
-            const routeReportID = getCurrentRouteReportID(url);
-
-            if (reportIDtoSet === routeReportID || routeReportID === NO_REPORT_ID_IN_PARAMS) {
-                setCurrentRouteReportID(reportIDtoSet);
-            }
+            // Always set currentRouteReportID so that shareVideoPlayerElements can match.
+            // When the video is in a thread/child report but the focused route shows a parent report,
+            // the IDs won't match. We still need to set it so video controls work properly.
+            setCurrentRouteReportID(reportIDtoSet);
 
             setCurrentlyPlayingURL(url);
         },
@@ -70,6 +70,14 @@ function PlaybackContextProvider({children}: ChildrenProps) {
         playerStatus.current = newStatus;
     }, []);
 
+    const requestDonorReRegistration = useCallback(() => {
+        // Reset currentRouteReportID so the reportID guard in shareVideoPlayerElements is bypassed,
+        // allowing the real donor (e.g. chat player) to re-register even if its reportID no longer
+        // matches the stale currentRouteReportID left behind by the non-shared (narrow) player.
+        setCurrentRouteReportID(NO_REPORT_ID);
+        setShareVersion((v) => v + 1);
+    }, []);
+
     const shareVideoPlayerElements: PlaybackActionsContextValues['shareVideoPlayerElements'] = useCallback(
         (
             videoPlayerRef: VideoPlayer | null,
@@ -79,7 +87,11 @@ function PlaybackContextProvider({children}: ChildrenProps) {
             shouldNotAutoPlay: boolean,
             {shouldUseSharedVideoElement, url, reportID},
         ) => {
-            if (shouldUseSharedVideoElement || url !== currentlyPlayingURL || reportID !== currentRouteReportID) {
+            // When currentRouteReportID is NO_REPORT_ID it means a forced re-registration was requested
+            // (e.g. after narrow→wide resize). In that case we skip the reportID check so any non-shared
+            // player whose URL matches can reclaim the context refs.
+            const hasReportIDMismatch = currentRouteReportID !== NO_REPORT_ID && reportID !== currentRouteReportID;
+            if (shouldUseSharedVideoElement || url !== currentlyPlayingURL || hasReportIDMismatch) {
                 return;
             }
 
@@ -106,7 +118,12 @@ function PlaybackContextProvider({children}: ChildrenProps) {
             const isSameReportID = routeReportID === currentRouteReportID || routeReportID === NO_REPORT_ID;
             const isOnRouteWithoutReportID = !!currentlyPlayingURL && getCurrentRouteReportID(currentlyPlayingURL) === NO_REPORT_ID_IN_PARAMS;
 
-            if (isSameReportID || isOnRouteWithoutReportID) {
+            // Don't reset if the video URL is still mounted by an active player.
+            // This prevents resetting when the route's reportID differs from the stored one
+            // (e.g., video in a thread/child report while the route shows the parent report).
+            const isURLStillMounted = !!currentlyPlayingURL && mountedVideoPlayersRef.current.includes(currentlyPlayingURL);
+
+            if (isSameReportID || isOnRouteWithoutReportID || isURLStillMounted) {
                 return;
             }
 
@@ -129,6 +146,7 @@ function PlaybackContextProvider({children}: ChildrenProps) {
         currentVideoViewRef: video.viewRef,
         mountedVideoPlayersRef,
         playerStatus,
+        shareVersion,
     };
 
     // Because of the React Compiler we don't need to memoize it manually
@@ -144,6 +162,7 @@ function PlaybackContextProvider({children}: ChildrenProps) {
         checkIfVideoIsPlaying: video.isPlaying,
         resetVideoPlayerData: video.resetPlayerData,
         updatePlayerStatus,
+        requestDonorReRegistration,
     };
 
     return (
diff --git a/src/components/VideoPlayerContexts/PlaybackContext/types.ts b/src/components/VideoPlayerContexts/PlaybackContext/types.ts
@@ -69,6 +69,13 @@ type PlaybackStateContextValues = {
      * Status of the currently used Video Player
      */
     playerStatus: RefObject<VideoPlayerStatus>;
+
+    /**
+     * A counter that increments to signal all non-shared (donor) players to re-register their refs.
+     * This is used when a player transitions from non-shared to shared mode, so the actual donor
+     * (e.g. the chat player) can reclaim the context refs from the stale non-shared player.
+     */
+    shareVersion: number;
 };
 
 /**
@@ -110,6 +117,13 @@ type PlaybackActionsContextValues = {
      * @param newStatus New videoPlayer status
      */
     updatePlayerStatus: (newStatus: VideoPlayerStatus) => void;
+
+    /**
+     * Requests all non-shared (donor) video player instances to re-register their refs.
+     * Should be called when a player transitions from non-shared to shared mode, so the real
+     * donor can reclaim the context refs that were temporarily taken by the non-shared instance.
+     */
+    requestDonorReRegistration: () => void;
 };
 
 /**
