[ENG-1615] bg intro video fixed (#2104)

* video intro bg

* test hsl

* test video bg

* run tests

* comment

* mob intro

* git glitch

* git

* webm type

apps/mobile/src/screens/onboarding/GetStarted.tsx

@@ -1,6 +1,6 @@
 import { useNavigation, useRoute } from '@react-navigation/native';
 import { AppLogo, BloomOne } from '@sd/assets/images';
-import { sdintro } from '@sd/assets/videos';
+import { mobsdintro } from '@sd/assets/videos';
 import { ResizeMode, Video } from 'expo-av';
 import { MotiView } from 'moti';
 import { CaretLeft } from 'phosphor-react-native';
@@ -24,8 +24,7 @@ export function OnboardingContainer({ children }: React.PropsWithChildren) {
 			{store.showIntro && (
 				<View
 					style={twStyle(
-						'absolute z-50 mx-auto h-full w-full flex-1 items-center justify-center',
-						Platform.OS === 'ios' ? 'bg-[#1C1E27]' : 'bg-[#1E1D28]'
+						'absolute z-50 mx-auto h-full w-full flex-1 items-center justify-center bg-black'
 					)}
 				>
 					<Video
@@ -36,7 +35,7 @@ export function OnboardingContainer({ children }: React.PropsWithChildren) {
 								store.showIntro = false;
 							}
 						}}
-						source={sdintro}
+						source={mobsdintro}
 						isMuted
 						resizeMode={ResizeMode.CONTAIN}
 					/>
@@ -50,22 +49,22 @@ export function OnboardingContainer({ children }: React.PropsWithChildren) {
 					<CaretLeft size={24} weight="bold" color="white" />
 				</Pressable>
 			)}
-			<View style={tw`z-10 flex-1 items-center justify-center`}>
+			<View style={tw`z-10 items-center justify-center flex-1`}>
 				<KeyboardAvoidingView
 					behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
 					keyboardVerticalOffset={bottom}
-					style={tw`w-full flex-1 items-center justify-center`}
+					style={tw`items-center justify-center flex-1 w-full`}
 				>
-					<MotiView style={tw`w-full items-center justify-center px-4`}>
+					<MotiView style={tw`items-center justify-center w-full px-4`}>
 						{children}
 					</MotiView>
 				</KeyboardAvoidingView>
-				<Text style={tw`absolute bottom-8 text-xs text-ink-dull/50`}>
+				<Text style={tw`absolute text-xs bottom-8 text-ink-dull/50`}>
 					&copy; {new Date().getFullYear()} Spacedrive Technology Inc.
 				</Text>
 			</View>
 			{/* Bloom */}
-			<Image source={BloomOne} style={tw`top-100 absolute h-screen w-screen opacity-20`} />
+			<Image source={BloomOne} style={tw`absolute w-screen h-screen top-100 opacity-20`} />
 		</View>
 	);
 }
@@ -105,7 +104,7 @@ const GetStartedScreen = ({ navigation }: OnboardingStackScreenProps<'GetStarted
 			{/* Get Started Button */}
 			<FadeInUpAnimation delay={1200} style={tw`mt-8`}>
 				<AnimatedButton variant="accent" onPress={() => navigation.push('NewLibrary')}>
-					<Text style={tw`text-center text-base font-medium text-ink`}>Get Started</Text>
+					<Text style={tw`text-base font-medium text-center text-ink`}>Get Started</Text>
 				</AnimatedButton>
 			</FadeInUpAnimation>
 		</OnboardingContainer>

apps/mobile/src/types/declarations.d.ts

@@ -14,3 +14,8 @@ declare module '*.mp4' {
 	const content: any;
 	export default content;
 }
+
+declare module '*.webm' {
+	const content: any;
+	export default content;
+}

interface/app/onboarding/Layout.tsx

@@ -1,8 +1,11 @@
 import { BloomOne } from '@sd/assets/images';
+import { introvideobg, sdintro } from '@sd/assets/videos';
 import clsx from 'clsx';
+import { useLayoutEffect, useState } from 'react';
 import { Navigate, Outlet } from 'react-router';
 import { useDebugState } from '@sd/client';
 import DragRegion from '~/components/DragRegion';
+import { useWindowSize } from '~/hooks';
 import { useOperatingSystem } from '~/hooks/useOperatingSystem';
 
 import DebugPopover from '../$libraryId/Layout/Sidebar/DebugPopover';
@@ -14,7 +17,9 @@ export const Component = () => {
 	const os = useOperatingSystem(false);
 	const debugState = useDebugState();
 	// FIX-ME: Intro video breaks onboarding for the web and Linux versions
-	// const [showIntro, setShowIntro] = useState(os === 'macOS' || os === 'windows');
+	const [showIntro, setShowIntro] = useState(os === 'macOS' || os === 'windows');
+	const windowSize = useWindowSize();
+
 	const ctx = useContextValue();
 
 	if (ctx.libraries.isLoading) return null;
@@ -28,11 +33,34 @@ export const Component = () => {
 					'flex h-screen flex-col bg-sidebar text-ink'
 				)}
 			>
-				{/* {showIntro && (
-					<div className="absolute left-0 top-0 z-50 flex h-screen w-screen items-center justify-center bg-[#1B1D25]">
+				{showIntro && (
+					<div className="absolute top-0 left-0 z-50 flex items-center justify-center w-screen h-screen">
+						{/*This makes sure on initial render a BG is visible before video loads*/}
+						<svg
+							width="100%"
+							height="100%"
+							className="absolute left-0 top-0 z-[-1]"
+							viewBox={`0 0 ${windowSize.width} ${windowSize.height}`}
+							fill="none"
+							xmlns="http://www.w3.org/2000/svg"
+						>
+							<rect width="100%" height="100%" fill="#2E2F38" />
+						</svg>
 						<video
-							width={700}
-							className="mx-auto"
+							style={{
+								position: 'absolute',
+								objectFit: 'cover',
+								width: '100vw',
+								height: '100vh',
+								zIndex: -1
+							}}
+							preload="auto"
+							src={introvideobg}
+							muted
+							controls={false}
+						/>
+						<video
+							className="mx-auto w-[700px]"
 							autoPlay
 							onEnded={() => {
 								setShowIntro(false);
@@ -42,7 +70,7 @@ export const Component = () => {
 							src={sdintro}
 						/>
 					</div>
-				)} */}
+				)}
 				<DragRegion className="z-50 h-9" />
 				<div className="flex flex-col gap-8 p-10 -mt-5 grow">
 					<div className="flex flex-col items-center justify-center grow">

interface/app/style.scss

@@ -400,3 +400,4 @@ body {
 .wiggle {
 	animation: wiggle 200ms infinite;
 }
+

interface/hooks/index.ts

@@ -27,3 +27,4 @@ export * from './useWindowState';
 export * from './useZodRouteParams';
 export * from './useZodSearchParams';
 export * from './useLocale';
+export * from './useWindowSize';

interface/hooks/useWindowSize.ts

@@ -0,0 +1,39 @@
+import { useEffect, useState } from 'react';
+
+/*
+ A simple hook that returns the window size
+ */
+
+type hookReturn = {
+	width: number | null;
+	height: number | null;
+};
+
+export const useWindowSize = (): hookReturn => {
+	const [windowSize, setWindowSize] = useState<hookReturn>({
+		width: null,
+		height: null
+	});
+
+	useEffect(() => {
+		if (typeof window === 'undefined') {
+			return;
+		}
+		const handleResize = () => {
+			setWindowSize({
+				width: window.innerWidth,
+				height: window.innerHeight
+			});
+		};
+
+		window.addEventListener('load', handleResize);
+		window.addEventListener('resize', handleResize);
+
+		return () => {
+			window.removeEventListener('resize', handleResize);
+			window.removeEventListener('load', handleResize);
+		};
+	}, [windowSize.width, windowSize.height]);
+
+	return windowSize;
+};

packages/assets/videos/index.ts

@@ -4,6 +4,8 @@
  */
 
 import fda from './fda.mp4';
-import sdintro from './sdintro.mp4';
+import introvideobg from './introvideobg.webm';
+import mobsdintro from './mobsdintro.mp4';
+import sdintro from './sdintro.webm';
 
-export { fda, sdintro };
+export { fda, introvideobg, mobsdintro, sdintro };