@hed-hog/lms 0.0.347 → 0.0.350

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

@@ -1,7 +1,6 @@
 'use client';
 
 import { zodResolver } from '@hookform/resolvers/zod';
-import { useTranslations } from 'next-intl';
 import {
   CircleDot,
   CircleOff,
@@ -29,6 +28,7 @@ import {
   X,
   type LucideIcon,
 } from 'lucide-react';
+import { useTranslations } from 'next-intl';
 import { useEffect, useRef, useState } from 'react';
 import { useForm, useWatch } from 'react-hook-form';
 import { toast } from 'sonner';
@@ -251,6 +251,93 @@ type FormValues = {
   questionId?: string | null;
 };
 
+type TranscriptionSegment = {
+  id: string;
+  start: string;
+  end: string;
+  text: string;
+};
+
+function segmentId(): string {
+  return Math.random().toString(36).slice(2, 9);
+}
+
+function parseTimeToSeconds(input: string): number | null {
+  const normalized = input.trim();
+  if (!normalized) return null;
+  const parts = normalized.split(':').map((part) => Number(part));
+  if (parts.some((part) => !Number.isFinite(part) || part < 0)) return null;
+  if (parts.length === 2) {
+    const mm = parts[0];
+    const ss = parts[1];
+    if (mm === undefined || ss === undefined) return null;
+    if (ss > 59) return null;
+    return mm * 60 + ss;
+  }
+  if (parts.length === 3) {
+    const hh = parts[0];
+    const mm = parts[1];
+    const ss = parts[2];
+    if (hh === undefined || mm === undefined || ss === undefined) return null;
+    if (mm > 59 || ss > 59) return null;
+    return hh * 3600 + mm * 60 + ss;
+  }
+  return null;
+}
+
+function normalizeTimeInput(input: string): string {
+  const seconds = parseTimeToSeconds(input);
+  if (seconds === null) return input.trim();
+  const hh = Math.floor(seconds / 3600);
+  const mm = Math.floor((seconds % 3600) / 60);
+  const ss = seconds % 60;
+  if (hh > 0) {
+    return `${String(hh).padStart(2, '0')}:${String(mm).padStart(2, '0')}:${String(ss).padStart(2, '0')}`;
+  }
+  return `${String(mm).padStart(2, '0')}:${String(ss).padStart(2, '0')}`;
+}
+
+function parseTranscriptionSegments(raw?: string): TranscriptionSegment[] {
+  const lines = String(raw ?? '')
+    .split('\n')
+    .map((line) => line.trim())
+    .filter(Boolean);
+  if (lines.length === 0) {
+    return [{ id: segmentId(), start: '00:00', end: '00:15', text: '' }];
+  }
+  return lines.map((line) => {
+    const match = line.match(/^\[(.+?)\s*-->\s*(.+?)\]\s*(.*)$/);
+    if (match) {
+      return {
+        id: segmentId(),
+        start: normalizeTimeInput(match[1] ?? ''),
+        end: normalizeTimeInput(match[2] ?? ''),
+        text: match[3] ?? '',
+      };
+    }
+    return {
+      id: segmentId(),
+      start: '00:00',
+      end: '00:15',
+      text: line,
+    };
+  });
+}
+
+function serializeTranscriptionSegments(
+  segments: TranscriptionSegment[]
+): string {
+  return segments
+    .map((segment) => ({
+      start: normalizeTimeInput(segment.start),
+      end: normalizeTimeInput(segment.end),
+      text: segment.text.trim(),
+    }))
+    .filter((segment) => segment.text.length > 0)
+    .map((segment) => `[${segment.start} --> ${segment.end}] ${segment.text}`)
+    .join('\n');
+}
+
 // ── SortableAlternativa ───────────────────────────────────────────────────────
 
 function SortableAlternativa({
@@ -327,9 +414,7 @@ function SortableAlternativa({
             ? 'text-foreground'
             : 'text-muted-foreground hover:text-foreground'
         )}
-        aria-label={
-          alt.correta ? markIncorrectLabel : markCorrectLabel
-        }
+        aria-label={alt.correta ? markIncorrectLabel : markCorrectLabel}
       >
         {alt.correta ? (
           <CircleDot className="size-5" />
@@ -378,8 +463,7 @@ export function EditorLesson({ lessonId }: EditorLessonProps) {
   const videoProviders: { value: VideoProvider; label: string }[] = [
     { value: 'youtube', label: 'YouTube' },
     { value: 'vimeo', label: 'Vimeo' },
-    { value: 'bunny', label: 'Bunny.net' },
-    { value: 'custom', label: t('providers.custom') },
+    { value: 'file_storage', label: t('providers.fileStorage') },
   ];
   const questionTypeLabels: Record<QuestionType, string> = {
     multiple_choice: t('questionEditor.types.multipleChoice'),
@@ -404,7 +488,7 @@ export function EditorLesson({ lessonId }: EditorLessonProps) {
     publicDescription: z.string(),
     privateDescription: z.string(),
     videoProvider: z
-      .enum(['youtube', 'vimeo', 'bunny', 'custom'] as const)
+      .enum(['youtube', 'vimeo', 'file_storage'] as const)
       .optional(),
     videoUrl: z.string().optional(),
     transcription: z.string().optional(),
@@ -426,7 +510,10 @@ export function EditorLesson({ lessonId }: EditorLessonProps) {
     visibility: lesson?.visibility ?? 'publico',
     publicDescription: lesson?.publicDescription ?? '',
     privateDescription: lesson?.privateDescription ?? '',
-    videoProvider: lesson?.videoProvider ?? 'youtube',
+    videoProvider:
+      lesson?.videoProvider === 'youtube' || lesson?.videoProvider === 'vimeo'
+        ? lesson.videoProvider
+        : 'file_storage',
     videoUrl: lesson?.videoUrl ?? '',
     transcription: lesson?.transcription ?? '',
     postContent: lesson?.postContent ?? '',
@@ -441,6 +528,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 watchedVideoProvider = useWatch({
+    control: form.control,
+    name: 'videoProvider',
+  });
 
   useEffect(() => {
     if (!lesson) return;
@@ -451,9 +542,14 @@ export function EditorLesson({ lessonId }: EditorLessonProps) {
   const [localResources, setLocalResources] = useState<Resource[]>(
     () => lesson?.resources ?? []
   );
+  const [videoResolution, setVideoResolution] = useState('1080p');
   const [dragOver, setDragOver] = useState(false);
   const [isUploading, setIsUploading] = useState(false);
   const resourceInputRef = useRef<HTMLInputElement>(null);
+  const videoInputRef = useRef<HTMLInputElement>(null);
+  const [transcriptionSegments, setTranscriptionSegments] = useState<
+    TranscriptionSegment[]
+  >(() => parseTranscriptionSegments(lesson?.transcription));
 
   // ── Instructors state ────────────────────────────────────────────────────
   const [selectedInstructorIds, setSelectedInstructorIds] = useState<string[]>(
@@ -483,6 +579,7 @@ export function EditorLesson({ lessonId }: EditorLessonProps) {
   useEffect(() => {
     setLocalResources(lesson?.resources ?? []);
     setSelectedInstructorIds(lesson?.instructors?.map((i) => i.id) ?? []);
+    setTranscriptionSegments(parseTranscriptionSegments(lesson?.transcription));
   }, [lesson?.id]); // eslint-disable-line react-hooks/exhaustive-deps
 
   if (!lesson) return null;
@@ -539,28 +636,106 @@ export function EditorLesson({ lessonId }: EditorLessonProps) {
     setLocalResources((prev) => prev.filter((r) => r.id !== id));
   }
 
-  function handleResourceDownload(res: Resource) {
-    if (!res.url) {
+  async function resolveResourceUrl(res: Resource): Promise<string | null> {
+    if (res.url) return res.url;
+    const numId = Number(res.id);
+    if (!Number.isInteger(numId) || numId <= 0) return null;
+    try {
+      const response = await request<{ url?: string }>({
+        url: `/file/open/${numId}`,
+        method: 'PUT',
+      });
+      return response?.data?.url ?? null;
+    } catch {
+      return null;
+    }
+  }
+
+  async function openResource(res: Resource) {
+    const url = await resolveResourceUrl(res);
+    if (!url) {
+      toast.error(t('questionEditor.resourceOpenError'));
+      return;
+    }
+    window.open(url, '_blank', 'noopener,noreferrer');
+  }
+
+  async function handleResourceDownload(res: Resource) {
+    const resourceUrl = await resolveResourceUrl(res);
+    if (!resourceUrl) {
       toast(t('questionEditor.resourceDownloadSoon', { name: res.name }));
       return;
     }
     const a = document.createElement('a');
-    a.href = res.url;
+    a.href = resourceUrl;
     a.download = res.name;
     a.click();
   }
 
+  async function handleVideoVariantFiles(files: File[]) {
+    const resolution = videoResolution.trim();
+    if (!resolution) {
+      toast.error(t('questionEditor.videoResolutionRequired'));
+      return;
+    }
+    setIsUploading(true);
+    try {
+      const results = await Promise.allSettled(
+        files.map((file) =>
+          uploadFile(request, file).then<Resource>((res) => ({
+            id: String(res.id),
+            name: file.name,
+            size: formatFileSize(file.size),
+            type: `video/${resolution}`,
+            public: false,
+            url: undefined,
+          }))
+        )
+      );
+
+      const succeeded = results
+        .filter(
+          (result): result is PromiseFulfilledResult<Resource> =>
+            result.status === 'fulfilled'
+        )
+        .map((result) => result.value);
+      const failedCount = results.filter(
+        (result) => result.status === 'rejected'
+      ).length;
+
+      if (failedCount > 0) {
+        toast.error(
+          t('questionEditor.videoUploadFailed', {
+            count: failedCount,
+          })
+        );
+      }
+
+      if (succeeded.length > 0) {
+        setLocalResources((prev) => [...prev, ...succeeded]);
+      }
+    } finally {
+      setIsUploading(false);
+    }
+  }
+
   function onSubmit(values: FormValues) {
+    const transcriptionValue =
+      values.type === 'video'
+        ? serializeTranscriptionSegments(transcriptionSegments)
+        : values.transcription;
+
     updateLesson.mutate({
       lessonId,
       sessionId: lesson!.sessionId,
       formValues: {
         ...values,
+        transcription: transcriptionValue,
         resources: localResources,
         instructorIds: selectedInstructorIds.map(Number),
       },
     });
-    form.reset(values);
+    form.reset({ ...values, transcription: transcriptionValue });
   }
 
   // ── Question sheet helpers ────────────────────────────────────────────────
@@ -743,6 +918,9 @@ export function EditorLesson({ lessonId }: EditorLessonProps) {
             <TabsTrigger value="conteudo" className="text-xs h-7 px-2.5">
               {t('lessonForm.postContent')}
             </TabsTrigger>
+            <TabsTrigger value="transcricao" className="text-xs h-7 px-2.5">
+              {t('lessonForm.tabTranscription')}
+            </TabsTrigger>
             <TabsTrigger value="recursos" className="text-xs h-7 px-2.5">
               {t('lessonForm.tabResources')}
             </TabsTrigger>
@@ -901,10 +1079,10 @@ export function EditorLesson({ lessonId }: EditorLessonProps) {
                                         STATUS_COLORS[val]
                                       )}
                                     >
-                                  {lbl}
-                                </span>
-                              </SelectItem>
-                            ))}
+                                      {lbl}
+                                    </span>
+                                  </SelectItem>
+                                ))}
                               </SelectContent>
                             </Select>
                             <FormMessage className="text-xs" />
@@ -932,17 +1110,20 @@ export function EditorLesson({ lessonId }: EditorLessonProps) {
                               <SelectContent>
                                 <SelectItem value="publico">
                                   <span className="flex items-center gap-1.5">
-                                    <Eye className="size-3" /> {t('lessonForm.public')}
+                                    <Eye className="size-3" />{' '}
+                                    {t('lessonForm.public')}
                                   </span>
                                 </SelectItem>
                                 <SelectItem value="privado">
                                   <span className="flex items-center gap-1.5">
-                                    <EyeOff className="size-3" /> {t('lessonForm.private')}
+                                    <EyeOff className="size-3" />{' '}
+                                    {t('lessonForm.private')}
                                   </span>
                                 </SelectItem>
                                 <SelectItem value="restrito">
                                   <span className="flex items-center gap-1.5">
-                                    <Lock className="size-3" /> {t('questionEditor.restricted')}
+                                    <Lock className="size-3" />{' '}
+                                    {t('questionEditor.restricted')}
                                   </span>
                                 </SelectItem>
                               </SelectContent>
@@ -1024,9 +1205,12 @@ export function EditorLesson({ lessonId }: EditorLessonProps) {
                                     prev.filter((id) => id !== sid)
                                   )
                                 }
-                                aria-label={t('questionEditor.removeInstructor', {
-                                  name: displayName,
-                                })}
+                                aria-label={t(
+                                  'questionEditor.removeInstructor',
+                                  {
+                                    name: displayName,
+                                  }
+                                )}
                               >
                                 <X className="size-3" />
                               </Button>
@@ -1049,7 +1233,8 @@ export function EditorLesson({ lessonId }: EditorLessonProps) {
                 <Card className="bg-muted/20 py-2 gap-2">
                   <CardHeader className="px-3 pt-2 pb-1">
                     <CardTitle className="text-xs font-medium text-muted-foreground uppercase tracking-wider flex items-center gap-1.5">
-                      <Eye className="size-3" /> {t('lessonForm.publicDescription')}
+                      <Eye className="size-3" />{' '}
+                      {t('lessonForm.publicDescription')}
                     </CardTitle>
                   </CardHeader>
                   <CardContent className="px-3 pb-2">
@@ -1075,7 +1260,8 @@ export function EditorLesson({ lessonId }: EditorLessonProps) {
                 <Card className="bg-muted/20 py-2 gap-2">
                   <CardHeader className="px-3 pt-2 pb-1">
                     <CardTitle className="text-xs font-medium text-muted-foreground uppercase tracking-wider flex items-center gap-1.5">
-                      <Lock className="size-3" /> {t('lessonForm.privateDescription')}
+                      <Lock className="size-3" />{' '}
+                      {t('lessonForm.privateDescription')}
                     </CardTitle>
                   </CardHeader>
                   <CardContent className="px-3 pb-2">
@@ -1103,7 +1289,8 @@ export function EditorLesson({ lessonId }: EditorLessonProps) {
                   <Card className="bg-muted/20 py-2 gap-2">
                     <CardHeader className="px-3 pt-2 pb-1">
                       <CardTitle className="text-xs font-medium text-muted-foreground uppercase tracking-wider flex items-center gap-1.5">
-                        <Video className="size-3 text-blue-500" /> {t('types.video')}
+                        <Video className="size-3 text-blue-500" />{' '}
+                        {t('types.video')}
                       </CardTitle>
                     </CardHeader>
                     <CardContent className="px-3 pb-2 flex flex-col gap-3">
@@ -1150,29 +1337,9 @@ export function EditorLesson({ lessonId }: EditorLessonProps) {
                                 {...field}
                                 value={field.value ?? ''}
                                 className="h-8 text-xs font-mono"
-                                placeholder={t('lessonForm.videoUrlPlaceholder')}
-                              />
-                            </FormControl>
-                            <FormMessage className="text-xs" />
-                          </FormItem>
-                        )}
-                      />
-
-                      <FormField
-                        control={form.control}
-                        name="transcription"
-                        render={({ field }) => (
-                          <FormItem>
-                            <FormLabel className="text-xs">
-                              {t('lessonForm.tabTranscription')}
-                            </FormLabel>
-                            <FormControl>
-                              <Textarea
-                                {...field}
-                                value={field.value ?? ''}
-                                rows={5}
-                                className="text-xs resize-none font-mono"
-                                placeholder={t('lessonForm.transcriptionPlaceholder')}
+                                placeholder={t(
+                                  'lessonForm.videoUrlPlaceholder'
+                                )}
                               />
                             </FormControl>
                             <FormMessage className="text-xs" />
@@ -1248,8 +1415,12 @@ export function EditorLesson({ lessonId }: EditorLessonProps) {
                                   setSelectedQuestion(found);
                                 }}
                                 placeholder={t('questionEditor.selectQuestion')}
-                                searchPlaceholder={t('questionEditor.searchQuestion')}
-                                emptyLabel={t('questionEditor.noQuestionsFound')}
+                                searchPlaceholder={t(
+                                  'questionEditor.searchQuestion'
+                                )}
+                                emptyLabel={t(
+                                  'questionEditor.noQuestionsFound'
+                                )}
                                 entityLabel={t('questionEditor.questionEntity')}
                                 options={MOCK_QUESTIONS}
                                 getOptionValue={(o) => o.id}
@@ -1295,10 +1466,309 @@ export function EditorLesson({ lessonId }: EditorLessonProps) {
             </ScrollArea>
           </TabsContent>
 
+          {/* ── Tab Transcrição ─────────────────────────────────────────── */}
+          <TabsContent value="transcricao" className="flex-1 min-h-0 mt-0">
+            <ScrollArea className="h-full">
+              <div className="flex flex-col gap-3 p-3">
+                {watchedType !== 'video' ? (
+                  <Card className="bg-muted/20 py-2 gap-2">
+                    <CardContent className="px-3 py-4">
+                      <p className="text-xs text-muted-foreground">
+                        {t('lessonForm.transcriptionVideoOnly')}
+                      </p>
+                    </CardContent>
+                  </Card>
+                ) : (
+                  <Card className="bg-muted/20 py-2 gap-2">
+                    <CardHeader className="px-3 pt-2 pb-1">
+                      <CardTitle className="text-xs font-medium text-muted-foreground uppercase tracking-wider flex items-center justify-between gap-2">
+                        <span>{t('lessonForm.transcriptionSegments')}</span>
+                        <Button
+                          type="button"
+                          variant="outline"
+                          size="sm"
+                          className="h-6 text-xs px-2"
+                          onClick={() =>
+                            setTranscriptionSegments((prev) => [
+                              ...prev,
+                              {
+                                id: segmentId(),
+                                start: '00:00',
+                                end: '00:15',
+                                text: '',
+                              },
+                            ])
+                          }
+                        >
+                          <Plus className="size-3 mr-1" />
+                          {t('lessonForm.newTranscriptionSegment')}
+                        </Button>
+                      </CardTitle>
+                    </CardHeader>
+                    <CardContent className="px-3 pb-2 flex flex-col gap-2">
+                      {transcriptionSegments.map((segment, index) => (
+                        <div
+                          key={segment.id}
+                          className="rounded-md border bg-background/80 p-2"
+                        >
+                          <div className="grid grid-cols-1 md:grid-cols-[92px_92px_1fr_auto] gap-2 items-start">
+                            <Input
+                              value={segment.start}
+                              onChange={(event) =>
+                                setTranscriptionSegments((prev) =>
+                                  prev.map((item) =>
+                                    item.id === segment.id
+                                      ? {
+                                          ...item,
+                                          start: event.target.value,
+                                        }
+                                      : item
+                                  )
+                                )
+                              }
+                              onBlur={() =>
+                                setTranscriptionSegments((prev) =>
+                                  prev.map((item) =>
+                                    item.id === segment.id
+                                      ? {
+                                          ...item,
+                                          start: normalizeTimeInput(item.start),
+                                        }
+                                      : item
+                                  )
+                                )
+                              }
+                              className="h-8 text-xs font-mono"
+                              placeholder="00:00"
+                            />
+                            <Input
+                              value={segment.end}
+                              onChange={(event) =>
+                                setTranscriptionSegments((prev) =>
+                                  prev.map((item) =>
+                                    item.id === segment.id
+                                      ? {
+                                          ...item,
+                                          end: event.target.value,
+                                        }
+                                      : item
+                                  )
+                                )
+                              }
+                              onBlur={() =>
+                                setTranscriptionSegments((prev) =>
+                                  prev.map((item) =>
+                                    item.id === segment.id
+                                      ? {
+                                          ...item,
+                                          end: normalizeTimeInput(item.end),
+                                        }
+                                      : item
+                                  )
+                                )
+                              }
+                              className="h-8 text-xs font-mono"
+                              placeholder="00:15"
+                            />
+                            <Textarea
+                              value={segment.text}
+                              onChange={(event) =>
+                                setTranscriptionSegments((prev) =>
+                                  prev.map((item) =>
+                                    item.id === segment.id
+                                      ? {
+                                          ...item,
+                                          text: event.target.value,
+                                        }
+                                      : item
+                                  )
+                                )
+                              }
+                              rows={2}
+                              className="text-xs resize-y"
+                              placeholder={t(
+                                'lessonForm.transcriptionSegmentPlaceholder',
+                                {
+                                  count: index + 1,
+                                }
+                              )}
+                            />
+                            <Button
+                              type="button"
+                              variant="ghost"
+                              size="icon"
+                              className="size-8 text-muted-foreground hover:text-destructive"
+                              onClick={() =>
+                                setTranscriptionSegments((prev) => {
+                                  if (prev.length === 1) {
+                                    const first = prev[0];
+                                    return first ? [{ ...first, text: '' }] : [];
+                                  }
+
+                                  return prev.filter(
+                                    (item) => item.id !== segment.id
+                                  );
+                                })
+                              }
+                              aria-label={t(
+                                'lessonForm.removeTranscriptionSegment',
+                                {
+                                  count: index + 1,
+                                }
+                              )}
+                            >
+                              <X className="size-3.5" />
+                            </Button>
+                          </div>
+                        </div>
+                      ))}
+                      <p className="text-[0.65rem] text-muted-foreground">
+                        {t('lessonForm.transcriptionAcceptedFormats')}
+                      </p>
+                    </CardContent>
+                  </Card>
+                )}
+              </div>
+            </ScrollArea>
+          </TabsContent>
+
           {/* ── Tab Recursos ─────────────────────────────────────────────── */}
           <TabsContent value="recursos" className="flex-1 min-h-0 mt-0">
             <ScrollArea className="h-full">
               <div className="flex flex-col gap-3 p-3">
+                {watchedType === 'video' &&
+                  watchedVideoProvider === 'file_storage' && (
+                    <Card className="bg-muted/20 py-2 gap-2">
+                      <CardHeader className="px-3 pt-2 pb-1">
+                        <CardTitle className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
+                          {t('lessonForm.fileStorageVideosByResolution')}
+                        </CardTitle>
+                      </CardHeader>
+                      <CardContent className="px-3 pb-2 flex flex-col gap-3">
+                        <div className="grid grid-cols-1 md:grid-cols-[160px_1fr] gap-2">
+                          <Input
+                            value={videoResolution}
+                            onChange={(event) =>
+                              setVideoResolution(event.target.value)
+                            }
+                            className="h-8 text-xs"
+                            placeholder={t(
+                              'lessonForm.videoResolutionPlaceholder'
+                            )}
+                          />
+                          <Button
+                            type="button"
+                            variant="outline"
+                            className="h-8 text-xs"
+                            disabled={isUploading}
+                            onClick={() => videoInputRef.current?.click()}
+                          >
+                            <UploadCloud className="size-3.5 mr-1" />
+                            {t('lessonForm.uploadVideoForResolution')}
+                          </Button>
+                          <input
+                            ref={videoInputRef}
+                            type="file"
+                            multiple
+                            accept="video/*"
+                            className="hidden"
+                            onChange={(event) => {
+                              if (event.target.files) {
+                                void handleVideoVariantFiles(
+                                  Array.from(event.target.files)
+                                );
+                                event.target.value = '';
+                              }
+                            }}
+                          />
+                        </div>
+
+                        {localResources.filter((res) =>
+                          res.type.startsWith('video/')
+                        ).length === 0 ? (
+                          <p className="text-xs text-muted-foreground">
+                            {t('lessonForm.noResolutionVideosYet')}
+                          </p>
+                        ) : (
+                          <div className="flex flex-col gap-1">
+                            {localResources
+                              .filter((res) => res.type.startsWith('video/'))
+                              .map((res) => {
+                                const resolution =
+                                  res.type.replace('video/', '') || 'N/A';
+                                return (
+                                  <div
+                                    key={res.id}
+                                    className="flex items-center gap-2 rounded-md border bg-background/80 px-2.5 py-2"
+                                  >
+                                    <Video className="size-3.5 shrink-0 text-blue-500" />
+                                    <div className="flex-1 min-w-0">
+                                      <p className="text-xs truncate font-medium">
+                                        {res.name}
+                                      </p>
+                                      <p className="text-[0.65rem] text-muted-foreground">
+                                        {resolution}
+                                        {res.size ? ` · ${res.size}` : ''}
+                                      </p>
+                                    </div>
+                                    <Button
+                                      type="button"
+                                      variant="ghost"
+                                      size="icon"
+                                      className="size-6 shrink-0"
+                                      onClick={() => void openResource(res)}
+                                      aria-label={t(
+                                        'lessonForm.openVideoAria',
+                                        {
+                                          name: res.name,
+                                        }
+                                      )}
+                                    >
+                                      <ExternalLink className="size-3" />
+                                    </Button>
+                                    <Button
+                                      type="button"
+                                      variant="ghost"
+                                      size="icon"
+                                      className="size-6 shrink-0"
+                                      onClick={() =>
+                                        void handleResourceDownload(res)
+                                      }
+                                      aria-label={t(
+                                        'lessonForm.downloadVideoAria',
+                                        {
+                                          name: res.name,
+                                        }
+                                      )}
+                                    >
+                                      <Download className="size-3" />
+                                    </Button>
+                                    <Button
+                                      type="button"
+                                      variant="ghost"
+                                      size="icon"
+                                      className="size-6 shrink-0 text-muted-foreground hover:text-destructive"
+                                      onClick={() =>
+                                        void removeResource(res.id)
+                                      }
+                                      aria-label={t(
+                                        'lessonForm.removeVideoAria',
+                                        {
+                                          name: res.name,
+                                        }
+                                      )}
+                                    >
+                                      <X className="size-3" />
+                                    </Button>
+                                  </div>
+                                );
+                              })}
+                          </div>
+                        )}
+                      </CardContent>
+                    </Card>
+                  )}
+
                 {/* Drop zone */}
                 <div
                   role="button"
@@ -1548,13 +2018,13 @@ export function EditorLesson({ lessonId }: EditorLessonProps) {
                       <SelectValue />
                     </SelectTrigger>
                     <SelectContent>
-                      {(
-                        Object.keys(questionTypeLabels) as QuestionType[]
-                      ).map((t) => (
-                        <SelectItem key={t} value={t}>
-                          {questionTypeLabels[t]}
-                        </SelectItem>
-                      ))}
+                      {(Object.keys(questionTypeLabels) as QuestionType[]).map(
+                        (t) => (
+                          <SelectItem key={t} value={t}>
+                            {questionTypeLabels[t]}
+                          </SelectItem>
+                        )
+                      )}
                     </SelectContent>
                   </Select>
                 </div>