show warning when opening external files and links

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,17 @@ 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/index.js

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

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/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: