mirror of
https://github.com/spacedriveapp/spacedrive
synced 2024-07-04 12:13:27 +00:00
[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
This commit is contained in:
parent
43360601da
commit
19b224370e
|
@ -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`}>
|
||||
© {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>
|
||||
|
|
5
apps/mobile/src/types/declarations.d.ts
vendored
5
apps/mobile/src/types/declarations.d.ts
vendored
|
@ -14,3 +14,8 @@ declare module '*.mp4' {
|
|||
const content: any;
|
||||
export default content;
|
||||
}
|
||||
|
||||
declare module '*.webm' {
|
||||
const content: any;
|
||||
export default content;
|
||||
}
|
||||
|
|
|
@ -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">
|
||||
|
|
|
@ -400,3 +400,4 @@ body {
|
|||
.wiggle {
|
||||
animation: wiggle 200ms infinite;
|
||||
}
|
||||
|
||||
|
|
|
@ -27,3 +27,4 @@ export * from './useWindowState';
|
|||
export * from './useZodRouteParams';
|
||||
export * from './useZodSearchParams';
|
||||
export * from './useLocale';
|
||||
export * from './useWindowSize';
|
||||
|
|
39
interface/hooks/useWindowSize.ts
Normal file
39
interface/hooks/useWindowSize.ts
Normal file
|
@ -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;
|
||||
};
|
|
@ -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 };
|
||||
|
|
BIN
packages/assets/videos/introvideobg.webm
Normal file
BIN
packages/assets/videos/introvideobg.webm
Normal file
Binary file not shown.
BIN
packages/assets/videos/sdintro.webm
Normal file
BIN
packages/assets/videos/sdintro.webm
Normal file
Binary file not shown.
Loading…
Reference in a new issue