add fixes and updates for video player

software-mansion-labs · Feb 16, 2024 · 75a2b35 · 75a2b35
1 parent bb7baa9
commit 75a2b35
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 40 deletions.
diff --git a/src/components/OnboardingWelcomeVideoModal.tsx b/src/components/OnboardingWelcomeVideoModal.tsx
@@ -86,6 +86,7 @@ function OnboardingWelcomeVideoModal() {
                         videoPlayerStyle={[styles.onboardingVideoPlayer, {width: videoWidth, height: videoWidth / videoAspectRatio}]}
                         onVideoLoaded={onVideoLoaded}
                         onPlaybackStatusUpdate={onPlaybackStatusUpdate}
+                        shouldShowProgressVolumeOnly
                         shouldPlay
                         isLooping
                     />

diff --git a/src/components/VideoPlayer/BaseVideoPlayer.js b/src/components/VideoPlayer/BaseVideoPlayer.js
@@ -30,8 +30,10 @@ function BaseVideoPlayer({
     shouldUseSharedVideoElement,
     shouldUseSmallVideoControls,
     shouldShowVideoControls,
+    shouldShowProgressVolumeOnly,
     onPlaybackStatusUpdate,
     onFullscreenUpdate,
+    shouldPlay,
     // TODO: investigate what is the root cause of the bug with unexpected video switching
     // isVideoHovered caused a bug with unexpected video switching. We are investigating the root cause of the issue,
     // but current workaround is just not to use it here for now. This causes not displaying the video controls when
@@ -163,6 +165,13 @@ function BaseVideoPlayer({
         };
     }, [bindFunctions, currentVideoPlayerRef, currentlyPlayingURL, isSmallScreenWidth, originalParent, sharedElement, shouldUseSharedVideoElement, url]);
 
+    useEffect(() => {
+        if(!shouldPlay) {
+            return;
+        }
+        updateCurrentlyPlayingURL(url);
+    }, [shouldPlay, updateCurrentlyPlayingURL, url]);
+
     return (
         <>
             <View style={style}>
@@ -207,7 +216,7 @@ function BaseVideoPlayer({
                                             source={{
                                                 uri: sourceURL,
                                             }}
-                                            shouldPlay={false}
+                                            shouldPlay={shouldPlay}
                                             useNativeControls={false}
                                             resizeMode={resizeMode}
                                             isLooping={isLooping}
@@ -231,6 +240,7 @@ function BaseVideoPlayer({
                                     small={shouldUseSmallVideoControls}
                                     style={videoControlsStyle}
                                     togglePlayCurrentVideo={togglePlayCurrentVideo}
+                                    progressVolumeOnly={shouldShowProgressVolumeOnly}
                                     showPopoverMenu={showPopoverMenu}
                                 />
                             )}

diff --git a/src/components/VideoPlayer/VideoPlayerControls/index.js b/src/components/VideoPlayer/VideoPlayerControls/index.js
@@ -34,14 +34,17 @@ const propTypes = {
     showPopoverMenu: PropTypes.func.isRequired,
 
     togglePlayCurrentVideo: PropTypes.func.isRequired,
+
+    progressVolumeOnly: PropTypes.bool,
 };
 
 const defaultProps = {
     small: false,
     style: undefined,
+    progressVolumeOnly: false,
 };
 
-function VideoPlayerControls({duration, position, url, videoPlayerRef, isPlaying, small, style, showPopoverMenu, togglePlayCurrentVideo}) {
+function VideoPlayerControls({duration, position, url, videoPlayerRef, isPlaying, small, style, showPopoverMenu, togglePlayCurrentVideo, progressVolumeOnly}) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
     const {updateCurrentlyPlayingURL} = usePlaybackContext();
@@ -68,49 +71,54 @@ function VideoPlayerControls({duration, position, url, videoPlayerRef, isPlaying
 
     return (
         <Animated.View
-            style={[styles.videoPlayerControlsContainer, small ? [styles.p2, styles.pb0] : [styles.p3, styles.pb1], style]}
+            style={[styles.videoPlayerControlsContainer, small ? [styles.p2, styles.pb0] : [styles.p3, styles.pb1], progressVolumeOnly && [styles.pt2, styles.pb2], style]}
             onLayout={onLayout}
         >
-            <View style={[styles.videoPlayerControlsButtonContainer, !small && styles.mb4]}>
-                <View style={[styles.videoPlayerControlsRow]}>
-                    <IconButton
-                        src={isPlaying ? Expensicons.Pause : Expensicons.Play}
-                        tooltipText={isPlaying ? translate('videoPlayer.pause') : translate('videoPlayer.play')}
-                        onPress={togglePlayCurrentVideo}
-                        style={styles.mr2}
-                        small={small}
-                    />
-                    {shouldShowTime && (
-                        <View style={[styles.videoPlayerControlsRow]}>
-                            <Text style={[styles.videoPlayerText, styles.videoPlayerTimeComponentWidth]}>{convertMillisecondsToTime(position)}</Text>
-                            <Text style={[styles.videoPlayerText]}>/</Text>
-                            <Text style={[styles.videoPlayerText, styles.videoPlayerTimeComponentWidth]}>{durationFormatted}</Text>
-                        </View>
-                    )}
+            {!progressVolumeOnly && (
+                <View style={[styles.videoPlayerControlsButtonContainer, !small && styles.mb4]}>
+                    <View style={[styles.videoPlayerControlsRow]}>
+                        <IconButton
+                            src={isPlaying ? Expensicons.Pause : Expensicons.Play}
+                            tooltipText={isPlaying ? translate('videoPlayer.pause') : translate('videoPlayer.play')}
+                            onPress={togglePlayCurrentVideo}
+                            style={styles.mr2}
+                            small={small}
+                        />
+                        {shouldShowTime && (
+                            <View style={[styles.videoPlayerControlsRow]}>
+                                <Text style={[styles.videoPlayerText, styles.videoPlayerTimeComponentWidth]}>{convertMillisecondsToTime(position)}</Text>
+                                <Text style={[styles.videoPlayerText]}>/</Text>
+                                <Text style={[styles.videoPlayerText, styles.videoPlayerTimeComponentWidth]}>{durationFormatted}</Text>
+                            </View>
+                        )}
+                    </View>
+                    <View style={[styles.videoPlayerControlsRow]}>
+                        <VolumeButton style={iconSpacing} />
+                        <IconButton
+                            src={Expensicons.Fullscreen}
+                            tooltipText={translate('videoPlayer.fullscreen')}
+                            onPress={enterFullScreenMode}
+                            style={iconSpacing}
+                            small={small}
+                        />
+                        <IconButton
+                            src={Expensicons.ThreeDots}
+                            tooltipText={translate('common.more')}
+                            onPress={showPopoverMenu}
+                            small={small}
+                        />
+                    </View>
                 </View>
-                <View style={[styles.videoPlayerControlsRow]}>
-                    <VolumeButton style={iconSpacing} />
-                    <IconButton
-                        src={Expensicons.Fullscreen}
-                        tooltipText={translate('videoPlayer.fullscreen')}
-                        onPress={enterFullScreenMode}
-                        style={iconSpacing}
-                        small={small}
-                    />
-                    <IconButton
-                        src={Expensicons.ThreeDots}
-                        tooltipText={translate('common.more')}
-                        onPress={showPopoverMenu}
-                        small={small}
+            )}
+            <View style={styles.videoPlayerControlsRow}>
+                <View style={[styles.flex1]}>
+                    <ProgressBar
+                        duration={duration}
+                        position={position}
+                        seekPosition={seekPosition}
                     />
                 </View>
-            </View>
-            <View style={styles.videoPlayerControlsRow}>
-                <ProgressBar
-                    duration={duration}
-                    position={position}
-                    seekPosition={seekPosition}
-                />
+                {progressVolumeOnly && <VolumeButton style={styles.ml3} />}
             </View>
         </Animated.View>
     );