2019-12-11 09:06:11 +01:00
7 changed files with 156 additions and 83 deletions
--- a/src/constants.js
+++ b/src/constants.js
@ -95,6 +95,7 @@ const Constants = {
  FULL_ROUTE_NAME_WALLET: 'WalletStack',

  ROUTE_FILE: 'File',
+  DRAWER_ROUTE_FILE_VIEW: 'FileView',

  ITEM_CREATE_A_CHANNEL: 'Create a channel...',
  ITEM_ANONYMOUS: 'Publish anonymously',
@ -167,4 +168,8 @@ export const DrawerRoutes = [
 ];

 // sub-pages for main routes
-export const InnerDrawerRoutes = [Constants.DRAWER_ROUTE_CHANNEL_CREATOR_FORM, Constants.DRAWER_ROUTE_PUBLISH_FORM];
+export const InnerDrawerRoutes = [
+  Constants.DRAWER_ROUTE_CHANNEL_CREATOR_FORM,
+  Constants.DRAWER_ROUTE_PUBLISH_FORM,
+  Constants.DRAWER_ROUTE_FILE_VIEW,
+];
--- a/src/page/file/index.js
+++ b/src/page/file/index.js
@ -44,7 +44,7 @@ import {
  doDeleteFile,
  doStopDownloadingFile,
 } from 'redux/actions/file';
-import { doPopDrawerStack, doSetPlayerVisible } from 'redux/actions/drawer';
+import { doPushDrawerStack, doPopDrawerStack, doSetPlayerVisible } from 'redux/actions/drawer';
 import { doToggleFullscreenMode } from 'redux/actions/settings';
 import { selectDrawerStack } from 'redux/selectors/drawer';
 import FilePage from './view';
@ -92,6 +92,7 @@ const perform = dispatch => ({
  fileGet: (uri, saveFile) => dispatch(doFileGet(uri, saveFile)),
  notify: data => dispatch(doToast(data)),
  popDrawerStack: () => dispatch(doPopDrawerStack()),
+  pushDrawerStack: (routeName, params) => dispatch(doPushDrawerStack(routeName, params)),
  purchaseUri: (uri, costInfo, saveFile) => dispatch(doPurchaseUri(uri, costInfo, saveFile)),
  deletePurchasedUri: uri => dispatch(doDeletePurchasedUri(uri)),
  resolveUri: uri => dispatch(doResolveUri(uri)),
--- a/src/page/file/view.js
+++ b/src/page/file/view.js
@ -44,6 +44,7 @@ import Video from 'react-native-video';
 import FileRewardsDriver from 'component/fileRewardsDriver';
 import filePageStyle from 'styles/filePage';
 import uriBarStyle from 'styles/uriBar';
+import _ from 'lodash';

 class FilePage extends React.PureComponent {
  static navigationOptions = {
@ -62,8 +63,9 @@ class FilePage extends React.PureComponent {
    super(props);
    this.state = {
      attemptAutoGet: false,
-      autoPlayMedia: false,
+      autoOpened: false,
      autoDownloadStarted: false,
+      autoPlayMedia: false,
      downloadButtonShown: false,
      downloadPressed: false,
      fileViewLogged: false,
@ -127,6 +129,17 @@ class FilePage extends React.PureComponent {
    this.onComponentFocused();
  }

+  difference = (object, base) => {
+    function changes(object, base) {
+      return _.transform(object, function(result, value, key) {
+        if (!_.isEqual(value, base[key])) {
+          result[key] = _.isObject(value) && _.isObject(base[key]) ? changes(value, base[key]) : value;
+        }
+      });
+    }
+    return changes(object, base);
+  };
+
  componentWillReceiveProps(nextProps) {
    const {
      claim,
@ -136,6 +149,7 @@ class FilePage extends React.PureComponent {
      navigation,
      contentType,
      notify,
+      drawerStack: prevDrawerStack,
    } = this.props;
    const { uri } = navigation.state.params;
    const {
@ -145,6 +159,7 @@ class FilePage extends React.PureComponent {
      purchasedUris,
      purchaseUriErrorMessage,
      streamingUrl,
+      drawerStack,
    } = nextProps;

    if (Constants.ROUTE_FILE === currentRoute && currentRoute !== prevRoute) {
@ -184,6 +199,17 @@ class FilePage extends React.PureComponent {
        this.setState({ streamingMode: true, currentStreamUrl: fileInfo.streaming_url });
      }
    }
+
+    if (
+      prevDrawerStack[prevDrawerStack.length - 1].route === Constants.DRAWER_ROUTE_FILE_VIEW &&
+      prevDrawerStack.length !== drawerStack.length
+    ) {
+      this.setState({
+        downloadPressed: false,
+        showImageViewer: false,
+        showWebView: false,
+      });
+    }
  }

  componentDidUpdate(prevProps) {
@ -633,6 +659,39 @@ class FilePage extends React.PureComponent {
    }
  };

+  openFile = (localFileUri, mediaType) => {
+    const { pushDrawerStack } = this.props;
+    const isWebViewable = mediaType === 'text';
+
+    if (mediaType === 'image') {
+      // use image viewer
+      if (!this.state.showImageViewer) {
+        this.setState(
+          {
+            imageUrls: [
+              {
+                url: localFileUri,
+              },
+            ],
+            showImageViewer: true,
+          },
+          () => pushDrawerStack(Constants.DRAWER_ROUTE_FILE_VIEW)
+        );
+      }
+    }
+    if (isWebViewable) {
+      // show webview
+      if (!this.state.showWebView) {
+        this.setState(
+          {
+            showWebView: true,
+          },
+          () => pushDrawerStack(Constants.DRAWER_ROUTE_FILE_VIEW)
+        );
+      }
+    }
+  };
+
  render() {
    const {
      balance,
@ -651,6 +710,7 @@ class FilePage extends React.PureComponent {
      navigation,
      position,
      purchaseUri,
+      pushDrawerStack,
      isSearchingRecommendContent,
      recommendedContent,
      thumbnail,
@ -746,6 +806,7 @@ class FilePage extends React.PureComponent {
      const description = metadata.description ? metadata.description : null;
      const mediaType = Lbry.getMediaType(contentType);
      const isPlayable = mediaType === 'video' || mediaType === 'audio';
+      const isWebViewable = mediaType === 'text';
      const { height, signing_channel: signingChannel, value } = claim;
      const channelName = signingChannel && signingChannel.name;
      const channelClaimId = claim && claim.signing_channel && claim.signing_channel.claim_id;
@ -784,35 +845,10 @@ class FilePage extends React.PureComponent {
        (fileInfo && (fileInfo.written_bytes >= 2097152 || fileInfo.written_bytes === fileInfo.total_bytes)); // 2MB = 1024*1024*2
      const duration = claim && claim.value && claim.value.video ? claim.value.video.duration : null;
      const isViewable = mediaType === 'image' || mediaType === 'text';
-      const isWebViewable = mediaType === 'text';
      const canOpen = isViewable && completed;
      const localFileUri = this.localUriForFileInfo(fileInfo);
      const unsupported = !isPlayable && !canOpen;

-      const openFile = () => {
-        if (mediaType === 'image') {
-          // use image viewer
-          if (!this.state.showImageViewer) {
-            this.setState({
-              imageUrls: [
-                {
-                  url: localFileUri,
-                },
-              ],
-              showImageViewer: true,
-            });
-          }
-        }
-        if (isWebViewable) {
-          // show webview
-          if (!this.state.showWebView) {
-            this.setState({
-              showWebView: true,
-            });
-          }
-        }
-      };
-
      if (fileInfo && !this.state.autoDownloadStarted && this.state.uriVars && this.state.uriVars.download === 'true') {
        this.setState({ autoDownloadStarted: true }, () => {
          purchaseUri(uri, costInfo, !isPlayable);
@ -822,9 +858,9 @@ class FilePage extends React.PureComponent {
        });
      }

-      if (this.state.downloadPressed && canOpen) {
+      if (this.state.downloadPressed && canOpen && !this.state.autoOpened) {
        // automatically open a web viewable or image file after the download button is pressed
-        openFile();
+        this.setState({ autoOpened: true }, () => this.openFile(localFileUri, mediaType));
      }

      return (
@ -889,7 +925,7 @@ class FilePage extends React.PureComponent {
                  <FileDownloadButton
                    uri={claim && claim.permanent_url ? claim.permanent_url : uri}
                    style={filePageStyle.downloadButton}
-                    openFile={openFile}
+                    openFile={() => this.openFile(localFileUri, mediaType)}
                    isPlayable={isPlayable}
                    isViewable={isViewable}
                    onPlay={this.onFileDownloadButtonPlayed}
@ -975,7 +1011,7 @@ class FilePage extends React.PureComponent {

                <View style={filePageStyle.largeButtonsRow}>
                  <TouchableOpacity style={filePageStyle.largeButton} onPress={this.handleSharePress}>
-                    <Icon name={'share-alt'} size={20} style={filePageStyle.largeButtonIcon} />
+                    <Icon name={'share-alt'} size={16} style={filePageStyle.largeButtonIcon} />
                    <Text style={filePageStyle.largeButtonText}>{__('Share')}</Text>
                  </TouchableOpacity>

@ -983,17 +1019,19 @@ class FilePage extends React.PureComponent {
                    style={filePageStyle.largeButton}
                    onPress={() => this.setState({ showTipView: true })}
                  >
-                    <Icon name={'gift'} size={20} style={filePageStyle.largeButtonIcon} />
+                    <Icon name={'gift'} size={16} style={filePageStyle.largeButtonIcon} />
                    <Text style={filePageStyle.largeButtonText}>{__('Tip')}</Text>
                  </TouchableOpacity>

+                  {!canEdit && (
                    <View style={filePageStyle.sharedLargeButton}>
-                    {!isPlayable && !fileInfo && (
+                      {!fileInfo ||
+                        (fileInfo.written_bytes <= 0 && !completed && (
                          <TouchableOpacity style={filePageStyle.innerLargeButton} onPress={this.onDownloadPressed}>
-                        <Icon name={'download'} size={20} style={filePageStyle.largeButtonIcon} />
+                            <Icon name={'download'} size={16} style={filePageStyle.largeButtonIcon} />
                            <Text style={filePageStyle.largeButtonText}>{__('Download')}</Text>
                          </TouchableOpacity>
-                    )}
+                        ))}

                      {!completed &&
                        fileInfo &&
@ -1002,32 +1040,40 @@ class FilePage extends React.PureComponent {
                        fileInfo.written_bytes < fileInfo.total_bytes &&
                        !this.state.stopDownloadConfirmed && (
                        <TouchableOpacity style={filePageStyle.innerLargeButton} onPress={this.onStopDownloadPressed}>
-                        <Icon name={'stop'} size={20} style={filePageStyle.largeButtonIcon} />
+                          <Icon name={'stop'} size={16} style={filePageStyle.largeButtonIcon} />
                          <Text style={filePageStyle.largeButtonText}>{__('Stop')}</Text>
                        </TouchableOpacity>
                      )}
+
+                      {completed && fileInfo && fileInfo.written_bytes >= fileInfo.total_bytes && (
+                        <TouchableOpacity style={filePageStyle.innerLargeButton} onPress={this.onOpenFilePressed}>
+                          <Icon name={'folder-open'} size={16} style={filePageStyle.largeButtonIcon} />
+                          <Text style={filePageStyle.largeButtonText}>{__('Open')}</Text>
+                        </TouchableOpacity>
+                      )}
                    </View>
+                  )}

                  {!canEdit && (
                    <TouchableOpacity
                      style={filePageStyle.largeButton}
                      onPress={() => Linking.openURL(`https://lbry.com/dmca/${claim.claim_id}`)}
                    >
-                      <Icon name={'flag'} size={20} style={filePageStyle.largeButtonIcon} />
+                      <Icon name={'flag'} size={16} style={filePageStyle.largeButtonIcon} />
                      <Text style={filePageStyle.largeButtonText}>{__('Report')}</Text>
                    </TouchableOpacity>
                  )}

                  {canEdit && (
                    <TouchableOpacity style={filePageStyle.largeButton} onPress={this.onEditPressed}>
-                      <Icon name={'edit'} size={20} style={filePageStyle.largeButtonIcon} />
+                      <Icon name={'edit'} size={16} style={filePageStyle.largeButtonIcon} />
                      <Text style={filePageStyle.largeButtonText}>{__('Edit')}</Text>
                    </TouchableOpacity>
                  )}

                  {(completed || canEdit) && (
                    <TouchableOpacity style={filePageStyle.largeButton} onPress={this.onDeletePressed}>
-                      <Icon name={'trash-alt'} size={20} style={filePageStyle.largeButtonIcon} />
+                      <Icon name={'trash-alt'} size={16} style={filePageStyle.largeButtonIcon} />
                      <Text style={filePageStyle.largeButtonText}>{__('Delete')}</Text>
                    </TouchableOpacity>
                  )}
--- a/src/page/settings/view.js
+++ b/src/page/settings/view.js
@ -11,7 +11,6 @@ import settingsStyle from 'styles/settings';

 const languageOptions = [
  { code: 'default', name: 'Use device language' },
-  { code: 'ar', name: 'Arabic' },
  { code: 'en', name: 'English' },
  { code: 'gu', name: 'Gujarati' },
  { code: 'hi', name: 'Hindi' },
@ -90,7 +89,14 @@ class SettingsPage extends React.PureComponent {
    }

    // check the local filesystem for the language first? Or download remote strings first?
+    if (language === 'en') {
+      // don't attempt to download English
+      NativeModules.UtilityModule.setNativeStringSetting(SETTINGS.LANGUAGE, language);

+      // update state and client setting
+      window.language = language;
+      setClientSetting(SETTINGS.LANGUAGE, value);
+    } else {
      // download and save the language file
      this.setState({ downloadingLanguage: true }, () => {
        fetch('https://lbry.com/i18n/get/lbry-mobile/app-strings/' + language + '.json')
@ -104,7 +110,7 @@ class SettingsPage extends React.PureComponent {

            // save the setting outside redux because when the first component mounts, the redux value isn't loaded yet
            // so we have to load it from native settings
-          NativeModules.UtilityModule.setNativeStringSetting(SETTINGS.LANGUAGE, value);
+            NativeModules.UtilityModule.setNativeStringSetting(SETTINGS.LANGUAGE, language);

            // update state and client setting
            window.language = language;
@ -117,6 +123,7 @@ class SettingsPage extends React.PureComponent {
            this.setState({ downloadingLanguage: false });
          });
      });
+    }
  };

  handleBackPressed = () => {
--- a/src/page/splash/view.js
+++ b/src/page/splash/view.js
@ -235,7 +235,7 @@ class SplashScreen extends React.PureComponent {
    }

    if (headerSyncProgress < 100) {
-      const downloadProgress = isNaN(parseInt(headerSyncProgress, 10)) ? '0' : headerSyncProgress;
+      const downloadProgress = isNaN(parseInt(headerSyncProgress, 10)) ? '0' : headerSyncProgress || '0';
      this.setState({
        message: __('Blockchain Sync'),
        details: __('Catching up with the blockchain (%progress%%)', { progress: downloadProgress }),
--- a/src/styles/filePage.js
+++ b/src/styles/filePage.js
@ -384,7 +384,7 @@ const filePageStyle = StyleSheet.create({
  sharedLargeButton: {
    alignItems: 'center',
    justifyContent: 'center',
-    marginRight: 36,
+    flex: 0.2,
  },
  innerLargeButton: {
    alignItems: 'center',
@ -393,7 +393,7 @@ const filePageStyle = StyleSheet.create({
  largeButton: {
    alignItems: 'center',
    justifyContent: 'center',
-    marginRight: 36,
+    flex: 0.2,
  },
  largeButtonIcon: {
    color: Colors.DescriptionGrey,
@ -406,8 +406,8 @@ const filePageStyle = StyleSheet.create({
  largeButtonsRow: {
    flexDirection: 'row',
    alignItems: 'center',
-    marginLeft: 20,
-    marginRight: 20,
+    marginLeft: 16,
+    marginRight: 16,
    marginTop: 12,
    marginBottom: 12,
  },
--- a/src/utils/helper.js
+++ b/src/utils/helper.js
@ -155,6 +155,14 @@ export function navigateToUri(navigation, uri, additionalParams, isNavigatingBac
 }

 export function navigateBack(navigation, drawerStack, popDrawerStack) {
+  if (drawerStack[drawerStack.length - 1].route === Constants.DRAWER_ROUTE_FILE_VIEW) {
+    // inner file_view (web / image view) is handled differently
+    if (popDrawerStack) {
+      popDrawerStack();
+    }
+    return;
+  }
+
  if (popDrawerStack) {
    popDrawerStack();
  }
@ -186,6 +194,12 @@ export function navigateBack(navigation, drawerStack, popDrawerStack) {
 }

 export function dispatchNavigateBack(dispatch, nav, drawerStack) {
+  if (drawerStack[drawerStack.length - 1].route === Constants.DRAWER_ROUTE_FILE_VIEW) {
+    // inner file_view (web / image view) is handled differently
+    dispatch(doPopDrawerStack());
+    return;
+  }
+
  dispatch(doPopDrawerStack());

  const target = drawerStack[drawerStack.length > 1 ? drawerStack.length - 2 : 0];