Apply correct video height - works on small web as well

software-mansion-labs · Mar 7, 2024 · 52ed123 · 52ed123
1 parent 35cb276
commit 52ed123
Showing 1 changed file with 4 additions and 3 deletions.
diff --git a/src/components/OnboardingWelcomeVideo.tsx b/src/components/OnboardingWelcomeVideo.tsx
@@ -97,8 +97,9 @@ function OnboardingWelcomeVideo() {
             return (
                 <View
                     style={[
-                        // Prevent layout jumps by reserving height for the video
-                        {height: VIDEO_HEIGHT - 2 * MODAL_PADDING},
+                        // Prevent layout jumps by reserving height
+                        // for the video until it loads.
+                        {height: videoWidth / videoAspectRatio},
                     ]}
                 >
                     <VideoPlayer
@@ -130,7 +131,7 @@ function OnboardingWelcomeVideo() {
             isVisible={isModalVisible}
             type={shouldUseNarrowLayout ? CONST.MODAL.MODAL_TYPE.CENTERED_SMALL : CONST.MODAL.MODAL_TYPE.BOTTOM_DOCKED}
             onClose={closeModal}
-            innerContainerStyle={shouldUseNarrowLayout ? {} : {paddingTop: MODAL_PADDING, paddingBottom: MODAL_PADDING}}
+            innerContainerStyle={shouldUseNarrowLayout ? undefined : {paddingTop: MODAL_PADDING, paddingBottom: MODAL_PADDING}}
         >
             <View
                 style={[styles.mh100, shouldUseNarrowLayout && styles.welcomeVideoNarrowLayout]}