-
-
Notifications
You must be signed in to change notification settings - Fork 1.2k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Feature/use same media player (#2711)
* Use same media player * Remove unused react-native-video-controls * Remove SVG and image toggle * Add onBack * Update snapshot * only change one heading * Use scaling
- Loading branch information
1 parent
f7b296a
commit da7f49a
Showing
8 changed files
with
78 additions
and
138 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,130 +1,67 @@ | ||
| import React, { useCallback, 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, fontStyles } from '../../../styles/common'; | ||
| import Logger from '../../../util/Logger'; | ||
| import { StyleSheet, View } from 'react-native'; | ||
| import AndroidMediaPlayer from '../../Views/MediaPlayer/AndroidMediaPlayer'; | ||
| import Video from 'react-native-video'; | ||
| import Device from '../../../util/Device'; | ||
| import Loader from '../../Views/MediaPlayer/Loader'; | ||
| 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: { | ||
| justifyContent: 'center', | ||
| alignItems: 'center', | ||
| position: 'relative', | ||
| borderRadius: 8, | ||
| overflow: 'hidden', | ||
| width: '100%', | ||
| height: 180 | ||
| }, | ||
| image: { | ||
| zIndex: 0, | ||
| width: scaling.scale(138), | ||
| height: scaling.scale(162) | ||
| height: scaling.scale(240), | ||
| width: '100%' | ||
| }, | ||
| cover: { | ||
| justifyContent: 'center', | ||
| alignItems: 'center', | ||
| zIndex: 1, | ||
| loaderContainer: { | ||
| position: 'absolute', | ||
| left: 0, | ||
| top: 0, | ||
| backgroundColor: colors.grey, | ||
| opacity: 0.2, | ||
| zIndex: 999, | ||
| 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'); | ||
|
|
||
| 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 [isError, setError] = useState(false); | ||
|
|
||
| const reset = useCallback(() => setPlaying(false), [setPlaying]); | ||
|
|
||
| const onError = useCallback( | ||
| e => { | ||
| Logger.error(e, FAILED_TO_LOAD_MSG); | ||
| setError(true); | ||
| setPlaying(false); | ||
| }, | ||
| [setError, setPlaying] | ||
| ); | ||
| const SeedPhraseVideo = ({ style, onClose }) => { | ||
| const [error, setError] = useState(false); | ||
| const [loading, setLoading] = useState(true); | ||
|
|
||
| const onPlay = useCallback(() => { | ||
| Logger.log('User clicked play'); | ||
| setPlaying(true); | ||
| }, [setPlaying]); | ||
| const onLoad = useCallback(() => setLoading(false), [setLoading]); | ||
| const onError = useCallback(() => setError(true), [setError]); | ||
|
|
||
| return ( | ||
| <View style={style ? [styles.videoContainer, style] : styles.videoContainer}> | ||
| {!isPlaying ? ( | ||
| <> | ||
| {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 | ||
| ignoreSilentSwitch="ignore" | ||
| disableFullscreen | ||
| disableBack | ||
| <View style={styles.videoContainer}> | ||
| {loading && ( | ||
| <View style={[styles.loaderContainer, style]}> | ||
| <Loader error={error} onClose={onClose} /> | ||
| </View> | ||
| )} | ||
| {Device.isAndroid() ? ( | ||
| <AndroidMediaPlayer | ||
| onLoad={onLoad} | ||
| onError={onError} | ||
| onClose={onClose} | ||
| source={{ uri: video_source_uri }} | ||
| style={StyleSheet.absoluteFill} | ||
| /> | ||
| ) : ( | ||
| <Video | ||
| onLoad={onLoad} | ||
| onError={onError} | ||
| onPlay={onPlay} | ||
| onEnd={reset} | ||
| resizeMode="cover" | ||
| style={style} | ||
| muted | ||
| source={{ uri: video_source_uri }} | ||
| controls | ||
| ignoreSilentSwitch="ignore" | ||
| /> | ||
| )} | ||
| </View> | ||
| ); | ||
| }; | ||
|
|
||
| SeedPhraseVideo.propTypes = { | ||
| style: PropTypes.object | ||
| style: PropTypes.object, | ||
| onClose: PropTypes.func | ||
| }; | ||
|
|
||
| export default SeedPhraseVideo; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -8760,7 +8760,7 @@ lodash.truncate@^4.4.2: | |
| resolved "https://registry.yarnpkg.com/lodash.truncate/-/lodash.truncate-4.4.2.tgz#5a350da0b1113b837ecfffd5812cbe58d6eae193" | ||
| integrity sha1-WjUNoLERO4N+z//VgSy+WNbq4ZM= | ||
|
|
||
| lodash@^4.0.0, lodash@^4.15.0, lodash@^4.16.4, lodash@^4.17.10, lodash@^4.17.11, lodash@^4.17.12, lodash@^4.17.13, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.21, lodash@^4.17.4, lodash@^4.17.5, lodash@^4.3.0: | ||
| lodash@^4.0.0, lodash@^4.15.0, lodash@^4.17.10, lodash@^4.17.11, lodash@^4.17.12, lodash@^4.17.13, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.21, lodash@^4.17.4, lodash@^4.17.5, lodash@^4.3.0: | ||
| version "4.17.21" | ||
| resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c" | ||
| integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg== | ||
|
|
@@ -11254,13 +11254,6 @@ [email protected]: | |
| prop-types "^15.6.2" | ||
| yargs "^13.2.2" | ||
|
|
||
| react-native-video-controls@^2.7.1: | ||
| version "2.7.1" | ||
| resolved "https://registry.yarnpkg.com/react-native-video-controls/-/react-native-video-controls-2.7.1.tgz#52bd22ea83a964c9bf1e741e7ed6380ad0e28f1e" | ||
| integrity sha512-yoquLUx2x7EJOnDNGw0H4bb0gO4Io+ziFSDoDGGJqaT15IaXIiD+GCvCDbW9gLcUxsyLDwCr65sx8Yt2ZMvbCg== | ||
| dependencies: | ||
| lodash "^4.16.4" | ||
|
|
||
| react-native-video@^5.1.1: | ||
| version "5.1.1" | ||
| resolved "https://registry.yarnpkg.com/react-native-video/-/react-native-video-5.1.1.tgz#89a7989efeb8d404611c06154d1da227a745d7d8" | ||
|
|
||