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

show an overlay with the video thumbnail in the media player

Browse source
This commit is contained in:
Akinwale Ariwodola 2019-01-26 13:11:06 +01:00
parent cf652a3e0f
commit 557335bccd
4 changed files with 20 additions and 6 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 = [

14
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;
@ -349,14 +350,19 @@ class MediaPlayer extends React.PureComponent {
style={mediaPlayerStyle.player} style={mediaPlayerStyle.player}
rate={this.state.rate} rate={this.state.rate}
volume={this.state.volume} volume={this.state.volume}
poster={thumbnail}
posterResizeMode={"cover"}
paused={this.state.paused} paused={this.state.paused}
onLoad={this.onLoad} onLoad={this.onLoad}
onProgress={this.onProgress} onProgress={this.onProgress}
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

@ -503,6 +503,7 @@ class FilePage extends React.PureComponent {
}} }}
onMediaLoaded={() => this.onMediaLoaded(channelName, title, uri)} onMediaLoaded={() => this.onMediaLoaded(channelName, title, uri)}
onPlaybackStarted={this.onPlaybackStarted} onPlaybackStarted={this.onPlaybackStarted}
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