add pdf-viewer

reduce lbry.getMedia calls

update fileRender logic

src/main/createWindow.js

@@ -14,7 +14,7 @@ export default appState => {
     defaultHeight: height,
   });
 
-  let windowConfiguration = {
+  const windowConfiguration = {
     backgroundColor: '#44b098',
     minWidth: 950,
     minHeight: 600,
@@ -26,17 +26,13 @@ export default appState => {
     // If state is undefined, create window as maximized.
     width: windowState.width === undefined ? width : windowState.width,
     height: windowState.height === undefined ? height : windowState.height,
-  };
 
-  // Disable renderer process's webSecurity on development to enable CORS.
-  windowConfiguration = isDev
-    ? {
-        ...windowConfiguration,
-        webPreferences: {
-          webSecurity: false,
-        },
-      }
-    : windowConfiguration;
+    webPreferences: {
+      // Disable renderer process's webSecurity on development to enable CORS.
+      webSecurity: !isDev,
+      plugins: true,
+    },
+  };
 
   const rendererURL = isDev
     ? `http://localhost:${process.env.ELECTRON_WEBPACK_WDS_PORT}`

src/renderer/component/fileRender/view.jsx

@@ -1,13 +1,14 @@
 // @flow
 import React from 'react';
 import LoadingScreen from 'component/common/loading-screen';
-// import ThreeViewer from 'component/threeViewer';
+import PdfViewer from 'component/viewers/pdfViewer';
 
 type Props = {
   mediaType: string,
   source: {
     filePath: string,
     fileType: string,
+    downloadPath: string,
   },
   currentTheme: string,
 };
@@ -23,7 +24,14 @@ class FileRender extends React.PureComponent<Props> {
       // Add routes to viewer...
     };
 
-    const viewer = mediaType && source && mediaTypes[mediaType];
+    // Supported fileType
+    const fileTypes = {
+      pdf: <PdfViewer {...viewerProps} />,
+      // Add routes to viewer...
+    };
+
+    const { fileType } = source;
+    const viewer = mediaType && source && (mediaTypes[mediaType] || fileTypes[fileType]);
     const unsupportedMessage = "Sorry, looks like we can't preview this file.";
     const unsupported = <LoadingScreen status={unsupportedMessage} spinner={false} />;
 

src/renderer/component/video/internal/player.jsx

@@ -11,7 +11,7 @@ import LoadingScreen from 'component/common/loading-screen';
 
 class VideoPlayer extends React.PureComponent {
   static MP3_CONTENT_TYPES = ['audio/mpeg3', 'audio/mpeg'];
-  static FILE_MEDIA_TYPES = ['3D-file', 'e-book', 'comic-book'];
+  static FILE_MEDIA_TYPES = ['e-book', 'comic-book', 'document', '3D-file'];
 
   constructor(props) {
     super(props);
@@ -192,6 +192,7 @@ class VideoPlayer extends React.PureComponent {
       }
       // File to render
       const fileSource = {
+        downloadPath,
         filePath: url,
         fileType: path.extname(filename).substring(1),
       };

src/renderer/component/video/view.jsx

@@ -1,11 +1,10 @@
 // @flow
 import React from 'react';
-import { Lbry } from 'lbry-redux';
 import classnames from 'classnames';
 import type { Claim } from 'types/claim';
+import LoadingScreen from 'component/common/loading-screen';
 import VideoPlayer from './internal/player';
 import VideoPlayButton from './internal/play-button';
-import LoadingScreen from 'component/common/loading-screen';
 
 const SPACE_BAR_KEYCODE = 32;
 
@@ -40,6 +39,7 @@ type Props = {
   obscureNsfw: boolean,
   play: string => void,
   searchBarFocused: boolean,
+  mediaType: string,
 };
 
 class Video extends React.PureComponent<Props> {
@@ -123,12 +123,12 @@ class Video extends React.PureComponent<Props> {
       mediaPosition,
       className,
       obscureNsfw,
+      mediaType,
     } = this.props;
 
     const isPlaying = playingUri === uri;
     const isReadyToPlay = fileInfo && fileInfo.written_bytes > 0;
     const shouldObscureNsfw = obscureNsfw && metadata && metadata.nsfw;
-    const mediaType = (fileInfo && Lbry.getMediaType(null, fileInfo.file_name)) || Lbry.getMediaType(contentType);
 
     let loadStatusMessage = '';
 

src/renderer/component/viewers/pdfViewer.jsx

@@ -0,0 +1,24 @@
+// @flow
+import React from 'react';
+
+type Props = {
+  source: {
+    fileType: string,
+    filePath: string,
+    downloadPath: string,
+  },
+};
+
+class PdfViewer extends React.PureComponent<Props> {
+  render() {
+    const { source } = this.props;
+    return (
+      <webview
+        className="file-render__viewer"
+        src={`chrome://pdf-viewer/index.html?src=file://${source.downloadPath}`}
+      />
+    );
+  }
+}
+
+export default PdfViewer;

src/renderer/page/file/view.jsx

@@ -28,6 +28,7 @@ type Props = {
   metadata: {
     title: string,
     thumbnail: string,
+    file_name: string,
     nsfw: boolean,
   },
   contentType: string,
@@ -49,7 +50,7 @@ type Props = {
 
 class FilePage extends React.Component<Props> {
   static PLAYABLE_MEDIA_TYPES = ['audio', 'video'];
-  static PREVIEW_MEDIA_TYPES = ['text', 'image', '3D-file'];
+  static PREVIEW_MEDIA_TYPES = ['text', 'image', 'document', '3D-file'];
 
   constructor(props: Props) {
     super(props);
@@ -110,15 +111,17 @@ class FilePage extends React.Component<Props> {
       navigate,
       autoplay,
       costInfo,
+      fileInfo,
     } = this.props;
 
     // File info
-    const { title, thumbnail, filename } = metadata;
+    const { title, thumbnail } = metadata;
     const { height, channel_name: channelName, value } = claim;
     const { PLAYABLE_MEDIA_TYPES, PREVIEW_MEDIA_TYPES } = FilePage;
     const isRewardContent = rewardedContentClaimIds.includes(claim.claim_id);
     const shouldObscureThumbnail = obscureNsfw && metadata.nsfw;
-    const mediaType = Lbry.getMediaType(contentType, filename);
+    const fileName = fileInfo ? fileInfo.file_name : null;
+    const mediaType = fileName ? Lbry.getMediaType(null, fileName) : Lbry.getMediaType(contentType);
     const showFile =
       PLAYABLE_MEDIA_TYPES.includes(mediaType) || PREVIEW_MEDIA_TYPES.includes(mediaType);
     const channelClaimId =
@@ -154,7 +157,7 @@ class FilePage extends React.Component<Props> {
           </section>
         ) : (
           <section className="card">
-            {showFile && <Video className="content__embedded" uri={uri} />}
+            {showFile && <Video className="content__embedded" uri={uri} mediaType={mediaType} />}
             {!showFile &&
               (thumbnail ? (
                 <Thumbnail shouldObscure={shouldObscureThumbnail} src={thumbnail} />
@@ -164,7 +167,9 @@ class FilePage extends React.Component<Props> {
                     'content__empty--nsfw': shouldObscureThumbnail,
                   })}
                 >
-                  <div className="card__media-text">{__('This content is not playable.')}</div>
+                  <div className="card__media-text">
+                    {__("Sorry, looks like we can't preview this file.")}
+                  </div>
                 </div>
               ))}
             <div className="card__content">

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

@@ -11,6 +11,7 @@
   overflow: hidden;
 
   .file-render__viewer {
+    margin: 0;
     width: 100%;
     height: 100%;
     background: black;