fix: fall back to Bunny Storage for cover images

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
-                      src={thumbnailPreview}
+                    <CourseCoverImage
+                      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 
-                      src={course.thumbnail} 
+                    <CourseCoverImage
+                      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>
           ))}