@hed-hog/lms 0.0.364 → 0.0.366

package/hedhog/frontend/app/courses/[id]/structure/_components/editor-lesson.tsx.ejs

@@ -8,7 +8,6 @@ import {
   ChevronUp,
   CircleDot,
   CircleOff,
-  ClipboardList,
   Clock,
   Download,
   ExternalLink,
@@ -41,7 +40,6 @@ import { z } from 'zod';
 
 import { CopyButton } from '@/components/copy-button';
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
-import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import {
@@ -65,7 +63,6 @@ import { Label } from '@/components/ui/label';
 import { Progress } from '@/components/ui/progress';
 import { ResizableSheetContent } from '@/components/ui/resizable-sheet-content';
 import { ScrollArea } from '@/components/ui/scroll-area';
-import { Skeleton } from '@/components/ui/skeleton';
 import {
   Select,
   SelectContent,
@@ -80,6 +77,7 @@ import {
   SheetHeader,
   SheetTitle,
 } from '@/components/ui/sheet';
+import { Skeleton } from '@/components/ui/skeleton';
 import { Switch } from '@/components/ui/switch';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import { Textarea } from '@/components/ui/textarea';
@@ -115,11 +113,14 @@ import {
   getQueueJob,
   updateLessonFrame,
   uploadFile,
+  type ApiQuestion,
   type QueueJobResponse,
   type QueueJobStatus,
 } from '../_data/services/course-structure.service';
 import {
+  useCreateQuestionMutation,
   useDeleteLessonMutation,
+  useQuestionsQuery,
   useUpdateLessonMutation,
   useUpdateResourceTypeMutation,
 } from '../_data/use-course-structure-mutations';
@@ -187,10 +188,6 @@ function getInstructorAvatarUrl(avatarId?: number | null): string | undefined {
     : `/person/avatar/${avatarId}`;
 }
 
-function videoProfileResourceType(profileId: number): string {
-  return `video_profile:${profileId}`;
-}
-
 const MAX_VIDEO_UPLOAD_SIZE_BYTES = 100 * 1024 * 1024;
 
 type LessonTypeLabelKey = `types.${LessonType}`;
@@ -205,7 +202,8 @@ type VideoJobEventMessageKey = `lessonForm.videoJobEvents.${VideoJobEventType}`;
 type VideoJobProgressPhase =
   | 'download_original'
   | 'probe_duration'
-  | 'convert_profile'
+  | 'hls_encode'
+  | 'hls_upload'
   | 'extract_frames'
   | 'extract_frames_done'
   | 'extract_audio'
@@ -317,7 +315,8 @@ const VIDEO_JOB_STATUS_COLORS: Record<QueueJobStatus, string> = {
 const VIDEO_JOB_PROGRESS_PHASES = new Set<VideoJobProgressPhase>([
   'download_original',
   'probe_duration',
-  'convert_profile',
+  'hls_encode',
+  'hls_upload',
   'extract_frames',
   'extract_frames_done',
   'extract_audio',
@@ -410,19 +409,6 @@ function getVideoJobProgressMessage(
   const phase = getVideoJobProgressPhase(event);
   const metadata = event.metadata ?? {};
 
-  if (phase === 'convert_profile') {
-    const profileName =
-      typeof metadata.profileName === 'string' && metadata.profileName.trim()
-        ? metadata.profileName.trim()
-        : typeof metadata.profileId === 'number'
-          ? `#${metadata.profileId}`
-          : '—';
-
-    return t('lessonForm.videoJobProgress.convert_profile', {
-      profileName,
-    });
-  }
-
   if (phase === 'extract_frames_done') {
     const count =
       typeof metadata.frames === 'number' && Number.isFinite(metadata.frames)
@@ -504,12 +490,6 @@ const TYPE_CONFIG: Record<
     bg: 'bg-amber-500/10',
     labelKey: 'types.questao',
   },
-  exercicio: {
-    icon: ClipboardList,
-    color: 'text-purple-500',
-    bg: 'bg-purple-500/10',
-    labelKey: 'types.exercicio',
-  },
 };
 
 const STATUS_COLORS: Record<LessonStatus, string> = {
@@ -553,39 +533,15 @@ function generateAltId(): string {
   return Math.random().toString(36).slice(2, 9);
 }
 
-const MOCK_QUESTIONS: MockQuestion[] = [
-  {
-    id: 'q1',
-    title: 'O que é React?',
-    type: 'multiple_choice',
-    points: 1,
-    alternatives: [
-      {
-        id: 'a1',
-        texto: 'Uma biblioteca JavaScript para interfaces',
-        correta: true,
-      },
-      { id: 'a2', texto: 'Um framework CSS', correta: false },
-      { id: 'a3', texto: 'Um banco de dados', correta: false },
-    ],
-  },
-  {
-    id: 'q2',
-    title: 'Defina componente funcional',
-    type: 'essay',
-    points: 2,
-  },
-  {
-    id: 'q3',
-    title: 'TypeScript é um superset de JavaScript?',
-    type: 'true_false',
-    points: 1,
-    alternatives: [
-      { id: 'true', texto: 'Verdadeiro', correta: true },
-      { id: 'false', texto: 'Falso', correta: false },
-    ],
-  },
-];
+function apiQuestionToMock(q: ApiQuestion): MockQuestion {
+  return {
+    id: String(q.id),
+    title: q.statement.replace(/<[^>]+>/g, '').slice(0, 80),
+    type: (q.questionType as QuestionType) ?? 'multiple_choice',
+    statement: q.statement,
+    points: q.points,
+  };
+}
 
 type FormValues = {
   code: string;
@@ -600,7 +556,7 @@ type FormValues = {
   videoUrl?: string;
   transcription?: string;
   postContent?: string;
-  questionId?: string | null;
+  linkedExam?: string | null;
 };
 
 type EditableTranscriptionSegment = {
@@ -792,17 +748,23 @@ function SortableAlternativa({
 
 // ── Component ─────────────────────────────────────────────────────────────────
 
+const LESSON_TABS: LessonEditorTab[] = [
+  'dados',
+  'conteudo',
+  'videos',
+  'imagens',
+  'transcricao',
+  'audios',
+  'recursos',
+  'xp',
+];
+
 interface EditorLessonProps {
   lessonId: string;
+  defaultTab?: string;
+  onTabChange?: (tab: string) => void;
 }
 
-type VideoProfileOption = {
-  id: number;
-  name: string;
-  ffmpeg_params: string;
-  status: string;
-};
-
 type FramePreviewSource = {
   key: string;
   label: string;
@@ -819,7 +781,7 @@ type FrameAssetMetadata = {
   sizeLabel: string;
 };
 
-export function EditorLesson({ lessonId }: EditorLessonProps) {
+export function EditorLesson({ lessonId, defaultTab, onTabChange }: EditorLessonProps) {
   const t = useTranslations('lms.CoursesPage.StructurePage');
   const tabAudiosLabel = (() => {
     try {
@@ -881,11 +843,10 @@ export function EditorLesson({ lessonId }: EditorLessonProps) {
     fill_blank: t('questionEditor.types.fillBlank'),
     matching: t('questionEditor.types.matching'),
   };
-  const isVideoConversionEnabled = lmsSettings.videoConversionEnabled;
   const schema = z.object({
     code: z.string().min(1, t('questionEditor.validation.codeRequired')),
     title: z.string().min(1, t('questionEditor.validation.titleRequired')),
-    type: z.enum(['video', 'post', 'questao', 'exercicio'] as const),
+    type: z.enum(['video', 'post', 'questao'] as const),
     duration: z.coerce.number().min(0),
     status: z.enum([
       'preparada',
@@ -903,7 +864,7 @@ export function EditorLesson({ lessonId }: EditorLessonProps) {
     videoUrl: z.string().optional(),
     transcription: z.string().optional(),
     postContent: z.string().optional(),
-    questionId: z.string().nullable().optional(),
+    linkedExam: z.string().nullable().optional(),
   });
 
   const instructorPool =
@@ -927,7 +888,7 @@ export function EditorLesson({ lessonId }: EditorLessonProps) {
     videoUrl: lesson?.videoUrl ?? '',
     transcription: lesson?.transcription ?? '',
     postContent: lesson?.postContent ?? '',
-    questionId: null,
+    linkedExam: lesson?.linkedExam ?? null,
   });
 
   const form = useForm<FormValues>({
@@ -938,6 +899,10 @@ export function EditorLesson({ lessonId }: EditorLessonProps) {
   const { isDirty } = form.formState;
   const watchedType = useWatch({ control: form.control, name: 'type' });
   const watchedStatus = useWatch({ control: form.control, name: 'status' });
+  const watchedPublished = useWatch({
+    control: form.control,
+    name: 'published',
+  });
   const watchedVideoProvider = useWatch({
     control: form.control,
     name: 'videoProvider',
@@ -953,7 +918,11 @@ export function EditorLesson({ lessonId }: EditorLessonProps) {
     () => lesson?.resources ?? []
   );
   const [jobTimerNowMs, setJobTimerNowMs] = useState<number>(() => Date.now());
-  const [activeTab, setActiveTab] = useState<LessonEditorTab>('dados');
+  const [activeTab, setActiveTab] = useState<LessonEditorTab>(() =>
+    defaultTab && LESSON_TABS.includes(defaultTab as LessonEditorTab)
+      ? (defaultTab as LessonEditorTab)
+      : 'dados'
+  );
   const [isJobFeedbackCollapsed, setIsJobFeedbackCollapsed] = useState<boolean>(
     () => readVideoJobFeedbackCollapsedPreference()
   );
@@ -973,9 +942,6 @@ export function EditorLesson({ lessonId }: EditorLessonProps) {
   >(null);
   const [isRequeueingOriginalVideo, setIsRequeueingOriginalVideo] =
     useState(false);
-  const [profileUploadProgress, setProfileUploadProgress] = useState<
-    Record<number, number>
-  >({});
   const [isResolvingVideoPreview, setIsResolvingVideoPreview] = useState(false);
   const [videoPreviewOpen, setVideoPreviewOpen] = useState(false);
   const [videoPreviewResource, setVideoPreviewResource] =
@@ -1113,24 +1079,6 @@ export function EditorLesson({ lessonId }: EditorLessonProps) {
     isLoading: isLoadingTranscription,
   } = useTranscriptionSegmentsQuery(lesson?.id ?? null);
 
-  const {
-    data: courseVideoProfiles = [],
-    isFetching: isFetchingCourseVideoProfiles,
-    isError: hasCourseVideoProfilesError,
-    refetch: refetchCourseVideoProfiles,
-  } = useQuery<VideoProfileOption[]>({
-    queryKey: ['lms-course-video-resolution-profiles', courseId],
-    queryFn: async () => {
-      const response = await request<VideoProfileOption[]>({
-        url: `/lms/courses/${courseId}/video-resolution-profiles`,
-        method: 'GET',
-      });
-      return response.data ?? [];
-    },
-    enabled: Boolean(courseId),
-    initialData: [],
-  });
-
   const {
     data: conversionJob,
     isFetching: isFetchingConversionJob,
@@ -1180,13 +1128,19 @@ export function EditorLesson({ lessonId }: EditorLessonProps) {
   );
 
   // ── Question sheet state ────────────────────────────────────────────────────
+  const { data: questionsData, isLoading: questionsLoading } = useQuestionsQuery();
+  const createQuestionMutation = useCreateQuestionMutation();
   const [questionSheetOpen, setQuestionSheetOpen] = useState(false);
   const [editingQuestion, setEditingQuestion] = useState<MockQuestion | null>(
     null
   );
-  const [selectedQuestion, setSelectedQuestion] = useState<MockQuestion | null>(
-    null
-  );
+  const [selectedQuestion, setSelectedQuestion] = useState<MockQuestion | null>(null);
+
+  useEffect(() => {
+    if (!lesson?.linkedExam || !questionsData) return;
+    const found = questionsData.data.find((q) => String(q.id) === lesson.linkedExam);
+    if (found) setSelectedQuestion(apiQuestionToMock(found));
+  }, [lesson?.linkedExam, questionsData]);
   const [qSheetStatement, setQSheetStatement] = useState('');
   const [qSheetType, setQSheetType] = useState<QuestionType>('multiple_choice');
   const [qSheetPoints, setQSheetPoints] = useState(1);
@@ -1479,11 +1433,6 @@ export function EditorLesson({ lessonId }: EditorLessonProps) {
         String(originalVideoResource.fileId ?? originalVideoResource.id)
       )
     : false;
-  const profileVideoResources = new Map(
-    localResources
-      .filter((res) => res.type.startsWith('video_profile:'))
-      .map((res) => [Number(res.type.replace('video_profile:', '')), res])
-  );
   const audioResources = localResources.filter(
     (res) => res.type === 'lesson_audio'
   );
@@ -1585,7 +1534,6 @@ export function EditorLesson({ lessonId }: EditorLessonProps) {
       persistedVideoProvider !== 'file_storage');
   const canRequeueSavedOriginalVideo =
     Boolean(originalVideoResource?.fileId) && !isOriginalVideoUploadBlocked;
-  const isProfileVideoUploadBlocked = isConversionJobActive;
   const currentQueueJobId =
     focusedPipelineJob?.id ?? transcriptionJobId ?? conversionJobId;
   const isTranscriptionJobActive = transcriptionJob
@@ -1626,18 +1574,6 @@ export function EditorLesson({ lessonId }: EditorLessonProps) {
           },
         ]
       : []),
-    ...courseVideoProfiles.flatMap((profile) => {
-      const resource = profileVideoResources.get(profile.id);
-      if (!resource) return [];
-
-      return [
-        {
-          key: `profile:${profile.id}`,
-          label: profile.name,
-          resource,
-        },
-      ];
-    }),
   ];
   const activeFramePreviewSource =
     framePreviewSources.find(
@@ -2396,63 +2332,7 @@ export function EditorLesson({ lessonId }: EditorLessonProps) {
     return frameAssetMetadataById[frame.id]?.sizeLabel ?? '—';
   }
 
-  async function handleVideoProfileFile(profileId: number, file: File) {
-    if (file.size > MAX_VIDEO_UPLOAD_SIZE_BYTES) {
-      const message = t('lessonForm.videoUploadMaxSizeError', {
-        size: '100MB',
-      });
-      setVideoUploadError(message);
-      toast.error(message);
-      return;
-    }
-
-    setVideoUploadError(null);
-    setProfileUploadProgress((prev) => ({ ...prev, [profileId]: 0 }));
-    try {
-      const uploaded = await uploadFile(request, file, 'lms/lessons/videos', {
-        onUploadProgress: (event) => {
-          const total = event.total ?? 0;
-          const progress =
-            total > 0 ? Math.round((event.loaded / total) * 100) : 0;
-          setProfileUploadProgress((prev) => ({
-            ...prev,
-            [profileId]: progress,
-          }));
-        },
-      });
-      const type = videoProfileResourceType(profileId);
-      const resource: Resource = {
-        id: `new-${uploaded.id}`,
-        fileId: uploaded.id,
-        name: file.name,
-        size: formatFileSize(file.size),
-        type,
-        public: false,
-        uploadedAt: new Date().toISOString(),
-        url: undefined,
-      };
-      setLocalResources((prev) => [
-        ...prev.filter((item) => item.type !== type),
-        resource,
-      ]);
-      setResourcesDirty(true);
-    } catch {
-      toast.error(t('questionEditor.videoUploadFailed', { count: 1 }));
-    } finally {
-      setProfileUploadProgress((prev) => {
-        const next = { ...prev };
-        delete next[profileId];
-        return next;
-      });
-    }
-  }
-
   async function handleOriginalVideoFile(file: File) {
-    if (!isVideoConversionEnabled) {
-      toast.error(t('lessonForm.videoConversionFailed'));
-      return;
-    }
-
     if (
       watchedVideoProvider === 'file_storage' &&
       persistedVideoProvider !== 'file_storage'
@@ -2579,6 +2459,7 @@ export function EditorLesson({ lessonId }: EditorLessonProps) {
           videoConversionJobId: conversionJobId ?? lesson?.videoConversionJobId,
           resources: localResources,
           instructorIds: selectedInstructorIds.map(Number),
+          linkedExam: values.linkedExam ?? undefined,
         },
       },
       {
@@ -2696,28 +2577,43 @@ export function EditorLesson({ lessonId }: EditorLessonProps) {
       setQSheetErrors(errors);
       return;
     }
-    const saved: MockQuestion = {
-      id: editingQuestion?.id ?? `q-${Date.now()}`,
-      title: qSheetStatement.replace(/<[^>]+>/g, '').slice(0, 80),
-      type: qSheetType,
+
+    const dto = {
       statement: qSheetStatement,
+      questionType: qSheetType,
       points: qSheetPoints,
       alternatives:
         qSheetType === 'multiple_choice' || qSheetType === 'true_false'
-          ? qSheetAlts
+          ? qSheetAlts.map((a) => ({ text: a.texto, isCorrect: a.correta }))
           : undefined,
       fillBlankAnswers:
-        qSheetType === 'fill_blank' ? qSheetFillBlanks : undefined,
-      matchingPairs: qSheetType === 'matching' ? qSheetPairs : undefined,
+        qSheetType === 'fill_blank'
+          ? qSheetFillBlanks.map((f) => ({
+              answer: f.answer,
+              alternatives: f.alternativesText
+                ? f.alternativesText.split(',').map((s) => s.trim()).filter(Boolean)
+                : undefined,
+            }))
+          : undefined,
+      matchingPairs:
+        qSheetType === 'matching'
+          ? qSheetPairs.map((p) => ({ id: p.id, leftText: p.leftText, rightText: p.rightText }))
+          : undefined,
     };
-    setSelectedQuestion(saved);
-    form.setValue('questionId', saved.id, { shouldDirty: true });
-    setQuestionSheetOpen(false);
-    toast.success(
-      editingQuestion
-        ? t('questionEditor.updated')
-        : t('questionEditor.created')
-    );
+
+    createQuestionMutation.mutate(dto, {
+      onSuccess: (result) => {
+        const mock = apiQuestionToMock(result);
+        setSelectedQuestion(mock);
+        form.setValue('linkedExam', String(result.id), { shouldDirty: true });
+        setQuestionSheetOpen(false);
+        toast.success(
+          editingQuestion
+            ? t('questionEditor.updated')
+            : t('questionEditor.created')
+        );
+      },
+    });
   }
 
   function handleDelete() {
@@ -2807,7 +2703,10 @@ export function EditorLesson({ lessonId }: EditorLessonProps) {
         {/* ── Tabs ─────────────────────────────────────────────────────────── */}
         <Tabs
           value={activeTab}
-          onValueChange={(value) => setActiveTab(value as LessonEditorTab)}
+          onValueChange={(value) => {
+            setActiveTab(value as LessonEditorTab);
+            onTabChange?.(value);
+          }}
           className="flex flex-col flex-1 min-h-0 min-w-0"
         >
           <TabsList className="mt-0 h-auto w-full justify-start shrink-0 rounded-none border-b bg-muted/50 px-2 py-1 overflow-x-auto overflow-y-hidden whitespace-nowrap sm:px-3">
@@ -2990,48 +2889,57 @@ export function EditorLesson({ lessonId }: EditorLessonProps) {
                     </CardTitle>
                   </CardHeader>
                   <CardContent className="px-3 pb-2 flex flex-col gap-3">
-                    <div className="grid grid-cols-1 gap-2 sm:grid-cols-2">
-                      <FormField
-                        control={form.control}
-                        name="status"
-                        render={({ field }) => (
-                          <FormItem>
-                            <FormLabel className="text-xs">
-                              {t('questionEditor.productionStatus')}
-                            </FormLabel>
-                            <Select
-                              value={field.value}
-                              onValueChange={field.onChange}
-                            >
-                              <FormControl>
-                                <SelectTrigger className="h-8 text-xs w-full">
-                                  <SelectValue />
-                                </SelectTrigger>
-                              </FormControl>
-                              <SelectContent>
-                                {(
-                                  Object.entries(statusLabels) as [
-                                    LessonStatus,
-                                    string,
-                                  ][]
-                                ).map(([val, lbl]) => (
-                                  <SelectItem key={val} value={val}>
-                                    <span
-                                      className={cn(
-                                        'text-xs px-1.5 py-0.5 rounded',
-                                        STATUS_COLORS[val]
-                                      )}
-                                    >
-                                      {lbl}
-                                    </span>
-                                  </SelectItem>
-                                ))}
-                              </SelectContent>
-                            </Select>
-                            <FormMessage className="text-xs" />
-                          </FormItem>
-                        )}
-                      />
+                    <div
+                      className={cn(
+                        'grid grid-cols-1 gap-2',
+                        watchedType === 'video' && !watchedPublished
+                          ? 'sm:grid-cols-2'
+                          : 'sm:grid-cols-1'
+                      )}
+                    >
+                      {watchedType === 'video' && !watchedPublished && (
+                        <FormField
+                          control={form.control}
+                          name="status"
+                          render={({ field }) => (
+                            <FormItem>
+                              <FormLabel className="text-xs">
+                                {t('questionEditor.productionStatus')}
+                              </FormLabel>
+                              <Select
+                                value={field.value}
+                                onValueChange={field.onChange}
+                              >
+                                <FormControl>
+                                  <SelectTrigger className="h-8 text-xs w-full">
+                                    <SelectValue />
+                                  </SelectTrigger>
+                                </FormControl>
+                                <SelectContent>
+                                  {(
+                                    Object.entries(statusLabels) as [
+                                      LessonStatus,
+                                      string,
+                                    ][]
+                                  ).map(([val, lbl]) => (
+                                    <SelectItem key={val} value={val}>
+                                      <span
+                                        className={cn(
+                                          'text-xs px-1.5 py-0.5 rounded',
+                                          STATUS_COLORS[val]
+                                        )}
+                                      >
+                                        {lbl}
+                                      </span>
+                                    </SelectItem>
+                                  ))}
+                                </SelectContent>
+                              </Select>
+                              <FormMessage className="text-xs" />
+                            </FormItem>
+                          )}
+                        />
+                      )}
 
                       <FormField
                         control={form.control}
@@ -3311,20 +3219,25 @@ export function EditorLesson({ lessonId }: EditorLessonProps) {
                     <CardContent className="px-3 pb-2 flex flex-col gap-2">
                       <FormField
                         control={form.control}
-                        name="questionId"
+                        name="linkedExam"
                         render={({ field }) => (
                           <FormItem>
                             <FormControl>
-                              <EntityPicker<MockQuestion>
+                              <EntityPicker<ApiQuestion>
                                 value={field.value ?? null}
                                 onChange={(val) => {
                                   field.onChange(val);
                                   const found =
-                                    MOCK_QUESTIONS.find((q) => q.id === val) ??
-                                    null;
-                                  setSelectedQuestion(found);
+                                    (questionsData?.data ?? []).find(
+                                      (q) => String(q.id) === val
+                                    ) ?? null;
+                                  setSelectedQuestion(found ? apiQuestionToMock(found) : null);
                                 }}
-                                placeholder={t('questionEditor.selectQuestion')}
+                                placeholder={
+                                  questionsLoading
+                                    ? t('questionEditor.loadingQuestions')
+                                    : t('questionEditor.selectQuestion')
+                                }
                                 searchPlaceholder={t(
                                   'questionEditor.searchQuestion'
                                 )}
@@ -3332,11 +3245,14 @@ export function EditorLesson({ lessonId }: EditorLessonProps) {
                                   'questionEditor.noQuestionsFound'
                                 )}
                                 entityLabel={t('questionEditor.questionEntity')}
-                                options={MOCK_QUESTIONS}
-                                getOptionValue={(o) => o.id}
-                                getOptionLabel={(o) => o.title}
+                                options={questionsData?.data ?? []}
+                                getOptionValue={(o) => String(o.id)}
+                                getOptionLabel={(o) =>
+                                  o.statement.replace(/<[^>]+>/g, '').slice(0, 80)
+                                }
                                 getOptionDescription={(o) =>
-                                  questionTypeLabels[o.type]
+                                  questionTypeLabels[o.questionType as QuestionType] ??
+                                  o.questionType
                                 }
                               />
                             </FormControl>
@@ -3461,181 +3377,140 @@ export function EditorLesson({ lessonId }: EditorLessonProps) {
                         </p>
                       ) : null}
 
-                      {isVideoConversionEnabled ? (
-                        <Card className="bg-muted/20 py-2 gap-2 order-3">
-                          <CardHeader className="px-3 pt-2 pb-1">
-                            <CardTitle className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
-                              {t('lessonForm.originalVideoTitle')}
-                            </CardTitle>
-                          </CardHeader>
-                          <CardContent className="px-3 pb-2 flex flex-col gap-3">
-                            <div className="rounded-lg border bg-background/90 p-3 shadow-sm">
-                              <div className="flex items-start gap-3">
-                                <div className="flex size-8 shrink-0 items-center justify-center rounded-md bg-blue-500/10 text-blue-600">
-                                  <Video className="size-4" />
-                                </div>
-                                <div className="min-w-0 flex-1 space-y-1">
-                                  <div className="flex items-start justify-between gap-2">
-                                    <div className="min-w-0">
-                                      <p className="truncate text-sm font-medium">
-                                        {originalVideoResource
-                                          ? originalVideoResource.name
-                                          : t('lessonForm.originalVideoTitle')}
-                                      </p>
-                                      <p className="text-xs text-muted-foreground">
-                                        {conversionJobId
-                                          ? t('lessonForm.videoConversionJob', {
-                                              id: conversionJobId,
-                                            })
-                                          : t('lessonForm.originalVideoHint')}
-                                      </p>
-                                      <p className="text-[0.65rem] text-muted-foreground">
-                                        {t('lessonForm.originalVideoPurpose')}
-                                      </p>
-                                    </div>
-                                    {originalVideoResource && (
-                                      <div className="flex shrink-0 items-center gap-1">
-                                        <IconActionTooltip
-                                          label={t('lessonForm.playVideoAria', {
-                                            name: originalVideoResource.name,
-                                          })}
-                                          asWrapper={isResolvingVideoPreview}
-                                        >
-                                          <Button
-                                            type="button"
-                                            variant="ghost"
-                                            size="icon"
-                                            className="size-7 shrink-0 text-muted-foreground transition-colors hover:text-emerald-600"
-                                            disabled={isResolvingVideoPreview}
-                                            onClick={() =>
-                                              void openVideoPreview(
-                                                originalVideoResource
-                                              )
-                                            }
-                                            aria-label={t(
-                                              'lessonForm.playVideoAria',
-                                              {
-                                                name: originalVideoResource.name,
-                                              }
-                                            )}
-                                          >
-                                            {isResolvingVideoPreview ? (
-                                              <Loader2 className="size-3 animate-spin" />
-                                            ) : (
-                                              <Play className="size-3" />
-                                            )}
-                                          </Button>
-                                        </IconActionTooltip>
-                                        <IconActionTooltip
-                                          label={t(
-                                            'lessonForm.downloadVideoAria',
+                      <Card className="bg-muted/20 py-2 gap-2 order-3">
+                        <CardHeader className="px-3 pt-2 pb-1">
+                          <CardTitle className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
+                            {t('lessonForm.originalVideoTitle')}
+                          </CardTitle>
+                        </CardHeader>
+                        <CardContent className="px-3 pb-2 flex flex-col gap-3">
+                          <div className="rounded-lg border bg-background/90 p-3 shadow-sm">
+                            <div className="flex items-start gap-3">
+                              <div className="flex size-8 shrink-0 items-center justify-center rounded-md bg-blue-500/10 text-blue-600">
+                                <Video className="size-4" />
+                              </div>
+                              <div className="min-w-0 flex-1 space-y-1">
+                                <div className="flex items-start justify-between gap-2">
+                                  <div className="min-w-0">
+                                    <p className="truncate text-sm font-medium">
+                                      {originalVideoResource
+                                        ? originalVideoResource.name
+                                        : t('lessonForm.originalVideoTitle')}
+                                    </p>
+                                    <p className="text-xs text-muted-foreground">
+                                      {conversionJobId
+                                        ? t('lessonForm.videoConversionJob', {
+                                            id: conversionJobId,
+                                          })
+                                        : t('lessonForm.originalVideoHint')}
+                                    </p>
+                                    <p className="text-[0.65rem] text-muted-foreground">
+                                      {t('lessonForm.originalVideoPurpose')}
+                                    </p>
+                                  </div>
+                                  {originalVideoResource && (
+                                    <div className="flex shrink-0 items-center gap-1">
+                                      <IconActionTooltip
+                                        label={t('lessonForm.playVideoAria', {
+                                          name: originalVideoResource.name,
+                                        })}
+                                        asWrapper={isResolvingVideoPreview}
+                                      >
+                                        <Button
+                                          type="button"
+                                          variant="ghost"
+                                          size="icon"
+                                          className="size-7 shrink-0 text-muted-foreground transition-colors hover:text-emerald-600"
+                                          disabled={isResolvingVideoPreview}
+                                          onClick={() =>
+                                            void openVideoPreview(
+                                              originalVideoResource
+                                            )
+                                          }
+                                          aria-label={t(
+                                            'lessonForm.playVideoAria',
                                             {
                                               name: originalVideoResource.name,
                                             }
                                           )}
-                                          asWrapper={isDownloadingOriginalVideo}
                                         >
-                                          <Button
-                                            type="button"
-                                            variant="ghost"
-                                            size="icon"
-                                            className="size-7 shrink-0 text-muted-foreground transition-colors hover:text-amber-600"
-                                            disabled={
-                                              isDownloadingOriginalVideo
-                                            }
-                                            onClick={() =>
-                                              void handleResourceDownload(
-                                                originalVideoResource
-                                              )
-                                            }
-                                            aria-label={t(
-                                              'lessonForm.downloadVideoAria',
-                                              {
-                                                name: originalVideoResource.name,
-                                              }
-                                            )}
-                                          >
-                                            {isDownloadingOriginalVideo ? (
-                                              <Loader2 className="size-3 animate-spin" />
-                                            ) : (
-                                              <Download className="size-3" />
-                                            )}
-                                          </Button>
-                                        </IconActionTooltip>
-                                        <IconActionTooltip
-                                          label={t('lessonForm.openVideoAria', {
+                                          {isResolvingVideoPreview ? (
+                                            <Loader2 className="size-3 animate-spin" />
+                                          ) : (
+                                            <Play className="size-3" />
+                                          )}
+                                        </Button>
+                                      </IconActionTooltip>
+                                      <IconActionTooltip
+                                        label={t(
+                                          'lessonForm.downloadVideoAria',
+                                          {
                                             name: originalVideoResource.name,
-                                          })}
-                                        >
-                                          <Button
-                                            type="button"
-                                            variant="ghost"
-                                            size="icon"
-                                            className="size-7 shrink-0 text-muted-foreground transition-colors hover:text-blue-600"
-                                            onClick={() =>
-                                              void openResource(
-                                                originalVideoResource
-                                              )
-                                            }
-                                            aria-label={t(
-                                              'lessonForm.openVideoAria',
-                                              {
-                                                name: originalVideoResource.name,
-                                              }
-                                            )}
-                                          >
-                                            <ExternalLink className="size-3" />
-                                          </Button>
-                                        </IconActionTooltip>
-                                      </div>
-                                    )}
-                                  </div>
-                                  {originalVideoResource?.size ? (
-                                    <div className="inline-flex rounded-full bg-muted px-2 py-0.5 text-[0.65rem] font-medium text-muted-foreground">
-                                      {originalVideoResource.size}
-                                    </div>
-                                  ) : null}
-                                  <div className="flex flex-wrap items-center gap-2 pt-1">
-                                    {originalVideoResource ? (
-                                      <>
+                                          }
+                                        )}
+                                        asWrapper={isDownloadingOriginalVideo}
+                                      >
                                         <Button
                                           type="button"
-                                          variant="secondary"
-                                          className="h-8 px-3 text-xs"
-                                          disabled={
-                                            isOriginalVideoUploadBlocked
-                                          }
+                                          variant="ghost"
+                                          size="icon"
+                                          className="size-7 shrink-0 text-muted-foreground transition-colors hover:text-amber-600"
+                                          disabled={isDownloadingOriginalVideo}
                                           onClick={() =>
-                                            originalVideoInputRef.current?.click()
+                                            void handleResourceDownload(
+                                              originalVideoResource
+                                            )
                                           }
+                                          aria-label={t(
+                                            'lessonForm.downloadVideoAria',
+                                            {
+                                              name: originalVideoResource.name,
+                                            }
+                                          )}
                                         >
-                                          <UploadCloud className="size-3.5 mr-1" />
-                                          {t(
-                                            'lessonForm.replaceOriginalForConversion'
+                                          {isDownloadingOriginalVideo ? (
+                                            <Loader2 className="size-3 animate-spin" />
+                                          ) : (
+                                            <Download className="size-3" />
                                           )}
                                         </Button>
+                                      </IconActionTooltip>
+                                      <IconActionTooltip
+                                        label={t('lessonForm.openVideoAria', {
+                                          name: originalVideoResource.name,
+                                        })}
+                                      >
                                         <Button
                                           type="button"
-                                          variant="outline"
-                                          className="h-8 px-3 text-xs"
-                                          disabled={
-                                            !canRequeueSavedOriginalVideo
-                                          }
+                                          variant="ghost"
+                                          size="icon"
+                                          className="size-7 shrink-0 text-muted-foreground transition-colors hover:text-blue-600"
                                           onClick={() =>
-                                            void handleRequeueOriginalVideo()
+                                            void openResource(
+                                              originalVideoResource
+                                            )
                                           }
-                                        >
-                                          {isRequeueingOriginalVideo ? (
-                                            <Loader2 className="size-3.5 mr-1 animate-spin" />
-                                          ) : (
-                                            <RefreshCw className="size-3.5 mr-1" />
-                                          )}
-                                          {t(
-                                            'lessonForm.retryConversionWithSavedOriginal'
+                                          aria-label={t(
+                                            'lessonForm.openVideoAria',
+                                            {
+                                              name: originalVideoResource.name,
+                                            }
                                           )}
+                                        >
+                                          <ExternalLink className="size-3" />
                                         </Button>
-                                      </>
-                                    ) : (
+                                      </IconActionTooltip>
+                                    </div>
+                                  )}
+                                </div>
+                                {originalVideoResource?.size ? (
+                                  <div className="inline-flex rounded-full bg-muted px-2 py-0.5 text-[0.65rem] font-medium text-muted-foreground">
+                                    {originalVideoResource.size}
+                                  </div>
+                                ) : null}
+                                <div className="flex flex-wrap items-center gap-2 pt-1">
+                                  {originalVideoResource ? (
+                                    <>
                                       <Button
                                         type="button"
                                         variant="secondary"
@@ -3647,50 +3522,83 @@ export function EditorLesson({ lessonId }: EditorLessonProps) {
                                       >
                                         <UploadCloud className="size-3.5 mr-1" />
                                         {t(
-                                          'lessonForm.uploadOriginalForConversion'
+                                          'lessonForm.replaceOriginalForConversion'
                                         )}
                                       </Button>
-                                    )}
-                                    <span className="text-[0.65rem] text-muted-foreground">
-                                      {isConversionJobActive
-                                        ? t(
-                                            'lessonForm.videoUploadBlockedWhileProcessing'
-                                          )
-                                        : isConversionJobStatusResolving
-                                          ? t('lessonForm.videoJobStateLoading')
-                                          : t('lessonForm.originalVideoHint')}
-                                    </span>
-                                  </div>
-                                  {originalUploadProgress !== null ? (
-                                    <div className="space-y-1 pt-1">
-                                      <Progress
-                                        value={originalUploadProgress}
-                                        className="h-1.5"
-                                      />
-                                      <p className="text-[0.65rem] text-muted-foreground">
-                                        {originalUploadProgress}%
-                                      </p>
-                                    </div>
-                                  ) : null}
+                                      <Button
+                                        type="button"
+                                        variant="outline"
+                                        className="h-8 px-3 text-xs"
+                                        disabled={!canRequeueSavedOriginalVideo}
+                                        onClick={() =>
+                                          void handleRequeueOriginalVideo()
+                                        }
+                                      >
+                                        {isRequeueingOriginalVideo ? (
+                                          <Loader2 className="size-3.5 mr-1 animate-spin" />
+                                        ) : (
+                                          <RefreshCw className="size-3.5 mr-1" />
+                                        )}
+                                        {t(
+                                          'lessonForm.retryConversionWithSavedOriginal'
+                                        )}
+                                      </Button>
+                                    </>
+                                  ) : (
+                                    <Button
+                                      type="button"
+                                      variant="secondary"
+                                      className="h-8 px-3 text-xs"
+                                      disabled={isOriginalVideoUploadBlocked}
+                                      onClick={() =>
+                                        originalVideoInputRef.current?.click()
+                                      }
+                                    >
+                                      <UploadCloud className="size-3.5 mr-1" />
+                                      {t(
+                                        'lessonForm.uploadOriginalForConversion'
+                                      )}
+                                    </Button>
+                                  )}
+                                  <span className="text-[0.65rem] text-muted-foreground">
+                                    {isConversionJobActive
+                                      ? t(
+                                          'lessonForm.videoUploadBlockedWhileProcessing'
+                                        )
+                                      : isConversionJobStatusResolving
+                                        ? t('lessonForm.videoJobStateLoading')
+                                        : t('lessonForm.originalVideoHint')}
+                                  </span>
                                 </div>
+                                {originalUploadProgress !== null ? (
+                                  <div className="space-y-1 pt-1">
+                                    <Progress
+                                      value={originalUploadProgress}
+                                      className="h-1.5"
+                                    />
+                                    <p className="text-[0.65rem] text-muted-foreground">
+                                      {originalUploadProgress}%
+                                    </p>
+                                  </div>
+                                ) : null}
                               </div>
-                              <input
-                                ref={originalVideoInputRef}
-                                type="file"
-                                accept="video/*"
-                                className="hidden"
-                                onChange={(event) => {
-                                  const file = event.target.files?.[0];
-                                  if (file && !isOriginalVideoUploadBlocked) {
-                                    void handleOriginalVideoFile(file);
-                                  }
-                                  event.target.value = '';
-                                }}
-                              />
                             </div>
-                          </CardContent>
-                        </Card>
-                      ) : null}
+                            <input
+                              ref={originalVideoInputRef}
+                              type="file"
+                              accept="video/*"
+                              className="hidden"
+                              onChange={(event) => {
+                                const file = event.target.files?.[0];
+                                if (file && !isOriginalVideoUploadBlocked) {
+                                  void handleOriginalVideoFile(file);
+                                }
+                                event.target.value = '';
+                              }}
+                            />
+                          </div>
+                        </CardContent>
+                      </Card>
 
                       {conversionJobId && !shouldHidePipelineCard ? (
                         <Card className="bg-muted/20 py-2 gap-2 order-4">
@@ -4047,259 +3955,43 @@ export function EditorLesson({ lessonId }: EditorLessonProps) {
                       <Card className="bg-muted/20 py-2 gap-2 order-2">
                         <CardHeader className="px-3 pt-2 pb-1">
                           <CardTitle className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
-                            {t('lessonForm.fileStorageVideosByResolution')}
+                            {t('lessonForm.hlsStatusTitle')}
                           </CardTitle>
                         </CardHeader>
-                        <CardContent className="px-3 pb-2 flex flex-col gap-3">
-                          {isFetchingCourseVideoProfiles ? (
-                            <p className="text-xs text-muted-foreground">
-                              {t('lessonForm.loadingVideoProfiles')}
-                            </p>
-                          ) : hasCourseVideoProfilesError ? (
-                            <div className="flex flex-col gap-2">
-                              <p className="text-xs text-destructive">
-                                {t('lessonForm.videoProfilesLoadError')}
-                              </p>
-                              <Button
-                                type="button"
-                                variant="outline"
-                                size="sm"
-                                className="h-7 w-fit px-2 text-xs"
-                                onClick={() =>
-                                  void refetchCourseVideoProfiles()
-                                }
-                              >
-                                <RefreshCw className="size-3 mr-1" />
-                                {t('lessonForm.retryLoadVideoProfiles')}
-                              </Button>
-                            </div>
-                          ) : courseVideoProfiles.length === 0 ? (
-                            <p className="text-xs text-muted-foreground">
-                              {t('lessonForm.noVideoProfilesConfigured')}
-                            </p>
-                          ) : (
-                            <>
-                              {isConversionJobActive ? (
+                        <CardContent className="px-3 pb-2">
+                          {(() => {
+                            const hlsResource = localResources.find(
+                              (r) => r.type === 'video_hls'
+                            );
+                            if (hlsResource) {
+                              return (
+                                <div className="flex items-center gap-2">
+                                  <div className="size-2 rounded-full bg-emerald-500 shrink-0" />
+                                  <p className="text-xs text-emerald-700 dark:text-emerald-400">
+                                    {t('lessonForm.hlsStatusReady')}
+                                  </p>
+                                </div>
+                              );
+                            }
+                            if (isConversionJobActive) {
+                              return (
+                                <div className="flex items-center gap-2">
+                                  <Loader2 className="size-3.5 animate-spin text-muted-foreground shrink-0" />
+                                  <p className="text-xs text-muted-foreground">
+                                    {t('lessonForm.hlsStatusProcessing')}
+                                  </p>
+                                </div>
+                              );
+                            }
+                            return (
+                              <div className="flex items-center gap-2">
+                                <div className="size-2 rounded-full bg-muted-foreground/40 shrink-0" />
                                 <p className="text-xs text-muted-foreground">
-                                  {t(
-                                    'lessonForm.videoProfilesLockedWhileProcessing'
-                                  )}
+                                  {t('lessonForm.hlsStatusPending')}
                                 </p>
-                              ) : null}
-                              <div className="flex flex-col gap-1">
-                                {courseVideoProfiles.map((profile) => {
-                                  const res = profileVideoResources.get(
-                                    profile.id
-                                  );
-                                  const hasVideo = Boolean(res);
-                                  const isDownloadingResource = res
-                                    ? downloadingResourceKeys.has(
-                                        String(res.fileId ?? res.id)
-                                      )
-                                    : false;
-                                  const currentUploadProgress =
-                                    profileUploadProgress[profile.id];
-                                  const inputId = `lesson-video-profile-${profile.id}`;
-
-                                  return (
-                                    <div
-                                      key={profile.id}
-                                      className="flex items-center gap-2 rounded-md border bg-background/80 px-2.5 py-2"
-                                    >
-                                      <Video
-                                        className={cn(
-                                          'size-3.5 shrink-0',
-                                          hasVideo
-                                            ? 'text-emerald-600'
-                                            : 'text-blue-600'
-                                        )}
-                                      />
-                                      <div className="flex-1 min-w-0">
-                                        <p className="text-xs truncate font-medium">
-                                          {profile.name}
-                                        </p>
-                                        {res ? (
-                                          (() => {
-                                            const metadata =
-                                              resolveResourceMetadata(res);
-
-                                            return (
-                                              <p className="text-[0.65rem] text-muted-foreground">
-                                                {`${metadata.sizeLabel} · ${metadata.uploadedAtLabel}`}
-                                              </p>
-                                            );
-                                          })()
-                                        ) : (
-                                          <Badge className="mt-1 inline-flex items-center gap-1 border border-blue-200 bg-blue-100 text-blue-700 hover:bg-blue-100 dark:border-blue-800 dark:bg-blue-950/40 dark:text-blue-200 dark:hover:bg-blue-950/50">
-                                            {isConversionJobActive ? (
-                                              <Loader2 className="size-3 animate-spin" />
-                                            ) : (
-                                              <Clock className="size-3" />
-                                            )}
-                                            {t('lessonForm.awaitingConversion')}
-                                          </Badge>
-                                        )}
-                                        {currentUploadProgress !== undefined ? (
-                                          <div className="mt-1 space-y-1">
-                                            <Progress
-                                              value={currentUploadProgress}
-                                              className="h-1.5"
-                                            />
-                                            <p className="text-[0.65rem] text-muted-foreground">
-                                              {currentUploadProgress}%
-                                            </p>
-                                          </div>
-                                        ) : null}
-                                      </div>
-                                      <input
-                                        id={inputId}
-                                        type="file"
-                                        accept="video/*"
-                                        className="hidden"
-                                        onChange={(event) => {
-                                          const file = event.target.files?.[0];
-                                          if (
-                                            file &&
-                                            !isProfileVideoUploadBlocked
-                                          ) {
-                                            void handleVideoProfileFile(
-                                              profile.id,
-                                              file
-                                            );
-                                          }
-                                          event.target.value = '';
-                                        }}
-                                      />
-                                      <Button
-                                        type="button"
-                                        variant="outline"
-                                        size="sm"
-                                        className="h-7 px-2 text-xs"
-                                        disabled={
-                                          currentUploadProgress !== undefined ||
-                                          isProfileVideoUploadBlocked
-                                        }
-                                        onClick={() =>
-                                          document
-                                            .getElementById(inputId)
-                                            ?.click()
-                                        }
-                                      >
-                                        <UploadCloud className="size-3 mr-1" />
-                                        {res
-                                          ? t('lessonForm.replaceVideo')
-                                          : t('lessonForm.upload')}
-                                      </Button>
-                                      {res && (
-                                        <>
-                                          <IconActionTooltip
-                                            label={t(
-                                              'lessonForm.playVideoAria',
-                                              { name: res.name }
-                                            )}
-                                            asWrapper={isResolvingVideoPreview}
-                                          >
-                                            <Button
-                                              type="button"
-                                              variant="ghost"
-                                              size="icon"
-                                              className="size-6 shrink-0 text-muted-foreground transition-colors hover:text-emerald-600"
-                                              disabled={isResolvingVideoPreview}
-                                              onClick={() =>
-                                                void openVideoPreview(res)
-                                              }
-                                              aria-label={t(
-                                                'lessonForm.playVideoAria',
-                                                { name: res.name }
-                                              )}
-                                            >
-                                              {isResolvingVideoPreview ? (
-                                                <Loader2 className="size-3 animate-spin" />
-                                              ) : (
-                                                <Play className="size-3" />
-                                              )}
-                                            </Button>
-                                          </IconActionTooltip>
-                                          <IconActionTooltip
-                                            label={t(
-                                              'lessonForm.openVideoAria',
-                                              { name: res.name }
-                                            )}
-                                          >
-                                            <Button
-                                              type="button"
-                                              variant="ghost"
-                                              size="icon"
-                                              className="size-6 shrink-0 text-muted-foreground transition-colors hover:text-blue-600"
-                                              onClick={() =>
-                                                void openResource(res)
-                                              }
-                                              aria-label={t(
-                                                'lessonForm.openVideoAria',
-                                                { name: res.name }
-                                              )}
-                                            >
-                                              <ExternalLink className="size-3" />
-                                            </Button>
-                                          </IconActionTooltip>
-                                          <IconActionTooltip
-                                            label={t(
-                                              'lessonForm.downloadVideoAria',
-                                              { name: res.name }
-                                            )}
-                                            asWrapper={isDownloadingResource}
-                                          >
-                                            <Button
-                                              type="button"
-                                              variant="ghost"
-                                              size="icon"
-                                              className="size-6 shrink-0 text-muted-foreground transition-colors hover:text-amber-600"
-                                              disabled={isDownloadingResource}
-                                              onClick={() =>
-                                                void handleResourceDownload(res)
-                                              }
-                                              aria-label={t(
-                                                'lessonForm.downloadVideoAria',
-                                                { name: res.name }
-                                              )}
-                                            >
-                                              {isDownloadingResource ? (
-                                                <Loader2 className="size-3 animate-spin" />
-                                              ) : (
-                                                <Download className="size-3" />
-                                              )}
-                                            </Button>
-                                          </IconActionTooltip>
-                                          <IconActionTooltip
-                                            label={t(
-                                              'lessonForm.removeVideoAria',
-                                              { name: res.name }
-                                            )}
-                                          >
-                                            <Button
-                                              type="button"
-                                              variant="ghost"
-                                              size="icon"
-                                              className="size-6 shrink-0 text-muted-foreground transition-colors hover:text-destructive"
-                                              onClick={() =>
-                                                void removeResource(res.id)
-                                              }
-                                              aria-label={t(
-                                                'lessonForm.removeVideoAria',
-                                                { name: res.name }
-                                              )}
-                                            >
-                                              <X className="size-3" />
-                                            </Button>
-                                          </IconActionTooltip>
-                                        </>
-                                      )}
-                                    </div>
-                                  );
-                                })}
                               </div>
-                            </>
-                          )}
+                            );
+                          })()}
                         </CardContent>
                       </Card>
                     </>
@@ -5117,11 +4809,7 @@ export function EditorLesson({ lessonId }: EditorLessonProps) {
               <DialogTitle className="text-base">
                 {videoPreviewResource?.name ?? t('lessonForm.tabVideos')}
               </DialogTitle>
-              <DialogDescription>
-                {videoPreviewResource
-                  ? t('lessonForm.fileStorageVideosByResolution')
-                  : t('lessonForm.tabVideos')}
-              </DialogDescription>
+              <DialogDescription>{t('lessonForm.tabVideos')}</DialogDescription>
             </DialogHeader>
             <div className="px-5 pb-5">
               {videoPreviewError ? (
@@ -5140,7 +4828,7 @@ export function EditorLesson({ lessonId }: EditorLessonProps) {
               ) : (
                 <div className="flex min-h-72 items-center justify-center rounded-lg border border-dashed bg-muted/30 px-6 text-center text-sm text-muted-foreground">
                   {isResolvingVideoPreview
-                    ? t('lessonForm.loadingVideoProfiles')
+                    ? t('lessonForm.videoJobLoading')
                     : t('questionEditor.resourceOpenError')}
                 </div>
               )}