From cf652a3e0f70790392013936f2cc0b948a2b92b1 Mon Sep 17 00:00:00 2001
From: Akinwale Ariwodola <akinwale@gmail.com>
Date: Wed, 23 Jan 2019 05:39:06 +0100
Subject: [PATCH 1/2] display a thumbnail while the media player is loading

---
 app/src/component/mediaPlayer/view.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/app/src/component/mediaPlayer/view.js b/app/src/component/mediaPlayer/view.js
index 2b2b0459..f481404c 100644
--- a/app/src/component/mediaPlayer/view.js
+++ b/app/src/component/mediaPlayer/view.js
@@ -349,6 +349,8 @@ class MediaPlayer extends React.PureComponent {
                style={mediaPlayerStyle.player}
                rate={this.state.rate}
                volume={this.state.volume}
+               poster={thumbnail}
+               posterResizeMode={"cover"}
                paused={this.state.paused}
                onLoad={this.onLoad}
                onProgress={this.onProgress}
-- 
2.45.3


From 557335bccdcfc44bbd668b091ec8470d01cb1551 Mon Sep 17 00:00:00 2001
From: Akinwale Ariwodola <akinwale@gmail.com>
Date: Sat, 26 Jan 2019 13:11:06 +0100
Subject: [PATCH 2/2] show an overlay with the video thumbnail in the media
 player

---
 app/src/component/fileItemMedia/view.js |  4 ++--
 app/src/component/mediaPlayer/view.js   | 14 ++++++++++----
 app/src/page/file/view.js               |  1 +
 app/src/styles/mediaPlayer.js           |  7 +++++++
 4 files changed, 20 insertions(+), 6 deletions(-)

diff --git a/app/src/component/fileItemMedia/view.js b/app/src/component/fileItemMedia/view.js
index e403c303..3a3abbd7 100644
--- a/app/src/component/fileItemMedia/view.js
+++ b/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 = [
diff --git a/app/src/component/mediaPlayer/view.js b/app/src/component/mediaPlayer/view.js
index f481404c..4da525d5 100644
--- a/app/src/component/mediaPlayer/view.js
+++ b/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;
@@ -349,14 +350,19 @@ class MediaPlayer extends React.PureComponent {
                style={mediaPlayerStyle.player}
                rate={this.state.rate}
                volume={this.state.volume}
-               poster={thumbnail}
-               posterResizeMode={"cover"}
                paused={this.state.paused}
                onLoad={this.onLoad}
                onProgress={this.onProgress}
                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>
diff --git a/app/src/page/file/view.js b/app/src/page/file/view.js
index 65aef5e4..aeebe374 100644
--- a/app/src/page/file/view.js
+++ b/app/src/page/file/view.js
@@ -503,6 +503,7 @@ class FilePage extends React.PureComponent {
                                                }}
                                                onMediaLoaded={() => this.onMediaLoaded(channelName, title, uri)}
                                                onPlaybackStarted={this.onPlaybackStarted}
+                                               thumbnail={metadata.thumbnail}
                                               />}
 
                 {showActions &&
diff --git a/app/src/styles/mediaPlayer.js b/app/src/styles/mediaPlayer.js
index 0ca8bd76..a243f2a6 100644
--- a/app/src/styles/mediaPlayer.js
+++ b/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
-- 
2.45.3