Merge pull request Expensify#41218 from software-mansion-labs/@Skalak…

…id/fix-missing-video-action-bar Fix missing video action bar on Safari
DylanDylann · May 1, 2024 · 1e82ebb · 1e82ebb
2 parents 573d989 + c8347da
commit 1e82ebb
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 3 deletions.
diff --git a/src/components/VideoPlayerPreview/index.tsx b/src/components/VideoPlayerPreview/index.tsx
@@ -78,13 +78,14 @@ function VideoPlayerPreview({videoUrl, thumbnailUrl, reportID, fileName, videoDi
                     accessibilityLabel={fileName}
                 />
             ) : (
-                <>
+                <View style={styles.flex1}>
                     <VideoPlayer
                         url={videoUrl}
                         onVideoLoaded={onVideoLoaded as (event: VideoReadyForDisplayEvent) => void}
                         videoDuration={videoDuration}
                         shouldUseSmallVideoControls
                         style={[styles.w100, styles.h100]}
+                        videoPlayerStyle={styles.videoPlayerPreview}
                     />
                     <View style={[styles.pAbsolute, styles.w100]}>
                         <IconButton
@@ -95,7 +96,7 @@ function VideoPlayerPreview({videoUrl, thumbnailUrl, reportID, fileName, videoDi
                             small
                         />
                     </View>
-                </>
+                </View>
             )}
         </View>
     );

diff --git a/src/styles/index.ts b/src/styles/index.ts
@@ -213,7 +213,6 @@ const webViewStyles = (theme: ThemeColors) =>
                 minWidth: CONST.VIDEO_PLAYER.MIN_WIDTH,
                 minHeight: CONST.VIDEO_PLAYER.MIN_HEIGHT,
                 borderRadius: variables.componentBorderRadiusNormal,
-                overflow: 'hidden',
                 backgroundColor: theme.highlightBG,
                 ...touchCalloutNone,
             },
@@ -4706,6 +4705,13 @@ const styles = (theme: ThemeColors) =>
             lineHeight: variables.lineHeightXXLarge,
         },
 
+        videoPlayerPreview: {
+            width: '100%',
+            height: '100%',
+            borderRadius: variables.componentBorderRadiusNormal,
+            backgroundColor: theme.highlightBG,
+        },
+
         videoPlayerControlsContainer: {
             position: 'absolute',
             bottom: CONST.VIDEO_PLAYER.CONTROLS_POSITION.NORMAL,