diff --git a/src/ui/component/fileRender/view.jsx b/src/ui/component/fileRender/view.jsx
index 50d41ec88..25fb87385 100644
--- a/src/ui/component/fileRender/view.jsx
+++ b/src/ui/component/fileRender/view.jsx
@@ -107,14 +107,14 @@ class FileRender extends React.PureComponent<Props> {
       application: !source.url ? null : (
         <webview
           ref={element => this.processSandboxRef(element)}
-          title=''
-          sandbox='allow-scripts allow-forms allow-pointer-lock'
+          title=""
+          sandbox="allow-scripts allow-forms allow-pointer-lock"
           src={source.url}
-          autosize='on'
+          autosize="on"
           style={{ border: 0, width: '100%', height: '100%' }}
-          useragent='Mozilla/5.0 AppleWebKit/537 Chrome/60 Safari/537'
-          enableremotemodule='false'
-          webpreferences='sandbox=true,contextIsolation=true,webviewTag=false,enableRemoteModule=false,devTools=false'
+          useragent="Mozilla/5.0 AppleWebKit/537 Chrome/60 Safari/537"
+          enableremotemodule="false"
+          webpreferences="sandbox=true,contextIsolation=true,webviewTag=false,enableRemoteModule=false,devTools=false"
         />
       ),
       video: (
@@ -150,7 +150,14 @@ class FileRender extends React.PureComponent<Props> {
     if (!viewer && readableFiles.includes(mediaType)) {
       viewer = <DocumentViewer source={{ stream, fileType, contentType }} theme={currentTheme} />;
     }
-
+    // temp workaround
+    if (claim && claim.value.stream.metadata.fee && claim.value.stream.metadata.fee.amount > 0) {
+      const paidMessage = __(
+        'Currently, only free content is available on lbry.tv. Try viewing it in the desktop app.'
+      );
+      const paid = <LoadingScreen status={paidMessage} spinner={false} />;
+      return paid;
+    }
     // Message Error
     const unsupportedMessage = __("Sorry, looks like we can't preview this file.");
     const unsupported = <LoadingScreen status={unsupportedMessage} spinner={false} />;
@@ -160,7 +167,7 @@ class FileRender extends React.PureComponent<Props> {
   }
 
   render() {
-    return <div className='file-render'>{this.renderViewer()}</div>;
+    return <div className="file-render">{this.renderViewer()}</div>;
   }
 }
 
diff --git a/src/ui/component/fileViewer/internal/player.jsx b/src/ui/component/fileViewer/internal/player.jsx
index 6d836f689..d6b2aa84c 100644
--- a/src/ui/component/fileViewer/internal/player.jsx
+++ b/src/ui/component/fileViewer/internal/player.jsx
@@ -287,19 +287,10 @@ class MediaPlayer extends React.PureComponent<Props, State> {
   }
 
   showLoadingScreen(isFileType: boolean, isPlayableType: boolean) {
-    const { claim, mediaType, contentType } = this.props;
+    const { mediaType, contentType } = this.props;
     const { unplayable, fileSource, hasMetadata } = this.state;
-    
-    if (claim && claim.value.stream.metadata.fee && claim.value.stream.metadata.fee.amount > 0) {
-      return {
-        isLoading: false,
-        loadingStatus: __(
-          'Currently, only free content is available on lbry.tv. Try viewing it in the desktop app.'
-        ),
-      };
-    }
 
-    if (['audio', 'video'].indexOf(mediaType) === -1) {
+    if (IS_WEB && ['audio', 'video'].indexOf(mediaType) === -1) {
       return {
         isLoading: false,
         loadingStatus: __(
@@ -361,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}
         />
diff --git a/src/ui/component/viewers/pdfViewer.jsx b/src/ui/component/viewers/pdfViewer.jsx
index 27c60f6b8..15ce39913 100644
--- a/src/ui/component/viewers/pdfViewer.jsx
+++ b/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>
     );
   }
diff --git a/src/ui/scss/component/_file-render.scss b/src/ui/scss/component/_file-render.scss
index c4782327c..abd4fff00 100644
--- a/src/ui/scss/component/_file-render.scss
+++ b/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;