Merge pull request #131 from lbryio/download-progress-video-playing

file page download progress display and media loading / playback tweaks
This commit is contained in:
akinwale 2018-05-19 15:01:28 +01:00 committed by GitHub
commit f850be1eca
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 31 additions and 17 deletions

View file

@ -249,6 +249,7 @@ class MediaPlayer extends React.PureComponent {
return (
<View style={[style, mediaPlayerStyle.container]}>
<View style={mediaPlayerStyle.playerBackground} />
<Video source={{ uri: 'file:///' + fileInfo.download_path }}
ref={(ref: Video) => { this.video = ref }}
resizeMode={this.state.resizeMode}

View file

@ -132,14 +132,18 @@ class FilePage extends React.PureComponent {
const channelClaimId =
value && value.publisherSignature && value.publisherSignature.certificateId;
// at least 2MB (or the full download) before media can be loaded
const canLoadMedia = fileInfo && (fileInfo.written_bytes >= 2097152 || fileInfo.written_bytes == fileInfo.total_bytes); // 2MB = 1024*1024*2
return (
<View style={filePageStyle.pageContainer}>
<View style={this.state.fullscreenMode ? filePageStyle.fullscreenMedia : filePageStyle.mediaContainer}>
{(!fileInfo || (isPlayable && !this.state.mediaLoaded)) &&
{(!fileInfo || (isPlayable && !canLoadMedia)) &&
<FileItemMedia style={filePageStyle.thumbnail} title={title} thumbnail={metadata.thumbnail} />}
{isPlayable && !this.state.mediaLoaded && <ActivityIndicator size="large" color={Colors.LbryGreen} style={filePageStyle.loading} />}
{!completed && <FileDownloadButton uri={navigation.state.params.uri} style={filePageStyle.downloadButton} />}
{fileInfo && isPlayable && <MediaPlayer fileInfo={fileInfo}
{!completed && !canLoadMedia && <FileDownloadButton uri={navigation.state.params.uri} style={filePageStyle.downloadButton} />}
{canLoadMedia && <View style={filePageStyle.playerBackground} />}
{canLoadMedia && <MediaPlayer fileInfo={fileInfo}
uri={navigation.state.params.uri}
style={filePageStyle.player}
onFullscreenToggled={this.handleFullscreenToggle}

View file

@ -15,7 +15,16 @@ const filePageStyle = StyleSheet.create({
mediaContainer: {
alignItems: 'center',
width: screenWidth,
height: 220,
height: 220
},
playerBackground: {
position: 'absolute',
flex: 1,
left: 0,
top: 0,
right: 0,
bottom: 16,
backgroundColor: Colors.Black
},
emptyClaimText: {
fontFamily: 'Metropolis-Regular',
@ -71,7 +80,8 @@ const filePageStyle = StyleSheet.create({
flex: 1,
width: '100%',
height: '100%',
marginBottom: 14
marginBottom: 14,
zIndex: 99
},
fullscreenMedia: {
position: 'absolute',

View file

@ -1,13 +1,12 @@
import { StyleSheet, Dimensions } from 'react-native';
const screenDimension = Dimensions.get('window');
const screenWidth = screenDimension.width;
import { StyleSheet } from 'react-native';
const mediaPlayerStyle = StyleSheet.create({
player: {
flex: 1
},
container: {
marginBottom: 0,
paddingBottom: 16,
},
progress: {
flex: 1,
@ -26,7 +25,7 @@ const mediaPlayerStyle = StyleSheet.create({
height: 3,
width: '100%',
position: 'absolute',
bottom: 0,
bottom: 14,
left: 0,
},
playerControls: {
@ -77,7 +76,7 @@ const mediaPlayerStyle = StyleSheet.create({
seekerCircle: {
borderRadius: 12,
position: 'relative',
top: 16,
top: 14,
left: 8,
height: 12,
width: 12,
@ -87,13 +86,13 @@ const mediaPlayerStyle = StyleSheet.create({
position: 'absolute',
height: 36,
width: 36,
bottom: -12,
bottom: 0,
marginLeft: -8
},
bigSeekerCircle: {
borderRadius: 24,
position: 'relative',
top: 10,
top: 8,
left: 8,
height: 24,
width: 24,