Merge pull request Expensify#84865 from Uzaifm127/fix/82026

fix: Issues related to video progress and controls especially on Android

Author: inimaga

src/components/VideoPlayer/BaseVideoPlayer.tsx

@@ -6,7 +6,7 @@ import type {RefObject} from 'react';
 import React, {useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState} from 'react';
 import type {GestureResponderEvent} from 'react-native';
 import {View} from 'react-native';
-import {useAnimatedStyle, useSharedValue, withTiming} from 'react-native-reanimated';
+import {cancelAnimation, useAnimatedStyle, useSharedValue, withTiming} from 'react-native-reanimated';
 import {scheduleOnRN} from 'react-native-worklets';
 import AttachmentOfflineIndicator from '@components/AttachmentOfflineIndicator';
 import Hoverable from '@components/Hoverable';
@@ -74,6 +74,8 @@ function BaseVideoPlayer({
     const controlsAnimatedStyle = useAnimatedStyle(() => ({
         opacity: controlsOpacity.get(),
     }));
+    const [isSeeking, setIsSeeking] = useState(false);
+    const allowSharedAutoPlayRef = useRef(true);
 
     /* eslint-disable no-param-reassign */
     // According to the library docs, the player is configured by mutating the provided instance
@@ -183,20 +185,29 @@ function BaseVideoPlayer({
         }
 
         if (isEnded && currentTime >= duration) {
+            allowSharedAutoPlayRef.current = true;
             replayVideo();
             return;
         }
 
+        allowSharedAutoPlayRef.current = true;
         playVideo();
     }, [isCurrentlyURLSet, isLoading, isEnded, currentTime, duration, playVideo, updateCurrentURLAndReportID, url, reportID, pauseVideo, replayVideo]);
 
     const hideControl = useCallback(() => {
-        if (isEnded) {
+        if (isEnded || isSeeking) {
             return;
         }
 
-        controlsOpacity.set(withTiming(0, {duration: 500}, () => scheduleOnRN(setControlStatusState, CONST.VIDEO_PLAYER.CONTROLS_STATUS.HIDE)));
-    }, [controlsOpacity, isEnded]);
+        controlsOpacity.set(
+            withTiming(0, {duration: 500}, (finished) => {
+                if (!finished) {
+                    return;
+                }
+                scheduleOnRN(setControlStatusState, CONST.VIDEO_PLAYER.CONTROLS_STATUS.HIDE);
+            }),
+        );
+    }, [controlsOpacity, isEnded, isSeeking]);
     const debouncedHideControl = useMemo(() => debounce(hideControl, 1500), [hideControl]);
 
     useEffect(() => {
@@ -216,13 +227,13 @@ function BaseVideoPlayer({
         if (controlStatusState !== CONST.VIDEO_PLAYER.CONTROLS_STATUS.SHOW) {
             return;
         }
-        if (!isPlaying || isPopoverVisible) {
+        if (!isPlaying || isPopoverVisible || isSeeking) {
             debouncedHideControl.cancel();
             return;
         }
 
         debouncedHideControl();
-    }, [isPlaying, debouncedHideControl, controlStatusState, isPopoverVisible, canUseTouchScreen]);
+    }, [isPlaying, debouncedHideControl, controlStatusState, isPopoverVisible, canUseTouchScreen, isSeeking]);
 
     useEffect(() => {
         if (!onTap || !controlStatusState) {
@@ -232,6 +243,14 @@ function BaseVideoPlayer({
         onTap(shouldShowArrows);
     }, [controlStatusState, onTap]);
 
+    const restartAutoHide = useCallback(() => {
+        debouncedHideControl.cancel();
+        if (!canUseTouchScreen || !isPlaying || isPopoverVisible || controlStatusState !== CONST.VIDEO_PLAYER.CONTROLS_STATUS.SHOW) {
+            return;
+        }
+        debouncedHideControl();
+    }, [canUseTouchScreen, controlStatusState, debouncedHideControl, isPlaying, isPopoverVisible]);
+
     const stopWheelPropagation = useCallback((ev: WheelEvent) => ev.stopPropagation(), []);
 
     const toggleControl = useCallback(() => {
@@ -398,7 +417,7 @@ function BaseVideoPlayer({
             videoViewRef.current,
             videoPlayerElementParentRef.current,
             videoPlayerElementRef.current,
-            (isUploading && !isCurrentlyURLSet) || isFullScreenRef.current || !isReadyForDisplayRef.current || hasError,
+            (isUploading && !isCurrentlyURLSet) || isFullScreenRef.current || !isReadyForDisplayRef.current || hasError || isSeeking || !allowSharedAutoPlayRef.current,
             {shouldUseSharedVideoElement, url, reportID},
         );
     }, [
@@ -413,6 +432,7 @@ function BaseVideoPlayer({
         isFullScreenRef,
         hasError,
         isCurrentlyURLSet,
+        isSeeking,
         status,
         updatePlayerStatus,
     ]);
@@ -571,7 +591,6 @@ function BaseVideoPlayer({
                             {shouldShowLoadingIndicator && <LoadingIndicator style={[styles.opacity1, styles.bgTransparent]} />}
                             {shouldShowOfflineIndicator && <AttachmentOfflineIndicator isPreview={isPreview} />}
                             {controlStatusState !== CONST.VIDEO_PLAYER.CONTROLS_STATUS.HIDE &&
-                                !shouldShowLoadingIndicator &&
                                 !shouldShowOfflineIndicator &&
                                 !shouldShowErrorIndicator &&
                                 (isPopoverVisible || isHovered || canUseTouchScreen || isEnded) && (
@@ -588,6 +607,21 @@ function BaseVideoPlayer({
                                         controlsStatus={controlStatusState}
                                         showPopoverMenu={showPopoverMenu}
                                         reportID={reportID}
+                                        onSeekStart={() => {
+                                            allowSharedAutoPlayRef.current = false;
+                                            debouncedHideControl.cancel();
+                                            cancelAnimation(controlsOpacity);
+                                            controlsOpacity.set(1);
+                                            setIsSeeking(true);
+                                        }}
+                                        onSeekEnd={(shouldResumeAfterSeek) => {
+                                            setIsSeeking(false);
+                                            if (shouldResumeAfterSeek) {
+                                                allowSharedAutoPlayRef.current = true;
+                                                playVideo();
+                                            }
+                                            restartAutoHide();
+                                        }}
                                     />
                                 )}
                         </View>

src/components/VideoPlayer/VideoPlayerControls/ProgressBar/index.tsx

@@ -16,13 +16,19 @@ type ProgressBarProps = {
 
     /** Function to seek to a specific position in the video. */
     seekPosition: (newPosition: number) => void;
+
+    /** Callback when user starts dragging the slider. */
+    onSeekStart?: () => void;
+
+    /** Callback when user finishes dragging the slider. */
+    onSeekEnd?: (shouldResumeAfterSeek: boolean) => void;
 };
 
 function getProgress(currentPosition: number, maxPosition: number): number {
     return Math.min(Math.max((currentPosition / maxPosition) * 100, 0), 100);
 }
 
-function ProgressBar({duration, position, seekPosition}: ProgressBarProps) {
+function ProgressBar({duration, position, seekPosition, onSeekStart, onSeekEnd}: ProgressBarProps) {
     const styles = useThemeStyles();
     const {pauseVideo, playVideo, checkIfVideoIsPlaying} = usePlaybackActionsContext();
     const [sliderWidth, setSliderWidth] = useState(1);
@@ -52,6 +58,7 @@ function ProgressBar({duration, position, seekPosition}: ProgressBarProps) {
         .onBegin((event) => {
             setIsSliderPressed(true);
             checkIfVideoIsPlaying(onCheckIfVideoIsPlaying);
+            onSeekStart?.();
             pauseVideo();
             progressBarInteraction(event);
         })
@@ -60,7 +67,9 @@ function ProgressBar({duration, position, seekPosition}: ProgressBarProps) {
         })
         .onFinalize(() => {
             setIsSliderPressed(false);
-            if (!wasVideoPlayingOnCheck.get()) {
+            const shouldResumeAfterSeek = wasVideoPlayingOnCheck.get();
+            onSeekEnd?.(shouldResumeAfterSeek);
+            if (onSeekEnd || !shouldResumeAfterSeek) {
                 return;
             }
             playVideo();

src/components/VideoPlayer/VideoPlayerControls/index.tsx

@@ -50,6 +50,12 @@ type VideoPlayerControlsProps = {
     controlsStatus: ValueOf<typeof CONST.VIDEO_PLAYER.CONTROLS_STATUS>;
 
     reportID: string | undefined;
+
+    /** Callback when user starts dragging the progress bar. */
+    onSeekStart?: () => void;
+
+    /** Callback when user finishes dragging the progress bar. */
+    onSeekEnd?: (shouldResumeAfterSeek: boolean) => void;
 };
 
 function VideoPlayerControls({
@@ -65,6 +71,8 @@ function VideoPlayerControls({
     togglePlayCurrentVideo,
     controlsStatus = CONST.VIDEO_PLAYER.CONTROLS_STATUS.SHOW,
     reportID,
+    onSeekStart,
+    onSeekEnd,
 }: VideoPlayerControlsProps) {
     const icons = useMemoizedLazyExpensifyIcons(['ThreeDots', 'Pause', 'Play', 'Fullscreen']);
     const styles = useThemeStyles();
@@ -150,6 +158,8 @@ function VideoPlayerControls({
                         duration={duration}
                         position={position}
                         seekPosition={seekPosition}
+                        onSeekStart={onSeekStart}
+                        onSeekEnd={onSeekEnd}
                     />
                 </View>
                 {controlsStatus === CONST.VIDEO_PLAYER.CONTROLS_STATUS.VOLUME_ONLY && <VolumeButton style={styles.ml3} />}