From ddd6c4eb18d69aff6039441cfeda8cb8753e2157 Mon Sep 17 00:00:00 2001
From: cdOut <88325488+cdOut@users.noreply.github.com>
Date: Mon, 12 Feb 2024 16:01:25 +0100
Subject: [PATCH 01/29] add base welcome video modal
---
.../OnboardingWelcomeVideoModal.tsx | 61 +++++++++++++++++++
src/languages/en.ts | 7 +++
src/styles/index.ts | 5 ++
src/styles/theme/themes/dark.ts | 1 +
src/styles/theme/themes/light.ts | 1 +
src/styles/theme/types.ts | 1 +
6 files changed, 76 insertions(+)
create mode 100644 src/components/OnboardingWelcomeVideoModal.tsx
diff --git a/src/components/OnboardingWelcomeVideoModal.tsx b/src/components/OnboardingWelcomeVideoModal.tsx
new file mode 100644
index 000000000000..2dc374b8f78a
--- /dev/null
+++ b/src/components/OnboardingWelcomeVideoModal.tsx
@@ -0,0 +1,61 @@
+import React, {useCallback, useState} from 'react';
+import {View} from 'react-native';
+import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
+import useWindowDimensions from '@hooks/useWindowDimensions';
+import CONST from '@src/CONST';
+import Button from './Button';
+import Lottie from './Lottie';
+import LottieAnimations from './LottieAnimations';
+import Modal from './Modal';
+import Text from './Text';
+
+function OnboardingWelcomeVideoModal() {
+ const {translate} = useLocalize();
+ const styles = useThemeStyles();
+ const {isSmallScreenWidth, windowHeight} = useWindowDimensions();
+ const [isModalOpen, setIsModalOpen] = useState(true);
+
+ const closeModal = useCallback(() => {
+ setIsModalOpen(false);
+ }, []);
+
+ return (
+
+
+
+
+
+ ;
+
+
+ {translate('onboarding.welcomeVideo.title')}
+ {translate('onboarding.welcomeVideo.description')}
+
+
+
+
+
+ );
+}
+
+OnboardingWelcomeVideoModal.displayName = 'OnboardingWelcomeVideoModal';
+
+export default OnboardingWelcomeVideoModal;
diff --git a/src/languages/en.ts b/src/languages/en.ts
index fd5d7d0e7b78..8dbe17cbb3d5 100755
--- a/src/languages/en.ts
+++ b/src/languages/en.ts
@@ -2051,6 +2051,13 @@ export default {
selectSuggestedAddress: 'Please select a suggested address or use current location',
},
},
+ onboarding: {
+ welcomeVideo: {
+ title: 'Welcome to Expensify',
+ description: 'Getting paid is as easy as sending a message.',
+ button: "Let's go",
+ },
+ },
reportCardLostOrDamaged: {
report: 'Report physical card loss / damage',
screenTitle: 'Report card lost or damaged',
diff --git a/src/styles/index.ts b/src/styles/index.ts
index 93c7f5d1e1b0..971092877d96 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -4052,6 +4052,11 @@ const styles = (theme: ThemeColors) =>
fontSize: 9,
},
+ onboardingWelcomeVideo: {
+ backgroundColor: theme.onboardingVideoBG,
+ borderRadius: 10,
+ },
+
sidebarStatusAvatarContainer: {
height: 40,
width: 40,
diff --git a/src/styles/theme/themes/dark.ts b/src/styles/theme/themes/dark.ts
index b9bf97037072..5ed174966f30 100644
--- a/src/styles/theme/themes/dark.ts
+++ b/src/styles/theme/themes/dark.ts
@@ -71,6 +71,7 @@ const darkTheme = {
fallbackIconColor: colors.green700,
reactionActiveBackground: colors.green600,
reactionActiveText: colors.green100,
+ onboardingVideoBG: colors.green700,
badgeAdHoc: colors.pink600,
badgeAdHocHover: colors.pink700,
mentionText: colors.blue100,
diff --git a/src/styles/theme/themes/light.ts b/src/styles/theme/themes/light.ts
index 3514e4c4b105..af70aebf7e2c 100644
--- a/src/styles/theme/themes/light.ts
+++ b/src/styles/theme/themes/light.ts
@@ -74,6 +74,7 @@ const lightTheme = {
badgeAdHoc: colors.pink600,
badgeAdHocHover: colors.pink700,
mentionText: colors.blue600,
+ onboardingVideoBG: colors.green700,
mentionBG: colors.blue100,
ourMentionText: colors.green600,
ourMentionBG: colors.green100,
diff --git a/src/styles/theme/types.ts b/src/styles/theme/types.ts
index 6d7c0183c142..a1ae86992775 100644
--- a/src/styles/theme/types.ts
+++ b/src/styles/theme/types.ts
@@ -78,6 +78,7 @@ type ThemeColors = {
badgeAdHocHover: Color;
mentionText: Color;
mentionBG: Color;
+ onboardingVideoBG: Color;
ourMentionText: Color;
ourMentionBG: Color;
tooltipSupportingText: Color;
From 14f867b861d0d56ff4fdd44c91353b4279fbd6f1 Mon Sep 17 00:00:00 2001
From: cdOut <88325488+cdOut@users.noreply.github.com>
Date: Tue, 13 Feb 2024 10:06:15 +0100
Subject: [PATCH 02/29] remove symbol and fix light mode
---
src/components/OnboardingWelcomeVideoModal.tsx | 1 -
src/styles/theme/themes/light.ts | 2 +-
2 files changed, 1 insertion(+), 2 deletions(-)
diff --git a/src/components/OnboardingWelcomeVideoModal.tsx b/src/components/OnboardingWelcomeVideoModal.tsx
index 2dc374b8f78a..be3bc88a04ad 100644
--- a/src/components/OnboardingWelcomeVideoModal.tsx
+++ b/src/components/OnboardingWelcomeVideoModal.tsx
@@ -38,7 +38,6 @@ function OnboardingWelcomeVideoModal() {
autoPlay
loop
/>
- ;
{translate('onboarding.welcomeVideo.title')}
diff --git a/src/styles/theme/themes/light.ts b/src/styles/theme/themes/light.ts
index af70aebf7e2c..e3c187b844dd 100644
--- a/src/styles/theme/themes/light.ts
+++ b/src/styles/theme/themes/light.ts
@@ -74,7 +74,7 @@ const lightTheme = {
badgeAdHoc: colors.pink600,
badgeAdHocHover: colors.pink700,
mentionText: colors.blue600,
- onboardingVideoBG: colors.green700,
+ onboardingVideoBG: colors.green200,
mentionBG: colors.blue100,
ourMentionText: colors.green600,
ourMentionBG: colors.green100,
From 27158b9e170529d5b06b3101c57c518aca8400de Mon Sep 17 00:00:00 2001
From: cdOut <88325488+cdOut@users.noreply.github.com>
Date: Tue, 13 Feb 2024 14:11:02 +0100
Subject: [PATCH 03/29] fix styling for smaller displays
---
src/components/OnboardingWelcomeVideoModal.tsx | 4 ++--
src/styles/index.ts | 2 ++
2 files changed, 4 insertions(+), 2 deletions(-)
diff --git a/src/components/OnboardingWelcomeVideoModal.tsx b/src/components/OnboardingWelcomeVideoModal.tsx
index be3bc88a04ad..71852daaf23f 100644
--- a/src/components/OnboardingWelcomeVideoModal.tsx
+++ b/src/components/OnboardingWelcomeVideoModal.tsx
@@ -33,8 +33,8 @@ function OnboardingWelcomeVideoModal() {
diff --git a/src/styles/index.ts b/src/styles/index.ts
index 971092877d96..2a836803d09d 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -4054,6 +4054,8 @@ const styles = (theme: ThemeColors) =>
onboardingWelcomeVideo: {
backgroundColor: theme.onboardingVideoBG,
+ justifyContent: 'center',
+ alignItems: 'center',
borderRadius: 10,
},
From 063d0d3d7e7b58205d9a74280d68a999f4f0c643 Mon Sep 17 00:00:00 2001
From: cdOut <88325488+cdOut@users.noreply.github.com>
Date: Tue, 13 Feb 2024 15:25:28 +0100
Subject: [PATCH 04/29] fix backdrop for native
---
src/components/OnboardingWelcomeVideoModal.tsx | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/components/OnboardingWelcomeVideoModal.tsx b/src/components/OnboardingWelcomeVideoModal.tsx
index 71852daaf23f..d84cfdf7a8ca 100644
--- a/src/components/OnboardingWelcomeVideoModal.tsx
+++ b/src/components/OnboardingWelcomeVideoModal.tsx
@@ -26,7 +26,7 @@ function OnboardingWelcomeVideoModal() {
isVisible={isModalOpen}
onClose={closeModal}
innerContainerStyle={styles.pt0}
- shouldUseCustomBackdrop
+ fullscreen
>
From 8e27d6208d59d80197d460e2785cb134391d55be Mon Sep 17 00:00:00 2001
From: cdOut <88325488+cdOut@users.noreply.github.com>
Date: Wed, 14 Feb 2024 17:44:02 +0100
Subject: [PATCH 05/29] add video player element with correct styling
---
.../OnboardingWelcomeVideoModal.tsx | 64 ++++++++++++++++---
src/styles/index.ts | 6 +-
2 files changed, 59 insertions(+), 11 deletions(-)
diff --git a/src/components/OnboardingWelcomeVideoModal.tsx b/src/components/OnboardingWelcomeVideoModal.tsx
index d84cfdf7a8ca..cfc9ed42a4a1 100644
--- a/src/components/OnboardingWelcomeVideoModal.tsx
+++ b/src/components/OnboardingWelcomeVideoModal.tsx
@@ -1,6 +1,7 @@
import React, {useCallback, useState} from 'react';
import {View} from 'react-native';
import useLocalize from '@hooks/useLocalize';
+import useNetwork from '@hooks/useNetwork';
import useThemeStyles from '@hooks/useThemeStyles';
import useWindowDimensions from '@hooks/useWindowDimensions';
import CONST from '@src/CONST';
@@ -9,17 +10,68 @@ import Lottie from './Lottie';
import LottieAnimations from './LottieAnimations';
import Modal from './Modal';
import Text from './Text';
+import VideoPlayer from './VideoPlayer';
+
+const BASE_VIDEO_WIDTH = 640;
+const BASE_VIDEO_ASPECT_RATIO = 2;
+
+const MODAL_PADDING = 16;
+
+type VideoLoadedEvent = {
+ srcElement: {
+ videoWidth: number;
+ videoHeight: number;
+ };
+};
function OnboardingWelcomeVideoModal() {
const {translate} = useLocalize();
const styles = useThemeStyles();
- const {isSmallScreenWidth, windowHeight} = useWindowDimensions();
+ const {isSmallScreenWidth, windowHeight, windowWidth} = useWindowDimensions();
const [isModalOpen, setIsModalOpen] = useState(true);
+ const [videoAspectRatio, setVideoAspectRatio] = useState(BASE_VIDEO_ASPECT_RATIO);
+ const {isOffline} = useNetwork();
const closeModal = useCallback(() => {
setIsModalOpen(false);
}, []);
+ const onVideoLoaded = (e: VideoLoadedEvent) => {
+ setVideoAspectRatio(e.srcElement.videoWidth / e.srcElement.videoHeight);
+ };
+
+ const getWelcomeVideo = () => {
+ if (!isOffline) {
+ let videoWidth = isSmallScreenWidth ? windowWidth - MODAL_PADDING : BASE_VIDEO_WIDTH;
+
+ if (!videoWidth) {
+ videoWidth = BASE_VIDEO_WIDTH;
+ }
+
+ return (
+
+
+
+ );
+ }
+ return (
+
+
+
+ );
+ };
+
return (
-
-
-
+ {getWelcomeVideo()}
{translate('onboarding.welcomeVideo.title')}
{translate('onboarding.welcomeVideo.description')}
diff --git a/src/styles/index.ts b/src/styles/index.ts
index 2a836803d09d..99f7c7797154 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -4052,13 +4052,17 @@ const styles = (theme: ThemeColors) =>
fontSize: 9,
},
- onboardingWelcomeVideo: {
+ onboardingVideoContainer: {
backgroundColor: theme.onboardingVideoBG,
justifyContent: 'center',
alignItems: 'center',
borderRadius: 10,
},
+ onboardingVideoPlayer: {
+ borderRadius: 10,
+ },
+
sidebarStatusAvatarContainer: {
height: 40,
width: 40,
From 7971274f719e44f45de7e3349b2b4a4a255abf01 Mon Sep 17 00:00:00 2001
From: cdOut <88325488+cdOut@users.noreply.github.com>
Date: Thu, 15 Feb 2024 11:32:27 +0100
Subject: [PATCH 06/29] add offline support for switching between animation and
video
---
.../OnboardingWelcomeVideoModal.tsx | 40 +++++++++++++++++--
1 file changed, 36 insertions(+), 4 deletions(-)
diff --git a/src/components/OnboardingWelcomeVideoModal.tsx b/src/components/OnboardingWelcomeVideoModal.tsx
index cfc9ed42a4a1..60052484c8ac 100644
--- a/src/components/OnboardingWelcomeVideoModal.tsx
+++ b/src/components/OnboardingWelcomeVideoModal.tsx
@@ -1,4 +1,4 @@
-import React, {useCallback, useState} from 'react';
+import React, {useCallback, useEffect, useState} from 'react';
import {View} from 'react-native';
import useLocalize from '@hooks/useLocalize';
import useNetwork from '@hooks/useNetwork';
@@ -17,43 +17,75 @@ const BASE_VIDEO_ASPECT_RATIO = 2;
const MODAL_PADDING = 16;
-type VideoLoadedEvent = {
+type VideoLoadedEventType = {
srcElement: {
videoWidth: number;
videoHeight: number;
};
};
+type VideoPlaybackStatusEventType = {
+ isLoaded: boolean;
+};
+
+type VideoStatus = 'video' | 'animation';
+
function OnboardingWelcomeVideoModal() {
const {translate} = useLocalize();
const styles = useThemeStyles();
const {isSmallScreenWidth, windowHeight, windowWidth} = useWindowDimensions();
const [isModalOpen, setIsModalOpen] = useState(true);
+ const [welcomeVideoStatus, setWelcomeVideoStatus] = useState('video');
+ const [isWelcomeVideoStatusLocked, setIsWelcomeVideoStatusLocked] = useState(false);
+ const [isVideoLoaded, setIsVideoLoaded] = useState(false);
const [videoAspectRatio, setVideoAspectRatio] = useState(BASE_VIDEO_ASPECT_RATIO);
const {isOffline} = useNetwork();
+ useEffect(() => {
+ if (isWelcomeVideoStatusLocked) {
+ return;
+ }
+
+ if (isOffline) {
+ setWelcomeVideoStatus('animation');
+ setIsWelcomeVideoStatusLocked(true);
+ } else if (!isOffline && isVideoLoaded) {
+ setWelcomeVideoStatus('video');
+ setIsWelcomeVideoStatusLocked(true);
+ }
+ }, [isOffline, isVideoLoaded, isWelcomeVideoStatusLocked]);
+
const closeModal = useCallback(() => {
setIsModalOpen(false);
}, []);
- const onVideoLoaded = (e: VideoLoadedEvent) => {
+ const onVideoLoaded = (e: VideoLoadedEventType) => {
setVideoAspectRatio(e.srcElement.videoWidth / e.srcElement.videoHeight);
};
+ const onPlaybackStatusUpdate = (e: VideoPlaybackStatusEventType) => {
+ if (e.isLoaded === isVideoLoaded) {
+ return;
+ }
+ setIsVideoLoaded(e.isLoaded);
+ };
+
const getWelcomeVideo = () => {
- if (!isOffline) {
+ if (welcomeVideoStatus === 'video') {
let videoWidth = isSmallScreenWidth ? windowWidth - MODAL_PADDING : BASE_VIDEO_WIDTH;
if (!videoWidth) {
videoWidth = BASE_VIDEO_WIDTH;
}
+ // Temporary file supplied for testing purposes, to be changed when correct one gets uploaded on backend
return (
From f94bc11a30756a47e411d6be4bfeb87626ecfc66 Mon Sep 17 00:00:00 2001
From: cdOut <88325488+cdOut@users.noreply.github.com>
Date: Thu, 15 Feb 2024 12:09:47 +0100
Subject: [PATCH 07/29] add isLooping attrib
---
src/components/OnboardingWelcomeVideoModal.tsx | 1 +
1 file changed, 1 insertion(+)
diff --git a/src/components/OnboardingWelcomeVideoModal.tsx b/src/components/OnboardingWelcomeVideoModal.tsx
index 60052484c8ac..d84ca9ebc665 100644
--- a/src/components/OnboardingWelcomeVideoModal.tsx
+++ b/src/components/OnboardingWelcomeVideoModal.tsx
@@ -87,6 +87,7 @@ function OnboardingWelcomeVideoModal() {
onVideoLoaded={onVideoLoaded}
onPlaybackStatusUpdate={onPlaybackStatusUpdate}
shouldPlay
+ isLooping
/>
);
From 2a27a6b04615b262171188f75b30b22de35e1d27 Mon Sep 17 00:00:00 2001
From: cdOut <88325488+cdOut@users.noreply.github.com>
Date: Thu, 15 Feb 2024 12:20:36 +0100
Subject: [PATCH 08/29] add spanish translations
---
src/languages/es.ts | 7 +++++++
1 file changed, 7 insertions(+)
diff --git a/src/languages/es.ts b/src/languages/es.ts
index 3675d4b25eab..23e78274320b 100644
--- a/src/languages/es.ts
+++ b/src/languages/es.ts
@@ -2538,6 +2538,13 @@ export default {
selectSuggestedAddress: 'Por favor, selecciona una dirección sugerida o usa la ubicación actual.',
},
},
+ onboarding: {
+ welcomeVideo: {
+ title: 'Bienvenido a Expensify',
+ description: 'Recibir pago es tan fácil como enviar un mensaje.',
+ button: 'Vamos',
+ },
+ },
reportCardLostOrDamaged: {
report: 'Notificar la pérdida / daño de la tarjeta física',
screenTitle: 'Notificar la pérdida o deterioro de la tarjeta',
From 75a2b35a7a7e8d56eb4813088f2604fa6be0cf0e Mon Sep 17 00:00:00 2001
From: cdOut <88325488+cdOut@users.noreply.github.com>
Date: Fri, 16 Feb 2024 15:07:26 +0100
Subject: [PATCH 09/29] add fixes and updates for video player
---
.../OnboardingWelcomeVideoModal.tsx | 1 +
src/components/VideoPlayer/BaseVideoPlayer.js | 12 ++-
.../VideoPlayer/VideoPlayerControls/index.js | 86 ++++++++++---------
3 files changed, 59 insertions(+), 40 deletions(-)
diff --git a/src/components/OnboardingWelcomeVideoModal.tsx b/src/components/OnboardingWelcomeVideoModal.tsx
index d84ca9ebc665..9d96b54ac1c7 100644
--- a/src/components/OnboardingWelcomeVideoModal.tsx
+++ b/src/components/OnboardingWelcomeVideoModal.tsx
@@ -86,6 +86,7 @@ function OnboardingWelcomeVideoModal() {
videoPlayerStyle={[styles.onboardingVideoPlayer, {width: videoWidth, height: videoWidth / videoAspectRatio}]}
onVideoLoaded={onVideoLoaded}
onPlaybackStatusUpdate={onPlaybackStatusUpdate}
+ shouldShowProgressVolumeOnly
shouldPlay
isLooping
/>
diff --git a/src/components/VideoPlayer/BaseVideoPlayer.js b/src/components/VideoPlayer/BaseVideoPlayer.js
index 73dbf8407c0c..5cb5c8c1da30 100644
--- a/src/components/VideoPlayer/BaseVideoPlayer.js
+++ b/src/components/VideoPlayer/BaseVideoPlayer.js
@@ -30,8 +30,10 @@ function BaseVideoPlayer({
shouldUseSharedVideoElement,
shouldUseSmallVideoControls,
shouldShowVideoControls,
+ shouldShowProgressVolumeOnly,
onPlaybackStatusUpdate,
onFullscreenUpdate,
+ shouldPlay,
// TODO: investigate what is the root cause of the bug with unexpected video switching
// isVideoHovered caused a bug with unexpected video switching. We are investigating the root cause of the issue,
// but current workaround is just not to use it here for now. This causes not displaying the video controls when
@@ -163,6 +165,13 @@ function BaseVideoPlayer({
};
}, [bindFunctions, currentVideoPlayerRef, currentlyPlayingURL, isSmallScreenWidth, originalParent, sharedElement, shouldUseSharedVideoElement, url]);
+ useEffect(() => {
+ if(!shouldPlay) {
+ return;
+ }
+ updateCurrentlyPlayingURL(url);
+ }, [shouldPlay, updateCurrentlyPlayingURL, url]);
+
return (
<>
@@ -207,7 +216,7 @@ function BaseVideoPlayer({
source={{
uri: sourceURL,
}}
- shouldPlay={false}
+ shouldPlay={shouldPlay}
useNativeControls={false}
resizeMode={resizeMode}
isLooping={isLooping}
@@ -231,6 +240,7 @@ function BaseVideoPlayer({
small={shouldUseSmallVideoControls}
style={videoControlsStyle}
togglePlayCurrentVideo={togglePlayCurrentVideo}
+ progressVolumeOnly={shouldShowProgressVolumeOnly}
showPopoverMenu={showPopoverMenu}
/>
)}
diff --git a/src/components/VideoPlayer/VideoPlayerControls/index.js b/src/components/VideoPlayer/VideoPlayerControls/index.js
index 5a926123feef..c8e29126727f 100644
--- a/src/components/VideoPlayer/VideoPlayerControls/index.js
+++ b/src/components/VideoPlayer/VideoPlayerControls/index.js
@@ -34,14 +34,17 @@ const propTypes = {
showPopoverMenu: PropTypes.func.isRequired,
togglePlayCurrentVideo: PropTypes.func.isRequired,
+
+ progressVolumeOnly: PropTypes.bool,
};
const defaultProps = {
small: false,
style: undefined,
+ progressVolumeOnly: false,
};
-function VideoPlayerControls({duration, position, url, videoPlayerRef, isPlaying, small, style, showPopoverMenu, togglePlayCurrentVideo}) {
+function VideoPlayerControls({duration, position, url, videoPlayerRef, isPlaying, small, style, showPopoverMenu, togglePlayCurrentVideo, progressVolumeOnly}) {
const styles = useThemeStyles();
const {translate} = useLocalize();
const {updateCurrentlyPlayingURL} = usePlaybackContext();
@@ -68,49 +71,54 @@ function VideoPlayerControls({duration, position, url, videoPlayerRef, isPlaying
return (
-
-
-
- {shouldShowTime && (
-
- {convertMillisecondsToTime(position)}
- /
- {durationFormatted}
-
- )}
+ {!progressVolumeOnly && (
+
+
+
+ {shouldShowTime && (
+
+ {convertMillisecondsToTime(position)}
+ /
+ {durationFormatted}
+
+ )}
+
+
+
+
+
+
-
-
-
-
+
+
-
-
-
+ {progressVolumeOnly && }
);
From 39ed30800de22d85a789c1d6ac7effda30cd5f3a Mon Sep 17 00:00:00 2001
From: Maciej Dobosz
Date: Tue, 27 Feb 2024 14:57:00 +0100
Subject: [PATCH 10/29] Drop -Modal suffix from name
---
...dingWelcomeVideoModal.tsx => OnboardingWelcomeVideo.tsx} | 6 +++---
1 file changed, 3 insertions(+), 3 deletions(-)
rename src/components/{OnboardingWelcomeVideoModal.tsx => OnboardingWelcomeVideo.tsx} (96%)
diff --git a/src/components/OnboardingWelcomeVideoModal.tsx b/src/components/OnboardingWelcomeVideo.tsx
similarity index 96%
rename from src/components/OnboardingWelcomeVideoModal.tsx
rename to src/components/OnboardingWelcomeVideo.tsx
index 9d96b54ac1c7..ae5ac242afe3 100644
--- a/src/components/OnboardingWelcomeVideoModal.tsx
+++ b/src/components/OnboardingWelcomeVideo.tsx
@@ -30,7 +30,7 @@ type VideoPlaybackStatusEventType = {
type VideoStatus = 'video' | 'animation';
-function OnboardingWelcomeVideoModal() {
+function OnboardingWelcomeVideo() {
const {translate} = useLocalize();
const styles = useThemeStyles();
const {isSmallScreenWidth, windowHeight, windowWidth} = useWindowDimensions();
@@ -133,6 +133,6 @@ function OnboardingWelcomeVideoModal() {
);
}
-OnboardingWelcomeVideoModal.displayName = 'OnboardingWelcomeVideoModal';
+OnboardingWelcomeVideo.displayName = 'OnboardingWelcomeVideo';
-export default OnboardingWelcomeVideoModal;
+export default OnboardingWelcomeVideo;
From 1543ce0b2ab86ee1f013d3cf7d7a90298d78aeda Mon Sep 17 00:00:00 2001
From: Maciej Dobosz
Date: Tue, 27 Feb 2024 16:24:54 +0100
Subject: [PATCH 11/29] Welcome video as separate screen
---
src/ROUTES.ts | 1 +
src/SCREENS.ts | 1 +
src/components/OnboardingWelcomeVideo.tsx | 37 +++++++++++--------
src/components/VideoPlayer/BaseVideoPlayer.js | 2 +-
.../Navigators/OnboardingModalNavigator.tsx | 7 +++-
.../AppNavigator/Navigators/Overlay/index.tsx | 9 ++++-
src/libs/Navigation/linkingConfig/config.ts | 4 ++
src/libs/Navigation/types.ts | 1 +
src/styles/index.ts | 12 +++---
9 files changed, 49 insertions(+), 25 deletions(-)
diff --git a/src/ROUTES.ts b/src/ROUTES.ts
index db7d6bc23c91..c0dbe294b0d8 100644
--- a/src/ROUTES.ts
+++ b/src/ROUTES.ts
@@ -515,6 +515,7 @@ const ROUTES = {
PROCESS_MONEY_REQUEST_HOLD: 'hold-request-educational',
ONBOARDING_PERSONAL_DETAILS: 'onboarding/personal-details',
ONBOARDING_PURPOSE: 'onboarding/purpose',
+ ONBOARDING_WELCOME_VIDEO: 'onboarding/welcome-video',
} as const;
/**
diff --git a/src/SCREENS.ts b/src/SCREENS.ts
index b04fae3191eb..20457b1849f2 100644
--- a/src/SCREENS.ts
+++ b/src/SCREENS.ts
@@ -237,6 +237,7 @@ const SCREENS = {
ONBOARDING: {
PERSONAL_DETAILS: 'Onboarding_Personal_Details',
PURPOSE: 'Onboarding_Purpose',
+ WELCOME_VIDEO: 'Onboarding_Welcome_Video',
},
ONBOARD_ENGAGEMENT: {
diff --git a/src/components/OnboardingWelcomeVideo.tsx b/src/components/OnboardingWelcomeVideo.tsx
index ae5ac242afe3..bdf5e7ff27ac 100644
--- a/src/components/OnboardingWelcomeVideo.tsx
+++ b/src/components/OnboardingWelcomeVideo.tsx
@@ -2,8 +2,10 @@ import React, {useCallback, useEffect, useState} from 'react';
import {View} from 'react-native';
import useLocalize from '@hooks/useLocalize';
import useNetwork from '@hooks/useNetwork';
+import useOnboardingLayout from '@hooks/useOnboardingLayout';
import useThemeStyles from '@hooks/useThemeStyles';
import useWindowDimensions from '@hooks/useWindowDimensions';
+import Navigation from '@libs/Navigation/Navigation';
import CONST from '@src/CONST';
import Button from './Button';
import Lottie from './Lottie';
@@ -34,6 +36,7 @@ function OnboardingWelcomeVideo() {
const {translate} = useLocalize();
const styles = useThemeStyles();
const {isSmallScreenWidth, windowHeight, windowWidth} = useWindowDimensions();
+ const {shouldUseNarrowLayout} = useOnboardingLayout();
const [isModalOpen, setIsModalOpen] = useState(true);
const [welcomeVideoStatus, setWelcomeVideoStatus] = useState('video');
const [isWelcomeVideoStatusLocked, setIsWelcomeVideoStatusLocked] = useState(false);
@@ -57,6 +60,7 @@ function OnboardingWelcomeVideo() {
const closeModal = useCallback(() => {
setIsModalOpen(false);
+ Navigation.goBack();
}, []);
const onVideoLoaded = (e: VideoLoadedEventType) => {
@@ -72,15 +76,11 @@ function OnboardingWelcomeVideo() {
const getWelcomeVideo = () => {
if (welcomeVideoStatus === 'video') {
- let videoWidth = isSmallScreenWidth ? windowWidth - MODAL_PADDING : BASE_VIDEO_WIDTH;
-
- if (!videoWidth) {
- videoWidth = BASE_VIDEO_WIDTH;
- }
+ const videoWidth = 500;
// Temporary file supplied for testing purposes, to be changed when correct one gets uploaded on backend
return (
-
+
);
}
+
return (
-
-
-
+
);
};
+ return (
+
+ {getWelcomeVideo()}
+
+ );
+
return (
{
- if(!shouldPlay) {
+ if (!shouldPlay) {
return;
}
updateCurrentlyPlayingURL(url);
diff --git a/src/libs/Navigation/AppNavigator/Navigators/OnboardingModalNavigator.tsx b/src/libs/Navigation/AppNavigator/Navigators/OnboardingModalNavigator.tsx
index afd1fe6bc3fe..59ab8a2b3068 100644
--- a/src/libs/Navigation/AppNavigator/Navigators/OnboardingModalNavigator.tsx
+++ b/src/libs/Navigation/AppNavigator/Navigators/OnboardingModalNavigator.tsx
@@ -2,6 +2,7 @@ import {createStackNavigator} from '@react-navigation/stack';
import React, {useMemo} from 'react';
import {View} from 'react-native';
import NoDropZone from '@components/DragAndDrop/NoDropZone';
+import OnboardingWelcomeVideo from '@components/OnboardingWelcomeVideo';
import useOnboardingLayout from '@hooks/useOnboardingLayout';
import useThemeStyles from '@hooks/useThemeStyles';
import OnboardingModalNavigatorScreenOptions from '@libs/Navigation/AppNavigator/OnboardingModalNavigatorScreenOptions';
@@ -20,7 +21,7 @@ function OnboardingModalNavigator() {
return (
- {}} />
+
@@ -32,6 +33,10 @@ function OnboardingModalNavigator() {
name={SCREENS.ONBOARDING.PURPOSE}
component={OnboardingPurpose}
/>
+
diff --git a/src/libs/Navigation/AppNavigator/Navigators/Overlay/index.tsx b/src/libs/Navigation/AppNavigator/Navigators/Overlay/index.tsx
index 6917df30ce26..a2ce90475d4b 100644
--- a/src/libs/Navigation/AppNavigator/Navigators/Overlay/index.tsx
+++ b/src/libs/Navigation/AppNavigator/Navigators/Overlay/index.tsx
@@ -12,11 +12,13 @@ type OverlayProps = {
/* Callback to close the modal */
onPress?: () => void;
+ onOverlayClick?: () => void;
+
/* Returns whether a modal is displayed on the left side of the screen. By default, the modal is displayed on the right */
isModalOnTheLeft?: boolean;
};
-function Overlay({onPress, isModalOnTheLeft = false}: OverlayProps) {
+function Overlay({onOverlayClick, onPress, isModalOnTheLeft = false}: OverlayProps) {
const styles = useThemeStyles();
const {current} = useCardAnimation();
const {translate} = useLocalize();
@@ -33,7 +35,10 @@ function Overlay({onPress, isModalOnTheLeft = false}: OverlayProps) {
return (
-
+
{/* In the latest Electron version buttons can't be both clickable and draggable.
That's why we added this workaround. Because of two Pressable components on the desktop app
we have 30px draggable ba at the top and the rest of the dimmed area is clickable. On other devices,
diff --git a/src/libs/Navigation/linkingConfig/config.ts b/src/libs/Navigation/linkingConfig/config.ts
index dd4ebcdfd0cd..d0bbf07b38cb 100644
--- a/src/libs/Navigation/linkingConfig/config.ts
+++ b/src/libs/Navigation/linkingConfig/config.ts
@@ -90,6 +90,10 @@ const config: LinkingOptions['config'] = {
path: ROUTES.ONBOARDING_PURPOSE,
exact: true,
},
+ [SCREENS.ONBOARDING.WELCOME_VIDEO]: {
+ path: ROUTES.ONBOARDING_WELCOME_VIDEO,
+ exact: true,
+ },
},
},
[NAVIGATORS.RIGHT_MODAL_NAVIGATOR]: {
diff --git a/src/libs/Navigation/types.ts b/src/libs/Navigation/types.ts
index 5b0b5ff3f630..27e7343477e4 100644
--- a/src/libs/Navigation/types.ts
+++ b/src/libs/Navigation/types.ts
@@ -466,6 +466,7 @@ type OnboardingModalNavigatorParamList = {
[SCREENS.ONBOARDING_MODAL.ONBOARDING]: undefined;
[SCREENS.ONBOARDING.PERSONAL_DETAILS]: undefined;
[SCREENS.ONBOARDING.PURPOSE]: undefined;
+ [SCREENS.ONBOARDING.WELCOME_VIDEO]: undefined;
};
type BottomTabNavigatorParamList = {
diff --git a/src/styles/index.ts b/src/styles/index.ts
index 00a8d4dcf0ff..e277764a22be 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -4144,12 +4144,12 @@ const styles = (theme: ThemeColors) =>
fontSize: 9,
},
- onboardingVideoContainer: {
- backgroundColor: theme.onboardingVideoBG,
- justifyContent: 'center',
- alignItems: 'center',
- borderRadius: 10,
- },
+ // onboardingVideoContainer: {
+ // backgroundColor: theme.onboardingVideoBG,
+ // justifyContent: 'center',
+ // alignItems: 'center',
+ // borderRadius: 10,
+ // },
onboardingVideoPlayer: {
borderRadius: 10,
From 7f6194c5877da4825cf37fefe0ce631038d3c4d1 Mon Sep 17 00:00:00 2001
From: Maciej Dobosz
Date: Tue, 27 Feb 2024 17:09:48 +0100
Subject: [PATCH 12/29] Add texts; desktop vs mobile styles
---
src/components/OnboardingWelcomeVideo.tsx | 34 ++++++++++++++++++-----
src/styles/index.ts | 15 +++++-----
src/styles/variables.ts | 1 +
3 files changed, 35 insertions(+), 15 deletions(-)
diff --git a/src/components/OnboardingWelcomeVideo.tsx b/src/components/OnboardingWelcomeVideo.tsx
index bdf5e7ff27ac..f17e0c107ff3 100644
--- a/src/components/OnboardingWelcomeVideo.tsx
+++ b/src/components/OnboardingWelcomeVideo.tsx
@@ -1,4 +1,5 @@
-import React, {useCallback, useEffect, useState} from 'react';
+import React, {useCallback, useEffect, useRef, useState} from 'react';
+import type {LayoutChangeEvent, LayoutRectangle} from 'react-native';
import {View} from 'react-native';
import useLocalize from '@hooks/useLocalize';
import useNetwork from '@hooks/useNetwork';
@@ -6,6 +7,7 @@ import useOnboardingLayout from '@hooks/useOnboardingLayout';
import useThemeStyles from '@hooks/useThemeStyles';
import useWindowDimensions from '@hooks/useWindowDimensions';
import Navigation from '@libs/Navigation/Navigation';
+import variables from '@styles/variables';
import CONST from '@src/CONST';
import Button from './Button';
import Lottie from './Lottie';
@@ -14,10 +16,9 @@ import Modal from './Modal';
import Text from './Text';
import VideoPlayer from './VideoPlayer';
-const BASE_VIDEO_WIDTH = 640;
const BASE_VIDEO_ASPECT_RATIO = 2;
-const MODAL_PADDING = 16;
+const MODAL_PADDING = variables.spacing2;
type VideoLoadedEventType = {
srcElement: {
@@ -35,7 +36,8 @@ type VideoStatus = 'video' | 'animation';
function OnboardingWelcomeVideo() {
const {translate} = useLocalize();
const styles = useThemeStyles();
- const {isSmallScreenWidth, windowHeight, windowWidth} = useWindowDimensions();
+ const containerDimensions = useRef({width: 0, height: 0, x: 0, y: 0});
+ const {isSmallScreenWidth, windowHeight} = useWindowDimensions();
const {shouldUseNarrowLayout} = useOnboardingLayout();
const [isModalOpen, setIsModalOpen] = useState(true);
const [welcomeVideoStatus, setWelcomeVideoStatus] = useState('video');
@@ -58,6 +60,10 @@ function OnboardingWelcomeVideo() {
}
}, [isOffline, isVideoLoaded, isWelcomeVideoStatusLocked]);
+ const storeContainerDimensions = (event: LayoutChangeEvent) => {
+ containerDimensions.current = event.nativeEvent.layout;
+ };
+
const closeModal = useCallback(() => {
setIsModalOpen(false);
Navigation.goBack();
@@ -76,12 +82,13 @@ function OnboardingWelcomeVideo() {
const getWelcomeVideo = () => {
if (welcomeVideoStatus === 'video') {
- const videoWidth = 500;
+ const videoWidth = containerDimensions.current.width - 2 * MODAL_PADDING;
- // Temporary file supplied for testing purposes, to be changed when correct one gets uploaded on backend
return (
- {getWelcomeVideo()}
+ {getWelcomeVideo()}
+
+
+ {translate('onboarding.welcomeVideo.title')}
+ {translate('onboarding.welcomeVideo.description')}
+
+
+
);
diff --git a/src/styles/index.ts b/src/styles/index.ts
index e277764a22be..82b0b0827f64 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -418,6 +418,12 @@ const styles = (theme: ThemeColors) =>
lineHeight: variables.lineHeightHero,
},
+ textHeroSmall: {
+ ...headlineFont,
+ fontSize: variables.fontSizeSignInHeroSmall,
+ lineHeight: variables.fontSizeSignInHeroSmallLineHeight,
+ },
+
textStrong: {
fontFamily: FontUtils.fontFamily.platform.EXP_NEUE_BOLD,
fontWeight: FontUtils.fontWeight.bold,
@@ -4144,15 +4150,8 @@ const styles = (theme: ThemeColors) =>
fontSize: 9,
},
- // onboardingVideoContainer: {
- // backgroundColor: theme.onboardingVideoBG,
- // justifyContent: 'center',
- // alignItems: 'center',
- // borderRadius: 10,
- // },
-
onboardingVideoPlayer: {
- borderRadius: 10,
+ borderRadius: 12,
},
sidebarStatusAvatarContainer: {
diff --git a/src/styles/variables.ts b/src/styles/variables.ts
index c6c29fdc4b79..db71405342ad 100644
--- a/src/styles/variables.ts
+++ b/src/styles/variables.ts
@@ -67,6 +67,7 @@ export default {
fontSizeSignInHeroMedium: 38,
fontSizeSignInHeroXSmall: 26,
fontSizeSignInHeroSmall: 28,
+ fontSizeSignInHeroSmallLineHeight: 30.8,
fontSizeSignInHeroBody: 20,
lineHeightHero: 45,
iconSizeXXXSmall: 4,
From 58e1fb26750c0284e7b89443f5c8e8c71a5e056a Mon Sep 17 00:00:00 2001
From: Maciej Dobosz
Date: Wed, 28 Feb 2024 16:52:43 +0100
Subject: [PATCH 13/29] Drop useless array
---
src/pages/OnboardingPersonalDetails.tsx | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/src/pages/OnboardingPersonalDetails.tsx b/src/pages/OnboardingPersonalDetails.tsx
index 1e94b18273a7..e6fbba009fa7 100644
--- a/src/pages/OnboardingPersonalDetails.tsx
+++ b/src/pages/OnboardingPersonalDetails.tsx
@@ -88,8 +88,8 @@ function OnboardingPersonalDetails({currentUserPersonalDetails}: OnboardingPerso
shouldTrimValues={false}
>
- {translate('onboarding.welcome')}
- {translate('onboarding.whatsYourName')}
+ {translate('onboarding.welcome')}
+ {translate('onboarding.whatsYourName')}
Date: Wed, 28 Feb 2024 16:57:23 +0100
Subject: [PATCH 14/29] Fix translation key conflict
---
src/languages/en.ts | 12 +++++-------
1 file changed, 5 insertions(+), 7 deletions(-)
diff --git a/src/languages/en.ts b/src/languages/en.ts
index d09423b4ce41..a2571cecdc63 100755
--- a/src/languages/en.ts
+++ b/src/languages/en.ts
@@ -1212,6 +1212,11 @@ export default {
},
onboarding: {
welcome: 'Welcome!',
+ welcomeVideo: {
+ title: 'Welcome to Expensify',
+ description: 'Getting paid is as easy as sending a message.',
+ button: "Let's go",
+ },
whatsYourName: "What's your name?",
error: {
requiredFirstName: 'Please input your first name to continue',
@@ -2222,13 +2227,6 @@ export default {
selectSuggestedAddress: 'Please select a suggested address or use current location',
},
},
- onboarding: {
- welcomeVideo: {
- title: 'Welcome to Expensify',
- description: 'Getting paid is as easy as sending a message.',
- button: "Let's go",
- },
- },
reportCardLostOrDamaged: {
report: 'Report physical card loss / damage',
screenTitle: 'Report card lost or damaged',
From 018654e75cf94dbba75503deb8b0e991d86b491c Mon Sep 17 00:00:00 2001
From: Maciej Dobosz
Date: Wed, 28 Feb 2024 17:40:50 +0100
Subject: [PATCH 15/29] Fix video aspect ratio mobile+desktop
---
src/components/OnboardingWelcomeVideo.tsx | 49 +++++++----------------
1 file changed, 15 insertions(+), 34 deletions(-)
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')}
-
-
-
-
-
- );
}
OnboardingWelcomeVideo.displayName = 'OnboardingWelcomeVideo';
From 9e9a5ececd607a6f5d33ecff1af9f7024c167fc8 Mon Sep 17 00:00:00 2001
From: Maciej Dobosz
Date: Thu, 29 Feb 2024 10:36:19 +0100
Subject: [PATCH 16/29] Root route for onboarding
---
src/ROUTES.ts | 1 +
src/libs/Navigation/linkingConfig/config.ts | 1 +
2 files changed, 2 insertions(+)
diff --git a/src/ROUTES.ts b/src/ROUTES.ts
index c0dbe294b0d8..beca78de5c48 100644
--- a/src/ROUTES.ts
+++ b/src/ROUTES.ts
@@ -513,6 +513,7 @@ const ROUTES = {
getRoute: (contentType: string, backTo?: string) => getUrlWithBackToParam(`referral/${contentType}`, backTo),
},
PROCESS_MONEY_REQUEST_HOLD: 'hold-request-educational',
+ ONBOARDING_ROOT: 'onboarding',
ONBOARDING_PERSONAL_DETAILS: 'onboarding/personal-details',
ONBOARDING_PURPOSE: 'onboarding/purpose',
ONBOARDING_WELCOME_VIDEO: 'onboarding/welcome-video',
diff --git a/src/libs/Navigation/linkingConfig/config.ts b/src/libs/Navigation/linkingConfig/config.ts
index d0bbf07b38cb..7e306134aa8b 100644
--- a/src/libs/Navigation/linkingConfig/config.ts
+++ b/src/libs/Navigation/linkingConfig/config.ts
@@ -81,6 +81,7 @@ const config: LinkingOptions['config'] = {
},
},
[NAVIGATORS.ONBOARDING_MODAL_NAVIGATOR]: {
+ path: ROUTES.ONBOARDING_ROOT,
screens: {
[SCREENS.ONBOARDING.PERSONAL_DETAILS]: {
path: ROUTES.ONBOARDING_PERSONAL_DETAILS,
From b956daeae0b92cd319ced62e27b7f74f540cfd4a Mon Sep 17 00:00:00 2001
From: Maciej Dobosz
Date: Thu, 29 Feb 2024 10:46:55 +0100
Subject: [PATCH 17/29] Set max height
---
src/styles/index.ts | 1 +
1 file changed, 1 insertion(+)
diff --git a/src/styles/index.ts b/src/styles/index.ts
index 36e2cba6f0f3..174a910a4090 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -1531,6 +1531,7 @@ const styles = (theme: ThemeColors) =>
({
width: shouldUseNarrowLayout ? 500 : '100%',
height: shouldUseNarrowLayout ? 712 : '100%',
+ maxHeight: '100%',
borderRadius: shouldUseNarrowLayout ? 16 : 0,
overflow: 'hidden',
} satisfies ViewStyle),
From 900527c8e6c07bfecf792ed8f1be8cd107a446ce Mon Sep 17 00:00:00 2001
From: Maciej Dobosz
Date: Thu, 29 Feb 2024 15:19:20 +0100
Subject: [PATCH 18/29] Rename methods; clean code
---
src/components/OnboardingWelcomeVideo.tsx | 12 ++++--------
1 file changed, 4 insertions(+), 8 deletions(-)
diff --git a/src/components/OnboardingWelcomeVideo.tsx b/src/components/OnboardingWelcomeVideo.tsx
index dfc215ff55cf..e93432763519 100644
--- a/src/components/OnboardingWelcomeVideo.tsx
+++ b/src/components/OnboardingWelcomeVideo.tsx
@@ -9,15 +9,13 @@ import useThemeStyles from '@hooks/useThemeStyles';
import useWindowDimensions from '@hooks/useWindowDimensions';
import Navigation from '@libs/Navigation/Navigation';
import variables from '@styles/variables';
-import CONST from '@src/CONST';
import Button from './Button';
import Lottie from './Lottie';
import LottieAnimations from './LottieAnimations';
-import Modal from './Modal';
import Text from './Text';
import VideoPlayer from './VideoPlayer';
-const BASE_VIDEO_ASPECT_RATIO = 2;
+const BASE_VIDEO_ASPECT_RATIO = 484 / 272.25;
const MODAL_PADDING = variables.spacing2;
@@ -38,9 +36,8 @@ function OnboardingWelcomeVideo() {
const {translate} = useLocalize();
const styles = useThemeStyles();
const containerDimensions = useRef({width: 0, height: 0, x: 0, y: 0});
- const {isSmallScreenWidth, windowHeight} = useWindowDimensions();
+ const {isSmallScreenWidth} = useWindowDimensions();
const {shouldUseNarrowLayout} = useOnboardingLayout();
- const [isModalOpen, setIsModalOpen] = useState(true);
const [welcomeVideoStatus, setWelcomeVideoStatus] = useState('video');
const [isWelcomeVideoStatusLocked, setIsWelcomeVideoStatusLocked] = useState(false);
const [isVideoLoaded, setIsVideoLoaded] = useState(false);
@@ -66,11 +63,10 @@ function OnboardingWelcomeVideo() {
};
const closeModal = useCallback(() => {
- setIsModalOpen(false);
Navigation.goBack();
}, []);
- const onVideoLoaded = (e: VideoReadyForDisplayEvent | VideoLoadedEventType | undefined) => {
+ const setAspectRatio = (e: VideoReadyForDisplayEvent | VideoLoadedEventType | undefined) => {
if (!e) {
return;
}
@@ -98,7 +94,7 @@ function OnboardingWelcomeVideo() {
// be changed when correct one gets uploaded on backend
url="https://d23dyxeqlo5psv.cloudfront.net/big_buck_bunny.mp4"
videoPlayerStyle={[styles.onboardingVideoPlayer, {width: videoWidth, height: videoWidth / videoAspectRatio}]}
- onVideoLoaded={onVideoLoaded}
+ onVideoLoaded={setAspectRatio}
onPlaybackStatusUpdate={setVideoStatus}
shouldShowProgressVolumeOnly
shouldPlay
From e703a14b6409629254953d0efa61ebf5a21922a4 Mon Sep 17 00:00:00 2001
From: Maciej Dobosz
Date: Thu, 29 Feb 2024 16:28:50 +0100
Subject: [PATCH 19/29] New navigator - WelcomeVideoNavigator
---
src/NAVIGATORS.ts | 1 +
src/ROUTES.ts | 2 +-
src/SCREENS.ts | 5 ++-
.../Navigation/AppNavigator/AuthScreens.tsx | 6 +++
.../Navigators/OnboardingModalNavigator.tsx | 5 ---
.../Navigators/WelcomeVideoModalNavigator.tsx | 39 +++++++++++++++++++
...WelcomeVideoModalNavigatorScreenOptions.ts | 18 +++++++++
src/libs/Navigation/linkingConfig/config.ts | 13 +++++--
.../linkingConfig/getAdaptedStateFromPath.ts | 7 +++-
src/libs/Navigation/types.ts | 7 +++-
src/styles/index.ts | 9 +++++
11 files changed, 99 insertions(+), 13 deletions(-)
create mode 100644 src/libs/Navigation/AppNavigator/Navigators/WelcomeVideoModalNavigator.tsx
create mode 100644 src/libs/Navigation/AppNavigator/WelcomeVideoModalNavigatorScreenOptions.ts
diff --git a/src/NAVIGATORS.ts b/src/NAVIGATORS.ts
index 10e268b07520..f199d2841ec0 100644
--- a/src/NAVIGATORS.ts
+++ b/src/NAVIGATORS.ts
@@ -8,5 +8,6 @@ export default {
LEFT_MODAL_NAVIGATOR: 'LeftModalNavigator',
RIGHT_MODAL_NAVIGATOR: 'RightModalNavigator',
ONBOARDING_MODAL_NAVIGATOR: 'OnboardingModalNavigator',
+ WELCOME_VIDEO_MODAL_NAVIGATOR: 'WelcomeVideoModalNavigator',
FULL_SCREEN_NAVIGATOR: 'FullScreenNavigator',
} as const;
diff --git a/src/ROUTES.ts b/src/ROUTES.ts
index beca78de5c48..4a8fe3f0141b 100644
--- a/src/ROUTES.ts
+++ b/src/ROUTES.ts
@@ -516,7 +516,7 @@ const ROUTES = {
ONBOARDING_ROOT: 'onboarding',
ONBOARDING_PERSONAL_DETAILS: 'onboarding/personal-details',
ONBOARDING_PURPOSE: 'onboarding/purpose',
- ONBOARDING_WELCOME_VIDEO: 'onboarding/welcome-video',
+ WELCOME_VIDEO_ROOT: 'onboarding/welcome-video',
} as const;
/**
diff --git a/src/SCREENS.ts b/src/SCREENS.ts
index 20457b1849f2..51da93d970c6 100644
--- a/src/SCREENS.ts
+++ b/src/SCREENS.ts
@@ -237,7 +237,6 @@ const SCREENS = {
ONBOARDING: {
PERSONAL_DETAILS: 'Onboarding_Personal_Details',
PURPOSE: 'Onboarding_Purpose',
- WELCOME_VIDEO: 'Onboarding_Welcome_Video',
},
ONBOARD_ENGAGEMENT: {
@@ -246,6 +245,10 @@ const SCREENS = {
EXPENSIFY_CLASSIC: 'Expenisfy_Classic',
},
+ WELCOME_VIDEO: {
+ ROOT: 'Welcome_Video_Root',
+ },
+
I_KNOW_A_TEACHER: 'I_Know_A_Teacher',
INTRO_SCHOOL_PRINCIPAL: 'Intro_School_Principal',
I_AM_A_TEACHER: 'I_Am_A_Teacher',
diff --git a/src/libs/Navigation/AppNavigator/AuthScreens.tsx b/src/libs/Navigation/AppNavigator/AuthScreens.tsx
index 47d34ccdbfc5..70b75c94223e 100644
--- a/src/libs/Navigation/AppNavigator/AuthScreens.tsx
+++ b/src/libs/Navigation/AppNavigator/AuthScreens.tsx
@@ -43,6 +43,7 @@ import FullScreenNavigator from './Navigators/FullScreenNavigator';
import LeftModalNavigator from './Navigators/LeftModalNavigator';
import OnboardingModalNavigator from './Navigators/OnboardingModalNavigator';
import RightModalNavigator from './Navigators/RightModalNavigator';
+import WelcomeVideoModalNavigator from './Navigators/WelcomeVideoModalNavigator';
type AuthScreensProps = {
/** Session of currently logged in user */
@@ -268,6 +269,11 @@ function AuthScreens({session, lastOpenedPublicRoomID, isUsingMemoryOnlyKeys = f
return (
+
-
diff --git a/src/libs/Navigation/AppNavigator/Navigators/WelcomeVideoModalNavigator.tsx b/src/libs/Navigation/AppNavigator/Navigators/WelcomeVideoModalNavigator.tsx
new file mode 100644
index 000000000000..e24906e81260
--- /dev/null
+++ b/src/libs/Navigation/AppNavigator/Navigators/WelcomeVideoModalNavigator.tsx
@@ -0,0 +1,39 @@
+import {createStackNavigator} from '@react-navigation/stack';
+import React, {useMemo} from 'react';
+import {View} from 'react-native';
+import NoDropZone from '@components/DragAndDrop/NoDropZone';
+import OnboardingWelcomeVideo from '@components/OnboardingWelcomeVideo';
+import useOnboardingLayout from '@hooks/useOnboardingLayout';
+import useThemeStyles from '@hooks/useThemeStyles';
+import WelcomeVideoModalNavigatorScreenOptions from '@libs/Navigation/AppNavigator/WelcomeVideoModalNavigatorScreenOptions';
+import type {WelcomeVideoModalNavigatorParamList} from '@libs/Navigation/types';
+import SCREENS from '@src/SCREENS';
+import Overlay from './Overlay';
+
+const Stack = createStackNavigator();
+
+function WelcomeVideoModalNavigator() {
+ const styles = useThemeStyles();
+ const screenOptions = useMemo(() => WelcomeVideoModalNavigatorScreenOptions(styles), [styles]);
+ const {shouldUseNarrowLayout} = useOnboardingLayout();
+
+ return (
+
+
+
+
+
+
+
+
+
+
+ );
+}
+
+WelcomeVideoModalNavigator.displayName = 'WelcomeVideoModalNavigator';
+
+export default WelcomeVideoModalNavigator;
diff --git a/src/libs/Navigation/AppNavigator/WelcomeVideoModalNavigatorScreenOptions.ts b/src/libs/Navigation/AppNavigator/WelcomeVideoModalNavigatorScreenOptions.ts
new file mode 100644
index 000000000000..b824afd30cd5
--- /dev/null
+++ b/src/libs/Navigation/AppNavigator/WelcomeVideoModalNavigatorScreenOptions.ts
@@ -0,0 +1,18 @@
+import type {StackNavigationOptions} from '@react-navigation/stack';
+import {CardStyleInterpolators} from '@react-navigation/stack';
+import type {ThemeStyles} from '@styles/index';
+
+/**
+ * Modal stack navigator screen options generator function
+ * @returns The screen options object
+ */
+const OnboardingModalNavigatorScreenOptions = (themeStyles: ThemeStyles): StackNavigationOptions => ({
+ headerShown: false,
+ animationEnabled: true,
+ gestureDirection: 'horizontal',
+ cardStyle: themeStyles.navigationOnboardingScreenCardStyle,
+ cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS,
+ presentation: 'transparentModal',
+});
+
+export default OnboardingModalNavigatorScreenOptions;
diff --git a/src/libs/Navigation/linkingConfig/config.ts b/src/libs/Navigation/linkingConfig/config.ts
index 7e306134aa8b..ca5eeb965b86 100644
--- a/src/libs/Navigation/linkingConfig/config.ts
+++ b/src/libs/Navigation/linkingConfig/config.ts
@@ -80,6 +80,15 @@ const config: LinkingOptions['config'] = {
},
},
},
+ [NAVIGATORS.WELCOME_VIDEO_MODAL_NAVIGATOR]: {
+ path: ROUTES.WELCOME_VIDEO_ROOT,
+ screens: {
+ [SCREENS.WELCOME_VIDEO.ROOT]: {
+ path: ROUTES.WELCOME_VIDEO_ROOT,
+ exact: true,
+ },
+ },
+ },
[NAVIGATORS.ONBOARDING_MODAL_NAVIGATOR]: {
path: ROUTES.ONBOARDING_ROOT,
screens: {
@@ -91,10 +100,6 @@ const config: LinkingOptions['config'] = {
path: ROUTES.ONBOARDING_PURPOSE,
exact: true,
},
- [SCREENS.ONBOARDING.WELCOME_VIDEO]: {
- path: ROUTES.ONBOARDING_WELCOME_VIDEO,
- exact: true,
- },
},
},
[NAVIGATORS.RIGHT_MODAL_NAVIGATOR]: {
diff --git a/src/libs/Navigation/linkingConfig/getAdaptedStateFromPath.ts b/src/libs/Navigation/linkingConfig/getAdaptedStateFromPath.ts
index fecfa4c2995a..e2dd2284df9c 100644
--- a/src/libs/Navigation/linkingConfig/getAdaptedStateFromPath.ts
+++ b/src/libs/Navigation/linkingConfig/getAdaptedStateFromPath.ts
@@ -152,6 +152,7 @@ function getAdaptedState(state: PartialState
const rhpNavigator = state.routes.find((route) => route.name === NAVIGATORS.RIGHT_MODAL_NAVIGATOR);
const lhpNavigator = state.routes.find((route) => route.name === NAVIGATORS.LEFT_MODAL_NAVIGATOR);
const onboardingModalNavigator = state.routes.find((route) => route.name === NAVIGATORS.ONBOARDING_MODAL_NAVIGATOR);
+ const welcomeVideoModalNavigator = state.routes.find((route) => route.name === NAVIGATORS.WELCOME_VIDEO_MODAL_NAVIGATOR);
if (rhpNavigator) {
// Routes
@@ -185,7 +186,7 @@ function getAdaptedState(state: PartialState
metainfo,
};
}
- if (lhpNavigator ?? onboardingModalNavigator) {
+ if (lhpNavigator ?? onboardingModalNavigator ?? welcomeVideoModalNavigator) {
// Routes
// - default bottom tab
// - default central pane on desktop layout
@@ -220,6 +221,10 @@ function getAdaptedState(state: PartialState
routes.push(onboardingModalNavigator);
}
+ if (welcomeVideoModalNavigator) {
+ routes.push(welcomeVideoModalNavigator);
+ }
+
return {
adaptedState: getRoutesWithIndex(routes),
metainfo,
diff --git a/src/libs/Navigation/types.ts b/src/libs/Navigation/types.ts
index 27e7343477e4..e2b4732f56a2 100644
--- a/src/libs/Navigation/types.ts
+++ b/src/libs/Navigation/types.ts
@@ -466,7 +466,10 @@ type OnboardingModalNavigatorParamList = {
[SCREENS.ONBOARDING_MODAL.ONBOARDING]: undefined;
[SCREENS.ONBOARDING.PERSONAL_DETAILS]: undefined;
[SCREENS.ONBOARDING.PURPOSE]: undefined;
- [SCREENS.ONBOARDING.WELCOME_VIDEO]: undefined;
+};
+
+type WelcomeVideoModalNavigatorParamList = {
+ [SCREENS.WELCOME_VIDEO.ROOT]: undefined;
};
type BottomTabNavigatorParamList = {
@@ -530,6 +533,7 @@ type AuthScreensParamList = {
[NAVIGATORS.RIGHT_MODAL_NAVIGATOR]: NavigatorScreenParams;
[NAVIGATORS.FULL_SCREEN_NAVIGATOR]: NavigatorScreenParams;
[NAVIGATORS.ONBOARDING_MODAL_NAVIGATOR]: NavigatorScreenParams;
+ [NAVIGATORS.WELCOME_VIDEO_MODAL_NAVIGATOR]: NavigatorScreenParams;
[SCREENS.DESKTOP_SIGN_IN_REDIRECT]: undefined;
};
@@ -564,6 +568,7 @@ export type {
LeftModalNavigatorParamList,
RightModalNavigatorParamList,
OnboardingModalNavigatorParamList,
+ WelcomeVideoModalNavigatorParamList,
PublicScreensParamList,
MoneyRequestNavigatorParamList,
SplitDetailsNavigatorParamList,
diff --git a/src/styles/index.ts b/src/styles/index.ts
index 174a910a4090..d980ea73480f 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -1536,6 +1536,15 @@ const styles = (theme: ThemeColors) =>
overflow: 'hidden',
} satisfies ViewStyle),
+ WelcomeVideoNavigatorInnerView: (shouldUseNarrowLayout: boolean) =>
+ ({
+ width: shouldUseNarrowLayout ? 500 : '100%',
+ height: shouldUseNarrowLayout ? 500 : '100%',
+ maxHeight: '100%',
+ borderRadius: shouldUseNarrowLayout ? 16 : 0,
+ overflow: 'hidden',
+ } satisfies ViewStyle),
+
onlyEmojisText: {
fontSize: variables.fontSizeOnlyEmojis,
lineHeight: variables.fontSizeOnlyEmojisHeight,
From c1d6c9689e1b9c7f7ec37d7e6aec1c590a21d60d Mon Sep 17 00:00:00 2001
From: Maciej Dobosz
Date: Thu, 29 Feb 2024 16:33:44 +0100
Subject: [PATCH 20/29] Drop cardStyle
---
.../AppNavigator/Navigators/OnboardingModalNavigator.tsx | 5 ++---
.../AppNavigator/Navigators/WelcomeVideoModalNavigator.tsx | 5 ++---
.../AppNavigator/OnboardingModalNavigatorScreenOptions.ts | 4 +---
.../AppNavigator/WelcomeVideoModalNavigatorScreenOptions.ts | 4 +---
src/styles/index.ts | 6 ------
5 files changed, 6 insertions(+), 18 deletions(-)
diff --git a/src/libs/Navigation/AppNavigator/Navigators/OnboardingModalNavigator.tsx b/src/libs/Navigation/AppNavigator/Navigators/OnboardingModalNavigator.tsx
index 129879e5f15d..6f4fbb08403b 100644
--- a/src/libs/Navigation/AppNavigator/Navigators/OnboardingModalNavigator.tsx
+++ b/src/libs/Navigation/AppNavigator/Navigators/OnboardingModalNavigator.tsx
@@ -1,5 +1,5 @@
import {createStackNavigator} from '@react-navigation/stack';
-import React, {useMemo} from 'react';
+import React from 'react';
import {View} from 'react-native';
import NoDropZone from '@components/DragAndDrop/NoDropZone';
import useOnboardingLayout from '@hooks/useOnboardingLayout';
@@ -15,7 +15,6 @@ const Stack = createStackNavigator();
function OnboardingModalNavigator() {
const styles = useThemeStyles();
- const screenOptions = useMemo(() => OnboardingModalNavigatorScreenOptions(styles), [styles]);
const {shouldUseNarrowLayout} = useOnboardingLayout();
return (
@@ -23,7 +22,7 @@ function OnboardingModalNavigator() {
-
+
();
function WelcomeVideoModalNavigator() {
const styles = useThemeStyles();
- const screenOptions = useMemo(() => WelcomeVideoModalNavigatorScreenOptions(styles), [styles]);
const {shouldUseNarrowLayout} = useOnboardingLayout();
return (
@@ -22,7 +21,7 @@ function WelcomeVideoModalNavigator() {
-
+
({
+const OnboardingModalNavigatorScreenOptions = (): StackNavigationOptions => ({
headerShown: false,
animationEnabled: true,
gestureDirection: 'horizontal',
- cardStyle: themeStyles.navigationOnboardingScreenCardStyle,
cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS,
presentation: 'transparentModal',
});
diff --git a/src/libs/Navigation/AppNavigator/WelcomeVideoModalNavigatorScreenOptions.ts b/src/libs/Navigation/AppNavigator/WelcomeVideoModalNavigatorScreenOptions.ts
index b824afd30cd5..d4607a809f17 100644
--- a/src/libs/Navigation/AppNavigator/WelcomeVideoModalNavigatorScreenOptions.ts
+++ b/src/libs/Navigation/AppNavigator/WelcomeVideoModalNavigatorScreenOptions.ts
@@ -1,16 +1,14 @@
import type {StackNavigationOptions} from '@react-navigation/stack';
import {CardStyleInterpolators} from '@react-navigation/stack';
-import type {ThemeStyles} from '@styles/index';
/**
* Modal stack navigator screen options generator function
* @returns The screen options object
*/
-const OnboardingModalNavigatorScreenOptions = (themeStyles: ThemeStyles): StackNavigationOptions => ({
+const OnboardingModalNavigatorScreenOptions = (): StackNavigationOptions => ({
headerShown: false,
animationEnabled: true,
gestureDirection: 'horizontal',
- cardStyle: themeStyles.navigationOnboardingScreenCardStyle,
cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS,
presentation: 'transparentModal',
});
diff --git a/src/styles/index.ts b/src/styles/index.ts
index d980ea73480f..867565e69d6b 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -2757,12 +2757,6 @@ const styles = (theme: ThemeColors) =>
height: '100%',
},
- navigationOnboardingScreenCardStyle: {
- backgroundColor: 'transparent',
- width: '100%',
- height: '100%',
- },
-
invisible: {
position: 'absolute',
opacity: 0,
From b886feadbe815296d63ef0398f02b865bee80fde Mon Sep 17 00:00:00 2001
From: Maciej Dobosz
Date: Thu, 29 Feb 2024 16:39:39 +0100
Subject: [PATCH 21/29] Video layout improvements
---
src/components/OnboardingWelcomeVideo.tsx | 19 ++++++++++++++-----
1 file changed, 14 insertions(+), 5 deletions(-)
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')}
From 671d923be99730837c866180c75863d66971a5e8 Mon Sep 17 00:00:00 2001
From: Maciej Dobosz
Date: Fri, 1 Mar 2024 12:37:38 +0100
Subject: [PATCH 22/29] Separate styles for welcome video navigator
---
.../Navigators/WelcomeVideoModalNavigator.tsx | 2 +-
src/styles/index.ts | 8 +++++++-
2 files changed, 8 insertions(+), 2 deletions(-)
diff --git a/src/libs/Navigation/AppNavigator/Navigators/WelcomeVideoModalNavigator.tsx b/src/libs/Navigation/AppNavigator/Navigators/WelcomeVideoModalNavigator.tsx
index 0b00d3e4c0d4..6940a73f1dba 100644
--- a/src/libs/Navigation/AppNavigator/Navigators/WelcomeVideoModalNavigator.tsx
+++ b/src/libs/Navigation/AppNavigator/Navigators/WelcomeVideoModalNavigator.tsx
@@ -19,7 +19,7 @@ function WelcomeVideoModalNavigator() {
return (
-
+
alignItems: 'center',
},
+ welcomeVideoNavigatorOuterView: {
+ flex: 1,
+ justifyContent: 'flex-end',
+ },
+
OnboardingNavigatorInnerView: (shouldUseNarrowLayout: boolean) =>
({
width: shouldUseNarrowLayout ? 500 : '100%',
@@ -1539,7 +1544,8 @@ const styles = (theme: ThemeColors) =>
WelcomeVideoNavigatorInnerView: (shouldUseNarrowLayout: boolean) =>
({
width: shouldUseNarrowLayout ? 500 : '100%',
- height: shouldUseNarrowLayout ? 500 : '100%',
+ height: 500,
+ backgroundColor: 'red',
maxHeight: '100%',
borderRadius: shouldUseNarrowLayout ? 16 : 0,
overflow: 'hidden',
From 76961f8db681d7c9e8438090517a53b6b7a8057d Mon Sep 17 00:00:00 2001
From: Maciej Dobosz
Date: Fri, 1 Mar 2024 15:31:22 +0100
Subject: [PATCH 23/29] Rewrite to use Modal
---
src/components/OnboardingWelcomeVideo.tsx | 41 +++++++++++--------
.../Navigators/WelcomeVideoModalNavigator.tsx | 3 +-
...WelcomeVideoModalNavigatorScreenOptions.ts | 8 +---
src/styles/index.ts | 8 +---
4 files changed, 30 insertions(+), 30 deletions(-)
diff --git a/src/components/OnboardingWelcomeVideo.tsx b/src/components/OnboardingWelcomeVideo.tsx
index 71970c07b4e1..11940ef113c2 100644
--- a/src/components/OnboardingWelcomeVideo.tsx
+++ b/src/components/OnboardingWelcomeVideo.tsx
@@ -9,9 +9,11 @@ import useThemeStyles from '@hooks/useThemeStyles';
import useWindowDimensions from '@hooks/useWindowDimensions';
import Navigation from '@libs/Navigation/Navigation';
import variables from '@styles/variables';
+import CONST from '@src/CONST';
import Button from './Button';
import Lottie from './Lottie';
import LottieAnimations from './LottieAnimations';
+import Modal from './Modal';
import Text from './Text';
import VideoPlayer from './VideoPlayer';
@@ -39,6 +41,7 @@ function OnboardingWelcomeVideo() {
const {translate} = useLocalize();
const styles = useThemeStyles();
const containerDimensions = useRef({width: 0, height: 0, x: 0, y: 0});
+ const [isModalVisible, setIsModalVisible] = useState(true);
const {isSmallScreenWidth} = useWindowDimensions();
const {shouldUseNarrowLayout} = useOnboardingLayout();
const [welcomeVideoStatus, setWelcomeVideoStatus] = useState('video');
@@ -66,6 +69,7 @@ function OnboardingWelcomeVideo() {
};
const closeModal = useCallback(() => {
+ setIsModalVisible(false);
Navigation.goBack();
}, []);
@@ -125,23 +129,28 @@ function OnboardingWelcomeVideo() {
};
return (
-
- {getWelcomeVideo()}
-
-
- {translate('onboarding.welcomeVideo.title')}
- {translate('onboarding.welcomeVideo.description')}
+
+
+ {getWelcomeVideo()}
+
+
+ {translate('onboarding.welcomeVideo.title')}
+ {translate('onboarding.welcomeVideo.description')}
+
+
-
-
+
);
}
diff --git a/src/libs/Navigation/AppNavigator/Navigators/WelcomeVideoModalNavigator.tsx b/src/libs/Navigation/AppNavigator/Navigators/WelcomeVideoModalNavigator.tsx
index 6940a73f1dba..ccdba05b6949 100644
--- a/src/libs/Navigation/AppNavigator/Navigators/WelcomeVideoModalNavigator.tsx
+++ b/src/libs/Navigation/AppNavigator/Navigators/WelcomeVideoModalNavigator.tsx
@@ -18,8 +18,7 @@ function WelcomeVideoModalNavigator() {
return (
-
-
+
({
+const WelcomeVideoModalNavigatorScreenOptions = (): StackNavigationOptions => ({
headerShown: false,
animationEnabled: true,
- gestureDirection: 'horizontal',
- cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS,
- presentation: 'transparentModal',
});
-export default OnboardingModalNavigatorScreenOptions;
+export default WelcomeVideoModalNavigatorScreenOptions;
diff --git a/src/styles/index.ts b/src/styles/index.ts
index b9d9e5cfa2be..3236f152de2a 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -1527,11 +1527,6 @@ const styles = (theme: ThemeColors) =>
alignItems: 'center',
},
- welcomeVideoNavigatorOuterView: {
- flex: 1,
- justifyContent: 'flex-end',
- },
-
OnboardingNavigatorInnerView: (shouldUseNarrowLayout: boolean) =>
({
width: shouldUseNarrowLayout ? 500 : '100%',
@@ -1545,10 +1540,11 @@ const styles = (theme: ThemeColors) =>
({
width: shouldUseNarrowLayout ? 500 : '100%',
height: 500,
- backgroundColor: 'red',
maxHeight: '100%',
borderRadius: shouldUseNarrowLayout ? 16 : 0,
overflow: 'hidden',
+ flex: 1,
+ justifyContent: 'center',
} satisfies ViewStyle),
onlyEmojisText: {
From 3bba5f146b561ac790d065a7cfb10b9e5ebde6a9 Mon Sep 17 00:00:00 2001
From: Maciej Dobosz
Date: Fri, 1 Mar 2024 15:41:57 +0100
Subject: [PATCH 24/29] Web styling for modal
---
src/components/OnboardingWelcomeVideo.tsx | 18 +++++++++---------
.../Navigators/WelcomeVideoModalNavigator.tsx | 4 +---
.../WelcomeVideoModalNavigatorScreenOptions.ts | 12 ------------
3 files changed, 10 insertions(+), 24 deletions(-)
delete mode 100644 src/libs/Navigation/AppNavigator/WelcomeVideoModalNavigatorScreenOptions.ts
diff --git a/src/components/OnboardingWelcomeVideo.tsx b/src/components/OnboardingWelcomeVideo.tsx
index 11940ef113c2..6587f5686590 100644
--- a/src/components/OnboardingWelcomeVideo.tsx
+++ b/src/components/OnboardingWelcomeVideo.tsx
@@ -97,7 +97,6 @@ function OnboardingWelcomeVideo() {
return (
-
+
{getWelcomeVideo()}
@@ -150,8 +150,8 @@ function OnboardingWelcomeVideo() {
text={translate('onboarding.welcomeVideo.button')}
/>
-
-
+
+
);
}
diff --git a/src/libs/Navigation/AppNavigator/Navigators/WelcomeVideoModalNavigator.tsx b/src/libs/Navigation/AppNavigator/Navigators/WelcomeVideoModalNavigator.tsx
index ccdba05b6949..f342ed5ab613 100644
--- a/src/libs/Navigation/AppNavigator/Navigators/WelcomeVideoModalNavigator.tsx
+++ b/src/libs/Navigation/AppNavigator/Navigators/WelcomeVideoModalNavigator.tsx
@@ -5,10 +5,8 @@ import NoDropZone from '@components/DragAndDrop/NoDropZone';
import OnboardingWelcomeVideo from '@components/OnboardingWelcomeVideo';
import useOnboardingLayout from '@hooks/useOnboardingLayout';
import useThemeStyles from '@hooks/useThemeStyles';
-import WelcomeVideoModalNavigatorScreenOptions from '@libs/Navigation/AppNavigator/WelcomeVideoModalNavigatorScreenOptions';
import type {WelcomeVideoModalNavigatorParamList} from '@libs/Navigation/types';
import SCREENS from '@src/SCREENS';
-import Overlay from './Overlay';
const Stack = createStackNavigator();
@@ -20,7 +18,7 @@ function WelcomeVideoModalNavigator() {
-
+
({
- headerShown: false,
- animationEnabled: true,
-});
-
-export default WelcomeVideoModalNavigatorScreenOptions;
From bb2e9b83320c76fb94dd1e88f680fe37fd7b2fcd Mon Sep 17 00:00:00 2001
From: Maciej Dobosz
Date: Fri, 1 Mar 2024 15:47:08 +0100
Subject: [PATCH 25/29] Drop unnecessary styles
---
src/components/OnboardingWelcomeVideo.tsx | 5 +----
.../Navigators/WelcomeVideoModalNavigator.tsx | 19 ++++++-------------
2 files changed, 7 insertions(+), 17 deletions(-)
diff --git a/src/components/OnboardingWelcomeVideo.tsx b/src/components/OnboardingWelcomeVideo.tsx
index 6587f5686590..3f8f6a4db0f6 100644
--- a/src/components/OnboardingWelcomeVideo.tsx
+++ b/src/components/OnboardingWelcomeVideo.tsx
@@ -133,10 +133,7 @@ function OnboardingWelcomeVideo() {
type={shouldUseNarrowLayout ? CONST.MODAL.MODAL_TYPE.CENTERED_SMALL : CONST.MODAL.MODAL_TYPE.BOTTOM_DOCKED}
onClose={closeModal}
>
-
+
{getWelcomeVideo()}
diff --git a/src/libs/Navigation/AppNavigator/Navigators/WelcomeVideoModalNavigator.tsx b/src/libs/Navigation/AppNavigator/Navigators/WelcomeVideoModalNavigator.tsx
index f342ed5ab613..c788af3f8d2b 100644
--- a/src/libs/Navigation/AppNavigator/Navigators/WelcomeVideoModalNavigator.tsx
+++ b/src/libs/Navigation/AppNavigator/Navigators/WelcomeVideoModalNavigator.tsx
@@ -3,28 +3,21 @@ import React from 'react';
import {View} from 'react-native';
import NoDropZone from '@components/DragAndDrop/NoDropZone';
import OnboardingWelcomeVideo from '@components/OnboardingWelcomeVideo';
-import useOnboardingLayout from '@hooks/useOnboardingLayout';
-import useThemeStyles from '@hooks/useThemeStyles';
import type {WelcomeVideoModalNavigatorParamList} from '@libs/Navigation/types';
import SCREENS from '@src/SCREENS';
const Stack = createStackNavigator();
function WelcomeVideoModalNavigator() {
- const styles = useThemeStyles();
- const {shouldUseNarrowLayout} = useOnboardingLayout();
-
return (
-
-
-
-
-
+
+
+
);
From b43027af625278e9094e327a7f8d6852c63f674f Mon Sep 17 00:00:00 2001
From: Maciej Dobosz
Date: Fri, 1 Mar 2024 15:48:43 +0100
Subject: [PATCH 26/29] Apply modal dimensions
---
src/components/OnboardingWelcomeVideo.tsx | 5 ++++-
src/styles/index.ts | 4 ----
2 files changed, 4 insertions(+), 5 deletions(-)
diff --git a/src/components/OnboardingWelcomeVideo.tsx b/src/components/OnboardingWelcomeVideo.tsx
index 3f8f6a4db0f6..bcac7ef3a156 100644
--- a/src/components/OnboardingWelcomeVideo.tsx
+++ b/src/components/OnboardingWelcomeVideo.tsx
@@ -133,7 +133,10 @@ function OnboardingWelcomeVideo() {
type={shouldUseNarrowLayout ? CONST.MODAL.MODAL_TYPE.CENTERED_SMALL : CONST.MODAL.MODAL_TYPE.BOTTOM_DOCKED}
onClose={closeModal}
>
-
+
{getWelcomeVideo()}
diff --git a/src/styles/index.ts b/src/styles/index.ts
index 3236f152de2a..58add3ffa5fb 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -1541,10 +1541,6 @@ const styles = (theme: ThemeColors) =>
width: shouldUseNarrowLayout ? 500 : '100%',
height: 500,
maxHeight: '100%',
- borderRadius: shouldUseNarrowLayout ? 16 : 0,
- overflow: 'hidden',
- flex: 1,
- justifyContent: 'center',
} satisfies ViewStyle),
onlyEmojisText: {
From 8795e1ce03e26ac765022759fb00ca126c64301f Mon Sep 17 00:00:00 2001
From: Maciej Dobosz
Date: Mon, 4 Mar 2024 11:52:21 +0100
Subject: [PATCH 27/29] Move stack declarations down
---
.../Navigation/AppNavigator/AuthScreens.tsx | 20 +++++++++----------
1 file changed, 10 insertions(+), 10 deletions(-)
diff --git a/src/libs/Navigation/AppNavigator/AuthScreens.tsx b/src/libs/Navigation/AppNavigator/AuthScreens.tsx
index 70b75c94223e..48ce0c77259e 100644
--- a/src/libs/Navigation/AppNavigator/AuthScreens.tsx
+++ b/src/libs/Navigation/AppNavigator/AuthScreens.tsx
@@ -269,16 +269,6 @@ function AuthScreens({session, lastOpenedPublicRoomID, isUsingMemoryOnlyKeys = f
return (
-
-
+
+
);
From 1297a40fa1a5238ed224e35d2bb104ef9ef02218 Mon Sep 17 00:00:00 2001
From: Maciej Dobosz
Date: Mon, 4 Mar 2024 11:52:32 +0100
Subject: [PATCH 28/29] Drop default path
---
src/libs/Navigation/linkingConfig/config.ts | 1 -
1 file changed, 1 deletion(-)
diff --git a/src/libs/Navigation/linkingConfig/config.ts b/src/libs/Navigation/linkingConfig/config.ts
index ca5eeb965b86..eb0af82521ad 100644
--- a/src/libs/Navigation/linkingConfig/config.ts
+++ b/src/libs/Navigation/linkingConfig/config.ts
@@ -81,7 +81,6 @@ const config: LinkingOptions['config'] = {
},
},
[NAVIGATORS.WELCOME_VIDEO_MODAL_NAVIGATOR]: {
- path: ROUTES.WELCOME_VIDEO_ROOT,
screens: {
[SCREENS.WELCOME_VIDEO.ROOT]: {
path: ROUTES.WELCOME_VIDEO_ROOT,
From 80bafbce4509f2ac229dca2e215705f6f6952321 Mon Sep 17 00:00:00 2001
From: Maciej Dobosz
Date: Mon, 4 Mar 2024 12:34:10 +0100
Subject: [PATCH 29/29] Pixel perfect styles - native and web
---
src/components/OnboardingWelcomeVideo.tsx | 5 +++--
src/styles/index.ts | 7 -------
2 files changed, 3 insertions(+), 9 deletions(-)
diff --git a/src/components/OnboardingWelcomeVideo.tsx b/src/components/OnboardingWelcomeVideo.tsx
index bcac7ef3a156..07995caba3d7 100644
--- a/src/components/OnboardingWelcomeVideo.tsx
+++ b/src/components/OnboardingWelcomeVideo.tsx
@@ -132,12 +132,13 @@ 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}}
>
- {getWelcomeVideo()}
+ {getWelcomeVideo()}
{translate('onboarding.welcomeVideo.title')}
diff --git a/src/styles/index.ts b/src/styles/index.ts
index 58add3ffa5fb..c3637b0a9327 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -1536,13 +1536,6 @@ const styles = (theme: ThemeColors) =>
overflow: 'hidden',
} satisfies ViewStyle),
- WelcomeVideoNavigatorInnerView: (shouldUseNarrowLayout: boolean) =>
- ({
- width: shouldUseNarrowLayout ? 500 : '100%',
- height: 500,
- maxHeight: '100%',
- } satisfies ViewStyle),
-
onlyEmojisText: {
fontSize: variables.fontSizeOnlyEmojis,
lineHeight: variables.fontSizeOnlyEmojisHeight,