Commit 9f7e5eb0 authored by Milan John Paul Digiuseppe's avatar Milan John Paul Digiuseppe

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

SignIn Screen Background Video

See merge request !18
parents 4cbea335 2826dd69
...@@ -4118,6 +4118,15 @@ ...@@ -4118,6 +4118,15 @@
"url-parse": "^1.4.4" "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": { "expo-camera": {
"version": "8.2.0", "version": "8.2.0",
"resolved": "https://registry.npmjs.org/expo-camera/-/expo-camera-8.2.0.tgz", "resolved": "https://registry.npmjs.org/expo-camera/-/expo-camera-8.2.0.tgz",
......
/* eslint-disable global-require */
/* eslint-disable @typescript-eslint/no-var-requires */
/* eslint-disable @typescript-eslint/camelcase */ /* eslint-disable @typescript-eslint/camelcase */
import React from 'react'; import React, { createContext } from 'react';
import { AppLoading } from 'expo'; import { AppLoading } from 'expo';
import { import {
useFonts, useFonts,
...@@ -20,12 +22,26 @@ import { ...@@ -20,12 +22,26 @@ import {
} from '@expo-google-fonts/nunito'; } from '@expo-google-fonts/nunito';
import { View, StyleSheet } from 'react-native'; import { View, StyleSheet } from 'react-native';
import { useSelector } from 'react-redux'; import { useSelector } from 'react-redux';
import { Asset } from 'expo-asset';
import { getAuthLoading } from './store/auth/AuthSelectors'; 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: * Renders loading screen until everything necessary for app is loaded:
* - fonts * - fonts
* - auth token * - auth token
* - static assets
*/ */
const AppLoader: React.FC = ({ children }) => { const AppLoader: React.FC = ({ children }) => {
const [fontsLoaded] = useFonts({ const [fontsLoaded] = useFonts({
...@@ -47,14 +63,20 @@ const AppLoader: React.FC = ({ children }) => { ...@@ -47,14 +63,20 @@ const AppLoader: React.FC = ({ children }) => {
const authLoading = useSelector(getAuthLoading); const authLoading = useSelector(getAuthLoading);
if (!fontsLoaded || authLoading) { // Load static assets
signInVideoAsset.downloadAsync();
geoLogoAsset.downloadAsync();
if (!fontsLoaded || !signInVideoAsset.downloaded || !geoLogoAsset.downloaded || authLoading) {
return <AppLoading />; return <AppLoading />;
} }
return ( return (
<View style={StyleSheet.absoluteFill}> <AssetContext.Provider value={{ signInVideo: signInVideoAsset, geoLogo: geoLogoAsset }}>
{children} <View style={StyleSheet.absoluteFill}>
</View> {children}
</View>
</AssetContext.Provider>
); );
}; };
......
import React from 'react'; import React, { useContext } from 'react';
import { import { View, Image, StyleSheet } from 'react-native';
View, Image, ImageBackground, StyleSheet,
} from 'react-native';
import { SocialIcon } from 'react-native-elements'; import { SocialIcon } from 'react-native-elements';
import { Video } from 'expo-av';
import { signInAsyncFacebook, signInAsyncGoogle } from '../store/auth/AuthActions'; import { signInAsyncFacebook, signInAsyncGoogle } from '../store/auth/AuthActions';
import LogoImage from '../../assets/LogoShadow.png';
import SignInBackgroundImage from '../../assets/SignInBackground.png';
import theme from '../theme'; import theme from '../theme';
import { AssetContext } from '../AppLoader';
const styles = StyleSheet.create({ const styles = StyleSheet.create({
backgroundVideo: {
...StyleSheet.absoluteFillObject,
zIndex: 1,
},
logo: { logo: {
flex: 1, flex: 1,
width: 300, width: 300,
height: 107, height: 107,
alignSelf: 'center', alignSelf: 'center',
resizeMode: 'contain', resizeMode: 'contain',
zIndex: 2,
}, },
buttonContainer: { buttonContainer: {
width: '100%', width: '100%',
paddingHorizontal: theme.spacing.screenPadding, paddingHorizontal: theme.spacing.screenPadding,
paddingVertical: theme.spacing.large, paddingVertical: theme.spacing.large,
zIndex: 2,
}, },
}); });
const SignInScreen = () => ( const SignInScreen = () => {
<ImageBackground const { signInVideo, geoLogo } = useContext(AssetContext);
source={SignInBackgroundImage} return (
style={{ <Video
flex: 1, source={signInVideo}
}} shouldPlay
> isLooping
{/* TODO: Replace GEO image with svg once shadows are supported */} style={styles.backgroundVideo}
<Image resizeMode={'cover'}
source={LogoImage} >
style={styles.logo} {/* TODO: Replace GEO image with svg once shadows are supported */}
/> <Image
<View style={styles.buttonContainer}> source={{ uri: geoLogo.localUri! }}
{/* TODO: create SocialIcon component/wrapper and apply our font styles */} style={styles.logo}
<SocialIcon
title={'Sign in with Facebook'}
button
type={'facebook'}
onPress={signInAsyncFacebook}
/>
<SocialIcon
title={'Sign in with Google'}
button
type={'google'}
onPress={signInAsyncGoogle}
/> />
</View> <View style={styles.buttonContainer}>
</ImageBackground> {/* 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; export default SignInScreen;
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment