@hed-hog/lms 0.0.365 → 0.0.370

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

@@ -0,0 +1,200 @@
+'use client';
+
+import { Button } from '@/components/ui/button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { useApp } from '@hed-hog/next-app-provider';
+import type HlsType from 'hls.js';
+import { ChevronDown, Loader2, Subtitles, VideoOff } from 'lucide-react';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import type { TranscriptionLocale } from '../_data/use-transcription-segments';
+
+interface LessonVideoPreviewProps {
+  lessonId: string;
+  locales?: TranscriptionLocale[];
+}
+
+export function LessonVideoPreview({ lessonId, locales = [] }: LessonVideoPreviewProps) {
+  const { request } = useApp();
+  const videoRef = useRef<HTMLVideoElement>(null);
+  const hlsRef = useRef<HlsType | null>(null);
+
+  const [hlsToken, setHlsToken] = useState<string | null>(null);
+  const [loadError, setLoadError] = useState<string | null>(null);
+  const [selectedLocaleId, setSelectedLocaleId] = useState<number | null>(null);
+  const [subtitleLabel, setSubtitleLabel] = useState<string>('Desativada');
+  const [subtitleLoading, setSubtitleLoading] = useState(false);
+
+  const numericId = parseInt(lessonId, 10);
+  const apiBase = process.env.NEXT_PUBLIC_API_BASE_URL ?? '';
+
+  // Filter out null-id locales (no locale assigned)
+  const availableLocales = locales.filter((l) => l.id !== null);
+
+  // Fetch HLS token on mount
+  useEffect(() => {
+    if (isNaN(numericId)) return;
+    setHlsToken(null);
+    setLoadError(null);
+    setSelectedLocaleId(null);
+    setSubtitleLabel('Desativada');
+    request<{ token: string }>({
+      url: `/lms/lessons/${numericId}/preview/hls-token`,
+      method: 'GET',
+    })
+      .then((res) => setHlsToken(res.data.token))
+      .catch(() => setLoadError('Nenhum stream HLS disponível para esta aula.'));
+  }, [numericId]);
+
+  // Mount HLS player when token is ready
+  useEffect(() => {
+    const video = videoRef.current;
+    if (!video || !hlsToken) return;
+
+    const src = `${apiBase}/lms/platforma/hls/${hlsToken}/master.m3u8`;
+
+    let hls: HlsType | null = null;
+
+    import('hls.js').then(({ default: Hls }) => {
+      if (Hls.isSupported()) {
+        hls = new Hls({ enableWorker: false });
+        hls.loadSource(src);
+        hls.attachMedia(video);
+        hlsRef.current = hls;
+      } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
+        video.src = src;
+      } else {
+        setLoadError('Este navegador não suporta reprodução HLS.');
+      }
+    });
+
+    return () => {
+      hls?.destroy();
+      hlsRef.current = null;
+    };
+  }, [hlsToken, apiBase]);
+
+  const applySubtitle = useCallback(
+    async (localeId: number | null, label: string) => {
+      const video = videoRef.current;
+      if (!video) return;
+
+      // Remove existing tracks
+      const existingTrack = video.querySelector('track');
+      if (existingTrack) existingTrack.remove();
+
+      setSelectedLocaleId(localeId);
+      setSubtitleLabel(label);
+
+      if (localeId === null) return;
+
+      setSubtitleLoading(true);
+      try {
+        const tokenRes = await request<{ token: string }>({
+          url: `/lms/lessons/${numericId}/preview/subtitles-token?locale_id=${localeId}`,
+          method: 'GET',
+        });
+
+        const vttUrl = `${apiBase}/lms/platforma/subtitles/${tokenRes.data.token}/captions.vtt`;
+        const vttRes = await fetch(vttUrl);
+        const vttText = await vttRes.text();
+        const blob = new Blob([vttText], { type: 'text/vtt' });
+        const blobUrl = URL.createObjectURL(blob);
+
+        const track = document.createElement('track');
+        track.kind = 'subtitles';
+        track.src = blobUrl;
+        track.srclang = 'pt';
+        track.label = label;
+        track.default = true;
+        video.appendChild(track);
+
+        track.addEventListener(
+          'load',
+          () => {
+            if (video.textTracks[0]) {
+              video.textTracks[0].mode = 'showing';
+            }
+          },
+          { once: true },
+        );
+      } catch {
+        setSubtitleLabel('Desativada');
+        setSelectedLocaleId(null);
+      } finally {
+        setSubtitleLoading(false);
+      }
+    },
+    [numericId, apiBase, request],
+  );
+
+  if (loadError) {
+    return (
+      <div className="flex flex-col items-center gap-3 py-16 text-center">
+        <VideoOff className="size-10 text-muted-foreground/40" />
+        <p className="text-sm text-muted-foreground">{loadError}</p>
+      </div>
+    );
+  }
+
+  if (!hlsToken) {
+    return (
+      <div className="flex items-center justify-center py-16">
+        <Loader2 className="size-6 animate-spin text-muted-foreground" />
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-col gap-3">
+      <div className="relative w-full overflow-hidden rounded-lg bg-black" style={{ aspectRatio: '16/9' }}>
+        <video
+          ref={videoRef}
+          controls
+          className="h-full w-full"
+          playsInline
+        />
+      </div>
+
+      {availableLocales.length > 0 && (
+        <div className="flex items-center gap-2">
+          <Subtitles className="size-4 text-muted-foreground shrink-0" />
+          <span className="text-xs text-muted-foreground">Legendas:</span>
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button variant="outline" size="sm" className="h-7 gap-1 text-xs" disabled={subtitleLoading}>
+                {subtitleLoading ? (
+                  <Loader2 className="size-3 animate-spin" />
+                ) : (
+                  subtitleLabel
+                )}
+                <ChevronDown className="size-3" />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="start">
+              <DropdownMenuItem
+                onClick={() => applySubtitle(null, 'Desativada')}
+                className={selectedLocaleId === null ? 'font-medium' : ''}
+              >
+                Desativada
+              </DropdownMenuItem>
+              {availableLocales.map((loc) => (
+                <DropdownMenuItem
+                  key={loc.id}
+                  onClick={() => applySubtitle(loc.id!, loc.name ?? loc.code ?? String(loc.id))}
+                  className={selectedLocaleId === loc.id ? 'font-medium' : ''}
+                >
+                  {loc.name ?? loc.code ?? `Idioma ${loc.id}`}
+                </DropdownMenuItem>
+              ))}
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+      )}
+    </div>
+  );
+}

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

@@ -185,6 +185,7 @@ export function TreeRowLesson({
   const attachedResourceCount = getLessonAttachedResourceCount(data);
   const uploadedVideoCount = getLessonUploadedVideoCount(data);
   const hasTranscription =
+    Boolean(data.hasTranscription) ||
     Boolean(data.transcription?.trim()) ||
     Boolean(data.transcriptionSegments?.some((segment) => segment.text.trim()));
 

package/hedhog/frontend/app/courses/[id]/structure/_components/types.ts.ejs

@@ -67,6 +67,7 @@ export interface LessonInstructor {
 
 export interface TranscriptionSegment {
   id: number;
+  localeId?: number | null;
   startSeconds: number;
   endSeconds: number;
   text: string;
@@ -102,6 +103,8 @@ export interface Lesson {
   autoDuration?: boolean;
   transcription?: string;
   transcriptionSegments?: TranscriptionSegment[];
+  /** Denormalized flag from the backend (course_lesson.has_transcription). */
+  hasTranscription?: boolean;
   localeId?: number | null;
   videoConversionJobId?: number;
   // Questão

package/hedhog/frontend/app/courses/[id]/structure/_components/xp-premium-pills.tsx.ejs

@@ -11,14 +11,7 @@ export function XpHighlightPill({
   value: string;
   tone: 'sky' | 'amber' | 'emerald' | 'violet';
 }) {
-  const toneClassName =
-    tone === 'sky'
-      ? 'border-sky-500/15 bg-sky-500/10 text-sky-700 dark:text-sky-300'
-      : tone === 'amber'
-        ? 'border-amber-500/15 bg-amber-500/10 text-amber-700 dark:text-amber-300'
-        : tone === 'emerald'
-          ? 'border-emerald-500/15 bg-emerald-500/10 text-emerald-700 dark:text-emerald-300'
-          : 'border-violet-500/15 bg-violet-500/10 text-violet-700 dark:text-violet-300';
+  const toneClassName = 'border-border/60 bg-muted/30 text-muted-foreground';
 
   return (
     <div

package/hedhog/frontend/app/courses/[id]/structure/_data/adapters/course-structure.adapter.ts.ejs

@@ -15,7 +15,7 @@
  * ⚠️ KNOWN MISMATCHES (documented with inline comments):
  *   1. exameVinculado (number) ↔ linkedExam (string) — converted with String()/Number()
  *   2. Session.order — not returned by API; inferred from sorted array position.
- *   3. Resource.size / url — not returned by API; left as empty string / undefined.
+ *   3. Resource.url — not returned by API; left as undefined.
  */
 
 import type {
@@ -69,6 +69,22 @@ function normalizeVideoProvider(
   return undefined;
 }
 
+/**
+ * Format a byte count into a human-readable file size (B/KB/MB/GB).
+ * Returns an empty string when the size is unknown or zero.
+ */
+function formatFileSize(bytes?: number | null): string {
+  if (!bytes || bytes <= 0) return '';
+  const units = ['B', 'KB', 'MB', 'GB', 'TB'];
+  const exponent = Math.min(
+    Math.floor(Math.log(bytes) / Math.log(1024)),
+    units.length - 1
+  );
+  const value = bytes / 1024 ** exponent;
+  const formatted = exponent === 0 ? String(value) : value.toFixed(1);
+  return `${formatted} ${units[exponent]}`;
+}
+
 /** Normalize a raw API resource to the frontend Resource shape. */
 function normalizeResource(raw: ApiLessonResource): Resource {
   const withUpload = raw as ApiLessonResource & {
@@ -83,12 +99,7 @@ function normalizeResource(raw: ApiLessonResource): Resource {
     fileId: raw.fileId ?? undefined,
     name: raw.nome,
     type: raw.type ?? '',
-    /**
-     * ⚠️ BACKEND NOTE: file size is not returned in the API response.
-     * TODO[BACKEND]: Include `size` in the lesson resource response from
-     * CourseStructureService.getLessonById().
-     */
-    size: '',
+    size: formatFileSize(raw.tamanho),
     public: raw.is_public ?? true,
     uploadedAt:
       withUpload.uploadedAt ??
@@ -184,6 +195,7 @@ export function normalizeLesson(raw: ApiLesson, order = 0): Lesson {
     videoUrl: raw.videoUrl,
     autoDuration: raw.duracaoAutomatica,
     transcription: raw.transcricao,
+    hasTranscription: Boolean(raw.temTranscricao),
     localeId: raw.locale_id ?? null,
     videoConversionJobId: raw.videoConversionJobId,
     /**

package/hedhog/frontend/app/courses/[id]/structure/_data/types/api-course.types.ts.ejs

@@ -21,6 +21,8 @@ export interface ApiLessonResource {
   id: number;
   nome: string;
   fileId?: number | null;
+  /** File size in bytes (0 when unknown). */
+  tamanho?: number;
   /** MIME category or custom type label; may be null. */
   type?: string | null;
   is_public?: boolean;
@@ -96,6 +98,8 @@ export interface ApiLesson {
   videoUrl?: string;
   duracaoAutomatica?: boolean;
   transcricao?: string;
+  /** Whether the lesson already has transcription segments (denormalized flag). */
+  temTranscricao?: boolean;
   videoConversionJobId?: number;
   /**
    * ID of the linked exam (when tipo === 'questao').

package/hedhog/frontend/app/courses/[id]/structure/_data/use-course-ai-costs.ts.ejs

@@ -0,0 +1,40 @@
+'use client';
+
+import { useApp, useQuery } from '@hed-hog/next-app-provider';
+
+export type CourseAiCostByJobType = {
+  jobType: string;
+  costUsd: number;
+  runs: number;
+};
+
+export type CourseAiCostByLesson = {
+  lessonId: number | null;
+  lessonTitle: string | null;
+  costUsd: number;
+  runs: number;
+};
+
+export type CourseAiCosts = {
+  currency: string;
+  totalCostUsd: number;
+  byJobType: CourseAiCostByJobType[];
+  byLesson: CourseAiCostByLesson[];
+};
+
+export function useCourseAiCostsQuery(courseId: string | null) {
+  const { request } = useApp();
+
+  return useQuery<CourseAiCosts | null>({
+    queryKey: ['course-ai-costs', courseId],
+    enabled: Boolean(courseId),
+    queryFn: async () => {
+      const response = await request<CourseAiCosts>({
+        url: `/lms/courses/${courseId}/structure/ai-costs`,
+        method: 'GET',
+      });
+      return response.data ?? null;
+    },
+    initialData: null,
+  });
+}

package/hedhog/frontend/app/courses/[id]/structure/_data/use-course-content-overview.ts.ejs

@@ -17,6 +17,8 @@ export type CourseContentOverview = {
     lessonCount: number;
     withTranscription: number;
     withXp: number;
+    withVideo: number;
+    withProcessedVideo: number;
   };
   media: {
     extractedImageCount: number;

package/hedhog/frontend/app/courses/[id]/structure/_data/use-course-exports.ts.ejs

@@ -3,6 +3,30 @@
 import { useApp, useQuery } from '@hed-hog/next-app-provider';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 
+export type CourseTranscriptionLocale = {
+  id: number;
+  code: string;
+  name: string;
+  region: string | null;
+};
+
+export function useCourseTranscriptionLocalesQuery(courseId: string | null) {
+  const { request } = useApp();
+
+  return useQuery<CourseTranscriptionLocale[]>({
+    queryKey: ['course-transcription-locales', courseId],
+    enabled: Boolean(courseId),
+    queryFn: async () => {
+      const res = await request<CourseTranscriptionLocale[]>({
+        url: `/lms/courses/${courseId}/structure/transcription-locales`,
+        method: 'GET',
+      });
+      return res.data ?? [];
+    },
+    initialData: [],
+  });
+}
+
 export type ScormVisualSettings = {
   primaryColor?: string;
   fontFamily?: string;
@@ -66,6 +90,7 @@ export function useCreateCourseExportMutation(courseId: string | null) {
     mutationFn: async (payload: {
       format: 'scorm_1_2';
       visualSettings?: ScormVisualSettings;
+      subtitleLocaleIds?: number[];
     }) => {
       const res = await request<{
         exportId: number;

package/hedhog/frontend/app/courses/[id]/structure/_data/use-course-structure-mutations.ts.ejs

@@ -29,6 +29,7 @@ import { useApp } from '@hed-hog/next-app-provider';
 import { useStructureStore } from '../_components/store';
 import type {
   LessonFormValues,
+  LessonStatus,
   Resource,
   SessionFormValues,
 } from '../_components/types';
@@ -605,6 +606,153 @@ export function useBulkDeleteMutation() {
   });
 }
 
+// ─────────────────────────────────────────────────────────────────────────────
+// useBulkUpdateMutation
+// ─────────────────────────────────────────────────────────────────────────────
+
+interface BulkUpdateVars {
+  /** Lessons to update (publish state and/or production status). */
+  lessons: Array<{ lessonId: string; sessionId: string }>;
+  /** Sessions to update (publish state only). */
+  sessionIds: Array<{ sessionId: string }>;
+  /** Field changes to apply to every selected item. */
+  changes: { published?: boolean; status?: LessonStatus };
+}
+
+/**
+ * Bulk field update: iterate PATCH calls since no batch endpoint exists.
+ *
+ * Strategy mirrors `useBulkDeleteMutation`:
+ *  1. PATCH each lesson with the requested changes (published / production status).
+ *     When publishing (`published === true`), send `confirmarPublicacaoComStatus`
+ *     so the backend doesn't reject lessons whose status isn't `publicada`.
+ *  2. PATCH each session (only `published` applies to sessions).
+ *  3. Use Promise.allSettled so one failure doesn't abort the rest.
+ *  4. Apply successful items to the store + cache; show partial-error toast.
+ */
+export function useBulkUpdateMutation() {
+  const t = useTranslations('lms.courseStructure');
+  const { request } = useApp();
+  const queryClient = useQueryClient();
+  const courseId = useStructureStore((s) => s.courseId);
+  const updateLessonInStore = useStructureStore((s) => s.updateLesson);
+  const updateSessionInStore = useStructureStore((s) => s.updateSession);
+
+  return useMutation({
+    mutationFn: async ({ lessons, sessionIds, changes }: BulkUpdateVars) => {
+      const lessonPayload = toUpdateLessonPayload({
+        ...(changes.published !== undefined && { published: changes.published }),
+        ...(changes.status !== undefined && { status: changes.status }),
+        ...(changes.published === true && {
+          confirmarPublicacaoComStatus: true,
+        }),
+      });
+      const lessonResults = await Promise.allSettled(
+        lessons.map(({ lessonId, sessionId }) =>
+          apiUpdateLesson(request, courseId, sessionId, lessonId, lessonPayload)
+        )
+      );
+      // Sessions only carry a `published` flag.
+      const sessionPayload = toUpdateSessionPayload(
+        changes.published !== undefined ? { published: changes.published } : {}
+      );
+      const sessionResults =
+        changes.published !== undefined
+          ? await Promise.allSettled(
+              sessionIds.map(({ sessionId }) =>
+                apiUpdateSession(request, courseId, sessionId, sessionPayload)
+              )
+            )
+          : [];
+      return {
+        lessons,
+        sessionIds,
+        changes,
+        lessonResults,
+        sessionResults,
+      };
+    },
+    onSuccess: ({
+      lessons,
+      sessionIds,
+      changes,
+      lessonResults,
+      sessionResults,
+    }) => {
+      const successLessonIds = lessons
+        .filter((_, i) => lessonResults[i]?.status === 'fulfilled')
+        .map((l) => l.lessonId);
+      const successSessionIds = sessionIds
+        .filter((_, i) => sessionResults[i]?.status === 'fulfilled')
+        .map((s) => s.sessionId);
+      const errorCount = [...lessonResults, ...sessionResults].filter(
+        (r) => r.status === 'rejected'
+      ).length;
+
+      const lessonPatch: Partial<LessonFormValues> = {
+        ...(changes.published !== undefined && { published: changes.published }),
+        // Publishing forces production status to `publicada` on the backend.
+        ...(changes.published === true
+          ? { status: 'publicada' as LessonStatus }
+          : changes.status !== undefined && { status: changes.status }),
+      };
+
+      successLessonIds.forEach((id) => updateLessonInStore(id, lessonPatch));
+      if (changes.published !== undefined) {
+        successSessionIds.forEach((id) =>
+          updateSessionInStore(id, {
+            published: changes.published,
+          } as SessionFormValues)
+        );
+      }
+
+      // Patch the structure cache so the tree reflects changes immediately.
+      const lessonSet = new Set(successLessonIds);
+      const sessionSet = new Set(successSessionIds);
+      queryClient.setQueryData<CourseStructureCacheData>(
+        courseStructureQueryKey(courseId),
+        (old) => {
+          if (!old) return old;
+          return {
+            ...old,
+            lessons: old.lessons.map((l) =>
+              lessonSet.has(l.id) ? { ...l, ...lessonPatch } : l
+            ),
+            sessions:
+              changes.published === undefined
+                ? old.sessions
+                : old.sessions.map((s) =>
+                    sessionSet.has(s.id)
+                      ? { ...s, published: changes.published! }
+                      : s
+                  ),
+          };
+        }
+      );
+      void queryClient.invalidateQueries({
+        queryKey: courseStructureQueryKey(courseId),
+      });
+
+      const successCount = successLessonIds.length + successSessionIds.length;
+      if (errorCount === 0) {
+        toast.success(
+          `${successCount} ${successCount === 1 ? 'item atualizado' : 'itens atualizados'}`
+        );
+      } else {
+        toast.error(
+          `${errorCount} falha${errorCount > 1 ? 's' : ''} — ${successCount} atualizado${successCount !== 1 ? 's' : ''}`
+        );
+      }
+    },
+    onError: () => {
+      void queryClient.invalidateQueries({
+        queryKey: courseStructureQueryKey(courseId),
+      });
+      toast.error(t('mutations.lesson.saveError'));
+    },
+  });
+}
+
 // ─────────────────────────────────────────────────────────────────────────────
 // useReorderSessionsMutation
 // ─────────────────────────────────────────────────────────────────────────────