fix: fall back to Bunny Storage for cover images

components/CourseCard.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { PlayCircle, Download, FileText, CheckCircle2 } from 'lucide-react';
 import { Course, SectionVariant } from '../types';
+import { CourseCoverImage } from './CourseCoverImage';
 
 interface CourseCardProps {
   course: Course;
@@ -37,8 +38,8 @@ export const CourseCard: React.FC<CourseCardProps> = ({
         onClick={() => onClick?.(course)}
         className={`relative ${aspectRatioClass} w-full overflow-hidden rounded-[8px] bg-zinc-900 shadow-xl transition-all duration-300 ease-out group-hover:scale-[1.02] group-hover:shadow-2xl group-hover:shadow-orange-500/10 group-hover:z-10 ring-0 ring-white/0 group-hover:ring-2 group-hover:ring-orange-500/40`}
       >
-        <img
+        <CourseCoverImage
-          src={course.thumbnail}
+          source={course.thumbnail}
           alt={course.title}
           loading="lazy"
           draggable={false}

components/CourseCoverImage.tsx

@@ -0,0 +1,39 @@
+import React, { useEffect, useMemo, useState } from 'react';
+
+type CourseCoverImageProps = Omit<React.ImgHTMLAttributes<HTMLImageElement>, 'src' | 'onError'> & {
+  source: string;
+  onFinalError?: () => void;
+};
+
+const fallbackCoverUrl = (source: string) => {
+  try {
+    const parsed = new URL(source, window.location.origin);
+    const filename = parsed.pathname.split('/').pop() || '';
+    if (!/^[0-9a-f]{8}-[0-9a-f-]{27}\.(?:jpg|png|webp)$/i.test(filename)) return null;
+    const apiBase = import.meta.env.VITE_API_URL || '/api/v1';
+    return `${apiBase}/courses/covers/${filename}`;
+  } catch {
+    return null;
+  }
+};
+
+export const CourseCoverImage: React.FC<CourseCoverImageProps> = ({ source, onFinalError, ...props }) => {
+  const fallbackUrl = useMemo(() => fallbackCoverUrl(source), [source]);
+  const [usingFallback, setUsingFallback] = useState(false);
+
+  useEffect(() => setUsingFallback(false), [source]);
+
+  return (
+    <img
+      {...props}
+      src={usingFallback && fallbackUrl ? fallbackUrl : source}
+      onError={() => {
+        if (!usingFallback && fallbackUrl) {
+          setUsingFallback(true);
+          return;
+        }
+        onFinalError?.();
+      }}
+    />
+  );
+};

components/Hero.tsx

@@ -2,6 +2,7 @@ import React, { useEffect, useState } from 'react';
 import { Play, Plus, Sparkles } from 'lucide-react';
 import { Course } from '../types';
 import { getCourses } from '../services/db';
+import { CourseCoverImage } from './CourseCoverImage';
 
 interface HeroProps {
   onPlay?: (course: Course) => void;
@@ -20,8 +21,8 @@ export const Hero: React.FC<HeroProps> = ({ onPlay }) => {
     <div className="relative w-full min-h-[75vh] lg:min-h-[82vh] max-h-[800px] h-auto overflow-hidden group flex flex-col justify-end pt-28 pb-12 sm:pb-16 px-6 md:px-12">
       {/* Background Image with Cinematic Gradient Overlay */}
       <div className="absolute inset-0 transition-transform duration-[20s] ease-in-out group-hover:scale-105">
-        <img 
+        <CourseCoverImage
-          src={featuredCourse.thumbnail}
+          source={featuredCourse.thumbnail}
           alt={featuredCourse.title}
           className="w-full h-full object-cover object-center"
           style={{

components/SearchModal.tsx

@@ -2,6 +2,7 @@ import React, { useState, useEffect, useRef } from 'react';
 import { Search, X, Loader2, PlayCircle, Download } from 'lucide-react';
 import { Course } from '../types';
 import { getCourses } from '../services/db';
+import { CourseCoverImage } from './CourseCoverImage';
 
 interface SearchModalProps {
   isOpen: boolean;
@@ -132,8 +133,8 @@ export const SearchModal: React.FC<SearchModalProps> = ({ isOpen, onClose, onPla
                           className="cursor-pointer group bg-zinc-900/60 rounded-[8px] p-3 border border-white/5 hover:border-orange-500/40 transition-all duration-300 shadow-xl"
                         >
                           <div className="aspect-video bg-gray-900 rounded-[8px] overflow-hidden mb-3 relative">
-                            <img 
+                            <CourseCoverImage
-                              src={course.thumbnail} 
+                              source={course.thumbnail}
                               alt={course.title} 
                               className="w-full h-full object-cover opacity-80 group-hover:opacity-100 group-hover:scale-105 transition-all duration-300 rounded-[8px]" 
                               style={{

pages/ManageCourses.tsx

@@ -38,6 +38,7 @@ import { Course, Comment, Attachment, Lesson, AttachmentType, LessonMedia } from
 import { useToast } from '../context/ToastContext';
 import { getManagedCourses, saveCourse, deleteCourse, duplicateCourse, getComments, replyToComment, moderateComment } from '../services/db';
 import { getAttachmentIcon, getAttachmentBadge } from '../components/MaterialCard';
+import { CourseCoverImage } from '../components/CourseCoverImage';
 import { BunnyVideo, courseApi, instructorApi, InstructorAnalytics } from '../services/api';
 
 const formatVideoDuration = (seconds: number | null | undefined) => {
@@ -514,10 +515,10 @@ const CourseModal: React.FC<{
                       <p className="mt-1 text-xs text-gray-400">Tente enviá-la novamente. Se o problema continuar, verifique a configuração de entrega de imagens.</p>
                     </div>
                   ) : (
-                    <img
+                    <CourseCoverImage
-                      src={thumbnailPreview}
+                      source={thumbnailPreview}
                       alt="Prévia da imagem de capa"
-                      onError={() => setCoverPreviewError(true)}
+                      onFinalError={() => setCoverPreviewError(true)}
                       className="h-full w-full object-cover opacity-80 transition-transform duration-200"
                       style={{
                         transform: `scale(${coverImageZoom})`,
@@ -1078,8 +1079,8 @@ export const ManageCourses: React.FC = () => {
                 <div>
                   {/* Thumbnail */}
                   <div className="aspect-video relative overflow-hidden bg-black rounded-t-[8px]">
-                    <img 
+                    <CourseCoverImage
-                      src={course.thumbnail} 
+                      source={course.thumbnail}
                       alt={course.title} 
                       className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" 
                       style={{

pages/MyLearning.tsx

@@ -2,6 +2,7 @@ import React, { useEffect, useState } from 'react';
 import { BookOpenCheck, Loader2, PlayCircle } from 'lucide-react';
 import { Course } from '../types';
 import { getMyLearningCourses } from '../services/db';
+import { CourseCoverImage } from '../components/CourseCoverImage';
 
 export const MyLearning: React.FC<{ onPlay: (course: Course) => void }> = ({ onPlay }) => {
   const [courses, setCourses] = useState<Course[]>([]);
@@ -28,7 +29,7 @@ export const MyLearning: React.FC<{ onPlay: (course: Course) => void }> = ({ onP
         <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-5">
           {courses.map((course) => (
             <button key={course.id} onClick={() => onPlay(course)} className="group overflow-hidden rounded-2xl border border-white/10 bg-zinc-950/80 text-left hover:border-orange-500/50 transition-colors">
-              <div className="aspect-video relative overflow-hidden bg-zinc-900"><img src={course.thumbnail} alt="" className="h-full w-full object-cover opacity-75 transition-opacity group-hover:opacity-100" style={{ transform: `scale(${course.coverImageZoom || 1})`, objectPosition: `${course.coverImagePositionX ?? 50}% ${course.coverImagePositionY ?? 50}%` }} /><div className="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent" /><span className="absolute left-4 bottom-4 inline-flex items-center gap-2 rounded-full bg-orange-500 px-3 py-2 text-xs font-bold text-white"><PlayCircle className="w-4 h-4" /> Continuar</span></div>
+              <div className="aspect-video relative overflow-hidden bg-zinc-900"><CourseCoverImage source={course.thumbnail} alt="" className="h-full w-full object-cover opacity-75 transition-opacity group-hover:opacity-100" style={{ transform: `scale(${course.coverImageZoom || 1})`, objectPosition: `${course.coverImagePositionX ?? 50}% ${course.coverImagePositionY ?? 50}%` }} /><div className="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent" /><span className="absolute left-4 bottom-4 inline-flex items-center gap-2 rounded-full bg-orange-500 px-3 py-2 text-xs font-bold text-white"><PlayCircle className="w-4 h-4" /> Continuar</span></div>
               <div className="p-5"><p className="text-xs text-orange-400 font-semibold uppercase tracking-wider">{course.category}</p><h2 className="mt-2 font-bold text-white">{course.title}</h2><div className="mt-4 h-1.5 overflow-hidden rounded-full bg-white/10"><div className="h-full rounded-full bg-orange-500" style={{ width: `${course.progress || 0}%` }} /></div><p className="mt-2 text-xs text-gray-400">{course.progress || 0}% concluído</p></div>
             </button>
           ))}

server/src/providers/bunny-storage.ts

@@ -52,3 +52,18 @@ export async function uploadBunnyCover(image: CoverImage) {
   }
   return { key, coverImageUrl: `${cdnHost}/${key}` };
 }
+
+export async function downloadBunnyCover(filename: string) {
+  const { zone, password, endpoint } = bunnyStorageConfiguration();
+  const response = await fetch(`${endpoint}/${encodeURIComponent(zone)}/covers/${encodeURIComponent(filename)}`, {
+    headers: { AccessKey: password },
+  });
+  if (!response.ok) {
+    const detail = await response.text().catch(() => '');
+    throw new BunnyStorageRequestError(`Bunny Storage download failed (${response.status})${detail ? `: ${detail.slice(0, 250)}` : ''}`);
+  }
+  return {
+    body: Buffer.from(await response.arrayBuffer()),
+    contentType: response.headers.get('content-type') || 'application/octet-stream',
+  };
+}

server/src/routes/courses.ts

@@ -2,6 +2,7 @@ import type { FastifyPluginAsync } from 'fastify';
 import { z } from 'zod';
 import { pool } from '../db/pool.js';
 import { signedBunnyEmbedUrl, BunnyConfigurationError } from '../providers/bunny.js';
+import { BunnyStorageConfigurationError, BunnyStorageRequestError, downloadBunnyCover } from '../providers/bunny-storage.js';
 
 const paramsSchema = z.object({
   courseId: z.string().uuid(),
@@ -10,6 +11,9 @@ const playbackParamsSchema = z.object({
   courseId: z.string().uuid(),
   lessonId: z.string().uuid(),
 });
+const coverParamsSchema = z.object({
+  filename: z.string().regex(/^[0-9a-f]{8}-[0-9a-f-]{27}\.(?:jpg|png|webp)$/i),
+});
 
 export const courseSelect = (publicOnly = false, includeUnreadyMedia = false) => `
   select
@@ -110,6 +114,21 @@ export const courseRoutes: FastifyPluginAsync = async (app) => {
     return { data: result.rows.map((row) => row.name) };
   });
 
+  app.get('/covers/:filename', async (request, reply) => {
+    const { filename } = coverParamsSchema.parse(request.params);
+    try {
+      const cover = await downloadBunnyCover(filename);
+      reply.header('Content-Type', cover.contentType);
+      reply.header('Cache-Control', 'public, max-age=86400, stale-while-revalidate=604800');
+      return reply.send(cover.body);
+    } catch (error) {
+      if (error instanceof BunnyStorageConfigurationError || error instanceof BunnyStorageRequestError) {
+        return reply.code(404).send({ error: 'Cover image was not found' });
+      }
+      throw error;
+    }
+  });
+
   app.get('/', async (request) => {
     const authenticated = await hasSession(request);
     const result = await pool.query(