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

Author: dmkt9

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);
+    const isUserRemainOnFirstRenderRoute = 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 = isUserRemainOnFirstRenderRoute();
+        if (videoUrl !== currentlyPlayingURL || reportID !== currentRouteReportID || !isFocused) {
             return;
         }
         setIsThumbnail(false);
-    }, [currentlyPlayingURL, currentRouteReportID, updateCurrentURLAndReportID, videoUrl, reportID, firstRenderRoute, isOnSearch]);
+    }, [currentlyPlayingURL, currentRouteReportID, updateCurrentURLAndReportID, videoUrl, reportID, isUserRemainOnFirstRenderRoute, isOnSearch]);
 
     return (
         <View style={[styles.webViewStyles.tagStyles.video, thumbnailDimensionsStyles]}>

src/hooks/useCheckIfRouteHasRemainedUnchanged.ts

@@ -1,45 +1,85 @@
 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,
+ * 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 `isFocused` 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.
  *
- * @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 rendered matches the currently active route.
  */
-function useCheckIfRouteHasRemainedUnchanged(): () => boolean {
-    const lastKnownRouteRef = useRef<string | undefined>(undefined);
+function useCheckIfRouteHasRemainedUnchanged(videoUrl: string) {
+    // Ref stores a value determining whether the component is still rendered on the route.
+    // If the value is false, it immediately returns false; if true, it checks whether it is in the attachment modal.
+    const hasOnRenderedRouteRef = useRef<boolean | undefined>(undefined);
     const navigation = useNavigation();
+    const {shouldUseNarrowLayout, isInNarrowPaneModal} = useResponsiveLayout();
 
-    // Function to compare the last known route with the current active route
     const hasRouteRemainedUnchanged = useCallback(() => {
-        return lastKnownRouteRef.current === Navigation.getActiveRouteWithoutParams();
-    }, []);
+        if (navigation.isFocused()) {
+            return true;
+        }
+
+        // If navigating outside the rendered route and attachment modal route
+        if (!hasOnRenderedRouteRef.current) {
+            return false;
+        }
+
+        // If on AttachmentModal, only play when the source parameters match videoUrl
+        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 desktop
+            // Allow in RHP
+            (!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 (hasOnRenderedRouteRef.current !== undefined) {
                 return;
             }
 
-            lastKnownRouteRef.current = Navigation.getActiveRouteWithoutParams();
+            const route = navigationRef.getCurrentRoute();
+            // If the app is opened via the attachment route, it will always remain on the report screen.
+            // Thus, it can be considered as still being on the rendered route.
+            hasOnRenderedRouteRef.current = route?.name === SCREENS.ATTACHMENTS;
         });
     }, []);
 
     // 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', () => {
+            hasOnRenderedRouteRef.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;
+
+            hasOnRenderedRouteRef.current = false;
         });
+
+        return () => {
+            unsubscribeFocus();
+            unsubscribeBlur();
+        };
     }, [navigation]);
 
     return hasRouteRemainedUnchanged;