diff --git a/src/components/OnboardingWelcomeVideo.tsx b/src/components/OnboardingWelcomeVideo.tsx index f17e0c107ff3..dfc215ff55cf 100644 --- a/src/components/OnboardingWelcomeVideo.tsx +++ b/src/components/OnboardingWelcomeVideo.tsx @@ -1,3 +1,4 @@ +import type {VideoReadyForDisplayEvent} from 'expo-av'; import React, {useCallback, useEffect, useRef, useState} from 'react'; import type {LayoutChangeEvent, LayoutRectangle} from 'react-native'; import {View} from 'react-native'; @@ -69,14 +70,20 @@ function OnboardingWelcomeVideo() { Navigation.goBack(); }, []); - const onVideoLoaded = (e: VideoLoadedEventType) => { - setVideoAspectRatio(e.srcElement.videoWidth / e.srcElement.videoHeight); - }; - - const onPlaybackStatusUpdate = (e: VideoPlaybackStatusEventType) => { - if (e.isLoaded === isVideoLoaded) { + const onVideoLoaded = (e: VideoReadyForDisplayEvent | VideoLoadedEventType | undefined) => { + if (!e) { return; } + + // TODO: Figure out why on mobile there's e.naturalSize and on web it's e.srcElement + if ('naturalSize' in e) { + setVideoAspectRatio(e.naturalSize.width / e.naturalSize.height); + } else { + setVideoAspectRatio(e.srcElement.videoWidth / e.srcElement.videoHeight); + } + }; + + const setVideoStatus = (e: VideoPlaybackStatusEventType) => { setIsVideoLoaded(e.isLoaded); }; @@ -85,14 +92,14 @@ function OnboardingWelcomeVideo() { const videoWidth = containerDimensions.current.width - 2 * MODAL_PADDING; return ( - + ); - - return ( - - - - {getWelcomeVideo()} - - {translate('onboarding.welcomeVideo.title')} - {translate('onboarding.welcomeVideo.description')} -