From 443d42b16c0a1c7d5b9f2a3e9d655002200ee7ba Mon Sep 17 00:00:00 2001
From: spencerwooo <spencer.woo@outlook.com>
Date: Sat, 5 Feb 2022 19:12:20 +0800
Subject: [PATCH] fallback component for broken thumbnails

---
 components/FolderGridLayout.tsx | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/components/FolderGridLayout.tsx b/components/FolderGridLayout.tsx
index a895094..45c1d18 100644
--- a/components/FolderGridLayout.tsx
+++ b/components/FolderGridLayout.tsx
@@ -9,6 +9,7 @@ import { getFileIcon } from '../utils/getFileIcon'
 import { getBaseUrl } from '../utils/getBaseUrl'
 import { formatModifiedDateTime } from '../utils/fileDetails'
 import { Checkbox, Downloading } from './FileListing'
+import { useState } from 'react'
 
 type OdFolderChildren = OdFolderObject['value'][number]
 
@@ -26,12 +27,20 @@ const GridItem = ({ c }: { c: OdFolderChildren }) => {
   // We use the generated medium thumbnail for rendering preview images
   const thumbnail = c.thumbnails && c.thumbnails.length > 0 ? c.thumbnails[0].medium : null
 
+  // Some thumbnails are broken, so we check for onerror event in the image component
+  const [brokenThumbnail, setBrokenThumbnail] = useState(false)
+
   return (
     <div className="space-y-2">
       <div className="h-32 overflow-hidden rounded border border-gray-900/10 dark:border-gray-500/30">
-        {thumbnail ? (
+        {thumbnail && !brokenThumbnail ? (
           // eslint-disable-next-line @next/next/no-img-element
-          <img className="h-full w-full object-cover object-top" src={thumbnail.url} alt={c.name} />
+          <img
+            className="h-full w-full object-cover object-top"
+            src={thumbnail.url}
+            alt={c.name}
+            onError={() => setBrokenThumbnail(true)}
+          />
         ) : (
           <div className="relative flex h-full w-full items-center justify-center rounded-lg">
             <ChildIcon />