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

Improve video display by adding placeholder thumbnails for private videos

Browse Source 
Implement fallback thumbnail and use placeholder for private Bunny.net videos.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 50814a1e-92e4-4968-856f-7bc7eedf5e8f
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8cc42625-c1f5-4e43-99bd-77f2c4dedee2/50814a1e-92e4-4968-856f-7bc7eedf5e8f/ZNvb2O6
This commit is contained in:
sebastjanartic 2025-08-04 18:57:05 +00:00
parent 551aaee106
commit 1bffeab784
2 changed files with 8 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -61,6 +61,11 @@ export default function VideoCard({ video, onClick, onShare }: VideoCardProps) {
alt={video.title}
className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
data-testid={`img-thumbnail-${video.id}`}
onError={(e) => {
// Fallback to a default thumbnail if image fails to load
const target = e.target as HTMLImageElement;
target.src = `https://images.unsplash.com/photo-1611162617474-5b21e879e113?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&h=450`;
}}
/>
<div className="absolute inset-0 bg-black/20 group-hover:bg-black/40 transition-colors duration-300 flex items-center justify-center">

6
server/bunny.ts
View File

@ -52,9 +52,9 @@ export class BunnyService {
}
private bunnyVideoToVideo(bunnyVideo: BunnyVideo): Video {
// For private videos, we'll generate a video poster frame from the iframe
// This is the best approach for private Bunny.net videos
const thumbnailUrl = `https://iframe.mediadelivery.net/embed/${this.libraryId}/${bunnyVideo.guid}?poster=true`;
// For private videos, use placeholder thumbnails since thumbnails are not publicly accessible
// Generate a consistent placeholder based on video title/category
const thumbnailUrl = `https://picsum.photos/800/450?random=${bunnyVideo.guid.slice(0, 8)}`;
// For private videos, we'll use an iframe embed URL which handles authentication
// Enable controls, allow fullscreen, and ensure player functionality