fix render logic of non-playable files

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

@@ -77,10 +77,12 @@ class MediaPlayer extends React.PureComponent<Props, State> {
     // Temp hack to force the video to play if the metadataloaded event was never fired
     // Will be removed with the new video player
     // Unoptimized MP4s will fail to render.
+    // Note: Don't use this for non-playable files
     // @if TARGET='app'
     setTimeout(() => {
       const { hasMetadata } = this.state;
-      if (!hasMetadata) {
+      const isPlayableType = this.playableType();
+      if (!hasMetadata && isPlayableType) {
         this.refreshMetadata();
         this.playMedia();
       }
@@ -88,6 +90,20 @@ class MediaPlayer extends React.PureComponent<Props, State> {
     // @endif
   }
 
+  componentDidUpdate(prevProps: Props) {
+    const { fileSource } = this.state;
+    const { downloadCompleted } = this.props;
+
+    // Attemp to render a non-playable file once download is completed
+    if (prevProps.downloadCompleted !== downloadCompleted) {
+      const isFileType = this.isSupportedFile();
+
+      if (isFileType && !fileSource && downloadCompleted) {
+        this.playMedia();
+      }
+    }
+  }
+
   componentWillUnmount() {
     const mediaElement = this.mediaContainer.current.children[0];
 
@@ -139,8 +155,8 @@ class MediaPlayer extends React.PureComponent<Props, State> {
     };
 
     // Render custom viewer: FileRender
-    if (this.isSupportedFile() && downloadCompleted) {
+    if (this.isSupportedFile()) {
-      this.renderFile();
+      downloadCompleted && this.renderFile();
     } else {
       // Render default viewer: render-media (video, audio, img, iframe)
       const currentMediaContainer = this.mediaContainer.current;
@@ -256,9 +272,7 @@ class MediaPlayer extends React.PureComponent<Props, State> {
   isRenderMediaSupported() {
     // Files supported by render-media
     const { contentType } = this.props;
-    return (
+    return Object.values(player.mime).indexOf(contentType) !== -1;
-      Object.values(player.mime).indexOf(contentType) !== -1 || MediaPlayer.SANDBOX_TYPES.indexOf(contentType) > -1
-    );
   }
 
   isSupportedFile() {
@@ -274,33 +288,36 @@ class MediaPlayer extends React.PureComponent<Props, State> {
 
     if (MediaPlayer.SANDBOX_TYPES.indexOf(contentType) > -1) {
       const outpoint = `${claim.txid}:${claim.nout}`;
-
+      // Fetch unpacked url
-      return fetch(`${MediaPlayer.SANDBOX_SET_BASE_URL}${outpoint}`)
+      fetch(`${MediaPlayer.SANDBOX_SET_BASE_URL}${outpoint}`)
         .then(res => res.text())
         .then(url => {
           const fileSource = { url: `${MediaPlayer.SANDBOX_CONTENT_BASE_URL}${url}` };
-          return this.setState({ fileSource });
+          this.setState({ fileSource });
+        })
+        .catch(err => {
+          console.error(err);
         });
+    } else {
+      // File to render
+      const fileSource = {
+        fileName,
+        contentType,
+        downloadPath,
+        fileType: path.extname(fileName).substring(1),
+        // Readable stream from file
+        // @if TARGET='app'
+        stream: opts => fs.createReadStream(downloadPath, opts),
+        // @endif
+      };
+
+      // Update state
+      this.setState({ fileSource });
     }
-
-    // File to render
-    const fileSource = {
-      fileName,
-      contentType,
-      downloadPath,
-      fileType: path.extname(fileName).substring(1),
-      // Readable stream from file
-      // @if TARGET='app'
-      stream: opts => fs.createReadStream(downloadPath, opts),
-      // @endif
-    };
-
-    // Update state
-    this.setState({ fileSource });
   }
 
   showLoadingScreen(isFileType: boolean, isPlayableType: boolean) {
-    const { mediaType, contentType } = this.props;
+    const { mediaType } = this.props;
     const { unplayable, fileSource, hasMetadata } = this.state;
 
     if (IS_WEB && ['audio', 'video'].indexOf(mediaType) === -1) {
@@ -325,10 +342,7 @@ class MediaPlayer extends React.PureComponent<Props, State> {
 
     // Files
     const isLoadingFile = !fileSource && isFileType;
-    const isLbryPackage = /application\/x(-ext)?-lbry$/.test(contentType);
+    const isUnsupported = !this.isRenderMediaSupported() && !isFileType && !isPlayableType;
-    const isUnsupported =
-      (mediaType === 'application' && !isLbryPackage) ||
-      (!this.isRenderMediaSupported() && !isFileType && !isPlayableType);
     // Media (audio, video)
     const isUnplayable = isPlayableType && unplayable;
     const isLoadingMetadata = isPlayableType && (!hasMetadata && !unplayable);
@@ -341,8 +355,6 @@ class MediaPlayer extends React.PureComponent<Props, State> {
       // Show unsupported error message
     } else if (isUnsupported || isUnplayable) {
       loader.loadingStatus = isUnsupported ? unsupportedMessage : unplayableMessage;
-    } else if (isLbryPackage && !isLoadingFile) {
-      loader.loadingStatus = null;
     }
 
     return loader;
@@ -352,8 +364,7 @@ class MediaPlayer extends React.PureComponent<Props, State> {
     const { mediaType, claim } = this.props;
     const { fileSource } = this.state;
     const isFileType = this.isSupportedFile();
-
+    const isFileReady = fileSource !== null && isFileType;
-    const isFileReady = fileSource && isFileType;
     const isPlayableType = this.playableType();
     const { isLoading, loadingStatus } = this.showLoadingScreen(isFileType, isPlayableType);