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`,