Merge pull request #190 from lbryio/media-play-button

Use Play as button text on the file page for audio/video
This commit is contained in:
Akinwale Ariwodola 2018-06-28 09:15:55 +01:00 committed by GitHub
commit a133f7d82d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 99 additions and 88 deletions

View file

@ -36,6 +36,8 @@ class FileDownloadButton extends React.PureComponent {
uri, uri,
purchaseUri, purchaseUri,
costInfo, costInfo,
isPlayable,
onPlay,
loading, loading,
doPause, doPause,
style, style,
@ -67,8 +69,11 @@ class FileDownloadButton extends React.PureComponent {
NativeModules.Mixpanel.track('Purchase Uri', { Uri: uri }); NativeModules.Mixpanel.track('Purchase Uri', { Uri: uri });
} }
purchaseUri(uri); purchaseUri(uri);
if (isPlayable && onPlay) {
this.props.onPlay();
}
}}> }}>
<Text style={fileDownloadButtonStyle.text}>Download</Text> <Text style={fileDownloadButtonStyle.text}>{isPlayable ? 'Play' : 'Download'}</Text>
</TouchableOpacity> </TouchableOpacity>
); );
} else if (fileInfo && fileInfo.download_path) { } else if (fileInfo && fileInfo.download_path) {

View file

@ -35,7 +35,7 @@ class MediaPlayer extends React.PureComponent {
resizeMode: 'stretch', resizeMode: 'stretch',
duration: 0.0, duration: 0.0,
currentTime: 0.0, currentTime: 0.0,
paused: true, paused: !props.autoPlay,
fullscreenMode: false, fullscreenMode: false,
areControlsVisible: true, areControlsVisible: true,
controlsTimeout: -1, controlsTimeout: -1,

View file

@ -35,6 +35,7 @@ class FilePage extends React.PureComponent {
super(props); super(props);
this.state = { this.state = {
mediaLoaded: false, mediaLoaded: false,
autoplayMedia: false,
fullscreenMode: false, fullscreenMode: false,
showImageViewer: false, showImageViewer: false,
showWebView: false, showWebView: false,
@ -255,15 +256,20 @@ class FilePage extends React.PureComponent {
<FileItemMedia style={filePageStyle.thumbnail} title={title} thumbnail={metadata.thumbnail} />} <FileItemMedia style={filePageStyle.thumbnail} title={title} thumbnail={metadata.thumbnail} />}
{(canOpen || (isPlayable && !this.state.mediaLoaded)) && <ActivityIndicator size="large" color={Colors.LbryGreen} style={filePageStyle.loading} />} {(canOpen || (isPlayable && !this.state.mediaLoaded)) && <ActivityIndicator size="large" color={Colors.LbryGreen} style={filePageStyle.loading} />}
{((isPlayable && !completed && !canLoadMedia) || !completed || canOpen) && {((isPlayable && !completed && !canLoadMedia) || !completed || canOpen) &&
<FileDownloadButton uri={uri} style={filePageStyle.downloadButton} openFile={openFile} />} <FileDownloadButton uri={uri}
style={filePageStyle.downloadButton}
openFile={openFile}
isPlayable={isPlayable}
onPlay={() => this.setState({ autoPlayMedia: true })} />}
{!fileInfo && <FilePrice uri={uri} style={filePageStyle.filePriceContainer} textStyle={filePageStyle.filePriceText} />} {!fileInfo && <FilePrice uri={uri} style={filePageStyle.filePriceContainer} textStyle={filePageStyle.filePriceText} />}
</View> </View>
{canLoadMedia && <View style={playerBgStyle} />} {canLoadMedia && <View style={playerBgStyle} />}
{canLoadMedia && <MediaPlayer fileInfo={fileInfo} {canLoadMedia && <MediaPlayer fileInfo={fileInfo}
uri={uri} uri={uri}
style={playerStyle} style={playerStyle}
onFullscreenToggled={this.handleFullscreenToggle} autoPlay={this.state.autoPlayMedia}
onMediaLoaded={() => { this.setState({ mediaLoaded: true }); }}/>} onFullscreenToggled={this.handleFullscreenToggle}
onMediaLoaded={() => { this.setState({ mediaLoaded: true }); }}/>}
{ showActions && { showActions &&
<View style={filePageStyle.actions}> <View style={filePageStyle.actions}>