diff --git a/src/CONST.ts b/src/CONST.ts index e78129de5d08..2fe53974d0e2 100755 --- a/src/CONST.ts +++ b/src/CONST.ts @@ -3295,8 +3295,9 @@ const CONST = { HIDE_TIME_TEXT_WIDTH: 250, MIN_WIDTH: 170, MIN_HEIGHT: 120, - PROGRESS_STATUS: { + CONTROLS_STATUS: { SHOW: 'show', + HIDE: 'hide', VOLUME_ONLY: 'volumeOnly' }, CONTROLS_POSITION: { diff --git a/src/components/OnboardingWelcomeVideo.tsx b/src/components/OnboardingWelcomeVideo.tsx index 1de73cb3bcce..53fd9a1c9683 100644 --- a/src/components/OnboardingWelcomeVideo.tsx +++ b/src/components/OnboardingWelcomeVideo.tsx @@ -101,7 +101,7 @@ function OnboardingWelcomeVideo() { videoPlayerStyle={[styles.onboardingVideoPlayer, {aspectRatio}]} onVideoLoaded={setAspectRatio} onPlaybackStatusUpdate={setVideoStatus} - progressStatus={CONST.VIDEO_PLAYER.PROGRESS_STATUS.VOLUME_ONLY} + controlsStatus={CONST.VIDEO_PLAYER.CONTROLS_STATUS.VOLUME_ONLY} shouldPlay isLooping /> diff --git a/src/components/VideoPlayer/BaseVideoPlayer.js b/src/components/VideoPlayer/BaseVideoPlayer.js index 82c2a73b25e7..367cd9ba53d7 100644 --- a/src/components/VideoPlayer/BaseVideoPlayer.js +++ b/src/components/VideoPlayer/BaseVideoPlayer.js @@ -31,8 +31,7 @@ function BaseVideoPlayer({ videoDuration, shouldUseSharedVideoElement, shouldUseSmallVideoControls, - shouldShowVideoControls, - progressStatus, + controlsStatus, onPlaybackStatusUpdate, onFullscreenUpdate, shouldPlay, @@ -272,7 +271,7 @@ function BaseVideoPlayer({ {(isLoading || isBuffering) && } - {shouldShowVideoControls && !isLoading && (isPopoverVisible || isHovered || canUseTouchScreen) && ( + {controlsStatus !== CONST.VIDEO_PLAYER.CONTROLS_STATUS.HIDE && !isLoading && (isPopoverVisible || isHovered || canUseTouchScreen) && ( )} diff --git a/src/components/VideoPlayer/VideoPlayerControls/index.js b/src/components/VideoPlayer/VideoPlayerControls/index.js index 79da7425bfae..f3406c8d0aad 100644 --- a/src/components/VideoPlayer/VideoPlayerControls/index.js +++ b/src/components/VideoPlayer/VideoPlayerControls/index.js @@ -36,16 +36,16 @@ const propTypes = { togglePlayCurrentVideo: PropTypes.func.isRequired, - progressStatus: PropTypes.oneOf(_.values(CONST.VIDEO_PLAYER.PROGRESS_STATUS)), + controlsStatus: PropTypes.oneOf(_.values(CONST.VIDEO_PLAYER.CONTROLS_STATUS)), }; const defaultProps = { small: false, style: undefined, - progressStatus: CONST.VIDEO_PLAYER.PROGRESS_STATUS.SHOW, + controlsStatus: CONST.VIDEO_PLAYER.CONTROLS_STATUS.SHOW, }; -function VideoPlayerControls({duration, position, url, videoPlayerRef, isPlaying, small, style, showPopoverMenu, togglePlayCurrentVideo, progressStatus}) { +function VideoPlayerControls({duration, position, url, videoPlayerRef, isPlaying, small, style, showPopoverMenu, togglePlayCurrentVideo, controlsStatus}) { const styles = useThemeStyles(); const {translate} = useLocalize(); const {updateCurrentlyPlayingURL} = usePlaybackContext(); @@ -72,10 +72,10 @@ function VideoPlayerControls({duration, position, url, videoPlayerRef, isPlaying return ( - {progressStatus === CONST.VIDEO_PLAYER.PROGRESS_STATUS.SHOW && ( + {controlsStatus === CONST.VIDEO_PLAYER.CONTROLS_STATUS.SHOW && ( - {progressStatus === CONST.VIDEO_PLAYER.PROGRESS_STATUS.VOLUME_ONLY && } + {controlsStatus === CONST.VIDEO_PLAYER.CONTROLS_STATUS.VOLUME_ONLY && } ); diff --git a/src/components/VideoPlayer/propTypes.js b/src/components/VideoPlayer/propTypes.js index 6a21cb6c3dc6..2ceb1658c3ef 100644 --- a/src/components/VideoPlayer/propTypes.js +++ b/src/components/VideoPlayer/propTypes.js @@ -1,6 +1,8 @@ import {ResizeMode} from 'expo-av'; import PropTypes from 'prop-types'; import stylePropTypes from '@styles/stylePropTypes'; +import CONST from '@src/CONST'; +import _ from 'underscore'; const videoPlayerPropTypes = { url: PropTypes.string.isRequired, @@ -28,7 +30,7 @@ const videoPlayerPropTypes = { shouldUseSmallVideoControls: PropTypes.bool, - shouldShowVideoControls: PropTypes.bool, + controlsStatus: PropTypes.oneOf(_.values(CONST.VIDEO_PLAYER.CONTROLS_STATUS)), isVideoHovered: PropTypes.bool, @@ -48,7 +50,7 @@ const videoPlayerDefaultProps = { videoDuration: 0, shouldUseSharedVideoElement: false, shouldUseSmallVideoControls: false, - shouldShowVideoControls: true, + controlsStatus: CONST.VIDEO_PLAYER.CONTROLS_STATUS.SHOW, isVideoHovered: false, onFullscreenUpdate: () => {}, onPlaybackStatusUpdate: () => {}, diff --git a/src/styles/theme/themes/dark.ts b/src/styles/theme/themes/dark.ts index 783ee22919dc..0867e7ab88f3 100644 --- a/src/styles/theme/themes/dark.ts +++ b/src/styles/theme/themes/dark.ts @@ -88,7 +88,7 @@ const darkTheme = { starDefaultBG: 'rgb(254, 228, 94)', mapAttributionText: colors.black, white: colors.white, - progressBarBackground: colors.green800, + progressBarBackground: colors.productDark400, progressBarFill: colors.green400, videoPlayerBG: `${colors.productDark100}cc`, transparentWhite: `${colors.white}51`, diff --git a/src/styles/theme/themes/light.ts b/src/styles/theme/themes/light.ts index be035b8a0cb4..5251af03eeb7 100644 --- a/src/styles/theme/themes/light.ts +++ b/src/styles/theme/themes/light.ts @@ -88,7 +88,7 @@ const lightTheme = { starDefaultBG: 'rgb(254, 228, 94)', mapAttributionText: colors.black, white: colors.white, - progressBarBackground: colors.green800, + progressBarBackground: colors.productLight400, progressBarFill: colors.green400, videoPlayerBG: `${colors.productDark100}cc`, transparentWhite: `${colors.white}51`,