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:
commit
a133f7d82d
3 changed files with 99 additions and 88 deletions
|
@ -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) {
|
||||||
|
|
|
@ -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,
|
||||||
|
|
|
@ -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,13 +256,18 @@ 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}
|
||||||
|
autoPlay={this.state.autoPlayMedia}
|
||||||
onFullscreenToggled={this.handleFullscreenToggle}
|
onFullscreenToggled={this.handleFullscreenToggle}
|
||||||
onMediaLoaded={() => { this.setState({ mediaLoaded: true }); }}/>}
|
onMediaLoaded={() => { this.setState({ mediaLoaded: true }); }}/>}
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue