@hed-hog/lms 0.0.351 → 0.0.354

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

@@ -1,14 +1,21 @@
 'use client';
 
 import { Input } from '@/components/ui/input';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from '@/components/ui/tooltip';
 import { cn } from '@/lib/utils';
 import {
   ClipboardList,
+  Clock3,
   Eye,
   EyeOff,
   FileText,
   Film,
   HelpCircle,
+  Loader2,
   Lock,
   Paperclip,
   ScrollText,
@@ -17,10 +24,19 @@ import {
 } from 'lucide-react';
 import { useTranslations } from 'next-intl';
 import { useEffect, useRef } from 'react';
+import { useApp, useQuery } from '@hed-hog/next-app-provider';
 import { useUpdateLessonMutation } from '../_data/use-course-structure-mutations';
+import {
+  getQueueJob,
+  type QueueJobStatus,
+} from '../_data/services/course-structure.service';
 import { HighlightedText } from './highlighted-text';
 import { useStructureStore } from './store';
 import type { Lesson, LessonStatus, LessonType, Visibility } from './types';
+import {
+  getLessonAttachedResourceCount,
+  getLessonUploadedVideoCount,
+} from './tree-helpers';
 import { useTreeDisplaySettings } from './use-tree-display-settings';
 
 // ── Type configs ──────────────────────────────────────────────────────────────
@@ -79,6 +95,7 @@ export function TreeRowLesson({
   const t = useTranslations('lms.CoursesPage.StructurePage.lessonRow');
   const cfg = LESSON_TYPE_CONFIG[data.type];
   const Icon = cfg.icon;
+  const { request } = useApp();
 
   const statusCfg = data.status ? STATUS_CONFIG[data.status] : null;
   const visibilityCfg = data.visibility
@@ -101,6 +118,35 @@ export function TreeRowLesson({
 
   const updateLesson = useUpdateLessonMutation();
 
+  const { data: conversionJobStatus } = useQuery<QueueJobStatus | null>({
+    queryKey: [
+      'lesson-conversion-job-status',
+      data.id,
+      data.videoConversionJobId,
+    ],
+    enabled: data.type === 'video' && Boolean(data.videoConversionJobId),
+    queryFn: async () => {
+      if (!data.videoConversionJobId) return null;
+      const job = await getQueueJob(request, data.videoConversionJobId);
+      return job.status;
+    },
+    refetchInterval: (query) => {
+      const status = query.state.data as QueueJobStatus | null | undefined;
+      if (!status) return 3000;
+
+      if (
+        status === 'pending' ||
+        status === 'scheduled' ||
+        status === 'processing' ||
+        status === 'retrying'
+      ) {
+        return 3000;
+      }
+
+      return false;
+    },
+  });
+
   const isRenaming = inlineRenamingId === data.id;
   const inputRef = useRef<HTMLInputElement>(null);
 
@@ -151,6 +197,45 @@ export function TreeRowLesson({
     durationH > 0
       ? `${durationH}h${durationM > 0 ? `${durationM}m` : ''}`
       : `${durationM}m`;
+  const attachedResourceCount = getLessonAttachedResourceCount(data);
+  const uploadedVideoCount = getLessonUploadedVideoCount(data);
+
+  const videoJobVisualState =
+    data.type !== 'video'
+      ? 'none'
+      : conversionJobStatus === 'pending' ||
+          conversionJobStatus === 'scheduled' ||
+          conversionJobStatus === 'retrying'
+        ? 'waiting'
+        : conversionJobStatus === 'processing'
+          ? 'processing'
+          : 'none';
+
+  const typeIconNode =
+    data.type !== 'video' ? (
+      <Icon className={cn('size-3.5 shrink-0', cfg.color)} aria-hidden />
+    ) : videoJobVisualState === 'waiting' ? (
+      <span
+        title="Conversão aguardando processamento"
+        aria-label="Conversão aguardando processamento"
+        className="inline-flex items-center"
+      >
+        <Clock3 className="size-3.5 shrink-0 text-amber-500" aria-hidden />
+      </span>
+    ) : videoJobVisualState === 'processing' ? (
+      <span
+        title="Conversão em processamento"
+        aria-label="Conversão em processamento"
+        className="inline-flex items-center"
+      >
+        <Loader2
+          className="size-3.5 shrink-0 animate-spin text-blue-500"
+          aria-hidden
+        />
+      </span>
+    ) : (
+      <Video className={cn('size-3.5 shrink-0', cfg.color)} aria-hidden />
+    );
 
   return (
     <div
@@ -172,7 +257,7 @@ export function TreeRowLesson({
       )}
     >
       {/* Type icon */}
-      <Icon className={cn('size-3.5 shrink-0', cfg.color)} aria-hidden />
+      {typeIconNode}
 
       {/* Inline rename or title */}
       {isRenaming ? (
@@ -211,8 +296,8 @@ export function TreeRowLesson({
               const VisIcon = visibilityCfg.icon;
               return (
                 <span
-                    title={t('visibility', { value: visibilityCfg.label })}
-                    aria-label={t('visibility', { value: visibilityCfg.label })}
+                  title={t('visibility', { value: visibilityCfg.label })}
+                  aria-label={t('visibility', { value: visibilityCfg.label })}
                   className="inline-flex items-center"
                 >
                   <VisIcon
@@ -239,20 +324,41 @@ export function TreeRowLesson({
               <Film className="size-3 shrink-0 text-violet-500" />
             </span>
           )}
+          {/* Uploaded videos indicator */}
+          {showVideoIndicator && uploadedVideoCount > 0 && (
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <span
+                  aria-label={t('uploadedVideosAria', {
+                    count: uploadedVideoCount,
+                  })}
+                  className="inline-flex items-center"
+                >
+                  <Video className="size-3 shrink-0 text-violet-500" />
+                </span>
+              </TooltipTrigger>
+              <TooltipContent>
+                {t('uploadedVideos', { count: uploadedVideoCount })}
+              </TooltipContent>
+            </Tooltip>
+          )}
           {/* Resources indicator */}
-          {showResourcesIndicator && data.resources.length > 0 && (
-            <span
-              title={t('resources', { count: data.resources.length })}
-              aria-label={t('resourcesAria', { count: data.resources.length })}
-              className="inline-flex items-center gap-0.5"
-            >
-              <Paperclip className="size-3 shrink-0 text-sky-500" />
-              {data.resources.length > 1 && (
-                <span className="text-[0.55rem] text-sky-500 tabular-nums leading-none">
-                  {data.resources.length}
+          {showResourcesIndicator && attachedResourceCount > 0 && (
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <span
+                  aria-label={t('resourcesAria', {
+                    count: attachedResourceCount,
+                  })}
+                  className="inline-flex items-center"
+                >
+                  <Paperclip className="size-3 shrink-0 text-sky-500" />
                 </span>
-              )}
-            </span>
+              </TooltipTrigger>
+              <TooltipContent>
+                {t('resources', { count: attachedResourceCount })}
+              </TooltipContent>
+            </Tooltip>
           )}
           {/* Transcription indicator */}
           {showTranscriptionIndicator &&

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

@@ -1,18 +1,33 @@
 'use client';
 
 import { Input } from '@/components/ui/input';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from '@/components/ui/tooltip';
 import { cn } from '@/lib/utils';
-import { ChevronDown, ChevronRight, Layers } from 'lucide-react';
+import {
+  ChevronDown,
+  ChevronRight,
+  Layers,
+  Paperclip,
+  Video,
+} from 'lucide-react';
 import { useTranslations } from 'next-intl';
 import { useEffect, useRef } from 'react';
 import { useUpdateSessionMutation } from '../_data/use-course-structure-mutations';
 import { HighlightedText } from './highlighted-text';
+import { IconActionTooltip } from './icon-action-tooltip';
 import { useStructureStore } from './store';
 import type { Session } from './types';
+import { useTreeDisplaySettings } from './use-tree-display-settings';
 
 interface TreeRowSessionProps {
   data: Session;
   lessonCount: number;
+  resourceCount: number;
+  videoCount: number;
   isExpanded: boolean;
   isSelected: boolean;
   isActive: boolean;
@@ -25,6 +40,8 @@ interface TreeRowSessionProps {
 export function TreeRowSession({
   data,
   lessonCount,
+  resourceCount,
+  videoCount,
   isExpanded,
   isSelected,
   isActive,
@@ -37,6 +54,7 @@ export function TreeRowSession({
   const cancelRename = useStructureStore((s) => s.cancelRename);
   const startRename = useStructureStore((s) => s.startRename);
   const renameItem = useStructureStore((s) => s.renameItem);
+  const { showCode } = useTreeDisplaySettings();
 
   const updateSession = useUpdateSessionMutation();
 
@@ -103,18 +121,20 @@ export function TreeRowSession({
       )}
     >
       {/* Expand/collapse chevron */}
-      <button
-        className="shrink-0 text-muted-foreground hover:text-foreground transition-colors p-0.5 rounded focus-visible:ring-1 focus-visible:ring-ring"
-        onClick={onToggleExpand}
-        aria-label={isExpanded ? t('collapse') : t('expand')}
-        tabIndex={-1}
-      >
-        {isExpanded ? (
-          <ChevronDown className="size-3.5" />
-        ) : (
-          <ChevronRight className="size-3.5" />
-        )}
-      </button>
+      <IconActionTooltip label={isExpanded ? t('collapse') : t('expand')}>
+        <button
+          className="shrink-0 text-muted-foreground hover:text-foreground transition-colors p-0.5 rounded focus-visible:ring-1 focus-visible:ring-ring"
+          onClick={onToggleExpand}
+          aria-label={isExpanded ? t('collapse') : t('expand')}
+          tabIndex={-1}
+        >
+          {isExpanded ? (
+            <ChevronDown className="size-3.5" />
+          ) : (
+            <ChevronRight className="size-3.5" />
+          )}
+        </button>
+      </IconActionTooltip>
 
       {/* Session icon */}
       <Layers
@@ -142,6 +162,11 @@ export function TreeRowSession({
       {/* Meta badges (hidden during rename) */}
       {!isRenaming && (
         <div className="flex items-center gap-1 shrink-0">
+          {showCode && (
+            <span className="inline-flex items-center rounded border border-border/60 bg-muted/60 px-1 text-[0.6rem] font-mono text-muted-foreground leading-4">
+              {data.code}
+            </span>
+          )}
           {/* Duration - show on hover */}
           {data.duration > 0 && (
             <span className="text-[0.6rem] text-muted-foreground opacity-0 group-hover:opacity-100 transition-opacity tabular-nums">
@@ -149,9 +174,39 @@ export function TreeRowSession({
             </span>
           )}
           {/* Lesson count - always visible */}
-          <span className="text-[0.62rem] font-medium tabular-nums text-muted-foreground min-w-[1.5rem] text-right">
+          <span className="text-[0.62rem] font-medium tabular-nums text-muted-foreground min-w-6 text-right">
             {lessonCount}
           </span>
+          {videoCount > 0 && (
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <span
+                  className="inline-flex items-center"
+                  aria-label={t('uploadedVideosAria', { count: videoCount })}
+                >
+                  <Video className="size-3 shrink-0 text-violet-500" />
+                </span>
+              </TooltipTrigger>
+              <TooltipContent>
+                {t('uploadedVideos', { count: videoCount })}
+              </TooltipContent>
+            </Tooltip>
+          )}
+          {resourceCount > 0 && (
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <span
+                  className="inline-flex items-center"
+                  aria-label={t('resourcesAria', { count: resourceCount })}
+                >
+                  <Paperclip className="size-3 shrink-0 text-sky-500" />
+                </span>
+              </TooltipTrigger>
+              <TooltipContent>
+                {t('resources', { count: resourceCount })}
+              </TooltipContent>
+            </Tooltip>
+          )}
           {/* Published status dot */}
           <span
             className={cn(

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

@@ -17,6 +17,10 @@ interface TreeRowProps {
   isMatched: boolean;
   isEffectivelyExpanded: boolean;
   lessonCountMap: Map<string, number>;
+  sessionIndicatorMap: Map<
+    string,
+    { resourceCount: number; videoCount: number }
+  >;
   /** Full ordered visible list — required for SHIFT-range selection. */
   visibleItems: FlatItem[];
 }
@@ -29,6 +33,7 @@ export function TreeRow({
   isMatched,
   isEffectivelyExpanded,
   lessonCountMap,
+  sessionIndicatorMap,
   visibleItems,
 }: TreeRowProps) {
   const selectItem = useStructureStore((s) => s.selectItem);
@@ -76,11 +81,17 @@ export function TreeRow({
 
   if (item.type === 'session') {
     const lessonCount = lessonCountMap.get(item.id) ?? 0;
+    const indicatorCounts = sessionIndicatorMap.get(item.id) ?? {
+      resourceCount: 0,
+      videoCount: 0,
+    };
     return (
       <TreeContextMenu item={item}>
         <TreeRowSession
           data={item.data as Session}
           lessonCount={lessonCount}
+          resourceCount={indicatorCounts.resourceCount}
+          videoCount={indicatorCounts.videoCount}
           isExpanded={isEffectivelyExpanded}
           isSelected={isSelected}
           isActive={isActive}

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

@@ -46,16 +46,43 @@ export interface Resource {
   size: string;
   type: string;
   public: boolean;
+  uploadedAt?: string;
   /** Blob URL (for newly uploaded files) or remote URL for preview/download */
   url?: string;
 }
 
+export interface VideoFrame {
+  id: string;
+  fileId: number;
+  name: string;
+  timeSeconds: number;
+  url?: string;
+}
+
 export interface LessonInstructor {
   id: string;
   role?: 'lead' | 'assistant';
   name?: string;
 }
 
+export interface TranscriptionSegment {
+  id: number;
+  startSeconds: number;
+  endSeconds: number;
+  text: string;
+}
+
+export interface LessonAudioFile {
+  id: number;
+  fileId: number | null;
+  title: string;
+  tipo: string;
+  localeId: number | null;
+  locale: { id: number; name: string; code: string; region: string } | null;
+  file: { id: number; filename: string; path: string } | null;
+  createdAt: string;
+}
+
 export interface Lesson {
   id: string;
   code: string;
@@ -73,6 +100,8 @@ export interface Lesson {
   videoUrl?: string;
   autoDuration?: boolean;
   transcription?: string;
+  transcriptionSegments?: TranscriptionSegment[];
+  localeId?: number | null;
   videoConversionJobId?: number;
   // Questão
   linkedExam?: string;
@@ -80,6 +109,7 @@ export interface Lesson {
   postContent?: string;
   // Relations
   resources: Resource[];
+  frames?: VideoFrame[];
   instructors?: LessonInstructor[];
 }
 
@@ -118,6 +148,7 @@ export type LessonFormValues = {
 };
 
 export type CourseFormValues = {
+  code: string;
   name: string;
   title: string;
   description: string;

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

@@ -30,6 +30,7 @@ import type {
   Resource,
   Session,
   SessionFormValues,
+  VideoFrame,
 } from '../../_components/types';
 
 // Alias to keep internal adapter code concise when mapping resources.
@@ -41,6 +42,7 @@ import type {
   ApiCreateSessionPayload,
   ApiGetStructureResponse,
   ApiLesson,
+  ApiLessonFrame,
   ApiLessonResource,
   ApiSession,
   ApiUpdateLessonPayload,
@@ -72,18 +74,30 @@ function normalizeVideoProvider(
 
 /** Normalize a raw API resource to the frontend Resource shape. */
 function normalizeResource(raw: ApiLessonResource): Resource {
+  const withUpload = raw as ApiLessonResource & {
+    createdAt?: string;
+    created_at?: string;
+    uploadedAt?: string;
+    uploaded_at?: string;
+  };
+
   return {
     id: String(raw.id),
     fileId: raw.fileId ?? undefined,
     name: raw.nome,
-    type: raw.tipo ?? '',
+    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: '',
-    public: raw.publico,
+    public: raw.is_public ?? true,
+    uploadedAt:
+      withUpload.uploadedAt ??
+      withUpload.uploaded_at ??
+      withUpload.createdAt ??
+      withUpload.created_at,
     /**
      * ⚠️ BACKEND NOTE: a pre-signed or static URL is not returned.
      * TODO[BACKEND]: Include a resolved URL (e.g. `/file/open/:id`) in the
@@ -93,6 +107,16 @@ function normalizeResource(raw: ApiLessonResource): Resource {
   };
 }
 
+function normalizeFrame(raw: ApiLessonFrame): VideoFrame {
+  return {
+    id: String(raw.id),
+    fileId: raw.fileId,
+    name: raw.nome,
+    timeSeconds: raw.timeSeconds,
+    url: raw.url,
+  };
+}
+
 // ─────────────────────────────────────────────────────────────────────────────
 // Backend → Frontend (normalise)
 // ─────────────────────────────────────────────────────────────────────────────
@@ -164,6 +188,7 @@ export function normalizeLesson(raw: ApiLesson, order = 0): Lesson {
     videoUrl: raw.videoUrl,
     autoDuration: raw.duracaoAutomatica,
     transcription: raw.transcricao,
+    localeId: raw.locale_id ?? null,
     videoConversionJobId: raw.videoConversionJobId,
     /**
      * ⚠️ TYPE MISMATCH: backend sends `exameVinculado` as number;
@@ -173,6 +198,7 @@ export function normalizeLesson(raw: ApiLesson, order = 0): Lesson {
       raw.exameVinculado != null ? String(raw.exameVinculado) : undefined,
     postContent: raw.conteudoPost,
     resources: (raw.recursos ?? []).map(normalizeResource),
+    frames: (raw.frames ?? []).map(normalizeFrame),
     instructors,
     /**
      * ⚠️ BACKEND NOTE: status and visibility are not in the DB schema.
@@ -305,8 +331,8 @@ export function toCreateLessonPayload(
           : Number.isInteger(Number(r.id)) && Number(r.id) > 0
             ? { fileId: Number(r.id) }
             : {}),
-        ...(r.type ? { tipo: r.type } : {}),
-        publico: r.public,
+        ...(r.type ? { type: r.type } : {}),
+        is_public: r.public,
       })),
     }),
   };
@@ -363,8 +389,8 @@ export function toUpdateLessonPayload(
         : Number.isInteger(Number(r.id)) && Number(r.id) > 0
           ? { fileId: Number(r.id) }
           : {}),
-      ...(r.type ? { tipo: r.type } : {}),
-      publico: r.public,
+      ...(r.type ? { type: r.type } : {}),
+      is_public: r.public,
     }));
   }
   return payload;

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

@@ -21,9 +21,12 @@
  */
 
 import type {
+  ApiCreateLessonFramePayload,
+  ApiCreateLessonFrameResponse,
   ApiCourseResource,
   ApiCreateLessonPayload,
   ApiCreateSessionPayload,
+  ApiDeleteLessonFrameResponse,
   ApiDuplicateSessionResponse,
   ApiGetStructureResponse,
   ApiLesson,
@@ -32,6 +35,8 @@ import type {
   ApiPasteLessonsResponse,
   ApiReorderLessonsPayload,
   ApiReorderSessionsPayload,
+  ApiUpdateLessonFramePayload,
+  ApiUpdateLessonFrameResponse,
   ApiSession,
   ApiUpdateCoursePayload,
   ApiUpdateLessonPayload,
@@ -88,6 +93,7 @@ export interface QueueJobEvent {
     | 'requeued'
     | 'unlocked';
   message?: string | null;
+  metadata?: Record<string, unknown> | null;
   created_at: string;
 }
 
@@ -101,6 +107,10 @@ export interface QueueJobResponse {
   finished_at?: string | null;
   next_retry_at?: string | null;
   last_error?: string | null;
+  result?: {
+    transcriptionJobId?: number | null;
+    [key: string]: unknown;
+  } | null;
   queue_job_attempt: QueueJobAttempt[];
   queue_job_event: QueueJobEvent[];
 }
@@ -191,8 +201,8 @@ export async function updateCourseResources(
     recursos: Array<{
       nome: string;
       fileId?: number;
-      tipo?: string;
-      publico?: boolean;
+      type?: string;
+      is_public?: boolean;
     }>;
   }
 ): Promise<ApiCourseResource[]> {
@@ -337,6 +347,51 @@ export async function deleteLesson(
   return extractData<{ success: boolean }>(response);
 }
 
+export async function deleteLessonFrame(
+  request: RequestFn,
+  courseId: string | number,
+  sessionId: string | number,
+  lessonId: string | number,
+  frameId: string | number
+): Promise<ApiDeleteLessonFrameResponse> {
+  const response = await request({
+    url: `${LESSON_PATH(courseId, sessionId, lessonId)}/frames/${frameId}`,
+    method: 'DELETE',
+  });
+  return extractData<ApiDeleteLessonFrameResponse>(response);
+}
+
+export async function createLessonFrame(
+  request: RequestFn,
+  courseId: string | number,
+  sessionId: string | number,
+  lessonId: string | number,
+  payload: ApiCreateLessonFramePayload
+): Promise<ApiCreateLessonFrameResponse> {
+  const response = await request({
+    url: `${LESSON_PATH(courseId, sessionId, lessonId)}/frames`,
+    method: 'POST',
+    data: payload,
+  });
+  return extractData<ApiCreateLessonFrameResponse>(response);
+}
+
+export async function updateLessonFrame(
+  request: RequestFn,
+  courseId: string | number,
+  sessionId: string | number,
+  lessonId: string | number,
+  frameId: string | number,
+  payload: ApiUpdateLessonFramePayload
+): Promise<ApiUpdateLessonFrameResponse> {
+  const response = await request({
+    url: `${LESSON_PATH(courseId, sessionId, lessonId)}/frames/${frameId}`,
+    method: 'PATCH',
+    data: payload,
+  });
+  return extractData<ApiUpdateLessonFrameResponse>(response);
+}
+
 // ─────────────────────────────────────────────────────────────────────────────
 // Pending backend endpoints (stubs — throw until implemented)
 // ─────────────────────────────────────────────────────────────────────────────
@@ -502,7 +557,6 @@ export async function uploadFile(
     url: '/file',
     method: 'POST',
     data: formData,
-    headers: { 'Content-Type': 'multipart/form-data' },
     onUploadProgress: options?.onUploadProgress,
   });
   return extractData<{ id: number; filename: string }>(response);