Merge pull request Expensify#85195 from yuvrajangadsingh/fix/84443-thread-playback-speed

fix: sync playback speed between parent and thread video players

Author: AndrewGable

src/components/VideoPlayer/BaseVideoPlayer.tsx

@@ -15,7 +15,6 @@ import {useSession} from '@components/OnyxListItemProvider';
 import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback';
 import {useFullScreenState} from '@components/VideoPlayerContexts/FullScreenContextProvider';
 import {usePlaybackActionsContext, usePlaybackStateContext} from '@components/VideoPlayerContexts/PlaybackContext';
-import type {PlaybackSpeed} from '@components/VideoPlayerContexts/types';
 import {useVideoPopoverMenuActions} from '@components/VideoPlayerContexts/VideoPopoverMenuContext';
 import {useVolumeActions, useVolumeState} from '@components/VideoPlayerContexts/VolumeContext';
 import VideoPopoverMenu from '@components/VideoPopoverMenu';
@@ -165,7 +164,7 @@ function BaseVideoPlayer({
         isLocalFile: isUploading,
     });
 
-    const {updateVideoPopoverMenuPlayerRef, updatePlaybackSpeed, updateSource: updatePopoverMenuSource} = useVideoPopoverMenuActions();
+    const {updateVideoPopoverMenuPlayerRef, updateSource: updatePopoverMenuSource} = useVideoPopoverMenuActions();
 
     const togglePlayCurrentVideo = useCallback(() => {
         if (!isCurrentlyURLSet) {
@@ -246,10 +245,9 @@ function BaseVideoPlayer({
 
     const showPopoverMenu = (event?: GestureResponderEvent | KeyboardEvent) => {
         updateVideoPopoverMenuPlayerRef(videoPlayerRef.current);
-        if (!videoPlayerRef.current?.playbackRate) {
+        if (!videoPlayerRef.current) {
             return;
         }
-        updatePlaybackSpeed(videoPlayerRef.current.playbackRate as PlaybackSpeed);
         setIsPopoverVisible(true);
 
         updatePopoverMenuSource(url);

src/components/VideoPlayerContexts/VideoPopoverMenuContext.tsx

@@ -1,5 +1,5 @@
 import type {VideoPlayer} from 'expo-video';
-import React, {useCallback, useContext, useMemo, useRef, useState} from 'react';
+import React, {useCallback, useContext, useEffect, useMemo, useRef, useState} from 'react';
 import {useSession} from '@components/OnyxListItemProvider';
 import type {PopoverMenuItem} from '@components/PopoverMenu';
 import {useMemoizedLazyExpensifyIcons} from '@hooks/useLazyAsset';
@@ -9,6 +9,7 @@ import addEncryptedAuthTokenToURL from '@libs/addEncryptedAuthTokenToURL';
 import fileDownload from '@libs/fileDownload';
 import CONST from '@src/CONST';
 import type ChildrenProps from '@src/types/utils/ChildrenProps';
+import {usePlaybackStateContext} from './PlaybackContext';
 import type {PlaybackSpeed, VideoPopoverMenuActionsContextType, VideoPopoverMenuStateContextType} from './types';
 
 const VideoPopoverMenuStateContext = React.createContext<VideoPopoverMenuStateContextType | null>(null);
@@ -17,6 +18,7 @@ const VideoPopoverMenuActionsContext = React.createContext<VideoPopoverMenuActio
 function VideoPopoverMenuContextProvider({children}: ChildrenProps) {
     const icons = useMemoizedLazyExpensifyIcons(['Checkmark', 'Download', 'Meter'] as const);
     const {translate} = useLocalize();
+    const {currentVideoPlayerRef, originalParent} = usePlaybackStateContext();
     const [source, setSource] = useState('');
     const [currentPlaybackSpeed, setCurrentPlaybackSpeed] = useState<PlaybackSpeed>(CONST.VIDEO_PLAYER.PLAYBACK_SPEEDS[3]);
     const {isOffline} = useNetwork();
@@ -39,6 +41,18 @@ function VideoPopoverMenuContextProvider({children}: ChildrenProps) {
         [videoPopoverMenuPlayerRef],
     );
 
+    // Apply stored playback speed when the active player changes (e.g. navigating from parent to thread).
+    // Same pattern as VolumeContext which re-applies volume on originalParent change.
+    useEffect(() => {
+        if (!originalParent || !currentVideoPlayerRef.current) {
+            return;
+        }
+
+        if (currentVideoPlayerRef.current.playbackRate !== currentPlaybackSpeed) {
+            currentVideoPlayerRef.current.playbackRate = currentPlaybackSpeed;
+        }
+    }, [originalParent, currentPlaybackSpeed]);
+
     const updateVideoPopoverMenuPlayerRef = (videoPlayer: VideoPlayer | null) => {
         videoPopoverMenuPlayerRef.current = videoPlayer;
     };