LBRYCommunity/lbry-android
1
0
Fork 0
Code Issues 155 Pull requests 6 Projects Releases 84 Packages Wiki Activity

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
Conversation 0 Commits 3 Files changed 4 +20 -4
4 changed files with 20 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
app/src/component/fileItemMedia/view.js
View file

@ -1,8 +1,8 @@
import React from 'react'; import React from 'react';
import { ActivityIndicator, Image, Text, View } from 'react-native'; 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 FastImage from 'react-native-fast-image'
import fileItemMediaStyle from '../../styles/fileItemMedia'; import fileItemMediaStyle from 'styles/fileItemMedia';
class FileItemMedia extends React.PureComponent { class FileItemMedia extends React.PureComponent {
static AUTO_THUMB_STYLES = [ static AUTO_THUMB_STYLES = [

12
app/src/component/mediaPlayer/view.js
View file

@ -9,10 +9,11 @@ import {
ScrollView, ScrollView,
TouchableOpacity TouchableOpacity
} from 'react-native'; } from 'react-native';
import FastImage from 'react-native-fast-image'
import Video from 'react-native-video'; import Video from 'react-native-video';
import Icon from 'react-native-vector-icons/FontAwesome5'; import Icon from 'react-native-vector-icons/FontAwesome5';
import FileItemMedia from '../fileItemMedia'; import FileItemMedia from 'component/fileItemMedia';
import mediaPlayerStyle from '../../styles/mediaPlayer'; import mediaPlayerStyle from 'styles/mediaPlayer';
class MediaPlayer extends React.PureComponent { class MediaPlayer extends React.PureComponent {
static ControlsTimeout = 3000; static ControlsTimeout = 3000;
@ -358,6 +359,13 @@ class MediaPlayer extends React.PureComponent {
onEnd={this.onEnd} 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}> <TouchableOpacity style={mediaPlayerStyle.playerControls} onPress={this.togglePlayerControls}>
{this.renderPlayerControls()} {this.renderPlayerControls()}
</TouchableOpacity> </TouchableOpacity>

1
app/src/page/file/view.js
View file

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

7
app/src/styles/mediaPlayer.js
View file

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