Load video over the network (#2663)

MetaMask · May 10, 2021 · 3e2867f · 3e2867f
1 parent 7f84194
commit 3e2867f
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 23 deletions.
diff --git a/app/components/UI/SeedPhraseVideo/index.js b/app/components/UI/SeedPhraseVideo/index.js
@@ -2,10 +2,12 @@ import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import { StyleSheet, View, Image, TouchableOpacity } from 'react-native';
 import VideoPlayer from 'react-native-video-controls';
-import { colors } from '../../../styles/common';
+import { colors, fontStyles } from '../../../styles/common';
 import Logger from '../../../util/Logger';
 import scaling from '../../../util/scaling';
 import Svg, { Circle, Path } from 'react-native-svg';
+import Text from '../../Base/Text';
+import { strings } from '../../../../locales/i18n';
 
 const styles = StyleSheet.create({
 	videoContainer: {
@@ -33,18 +35,34 @@ const styles = StyleSheet.create({
 		opacity: 0.2,
 		width: '100%',
 		height: '100%'
+	},
+	errorWrapper: {
+		justifyContent: 'center',
+		alignItems: 'center'
+	},
+	errorText: {
+		...fontStyles.normal,
+		color: colors.red
 	}
 });
 
+const FAILED_TO_LOAD_MSG = strings('app_settings.video_failed');
+
 // eslint-disable-next-line import/no-commonjs
 const explain_backup_seedphrase = require('../../../images/explain-backup-seedphrase.png');
 
-// eslint-disable-next-line import/no-commonjs
-const vid = require('../../../../app/videos/recovery-phrase.mp4');
+const video_source_uri =
+	'https://github.com/MetaMask/metamask-mobile/blob/develop/app/videos/recovery-phrase.mp4?raw=true';
 
 const SeedPhraseVideo = ({ style }) => {
 	const [isPlaying, setPlaying] = useState(false);
-	const onError = e => Logger.error(e, 'Video failed');
+	const [isError, setError] = useState(false);
+
+	const onError = e => {
+		Logger.error(e, FAILED_TO_LOAD_MSG);
+		setError(true);
+		setPlaying(false);
+	};
 	const onPlay = () => {
 		Logger.log('User clicked play');
 		setPlaying(true);
@@ -54,30 +72,39 @@ const SeedPhraseVideo = ({ style }) => {
 		<View style={style ? [styles.videoContainer, style] : styles.videoContainer}>
 			{!isPlaying ? (
 				<>
-					<TouchableOpacity style={styles.cover} onPress={onPlay}>
-						<Svg
-							width="311"
-							height="176"
-							viewBox="0 0 311 176"
-							fill="none"
-							xmlns="http://www.w3.org/2000/svg"
-						>
-							<Circle cx="156" cy="88" r="43" fill="white" />
-							<Path d="M185 87.5L140.75 107.852L140.75 67.1484L185 87.5Z" fill="black" />
-						</Svg>
-					</TouchableOpacity>
-					<Image
-						source={explain_backup_seedphrase}
-						style={styles.image}
-						resizeMethod="auto"
-						testID={'carousel-one-image'}
-					/>
+					{isError ? (
+						<View style={styles.errorWrapper}>
+							<Text style={styles.errorText}>{FAILED_TO_LOAD_MSG}</Text>
+						</View>
+					) : (
+						<>
+							<TouchableOpacity style={styles.cover} onPress={onPlay}>
+								{isError ? <></> : <></>}
+								<Svg
+									width="311"
+									height="176"
+									viewBox="0 0 311 176"
+									fill="none"
+									xmlns="http://www.w3.org/2000/svg"
+								>
+									<Circle cx="156" cy="88" r="43" fill="white" />
+									<Path d="M185 87.5L140.75 107.852L140.75 67.1484L185 87.5Z" fill="black" />
+								</Svg>
+							</TouchableOpacity>
+							<Image
+								source={explain_backup_seedphrase}
+								style={styles.image}
+								resizeMethod="auto"
+								testID={'carousel-one-image'}
+							/>
+						</>
+					)}
 				</>
 			) : (
 				<VideoPlayer
 					disableFullscreen
 					disableBack
-					source={vid}
+					source={{ uri: video_source_uri }}
 					style={StyleSheet.absoluteFill}
 					onError={onError}
 					onPlay={onPlay}

diff --git a/locales/languages/en.json b/locales/languages/en.json
@@ -425,6 +425,7 @@
 		"clear": "CLEAR",
 		"protect_cta": "Protect",
 		"protect_title": "Protect your wallet",
+		"video_failed": "Video Failed to Load.",
 		"protect_desc": "Protect your wallet by saving your Secret Recovery phrase in various places like on a piece of paper, password manager and/or the cloud.",
 		"seedphrase_not_backed_up": "Important! Secret recovery phrase not backed up",
 		"seedphrase_backed_up": "Secret recovery phrase backed up",