Open the actual image when clicking on the image viewer

ui/component/fileRender/index.js

@@ -1,14 +1,17 @@
 import { connect } from 'react-redux';
 import {
   makeSelectClaimForUri,
+  makeSelectFileInfoForUri,
   makeSelectThumbnailForUri,
   makeSelectContentTypeForUri,
   makeSelectDownloadPathForUri,
   makeSelectStreamingUrlForUri,
+  makeSelectClaimIsMine,
   SETTINGS,
 } from 'lbry-redux';
 import { makeSelectClientSetting } from 'redux/selectors/settings';
 import { makeSelectFileRenderModeForUri, makeSelectFileExtensionForUri } from 'redux/selectors/content';
+import { doOpenModal } from 'redux/actions/app';
 import FileRender from './view';
 
 const select = (state, props) => {
@@ -23,7 +26,13 @@ const select = (state, props) => {
     streamingUrl: makeSelectStreamingUrlForUri(props.uri)(state),
     renderMode: makeSelectFileRenderModeForUri(props.uri)(state),
     autoplay: autoplay,
+    fileInfo: makeSelectFileInfoForUri(props.uri)(state),
+    claimIsMine: makeSelectClaimIsMine(props.uri)(state),
   };
 };
 
-export default connect(select)(FileRender);
+const perform = (dispatch) => ({
+  openModal: (modal, props) => dispatch(doOpenModal(modal, props)),
+});
+
+export default connect(select, perform)(FileRender);

ui/component/fileRender/view.jsx

@@ -35,6 +35,9 @@ type Props = {
   thumbnail: string,
   desktopPlayStartTime?: number,
   className?: string,
+  fileInfo: ?FileListItem,
+  openModal: (id: string, { path: string }) => void,
+  claimIsMine: boolean,
 };
 
 class FileRender extends React.PureComponent<Props> {
@@ -76,8 +79,11 @@ class FileRender extends React.PureComponent<Props> {
       fileExtension,
       streamingUrl,
       uri,
+      fileInfo,
       renderMode,
       desktopPlayStartTime,
+      openModal,
+      claimIsMine,
     } = this.props;
     const source = streamingUrl;
 
@@ -93,7 +99,9 @@ class FileRender extends React.PureComponent<Props> {
           />
         );
       case RENDER_MODES.IMAGE:
-        return <ImageViewer uri={uri} source={source} />;
+        return (
+          <ImageViewer uri={uri} source={source} fileInfo={fileInfo} openModal={openModal} claimIsMine={claimIsMine} />
+        );
       case RENDER_MODES.HTML:
         return <HtmlViewer source={downloadPath || source} />;
       case RENDER_MODES.DOCUMENT:
@@ -102,7 +110,7 @@ class FileRender extends React.PureComponent<Props> {
           <DocumentViewer
             source={{
               // @if TARGET='app'
-              file: options => fs.createReadStream(downloadPath, options),
+              file: (options) => fs.createReadStream(downloadPath, options),
               // @endif
               stream: source,
               fileExtension,
@@ -131,7 +139,7 @@ class FileRender extends React.PureComponent<Props> {
           <ComicBookViewer
             source={{
               // @if TARGET='app'
-              file: options => fs.createReadStream(downloadPath, options),
+              file: (options) => fs.createReadStream(downloadPath, options),
               // @endif
               stream: source,
             }}

ui/component/viewers/imageViewer.jsx

@@ -2,13 +2,17 @@
 import React from 'react';
 import Card from 'component/common/card';
 import ErrorText from 'component/common/error-text';
+import * as MODALS from 'constants/modal_types';
 
 type Props = {
   source: string,
+  fileInfo: ?FileListItem,
+  openModal: (id: string, { path: string }) => void,
+  claimIsMine: boolean,
 };
 
 function ImageViewer(props: Props) {
-  const { source } = props;
+  const { source, fileInfo, openModal, claimIsMine } = props;
   const [loadingError, setLoadingError] = React.useState(false);
 
   return (
@@ -21,7 +25,16 @@ function ImageViewer(props: Props) {
       )}
       {!loadingError && (
         <div className="file-viewer">
-          <img src={source} onError={() => setLoadingError(true)} />
+          <img
+            src={source}
+            onError={() => setLoadingError(true)}
+            onClick={() => {
+              openModal(MODALS.CONFIRM_EXTERNAL_RESOURCE, {
+                path: (fileInfo && fileInfo.download_path) || '',
+                isMine: claimIsMine,
+              });
+            }}
+          />
         </div>
       )}
     </React.Fragment>

ui/modal/modalOpenExternalResource/view.jsx

@@ -1,7 +1,9 @@
 // @flow
-import React from 'react';
+import React, { useCallback, useEffect } from 'react';
 import { Modal } from 'modal/modal';
 import { formatFileSystemPath } from 'util/url';
+import { FormField } from 'component/common/form';
+import usePersistedState from 'effects/use-persisted-state';
 // @if TARGET='app'
 import { shell } from 'electron';
 // @endif
@@ -15,13 +17,10 @@ type Props = {
 };
 
 function ModalOpenExternalResource(props: Props) {
+  const [stopWarning, setStopWarning] = usePersistedState('stop-warning', false);
   const { uri, isTrusted, path, isMine, closeModal } = props;
 
-  if ((uri && isTrusted) || (path && isMine)) {
-    openResource();
-  }
-
-  function openResource() {
+  const openResource = useCallback(() => {
     // @if TARGET='app'
     const { openExternal, openPath, showItemInFolder } = shell;
     if (uri) {
@@ -42,7 +41,14 @@ function ModalOpenExternalResource(props: Props) {
     // @endif
 
     closeModal();
+  }, [closeModal, path, uri]);
+
+  useEffect(() => {
+    if ((uri && isTrusted) || (path && isMine) || stopWarning) {
+      openResource();
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [uri, isTrusted, path, isMine, openResource]);
 
   return (
     <Modal
@@ -60,6 +66,15 @@ function ModalOpenExternalResource(props: Props) {
       </p>
       <blockquote>{uri || path}</blockquote>
       <p>{__('LBRY Inc is not responsible for its content, click continue to proceed at your own risk.')}</p>
+      <div className="stop-warning">
+        <FormField
+          type="checkbox"
+          checked={stopWarning}
+          onChange={() => setStopWarning(!stopWarning)}
+          label={__("Don't Show This Message Again")}
+          name="stop_warning"
+        />
+      </div>
     </Modal>
   );
 }

ui/scss/component/_file-render.scss

@@ -726,3 +726,9 @@ video::-internal-media-controls-overlay-cast-button {
     }
   }
 }
+
+.file-page__image {
+  img {
+    cursor: pointer;
+  }
+}

ui/scss/component/_modal.scss

@@ -92,3 +92,7 @@
   overflow-y: scroll;
   white-space: pre-wrap;
 }
+
+.stop-warning {
+  margin-top: 20px;
+}