Merge branch 'milan/signin-video-bg' into 'master'

SignIn Screen Background Video

See merge request !18

package-lock.json

@@ -4118,6 +4118,15 @@
         "url-parse": "^1.4.4"
       }
     },
+    "expo-av": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/expo-av/-/expo-av-8.0.0.tgz",
+      "integrity": "sha512-n1qOXi0jk6stY4q5RZqmQS90Rg9HDDGWE7EfLABhcyUA1EGJJbrupjpn75sxzNYMksad+oiGp0NULTHlKfa01A==",
+      "requires": {
+        "lodash": "^4.17.15",
+        "nullthrows": "^1.1.0"
+      }
+    },
     "expo-camera": {
       "version": "8.2.0",
       "resolved": "https://registry.npmjs.org/expo-camera/-/expo-camera-8.2.0.tgz",

package.json

@@ -43,7 +43,9 @@
     "react-native-swiper": "^1.6.0",
     "react-native-touchable-scale": "^2.1.1",
     "react-native-web": "^0.11.7",
-    "react-redux": "^7.1.1"
+    "react-redux": "^7.1.1",
+    "expo-av": "~8.0.0",
+    "expo-asset": "~8.0.0"
   },
   "devDependencies": {
     "@babel/core": "^7.0.0",

src/AppLoader.tsx

+/* eslint-disable global-require */
+/* eslint-disable @typescript-eslint/no-var-requires */
 /* eslint-disable @typescript-eslint/camelcase */
-import React from 'react';
+import React, { createContext } from 'react';
 import { AppLoading } from 'expo';
 import {
   useFonts,
@@ -20,12 +22,26 @@ import {
 } from '@expo-google-fonts/nunito';
 import { View, StyleSheet } from 'react-native';
 import { useSelector } from 'react-redux';
+import { Asset } from 'expo-asset';
 import { getAuthLoading } from './store/auth/AuthSelectors';
 
+const signInVideoAsset = Asset.fromModule(require('../assets/SigninBackground.mp4'));
+const geoLogoAsset = Asset.fromModule(require('../assets/LogoShadow.png'));
+
+interface AssetContext {
+  signInVideo: Asset;
+  geoLogo: Asset;
+}
+export const AssetContext = createContext<AssetContext>({
+  signInVideo: signInVideoAsset,
+  geoLogo: signInVideoAsset,
+});
+
 /**
  * Renders loading screen until everything necessary for app is loaded:
  * - fonts
  * - auth token
+ * - static assets
  */
 const AppLoader: React.FC = ({ children }) => {
   const [fontsLoaded] = useFonts({
@@ -47,14 +63,20 @@ const AppLoader: React.FC = ({ children }) => {
 
   const authLoading = useSelector(getAuthLoading);
 
-  if (!fontsLoaded || authLoading) {
+  // Load static assets
+  signInVideoAsset.downloadAsync();
+  geoLogoAsset.downloadAsync();
+
+  if (!fontsLoaded || !signInVideoAsset.downloaded || !geoLogoAsset.downloaded || authLoading) {
     return <AppLoading />;
   }
 
   return (
-    <View style={StyleSheet.absoluteFill}>
-      {children}
-    </View>
+    <AssetContext.Provider value={{ signInVideo: signInVideoAsset, geoLogo: geoLogoAsset }}>
+      <View style={StyleSheet.absoluteFill}>
+        {children}
+      </View>
+    </AssetContext.Provider>
   );
 };
 

src/screens/SignInScreen.tsx

-import React from 'react';
-import {
-  View, Image, ImageBackground, StyleSheet,
-} from 'react-native';
+import React, { useContext } from 'react';
+import { View, Image, StyleSheet } from 'react-native';
 import { SocialIcon } from 'react-native-elements';
+import { Video } from 'expo-av';
 import { signInAsyncFacebook, signInAsyncGoogle } from '../store/auth/AuthActions';
-import LogoImage from '../../assets/LogoShadow.png';
-import SignInBackgroundImage from '../../assets/SignInBackground.png';
 import theme from '../theme';
+import { AssetContext } from '../AppLoader';
 
 const styles = StyleSheet.create({
+  backgroundVideo: {
+    ...StyleSheet.absoluteFillObject,
+    zIndex: 1,
+  },
   logo: {
     flex: 1,
     width: 300,
     height: 107,
     alignSelf: 'center',
     resizeMode: 'contain',
+    zIndex: 2,
   },
   buttonContainer: {
     width: '100%',
     paddingHorizontal: theme.spacing.screenPadding,
     paddingVertical: theme.spacing.large,
+    zIndex: 2,
   },
 });
 
-const SignInScreen = () => (
-  <ImageBackground
-    source={SignInBackgroundImage}
-    style={{
-      flex: 1,
-    }}
-  >
-    {/* TODO: Replace GEO image with svg once shadows are supported */}
-    <Image
-      source={LogoImage}
-      style={styles.logo}
-    />
-    <View style={styles.buttonContainer}>
-      {/* TODO: create SocialIcon component/wrapper and apply our font styles */}
-      <SocialIcon
-        title={'Sign in with Facebook'}
-        button
-        type={'facebook'}
-        onPress={signInAsyncFacebook}
-      />
-      <SocialIcon
-        title={'Sign in with Google'}
-        button
-        type={'google'}
-        onPress={signInAsyncGoogle}
+const SignInScreen = () => {
+  const { signInVideo, geoLogo } = useContext(AssetContext);
+  return (
+    <Video
+      source={signInVideo}
+      shouldPlay
+      isLooping
+      style={styles.backgroundVideo}
+      resizeMode={'cover'}
+    >
+      {/* TODO: Replace GEO image with svg once shadows are supported */}
+      <Image
+        source={{ uri: geoLogo.localUri! }}
+        style={styles.logo}
       />
-    </View>
-  </ImageBackground>
-);
-
+      <View style={styles.buttonContainer}>
+        {/* TODO: create SocialIcon component/wrapper and apply our font styles */}
+        <SocialIcon
+          title={'Sign in with Facebook'}
+          button
+          type={'facebook'}
+          onPress={signInAsyncFacebook}
+        />
+        <SocialIcon
+          title={'Sign in with Google'}
+          button
+          type={'google'}
+          onPress={signInAsyncGoogle}
+        />
+      </View>
+    </Video>
+  );
+};
 export default SignInScreen;