Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Load video over the network #2663

Merged
merged 2 commits into from May 10, 2021
Merged

Load video over the network #2663

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
9f0aea4
Load video over the network
rickycodes May 10, 2021
99defc2
Merge branch 'develop' into bugfix/issue-2662
rickycodes May 10, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
73 changes: 50 additions & 23 deletions app/components/UI/SeedPhraseVideo/index.js
View file
Open in desktop
Expand Up @@ -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: {
Expand Down Expand Up @@ -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);
Expand All @@ -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}
Expand Down
1 change: 1 addition & 0 deletions locales/languages/en.json
View file
Open in desktop
Expand Up @@ -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",
Expand Down