From 4500e5f2faba26ff8a7e41f14e2a926c9cb75b4b Mon Sep 17 00:00:00 2001
From: cdOut <88325488+cdOut@users.noreply.github.com>
Date: Thu, 14 Mar 2024 15:48:34 +0100
Subject: [PATCH 1/2] fix progress bar styles for light mode

---
 src/styles/theme/themes/dark.ts  | 2 +-
 src/styles/theme/themes/light.ts | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

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

From 1cd7f2caf5d5171f2102c5a5e296589f847bcd53 Mon Sep 17 00:00:00 2001
From: cdOut <88325488+cdOut@users.noreply.github.com>
Date: Thu, 14 Mar 2024 15:58:31 +0100
Subject: [PATCH 2/2] remove shouldShowVideoControls from base video and merge
 it into controlsStatus

---
 src/CONST.ts                                         |  3 ++-
 src/components/OnboardingWelcomeVideo.tsx            |  2 +-
 src/components/VideoPlayer/BaseVideoPlayer.js        |  7 +++----
 .../VideoPlayer/VideoPlayerControls/index.js         | 12 ++++++------
 src/components/VideoPlayer/propTypes.js              |  6 ++++--
 5 files changed, 16 insertions(+), 14 deletions(-)

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) && <FullScreenLoadingIndicator style={[styles.opacity1, styles.bgTransparent]} />}
 
-                            {shouldShowVideoControls && !isLoading && (isPopoverVisible || isHovered || canUseTouchScreen) && (
+                            {controlsStatus !== CONST.VIDEO_PLAYER.CONTROLS_STATUS.HIDE && !isLoading && (isPopoverVisible || isHovered || canUseTouchScreen) && (
                                 <VideoPlayerControls
                                     duration={duration}
                                     position={position}
@@ -282,7 +281,7 @@ function BaseVideoPlayer({
                                     small={shouldUseSmallVideoControls}
                                     style={videoControlsStyle}
                                     togglePlayCurrentVideo={togglePlayCurrentVideo}
-                                    progressStatus={progressStatus}
+                                    controlsStatus={controlsStatus}
                                     showPopoverMenu={showPopoverMenu}
                                 />
                             )}
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 (
         <Animated.View
-            style={[styles.videoPlayerControlsContainer, small ? [styles.p2, styles.pb0] : [styles.p3, styles.pb1], progressStatus === CONST.VIDEO_PLAYER.PROGRESS_STATUS.VOLUME_ONLY && [styles.pt2, styles.pb2], style]}
+            style={[styles.videoPlayerControlsContainer, small ? [styles.p2, styles.pb0] : [styles.p3, styles.pb1], controlsStatus === CONST.VIDEO_PLAYER.CONTROLS_STATUS.VOLUME_ONLY && [styles.pt2, styles.pb2], style]}
             onLayout={onLayout}
         >
-            {progressStatus === CONST.VIDEO_PLAYER.PROGRESS_STATUS.SHOW && (
+            {controlsStatus === CONST.VIDEO_PLAYER.CONTROLS_STATUS.SHOW && (
                 <View style={[styles.videoPlayerControlsButtonContainer, !small && styles.mb4]}>
                     <View style={[styles.videoPlayerControlsRow]}>
                         <IconButton
@@ -119,7 +119,7 @@ function VideoPlayerControls({duration, position, url, videoPlayerRef, isPlaying
                         seekPosition={seekPosition}
                     />
                 </View>
-                {progressStatus === CONST.VIDEO_PLAYER.PROGRESS_STATUS.VOLUME_ONLY && <VolumeButton style={styles.ml3} />}
+                {controlsStatus === CONST.VIDEO_PLAYER.CONTROLS_STATUS.VOLUME_ONLY && <VolumeButton style={styles.ml3} />}
             </View>
         </Animated.View>
     );
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: () => {},