61 lines
1.9 KiB
Diff
61 lines
1.9 KiB
Diff
--- a/src/view/com/auth/SplashScreen.tsx
|
|
+++ b/src/view/com/auth/SplashScreen.tsx
|
|
@@ -2,6 +2,7 @@
|
|
import {Image as RNImage, View} from 'react-native'
|
|
import Animated, {FadeIn, FadeOut} from 'react-native-reanimated'
|
|
import {Image} from 'expo-image'
|
|
+import {useVideoPlayer, VideoView} from 'expo-video'
|
|
import {msg} from '@lingui/core/macro'
|
|
import {useLingui} from '@lingui/react'
|
|
import {Trans} from '@lingui/react/macro'
|
|
@@ -15,10 +16,13 @@
|
|
import splashImagePointer from '../../../../assets/splash/illustration-mobile.png'
|
|
// @ts-ignore
|
|
import darkSplashImagePointer from '../../../../assets/splash/illustration-mobile-dark.png'
|
|
+// @ts-ignore
|
|
+import splashVideoPointer from '../../../../assets/splash/illustration-mobile.mp4'
|
|
const splashImageUri = RNImage.resolveAssetSource(splashImagePointer).uri
|
|
const darkSplashImageUri = RNImage.resolveAssetSource(
|
|
darkSplashImagePointer,
|
|
).uri
|
|
+const splashVideoUri = RNImage.resolveAssetSource(splashVideoPointer).uri
|
|
|
|
export const SplashScreen = ({
|
|
onPressSignin,
|
|
@@ -53,13 +57,30 @@
|
|
}
|
|
}, [t, isDarkMode])
|
|
|
|
+ const player = useVideoPlayer(splashVideoUri, p => {
|
|
+ p.loop = true
|
|
+ p.muted = true
|
|
+ p.play()
|
|
+ })
|
|
+
|
|
return (
|
|
<>
|
|
- <Image
|
|
- accessibilityIgnoresInvertColors
|
|
- source={{uri: isDarkMode ? darkSplashImageUri : splashImageUri}}
|
|
- style={[a.absolute, a.inset_0]}
|
|
- />
|
|
+ {isDarkMode ? (
|
|
+ <Image
|
|
+ accessibilityIgnoresInvertColors
|
|
+ source={{uri: darkSplashImageUri}}
|
|
+ style={[a.absolute, a.inset_0]}
|
|
+ />
|
|
+ ) : (
|
|
+ <VideoView
|
|
+ player={player}
|
|
+ style={[a.absolute, a.inset_0]}
|
|
+ contentFit="cover"
|
|
+ nativeControls={false}
|
|
+ allowsFullscreen={false}
|
|
+ allowsPictureInPicture={false}
|
|
+ />
|
|
+ )}
|
|
|
|
<Animated.View
|
|
entering={FadeIn.duration(90)}
|