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

Improve thumbnail loading reliability across the platform

Browse Source 
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
This commit is contained in:
sebastjanartic 2025-08-28 11:46:56 +00:00
parent 07c389ffd8
commit 67be8e7cc7
3 changed files with 24 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
client/src/components/video-card.tsx
View File

@ -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>';
}
}
}}
/>

12
client/src/pages/VideoPage.tsx
View File

@ -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">

3
server/bunny.ts
View File

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