diff --git a/attached_assets/image_1756381693052.png b/attached_assets/image_1756381693052.png new file mode 100644 index 0000000..27895e6 Binary files /dev/null and b/attached_assets/image_1756381693052.png differ diff --git a/attached_assets/image_1756381719563.png b/attached_assets/image_1756381719563.png new file mode 100644 index 0000000..b2d7457 Binary files /dev/null and b/attached_assets/image_1756381719563.png differ diff --git a/client/src/components/video-card.tsx b/client/src/components/video-card.tsx index ded2469..9df0b88 100644 --- a/client/src/components/video-card.tsx +++ b/client/src/components/video-card.tsx @@ -60,17 +60,16 @@ export default function VideoCard({ video, onClick }: VideoCardProps) { decoding="async" onError={(e) => { const target = e.target as HTMLImageElement; - // 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 += '
Video
'; - } + console.log('Thumbnail failed to load:', target.src); + + // Show placeholder immediately instead of trying multiple URLs + target.style.display = 'none'; + if (target.parentElement && !target.parentElement.querySelector('.thumbnail-placeholder')) { + target.parentElement.style.background = 'linear-gradient(135deg, #1f2937, #374151)'; + const placeholder = document.createElement('div'); + placeholder.className = 'thumbnail-placeholder absolute inset-0 flex flex-col items-center justify-center text-white'; + placeholder.innerHTML = '
🎬
Video
'; + target.parentElement.appendChild(placeholder); } }} /> diff --git a/client/src/pages/VideoPage.tsx b/client/src/pages/VideoPage.tsx index 1779868..1268678 100644 --- a/client/src/pages/VideoPage.tsx +++ b/client/src/pages/VideoPage.tsx @@ -244,16 +244,15 @@ export default function VideoPage() { className="w-full h-full object-cover" onError={(e) => { const target = e.target as HTMLImageElement; - // 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 += '
Video
'; - } + console.log('Sidebar thumbnail failed:', target.src); + + target.style.display = 'none'; + if (target.parentElement && !target.parentElement.querySelector('.thumbnail-placeholder')) { + target.parentElement.style.background = 'linear-gradient(135deg, #1f2937, #374151)'; + const placeholder = document.createElement('div'); + placeholder.className = 'thumbnail-placeholder absolute inset-0 flex items-center justify-center text-white text-xs'; + placeholder.innerHTML = '
🎬
'; + target.parentElement.appendChild(placeholder); } }} /> diff --git a/server/bunny.ts b/server/bunny.ts index 20b92d6..8ec3c97 100644 --- a/server/bunny.ts +++ b/server/bunny.ts @@ -52,9 +52,11 @@ export class BunnyService { } private bunnyVideoToVideo(bunnyVideo: BunnyVideo): Video { - // 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 thumbnail URL from Bunny CDN - try multiple formats + // Some videos may have custom thumbnails, others auto-generated + const thumbnailUrl = bunnyVideo.thumbnailFileName + ? `https://${this.hostname}/${bunnyVideo.guid}/${bunnyVideo.thumbnailFileName}` + : `https://${this.hostname}/${bunnyVideo.guid}/thumbnail.jpg`; // Generate signed HLS URL for private video access const hlsUrl = this.generateSignedUrl(bunnyVideo.guid);