From a4e8fe538b8f70c04edc73412c7b034fd3a1237d Mon Sep 17 00:00:00 2001 From: kmichel Date: Thu, 25 Apr 2024 06:00:12 -0700 Subject: [PATCH 1/4] fix download error --- src/components/VideoPlayer/BaseVideoPlayer.tsx | 3 +++ .../VideoPlayerContexts/VideoPopoverMenuContext.tsx | 12 +++++++----- src/components/VideoPlayerContexts/types.ts | 1 + 3 files changed, 11 insertions(+), 5 deletions(-) diff --git a/src/components/VideoPlayer/BaseVideoPlayer.tsx b/src/components/VideoPlayer/BaseVideoPlayer.tsx index 0138e2f870e1..f295c39f410e 100644 --- a/src/components/VideoPlayer/BaseVideoPlayer.tsx +++ b/src/components/VideoPlayer/BaseVideoPlayer.tsx @@ -10,6 +10,7 @@ import Hoverable from '@components/Hoverable'; import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback'; import {useFullScreenContext} from '@components/VideoPlayerContexts/FullScreenContext'; import {usePlaybackContext} from '@components/VideoPlayerContexts/PlaybackContext'; +import {useVideoPopoverMenuContext} from '@components/VideoPlayerContexts/VideoPopoverMenuContext'; import {useVolumeContext} from '@components/VideoPlayerContexts/VolumeContext'; import VideoPopoverMenu from '@components/VideoPopoverMenu'; import useNetwork from '@hooks/useNetwork'; @@ -79,6 +80,7 @@ function BaseVideoPlayer({ const isUploading = CONST.ATTACHMENT_LOCAL_URL_PREFIX.some((prefix) => url.startsWith(prefix)); const videoStateRef = useRef(null); const {updateVolume} = useVolumeContext(); + const {playerRef} = useVideoPopoverMenuContext(); const togglePlayCurrentVideo = useCallback(() => { videoResumeTryNumber.current = 0; @@ -93,6 +95,7 @@ function BaseVideoPlayer({ const showPopoverMenu = (event?: GestureResponderEvent | KeyboardEvent) => { setIsPopoverVisible(true); + playerRef.current = videoPlayerRef.current; if (!event || !('nativeEvent' in event)) { return; } diff --git a/src/components/VideoPlayerContexts/VideoPopoverMenuContext.tsx b/src/components/VideoPlayerContexts/VideoPopoverMenuContext.tsx index f953ed802623..1a74616bac40 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'; @@ -18,6 +19,7 @@ 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 updatePlaybackSpeed = useCallback( (speed: PlaybackSpeed) => { @@ -28,12 +30,12 @@ function VideoPopoverMenuContextProvider({children}: ChildrenProps) { ); const downloadAttachment = useCallback(() => { - if (currentlyPlayingURL === null) { + if (playerRef.current === null) { return; } - const sourceURI = addEncryptedAuthTokenToURL(currentlyPlayingURL); + const sourceURI = addEncryptedAuthTokenToURL(playerRef.current.props.source?.uri); fileDownload(sourceURI); - }, [currentlyPlayingURL]); + }, [playerRef]); const menuItems = useMemo(() => { const items: PopoverMenuItem[] = []; @@ -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}), [menuItems, playerRef, updatePlaybackSpeed]); return {children}; } diff --git a/src/components/VideoPlayerContexts/types.ts b/src/components/VideoPlayerContexts/types.ts index ff8d9378caf7..6323c83d6d9e 100644 --- a/src/components/VideoPlayerContexts/types.ts +++ b/src/components/VideoPlayerContexts/types.ts @@ -28,6 +28,7 @@ type VolumeContext = { type VideoPopoverMenuContext = { menuItems: PopoverMenuItem[]; + playerRef: MutableRefObject; updatePlaybackSpeed: (speed: PlaybackSpeed) => void; }; From 7ffafd7c428b0d52e31f0de715d54a7095743f8d Mon Sep 17 00:00:00 2001 From: kmichel Date: Thu, 25 Apr 2024 07:32:00 -0700 Subject: [PATCH 2/4] fix type error --- src/components/VideoPlayerContexts/VideoPopoverMenuContext.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/VideoPlayerContexts/VideoPopoverMenuContext.tsx b/src/components/VideoPlayerContexts/VideoPopoverMenuContext.tsx index 1a74616bac40..cd8833039b09 100644 --- a/src/components/VideoPlayerContexts/VideoPopoverMenuContext.tsx +++ b/src/components/VideoPlayerContexts/VideoPopoverMenuContext.tsx @@ -10,6 +10,7 @@ import CONST from '@src/CONST'; import type ChildrenProps from '@src/types/utils/ChildrenProps'; import {usePlaybackContext} from './PlaybackContext'; import type {PlaybackSpeed, VideoPopoverMenuContext} from './types'; +import { AVPlaybackSourceObject } from 'expo-av'; const Context = React.createContext(null); @@ -33,7 +34,7 @@ function VideoPopoverMenuContextProvider({children}: ChildrenProps) { if (playerRef.current === null) { return; } - const sourceURI = addEncryptedAuthTokenToURL(playerRef.current.props.source?.uri); + const sourceURI = addEncryptedAuthTokenToURL((playerRef.current.props.source as AVPlaybackSourceObject).uri); fileDownload(sourceURI); }, [playerRef]); From 50b3cb4f2af85a17dd025ab712767b2d01e91f09 Mon Sep 17 00:00:00 2001 From: kmichel Date: Fri, 26 Apr 2024 10:11:01 -0700 Subject: [PATCH 3/4] update ref name --- src/components/VideoPlayer/BaseVideoPlayer.tsx | 4 ++-- .../VideoPlayerContexts/VideoPopoverMenuContext.tsx | 12 ++++++------ src/components/VideoPlayerContexts/types.ts | 2 +- 3 files changed, 9 insertions(+), 9 deletions(-) diff --git a/src/components/VideoPlayer/BaseVideoPlayer.tsx b/src/components/VideoPlayer/BaseVideoPlayer.tsx index f295c39f410e..d1d7f0ee34da 100644 --- a/src/components/VideoPlayer/BaseVideoPlayer.tsx +++ b/src/components/VideoPlayer/BaseVideoPlayer.tsx @@ -80,7 +80,7 @@ function BaseVideoPlayer({ const isUploading = CONST.ATTACHMENT_LOCAL_URL_PREFIX.some((prefix) => url.startsWith(prefix)); const videoStateRef = useRef(null); const {updateVolume} = useVolumeContext(); - const {playerRef} = useVideoPopoverMenuContext(); + const {videoPopoverMenuPlayerRef} = useVideoPopoverMenuContext(); const togglePlayCurrentVideo = useCallback(() => { videoResumeTryNumber.current = 0; @@ -95,7 +95,7 @@ function BaseVideoPlayer({ const showPopoverMenu = (event?: GestureResponderEvent | KeyboardEvent) => { setIsPopoverVisible(true); - playerRef.current = videoPlayerRef.current; + videoPopoverMenuPlayerRef.current = videoPlayerRef.current; if (!event || !('nativeEvent' in event)) { return; } diff --git a/src/components/VideoPlayerContexts/VideoPopoverMenuContext.tsx b/src/components/VideoPlayerContexts/VideoPopoverMenuContext.tsx index cd8833039b09..b74a26caa628 100644 --- a/src/components/VideoPlayerContexts/VideoPopoverMenuContext.tsx +++ b/src/components/VideoPlayerContexts/VideoPopoverMenuContext.tsx @@ -1,3 +1,4 @@ +import type {AVPlaybackSourceObject} from 'expo-av'; import React, {useCallback, useContext, useMemo, useRef, useState} from 'react'; import * as Expensicons from '@components/Icon/Expensicons'; import type {PopoverMenuItem} from '@components/PopoverMenu'; @@ -10,7 +11,6 @@ import CONST from '@src/CONST'; import type ChildrenProps from '@src/types/utils/ChildrenProps'; import {usePlaybackContext} from './PlaybackContext'; import type {PlaybackSpeed, VideoPopoverMenuContext} from './types'; -import { AVPlaybackSourceObject } from 'expo-av'; const Context = React.createContext(null); @@ -20,7 +20,7 @@ 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) => { @@ -31,12 +31,12 @@ function VideoPopoverMenuContextProvider({children}: ChildrenProps) { ); const downloadAttachment = useCallback(() => { - if (playerRef.current === null) { + if (videoPopoverMenuPlayerRef.current === null) { return; } - const sourceURI = addEncryptedAuthTokenToURL((playerRef.current.props.source as AVPlaybackSourceObject).uri); + const sourceURI = addEncryptedAuthTokenToURL((videoPopoverMenuPlayerRef.current.props.source as AVPlaybackSourceObject).uri); fileDownload(sourceURI); - }, [playerRef]); + }, [videoPopoverMenuPlayerRef]); const menuItems = useMemo(() => { const items: PopoverMenuItem[] = []; @@ -66,7 +66,7 @@ function VideoPopoverMenuContextProvider({children}: ChildrenProps) { return items; }, [currentPlaybackSpeed, downloadAttachment, translate, updatePlaybackSpeed, isOffline, isLocalFile]); - const contextValue = useMemo(() => ({menuItems, playerRef, updatePlaybackSpeed}), [menuItems, playerRef, updatePlaybackSpeed]); + const contextValue = useMemo(() => ({menuItems, videoPopoverMenuPlayerRef, updatePlaybackSpeed}), [menuItems, videoPopoverMenuPlayerRef, updatePlaybackSpeed]); return {children}; } diff --git a/src/components/VideoPlayerContexts/types.ts b/src/components/VideoPlayerContexts/types.ts index 6323c83d6d9e..ea09281d7676 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; }; From 9415778b189fbe1035189173b6d7fa6bb7d0ab34 Mon Sep 17 00:00:00 2001 From: kmichel Date: Mon, 29 Apr 2024 16:33:11 -0700 Subject: [PATCH 4/4] fix type issue --- .../VideoPlayerContexts/VideoPopoverMenuContext.tsx | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/components/VideoPlayerContexts/VideoPopoverMenuContext.tsx b/src/components/VideoPlayerContexts/VideoPopoverMenuContext.tsx index b74a26caa628..29156c438d3d 100644 --- a/src/components/VideoPlayerContexts/VideoPopoverMenuContext.tsx +++ b/src/components/VideoPlayerContexts/VideoPopoverMenuContext.tsx @@ -1,4 +1,3 @@ -import type {AVPlaybackSourceObject} from 'expo-av'; import React, {useCallback, useContext, useMemo, useRef, useState} from 'react'; import * as Expensicons from '@components/Icon/Expensicons'; import type {PopoverMenuItem} from '@components/PopoverMenu'; @@ -34,7 +33,11 @@ function VideoPopoverMenuContextProvider({children}: ChildrenProps) { if (videoPopoverMenuPlayerRef.current === null) { return; } - const sourceURI = addEncryptedAuthTokenToURL((videoPopoverMenuPlayerRef.current.props.source as AVPlaybackSourceObject).uri); + const {source} = videoPopoverMenuPlayerRef.current?.props ?? {}; + if (typeof source === 'number' || !source) { + return; + } + const sourceURI = addEncryptedAuthTokenToURL(source.uri); fileDownload(sourceURI); }, [videoPopoverMenuPlayerRef]);