View images or text claims immediately after downloading (#414)

* enable the download button to open images and text file types immediately after download
* change display text to View for downloaded image or text file claims
This commit is contained in:
Akinwale Ariwodola 2019-01-24 23:01:19 +01:00 committed by GitHub
parent a2b08606f1
commit 760bad821b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 29 additions and 12 deletions

View file

@ -38,7 +38,9 @@ class FileDownloadButton extends React.PureComponent {
purchaseUri, purchaseUri,
costInfo, costInfo,
isPlayable, isPlayable,
isViewable,
onPlay, onPlay,
onView,
loading, loading,
doPause, doPause,
style, style,
@ -68,7 +70,7 @@ class FileDownloadButton extends React.PureComponent {
} }
return ( return (
<Button icon={isPlayable ? 'play' : null} <Button icon={isPlayable ? 'play' : null}
text={isPlayable ? 'Play' : 'Download'} text={(isPlayable ? 'Play' : (isViewable ? 'View' : 'Download'))}
onLayout={onButtonLayout} onLayout={onButtonLayout}
style={[style, fileDownloadButtonStyle.container]} onPress={() => { style={[style, fileDownloadButtonStyle.container]} onPress={() => {
if (NativeModules.Mixpanel) { if (NativeModules.Mixpanel) {
@ -78,13 +80,16 @@ class FileDownloadButton extends React.PureComponent {
if (isPlayable && onPlay) { if (isPlayable && onPlay) {
this.props.onPlay(); this.props.onPlay();
} }
if (isViewable && onView) {
this.props.onView();
}
}} /> }} />
); );
} else if (fileInfo && fileInfo.download_path) { } else if (fileInfo && fileInfo.download_path) {
return ( return (
<TouchableOpacity onLayout={onButtonLayout} <TouchableOpacity onLayout={onButtonLayout}
style={[style, fileDownloadButtonStyle.container]} onPress={openFile}> style={[style, fileDownloadButtonStyle.container]} onPress={openFile}>
<Text style={fileDownloadButtonStyle.text}>Open</Text> <Text style={fileDownloadButtonStyle.text}>{isViewable ? 'View' : 'Open'}</Text>
</TouchableOpacity> </TouchableOpacity>
); );
} }

View file

@ -439,25 +439,30 @@ class FilePage extends React.PureComponent {
// at least 2MB (or the full download) before media can be loaded // at least 2MB (or the full download) before media can be loaded
const canLoadMedia = fileInfo && const canLoadMedia = fileInfo &&
(fileInfo.written_bytes >= 2097152 || fileInfo.written_bytes == fileInfo.total_bytes); // 2MB = 1024*1024*2 (fileInfo.written_bytes >= 2097152 || fileInfo.written_bytes == fileInfo.total_bytes); // 2MB = 1024*1024*2
const canOpen = (mediaType === 'image' || mediaType === 'text') && completed; const isViewable = (mediaType === 'image' || mediaType === 'text');
const isWebViewable = mediaType === 'text'; const isWebViewable = mediaType === 'text';
const canOpen = isViewable && completed;
const localFileUri = this.localUriForFileInfo(fileInfo); const localFileUri = this.localUriForFileInfo(fileInfo);
const openFile = () => { const openFile = () => {
if (mediaType === 'image') { if (mediaType === 'image') {
// use image viewer // use image viewer
this.setState({ if (!this.state.showImageViewer) {
imageUrls: [{ this.setState({
url: localFileUri imageUrls: [{
}], url: localFileUri
showImageViewer: true }],
}); showImageViewer: true
});
}
} }
if (isWebViewable) { if (isWebViewable) {
// show webview // show webview
this.setState({ if (!this.state.showWebView) {
showWebView: true this.setState({
}); showWebView: true
});
}
} }
} }
@ -467,6 +472,11 @@ class FilePage extends React.PureComponent {
}); });
} }
if (this.state.downloadPressed && canOpen) {
// automatically open a web viewable or image file after the download button is pressed
openFile();
}
innerContent = ( innerContent = (
<View style={filePageStyle.pageContainer}> <View style={filePageStyle.pageContainer}>
{this.state.showWebView && isWebViewable && <WebView source={{ uri: localFileUri }} {this.state.showWebView && isWebViewable && <WebView source={{ uri: localFileUri }}
@ -489,10 +499,12 @@ class FilePage extends React.PureComponent {
style={filePageStyle.downloadButton} style={filePageStyle.downloadButton}
openFile={openFile} openFile={openFile}
isPlayable={isPlayable} isPlayable={isPlayable}
isViewable={isViewable}
onPlay={() => { onPlay={() => {
this.startTime = Date.now(); this.startTime = Date.now();
this.setState({ downloadPressed: true, autoPlayMedia: true, stopDownloadConfirmed: false }); this.setState({ downloadPressed: true, autoPlayMedia: true, stopDownloadConfirmed: false });
}} }}
onView={() => this.setState({ downloadPressed: true })}
onButtonLayout={() => this.setState({ downloadButtonShown: true })} onButtonLayout={() => this.setState({ downloadButtonShown: true })}
onStartDownloadFailed={this.startDownloadFailed} />} onStartDownloadFailed={this.startDownloadFailed} />}
{!fileInfo && <FilePrice uri={uri} style={filePageStyle.filePriceContainer} textStyle={filePageStyle.filePriceText} />} {!fileInfo && <FilePrice uri={uri} style={filePageStyle.filePriceContainer} textStyle={filePageStyle.filePriceText} />}