Fallback image for <FileThumbnail>

## Ticket
5457 Create file thumbnail fallback image for odysee

## Approach
Since `background-image` does not invoke an `onerror` event, use the stacking attribute of `background-image` to display the fallback.

.env.defaults

@@ -51,6 +51,7 @@ YRBL_SAD_IMG_URL=https://cdn.lbryplayer.xyz/api/v3/streams/free/yrbl-sad/c2d9649
 #LOGO_TEXT_LIGHT=https://cdn.lbryplayer.xyz/api/v3/streams/free/yrbl-sad/c2d9649633d974e5ffb503925e1f17d951f1bd0f/f262dd
 #LOGO_TEXT_DARK=https://cdn.lbryplayer.xyz/api/v3/streams/free/yrbl-sad/c2d9649633d974e5ffb503925e1f17d951f1bd0f/f262dd
 #AVATAR_DEFAULT=
+#MISSING_THUMB_DEFAULT=
 #FAVICON=
 
 # LOCALE

config.js

@@ -34,6 +34,7 @@ const config = {
   LOGO_TEXT_LIGHT: process.env.LOGO_TEXT_LIGHT,
   LOGO_TEXT_DARK: process.env.LOGO_TEXT_DARK,
   AVATAR_DEFAULT: process.env.AVATAR_DEFAULT,
+  MISSING_THUMB_DEFAULT: process.env.MISSING_THUMB_DEFAULT,
   // OG
   OG_TITLE_SUFFIX: process.env.OG_TITLE_SUFFIX,
   OG_HOMEPAGE_TITLE: process.env.OG_HOMEPAGE_TITLE,

ui/component/fileThumbnail/thumb.jsx

@@ -6,17 +6,23 @@ import useLazyLoading from 'effects/use-lazy-loading';
 
 type Props = {
   thumb: string,
+  fallback: ?string,
   children?: Node,
   className?: string,
 };
 
 const Thumb = (props: Props) => {
-  const { thumb, children, className } = props;
+  const { thumb, fallback, children, className } = props;
   const thumbnailRef = React.useRef(null);
   useLazyLoading(thumbnailRef);
 
   return (
-    <div ref={thumbnailRef} data-background-image={thumb} className={classnames('media__thumb', className)}>
+    <div
+      ref={thumbnailRef}
+      data-background-image={thumb}
+      data-background-image-fallback={fallback}
+      className={classnames('media__thumb', className)}
+    >
       {children}
     </div>
   );

ui/component/fileThumbnail/view.jsx

@@ -4,6 +4,7 @@ import { getThumbnailCdnUrl } from 'util/thumbnail';
 import React from 'react';
 import FreezeframeWrapper from './FreezeframeWrapper';
 import Placeholder from './placeholder.png';
+import { MISSING_THUMB_DEFAULT } from 'config';
 import classnames from 'classnames';
 import Thumb from './thumb';
 
@@ -42,6 +43,8 @@ function FileThumbnail(props: Props) {
     );
   }
 
+  const fallback = MISSING_THUMB_DEFAULT ? getThumbnailCdnUrl({ thumbnail: MISSING_THUMB_DEFAULT }) : undefined;
+
   let url = thumbnail || (hasResolvedClaim ? Placeholder : '');
   // @if TARGET='web'
   // Pass image urls through a compression proxy
@@ -54,7 +57,7 @@ function FileThumbnail(props: Props) {
 
   if (hasResolvedClaim || thumbnailUrl) {
     return (
-      <Thumb thumb={thumbnailUrl} className={className}>
+      <Thumb thumb={thumbnailUrl} fallback={fallback} className={className}>
         {children}
       </Thumb>
     );

ui/effects/use-lazy-loading.js

@@ -47,7 +47,11 @@ export default function useLazyLoading(
 
             // useful for lazy loading background images on divs
             if (target.dataset.backgroundImage) {
-              target.style.backgroundImage = `url(${target.dataset.backgroundImage})`;
+              if (target.dataset.backgroundImageFallback) {
+                target.style.backgroundImage = `url(${target.dataset.backgroundImage}), url(${target.dataset.backgroundImageFallback})`;
+              } else {
+                target.style.backgroundImage = `url(${target.dataset.backgroundImage})`;
+              }
             }
           }
         });