From 67be8e7cc73619070654bce55ba81b196c815e1a Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Thu, 28 Aug 2025 11:46:56 +0000
Subject: [PATCH] Improve thumbnail loading reliability across the platform

Update video cards and video page to use a backup thumbnail URL from Bunny.net when the primary URL fails, enhancing robustness for video content display.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: d7424866-83d1-4486-a212-ac12b4c7becf
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8cc42625-c1f5-4e43-99bd-77f2c4dedee2/d7424866-83d1-4486-a212-ac12b4c7becf/d3pjSXi
---
 client/src/components/video-card.tsx | 14 +++++++++++---
 client/src/pages/VideoPage.tsx       | 12 +++++++++++-
 server/bunny.ts                      |  3 ++-
 3 files changed, 24 insertions(+), 5 deletions(-)

diff --git a/client/src/components/video-card.tsx b/client/src/components/video-card.tsx
index f8c59c8..ded2469 100644
--- a/client/src/components/video-card.tsx
+++ b/client/src/components/video-card.tsx
@@ -60,9 +60,17 @@ export default function VideoCard({ video, onClick }: VideoCardProps) {
           decoding="async"
           onError={(e) => {
             const target = e.target as HTMLImageElement;
-            target.style.display = 'none';
-            if (target.parentElement) {
-              target.parentElement.style.background = 'linear-gradient(45deg, #374151, #4b5563)';
+            // Try backup thumbnail URL
+            const backupUrl = `https://iframe.mediadelivery.net/embed/476412/${video.id}/thumbnail.jpg`;
+            if (!target.src.includes('iframe.mediadelivery.net')) {
+              target.src = backupUrl;
+            } else {
+              // If both fail, show placeholder
+              target.style.display = 'none';
+              if (target.parentElement) {
+                target.parentElement.style.background = 'linear-gradient(45deg, #374151, #4b5563)';
+                target.parentElement.innerHTML += '<div class="absolute inset-0 flex items-center justify-center text-white text-sm">Video</div>';
+              }
             }
           }}
         />
diff --git a/client/src/pages/VideoPage.tsx b/client/src/pages/VideoPage.tsx
index d42edd7..1779868 100644
--- a/client/src/pages/VideoPage.tsx
+++ b/client/src/pages/VideoPage.tsx
@@ -244,7 +244,17 @@ export default function VideoPage() {
                       className="w-full h-full object-cover"
                       onError={(e) => {
                         const target = e.target as HTMLImageElement;
-                        target.style.display = 'none';
+                        // Try backup thumbnail URL
+                        const backupUrl = `https://iframe.mediadelivery.net/embed/476412/${video.id}/thumbnail.jpg`;
+                        if (!target.src.includes('iframe.mediadelivery.net')) {
+                          target.src = backupUrl;
+                        } else {
+                          target.style.display = 'none';
+                          if (target.parentElement) {
+                            target.parentElement.style.background = 'linear-gradient(45deg, #374151, #4b5563)';
+                            target.parentElement.innerHTML += '<div class="absolute inset-0 flex items-center justify-center text-white text-xs">Video</div>';
+                          }
+                        }
                       }}
                     />
                     <div className="absolute bottom-1 right-1 bg-black/70 text-white text-xs px-1 py-0.5 rounded">
diff --git a/server/bunny.ts b/server/bunny.ts
index e1d91a5..20b92d6 100644
--- a/server/bunny.ts
+++ b/server/bunny.ts
@@ -52,8 +52,9 @@ export class BunnyService {
   }
 
   private bunnyVideoToVideo(bunnyVideo: BunnyVideo): Video {
-    // Generate thumbnail URL from CDN (thumbnails are usually public)
+    // Generate multiple thumbnail URL options
     const thumbnailUrl = `https://${this.hostname}/${bunnyVideo.guid}/thumbnail.jpg`;
+    const backupThumbnailUrl = `https://iframe.mediadelivery.net/embed/${this.libraryId}/${bunnyVideo.guid}/thumbnail.jpg`;
 
     // Generate signed HLS URL for private video access
     const hlsUrl = this.generateSignedUrl(bunnyVideo.guid);