unsupported yrbl

src/ui/component/fileRender/view.jsx

@@ -7,6 +7,7 @@ import ImageViewer from 'component/viewers/imageViewer';
 import AppViewer from 'component/viewers/appViewer';
 import path from 'path';
 import fs from 'fs';
+import Yrbl from 'component/yrbl';
 
 const DocumentViewer = React.lazy<*>(() =>
   import(
@@ -155,9 +156,24 @@ class FileRender extends React.PureComponent<Props> {
     }
     // @endif
 
-    // Message Error
-    const unsupportedMessage = __("Sorry, we can't preview this file.");
-    const unsupported = <LoadingScreen status={unsupportedMessage} spinner={false} />;
+    const unsupported = IS_WEB ? (
+      <div className={'content__cover--disabled'}>
+        <Yrbl
+          className={'content__cover--disabled'}
+          title={'Not available on LBRY TV'}
+          subtitle={'You can view or download this file by installing the App'}
+          uri={uri}
+        />
+      </div>
+    ) : (
+      <div className={'content__cover--disabled'}>
+        <Yrbl
+          title={'Content Downloaded'}
+          subtitle={'This file is unsupported here, but you can view the content in an application of your choice'}
+          uri={uri}
+        />
+      </div>
+    );
 
     // Return viewer
     return viewer || unsupported;

src/ui/component/fileViewerInitiator/view.jsx

@@ -3,10 +3,11 @@
 // The actual viewer for a file exists in FileViewer
 // They can't exist in one component because we need to handle/listen for the start of a new file view
 // while a file is currently being viewed
-import React, { useEffect, useCallback } from 'react';
+import React, { useEffect, useCallback, Fragment } from 'react';
 import classnames from 'classnames';
 import Button from 'component/button';
 import isUserTyping from 'util/detect-typing';
+import Yrbl from 'component/yrbl';
 
 const SPACE_BAR_KEYCODE = 32;
 
@@ -44,6 +45,7 @@ export default function FileViewer(props: Props) {
   const cost = costInfo && costInfo.cost;
   const isPlayable = ['audio', 'video'].indexOf(mediaType) !== -1;
   const fileStatus = fileInfo && fileInfo.status;
+  const supported = (IS_WEB && isStreamable) || !IS_WEB;
 
   // Wrap this in useCallback because we need to use it to the keyboard effect
   // If we don't a new instance will be created for every render and react will think the dependencies have change, which will add/remove the listener for every render
@@ -87,14 +89,30 @@ export default function FileViewer(props: Props) {
   return (
     <div
       disabled={!hasCostInfo}
-      onClick={viewFile}
       style={!obscurePreview && thumbnail ? { backgroundImage: `url("${thumbnail}")` } : {}}
-      className={classnames('content__cover', {
+      className={classnames({
+        content__cover: supported,
+        'content__cover--disabled': !supported,
         'card__media--nsfw': obscurePreview,
         'card__media--disabled': !fileInfo && insufficientCredits,
       })}
     >
-      {!isPlaying && (
+      {!supported && (
+        <Yrbl
+          type="happy"
+          title={__('Unsupported File')}
+          subtitle={
+            <Fragment>
+              <p>
+                {__('Good news, though! You can')}{' '}
+                <Button button="link" label={__('Download the desktop app')} href="https://lbry.com/get" />{' '}
+                {'and have access to all file types.'}
+              </p>
+            </Fragment>
+          }
+        />
+      )}
+      {!isPlaying && supported && (
         <Button
           onClick={viewFile}
           iconSize={30}

src/ui/scss/component/_content.scss

@@ -84,6 +84,28 @@
   }
 }
 
+.content__cover--disabled {
+  @include thumbnail;
+  cursor: default;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-position: 50% 50%;
+  background-repeat: no-repeat;
+  background-size: 100%;
+  margin: auto;
+
+  &:not(.card__media--nsfw) {
+    background-color: #fff; // solid black to blend nicely when the video starts (if it doesn't take the full width)
+  }
+
+  &:-webkit-full-screen {
+    width: 100%;
+    height: 100%;
+  }
+}
+
 .content__loading {
   height: 100%;
   display: flex;

static/locales/en.json

@@ -679,5 +679,9 @@
   "LBRY Download Complete": "LBRY Download Complete",
   "Blocked": "Blocked",
   "Unblock": "Unblock",
-  "You have blocked this channel content.": "You have blocked this channel content."
+  "You have blocked this channel content.": "You have blocked this channel content.",
+  "Content Downloaded": "Content Downloaded",
+  "The viewer doesn't support this file type. See more info below.": "The viewer doesn't support this file type. See more info below.",
+  "Catching up...": "Catching up...",
+  "%s blocks behind": "%s blocks behind"
 }