sebastjan/videofolxtv
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve video thumbnail loading and display with fallback options

Browse Source 
Refactor thumbnail loading logic in VideoCard and VideoPage components to directly display a placeholder on error. Update BunnyService to prioritize custom thumbnail filenames from Bunny.net.

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/eJ5eRgX
This commit is contained in:
sebastjanartic
2025-08-28 11:49:18 +00:00
parent 67be8e7cc7
commit 886475de42
5 changed files with 24 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/pages/VideoPage.tsx
+9 -10
View File
@@ -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 += '<div class="absolute inset-0 flex items-center justify-center text-white text-xs">Video</div>';
}
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 = '<div>🎬</div>';
target.parentElement.appendChild(placeholder);
}
}}
/>