From a5ef9ecb3efb47c346a27ef701e926d1d459c78c Mon Sep 17 00:00:00 2001 From: dukenv0307 Date: Tue, 20 Feb 2024 21:39:59 +0700 Subject: [PATCH 1/4] implement control playback speed --- src/components/VideoPlayer/BaseVideoPlayer.js | 3 +++ src/components/VideoPlayerContexts/VideoPopoverMenuContext.js | 2 +- 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/src/components/VideoPlayer/BaseVideoPlayer.js b/src/components/VideoPlayer/BaseVideoPlayer.js index 73dbf8407c0c..d369841197e5 100644 --- a/src/components/VideoPlayer/BaseVideoPlayer.js +++ b/src/components/VideoPlayer/BaseVideoPlayer.js @@ -6,6 +6,7 @@ import FullScreenLoadingIndicator from '@components/FullscreenLoadingIndicator'; import Hoverable from '@components/Hoverable'; import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback'; import {usePlaybackContext} from '@components/VideoPlayerContexts/PlaybackContext'; +import {useVideoPopoverMenuContext} from '@components/VideoPlayerContexts/VideoPopoverMenuContext'; import VideoPopoverMenu from '@components/VideoPopoverMenu'; import useThemeStyles from '@hooks/useThemeStyles'; import useWindowDimensions from '@hooks/useWindowDimensions'; @@ -43,6 +44,7 @@ function BaseVideoPlayer({ const {isSmallScreenWidth} = useWindowDimensions(); const {pauseVideo, playVideo, currentlyPlayingURL, updateSharedElements, sharedElement, originalParent, shareVideoPlayerElements, currentVideoPlayerRef, updateCurrentlyPlayingURL} = usePlaybackContext(); + const {playbackSpeed} = useVideoPopoverMenuContext(); const [duration, setDuration] = useState(videoDuration * 1000); const [position, setPosition] = useState(0); const [isPlaying, setIsPlaying] = useState(false); @@ -207,6 +209,7 @@ function BaseVideoPlayer({ source={{ uri: sourceURL, }} + rate={playbackSpeed} shouldPlay={false} useNativeControls={false} resizeMode={resizeMode} diff --git a/src/components/VideoPlayerContexts/VideoPopoverMenuContext.js b/src/components/VideoPlayerContexts/VideoPopoverMenuContext.js index 23d1aec1817c..87027d6498fc 100644 --- a/src/components/VideoPlayerContexts/VideoPopoverMenuContext.js +++ b/src/components/VideoPlayerContexts/VideoPopoverMenuContext.js @@ -57,7 +57,7 @@ function VideoPopoverMenuContextProvider({children}) { [currentPlaybackSpeed, downloadAttachment, translate, updatePlaybackSpeed], ); - const contextValue = useMemo(() => ({menuItems, updatePlaybackSpeed}), [menuItems, updatePlaybackSpeed]); + const contextValue = useMemo(() => ({menuItems, playbackSpeed: currentPlaybackSpeed, updatePlaybackSpeed}), [menuItems, currentPlaybackSpeed, updatePlaybackSpeed]); return {children}; } From 2d06cc609cdb621655d578e6af7cbe1f220f0eba Mon Sep 17 00:00:00 2001 From: dukenv0307 Date: Tue, 20 Feb 2024 22:52:50 +0700 Subject: [PATCH 2/4] add new solution to check isVideo correctly --- src/components/Attachments/AttachmentView/index.js | 8 ++++---- src/components/VideoPlayer/BaseVideoPlayer.js | 3 --- .../VideoPlayerContexts/VideoPopoverMenuContext.js | 2 +- 3 files changed, 5 insertions(+), 8 deletions(-) diff --git a/src/components/Attachments/AttachmentView/index.js b/src/components/Attachments/AttachmentView/index.js index 6da7be841537..c871628f65e7 100755 --- a/src/components/Attachments/AttachmentView/index.js +++ b/src/components/Attachments/AttachmentView/index.js @@ -100,14 +100,14 @@ function AttachmentView({ const styles = useThemeStyles(); const StyleUtils = useStyleUtils(); const [loadComplete, setLoadComplete] = useState(false); - const isVideo = typeof source === 'string' && Str.isVideo(source); + const isVideo = (typeof source === 'string' && Str.isVideo(source)) || (file && Str.isVideo(file.name)); useEffect(() => { - if (!isFocused) { + if (!isFocused && !(file && isUsedInAttachmentModal)) { return; } updateCurrentlyPlayingURL(isVideo ? source : null); - }, [isFocused, isVideo, source, updateCurrentlyPlayingURL]); + }, [isFocused, isVideo, source, updateCurrentlyPlayingURL, file, isUsedInAttachmentModal]); const [imageError, setImageError] = useState(false); @@ -201,7 +201,7 @@ function AttachmentView({ ); } - if (isVideo || (file && Str.isVideo(file.name))) { + if (isVideo) { return ( ({menuItems, playbackSpeed: currentPlaybackSpeed, updatePlaybackSpeed}), [menuItems, currentPlaybackSpeed, updatePlaybackSpeed]); + const contextValue = useMemo(() => ({menuItems, updatePlaybackSpeed}), [menuItems, updatePlaybackSpeed]); return {children}; } From 42f05772571ad30a91aa21fa8d63af60a5ecdd69 Mon Sep 17 00:00:00 2001 From: dukenv0307 Date: Thu, 22 Feb 2024 23:10:00 +0700 Subject: [PATCH 3/4] prevent autoplay when uploading attachemnt --- src/components/VideoPlayer/BaseVideoPlayer.js | 7 +++++-- src/components/VideoPlayerContexts/PlaybackContext.js | 7 +++++-- 2 files changed, 10 insertions(+), 4 deletions(-) diff --git a/src/components/VideoPlayer/BaseVideoPlayer.js b/src/components/VideoPlayer/BaseVideoPlayer.js index df79c7ef18da..060bc890d5e7 100644 --- a/src/components/VideoPlayer/BaseVideoPlayer.js +++ b/src/components/VideoPlayer/BaseVideoPlayer.js @@ -2,6 +2,7 @@ import {Video, VideoFullscreenUpdate} from 'expo-av'; import React, {useCallback, useEffect, useRef, useState} from 'react'; import {View} from 'react-native'; +import _ from 'underscore'; import FullScreenLoadingIndicator from '@components/FullscreenLoadingIndicator'; import Hoverable from '@components/Hoverable'; import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback'; @@ -12,6 +13,7 @@ import useWindowDimensions from '@hooks/useWindowDimensions'; import addEncryptedAuthTokenToURL from '@libs/addEncryptedAuthTokenToURL'; import * as Browser from '@libs/Browser'; import * as DeviceCapabilities from '@libs/DeviceCapabilities'; +import CONST from '@src/CONST'; import {videoPlayerDefaultProps, videoPlayerPropTypes} from './propTypes'; import shouldReplayVideo from './shouldReplayVideo'; import VideoPlayerControls from './VideoPlayerControls'; @@ -59,6 +61,7 @@ function BaseVideoPlayer({ const videoResumeTryNumber = useRef(0); const canUseTouchScreen = DeviceCapabilities.canUseTouchScreen(); const isCurrentlyURLSet = currentlyPlayingURL === url; + const isUploading = _.some(CONST.ATTACHMENT_LOCAL_URL_PREFIX, (prefix) => url.startsWith(prefix)); const togglePlayCurrentVideo = useCallback(() => { videoResumeTryNumber.current = 0; @@ -144,8 +147,8 @@ function BaseVideoPlayer({ if (shouldUseSharedVideoElement || url !== currentlyPlayingURL) { return; } - shareVideoPlayerElements(videoPlayerRef.current, videoPlayerElementParentRef.current, videoPlayerElementRef.current); - }, [currentlyPlayingURL, shouldUseSharedVideoElement, shareVideoPlayerElements, updateSharedElements, url]); + shareVideoPlayerElements(videoPlayerRef.current, videoPlayerElementParentRef.current, videoPlayerElementRef.current, isUploading); + }, [currentlyPlayingURL, shouldUseSharedVideoElement, shareVideoPlayerElements, updateSharedElements, url, isUploading]); // append shared video element to new parent (used for example in attachment modal) useEffect(() => { diff --git a/src/components/VideoPlayerContexts/PlaybackContext.js b/src/components/VideoPlayerContexts/PlaybackContext.js index b77068f3aea2..109ad678cd1d 100644 --- a/src/components/VideoPlayerContexts/PlaybackContext.js +++ b/src/components/VideoPlayerContexts/PlaybackContext.js @@ -56,11 +56,14 @@ function PlaybackContextProvider({children}) { ); const shareVideoPlayerElements = useCallback( - (ref, parent, child) => { + (ref, parent, child, isUploading) => { currentVideoPlayerRef.current = ref; setOriginalParent(parent); setSharedElement(child); - playVideo(); + // Prevents autoplay when uploading the attachment + if (!isUploading) { + playVideo(); + } }, [playVideo], ); From 5586e6ceb568978d70dd8558efb81ad4ccd75112 Mon Sep 17 00:00:00 2001 From: dukenv0307 Date: Mon, 26 Feb 2024 17:05:39 +0700 Subject: [PATCH 4/4] fix auto-play when uploading video on android --- src/components/VideoPlayer/shouldReplayVideo.android.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/components/VideoPlayer/shouldReplayVideo.android.ts b/src/components/VideoPlayer/shouldReplayVideo.android.ts index c1c3de034aac..2fae779deae2 100644 --- a/src/components/VideoPlayer/shouldReplayVideo.android.ts +++ b/src/components/VideoPlayer/shouldReplayVideo.android.ts @@ -4,7 +4,9 @@ import type {AVPlaybackStatusSuccess} from 'expo-av'; * Whether to replay the video when users press play button */ export default function shouldReplayVideo(e: AVPlaybackStatusSuccess, isPlaying: boolean, duration: number, position: number): boolean { - if (!isPlaying && !e.didJustFinish && duration === position) { + // When we upload an attachment on Android, didJustFinish is false and the duration is 0 + // so we should return false if the duration is 0 to prevent auto-playing video when the video is uploading + if (!isPlaying && !e.didJustFinish && duration === position && duration !== 0) { return true; } return false;