From 718d379c3c7cc0b6a438a79b5aafda0499d2cffc Mon Sep 17 00:00:00 2001
From: MerlinScheurer <merlin.scheurer@Yahoo.de>
Date: Sun, 16 Feb 2025 11:54:17 +0100
Subject: [PATCH] Fix Video Thumbnail fallback in DownloadListItem

---
 frontend/src/components/DownloadListItem.tsx | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/DownloadListItem.tsx b/frontend/src/components/DownloadListItem.tsx
index ef916ffc..7a4c5812 100644
--- a/frontend/src/components/DownloadListItem.tsx
+++ b/frontend/src/components/DownloadListItem.tsx
@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import { Link } from 'react-router-dom';
 import Download from '../pages/Download';
 import Routes from '../configuration/routes/RouteList';
@@ -5,9 +6,9 @@ import formatDate from '../functions/formatDates';
 import Button from './Button';
 import deleteDownloadById from '../api/actions/deleteDownloadById';
 import updateDownloadQueueStatusById from '../api/actions/updateDownloadQueueStatusById';
-import { useState } from 'react';
 import getApiUrl from '../configuration/getApiUrl';
 import { useUserConfigStore } from '../stores/UserConfigStore';
+import defaultVideoThumb from '/img/default-video-thumb.jpg';
 
 type DownloadListItemProps = {
   download: Download;
@@ -25,7 +26,14 @@ const DownloadListItem = ({ download, setRefresh }: DownloadListItemProps) => {
     <div className={`video-item ${view}`} id={`dl-${download.youtube_id}`}>
       <div className={`video-thumb-wrap ${view}`}>
         <div className="video-thumb">
-          <img src={`${getApiUrl()}${download.vid_thumb_url}`} alt="video_thumb" />
+          <img
+            src={`${getApiUrl()}${download.vid_thumb_url}`}
+            alt="video_thumb"
+            onError={({ currentTarget }) => {
+              currentTarget.onerror = null; // prevents looping
+              currentTarget.src = defaultVideoThumb;
+            }}
+          />
 
           <div className="video-tags">
             {showIgnored && <span>ignored</span>}