Use MediaPlayer (#2759)

* Use MediaPlayer * height -> HEIGHT
MetaMask · Jun 9, 2021 · 0bb5b1c · 0bb5b1c
1 parent 6896720
commit 0bb5b1c
Showing 1 changed file with 12 additions and 46 deletions.
diff --git a/app/components/UI/SeedPhraseVideo/index.js b/app/components/UI/SeedPhraseVideo/index.js
@@ -1,63 +1,29 @@
-import React, { useCallback, useState } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 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 MediaPlayer from '../../Views/MediaPlayer';
 import scaling from '../../../util/scaling';
 
+const HEIGHT = scaling.scale(240);
+
 const styles = StyleSheet.create({
 	videoContainer: {
-		height: scaling.scale(240),
+		height: HEIGHT,
 		width: '100%'
 	},
-	loaderContainer: {
-		position: 'absolute',
-		zIndex: 999,
-		width: '100%',
-		height: '100%'
+	mediaPlayer: {
+		height: HEIGHT
 	}
 });
 
 const video_source_uri =
 	'https://github.com/MetaMask/metamask-mobile/blob/develop/app/videos/recovery-phrase.mp4?raw=true';
 
-const SeedPhraseVideo = ({ style, onClose }) => {
-	const [error, setError] = useState(false);
-	const [loading, setLoading] = useState(true);
-
-	const onLoad = useCallback(() => setLoading(false), [setLoading]);
-	const onError = useCallback(() => setError(true), [setError]);
-
-	return (
-		<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 }}
-				/>
-			) : (
-				<Video
-					onLoad={onLoad}
-					onError={onError}
-					style={style}
-					muted
-					source={{ uri: video_source_uri }}
-					controls
-					ignoreSilentSwitch="ignore"
-				/>
-			)}
-		</View>
-	);
-};
+const SeedPhraseVideo = ({ style, onClose }) => (
+	<View style={styles.videoContainer}>
+		<MediaPlayer onClose={onClose} uri={video_source_uri} style={[styles.mediaPlayer, style]} />
+	</View>
+);
 
 SeedPhraseVideo.propTypes = {
 	style: PropTypes.object,