@hed-hog/lms 0.0.353 → 0.0.354

package/hedhog/data/setting_group.yaml

@@ -0,0 +1,76 @@
+- slug: lms
+  icon: video
+  name:
+    en: LMS
+    pt: LMS
+  description:
+    en: Learning management module settings.
+    pt: Configuracoes do modulo de gestao de aprendizagem.
+  relations:
+    setting:
+      - slug: lms-video-conversion-enabled
+        type: boolean
+        component: switch
+        name:
+          en: Enable Video Conversion Queue
+          pt: Habilitar fila de conversao de video
+        description:
+          en: Enables original video upload and background conversion queue processing for lessons.
+          pt: Habilita o upload de video original e o processamento em fila para conversao de videos das aulas.
+        value: true
+        user_override: false
+      - slug: lms-video-frame-capture-interval-seconds
+        type: number
+        component: input-number
+        name:
+          en: Video Frame Capture Interval (seconds)
+          pt: Intervalo de captura de frames do video (segundos)
+        description:
+          en: Defines how often frame images are extracted from the original video during conversion.
+          pt: Define de quantos em quantos segundos os frames sao extraidos do video original durante a conversao.
+        value: 10
+        user_override: false
+      - slug: lms-image-extraction-enabled
+        type: boolean
+        component: switch
+        name:
+          en: Enable Video Frame Extraction
+          pt: Habilitar extracao de frames do video
+        description:
+          en: Enables extraction of screenshot images from the original video during conversion.
+          pt: Habilita a extracao de imagens (frames) do video original durante a conversao.
+        value: true
+        user_override: false
+      - slug: lms-audio-transcription-enabled
+        type: boolean
+        component: switch
+        name:
+          en: Enable Audio Transcription
+          pt: Habilitar transcricao de audio
+        description:
+          en: Enables automatic audio extraction and AI transcription for video lessons.
+          pt: Habilita a extracao de audio e a transcricao automatica por IA para aulas em video.
+        value: true
+        user_override: false
+      - slug: lms-youtube-provider-enabled
+        type: boolean
+        component: switch
+        name:
+          en: Allow YouTube as Video Provider
+          pt: Permitir YouTube como provedor de video
+        description:
+          en: When enabled, instructors can use YouTube links as the video source for lessons.
+          pt: Quando habilitado, instrutores podem usar links do YouTube como fonte de video nas aulas.
+        value: true
+        user_override: false
+      - slug: lms-vimeo-provider-enabled
+        type: boolean
+        component: switch
+        name:
+          en: Allow Vimeo as Video Provider
+          pt: Permitir Vimeo como provedor de video
+        description:
+          en: When enabled, instructors can use Vimeo links as the video source for lessons.
+          pt: Quando habilitado, instrutores podem usar links do Vimeo como fonte de video nas aulas.
+        value: true
+        user_override: false

package/hedhog/frontend/app/courses/[id]/_components/CourseCertificateCard.tsx.ejs

@@ -22,6 +22,7 @@ type CourseCertificateCardProps = {
   onCreateTemplate: (
     values: Record<string, string>
   ) => Promise<PickerOption | null>;
+  compact?: boolean;
 };
 
 export function CourseCertificateCard({
@@ -29,12 +30,14 @@ export function CourseCertificateCard({
   t,
   options,
   onCreateTemplate,
+  compact = false,
 }: CourseCertificateCardProps) {
   return (
     <CourseSectionCard
       title={t('form.sections.certification')}
       description={t('form.sectionDescriptions.certification')}
       icon={Award}
+      compact={compact}
     >
       <FormField
         control={form.control}

package/hedhog/frontend/app/courses/[id]/_components/CourseClassificationCard.tsx.ejs

@@ -31,6 +31,7 @@ type CourseClassificationCardProps = {
   levels: readonly SelectOption[];
   statuses: readonly SelectOption[];
   offeringTypes: readonly SelectOption[];
+  compact?: boolean;
 };
 
 export function CourseClassificationCard({
@@ -39,14 +40,22 @@ export function CourseClassificationCard({
   levels,
   statuses,
   offeringTypes,
+  compact = false,
 }: CourseClassificationCardProps) {
   return (
     <CourseSectionCard
       title="Classificação e configuração"
       description="Defina estágio, formato e identidade visual do curso."
       icon={Settings2}
+      compact={compact}
     >
-      <div className="grid gap-2 sm:gap-3 md:grid-cols-2 xl:grid-cols-3">
+      <div
+        className={
+          compact
+            ? 'grid gap-2 md:grid-cols-2 xl:grid-cols-3'
+            : 'grid gap-2 sm:gap-3 md:grid-cols-2 xl:grid-cols-3'
+        }
+      >
         <FormField
           control={form.control}
           name="nivel"

package/hedhog/frontend/app/courses/[id]/_components/CourseContentCard.tsx.ejs

@@ -14,16 +14,21 @@ import type { CourseEditFormValues } from './course-edit-types';
 
 type CourseContentCardProps = {
   form: UseFormReturn<CourseEditFormValues>;
+  compact?: boolean;
 };
 
-export function CourseContentCard({ form }: CourseContentCardProps) {
+export function CourseContentCard({
+  form,
+  compact = false,
+}: CourseContentCardProps) {
   return (
     <CourseSectionCard
       title="Conteúdo e regras"
       description="Concentre os textos longos que apoiam venda, orientação pedagógica e publicação."
       icon={FileText}
+      compact={compact}
     >
-      <div className="grid gap-2 sm:gap-3">
+      <div className={compact ? 'grid gap-2' : 'grid gap-2 sm:gap-3'}>
         <FormField
           control={form.control}
           name="objetivos"

package/hedhog/frontend/app/courses/[id]/_components/CourseDangerZoneCard.tsx.ejs

@@ -13,19 +13,22 @@ import type { TranslationFn } from './course-edit-types';
 type CourseDangerZoneCardProps = {
   t: TranslationFn;
   onDelete: () => void;
+  compact?: boolean;
 };
 
 export function CourseDangerZoneCard({
   t,
   onDelete,
+  compact = false,
 }: CourseDangerZoneCardProps) {
   return (
     <CourseSectionCard
       title="Zona de risco"
       description="Ações destrutivas ficam isoladas para evitar cliques acidentais."
       icon={AlertTriangle}
+      compact={compact}
       className="border-destructive/20"
-      contentClassName="pt-0"
+      contentClassName={compact ? undefined : 'pt-0'}
     >
       <TooltipProvider>
         <Tooltip>
@@ -41,7 +44,7 @@ export function CourseDangerZoneCard({
               {t('form.actions.deleteCourse')}
             </Button>
           </TooltipTrigger>
-          <TooltipContent side="top" className="max-w-[240px] text-xs">
+          <TooltipContent side="top" className="max-w-60 text-xs">
             Remove o curso, turmas, matrículas e certificados vinculados
             permanentemente.
           </TooltipContent>

package/hedhog/frontend/app/courses/[id]/_components/CourseFlagsCard.tsx.ejs

@@ -20,6 +20,7 @@ import type { CourseEditFormValues, TranslationFn } from './course-edit-types';
 type CourseFlagsCardProps = {
   form: UseFormReturn<CourseEditFormValues>;
   t: TranslationFn;
+  compact?: boolean;
 };
 
 function FlagRow({
@@ -52,12 +53,17 @@ function FlagRow({
   );
 }
 
-export function CourseFlagsCard({ form, t }: CourseFlagsCardProps) {
+export function CourseFlagsCard({
+  form,
+  t,
+  compact = false,
+}: CourseFlagsCardProps) {
   return (
     <CourseSectionCard
       title={t('form.sections.flags')}
       description="Controles rápidos para disponibilidade e destaque do curso."
       icon={BadgeCheck}
+      compact={compact}
     >
       <div className="space-y-3">
         <FormField

package/hedhog/frontend/app/courses/[id]/_components/CourseMediaCard.tsx.ejs

@@ -186,6 +186,7 @@ type CourseMediaCardProps = {
   logoImageType?: ImageTypeSpec | null;
   bannerImageType?: ImageTypeSpec | null;
   t: TranslationFn;
+  compact?: boolean;
 };
 
 export function CourseMediaCard({
@@ -204,12 +205,14 @@ export function CourseMediaCard({
   logoImageType,
   bannerImageType,
   t,
+  compact = false,
 }: CourseMediaCardProps) {
   return (
     <CourseSectionCard
       title={t('form.media.title')}
       description="Gerencie os ativos visuais do curso com preview e ações rápidas."
       icon={FileImage}
+      compact={compact}
     >
       <div className="space-y-4">
         <MediaRow

package/hedhog/frontend/app/courses/[id]/_components/CourseMultiEntityPicker.tsx.ejs

@@ -2,6 +2,12 @@ import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import { EntityPicker } from '@/components/ui/entity-picker';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '@/components/ui/tooltip';
 import { cn } from '@/lib/utils';
 import { Grip, Pencil, Plus, X } from 'lucide-react';
 import { useMemo, useState } from 'react';
@@ -148,16 +154,25 @@ export function CourseMultiEntityPicker({
         />
 
         {onCreateClick ? (
-          <Button
-            type="button"
-            variant="outline"
-            size="icon"
-            className="h-10 w-10 shrink-0 rounded-xl"
-            onClick={onCreateClick}
-            aria-label={createActionLabel ?? `Criar ${entityLabel}`}
-          >
-            <Plus className="h-4 w-4" />
-          </Button>
+          <TooltipProvider>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button
+                  type="button"
+                  variant="outline"
+                  size="icon"
+                  className="h-10 w-10 shrink-0 rounded-xl"
+                  onClick={onCreateClick}
+                  aria-label={createActionLabel ?? `Criar ${entityLabel}`}
+                >
+                  <Plus className="h-4 w-4" />
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent>
+                {createActionLabel ?? `Criar ${entityLabel}`}
+              </TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
         ) : null}
       </div>
 
@@ -196,30 +211,46 @@ export function CourseMultiEntityPicker({
 
                 <div className="flex items-center gap-1">
                   {onEditSelected ? (
-                    <Button
-                      type="button"
-                      variant="ghost"
-                      size="icon"
-                      className="h-8 w-8 rounded-lg text-muted-foreground hover:text-foreground"
-                      onClick={() => onEditSelected(option)}
-                      aria-label={`Editar ${option.label}`}
-                    >
-                      <Pencil className="h-4 w-4" />
-                    </Button>
+                    <TooltipProvider>
+                      <Tooltip>
+                        <TooltipTrigger asChild>
+                          <Button
+                            type="button"
+                            variant="ghost"
+                            size="icon"
+                            className="h-8 w-8 rounded-lg text-muted-foreground hover:text-foreground"
+                            onClick={() => onEditSelected(option)}
+                            aria-label={`Editar ${option.label}`}
+                          >
+                            <Pencil className="h-4 w-4" />
+                          </Button>
+                        </TooltipTrigger>
+                        <TooltipContent>{`Editar ${option.label}`}</TooltipContent>
+                      </Tooltip>
+                    </TooltipProvider>
                   ) : null}
 
-                  <Button
-                    type="button"
-                    variant="ghost"
-                    size="icon"
-                    className="h-8 w-8 rounded-lg text-muted-foreground hover:text-foreground"
-                    onClick={() =>
-                      onChange(value.filter((item) => item !== option.value))
-                    }
-                    aria-label={`Remover ${option.label}`}
-                  >
-                    <X className="h-4 w-4" />
-                  </Button>
+                  <TooltipProvider>
+                    <Tooltip>
+                      <TooltipTrigger asChild>
+                        <Button
+                          type="button"
+                          variant="ghost"
+                          size="icon"
+                          className="h-8 w-8 rounded-lg text-muted-foreground hover:text-foreground"
+                          onClick={() =>
+                            onChange(
+                              value.filter((item) => item !== option.value)
+                            )
+                          }
+                          aria-label={`Remover ${option.label}`}
+                        >
+                          <X className="h-4 w-4" />
+                        </Button>
+                      </TooltipTrigger>
+                      <TooltipContent>{`Remover ${option.label}`}</TooltipContent>
+                    </Tooltip>
+                  </TooltipProvider>
                 </div>
               </div>
             ) : (
@@ -230,25 +261,39 @@ export function CourseMultiEntityPicker({
               >
                 <span className="max-w-45 truncate">{option.label}</span>
                 {onEditSelected ? (
-                  <button
-                    type="button"
-                    className="cursor-pointer text-muted-foreground transition-colors hover:text-foreground"
-                    onClick={() => onEditSelected(option)}
-                    aria-label={`Editar ${option.label}`}
-                  >
-                    <Pencil className="h-3.5 w-3.5" />
-                  </button>
+                  <TooltipProvider>
+                    <Tooltip>
+                      <TooltipTrigger asChild>
+                        <button
+                          type="button"
+                          className="cursor-pointer text-muted-foreground transition-colors hover:text-foreground"
+                          onClick={() => onEditSelected(option)}
+                          aria-label={`Editar ${option.label}`}
+                        >
+                          <Pencil className="h-3.5 w-3.5" />
+                        </button>
+                      </TooltipTrigger>
+                      <TooltipContent>{`Editar ${option.label}`}</TooltipContent>
+                    </Tooltip>
+                  </TooltipProvider>
                 ) : null}
-                <button
-                  type="button"
-                  className="cursor-pointer text-muted-foreground transition-colors hover:text-foreground"
-                  onClick={() =>
-                    onChange(value.filter((item) => item !== option.value))
-                  }
-                  aria-label={`Remover ${option.label}`}
-                >
-                  <X className="h-3.5 w-3.5" />
-                </button>
+                <TooltipProvider>
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <button
+                        type="button"
+                        className="cursor-pointer text-muted-foreground transition-colors hover:text-foreground"
+                        onClick={() =>
+                          onChange(value.filter((item) => item !== option.value))
+                        }
+                        aria-label={`Remover ${option.label}`}
+                      >
+                        <X className="h-3.5 w-3.5" />
+                      </button>
+                    </TooltipTrigger>
+                    <TooltipContent>{`Remover ${option.label}`}</TooltipContent>
+                  </Tooltip>
+                </TooltipProvider>
               </Badge>
             )
           )}

package/hedhog/frontend/app/courses/[id]/_components/CourseRelationsCard.tsx.ejs

@@ -23,13 +23,11 @@ type CourseRelationsCardProps = {
   t: TranslationFn;
   categoryOptions: PickerOption[];
   projectOptions: PickerOption[];
-  instructorOptions: PickerOption[];
   onCreateCategory: (
     values: Record<string, string>
   ) => Promise<PickerOption | null>;
-  onCreateInstructor: () => void;
   onEditCategory: (categorySlug: string) => void;
-  onEditInstructor: (instructorId: string) => void;
+  compact?: boolean;
 };
 
 export function CourseRelationsCard({
@@ -37,20 +35,25 @@ export function CourseRelationsCard({
   t,
   categoryOptions,
   projectOptions,
-  instructorOptions,
   onCreateCategory,
-  onCreateInstructor,
   onEditCategory,
-  onEditInstructor,
+  compact = false,
 }: CourseRelationsCardProps) {
   return (
     <CourseSectionCard
       title={t('form.sections.relations')}
       description={t('form.sectionDescriptions.relations')}
       icon={Network}
+      compact={compact}
     >
-      <div className="space-y-2 sm:space-y-3">
-        <div className="grid items-start gap-2 sm:gap-3 lg:grid-cols-2">
+      <div className={compact ? 'space-y-2' : 'space-y-2 sm:space-y-3'}>
+        <div
+          className={
+            compact
+              ? 'grid items-start gap-2 lg:grid-cols-2'
+              : 'grid items-start gap-2 sm:gap-3 lg:grid-cols-2'
+          }
+        >
           <FormField
             control={form.control}
             name="operationsProjectId"
@@ -126,34 +129,6 @@ export function CourseRelationsCard({
               </FormItem>
             )}
           />
-
-          <FormField
-            control={form.control}
-            name="instrutores"
-            render={({ field }) => (
-              <FormItem className="self-start">
-                <FormLabel>{t('form.fields.instructors.label')}</FormLabel>
-                <CourseMultiEntityPicker
-                  value={field.value}
-                  onChange={field.onChange}
-                  onEditSelected={(option) => onEditInstructor(option.value)}
-                  options={instructorOptions}
-                  placeholder={t('form.fields.instructors.selectPlaceholder')}
-                  searchPlaceholder={t(
-                    'form.fields.instructors.searchPlaceholder'
-                  )}
-                  entityLabel="instrutor"
-                  emptyStateDescription={t('form.fields.instructors.noResults')}
-                  emptyHint={t('form.fields.instructors.emptyHint')}
-                  createActionLabel={t('form.fields.instructors.createAction')}
-                  onCreateClick={onCreateInstructor}
-                  variant="instructor"
-                  renderOptionMeta
-                />
-                <FormMessage />
-              </FormItem>
-            )}
-          />
         </div>
 
         <FormField

package/hedhog/frontend/app/courses/[id]/_components/CourseSectionCard.tsx.ejs

@@ -17,6 +17,7 @@ type CourseSectionCardProps = {
   className?: string;
   contentClassName?: string;
   action?: ReactNode;
+  compact?: boolean;
 };
 
 export function CourseSectionCard({
@@ -27,6 +28,7 @@ export function CourseSectionCard({
   className,
   contentClassName,
   action,
+  compact = false,
 }: CourseSectionCardProps) {
   const iconEl = Icon ? (
     <div className="flex h-6 w-6 shrink-0 items-center justify-center rounded-md border border-border/60 bg-muted/30 text-foreground sm:h-7 sm:w-7 sm:rounded-lg">
@@ -37,11 +39,19 @@ export function CourseSectionCard({
   return (
     <Card
       className={cn(
-        'border-border/70 gap-3 py-3 shadow-sm sm:gap-6 sm:py-6',
-        className
+        compact
+          ? 'bg-muted/20 py-2 gap-2'
+          : 'border-border/70 gap-3 py-3 shadow-sm sm:gap-6 sm:py-6',
+        className,
       )}
     >
-      <CardHeader className="space-y-1 pb-2 px-3 sm:space-y-1.5 sm:pb-3 sm:px-6">
+      <CardHeader
+        className={cn(
+          compact
+            ? 'space-y-1 px-3 pt-2 pb-0'
+            : 'space-y-1 pb-2 px-3 sm:space-y-1.5 sm:pb-3 sm:px-6',
+        )}
+      >
         <div className="flex items-center justify-between gap-3">
           <div className="flex min-w-0 items-center gap-2">
             {Icon && description ? (
@@ -50,7 +60,6 @@ export function CourseSectionCard({
                   <TooltipTrigger asChild>
                     <button
                       type="button"
-                      tabIndex={-1}
                       className="cursor-default focus:outline-none"
                     >
                       {iconEl}
@@ -73,7 +82,12 @@ export function CourseSectionCard({
         </div>
       </CardHeader>
 
-      <CardContent className={cn('px-3 pt-0 sm:px-6', contentClassName)}>
+      <CardContent
+        className={cn(
+          compact ? 'px-3 pb-2 pt-0' : 'px-3 pt-0 sm:px-6',
+          contentClassName,
+        )}
+      >
         {children}
       </CardContent>
     </Card>

package/hedhog/frontend/app/courses/[id]/_components/course-edit-types.ts.ejs

@@ -9,11 +9,11 @@ export type CourseEditFormValues = {
   nivel: 'iniciante' | 'intermediario' | 'avancado';
   status: 'ativo' | 'rascunho' | 'arquivado';
   tipoOferta: 'agendado' | 'sob_demanda' | 'hibrido';
+  localeId: string;
   categorias: string[];
   operationsProjectId: string;
   primaryColor: string;
   secondaryColor: string;
-  instrutores: string[];
   preRequisitos: string;
   modeloCertificado: string;
   certificado: boolean;

package/hedhog/frontend/app/courses/[id]/page.tsx.ejs

@@ -9,15 +9,11 @@ import {
   ResizablePanel,
   ResizablePanelGroup,
 } from '@/components/ui/resizable';
-import {
-  Sheet,
-  SheetHeader,
-  SheetTitle,
-} from '@/components/ui/sheet';
+import { Sheet, SheetHeader, SheetTitle } from '@/components/ui/sheet';
 import { ResizableSheetContent } from '@/components/ui/resizable-sheet-content';
 import { useIsMobile } from '@/hooks/use-mobile';
 import { useApp, useQuery } from '@hed-hog/next-app-provider';
-import { useIsMutating } from '@tanstack/react-query';
+import { useIsMutating, useQueryClient } from '@tanstack/react-query';
 import { AlertCircle, Menu, RefreshCw } from 'lucide-react';
 import { useTranslations } from 'next-intl';
 
@@ -41,12 +37,14 @@ import {
   usePasteSessionsMutation,
 } from './structure/_data/use-course-structure-mutations';
 import { useCourseStructureQuery } from './structure/_data/use-course-structure-query';
+import { useLmsRealtimeRefresh } from '../../_lib/hooks/use-lms-realtime-refresh';
 
 interface Props {
   params: Promise<{ id: string }>;
 }
 
 type ApiCourseSummary = {
+  code?: string | null;
   name?: string;
   title?: string;
   logoFileId?: number | null;
@@ -61,6 +59,7 @@ export default function CourseStructurePage({ params }: Props) {
   const { id } = use(params);
   const isMobile = useIsMobile();
   const { request } = useApp();
+  const queryClient = useQueryClient();
 
   const { data: courseSummary } = useQuery<ApiCourseSummary>({
     queryKey: ['lms-course-detail', id],
@@ -93,6 +92,20 @@ export default function CourseStructurePage({ params }: Props) {
 
   const isMutating = useIsMutating();
 
+  const handleRealtimeRefresh = useCallback(async () => {
+    await refetch();
+    await queryClient.invalidateQueries({
+      queryKey: ['lesson-conversion-job-status'],
+    });
+  }, [queryClient, refetch]);
+
+  useLmsRealtimeRefresh({
+    request,
+    enabled: Boolean(id),
+    pollIntervalMs: 3000,
+    onRefresh: handleRealtimeRefresh,
+  });
+
   useEffect(() => {
     if (isMutating > 0) return;
     if (
@@ -100,11 +113,16 @@ export default function CourseStructurePage({ params }: Props) {
       !isError &&
       (apiSessions.length > 0 || apiLessons.length > 0 || apiCourse)
     ) {
+      const mergedCourse = apiCourse
+        ? {
+            ...apiCourse,
+            ...(courseSummary?.name ? { name: courseSummary.name } : {}),
+            ...(courseSummary?.code ? { code: courseSummary.code } : {}),
+          }
+        : apiCourse;
+
       setStructureFromApi({
-        course:
-          apiCourse && courseSummary?.name
-            ? { ...apiCourse, name: courseSummary.name }
-            : apiCourse,
+        course: mergedCourse,
         sessions: apiSessions,
         lessons: apiLessons,
       });
@@ -113,6 +131,8 @@ export default function CourseStructurePage({ params }: Props) {
     apiCourse,
     apiSessions,
     apiLessons,
+    courseSummary?.code,
+    courseSummary?.name,
     isLoading,
     isError,
     isMutating,