From d5727ca38750b8fa8723fafceb1f1d3d6bc4364e Mon Sep 17 00:00:00 2001
From: arabcoders <admin@arabcoders.org>
Date: Thu, 18 Dec 2025 18:58:11 +0300
Subject: [PATCH] Fix: add fallback to placeholder if loading thumbnail fails

---
 ui/app/components/History.vue | 14 +++++++++++---
 ui/app/components/Queue.vue   | 12 ++++++++++--
 ui/app/components/Simple.vue  | 26 ++++++++++++++------------
 3 files changed, 35 insertions(+), 17 deletions(-)

diff --git a/ui/app/components/History.vue b/ui/app/components/History.vue
index a5141d9e..ebf9be3a 100644
--- a/ui/app/components/History.vue
+++ b/ui/app/components/History.vue
@@ -271,17 +271,17 @@
           <figure :class="['image', thumbnail_ratio]">
             <span v-if="'finished' === item.status && item.filename" @click="playVideo(item)" class="play-overlay">
               <div class="play-icon"></div>
-              <img @load="(e: Event) => pImg(e)" :src="getImage(item)" v-if="getImage(item)" />
+              <img @load="pImg" @error="onImgError" :src="getImage(item)" v-if="getImage(item)" />
               <img v-else src="/images/placeholder.png" />
             </span>
             <span v-else-if="isEmbedable(item.url)" @click="embed_url = getEmbedable(item.url) as string"
               class="play-overlay">
               <div class="play-icon embed-icon"></div>
-              <img @load="(e: Event) => pImg(e)" :src="getImage(item)" v-if="getImage(item)" />
+              <img @load="pImg" @error="onImgError" :src="getImage(item)" v-if="getImage(item)" />
               <img v-else src="/images/placeholder.png" />
             </span>
             <template v-else>
-              <img @load="(e: Event) => pImg(e)" v-if="getImage(item)" :src="getImage(item)" />
+              <img @load="pImg" @error="onImgError" v-if="getImage(item)" :src="getImage(item)" />
               <img v-else src="/images/placeholder.png" />
             </template>
           </figure>
@@ -847,6 +847,14 @@ const pImg = (e: Event) => {
   }
 }
 
+const onImgError = (e: Event) => {
+  const target = e.target as HTMLImageElement
+  if (target.src.endsWith('/images/placeholder.png')) {
+    return
+  }
+  target.src = '/images/placeholder.png'
+}
+
 watch(video_item, (v) => {
   if (!bg_enable.value) {
     return
diff --git a/ui/app/components/Queue.vue b/ui/app/components/Queue.vue
index c376a0eb..d2aafa29 100644
--- a/ui/app/components/Queue.vue
+++ b/ui/app/components/Queue.vue
@@ -193,13 +193,13 @@
             <span v-if="isEmbedable(item.url)" @click="embed_url = getEmbedable(item.url) as string"
               class="play-overlay">
               <div class="play-icon embed-icon"></div>
-              <img @load="(e: Event) => pImg(e)"
+              <img @load="pImg" @error="onImgError"
                 :src="uri('/api/thumbnail?id=' + item._id + '&url=' + encodePath(item.extras.thumbnail))"
                 v-if="item.extras?.thumbnail" />
               <img v-else src="/images/placeholder.png" />
             </span>
             <template v-else>
-              <img @load="(e: Event) => pImg(e)" v-if="item.extras?.thumbnail"
+              <img @load="pImg" @error="onImgError" v-if="item.extras?.thumbnail"
                 :src="uri('/api/thumbnail?id=' + item._id + '&url=' + encodePath(item.extras.thumbnail))" />
               <img v-else src="/images/placeholder.png" />
             </template>
@@ -579,6 +579,14 @@ const pImg = (e: Event) => {
   }
 }
 
+const onImgError = (e: Event) => {
+  const target = e.target as HTMLImageElement
+  if (target.src.endsWith('/images/placeholder.png')) {
+    return
+  }
+  target.src = '/images/placeholder.png'
+}
+
 watch(embed_url, v => {
   if (!bg_enable.value) {
     return
diff --git a/ui/app/components/Simple.vue b/ui/app/components/Simple.vue
index b78a711c..dcc790fb 100644
--- a/ui/app/components/Simple.vue
+++ b/ui/app/components/Simple.vue
@@ -89,7 +89,8 @@
                   <figure class="media-left">
                     <figure class="image is-16by9 queue-thumb" :class="{ 'is-clickable': isEmbedable(entry.item.url) }"
                       role="presentation" @click="openPlayer(entry.item)">
-                      <img :src="resolveThumbnail(entry)" :alt="entry.item.title || 'Video thumbnail'" loading="lazy">
+                      <img :src="resolveThumbnail(entry)" :alt="entry.item.title || 'Video thumbnail'" loading="lazy"
+                        @error="onImgError">
                       <span v-if="getDurationLabel(entry.item)" class="queue-thumb__badge">
                         {{ getDurationLabel(entry.item) }}
                       </span>
@@ -688,18 +689,19 @@ const loadMoreHistory = async (): Promise<void> => {
   }
 }
 
-// Setup intersection observer for infinite scroll
-useIntersectionObserver(
-  loadMoreTrigger,
-  ([entry]) => {
-    if (entry?.isIntersecting && !paginationInfo.value.isLoading && paginationInfo.value.page < paginationInfo.value.total_pages) {
-      loadMoreHistory()
-    }
-  },
-  {
-    threshold: 0.5,
+const onImgError = (e: Event) => {
+  const target = e.target as HTMLImageElement
+  if (target.src.endsWith('/images/placeholder.png')) {
+    return
   }
-)
+  target.src = '/images/placeholder.png'
+}
+
+useIntersectionObserver(loadMoreTrigger, ([entry]) => {
+  if (entry?.isIntersecting && !paginationInfo.value.isLoading && paginationInfo.value.page < paginationInfo.value.total_pages) {
+    loadMoreHistory()
+  }
+}, { threshold: 0.5 })
 
 </script>