Merge pull request #40275 from bernhardoj/fix/37722-video-player-cont…

…rol-doesnt-work-after-coming-back-from-thread Fix video play control broken after coming back from thread
Expensify · Apr 17, 2024 · 5a0e410 · 5a0e410
2 parents 51bebd5 + c543a46
commit 5a0e410
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 7 deletions.
diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/VideoRenderer.tsx b/src/components/HTMLEngineProvider/HTMLRenderers/VideoRenderer.tsx
@@ -29,6 +29,7 @@ function VideoRenderer({tnode, key}: VideoRendererProps) {
                 <VideoPlayerPreview
                     key={key}
                     videoUrl={sourceURL}
+                    reportID={report?.reportID ?? ''}
                     fileName={fileName}
                     thumbnailUrl={thumbnailUrl}
                     videoDimensions={{width, height}}

diff --git a/src/components/VideoPlayerContexts/PlaybackContext.tsx b/src/components/VideoPlayerContexts/PlaybackContext.tsx
@@ -10,6 +10,7 @@ const Context = React.createContext<PlaybackContext | null>(null);
 
 function PlaybackContextProvider({children}: ChildrenProps) {
     const [currentlyPlayingURL, setCurrentlyPlayingURL] = useState<string | null>(null);
+    const [currentlyPlayingURLReportID, setCurrentlyPlayingURLReportID] = useState<string | undefined>();
     const [sharedElement, setSharedElement] = useState<View | HTMLDivElement | null>(null);
     const [originalParent, setOriginalParent] = useState<View | HTMLDivElement | null>(null);
     const currentVideoPlayerRef = useRef<VideoWithOnFullScreenUpdate | null>(null);
@@ -21,7 +22,7 @@ function PlaybackContextProvider({children}: ChildrenProps) {
     }, [currentVideoPlayerRef]);
 
     const stopVideo = useCallback(() => {
-        currentVideoPlayerRef.current?.stopAsync?.();
+        currentVideoPlayerRef.current?.setStatusAsync?.({shouldPlay: false, positionMillis: 0});
     }, [currentVideoPlayerRef]);
 
     const playVideo = useCallback(() => {
@@ -43,9 +44,10 @@ function PlaybackContextProvider({children}: ChildrenProps) {
             if (currentlyPlayingURL && url !== currentlyPlayingURL) {
                 pauseVideo();
             }
+            setCurrentlyPlayingURLReportID(currentReportID);
             setCurrentlyPlayingURL(url);
         },
-        [currentlyPlayingURL, pauseVideo],
+        [currentlyPlayingURL, currentReportID, pauseVideo],
     );
 
     const shareVideoPlayerElements = useCallback(
@@ -91,6 +93,7 @@ function PlaybackContextProvider({children}: ChildrenProps) {
         () => ({
             updateCurrentlyPlayingURL,
             currentlyPlayingURL,
+            currentlyPlayingURLReportID,
             originalParent,
             sharedElement,
             currentVideoPlayerRef,
@@ -101,7 +104,18 @@ function PlaybackContextProvider({children}: ChildrenProps) {
             checkVideoPlaying,
             videoResumeTryNumber,
         }),
-        [updateCurrentlyPlayingURL, currentlyPlayingURL, originalParent, sharedElement, shareVideoPlayerElements, playVideo, pauseVideo, checkVideoPlaying, setCurrentlyPlayingURL],
+        [
+            updateCurrentlyPlayingURL,
+            currentlyPlayingURL,
+            currentlyPlayingURLReportID,
+            originalParent,
+            sharedElement,
+            shareVideoPlayerElements,
+            playVideo,
+            pauseVideo,
+            checkVideoPlaying,
+            setCurrentlyPlayingURL,
+        ],
     );
     return <Context.Provider value={contextValue}>{children}</Context.Provider>;
 }

diff --git a/src/components/VideoPlayerContexts/types.ts b/src/components/VideoPlayerContexts/types.ts
@@ -9,6 +9,7 @@ import type CONST from '@src/CONST';
 type PlaybackContext = {
     updateCurrentlyPlayingURL: (url: string | null) => void;
     currentlyPlayingURL: string | null;
+    currentlyPlayingURLReportID: string | undefined;
     originalParent: View | HTMLDivElement | null;
     sharedElement: View | HTMLDivElement | null;
     videoResumeTryNumber: MutableRefObject<number>;

diff --git a/src/components/VideoPlayerPreview/index.tsx b/src/components/VideoPlayerPreview/index.tsx
@@ -21,6 +21,9 @@ type VideoPlayerPreviewProps = {
     /** Url to a video. */
     videoUrl: string;
 
+    /** reportID of the video */
+    reportID: string;
+
     /** Dimension of a video. */
     videoDimensions: VideoDimensions;
 
@@ -37,10 +40,10 @@ type VideoPlayerPreviewProps = {
     onShowModalPress: (event?: GestureResponderEvent | KeyboardEvent) => void | Promise<void>;
 };
 
-function VideoPlayerPreview({videoUrl, thumbnailUrl, fileName, videoDimensions, videoDuration, onShowModalPress}: VideoPlayerPreviewProps) {
+function VideoPlayerPreview({videoUrl, thumbnailUrl, reportID, fileName, videoDimensions, videoDuration, onShowModalPress}: VideoPlayerPreviewProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
-    const {currentlyPlayingURL, updateCurrentlyPlayingURL} = usePlaybackContext();
+    const {currentlyPlayingURL, currentlyPlayingURLReportID, updateCurrentlyPlayingURL} = usePlaybackContext();
     const {isSmallScreenWidth} = useWindowDimensions();
     const [isThumbnail, setIsThumbnail] = useState(true);
     const [measuredDimensions, setMeasuredDimensions] = useState(videoDimensions);
@@ -60,11 +63,11 @@ function VideoPlayerPreview({videoUrl, thumbnailUrl, fileName, videoDimensions,
     };
 
     useEffect(() => {
-        if (videoUrl !== currentlyPlayingURL) {
+        if (videoUrl !== currentlyPlayingURL || reportID !== currentlyPlayingURLReportID) {
             return;
         }
         setIsThumbnail(false);
-    }, [currentlyPlayingURL, updateCurrentlyPlayingURL, videoUrl]);
+    }, [currentlyPlayingURL, currentlyPlayingURLReportID, updateCurrentlyPlayingURL, videoUrl, reportID]);
 
     return (
         <View style={[styles.webViewStyles.tagStyles.video, thumbnailDimensionsStyles]}>