Merge pull request #2478 from zxawry/external-resources

Show warning when opening files externally

src/ui/component/externalLink/view.jsx

@@ -37,7 +37,7 @@ class ExternalLink extends React.PureComponent<Props> {
           title={title || href}
           label={children}
           className="button--external-link"
-          onClick={() => openModal(MODALS.CONFIRM_EXTERNAL_LINK, { uri: href })}
+          onClick={() => openModal(MODALS.CONFIRM_EXTERNAL_RESOURCE, { uri: href })}
         />
       );
     }

src/ui/component/fileDownloadLink/index.js

@@ -6,7 +6,7 @@ import {
   makeSelectClaimForUri,
 } from 'lbry-redux';
 import { makeSelectCostInfoForUri } from 'lbryinc';
-import { doOpenFileInShell } from 'redux/actions/file';
+import { doOpenModal } from 'redux/actions/app';
 import { doPurchaseUri, doStartDownload, doSetPlayingUri } from 'redux/actions/content';
 import FileDownloadLink from './view';
 
@@ -20,7 +20,7 @@ const select = (state, props) => ({
 });
 
 const perform = dispatch => ({
-  openInShell: path => dispatch(doOpenFileInShell(path)),
+  openModal: (modal, props) => dispatch(doOpenModal(modal, props)),
   purchaseUri: uri => dispatch(doPurchaseUri(uri)),
   restartDownload: (uri, outpoint) => dispatch(doStartDownload(uri, outpoint)),
   pause: () => dispatch(doSetPlayingUri(null)),

src/ui/component/fileDownloadLink/view.jsx

@@ -1,5 +1,6 @@
 // @flow
 import * as ICONS from 'constants/icons';
+import * as MODALS from 'constants/modal_types';
 import React from 'react';
 import Button from 'component/button';
 import ToolTip from 'component/common/tooltip';
@@ -20,7 +21,7 @@ type Props = {
   loading: boolean,
   costInfo: ?{},
   restartDownload: (string, number) => void,
-  openInShell: string => void,
+  openModal: (id: string, { path: string }) => void,
   purchaseUri: string => void,
   pause: () => void,
 };
@@ -43,14 +44,7 @@ class FileDownloadLink extends React.PureComponent<Props> {
   uri: ?string;
 
   render() {
-    const { fileInfo, downloading, uri, openInShell, purchaseUri, costInfo, loading, pause, claim } = this.props;
+    const { fileInfo, downloading, uri, openModal, purchaseUri, costInfo, loading, pause, claim } = this.props;
-
-    const openFile = () => {
-      if (fileInfo) {
-        openInShell(fileInfo.download_path);
-        pause();
-      }
-    };
 
     if (loading || downloading) {
       const progress = fileInfo && fileInfo.written_bytes ? (fileInfo.written_bytes / fileInfo.total_bytes) * 100 : 0;
@@ -83,7 +77,15 @@ class FileDownloadLink extends React.PureComponent<Props> {
     } else if (fileInfo && fileInfo.download_path) {
       return (
         <ToolTip onComponent body={__('Open file')}>
-          <Button button="alt" iconColor="green" icon={ICONS.EXTERNAL} onClick={() => openFile()} />
+          <Button
+            button="alt"
+            iconColor="green"
+            icon={ICONS.EXTERNAL}
+            onClick={() => {
+              pause();
+              openModal(MODALS.CONFIRM_EXTERNAL_RESOURCE, { path: fileInfo.download_path });
+            }}
+          />
         </ToolTip>
       );
     }

src/ui/constants/modal_types.js

@@ -1,5 +1,5 @@
 export const CONFIRM_FILE_REMOVE = 'confirm_file_remove';
-export const CONFIRM_EXTERNAL_LINK = 'confirm_external_link';
+export const CONFIRM_EXTERNAL_RESOURCE = 'confirm_external_resource';
 export const INCOMPATIBLE_DAEMON = 'incompatible_daemon';
 export const FILE_TIMEOUT = 'file_timeout';
 export const DOWNLOADING = 'downloading';

src/ui/modal/modalOpenExternalLink/view.jsx

@@ -1,52 +0,0 @@
-// @flow
-import React from 'react';
-import { Modal } from 'modal/modal';
-import { formatLbryUriForWeb } from 'util/uri';
-// @if TARGET='app'
-import { shell } from 'electron';
-// @endif
-
-type Props = {
-  uri: string,
-  closeModal: () => void,
-};
-
-class ModalOpenExternalLink extends React.PureComponent<Props> {
-  openExternalLink() {
-    const { uri, closeModal } = this.props;
-    // @if TARGET='app'
-    const { openExternal } = shell;
-    if (uri) {
-      openExternal(uri);
-    }
-    // @endif
-    // @if TARGET='web'
-    window.open(uri);
-    // @endif
-
-    closeModal();
-  }
-
-  render() {
-    const { uri, closeModal } = this.props;
-    return (
-      <Modal
-        isOpen
-        title={__('Warning!')}
-        contentLabel={__('Confirm External Link')}
-        type="confirm"
-        confirmButtonLabel={__('Continue')}
-        onConfirmed={() => this.openExternalLink()}
-        onAborted={closeModal}
-      >
-        <section className="card__content">
-          <p>{__('This link leads to an external website.')}</p>
-          <blockquote>{uri}</blockquote>
-          <p>{__('LBRY Inc is not responsible for its content, click continue to proceed at your own risk.')}</p>
-        </section>
-      </Modal>
-    );
-  }
-}
-
-export default ModalOpenExternalLink;

src/ui/modal/modalOpenExternalResource/index.js

@@ -1,6 +1,6 @@
 import { connect } from 'react-redux';
 import { doHideModal } from 'redux/actions/app';
-import ModalOpenExternalLink from './view';
+import ModalOpenExternalResource from './view';
 
 const perform = dispatch => ({
   closeModal: () => dispatch(doHideModal()),
@@ -9,4 +9,4 @@ const perform = dispatch => ({
 export default connect(
   null,
   perform
-)(ModalOpenExternalLink);
+)(ModalOpenExternalResource);

src/ui/modal/modalOpenExternalResource/view.jsx

@@ -0,0 +1,72 @@
+// @flow
+import React from 'react';
+import { Modal } from 'modal/modal';
+import { formatLbryUriForWeb } from 'util/uri';
+// @if TARGET='app'
+import { shell } from 'electron';
+// @endif
+
+type Props = {
+  uri: string,
+  path: string,
+  closeModal: () => void,
+};
+
+class ModalOpenExternalResource extends React.PureComponent<Props> {
+  openExternalResource() {
+    const { uri, path, closeModal } = this.props;
+    // @if TARGET='app'
+    const { openExternal, openItem, showItemInFolder } = shell;
+    if (uri) {
+      openExternal(uri);
+    } else if (path) {
+      const success = openItem(path);
+      if (!success) {
+        showItemInFolder(path);
+      }
+    }
+    // @endif
+    // @if TARGET='web'
+    if (uri) {
+      window.open(uri);
+    } else if (path) {
+      // Converintg path into uri, like "file://path/to/file"
+      let _uri = path.replace(/\\/g, '/');
+      // Windows drive letter must be prefixed with a slash
+      if (_uri[0] !== '/') {
+        _uri = `/${_uri}`;
+      }
+      _uri = encodeURI(`file://${_uri}`).replace(/[?#]/g, encodeURIComponent);
+      window.open(_uri);
+    }
+    // @endif
+
+    closeModal();
+  }
+
+  render() {
+    const { uri, path, closeModal } = this.props;
+    return (
+      <Modal
+        isOpen
+        title={__('Warning!')}
+        contentLabel={__('Confirm External Resource')}
+        type="confirm"
+        confirmButtonLabel={__('Continue')}
+        onConfirmed={() => this.openExternalResource()}
+        onAborted={closeModal}
+      >
+        <section className="card__content">
+          <p>
+            {(uri && __('This link leads to an external website.')) ||
+              (path && __('This file has been shared with you by other people.'))}
+          </p>
+          <blockquote>{uri || path}</blockquote>
+          <p>{__('LBRY Inc is not responsible for its content, click continue to proceed at your own risk.')}</p>
+        </section>
+      </Modal>
+    );
+  }
+}
+
+export default ModalOpenExternalResource;

src/ui/modal/modalRouter/view.jsx

@@ -21,7 +21,7 @@ import ModalConfirmTransaction from 'modal/modalConfirmTransaction';
 import ModalSocialShare from 'modal/modalSocialShare';
 import ModalSendTip from 'modal/modalSendTip';
 import ModalPublish from 'modal/modalPublish';
-import ModalOpenExternalLink from 'modal/modalOpenExternalLink';
+import ModalOpenExternalResource from 'modal/modalOpenExternalResource';
 import ModalConfirmThumbnailUpload from 'modal/modalConfirmThumbnailUpload';
 import ModalWalletEncrypt from 'modal/modalWalletEncrypt';
 import ModalWalletDecrypt from 'modal/modalWalletDecrypt';
@@ -85,8 +85,8 @@ function ModalRouter(props: Props) {
       return <ModalSocialShare {...modalProps} />;
     case MODALS.PUBLISH:
       return <ModalPublish {...modalProps} />;
-    case MODALS.CONFIRM_EXTERNAL_LINK:
+    case MODALS.CONFIRM_EXTERNAL_RESOURCE:
-      return <ModalOpenExternalLink {...modalProps} />;
+      return <ModalOpenExternalResource {...modalProps} />;
     case MODALS.CONFIRM_TRANSACTION:
       return <ModalConfirmTransaction {...modalProps} />;
     case MODALS.CONFIRM_THUMBNAIL_UPLOAD: