From ed94034f4dc70370055716535b73660d6d2aaab9 Mon Sep 17 00:00:00 2001 From: kmichel Date: Thu, 25 Apr 2024 04:19:04 -0700 Subject: [PATCH 1/4] fix playback speed error --- src/components/VideoPlayer/BaseVideoPlayer.tsx | 10 ++++++++++ .../VideoPlayerContexts/VideoPopoverMenuContext.tsx | 12 +++++++----- src/components/VideoPlayerContexts/types.ts | 2 ++ 3 files changed, 19 insertions(+), 5 deletions(-) diff --git a/src/components/VideoPlayer/BaseVideoPlayer.tsx b/src/components/VideoPlayer/BaseVideoPlayer.tsx index 0138e2f870e1..8124e4502ea0 100644 --- a/src/components/VideoPlayer/BaseVideoPlayer.tsx +++ b/src/components/VideoPlayer/BaseVideoPlayer.tsx @@ -10,6 +10,8 @@ import Hoverable from '@components/Hoverable'; import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback'; import {useFullScreenContext} from '@components/VideoPlayerContexts/FullScreenContext'; import {usePlaybackContext} from '@components/VideoPlayerContexts/PlaybackContext'; +import type {PlaybackSpeed} from '@components/VideoPlayerContexts/types'; +import {useVideoPopoverMenuContext} from '@components/VideoPlayerContexts/VideoPopoverMenuContext'; import {useVolumeContext} from '@components/VideoPlayerContexts/VolumeContext'; import VideoPopoverMenu from '@components/VideoPopoverMenu'; import useNetwork from '@hooks/useNetwork'; @@ -79,6 +81,7 @@ function BaseVideoPlayer({ const isUploading = CONST.ATTACHMENT_LOCAL_URL_PREFIX.some((prefix) => url.startsWith(prefix)); const videoStateRef = useRef(null); const {updateVolume} = useVolumeContext(); + const {playerRef, setCurrentPlaybackSpeed} = useVideoPopoverMenuContext(); const togglePlayCurrentVideo = useCallback(() => { videoResumeTryNumber.current = 0; @@ -93,6 +96,13 @@ function BaseVideoPlayer({ const showPopoverMenu = (event?: GestureResponderEvent | KeyboardEvent) => { setIsPopoverVisible(true); + playerRef.current = videoPlayerRef.current; + videoPlayerRef.current?.getStatusAsync().then((status) => { + if (!('rate' in status && status.rate)) { + return; + } + setCurrentPlaybackSpeed(status.rate as PlaybackSpeed); + }); if (!event || !('nativeEvent' in event)) { return; } diff --git a/src/components/VideoPlayerContexts/VideoPopoverMenuContext.tsx b/src/components/VideoPlayerContexts/VideoPopoverMenuContext.tsx index f953ed802623..e6deb498bd42 100644 --- a/src/components/VideoPlayerContexts/VideoPopoverMenuContext.tsx +++ b/src/components/VideoPlayerContexts/VideoPopoverMenuContext.tsx @@ -1,6 +1,7 @@ -import React, {useCallback, useContext, useMemo, useState} from 'react'; +import React, {useCallback, useContext, useMemo, useRef, useState} from 'react'; import * as Expensicons from '@components/Icon/Expensicons'; import type {PopoverMenuItem} from '@components/PopoverMenu'; +import type {VideoWithOnFullScreenUpdate} from '@components/VideoPlayer/types'; import useLocalize from '@hooks/useLocalize'; import useNetwork from '@hooks/useNetwork'; import addEncryptedAuthTokenToURL from '@libs/addEncryptedAuthTokenToURL'; @@ -13,18 +14,19 @@ import type {PlaybackSpeed, VideoPopoverMenuContext} from './types'; const Context = React.createContext(null); function VideoPopoverMenuContextProvider({children}: ChildrenProps) { - const {currentVideoPlayerRef, currentlyPlayingURL} = usePlaybackContext(); + const {currentlyPlayingURL} = usePlaybackContext(); const {translate} = useLocalize(); const [currentPlaybackSpeed, setCurrentPlaybackSpeed] = useState(CONST.VIDEO_PLAYER.PLAYBACK_SPEEDS[2]); const {isOffline} = useNetwork(); const isLocalFile = currentlyPlayingURL && CONST.ATTACHMENT_LOCAL_URL_PREFIX.some((prefix) => currentlyPlayingURL.startsWith(prefix)); + const playerRef = useRef(null); const updatePlaybackSpeed = useCallback( (speed: PlaybackSpeed) => { setCurrentPlaybackSpeed(speed); - currentVideoPlayerRef.current?.setStatusAsync?.({rate: speed}); + playerRef.current?.setStatusAsync?.({rate: speed}); }, - [currentVideoPlayerRef], + [playerRef], ); const downloadAttachment = useCallback(() => { @@ -63,7 +65,7 @@ function VideoPopoverMenuContextProvider({children}: ChildrenProps) { return items; }, [currentPlaybackSpeed, downloadAttachment, translate, updatePlaybackSpeed, isOffline, isLocalFile]); - const contextValue = useMemo(() => ({menuItems, updatePlaybackSpeed}), [menuItems, updatePlaybackSpeed]); + const contextValue = useMemo(() => ({menuItems, playerRef, updatePlaybackSpeed, setCurrentPlaybackSpeed}), [menuItems, playerRef, updatePlaybackSpeed, setCurrentPlaybackSpeed]); return {children}; } diff --git a/src/components/VideoPlayerContexts/types.ts b/src/components/VideoPlayerContexts/types.ts index ff8d9378caf7..9dc5cbcfd628 100644 --- a/src/components/VideoPlayerContexts/types.ts +++ b/src/components/VideoPlayerContexts/types.ts @@ -28,7 +28,9 @@ type VolumeContext = { type VideoPopoverMenuContext = { menuItems: PopoverMenuItem[]; + playerRef: MutableRefObject; updatePlaybackSpeed: (speed: PlaybackSpeed) => void; + setCurrentPlaybackSpeed: (speed: PlaybackSpeed) => void; }; type FullScreenContext = { From 29a23c26a36a32d914fd86fd13735a1401335212 Mon Sep 17 00:00:00 2001 From: kmichel Date: Fri, 26 Apr 2024 08:11:30 -0700 Subject: [PATCH 2/4] update ref name --- src/components/VideoPlayer/BaseVideoPlayer.tsx | 4 ++-- .../VideoPlayerContexts/VideoPopoverMenuContext.tsx | 8 ++++---- src/components/VideoPlayerContexts/types.ts | 2 +- 3 files changed, 7 insertions(+), 7 deletions(-) diff --git a/src/components/VideoPlayer/BaseVideoPlayer.tsx b/src/components/VideoPlayer/BaseVideoPlayer.tsx index 04cfdf11d0e9..2ce33cb442de 100644 --- a/src/components/VideoPlayer/BaseVideoPlayer.tsx +++ b/src/components/VideoPlayer/BaseVideoPlayer.tsx @@ -81,7 +81,7 @@ function BaseVideoPlayer({ const isUploading = CONST.ATTACHMENT_LOCAL_URL_PREFIX.some((prefix) => url.startsWith(prefix)); const videoStateRef = useRef(null); const {updateVolume} = useVolumeContext(); - const {playerRef, setCurrentPlaybackSpeed} = useVideoPopoverMenuContext(); + const {videoPopoverMenuPlayerRef, setCurrentPlaybackSpeed} = useVideoPopoverMenuContext(); const togglePlayCurrentVideo = useCallback(() => { videoResumeTryNumber.current = 0; @@ -96,7 +96,7 @@ function BaseVideoPlayer({ const showPopoverMenu = (event?: GestureResponderEvent | KeyboardEvent) => { setIsPopoverVisible(true); - playerRef.current = videoPlayerRef.current; + videoPopoverMenuPlayerRef.current = videoPlayerRef.current; videoPlayerRef.current?.getStatusAsync().then((status) => { if (!('rate' in status && status.rate)) { return; diff --git a/src/components/VideoPlayerContexts/VideoPopoverMenuContext.tsx b/src/components/VideoPlayerContexts/VideoPopoverMenuContext.tsx index e6deb498bd42..79c503494b19 100644 --- a/src/components/VideoPlayerContexts/VideoPopoverMenuContext.tsx +++ b/src/components/VideoPlayerContexts/VideoPopoverMenuContext.tsx @@ -19,14 +19,14 @@ function VideoPopoverMenuContextProvider({children}: ChildrenProps) { const [currentPlaybackSpeed, setCurrentPlaybackSpeed] = useState(CONST.VIDEO_PLAYER.PLAYBACK_SPEEDS[2]); const {isOffline} = useNetwork(); const isLocalFile = currentlyPlayingURL && CONST.ATTACHMENT_LOCAL_URL_PREFIX.some((prefix) => currentlyPlayingURL.startsWith(prefix)); - const playerRef = useRef(null); + const videoPopoverMenuPlayerRef = useRef(null); const updatePlaybackSpeed = useCallback( (speed: PlaybackSpeed) => { setCurrentPlaybackSpeed(speed); - playerRef.current?.setStatusAsync?.({rate: speed}); + videoPopoverMenuPlayerRef.current?.setStatusAsync?.({rate: speed}); }, - [playerRef], + [videoPopoverMenuPlayerRef], ); const downloadAttachment = useCallback(() => { @@ -65,7 +65,7 @@ function VideoPopoverMenuContextProvider({children}: ChildrenProps) { return items; }, [currentPlaybackSpeed, downloadAttachment, translate, updatePlaybackSpeed, isOffline, isLocalFile]); - const contextValue = useMemo(() => ({menuItems, playerRef, updatePlaybackSpeed, setCurrentPlaybackSpeed}), [menuItems, playerRef, updatePlaybackSpeed, setCurrentPlaybackSpeed]); + const contextValue = useMemo(() => ({menuItems, videoPopoverMenuPlayerRef, updatePlaybackSpeed, setCurrentPlaybackSpeed}), [menuItems, videoPopoverMenuPlayerRef, updatePlaybackSpeed, setCurrentPlaybackSpeed]); return {children}; } diff --git a/src/components/VideoPlayerContexts/types.ts b/src/components/VideoPlayerContexts/types.ts index 9dc5cbcfd628..6216fd5dc85b 100644 --- a/src/components/VideoPlayerContexts/types.ts +++ b/src/components/VideoPlayerContexts/types.ts @@ -28,7 +28,7 @@ type VolumeContext = { type VideoPopoverMenuContext = { menuItems: PopoverMenuItem[]; - playerRef: MutableRefObject; + videoPopoverMenuPlayerRef: MutableRefObject; updatePlaybackSpeed: (speed: PlaybackSpeed) => void; setCurrentPlaybackSpeed: (speed: PlaybackSpeed) => void; }; From daaf9fac72da97df4c394341a55cadc0394fe19f Mon Sep 17 00:00:00 2001 From: kmichel Date: Fri, 26 Apr 2024 09:12:47 -0700 Subject: [PATCH 3/4] prettier --- .../VideoPlayerContexts/VideoPopoverMenuContext.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/components/VideoPlayerContexts/VideoPopoverMenuContext.tsx b/src/components/VideoPlayerContexts/VideoPopoverMenuContext.tsx index 79c503494b19..188764f73e91 100644 --- a/src/components/VideoPlayerContexts/VideoPopoverMenuContext.tsx +++ b/src/components/VideoPlayerContexts/VideoPopoverMenuContext.tsx @@ -65,7 +65,10 @@ function VideoPopoverMenuContextProvider({children}: ChildrenProps) { return items; }, [currentPlaybackSpeed, downloadAttachment, translate, updatePlaybackSpeed, isOffline, isLocalFile]); - const contextValue = useMemo(() => ({menuItems, videoPopoverMenuPlayerRef, updatePlaybackSpeed, setCurrentPlaybackSpeed}), [menuItems, videoPopoverMenuPlayerRef, updatePlaybackSpeed, setCurrentPlaybackSpeed]); + const contextValue = useMemo( + () => ({menuItems, videoPopoverMenuPlayerRef, updatePlaybackSpeed, setCurrentPlaybackSpeed}), + [menuItems, videoPopoverMenuPlayerRef, updatePlaybackSpeed, setCurrentPlaybackSpeed], + ); return {children}; } From b1a6caf52b73a0904b398cb3dcbfec4bb2c1b3ff Mon Sep 17 00:00:00 2001 From: kmichel Date: Wed, 8 May 2024 00:19:34 -0700 Subject: [PATCH 4/4] fix issue --- src/components/VideoPlayer/BaseVideoPlayer.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/VideoPlayer/BaseVideoPlayer.tsx b/src/components/VideoPlayer/BaseVideoPlayer.tsx index 2ce33cb442de..6d2577ef5ff9 100644 --- a/src/components/VideoPlayer/BaseVideoPlayer.tsx +++ b/src/components/VideoPlayer/BaseVideoPlayer.tsx @@ -95,12 +95,12 @@ function BaseVideoPlayer({ }, [isCurrentlyURLSet, isPlaying, pauseVideo, playVideo, updateCurrentlyPlayingURL, url, videoResumeTryNumber]); const showPopoverMenu = (event?: GestureResponderEvent | KeyboardEvent) => { - setIsPopoverVisible(true); videoPopoverMenuPlayerRef.current = videoPlayerRef.current; videoPlayerRef.current?.getStatusAsync().then((status) => { if (!('rate' in status && status.rate)) { return; } + setIsPopoverVisible(true); setCurrentPlaybackSpeed(status.rate as PlaybackSpeed); }); if (!event || !('nativeEvent' in event)) {