Improve video display by adding placeholder thumbnails for private videos

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
2025-08-04 18:57:05 +00:00
parent 551aaee106
commit 1bffeab784
2 changed files with 8 additions and 3 deletions
@@ -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">