Merge pull request #131 from lbryio/download-progress-video-playing

file page download progress display and media loading / playback tweaks

app/src/component/mediaPlayer/view.js

@@ -249,6 +249,7 @@ class MediaPlayer extends React.PureComponent {
     
     return (
       <View style={[style, mediaPlayerStyle.container]}>
+        <View style={mediaPlayerStyle.playerBackground} />
         <Video source={{ uri: 'file:///' + fileInfo.download_path }}
                ref={(ref: Video) => { this.video = ref }}
                resizeMode={this.state.resizeMode}

app/src/page/file/view.js

@@ -132,18 +132,22 @@ class FilePage extends React.PureComponent {
     const channelClaimId =
       value && value.publisherSignature && value.publisherSignature.certificateId;
     
+    // at least 2MB (or the full download) before media can be loaded
+    const canLoadMedia = fileInfo && (fileInfo.written_bytes >= 2097152 || fileInfo.written_bytes == fileInfo.total_bytes); // 2MB = 1024*1024*2
+    
     return (
       <View style={filePageStyle.pageContainer}>
         <View style={this.state.fullscreenMode ? filePageStyle.fullscreenMedia : filePageStyle.mediaContainer}>  
-          {(!fileInfo || (isPlayable && !this.state.mediaLoaded)) &&
+          {(!fileInfo || (isPlayable && !canLoadMedia)) &&
             <FileItemMedia style={filePageStyle.thumbnail} title={title} thumbnail={metadata.thumbnail} />}
           {isPlayable && !this.state.mediaLoaded && <ActivityIndicator size="large" color={Colors.LbryGreen} style={filePageStyle.loading} />}
-          {!completed && <FileDownloadButton uri={navigation.state.params.uri} style={filePageStyle.downloadButton} />}
-          {fileInfo && isPlayable && <MediaPlayer fileInfo={fileInfo}
-                                                  uri={navigation.state.params.uri}
-                                                  style={filePageStyle.player}
-                                                  onFullscreenToggled={this.handleFullscreenToggle} 
-                                                  onMediaLoaded={() => { this.setState({ mediaLoaded: true }); }}/>}
+          {!completed && !canLoadMedia && <FileDownloadButton uri={navigation.state.params.uri} style={filePageStyle.downloadButton} />}
+          {canLoadMedia && <View style={filePageStyle.playerBackground} />}
+          {canLoadMedia && <MediaPlayer fileInfo={fileInfo}
+                                        uri={navigation.state.params.uri}
+                                        style={filePageStyle.player}
+                                        onFullscreenToggled={this.handleFullscreenToggle} 
+                                        onMediaLoaded={() => { this.setState({ mediaLoaded: true }); }}/>}
         </View>
         { showActions &&
         <View style={filePageStyle.actions}>

app/src/styles/filePage.js

@@ -15,7 +15,16 @@ const filePageStyle = StyleSheet.create({
   mediaContainer: {
     alignItems: 'center',
     width: screenWidth,
-    height: 220,
+    height: 220
+  },
+  playerBackground: {
+    position: 'absolute',
+    flex: 1,
+    left: 0,
+    top: 0,
+    right: 0,
+    bottom: 16,
+    backgroundColor: Colors.Black
   },
   emptyClaimText: {
     fontFamily: 'Metropolis-Regular',
@@ -71,7 +80,8 @@ const filePageStyle = StyleSheet.create({
     flex: 1,
     width: '100%',
     height: '100%',
-    marginBottom: 14
+    marginBottom: 14,
+    zIndex: 99
   },
   fullscreenMedia: {
     position: 'absolute',

app/src/styles/mediaPlayer.js

@@ -1,13 +1,12 @@
-import { StyleSheet, Dimensions } from 'react-native';
-
-const screenDimension = Dimensions.get('window'); 
-const screenWidth = screenDimension.width;
+import { StyleSheet } from 'react-native';
 
 const mediaPlayerStyle = StyleSheet.create({
   player: {
     flex: 1
   },
   container: {
+    marginBottom: 0,
+    paddingBottom: 16,
   },
   progress: {
     flex: 1,
@@ -26,7 +25,7 @@ const mediaPlayerStyle = StyleSheet.create({
     height: 3,
     width: '100%',
     position: 'absolute',
-    bottom: 0,
+    bottom: 14,
     left: 0,
   },
   playerControls: {
@@ -77,7 +76,7 @@ const mediaPlayerStyle = StyleSheet.create({
   seekerCircle: {
     borderRadius: 12,
     position: 'relative',
-    top: 16,
+    top: 14,
     left: 8,
     height: 12,
     width: 12,
@@ -87,13 +86,13 @@ const mediaPlayerStyle = StyleSheet.create({
     position: 'absolute',
     height: 36,
     width: 36,
-    bottom: -12,
+    bottom: 0,
     marginLeft: -8
   },
   bigSeekerCircle: {
     borderRadius: 24,
     position: 'relative',
-    top: 10,
+    top: 8,
     left: 8,
     height: 24,
     width: 24,