file page download progress display and media loading / playback tweaks
This commit is contained in:
parent
8db8083e32
commit
59f5b5ede3
4 changed files with 31 additions and 17 deletions
|
@ -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}
|
||||
|
|
|
@ -132,18 +132,22 @@ 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}
|
||||
uri={navigation.state.params.uri}
|
||||
style={filePageStyle.player}
|
||||
onFullscreenToggled={this.handleFullscreenToggle}
|
||||
onMediaLoaded={() => { this.setState({ mediaLoaded: true }); }}/>}
|
||||
{!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}
|
||||
onMediaLoaded={() => { this.setState({ mediaLoaded: true }); }}/>}
|
||||
</View>
|
||||
{ showActions &&
|
||||
<View style={filePageStyle.actions}>
|
||||
|
|
|
@ -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',
|
||||
|
|
|
@ -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,
|
||||
|
|
Loading…
Reference in a new issue