display a thumbnail while the media player is loading (#413)

* show an overlay with the video thumbnail in the media player

app/src/component/fileItemMedia/view.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import { ActivityIndicator, Image, Text, View } from 'react-native';
-import Colors from '../../styles/colors';
+import Colors from 'styles/colors';
 import FastImage from 'react-native-fast-image'
-import fileItemMediaStyle from '../../styles/fileItemMedia';
+import fileItemMediaStyle from 'styles/fileItemMedia';
 
 class FileItemMedia extends React.PureComponent {
   static AUTO_THUMB_STYLES = [

app/src/component/mediaPlayer/view.js

@@ -9,10 +9,11 @@ import {
   ScrollView,
   TouchableOpacity
 } from 'react-native';
+import FastImage from 'react-native-fast-image'
 import Video from 'react-native-video';
 import Icon from 'react-native-vector-icons/FontAwesome5';
-import FileItemMedia from '../fileItemMedia';
-import mediaPlayerStyle from '../../styles/mediaPlayer';
+import FileItemMedia from 'component/fileItemMedia';
+import mediaPlayerStyle from 'styles/mediaPlayer';
 
 class MediaPlayer extends React.PureComponent {
   static ControlsTimeout = 3000;
@@ -358,6 +359,13 @@ class MediaPlayer extends React.PureComponent {
                onEnd={this.onEnd}
                />
 
+        {this.state.firstPlay && thumbnail &&
+        <FastImage
+          source={{uri: thumbnail}}
+          resizeMode={FastImage.resizeMode.cover}
+          style={mediaPlayerStyle.playerThumbnail}
+        />}
+
         <TouchableOpacity style={mediaPlayerStyle.playerControls} onPress={this.togglePlayerControls}>
           {this.renderPlayerControls()}
         </TouchableOpacity>

app/src/page/file/view.js

@@ -531,6 +531,7 @@ class FilePage extends React.PureComponent {
                                                onMediaLoaded={() => this.onMediaLoaded(channelName, title, uri)}
                                                onPlaybackStarted={this.onPlaybackStarted}
                                                onPlaybackFinished={this.onPlaybackFinished}
+                                               thumbnail={metadata.thumbnail}
                                               />}
 
                 {showActions &&

app/src/styles/mediaPlayer.js

@@ -7,6 +7,13 @@ const mediaPlayerStyle = StyleSheet.create({
     width: '100%',
     height: '100%'
   },
+  playerThumbnail: {
+    position: 'absolute',
+    left: 0,
+    top: 0,
+    width: '100%',
+    height: '100%',
+  },
   container: {
     flex: 1,
     paddingBottom: 16