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);