diff --git a/src/components/OnboardingWelcomeVideoModal.tsx b/src/components/OnboardingWelcomeVideoModal.tsx index d84ca9ebc665..9d96b54ac1c7 100644 --- 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 index 73dbf8407c0c..5cb5c8c1da30 100644 --- 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 ( <> @@ -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 index 5a926123feef..c8e29126727f 100644 --- 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 ( - - - - {shouldShowTime && ( - - {convertMillisecondsToTime(position)} - / - {durationFormatted} - - )} + {!progressVolumeOnly && ( + + + + {shouldShowTime && ( + + {convertMillisecondsToTime(position)} + / + {durationFormatted} + + )} + + + + + + - - - - + + - - - + {progressVolumeOnly && } );