Merge pull request #46854 from bernhardoj/fix/45619-multiple-console-…

…errors

Fix multiple console errors when login and in onboarding welcome video

src/components/FeatureTrainingModal.tsx

@@ -204,7 +204,7 @@ function FeatureTrainingModal({
                         <View style={[styles.mh100, isMediumOrLargerScreenWidth && styles.welcomeVideoNarrowLayout, safeAreaPaddingBottomStyle]}>
                             <View style={isMediumOrLargerScreenWidth ? {padding: MODAL_PADDING} : {paddingHorizontal: MODAL_PADDING}}>{renderIllustration()}</View>
                             <View style={[styles.mt5, styles.mh5]}>
-                                {title && description && (
+                                {!!title && !!description && (
                                     <View style={[isMediumOrLargerScreenWidth ? [styles.gap1, styles.mb8] : [styles.mb10]]}>
                                         <Text style={[styles.textHeadlineH1]}>{title}</Text>
                                         <Text style={styles.textSupporting}>{description}</Text>
@@ -220,7 +220,7 @@ function FeatureTrainingModal({
                                         onInputChange={toggleWillShowAgain}
                                     />
                                 )}
-                                {helpText && (
+                                {!!helpText && (
                                     <Button
                                         large
                                         style={[styles.mb3]}

src/components/VideoPlayer/BaseVideoPlayer.tsx

@@ -339,12 +339,15 @@ function BaseVideoPlayer({
         updateCurrentlyPlayingURL(url);
     }, [shouldPlay, updateCurrentlyPlayingURL, url]);
 
+    useEffect(() => {
+        videoPlayerRef.current?.setStatusAsync({volume: 0});
+    }, []);
+
     return (
         <>
             {/* We need to wrap the video component in a component that will catch unhandled pointer events. Otherwise, these
             events will bubble up the tree, and it will cause unexpected press behavior. */}
             <PressableWithoutFeedback
-                accessibilityRole="button"
                 accessible={false}
                 style={[styles.cursorDefault, style]}
             >

src/components/VideoPlayerContexts/PlaybackContext.tsx

@@ -1,8 +1,9 @@
-import type {AVPlaybackStatusToSet} from 'expo-av';
+import type {AVPlaybackStatus, AVPlaybackStatusToSet} from 'expo-av';
 import React, {useCallback, useContext, useEffect, useMemo, useRef, useState} from 'react';
 import type {View} from 'react-native';
 import type {VideoWithOnFullScreenUpdate} from '@components/VideoPlayer/types';
 import useCurrentReportID from '@hooks/useCurrentReportID';
+import usePrevious from '@hooks/usePrevious';
 import type ChildrenProps from '@src/types/utils/ChildrenProps';
 import type {PlaybackContext, StatusCallback} from './types';
 
@@ -15,7 +16,9 @@ function PlaybackContextProvider({children}: ChildrenProps) {
     const [originalParent, setOriginalParent] = useState<View | HTMLDivElement | null>(null);
     const currentVideoPlayerRef = useRef<VideoWithOnFullScreenUpdate | null>(null);
     const {currentReportID} = useCurrentReportID() ?? {};
+    const prevCurrentReportID = usePrevious(currentReportID);
     const videoResumeTryNumberRef = useRef<number>(0);
+    const playVideoPromiseRef = useRef<Promise<AVPlaybackStatus>>();
 
     const pauseVideo = useCallback(() => {
         currentVideoPlayerRef.current?.setStatusAsync?.({shouldPlay: false});
@@ -31,7 +34,7 @@ function PlaybackContextProvider({children}: ChildrenProps) {
             if ('durationMillis' in status && status.durationMillis === status.positionMillis) {
                 newStatus.positionMillis = 0;
             }
-            currentVideoPlayerRef.current?.setStatusAsync(newStatus);
+            playVideoPromiseRef.current = currentVideoPlayerRef.current?.setStatusAsync(newStatus);
         });
     }, [currentVideoPlayerRef]);
 
@@ -73,21 +76,29 @@ function PlaybackContextProvider({children}: ChildrenProps) {
     );
 
     const resetVideoPlayerData = useCallback(() => {
-        videoResumeTryNumberRef.current = 0;
-        stopVideo();
-        setCurrentlyPlayingURL(null);
-        setSharedElement(null);
-        setOriginalParent(null);
-        currentVideoPlayerRef.current = null;
-        unloadVideo();
+        // Play video is an async operation and if we call stop video before the promise is completed,
+        // it will throw a console error. So, we'll wait until the promise is resolved before stopping the video.
+        (playVideoPromiseRef.current ?? Promise.resolve()).then(stopVideo).finally(() => {
+            videoResumeTryNumberRef.current = 0;
+            setCurrentlyPlayingURL(null);
+            setSharedElement(null);
+            setOriginalParent(null);
+            currentVideoPlayerRef.current = null;
+            unloadVideo();
+        });
     }, [stopVideo, unloadVideo]);
 
     useEffect(() => {
-        if (!currentReportID) {
+        // This logic ensures that resetVideoPlayerData is only called when currentReportID
+        // changes from one valid value (i.e., not an empty string or '-1') to another valid value.
+        // This prevents the video that plays when the app opens from being interrupted when currentReportID
+        // is initially empty or '-1', or when it changes from empty/'-1' to another value
+        // after the report screen in the central pane is mounted on the large screen.
+        if (!currentReportID || !prevCurrentReportID || currentReportID === '-1' || prevCurrentReportID === '-1') {
             return;
         }
         resetVideoPlayerData();
-    }, [currentReportID, resetVideoPlayerData]);
+    }, [currentReportID, prevCurrentReportID, resetVideoPlayerData]);
 
     const contextValue = useMemo(
         () => ({

src/libs/actions/Session/index.ts

@@ -677,7 +677,7 @@ function clearSignInData() {
  */
 function resetHomeRouteParams() {
     Navigation.isNavigationReady().then(() => {
-        const routes = navigationRef.current?.getState().routes;
+        const routes = navigationRef.current?.getState()?.routes;
         const homeRoute = routes?.find((route) => route.name === SCREENS.HOME);
 
         const emptyParams: Record<string, undefined> = {};