Merge pull request Expensify#63211 from dmkt9/fix/61983

Fix - Video file loads infinitely and stop playing when open using arrows

Author: carlosmiceli

src/components/Attachments/AttachmentCarousel/index.tsx

@@ -108,6 +108,7 @@ function AttachmentCarousel({report, attachmentID, source, onNavigate, setDownlo
             report={report}
             attachmentID={attachmentID}
             source={source}
+            onNavigate={onNavigate}
         />
     );
 }

src/components/VideoPlayerPreview/index.tsx

@@ -9,7 +9,6 @@ import VideoPlayer from '@components/VideoPlayer';
 import IconButton from '@components/VideoPlayer/IconButton';
 import {usePlaybackContext} from '@components/VideoPlayerContexts/PlaybackContext';
 import useCheckIfRouteHasRemainedUnchanged from '@hooks/useCheckIfRouteHasRemainedUnchanged';
-import useFirstRenderRoute from '@hooks/useFirstRenderRoute';
 import useLocalize from '@hooks/useLocalize';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useThemeStyles from '@hooks/useThemeStyles';
@@ -66,9 +65,8 @@ function VideoPlayerPreview({videoUrl, thumbnailUrl, reportID, fileName, videoDi
     const {isOnSearch} = useSearchContext();
     const navigation = useNavigation();
 
-    const didUserNavigateOutOfReportScreen = useCheckIfRouteHasRemainedUnchanged();
-    // We want to play the video only when the user is on the page where it was rendered
-    const firstRenderRoute = useFirstRenderRoute(didUserNavigateOutOfReportScreen);
+    // We want to play the video only when the user is on the page where it was initially rendered
+    const doesUserRemainOnFirstRenderRoute = useCheckIfRouteHasRemainedUnchanged(videoUrl);
 
     // `onVideoLoaded` is passed to VideoPlayerPreview's `Video` element which is displayed only on web.
     // VideoReadyForDisplayEvent type is lacking srcElement, that's why it's added here
@@ -85,14 +83,15 @@ function VideoPlayerPreview({videoUrl, thumbnailUrl, reportID, fileName, videoDi
 
     useEffect(() => {
         return navigation.addListener('blur', () => !isOnAttachmentRoute() && setIsThumbnail(true));
-    }, [navigation, firstRenderRoute]);
+    }, [navigation]);
 
     useEffect(() => {
-        if (videoUrl !== currentlyPlayingURL || reportID !== currentRouteReportID || !firstRenderRoute.isFocused) {
+        const isFocused = doesUserRemainOnFirstRenderRoute();
+        if (videoUrl !== currentlyPlayingURL || reportID !== currentRouteReportID || !isFocused) {
             return;
         }
         setIsThumbnail(false);
-    }, [currentlyPlayingURL, currentRouteReportID, updateCurrentURLAndReportID, videoUrl, reportID, firstRenderRoute, isOnSearch]);
+    }, [currentlyPlayingURL, currentRouteReportID, updateCurrentURLAndReportID, videoUrl, reportID, doesUserRemainOnFirstRenderRoute, isOnSearch]);
 
     return (
         <View style={[styles.webViewStyles.tagStyles.video, thumbnailDimensionsStyles]}>

src/hooks/useCheckIfRouteHasRemainedUnchanged.ts

@@ -1,45 +1,88 @@
 import {useNavigation} from '@react-navigation/native';
 import {useCallback, useEffect, useRef} from 'react';
-import Navigation from '@navigation/Navigation';
-import ROUTES from '@src/ROUTES';
+import Navigation, {navigationRef} from '@navigation/Navigation';
+import SCREENS from '@src/SCREENS';
+import useResponsiveLayout from './useResponsiveLayout';
 
 /**
- * Hook that returns a function to check if the currently active route remains the same as the last known route.
- * The last known route reference is updated every time the component experiences a 'blur' event,
- * except when opening an attachments modal, which is treated as an exception and does not trigger a reference update.
+ * Hook that returns a function to check if the currently active route remains the same as the route on which the component was initially rendered.
+ * The `isOnInitialRenderedRouteRef` is set to `false` every time the component experiences a 'blur' event,
+ * except when opening an attachments modal, which is treated as an exception and does not trigger a reference update because the attachments modal display overlap and we want to use shared VideoPlayer.
  *
- * @return Function that checks if the last known route matches the currently active route.
+ * @return Function that checks if the route where the component was initially rendered matches the current active route.
  */
-function useCheckIfRouteHasRemainedUnchanged(): () => boolean {
-    const lastKnownRouteRef = useRef<string | undefined>(undefined);
+function useCheckIfRouteHasRemainedUnchanged(videoUrl: string) {
+    // Determines whether the component is still rendered on the initially rendered route.
+    const isOnInitialRenderedRouteRef = useRef<boolean | undefined>(undefined);
     const navigation = useNavigation();
+    const {shouldUseNarrowLayout, isInNarrowPaneModal} = useResponsiveLayout();
 
-    // Function to compare the last known route with the current active route
+    /**
+     * Return true only when on the initially rendered route or the video is currently playing in attachment modal.
+     */
     const hasRouteRemainedUnchanged = useCallback(() => {
-        return lastKnownRouteRef.current === Navigation.getActiveRouteWithoutParams();
-    }, []);
+        if (navigation.isFocused()) {
+            return true;
+        }
+
+        // If navigating away from the initially rendered route or attachment route
+        if (!isOnInitialRenderedRouteRef.current) {
+            return false;
+        }
+
+        // If on AttachmentModal, only play when the source parameters match videoUrl ensures correct play VideoPlayer share for this one
+        const currentRoute = navigationRef.getCurrentRoute();
+        if (
+            currentRoute?.name === SCREENS.ATTACHMENTS &&
+            currentRoute?.params &&
+            'source' in currentRoute.params &&
+            currentRoute.params.source === videoUrl &&
+            // Because the video player is shared only on large screens
+            // Allow in RHP in cases where we're in RHP on the Search page
+            (!shouldUseNarrowLayout || isInNarrowPaneModal)
+        ) {
+            return true;
+        }
 
-    // Initialize the initial route when navigation is ready
+        return false;
+    }, [shouldUseNarrowLayout, isInNarrowPaneModal, videoUrl, navigation]);
+
+    // Initialize and check if starting with the attachment modal
     useEffect(() => {
         Navigation.isNavigationReady().then(() => {
-            if (lastKnownRouteRef.current !== undefined) {
+            if (isOnInitialRenderedRouteRef.current !== undefined) {
                 return;
             }
 
-            lastKnownRouteRef.current = Navigation.getActiveRouteWithoutParams();
+            const route = navigationRef.getCurrentRoute();
+            // If the app is launched with the attachment route, it will always remain on the report screen.
+            // Thus, it can be considered as still being on the rendered route.
+            isOnInitialRenderedRouteRef.current = navigation.isFocused() || route?.name === SCREENS.ATTACHMENTS;
         });
+        // eslint-disable-next-line react-compiler/react-compiler
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
 
-    // Update the route reference on 'blur' events, except when opening attachments modal
     useEffect(() => {
-        return navigation.addListener('blur', () => {
-            const currentRoute = Navigation.getActiveRouteWithoutParams();
-            if (currentRoute === `/${ROUTES.ATTACHMENTS.route}`) {
+        const unsubscribeFocus = navigation.addListener('focus', () => {
+            isOnInitialRenderedRouteRef.current = true;
+        });
+
+        const unsubscribeBlur = navigation.addListener('blur', () => {
+            const route = navigationRef.getCurrentRoute();
+
+            if (route?.name === SCREENS.ATTACHMENTS) {
                 // Skip route update when attachment modal is opened
                 return;
             }
-            lastKnownRouteRef.current = currentRoute;
+
+            isOnInitialRenderedRouteRef.current = false;
         });
+
+        return () => {
+            unsubscribeFocus();
+            unsubscribeBlur();
+        };
     }, [navigation]);
 
     return hasRouteRemainedUnchanged;