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

app/src/component/fileDownloadButton/view.js

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

app/src/page/file/view.js

@@ -439,13 +439,15 @@ class FilePage extends React.PureComponent {
         // 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
-        const canOpen = (mediaType === 'image' || mediaType === 'text') && completed;
+        const isViewable = (mediaType === 'image' || mediaType === 'text');
         const isWebViewable = mediaType === 'text';
+        const canOpen =  isViewable && completed;
         const localFileUri = this.localUriForFileInfo(fileInfo);
 
         const openFile = () => {
           if (mediaType === 'image') {
             // use image viewer
+            if (!this.state.showImageViewer) {
               this.setState({
                 imageUrls: [{
                   url: localFileUri
@@ -453,13 +455,16 @@ class FilePage extends React.PureComponent {
                 showImageViewer: true
               });
             }
+          }
           if (isWebViewable) {
             // show webview
+            if (!this.state.showWebView) {
               this.setState({
                 showWebView: true
               });
             }
           }
+        }
 
         if (fileInfo && !this.state.autoDownloadStarted && this.state.uriVars && 'true' === this.state.uriVars.download) {
           this.setState({ autoDownloadStarted: 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 = (
           <View style={filePageStyle.pageContainer}>
             {this.state.showWebView && isWebViewable && <WebView source={{ uri: localFileUri }}
@@ -489,10 +499,12 @@ class FilePage extends React.PureComponent {
                                         style={filePageStyle.downloadButton}
                                         openFile={openFile}
                                         isPlayable={isPlayable}
+                                        isViewable={isViewable}
                                         onPlay={() => {
                                           this.startTime = Date.now();
                                           this.setState({ downloadPressed: true, autoPlayMedia: true, stopDownloadConfirmed: false });
                                         }}
+                                        onView={() => this.setState({ downloadPressed: true })}
                                         onButtonLayout={() => this.setState({ downloadButtonShown: true })}
                                         onStartDownloadFailed={this.startDownloadFailed} />}
                   {!fileInfo && <FilePrice uri={uri} style={filePageStyle.filePriceContainer} textStyle={filePageStyle.filePriceText} />}