display a thumbnail while the media player is loading #413

Merged
akinwale merged 3 commits from blank-thumbnails into master 2019-01-28 14:55:26 +01:00
4 changed files with 20 additions and 4 deletions

View file

@ -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 = [

View file

@ -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>

View file

@ -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 &&

View file

@ -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