Merge pull request #2364 from lbryio/pdf

fix: open pdf's externally

src/ui/component/fileViewer/internal/player.jsx

@@ -290,7 +290,7 @@ class MediaPlayer extends React.PureComponent<Props, State> {
     const { mediaType, contentType } = this.props;
     const { unplayable, fileSource, hasMetadata } = this.state;
 
-    if (['audio', 'video'].indexOf(mediaType) === -1) {
+    if (IS_WEB && ['audio', 'video'].indexOf(mediaType) === -1) {
       return {
         isLoading: false,
         loadingStatus: __(
@@ -352,7 +352,7 @@ class MediaPlayer extends React.PureComponent<Props, State> {
         {loadingStatus && <LoadingScreen status={loadingStatus} spinner={isLoading} />}
         {isFileReady && <FileRender claim={claim} source={fileSource} mediaType={mediaType} />}
         <div
-          className="content__view--container"
+          className='content__view--container'
           style={{ opacity: isLoading ? 0 : 1 }}
           ref={this.mediaContainer}
         />

src/ui/component/viewers/pdfViewer.jsx

@@ -1,17 +1,41 @@
 // @flow
 import * as React from 'react';
 import { stopContextMenu } from 'util/context-menu';
+import Button from 'component/button';
+import { shell } from 'electron';
 
 type Props = {
   source: string,
 };
 
 class PdfViewer extends React.PureComponent<Props> {
-  render() {
+  constructor() {
+    super();
+
+    (this: any).openFile = this.openFile.bind(this);
+  }
+
+  componentDidMount() {
+    this.openFile();
+  }
+
+  openFile() {
     const { source } = this.props;
+    const path = `file://${source}`;
+    shell.openExternal(path);
+  }
+
+  render() {
+    // We used to be able to just render a webview and display the pdf inside the app
+    // This was disabled on electron@3
+    // https://github.com/electron/electron/issues/12337
     return (
-      <div className="file-render__viewer" onContextMenu={stopContextMenu}>
-        <webview src={`chrome://pdf-viewer/index.html?src=file://${source}`} />
+      <div className="file-render__viewer file-render--pdf" onContextMenu={stopContextMenu}>
+        <p>
+          {__('PDF opened externally.')}{' '}
+          <Button button="link" label={__('Click here')} onClick={this.openFile} />{' '}
+          {__('to open it again.')}
+        </p>
       </div>
     );
   }

src/ui/scss/component/_file-render.scss

@@ -40,6 +40,13 @@
   }
 }
 
+.file-render--pdf {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.5em;
+}
+
 .document-viewer {
   overflow: auto;