Add fallback thumbnail for streams

config.js

@@ -40,7 +40,8 @@ const config = {
   PINNED_URI_2: process.env.PINNED_URI_2,
   PINNED_LABEL_2: process.env.PINNED_LABEL_2,
   KNOWN_APP_DOMAINS: process.env.KNOWN_APP_DOMAINS ? process.env.KNOWN_APP_DOMAINS.split(',') : [],
-  THUMBNAIL_FALLBACK: process.env.THUMBNAIL_FALLBACK,
+  CHANNEL_THUMBNAIL_FALLBACK: process.env.CHANNEL_THUMBNAIL_FALLBACK,
+  STREAM_THUMBNAIL_FALLBACK: process.env.STREAM_THUMBNAIL_FALLBACK,
 };
 
 config.URL_LOCAL = `http://localhost:${config.WEB_SERVER_PORT}`;

package.json

@@ -53,8 +53,9 @@
     "electron-updater": "^4.2.4",
     "express": "^4.17.1",
     "if-env": "^1.0.4",
-	"remark-breaks": "^2.0.1",
     "remove-markdown": "^0.3.0",
+    "react-image": "^4.0.3",
+    "remark-breaks": "^2.0.1",
     "tempy": "^0.6.0",
     "videojs-logo": "^2.1.4"
   },

ui/component/claimPreview/view.jsx

@@ -2,7 +2,9 @@
 import type { Node } from 'react';
 import React, { useEffect, forwardRef } from 'react';
 import { NavLink, withRouter } from 'react-router-dom';
+import { useImage } from 'react-image';
 import classnames from 'classnames';
+import { CHANNEL_THUMBNAIL_FALLBACK, STREAM_THUMBNAIL_FALLBACK } from 'config';
 import { parseURI, convertToShareLink } from 'lbry-redux';
 import { openCopyLinkMenu } from 'util/context-menu';
 import { formatLbryUrlForWeb } from 'util/url';
@@ -187,6 +189,11 @@ const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
   // Weird placement warning
   // Make sure this happens after we figure out if this claim needs to be hidden
   const thumbnailUrl = useGetThumbnail(contentUri, claim, streamingUrl, getFile, shouldHide);
+  const isStream = claim && claim.value_type === 'stream';
+  const { src: thumbnailUrlWithFallback } = useImage({
+    srcList: [thumbnailUrl, isStream ? STREAM_THUMBNAIL_FALLBACK : CHANNEL_THUMBNAIL_FALLBACK],
+    useSuspense: false,
+  });
 
   function handleContextMenu(e) {
     // @if TARGET='app'
@@ -281,7 +288,7 @@ const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
           <>
             {!pending ? (
               <NavLink {...navLinkProps}>
-                <FileThumbnail thumbnail={thumbnailUrl}>
+                <FileThumbnail thumbnail={thumbnailUrlWithFallback}>
                   {/* @if TARGET='app' */}
                   {claim && (
                     <div className="claim-preview__hover-actions">
@@ -297,7 +304,7 @@ const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
                 </FileThumbnail>
               </NavLink>
             ) : (
-              <FileThumbnail thumbnail={thumbnailUrl} />
+              <FileThumbnail thumbnail={thumbnailUrlWithFallback} />
             )}
           </>
         )}

ui/component/fileThumbnail/view.jsx

@@ -2,7 +2,6 @@
 import type { Node } from 'react';
 import { getThumbnailCdnUrl } from 'util/thumbnail';
 import React from 'react';
-import { THUMBNAIL_FALLBACK } from 'config';
 import FreezeframeWrapper from './FreezeframeWrapper';
 import Placeholder from './placeholder.png';
 import classnames from 'classnames';
@@ -15,11 +14,10 @@ type Props = {
   claim: ?StreamClaim,
   doResolveUri: string => void,
   className?: string,
-  fallbackThumbnail?: string,
 };
 
 function FileThumbnail(props: Props) {
-  const { claim, uri, doResolveUri, thumbnail: rawThumbnail, children, allowGifs = false, className, fallbackThumbnail = THUMBNAIL_FALLBACK } = props;
+  const { claim, uri, doResolveUri, thumbnail: rawThumbnail, children, allowGifs = false, className } = props;
   const passedThumbnail = rawThumbnail && rawThumbnail.trim().replace(/^http:\/\//i, 'https://');
   const thumbnailFromClaim =
     uri && claim && claim.value && claim.value.thumbnail ? claim.value.thumbnail.url : undefined;
@@ -52,7 +50,7 @@ function FileThumbnail(props: Props) {
 
   return (
     <div
-      style={{ backgroundImage: `url('${cleanUrl}'), url('${fallbackThumbnail}')` }}
+      style={{ backgroundImage: `url('${cleanUrl}')` }}
       className={classnames('media__thumb', className, {
         'media__thumb--resolving': !hasResolvedClaim,
       })}

yarn.lock

@@ -9223,6 +9223,11 @@ react-hot-loader@^4.11.1:
     shallowequal "^1.1.0"
     source-map "^0.7.3"
 
+react-image@^4.0.3:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/react-image/-/react-image-4.0.3.tgz#6fa722877660b67295298a914bff1ed87ad2cf83"
+  integrity sha512-19MUK9u1qaw9xys8XEsVkSpVhHctEBUeYFvrLTe1PN+4w5Co13AN2WA7xtBshPM6SthsOj77SlDrEAeOaJpf7g==
+
 react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.2:
   version "16.13.0"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.0.tgz#0f37c3613c34fe6b37cd7f763a0d6293ab15c527"