@hed-hog/lms 0.0.364 → 0.0.365

package/src/course/course-export-scorm12.service.ts

@@ -0,0 +1,668 @@
+import { PrismaService } from '@hed-hog/api-prisma';
+import { FileService } from '@hed-hog/core';
+import { Inject, Injectable, forwardRef } from '@nestjs/common';
+import * as archiver from 'archiver';
+import { createWriteStream } from 'fs';
+import { promises as fs } from 'fs';
+import { join } from 'path';
+import { finished } from 'stream/promises';
+import { CourseExportService, VideoLessonWithFile } from './course-export.service';
+import {
+  ADLCP_ROOTV1P2_XSD,
+  IMSCP_ROOTV1P1P2_XSD,
+  IMS_XML_XSD,
+} from './scorm12-schemas';
+
+export type ScormVisualOptions = {
+  primaryColor?: string;
+  fontFamily?: string;
+  fontSize?: string;
+  sidebarWidth?: number;
+  sidebarPosition?: string;
+  progressStyle?: string;
+  sidebarTheme?: string;
+};
+
+export type Scorm12BuildParams = {
+  courseId: number;
+  settings: { visual?: ScormVisualOptions };
+  workDir: string;
+  onProgress: (pct: number, msg: string) => Promise<void>;
+};
+
+type LessonData = {
+  id: number;
+  title: string;
+  duration: number | null;
+  src: string;
+};
+
+type ModuleData = {
+  id: number;
+  title: string;
+  order: number;
+  lessons: LessonData[];
+};
+
+type CourseData = {
+  title: string;
+  totalLessons: number;
+  modules: ModuleData[];
+};
+
+type ResolvedVisual = Required<ScormVisualOptions>;
+
+const FONT_STACKS: Record<string, string> = {
+  system: `-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif`,
+  humanist: `Optima,Candara,'Noto Sans',source-sans-pro,sans-serif`,
+  serif: `Georgia,Cambria,'Times New Roman',serif`,
+  mono: `'Courier New',Courier,monospace`,
+};
+
+const FONT_SIZES: Record<string, { base: string; sm: string; xs: string }> = {
+  sm: { base: '.75rem', sm: '.68rem', xs: '.6rem' },
+  md: { base: '.82rem', sm: '.75rem', xs: '.65rem' },
+  lg: { base: '.92rem', sm: '.84rem', xs: '.72rem' },
+};
+
+@Injectable()
+export class CourseExportScorm12Service {
+  constructor(
+    @Inject(forwardRef(() => PrismaService))
+    private readonly prisma: PrismaService,
+    @Inject(forwardRef(() => FileService))
+    private readonly fileService: FileService,
+    @Inject(forwardRef(() => CourseExportService))
+    private readonly courseExportService: CourseExportService,
+  ) {}
+
+  async buildPackage(params: Scorm12BuildParams): Promise<{
+    zipPath: string;
+    filename: string;
+  }> {
+    const { courseId, settings, workDir, onProgress } = params;
+    const visual = this.resolveVisual(settings.visual);
+
+    await onProgress(10, 'Carregando estrutura do curso...');
+
+    const course = await this.prisma.course.findUniqueOrThrow({
+      where: { id: courseId },
+      select: { id: true, title: true, name: true, description: true },
+    });
+    const courseTitle = course.title || course.name || `Curso ${courseId}`;
+    const lessons = await this.courseExportService.getCourseVideoLessons(courseId);
+
+    if (lessons.length === 0) {
+      throw new Error('O curso não possui aulas de vídeo para exportar.');
+    }
+
+    await onProgress(15, `${lessons.length} aulas de vídeo encontradas.`);
+
+    const filename = `${courseTitle.replace(/[^a-zA-Z0-9]/g, '_')}_SCORM12.zip`;
+    const zipPath = join(workDir, filename);
+
+    const output = createWriteStream(zipPath);
+    // level >= 1 obrigatório: com level 0 o archiver grava entradas STORED com
+    // data descriptors (streaming), que leitores Java (Rustici/SCORM Cloud) não processam.
+    const archive = archiver.create('zip', { zlib: { level: 1 } });
+    archive.pipe(output);
+
+    const videoSrcMap: Record<number, string> = {};
+    const embeddedLessonIds: number[] = [];
+    const total = lessons.length;
+
+    for (let i = 0; i < total; i++) {
+      const lesson = lessons[i];
+      const pct = Math.round(15 + ((i + 1) / total) * 55);
+      await onProgress(pct, `Processando aula ${i + 1}/${total}: ${lesson.title}`);
+
+      const bestFile = this.courseExportService.getBestVideoFile(lesson);
+      if (bestFile?.file_id) {
+        const videoTmpPath = join(workDir, `video_${lesson.id}.mp4`);
+        await this.fileService.downloadToPath(bestFile.file_id, videoTmpPath);
+        archive.file(videoTmpPath, { name: `assets/lesson_${lesson.id}.mp4` });
+        videoSrcMap[lesson.id] = `assets/lesson_${lesson.id}.mp4`;
+        embeddedLessonIds.push(lesson.id);
+      } else {
+        videoSrcMap[lesson.id] = this.getExternalVideoSrc(lesson);
+      }
+    }
+
+    const courseData = this.buildCourseData(courseTitle, lessons, videoSrcMap);
+
+    archive.append(Buffer.from(this.generateScormApiJs()), { name: 'SCORM12API.js' });
+    archive.append(Buffer.from(IMS_XML_XSD), { name: 'ims_xml.xsd' });
+    archive.append(Buffer.from(IMSCP_ROOTV1P1P2_XSD), { name: 'imscp_rootv1p1p2.xsd' });
+    archive.append(Buffer.from(ADLCP_ROOTV1P2_XSD), { name: 'adlcp_rootv1p2.xsd' });
+    archive.append(
+      Buffer.from(this.generateMetadataXml(courseTitle, course.description)),
+      { name: 'metadata.xml' },
+    );
+    archive.append(Buffer.from(this.generateShellHtml(courseData, visual)), { name: 'index.html' });
+
+    const manifestXml = this.generateManifest(courseTitle, embeddedLessonIds);
+    archive.append(Buffer.from(manifestXml), { name: 'imsmanifest.xml' });
+
+    await onProgress(80, 'Finalizando pacote ZIP...');
+    await archive.finalize();
+    await finished(output);
+
+    return { zipPath, filename };
+  }
+
+  private resolveVisual(v?: ScormVisualOptions): ResolvedVisual {
+    return {
+      primaryColor: v?.primaryColor || '#2563eb',
+      fontFamily: v?.fontFamily || 'system',
+      fontSize: v?.fontSize || 'md',
+      sidebarWidth: v?.sidebarWidth || 280,
+      sidebarPosition: v?.sidebarPosition || 'left',
+      progressStyle: v?.progressStyle || 'bar',
+      sidebarTheme: v?.sidebarTheme || 'light',
+    };
+  }
+
+  private buildCourseData(
+    courseTitle: string,
+    lessons: VideoLessonWithFile[],
+    videoSrcMap: Record<number, string>,
+  ): CourseData {
+    const sessionMap = new Map<number, ModuleData>();
+
+    for (const lesson of lessons) {
+      const sid = lesson.session.id;
+      if (!sessionMap.has(sid)) {
+        sessionMap.set(sid, {
+          id: sid,
+          title: lesson.session.title,
+          order: lesson.session.order,
+          lessons: [],
+        });
+      }
+      sessionMap.get(sid)!.lessons.push({
+        id: lesson.id,
+        title: lesson.title,
+        duration: lesson.duration_seconds,
+        src: videoSrcMap[lesson.id] || '',
+      });
+    }
+
+    const modules = Array.from(sessionMap.values()).sort((a, b) => a.order - b.order);
+    return { title: courseTitle, totalLessons: lessons.length, modules };
+  }
+
+  private getExternalVideoSrc(lesson: VideoLessonWithFile): string {
+    try {
+      const content = lesson.content ? JSON.parse(lesson.content) : {};
+      if (content.videoUrl) return content.videoUrl;
+    } catch {
+      // ignore parse error
+    }
+    return '';
+  }
+
+  private generateManifest(
+    courseTitle: string,
+    embeddedLessonIds: number[],
+  ): string {
+    const manifestId = `manifest-${Date.now()}`;
+    const assetFiles = embeddedLessonIds.length
+      ? embeddedLessonIds.map((id) => `      <file href="assets/lesson_${id}.mp4"/>`).join('\n') + '\n'
+      : '';
+
+    return `<?xml version="1.0" encoding="UTF-8"?>
+<manifest identifier="${manifestId}" version="1"
+  xmlns="http://www.imsproject.org/xsd/imscp_rootv1p1p2"
+  xmlns:adlcp="http://www.adlnet.org/xsd/adlcp_rootv1p2"
+  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+  xsi:schemaLocation="http://www.imsproject.org/xsd/imscp_rootv1p1p2 imscp_rootv1p1p2.xsd
+                      http://www.adlnet.org/xsd/adlcp_rootv1p2 adlcp_rootv1p2.xsd">
+  <metadata>
+    <schema>ADL SCORM</schema>
+    <schemaversion>1.2</schemaversion>
+    <adlcp:location>metadata.xml</adlcp:location>
+  </metadata>
+  <organizations default="org_main">
+    <organization identifier="org_main">
+      <title>${this.escapeXml(courseTitle)}</title>
+      <item identifier="item_course" identifierref="resource_course">
+        <title>${this.escapeXml(courseTitle)}</title>
+      </item>
+    </organization>
+  </organizations>
+  <resources>
+    <resource identifier="resource_course" type="webcontent" adlcp:scormtype="sco" href="index.html">
+      <file href="index.html"/>
+      <file href="SCORM12API.js"/>
+${assetFiles}    </resource>
+  </resources>
+</manifest>`;
+  }
+
+  private generateMetadataXml(title: string, description: string | null): string {
+    return `<?xml version="1.0" encoding="UTF-8"?>
+<lom xmlns="http://ltsc.ieee.org/xsd/LOM">
+  <general>
+    <title><string language="pt-BR">${this.escapeXml(title)}</string></title>
+    <description><string language="pt-BR">${this.escapeXml(description ?? '')}</string></description>
+  </general>
+</lom>`;
+  }
+
+  private generateScormApiJs(): string {
+    return `(function(w){'use strict';
+  function find(win){
+    var d=0;
+    try{
+      while(!win.API&&win.parent&&win.parent!==win&&d<7){d++;win=win.parent;}
+    }catch(e){}
+    try{return win.API||null;}catch(e){return null;}
+  }
+  var real=null;
+  try{real=find(w)||(w.top&&w.top.opener?find(w.top.opener):null);}catch(e){}
+  if(real)return;
+  var d={'cmi.core.lesson_status':'not attempted','cmi.core.lesson_location':'',
+    'cmi.core.score.raw':'','cmi.core.score.min':'0','cmi.core.score.max':'100',
+    'cmi.core.session_time':'00:00:00','cmi.suspend_data':'',
+    'cmi.core.student_id':'anonymous','cmi.core.student_name':'Aluno'};
+  w.API={
+    LMSInitialize:function(s){return'true';},
+    LMSFinish:function(s){return'true';},
+    LMSGetValue:function(e){return Object.prototype.hasOwnProperty.call(d,e)?String(d[e]):'';},
+    LMSSetValue:function(e,v){d[e]=v;return'true';},
+    LMSCommit:function(s){return'true';},
+    LMSGetLastError:function(){return'0';},
+    LMSGetErrorString:function(c){return'';},
+    LMSGetDiagnostic:function(c){return'';}
+  };
+})(window);
+`;
+  }
+
+  private generateShellHtml(course: CourseData, visual: ResolvedVisual): string {
+    const courseJson = JSON.stringify(course)
+      .replace(/</g, '\\u003c')
+      .replace(/>/g, '\\u003e')
+      .replace(/&/g, '\\u0026');
+
+    const isPie = visual.progressStyle === 'pie';
+    const isRtl = visual.sidebarPosition === 'right';
+    const isDark = visual.sidebarTheme === 'dark';
+
+    const pfil = '#16a34a';
+    const pbg = isDark ? '#334155' : '#e5e7eb';
+
+    const progressHtml = isPie
+      ? `<div class="donut-wrap">
+        <svg viewBox="0 0 40 40" width="52" height="52" style="flex-shrink:0">
+          <circle cx="20" cy="20" r="15.9" fill="none" stroke="${pbg}" stroke-width="3.8"/>
+          <circle id="donutFill" cx="20" cy="20" r="15.9" fill="none"
+            stroke="${pfil}" stroke-width="3.8"
+            stroke-dasharray="99.9" stroke-dashoffset="99.9"
+            transform="rotate(-90 20 20)"
+            style="transition:stroke-dashoffset .4s ease"/>
+        </svg>
+        <div class="donut-lbl">
+          <span id="pctLabel" class="donut-pct">0%</span>
+          <span class="donut-sub">COMPLETO</span>
+        </div>
+      </div>`
+      : `<div class="progress-info">
+        <span class="progress-label"><span class="progress-pct" id="pctLabel">0%</span>&nbsp;COMPLETO</span>
+      </div>
+      <div class="progress-track"><div class="progress-fill-el" id="progressBar"></div></div>`;
+
+    const menuBtnPos = isRtl ? 'right:10px;left:auto' : 'left:10px';
+
+    return `<!DOCTYPE html>
+<html lang="pt-BR">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width,initial-scale=1.0">
+  <title>${this.escapeHtml(course.title)}</title>
+  <style>
+${this.generateCss(visual)}
+  </style>
+</head>
+<body>
+  <button class="menu-toggle" id="menuToggle" style="${menuBtnPos}">&#9776;</button>
+  <div class="overlay" id="overlay"></div>
+
+  <aside class="sidebar" id="sidebar">
+    <div class="sidebar-header">
+      <h1 class="course-title">${this.escapeHtml(course.title)}</h1>
+      ${progressHtml}
+    </div>
+    <nav class="lesson-nav" id="lessonNav"></nav>
+  </aside>
+
+  <div class="player-area">
+    <div class="video-wrap">
+      <video id="video" controls preload="metadata"></video>
+      <div class="empty-state" id="emptyState">Selecione uma aula para come&#231;ar</div>
+    </div>
+    <div class="player-footer">
+      <div class="footer-info">
+        <div class="footer-title" id="footerTitle">&nbsp;</div>
+        <div class="footer-meta" id="footerMeta"></div>
+      </div>
+      <div class="footer-nav">
+        <button class="nav-btn" id="prevBtn" disabled>&#8592; Anterior</button>
+        <button class="nav-btn primary" id="nextBtn" disabled>Pr&#243;xima &#8594;</button>
+      </div>
+    </div>
+  </div>
+
+  <script src="SCORM12API.js"></script>
+  <script>
+${this.generateJs(courseJson, visual.progressStyle)}
+  </script>
+</body>
+</html>`;
+  }
+
+  private generateCss(visual: ResolvedVisual): string {
+    const fontStack = FONT_STACKS[visual.fontFamily] || FONT_STACKS.system;
+    const fs = FONT_SIZES[visual.fontSize] || FONT_SIZES.md;
+    const isDark = visual.sidebarTheme === 'dark';
+    const isRtl = visual.sidebarPosition === 'right';
+    const pri = visual.primaryColor;
+    const pfil = '#16a34a';
+
+    const sbg     = isDark ? '#1e293b' : '#ffffff';
+    const sTxt    = isDark ? '#f1f5f9' : '#111827';
+    const sMuted  = isDark ? '#94a3b8' : '#6b7280';
+    const bdr     = isDark ? '#334155' : '#e5e7eb';
+    const modbg   = isDark ? '#162032' : '#f9fafb';
+    const hoverBg = isDark ? '#243447' : '#f9fafb';
+    const activeBg= isDark ? '#1e3a5f' : '#eff6ff';
+    const pbg     = isDark ? '#334155' : '#e5e7eb';
+    const idleBg  = isDark ? '#2d3f52' : '#e5e7eb';
+    const idleClr = isDark ? '#94a3b8' : '#6b7280';
+    const scrollClr = isDark ? '#475569' : '#d1d5db';
+    const sBorder = isRtl
+      ? `border-left:1px solid ${bdr}`
+      : `border-right:1px solid ${bdr}`;
+
+    return `    *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
+    :root{--sw:${visual.sidebarWidth}px;--pri:${pri};--pfil:${pfil};--pbg:${pbg};--ftbg:#111827}
+    html,body{height:100vh;overflow:hidden}
+    body{font-family:${fontStack};display:flex;flex-direction:${isRtl ? 'row-reverse' : 'row'};background:#000;color:#111827;font-size:${fs.base}}
+    .sidebar{width:var(--sw);min-width:var(--sw);background:${sbg};${sBorder};display:flex;flex-direction:column;overflow:hidden;z-index:10;transition:transform .25s ease}
+    .sidebar-header{padding:18px 16px 14px;border-bottom:1px solid ${bdr};flex-shrink:0}
+    .course-title{font-size:${fs.base};font-weight:700;line-height:1.4;color:${sTxt};margin-bottom:12px}
+    .progress-info{margin-bottom:6px}
+    .progress-label{font-size:${fs.xs};font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:${sMuted}}
+    .progress-pct{color:${pfil}}
+    .progress-track{height:5px;background:${pbg};border-radius:3px;overflow:hidden}
+    .progress-fill-el{height:100%;background:${pfil};border-radius:3px;transition:width .4s ease;width:0%}
+    .donut-wrap{display:flex;align-items:center;gap:10px;margin-bottom:4px}
+    .donut-lbl{display:flex;flex-direction:column;gap:1px}
+    .donut-pct{font-size:${fs.sm};font-weight:700;color:${pfil}}
+    .donut-sub{font-size:${fs.xs};font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:${sMuted}}
+    .lesson-nav{flex:1;overflow-y:auto;scrollbar-width:thin;scrollbar-color:${scrollClr} transparent}
+    .lesson-nav::-webkit-scrollbar{width:4px}
+    .lesson-nav::-webkit-scrollbar-thumb{background:${scrollClr};border-radius:2px}
+    .module-group{border-bottom:1px solid ${bdr}}
+    .module-header{display:flex;align-items:center;gap:10px;padding:10px 16px;background:${modbg};cursor:pointer;user-select:none;transition:background .15s}
+    .module-header:hover{background:${isDark ? '#1e2d3e' : '#f3f4f6'}}
+    .module-info{flex:1;min-width:0}
+    .module-seq{font-size:${fs.xs};font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:${sMuted};margin-bottom:1px}
+    .module-name{font-size:${fs.sm};font-weight:600;color:${sTxt};white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+    .module-chevron{font-size:.55rem;color:${sMuted};transition:transform .2s;flex-shrink:0}
+    .module-group.collapsed .module-lessons{display:none}
+    .module-group.collapsed .module-chevron{transform:rotate(-90deg)}
+    .lesson-item{display:flex;align-items:center;gap:10px;padding:9px 16px;cursor:pointer;border-left:3px solid transparent;transition:background .12s}
+    .lesson-item:hover{background:${hoverBg}}
+    .lesson-item.active{background:${activeBg};border-left-color:${pri}}
+    .lesson-icon{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:${idleBg};color:${idleClr};font-size:${fs.xs};font-weight:700}
+    .lesson-item.active .lesson-icon,.lesson-item.completed .lesson-icon{background:${pri};color:#fff}
+    .lesson-text{flex:1;min-width:0}
+    .lesson-title-el{font-size:${fs.sm};font-weight:500;color:${sTxt};line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
+    .lesson-dur{font-size:${fs.xs};color:${sMuted};margin-top:1px}
+    .player-area{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0}
+    .video-wrap{flex:1;display:flex;align-items:center;justify-content:center;background:#000;overflow:hidden;position:relative}
+    #video{width:100%;height:100%;object-fit:contain;display:none}
+    .empty-state{color:#4b5563;font-size:${fs.sm};text-align:center;position:absolute;pointer-events:none}
+    .player-footer{background:var(--ftbg);padding:10px 16px;display:flex;align-items:center;gap:12px;flex-shrink:0;border-top:1px solid #1f2937}
+    .footer-info{flex:1;min-width:0}
+    .footer-title{font-size:${fs.base};font-weight:600;color:#f9fafb;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+    .footer-meta{font-size:${fs.xs};color:#9ca3af;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+    .footer-nav{display:flex;gap:8px;flex-shrink:0}
+    .nav-btn{padding:6px 14px;border-radius:6px;border:1px solid #374151;background:#1f2937;color:#f3f4f6;font-size:${fs.sm};cursor:pointer;white-space:nowrap;transition:background .12s;font-family:inherit}
+    .nav-btn:hover:not(:disabled){background:#374151}
+    .nav-btn:disabled{opacity:.35;cursor:not-allowed}
+    .nav-btn.primary{background:${pri};border-color:${pri}}
+    .nav-btn.primary:hover:not(:disabled){filter:brightness(.85)}
+    .menu-toggle{display:none;position:fixed;top:10px;z-index:30;width:34px;height:34px;border-radius:8px;background:rgba(0,0,0,.75);color:#fff;border:none;cursor:pointer;font-size:1rem;align-items:center;justify-content:center}
+    .overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:9}
+    @media(max-width:768px){
+      .menu-toggle{display:flex}
+      .sidebar{position:fixed;top:0;bottom:0;${isRtl ? 'right:0;left:auto' : 'left:0;right:auto'};transform:${isRtl ? 'translateX(100%)' : 'translateX(-100%)'}}
+      .sidebar.open{transform:translateX(0);box-shadow:${isRtl ? '-4px 0 24px rgba(0,0,0,.35)' : '4px 0 24px rgba(0,0,0,.35)'}}
+      .overlay.show{display:block}
+    }`;
+  }
+
+  private generateJs(courseJson: string, progressStyle: string): string {
+    const isPie = progressStyle === 'pie';
+
+    return `    'use strict';
+    var COURSE=${courseJson};
+    var completed={};
+    var currentIdx=-1;
+    var allLessons=[];
+    var _api=null;
+
+    COURSE.modules.forEach(function(m){
+      m.lessons.forEach(function(l){l._mod=m.title;allLessons.push(l);});
+    });
+
+    function findApi(win){
+      var d=0;
+      try{
+        while(!win.API&&win.parent&&win.parent!==win&&d<7){
+          d++;win=win.parent;
+        }
+      }catch(e){}
+      try{return win.API||null;}catch(e){return null;}
+    }
+
+    function api(){
+      if(_api)return _api;
+      var found=findApi(window);
+      if(!found){
+        try{if(window.top&&window.top.opener)found=findApi(window.top.opener);}catch(e){}
+      }
+      return(_api=found||window.API||null);
+    }
+
+    function scorm(fn){
+      var a=api();if(!a)return null;
+      var args=Array.prototype.slice.call(arguments,1);
+      try{return a[fn].apply(a,args);}catch(e){return null;}
+    }
+
+    function loadProgress(){
+      var raw=scorm('LMSGetValue','cmi.suspend_data')||'';
+      try{var d=JSON.parse(raw||'{}');completed=d.completed||{};}
+      catch(e){completed={};}
+    }
+
+    function saveProgress(){
+      var count=Object.keys(completed).length;
+      var pct=COURSE.totalLessons>0?Math.round(count/COURSE.totalLessons*100):0;
+      scorm('LMSSetValue','cmi.suspend_data',JSON.stringify({completed:completed}));
+      scorm('LMSSetValue','cmi.core.score.raw',String(pct));
+      if(pct>=100){scorm('LMSSetValue','cmi.core.lesson_status','completed');}
+      else if(count>0){scorm('LMSSetValue','cmi.core.lesson_status','incomplete');}
+      scorm('LMSCommit','');
+    }
+
+    function fmtDur(s){
+      if(!s)return'';
+      var h=Math.floor(s/3600),m=Math.floor((s%3600)/60),sec=s%60;
+      if(h>0)return h+'h '+m+'min';
+      if(m>0&&sec>0)return m+'min '+sec+'s';
+      if(m>0)return m+' min';
+      return sec+'s';
+    }
+
+    function esc(s){
+      return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
+    }
+
+    function updateProgress(){
+      var count=Object.keys(completed).length;
+      var pct=COURSE.totalLessons>0?Math.round(count/COURSE.totalLessons*100):0;
+      ${isPie
+        ? `var el=document.getElementById('donutFill');
+      if(el){var c=2*Math.PI*15.9;el.setAttribute('stroke-dashoffset',(c*(1-pct/100)).toFixed(2));}
+      document.getElementById('pctLabel').textContent=pct+'%';`
+        : `document.getElementById('pctLabel').textContent=pct+'%';
+      document.getElementById('progressBar').style.width=pct+'%';`
+      }
+    }
+
+    function buildSidebar(){
+      var nav=document.getElementById('lessonNav');
+      COURSE.modules.forEach(function(mod,mi){
+        var group=document.createElement('div');
+        group.className='module-group';
+        var hdr=document.createElement('div');
+        hdr.className='module-header';
+        hdr.innerHTML='<div class="module-info"><div class="module-seq">Módulo '+(mi+1)+'</div><div class="module-name">'+esc(mod.title)+'</div></div><span class="module-chevron">▼</span>';
+        hdr.addEventListener('click',function(){group.classList.toggle('collapsed');});
+        group.appendChild(hdr);
+        var wrap=document.createElement('div');
+        wrap.className='module-lessons';
+        mod.lessons.forEach(function(lesson){
+          var done=!!completed[lesson.id];
+          var item=document.createElement('div');
+          item.className='lesson-item'+(done?' completed':'');
+          item.setAttribute('data-lesson-id',lesson.id);
+          var dur=lesson.duration?fmtDur(lesson.duration):'';
+          item.innerHTML='<div class="lesson-icon">'+(done?'✓':'►')+'</div><div class="lesson-text"><div class="lesson-title-el">'+esc(lesson.title)+'</div>'+(dur?'<div class="lesson-dur">'+dur+'</div>':'')+'</div>';
+          item.addEventListener('click',function(){
+            var idx=allLessons.findIndex(function(l){return l.id===lesson.id;});
+            navigateTo(idx);
+          });
+          wrap.appendChild(item);
+        });
+        group.appendChild(wrap);
+        nav.appendChild(group);
+      });
+    }
+
+    function navigateTo(idx){
+      if(idx<0||idx>=allLessons.length)return;
+      if(currentIdx>=0&&idx!==currentIdx)markCompleted(allLessons[currentIdx].id);
+      currentIdx=idx;
+      var lesson=allLessons[idx];
+      var video=document.getElementById('video');
+      var empty=document.getElementById('emptyState');
+      if(lesson.src){
+        video.style.display='block';
+        empty.style.display='none';
+        if(video.getAttribute('src')!==lesson.src){video.setAttribute('src',lesson.src);video.load();}
+      }else{
+        video.pause();
+        video.removeAttribute('src');
+        video.style.display='none';
+        empty.textContent='Esta aula n\\u00e3o possui v\\u00eddeo dispon\\u00edvel';
+        empty.style.display='block';
+      }
+      document.getElementById('footerTitle').textContent=lesson.title;
+      var meta=[];
+      if(lesson._mod)meta.push(lesson._mod);
+      if(lesson.duration)meta.push(fmtDur(lesson.duration));
+      document.getElementById('footerMeta').textContent=meta.join(' · ');
+      document.getElementById('prevBtn').disabled=idx===0;
+      document.getElementById('nextBtn').disabled=idx===allLessons.length-1;
+      document.querySelectorAll('.lesson-item').forEach(function(el){el.classList.remove('active');});
+      var el=document.querySelector('[data-lesson-id="'+lesson.id+'"]');
+      if(el){
+        el.classList.add('active');
+        if(!completed[lesson.id])el.querySelector('.lesson-icon').textContent='►';
+        el.scrollIntoView({behavior:'smooth',block:'nearest'});
+      }
+      scorm('LMSSetValue','cmi.core.lesson_location',String(lesson.id));
+      scorm('LMSCommit','');
+    }
+
+    function markCompleted(lessonId){
+      if(completed[lessonId])return;
+      completed[lessonId]=true;
+      var el=document.querySelector('[data-lesson-id="'+lessonId+'"]');
+      if(el){el.classList.add('completed');el.querySelector('.lesson-icon').textContent='✓';}
+      updateProgress();
+      saveProgress();
+    }
+
+    var videoEl=document.getElementById('video');
+    videoEl.addEventListener('ended',function(){
+      if(currentIdx>=0){
+        markCompleted(allLessons[currentIdx].id);
+        if(currentIdx<allLessons.length-1)setTimeout(function(){navigateTo(currentIdx+1);},1500);
+      }
+    });
+
+    document.getElementById('prevBtn').addEventListener('click',function(){navigateTo(currentIdx-1);});
+    document.getElementById('nextBtn').addEventListener('click',function(){navigateTo(currentIdx+1);});
+
+    (function(){
+      var sidebar=document.getElementById('sidebar');
+      var overlay=document.getElementById('overlay');
+      document.getElementById('menuToggle').addEventListener('click',function(){
+        var open=sidebar.classList.toggle('open');
+        overlay.classList.toggle('show',open);
+      });
+      overlay.addEventListener('click',function(){
+        sidebar.classList.remove('open');
+        overlay.classList.remove('show');
+      });
+    })();
+
+    function init(){
+      scorm('LMSInitialize','');
+      loadProgress();
+      buildSidebar();
+      updateProgress();
+      var bookmark=scorm('LMSGetValue','cmi.core.lesson_location')||'';
+      var startIdx=0;
+      if(bookmark){
+        var bId=parseInt(bookmark,10);
+        var found=allLessons.findIndex(function(l){return l.id===bId;});
+        if(found>=0)startIdx=found;
+      }
+      if(allLessons.length>0)navigateTo(startIdx);
+    }
+
+    if(document.readyState==='loading'){
+      document.addEventListener('DOMContentLoaded',init);
+    }else{
+      init();
+    }
+
+    window.addEventListener('beforeunload',function(){
+      saveProgress();
+      scorm('LMSFinish','');
+    });`;
+  }
+
+  private escapeXml(str: string): string {
+    return str
+      .replace(/&/g, '&amp;')
+      .replace(/</g, '&lt;')
+      .replace(/>/g, '&gt;')
+      .replace(/"/g, '&quot;')
+      .replace(/'/g, '&apos;');
+  }
+
+  private escapeHtml(str: string): string {
+    return str
+      .replace(/&/g, '&amp;')
+      .replace(/</g, '&lt;')
+      .replace(/>/g, '&gt;');
+  }
+}