Merge pull request #36898 from dukenv0307/fix/36827

Implement control playback speed

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 (
             <AttachmentViewVideo
                 source={source}

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(() => {

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;

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],
     );