@hed-hog/lms 0.0.366 → 0.0.370

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

@@ -16,6 +16,7 @@ import {
   GripVertical,
   HelpCircle,
   Image,
+  Languages,
   ListChecks,
   Loader2,
   Lock,
@@ -33,6 +34,7 @@ import {
   type LucideIcon,
 } from 'lucide-react';
 import { useTranslations } from 'next-intl';
+import Link from 'next/link';
 import { useEffect, useRef, useState } from 'react';
 import { useForm, useWatch } from 'react-hook-form';
 import { toast } from 'sonner';
@@ -70,6 +72,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@/components/ui/select';
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
 import { Separator } from '@/components/ui/separator';
 import {
   Sheet,
@@ -130,11 +133,16 @@ import {
 } from '../_data/use-course-structure-query';
 import { useLmsSettingsQuery } from '../_data/use-lms-settings-query';
 import {
+  useDeleteTranscriptionLocaleMutation,
   useStartTranscriptionMutation,
+  useTranscriptionLocalesQuery,
   useTranscriptionSegmentsQuery,
+  useTranslateTranscriptionMutation,
   useUpdateTranscriptionSegmentsMutation,
+  type TranscriptionLocale,
 } from '../_data/use-transcription-segments';
 import { LessonXpTab } from './detail-lesson-xp-tab';
+import { LessonVideoPreview } from './lesson-video-preview';
 import { IconActionTooltip } from './icon-action-tooltip';
 import { useStructureStore } from './store';
 import type {
@@ -148,6 +156,14 @@ import type {
 
 const EMPTY_VIDEO_FRAMES: VideoFrame[] = [];
 
+function toFileSafeName(value: string): string {
+  return value
+    .replace(/[<>:"/\\|?*]/g, '') // caracteres ilegais em Win/Unix
+    .replace(/\s+/g, '_') // espaços/tabs/quebras -> underscore
+    .replace(/_+/g, '_') // colapsa underscores
+    .replace(/^[._]+|[._]+$/g, ''); // remove dots/underscores nas pontas
+}
+
 function formatFileSize(bytes: number): string {
   if (bytes < 1024) return `${bytes} B`;
   if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
@@ -795,6 +811,7 @@ export function EditorLesson({ lessonId, defaultTab, onTabChange }: EditorLesson
   );
   const updateLessonInStore = useStructureStore((s) => s.updateLesson);
   const sessions = useStructureStore((s) => s.sessions);
+  const course = useStructureStore((s) => s.course);
   const persistedVideoProvider: VideoProvider | undefined =
     lesson?.videoProvider === 'youtube' || lesson?.videoProvider === 'vimeo'
       ? lesson.videoProvider
@@ -802,12 +819,24 @@ export function EditorLesson({ lessonId, defaultTab, onTabChange }: EditorLesson
         ? 'file_storage'
         : undefined;
   const videoFrames = lesson?.frames ?? EMPTY_VIDEO_FRAMES;
+  const [selectedLocaleId, setSelectedLocaleId] = useState<number | null | undefined>(undefined);
+  const [translateOpen, setTranslateOpen] = useState(false);
+  const [targetLocaleId, setTargetLocaleId] = useState<number | null>(null);
+  const [activeTranslationJob, setActiveTranslationJob] = useState<{
+    queueJobId: number;
+    targetLocaleName: string;
+  } | null>(null);
   const updateLesson = useUpdateLessonMutation();
   const updateTranscriptionSegments = useUpdateTranscriptionSegmentsMutation(
-    lesson?.id ?? null
+    lesson?.id ?? null,
+    selectedLocaleId,
   );
   const { mutate: startTranscription, isPending: isStartingTranscription } =
     useStartTranscriptionMutation(lesson?.id ?? null);
+  const { mutate: translateTranscription, isPending: isTranslating } =
+    useTranslateTranscriptionMutation(lesson?.id ?? null);
+  const { mutate: deleteTranscriptionLocale } =
+    useDeleteTranscriptionLocaleMutation(lesson?.id ?? null);
   const updateResourceTypeMutation = useUpdateResourceTypeMutation();
   const deleteLesson = useDeleteLessonMutation();
   const showConfirm = useStructureStore((s) => s.showConfirm);
@@ -1077,7 +1106,55 @@ export function EditorLesson({ lessonId, defaultTab, onTabChange }: EditorLesson
   const {
     data: fetchedTranscriptionSegments = [],
     isLoading: isLoadingTranscription,
-  } = useTranscriptionSegmentsQuery(lesson?.id ?? null);
+  } = useTranscriptionSegmentsQuery(lesson?.id ?? null, selectedLocaleId);
+
+  const { data: transcriptionLocales = [], refetch: refetchLocales } =
+    useTranscriptionLocalesQuery(lesson?.id ?? null);
+
+  const { data: allLocales = [] } = useQuery<TranscriptionLocale[]>({
+    queryKey: ['all-locales-editor'],
+    queryFn: async () => {
+      const res = await request<{ data: TranscriptionLocale[] }>({
+        url: '/core/locales?limit=200',
+        method: 'GET',
+      });
+      return (res.data?.data ?? []) as TranscriptionLocale[];
+    },
+    enabled: translateOpen,
+    initialData: [],
+  });
+
+  const availableTargetLocales = allLocales.filter(
+    (l) => l.id !== null && !transcriptionLocales.some((tl) => tl.id === l.id),
+  );
+
+  const handleDeleteLocale = (loc: TranscriptionLocale) => {
+    const name = loc.name ?? loc.code ?? 'este idioma';
+    showConfirm({
+      title: 'Excluir transcrição',
+      description: `Excluir a transcrição/tradução em "${name}" desta aula? Esta ação não pode ser desfeita.`,
+      confirmText: 'Excluir',
+      destructive: true,
+      onConfirm: () => {
+        deleteTranscriptionLocale(loc.id, {
+          onSuccess: () => {
+            toast.success('Transcrição excluída.');
+            if (selectedLocaleId === loc.id) setSelectedLocaleId(undefined);
+            refetchLocales();
+            queryClient.invalidateQueries({
+              queryKey: ['lesson-transcription-locales', lesson?.id],
+            });
+            queryClient.invalidateQueries({
+              queryKey: ['lesson-transcription-segments', lesson?.id],
+            });
+          },
+          onError: (err) => {
+            toast.error(err.message || 'Erro ao excluir a transcrição.');
+          },
+        });
+      },
+    });
+  };
 
   const {
     data: conversionJob,
@@ -1153,6 +1230,15 @@ export function EditorLesson({ lessonId, defaultTab, onTabChange }: EditorLesson
     useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates })
   );
 
+  useEffect(() => {
+    if (transcriptionLocales.length > 0 && selectedLocaleId === undefined) {
+      setSelectedLocaleId(transcriptionLocales[0]?.id ?? null);
+    }
+    if (transcriptionLocales.length === 0 && selectedLocaleId !== undefined) {
+      setSelectedLocaleId(undefined);
+    }
+  }, [transcriptionLocales, selectedLocaleId]);
+
   useEffect(() => {
     setLocalResources(lesson?.resources ?? []);
     setResourcesDirty(false);
@@ -1165,6 +1251,8 @@ export function EditorLesson({ lessonId, defaultTab, onTabChange }: EditorLesson
     setFrameImageErrorIds(new Set<string>());
     resourceMetadataLoadedRef.current.clear();
     frameMetadataLoadedRef.current.clear();
+    setSelectedLocaleId(undefined);
+    setActiveTranslationJob(null);
   }, [lesson?.id, lesson?.resources, lesson?.videoConversionJobId]); // eslint-disable-line react-hooks/exhaustive-deps
 
   useEffect(() => {
@@ -1424,7 +1512,14 @@ export function EditorLesson({ lessonId, defaultTab, onTabChange }: EditorLesson
   const lessonTypeLabel = t(cfg.labelKey);
   const session = sessions.find((s) => s.id === lesson.sessionId);
   const lessonFullCode = session
-    ? `${session.code}_${lesson.code}_${lesson.title}`
+    ? [
+        session.code,
+        course?.code?.trim() || null,
+        lesson.code,
+        toFileSafeName(lesson.title),
+      ]
+        .filter(Boolean)
+        .join('_')
     : null;
   const originalVideoResource =
     localResources.find((res) => res.type === 'video_original') ?? null;
@@ -1591,6 +1686,27 @@ export function EditorLesson({ lessonId, defaultTab, onTabChange }: EditorLesson
       originalFileId
     );
     setConversionJobId(queued.queueJobId);
+    // Optimistically seed the job cache so the card reflects the active state
+    // (na fila → processando) immediately, instead of briefly showing the
+    // previous job's terminal status while the new job is fetched.
+    queryClient.setQueryData<QueueJobResponse>(['queue-job', queued.queueJobId], {
+      id: queued.queueJobId,
+      status: 'pending',
+      attempts: 0,
+      max_attempts: 0,
+      created_at: new Date().toISOString(),
+      started_at: null,
+      finished_at: null,
+      next_retry_at: null,
+      last_error: null,
+      result: null,
+      queue_job_attempt: [],
+      queue_job_event: [],
+    });
+    // Reflect the new job id on the lesson in the tree store right away so the
+    // árvore shows the phase icon (waiting → processing) without waiting for
+    // the structure refetch to propagate.
+    updateLessonInStore(lessonId, { videoConversionJobId: queued.queueJobId });
     toast.success(
       t('lessonForm.videoConversionQueued', {
         id: queued.queueJobId,
@@ -2414,6 +2530,28 @@ export function EditorLesson({ lessonId, defaultTab, onTabChange }: EditorLesson
     setTranscriptionSegments(updater);
   }
 
+  function handleTranslateInEditor() {
+    if (!targetLocaleId) return;
+    const targetName =
+      availableTargetLocales.find((l) => l.id === targetLocaleId)?.name ?? String(targetLocaleId);
+    translateTranscription(targetLocaleId, selectedLocaleId ?? null, {
+      onSuccess: (result) => {
+        toast.success('Tradução iniciada! Acompanhe o progresso na fila.');
+        setTranslateOpen(false);
+        setTargetLocaleId(null);
+        setActiveTranslationJob({ queueJobId: result.queueJobId, targetLocaleName: targetName });
+        setTimeout(() => {
+          void refetchLocales();
+          void queryClient.invalidateQueries({ queryKey: ['lesson-transcription-segments', lesson?.id] });
+          void queryClient.invalidateQueries({ queryKey: ['lesson-transcription-locales', lesson?.id] });
+        }, 2000);
+      },
+      onError: (err) => {
+        toast.error(err.message || 'Erro ao iniciar a tradução.');
+      },
+    });
+  }
+
   function persistLesson(values: FormValues, shouldConfirmAutoStatus: boolean) {
     if (values.type === 'video') {
       const segmentsPayload = transcriptionSegments
@@ -3112,6 +3250,21 @@ export function EditorLesson({ lessonId, defaultTab, onTabChange }: EditorLesson
           <TabsContent value="conteudo" className="flex-1 min-h-0 mt-0">
             <ScrollArea className="h-full">
               <div className="flex flex-col gap-2 p-2 sm:gap-3 sm:p-3">
+                {/* Player de preview para aulas de vídeo */}
+                {watchedType === 'video' && (
+                  <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">
+                        <Play className="size-3 text-blue-500" />
+                        Preview
+                      </CardTitle>
+                    </CardHeader>
+                    <CardContent className="px-3 pb-2">
+                      <LessonVideoPreview lessonId={lessonId} locales={transcriptionLocales} />
+                    </CardContent>
+                  </Card>
+                )}
+
                 {/* Descrição pública */}
                 <Card className="bg-muted/20 py-2 gap-2">
                   <CardHeader className="px-3 pt-2 pb-1">
@@ -4262,64 +4415,196 @@ export function EditorLesson({ lessonId, defaultTab, onTabChange }: EditorLesson
             <TabsContent value="transcricao" className="flex-1 min-h-0 mt-0">
               <ScrollArea className="h-full">
                 <div className="flex flex-col gap-2 p-2 sm:gap-3 sm:p-3">
+                  {/* Banner de job de tradução ativo */}
+                  {activeTranslationJob && (
+                    <div className="flex items-center justify-between gap-2 rounded-md border border-amber-200 bg-amber-50 dark:border-amber-800 dark:bg-amber-950/30 px-3 py-2 text-sm">
+                      <div className="flex items-center gap-2 min-w-0">
+                        <Loader2 className="size-4 shrink-0 animate-spin text-amber-600 dark:text-amber-400" />
+                        <span className="text-amber-900 dark:text-amber-200 truncate">
+                          Tradução para{' '}
+                          <strong>{activeTranslationJob.targetLocaleName}</strong> em andamento
+                          {' '}· Job #{activeTranslationJob.queueJobId}
+                        </span>
+                      </div>
+                      <div className="flex items-center gap-2 shrink-0">
+                        <Link
+                          href="/queue/jobs"
+                          className="text-xs text-amber-700 dark:text-amber-300 underline underline-offset-2 hover:text-amber-900 dark:hover:text-amber-100"
+                        >
+                          Ver na fila →
+                        </Link>
+                        <button
+                          onClick={() => setActiveTranslationJob(null)}
+                          className="text-amber-600 dark:text-amber-400 hover:text-amber-900 dark:hover:text-amber-100"
+                        >
+                          <X className="size-3.5" />
+                        </button>
+                      </div>
+                    </div>
+                  )}
                   <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>
-                        <div className="flex items-center gap-1.5">
-                          <Button
-                            type="button"
-                            variant="outline"
-                            size="sm"
-                            className="h-6 text-xs px-2"
-                            disabled={isStartingTranscription}
-                            onClick={() =>
-                              startTranscription({
-                                onSuccess: () => {
-                                  toast.success('Transcrição iniciada!');
-                                  queryClient.invalidateQueries({
-                                    queryKey: [
-                                      'lesson-transcription-segments',
-                                      lesson?.id,
-                                    ],
-                                  });
-                                },
-                                onError: (err) => {
-                                  toast.error(
-                                    err.message ||
-                                      'Erro ao iniciar a transcrição.'
-                                  );
-                                },
-                              })
-                            }
-                          >
-                            {isStartingTranscription ? (
-                              <Loader2 className="size-3 mr-1 animate-spin" />
-                            ) : (
-                              <Mic className="size-3 mr-1" />
-                            )}
-                            Iniciar transcrição
-                          </Button>
-                          <Button
-                            type="button"
-                            variant="outline"
-                            size="sm"
-                            className="h-6 text-xs px-2"
-                            onClick={() =>
-                              updateTranscriptionSegmentsState((prev) => [
-                                ...prev,
-                                {
-                                  id: segmentId(),
-                                  start: '00:00',
-                                  end: '00:15',
-                                  text: '',
-                                },
-                              ])
-                            }
-                          >
-                            <Plus className="size-3 mr-1" />
-                            {t('lessonForm.newTranscriptionSegment')}
-                          </Button>
+                      <CardTitle className="text-xs font-medium text-muted-foreground uppercase tracking-wider flex flex-col gap-2">
+                        {/* Linha 1: pills de locale + botão Traduzir */}
+                        {transcriptionLocales.length > 0 && (
+                          <div className="flex items-center justify-between gap-2 flex-wrap">
+                            <div className="flex items-center gap-1.5 flex-wrap">
+                              {transcriptionLocales.map((loc) => (
+                                <div
+                                  key={loc.id ?? 'null'}
+                                  className={cn(
+                                    'flex items-center gap-1 rounded-full pl-2 pr-1 py-0.5 text-[10px] font-medium border transition-colors normal-case',
+                                    selectedLocaleId === loc.id
+                                      ? 'bg-primary text-primary-foreground border-primary'
+                                      : 'bg-muted text-muted-foreground border-border hover:border-primary/50',
+                                  )}
+                                >
+                                  <button
+                                    type="button"
+                                    onClick={() => setSelectedLocaleId(loc.id)}
+                                    className="flex items-center gap-1"
+                                  >
+                                    <Languages className="size-3" />
+                                    {loc.name ?? loc.code ?? 'Desconhecido'}
+                                  </button>
+                                  <button
+                                    type="button"
+                                    onClick={() => handleDeleteLocale(loc)}
+                                    title="Excluir transcrição deste idioma"
+                                    className={cn(
+                                      'rounded-full p-0.5 transition-colors',
+                                      selectedLocaleId === loc.id
+                                        ? 'hover:bg-primary-foreground/20'
+                                        : 'hover:bg-foreground/10',
+                                    )}
+                                  >
+                                    <Trash2 className="size-3" />
+                                  </button>
+                                </div>
+                              ))}
+                            </div>
+                            <Popover open={translateOpen} onOpenChange={setTranslateOpen}>
+                              <PopoverTrigger asChild>
+                                <Button
+                                  type="button"
+                                  size="sm"
+                                  variant="outline"
+                                  className="h-6 text-xs px-2 normal-case"
+                                  disabled={isTranslating}
+                                >
+                                  {isTranslating ? (
+                                    <Loader2 className="size-3 mr-1 animate-spin" />
+                                  ) : (
+                                    <Plus className="size-3 mr-1" />
+                                  )}
+                                  Traduzir
+                                </Button>
+                              </PopoverTrigger>
+                              <PopoverContent className="w-56 p-3" align="end">
+                                <p className="text-xs font-medium mb-2 text-muted-foreground normal-case">
+                                  Traduzir para:
+                                </p>
+                                {availableTargetLocales.length === 0 ? (
+                                  <p className="text-xs text-muted-foreground normal-case">
+                                    Todos os idiomas disponíveis já foram traduzidos.
+                                  </p>
+                                ) : (
+                                  <div className="flex flex-col gap-1">
+                                    {availableTargetLocales.map((loc) => (
+                                      <button
+                                        key={loc.id}
+                                        type="button"
+                                        onClick={() => setTargetLocaleId(loc.id)}
+                                        className={cn(
+                                          'flex items-center gap-2 rounded-md px-2 py-1.5 text-xs text-left transition-colors normal-case',
+                                          targetLocaleId === loc.id
+                                            ? 'bg-primary text-primary-foreground'
+                                            : 'hover:bg-muted',
+                                        )}
+                                      >
+                                        {loc.name ?? loc.code}
+                                      </button>
+                                    ))}
+                                    <Button
+                                      type="button"
+                                      size="sm"
+                                      className="mt-2 w-full h-7 text-xs normal-case"
+                                      disabled={!targetLocaleId || isTranslating}
+                                      onClick={handleTranslateInEditor}
+                                    >
+                                      {isTranslating && (
+                                        <Loader2 className="size-3 mr-1 animate-spin" />
+                                      )}
+                                      Confirmar tradução
+                                    </Button>
+                                  </div>
+                                )}
+                              </PopoverContent>
+                            </Popover>
+                          </div>
+                        )}
+                        {/* Linha 2: título + botões de ação */}
+                        <div className="flex items-center justify-between gap-2">
+                          <span>{t('lessonForm.transcriptionSegments')}</span>
+                          <div className="flex items-center gap-1.5">
+                            <Button
+                              type="button"
+                              variant="outline"
+                              size="sm"
+                              className="h-6 text-xs px-2 normal-case"
+                              disabled={isStartingTranscription}
+                              onClick={() =>
+                                startTranscription({
+                                  onSuccess: () => {
+                                    toast.success('Transcrição iniciada!');
+                                    void queryClient.invalidateQueries({
+                                      queryKey: [
+                                        'lesson-transcription-segments',
+                                        lesson?.id,
+                                      ],
+                                    });
+                                    void queryClient.invalidateQueries({
+                                      queryKey: ['lesson-transcription-locales', lesson?.id],
+                                    });
+                                    void refetchLocales();
+                                  },
+                                  onError: (err) => {
+                                    toast.error(
+                                      err.message ||
+                                        'Erro ao iniciar a transcrição.'
+                                    );
+                                  },
+                                })
+                              }
+                            >
+                              {isStartingTranscription ? (
+                                <Loader2 className="size-3 mr-1 animate-spin" />
+                              ) : (
+                                <Mic className="size-3 mr-1" />
+                              )}
+                              Iniciar transcrição
+                            </Button>
+                            <Button
+                              type="button"
+                              variant="outline"
+                              size="sm"
+                              className="h-6 text-xs px-2 normal-case"
+                              onClick={() =>
+                                updateTranscriptionSegmentsState((prev) => [
+                                  ...prev,
+                                  {
+                                    id: segmentId(),
+                                    start: '00:00',
+                                    end: '00:15',
+                                    text: '',
+                                  },
+                                ])
+                              }
+                            >
+                              <Plus className="size-3 mr-1" />
+                              {t('lessonForm.newTranscriptionSegment')}
+                            </Button>
+                          </div>
                         </div>
                       </CardTitle>
                     </CardHeader>