diff --git a/src/components/OnboardingWelcomeVideo.tsx b/src/components/OnboardingWelcomeVideo.tsx index e93432763519..71970c07b4e1 100644 --- a/src/components/OnboardingWelcomeVideo.tsx +++ b/src/components/OnboardingWelcomeVideo.tsx @@ -15,7 +15,10 @@ import LottieAnimations from './LottieAnimations'; import Text from './Text'; import VideoPlayer from './VideoPlayer'; -const BASE_VIDEO_ASPECT_RATIO = 484 / 272.25; +// Aspect ratio and height of the video. +// Useful before video loads to reserve space. +const VIDEO_ASPECT_RATIO = 484 / 272.25; +const VIDEO_HEIGHT = 320; const MODAL_PADDING = variables.spacing2; @@ -41,7 +44,7 @@ function OnboardingWelcomeVideo() { const [welcomeVideoStatus, setWelcomeVideoStatus] = useState('video'); const [isWelcomeVideoStatusLocked, setIsWelcomeVideoStatusLocked] = useState(false); const [isVideoLoaded, setIsVideoLoaded] = useState(false); - const [videoAspectRatio, setVideoAspectRatio] = useState(BASE_VIDEO_ASPECT_RATIO); + const [videoAspectRatio, setVideoAspectRatio] = useState(VIDEO_ASPECT_RATIO); const {isOffline} = useNetwork(); useEffect(() => { @@ -88,7 +91,13 @@ function OnboardingWelcomeVideo() { const videoWidth = containerDimensions.current.width - 2 * MODAL_PADDING; return ( - + {getWelcomeVideo()} - - + + {translate('onboarding.welcomeVideo.title')} {translate('onboarding.welcomeVideo.description')}