more fixes

- Update fileRender logic

- Fix missing file source

src/renderer/component/common/loading-screen.jsx

@@ -3,8 +3,8 @@ import React from 'react';
 import Spinner from 'component/spinner';
 
 type Props = {
-  spinner: boolean,
   status: string,
+  spinner: boolean,
 };
 
 class LoadingScreen extends React.PureComponent<Props> {
@@ -17,8 +17,7 @@ class LoadingScreen extends React.PureComponent<Props> {
     return (
       <div className="content__loading">
         {spinner && <Spinner light />}
-
+        {status && <span className="content__loading-text">{status}</span>}
-        <span className="content__loading-text">{status}</span>
       </div>
     );
   }

src/renderer/component/fileRender/view.jsx

@@ -1,11 +1,11 @@
 // @flow
 import React from 'react';
 import LoadingScreen from 'component/common/loading-screen';
-//import ThreeViewer from 'component/threeViewer';
+// import ThreeViewer from 'component/threeViewer';
 
 type Props = {
   mediaType: string,
-  fileSource: {
+  source: {
     filePath: string,
     fileType: string,
   },
@@ -13,36 +13,26 @@ type Props = {
 };
 
 class FileRender extends React.PureComponent<Props> {
-  constructor() {
+  renderViewer() {
-    super();
+    const { source, mediaType, currentTheme } = this.props;
-  }
+    const viewerProps = { source, theme: currentTheme };
-
-  routeViewer() {
-    const { mediaType, fileSource, currentTheme } = this.props;
-
-    if (!mediaType || !fileSource) return null;
 
     // Supported mediaTypes
     const mediaTypes = {
-      // '3D-file': () => <ThreeViewer source={fileSource} theme={currentTheme}/>,
+      // '3D-file':  <ThreeViewer {...viewerProps}/>,
-      // 'e-book': () => <EbookReader />,
-      // 'comic-book' () => <ComicReader />,
       // Add routes to viewer...
     };
 
+    const viewer = mediaType && source && mediaTypes[mediaType];
+    const unsupportedMessage = "Sorry, looks like we can't preview this file.";
+    const unsupported = <LoadingScreen status={unsupportedMessage} spinner={false} />;
+
     // Return viewer
-    return mediaType ? mediaTypes[mediaType] : null;
+    return viewer || unsupported;
   }
 
   render() {
-    const Viewer = this.routeViewer();
+    return <div className="file-render">{this.renderViewer()}</div>;
-    const unsupportedMessage = "Sorry, looks like we can't preview this file.";
-
-    return (
-      <div className="file-render">
-        {Viewer ? <Viewer /> : <LoadingScreen status={unsupportedMessage} spinner={false} />}
-      </div>
-    );
   }
 }
 

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

@@ -9,7 +9,6 @@ import FileRender from 'component/fileRender';
 import Thumbnail from 'component/common/thumbnail';
 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'];
@@ -21,6 +20,7 @@ class VideoPlayer extends React.PureComponent {
       hasMetadata: false,
       startedPlaying: false,
       unplayable: false,
+      fileSource: null,
     };
 
     this.togglePlayListener = this.togglePlay.bind(this);
@@ -232,7 +232,8 @@ class VideoPlayer extends React.PureComponent {
         {isLoadingFile && <LoadingScreen status={noFileMessage} />}
         {isLoadingMetadata && <LoadingScreen status={noMetadataMessage} />}
         {isUnplayable && <LoadingScreen status={unplayableMessage} spinner={false} />}
-        {unsupported || isUnsupported && <LoadingScreen status={unsupportedMessage} spinner={false} />}
+        {unsupported ||
+          (isUnsupported && <LoadingScreen status={unsupportedMessage} spinner={false} />)}
         {isFile && <FileRender source={fileSource} mediaType={mediaType} />}
         <div
           className={'content__view--container'}

src/renderer/scss/component/_content.scss

@@ -96,6 +96,25 @@
   }
 }
 
+.file-render {
+  width: 100%;
+  height: 100%;
+  margin: auto;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 1;
+  overflow: hidden;
+
+  .file-render__viewer {
+    width: 100%;
+    height: 100%;
+    background: black;
+  }
+}
+
 img {
   max-height: 100%;
   max-width: 100%;