primocode 8.42.1 → 9.0.0

package/studio/web/js/player.js

@@ -1,903 +0,0 @@
-/* ==========================================================================
-   player.js — apresenta, reproduz com trilha, grava e imprime.
-   Serve tanto para /v/<id> quanto para o HTML autônomo exportado.
-   ========================================================================== */
-
-(function () {
-  "use strict";
-
-  var palco = document.getElementById("palco");
-  if (!palco) return;
-
-  var arq = null, doc = {}, cenas = [], atual = 0;
-  var tocando = false, quadro = null, t0 = 0, decorrido = 0;
-  var trilha = null, gravador = null, pedacos = [];
-  /* Resolve quando o arquivo está MONTADO no palco. É por ela que a exportação
-     escondida (studio_exportar) sabe quando pode começar — antes disto não há
-     cena para fotografar, e um export que começa cedo sai preto. */
-  var carregadoOk = null;
-  var carregado = new Promise(function (ok) { carregadoOk = ok; });
-  var ehVideo = false, transporte = null;
-
-  /* ------------------------------------------------------------- avisos -- */
-
-  function aviso(texto, ms) {
-    var a = document.querySelector(".aviso");
-    if (!a) { a = document.createElement("div"); a.className = "aviso"; document.body.appendChild(a); }
-    a.textContent = texto;
-    a.classList.add("on");
-    clearTimeout(a._t);
-    a._t = setTimeout(function () { a.classList.remove("on"); }, ms || 1800);
-  }
-
-  function mmss(s) {
-    s = Math.max(0, Math.floor(s || 0));
-    return String(Math.floor(s / 60)).padStart(2, "0") + ":" + String(s % 60).padStart(2, "0");
-  }
-
-  /* Quanto dura o maior trecho de vídeo do usuário nesta cena.
-     Cortar as pausas de uma gravação vira uma fila de cenas, cada uma com um
-     pedaço do MESMO arquivo. Se cada uma dessas cenas durasse os 4 segundos
-     do padrão, o corte não seria corte nenhum: o trecho de 1,2s ficaria
-     congelado 2,8s e o de 9s sairia pela metade. O trecho é que manda. */
-  function duracaoClipe(c) {
-    var maior = 0;
-    (c.elementos || []).forEach(function (e) {
-      if (!e || e.tipo !== "clipe") return;
-      var de = Number(e.de) || 0, ate = Number(e.ate);
-      if (isFinite(ate) && ate > de) maior = Math.max(maior, ate - de);
-    });
-    return maior;
-  }
-
-  function duracaoDe(i) {
-    /* "duracao": "3s" (texto) fazia acc virar concatenação e o relógio dava
-       vídeo de 00:00. Número são ou o padrão — nunca corrente de texto. */
-    var c = cenas[i] || {};
-    var d = Number(c.duracao);
-    /* O padrão de 4s vale para cena de texto. Onde há gravação, o padrão é o
-       trecho — e o teto sobe junto, porque 60s é guarda contra erro de
-       digitação e um pedaço de vídeo medido não é erro de digitação. */
-    var clipe = duracaoClipe(c);
-    if (!(isFinite(d) && d > 0)) d = clipe > 0 ? Math.min(600, clipe) : 4;
-    else d = Math.min(clipe > 0 ? 600 : 60, d);
-    /* A narração pré-renderizada tem duração conhecida (o servidor mediu o
-       WAV e gravou `narracaoDur` na cena). A cena dura o que for MAIOR:
-       o que o autor pediu ou a fala inteira + um respiro. É isto que torna
-       a linha do tempo determinística — o "cena espera a voz" do laço vira
-       só a rede de segurança para narração sintetizada na hora. */
-    var n = Number(c.narracaoDur);
-    if (isFinite(n) && n > 0 && c.narracaoAudio) d = Math.max(d, Math.min(90, n + 0.4));
-    return d;
-  }
-  function total() { return cenas.reduce(function (s, _, i) { return s + duracaoDe(i); }, 0); }
-  function inicioDe(i) { var s = 0; for (var k = 0; k < i; k++) s += duracaoDe(k); return s; }
-
-  /* ----------------------------------------------------------- montagem -- */
-
-  function montar(a) {
-    arq = a;
-    doc = a.doc || {};
-    document.title = a.titulo || "PrimoCode";
-    palco.innerHTML = "";
-    ehVideo = a.ferramenta === "corte";
-
-    if (a.ferramenta === "prosa") return montarProsa();
-    if (a.ferramenta === "grade") return montarGrade();
-
-    cenas = doc.cenas || [];
-    // O rodapé (nome do deck, "03 / 08") é coisa de APRESENTAÇÃO: o vídeo e
-    // a arte não têm. Ver o rodapé em render.js.
-    var rodape = a.ferramenta === "prisma" ? { titulo: a.titulo, total: cenas.length } : null;
-    cenas.forEach(function (c, i) {
-      var no = renderCena(c, doc, {
-        animar: true,
-        rodape: rodape ? { titulo: rodape.titulo, indice: i + 1, total: rodape.total } : null,
-      });
-      no.style.position = "absolute";
-      no.style.inset = "0";
-      no.style.display = i === 0 ? "block" : "none";
-      palco.appendChild(no);
-    });
-    palco.style.cssText = "position:absolute;left:50%;top:50%;width:" +
-      (doc.largura || 1920) + "px;height:" + (doc.altura || 1080) + "px";
-
-    ajustar();
-    ir(0);
-    if (carregadoOk) { carregadoOk(a); carregadoOk = null; }
-
-    if (location.hash === "#imprimir") return setTimeout(imprimirTudo, 350);
-
-    if (ehVideo) {
-      montarTransporte();
-      prepararTrilha();
-      tocar();
-      // /v/<id>#gravar: o CLI abre assim quando o usuário pede "baixa o
-      // vídeo". O navegador pede a permissão de tela (a "aprovação"), o
-      // usuário aceita, o vídeo roda do zero gravando e baixa no fim —
-      // nenhuma chamada de IA no caminho inteiro.
-      if (location.hash.indexOf("gravar") !== -1) {
-        setTimeout(function () {
-          aviso("aceite a permissão para gravar — o download sai no fim", 4000);
-          iniciarGravacao();
-        }, 700);
-      }
-    }
-  }
-
-  function montarProsa() {
-    palco.style.cssText = "position:static";
-    document.body.style.overflow = "auto";
-    document.body.style.background = "#17171b";
-    var w = document.createElement("div");
-    w.style.cssText = "display:grid;place-items:center;padding:40px 20px";
-    w.appendChild(renderProsa(doc));
-    palco.appendChild(w);
-  }
-
-  function montarGrade() {
-    palco.style.cssText = "position:static";
-    document.body.style.overflow = "auto";
-    document.body.style.background = "#17171b";
-    var g = document.createElement("div");
-    g.style.cssText = "padding:26px";
-    (doc.abas || []).forEach(function (aba, i) {
-      var t = document.createElement("div");
-      t.style.cssText = "color:#8d8d9a;font:600 11px/1 system-ui;letter-spacing:.12em;" +
-                        "text-transform:uppercase;margin:22px 0 10px";
-      t.textContent = aba.nome || "Planilha " + (i + 1);
-      g.appendChild(t);
-      var caixa = document.createElement("div");
-      caixa.style.cssText = "overflow:auto;border-radius:12px;border:1px solid rgba(255,255,255,.09)";
-      caixa.appendChild(renderGrade(doc, { aba: i }));
-      g.appendChild(caixa);
-    });
-    palco.appendChild(g);
-  }
-
-  function ajustar() {
-    if (!cenas.length) return;
-    var alturaUI = ehVideo ? 74 : 0;
-    var larguraUI = painel ? 360 : 0;
-    var e = Math.min((window.innerWidth - larguraUI) / (doc.largura || 1920),
-                     (window.innerHeight - alturaUI) / (doc.altura || 1080));
-    palco.style.left = ((window.innerWidth - larguraUI) / 2) + "px";
-    palco.style.transform = "translate(-50%,-50%) scale(" + e + ")";
-    palco.style.marginTop = ehVideo ? (-alturaUI / 2) + "px" : "0";
-  }
-
-  /* ---------------------------------------------------------- navegação -- */
-
-  function ir(n, semRelogio) {
-    if (!cenas.length) return;
-    var anterior = atual;
-    atual = Math.max(0, Math.min(cenas.length - 1, n));
-    if (anterior !== atual) pararClipes(anterior);   // o áudio da cena que saiu vai junto
-    Array.prototype.forEach.call(palco.children, function (no, i) {
-      no.style.display = i === atual ? "block" : "none";
-      if (i === atual) {
-        no.classList.remove("animar");
-        void no.offsetWidth;                 // reinicia entrada e transição
-        no.classList.add("animar");
-        contar(no);
-      }
-    });
-    /* SFX na entrada da cena — só durante a reprodução (navegar com as setas
-       não faz barulho) e nunca na primeira montagem. `doc.sfx === false`
-       desliga tudo; `cena.sfx` escolhe o efeito ("whoosh" | "impacto" |
-       "click" | "nenhum") e ganha do automático por transição. */
-    if (sfx && tocando && ehVideo && atual !== anterior && doc.sfx !== false) {
-      var cenaNova = cenas[atual] || {};
-      var somDaCena = cenaNova.som != null ? cenaNova.som : cenaNova.sfx;
-      if (somDaCena !== "nenhum") {
-        if (somDaCena) sfx.tocar(somDaCena);
-        else sfx.transicao(cenaNova.transicao, atual);
-      }
-      /* SOM POR ELEMENTO: `som` num elemento toca quando ELE entra — no
-         mesmo instante da animação de entrada (o mesmo atraso da cascata
-         que o render.js dá ao --atraso). Um número que faz "ding" ao
-         aparecer, um ícone que faz "pop", a barra que sobe com o riser: é
-         o que separa motion de slide animado. Nome da biblioteca ou
-         {arquivo, volume} — o arquivo entra no grafo e vai para o MP4. */
-      agendarSonsDosElementos(cenaNova);
-    }
-    narrar();
-    pintarApresentador();
-    if (!semRelogio) decorrido = inicioDe(atual);
-    sincronizarClipes();
-    pintar();
-    if (location.hash.indexOf("#imprimir") !== 0) {
-      history.replaceState(null, "", "#/" + (atual + 1));
-    }
-  }
-
-  function proxima() { if (atual < cenas.length - 1) ir(atual + 1); else if (ehVideo) fim(); }
-  function anterior() { ir(atual - 1); }
-
-  /* ── clipes: a gravação do usuário andando junto com a cena ─────────────
-     Um `clipe` é um trecho do arquivo — `de` e `ate` em segundos. Quem manda
-     no tempo é o relógio do player, não o do <video>: senão cada cena com
-     gravação puxaria a linha do tempo para o lado dela e a trilha, a narração
-     e a exportação sairiam cada uma num compasso.
-
-     Mas corrigir `currentTime` a cada quadro deixa a imagem tremida e corta o
-     áudio. Então o <video> toca sozinho, que é o que ele faz bem, e só é
-     puxado de volta quando a diferença passa de um quinto de segundo — que é
-     mais que o ouvido perdoa numa fala. */
-  var DERIVA = 0.2;
-
-  function clipesDe(i) {
-    var no = palco.children[i];
-    return no ? no.querySelectorAll("video") : [];
-  }
-
-  function trechoDe(v) {
-    var de = parseFloat(v.dataset.de), ate = parseFloat(v.dataset.ate);
-    return { de: isFinite(de) ? de : 0, ate: isFinite(ate) ? ate : Infinity };
-  }
-
-  /* A voz do usuário tem de entrar no ARQUIVO, não só sair na caixa de som.
-     O MP4 leva as faixas de áudio que estão no grafo da trilha e mais nada —
-     um <video> tocando por fora sai pelo alto-falante e some do arquivo, que
-     é o pior dos mundos: parece certo na tela e chega mudo em quem recebe.
-
-     Entra pela `entradaVoz`, a mesma porta da narração: fica fora do volume
-     da trilha e fora do duck. Quem abaixa é a música; a fala, nunca.
-     `createMediaElementSource` só aceita ser chamado uma vez por elemento —
-     daí a marca no próprio nó. */
-  function ligarAoGrafo(v) {
-    if (v._ligado || !trilha || !trilha.ctx || !trilha.entradaVoz) return;
-    v._ligado = true;
-    if (v.muted) return;                          // clipe mudo não tem o que ligar
-    try {
-      trilha.ctx.createMediaElementSource(v).connect(trilha.entradaVoz);
-      if (trilha.duck) trilha.duck(true);         // a música cede enquanto ele fala
-    } catch (_) { /* já conectado, ou sem Web Audio: toca direto mesmo */ }
-  }
-
-  function tocarClipe(v) {
-    ligarAoGrafo(v);
-    if (trilha && trilha.ctx && trilha.ctx.state === "suspended") trilha.ctx.resume();
-    var p = v.play();
-    if (p && p.catch) p.catch(function () {});   // autoplay barrado: fica o quadro
-  }
-
-  function pararClipes(i) {
-    Array.prototype.forEach.call(clipesDe(i), function (v) { try { v.pause(); } catch (e) {} });
-  }
-
-  /* Chamado a cada quadro do laço, e depois de qualquer salto no tempo. */
-  function sincronizarClipes() {
-    var vs = clipesDe(atual);
-    if (!vs.length) return;
-    var dentro = Math.max(0, decorrido - inicioDe(atual));
-    Array.prototype.forEach.call(vs, function (v) {
-      if (v.readyState < 1) return;             // ainda sem metadados: nada a buscar
-      var t = trechoDe(v);
-      var alvo = t.de + dentro;
-      /* Passou do fim do trecho: segura o último quadro em vez de invadir o
-         que vem depois no arquivo — invadir é justamente a pausa que se
-         queria cortar. */
-      if (alvo >= t.ate) { if (!v.paused) v.pause(); return; }
-      /* Uma busca por vez, e com respiro. Numa máquina lenta (ou na
-         exportação escondida, que rasteriza a cena a cada quadro no mesmo
-         fio), o <video> fica atrás do relógio por mais de DERIVA em TODO
-         quadro: puxá-lo de volta a cada rAF é uma busca em cima da outra, e
-         um vídeo que só busca nunca tem quadro pronto — readyState fica em 1,
-         o export não desenha o clipe e o arquivo sai com o chão da cena no
-         lugar da gravação. Medido quadro a quadro no diagnóstico. */
-      if (v.seeking) return;
-      var agora = performance.now();
-      if (Math.abs(v.currentTime - alvo) > DERIVA && (!v._ultimaBusca || agora - v._ultimaBusca > 600)) {
-        v._ultimaBusca = agora;
-        try { v.currentTime = alvo; } catch (e) {}
-      }
-      if (tocando && v.paused) tocarClipe(v);
-      else if (!tocando && !v.paused) v.pause();
-    });
-  }
-
-  /* números que contam do zero até o valor ------------------------------- */
-
-  function contar(cena) {
-    Array.prototype.forEach.call(cena.querySelectorAll("b[data-contar]"), function (b) {
-      var alvo = parseFloat(b.getAttribute("data-contar"));
-      var molde = b.getAttribute("data-molde") || String(alvo);
-      var casas = (String(alvo).split(".")[1] || "").length;
-      var trecho = molde.match(/-?[\d.,]+/);
-      if (!trecho) return;
-      var inicio = performance.now(), dur = 1100;
-      (function passo(agora) {
-        var t = Math.min(1, (agora - inicio) / dur);
-        var suave = 1 - Math.pow(1 - t, 3);
-        var v = (alvo * suave).toFixed(casas);
-        b.textContent = molde.replace(trecho[0], String(v).replace(".", casas ? "," : ""));
-        if (t < 1) requestAnimationFrame(passo);
-        else b.textContent = molde;
-      })(inicio);
-    });
-  }
-
-  /* --------------------------------------------------------- reprodução -- */
-
-  function tocar() {
-    if (tocando || !cenas.length) return;
-    tocando = true;
-    t0 = performance.now() - decorrido * 1000;
-    if (trilha) { trilha.tocar(); }
-    sincronizarClipes();
-    laco();
-    atualizarBotao();
-  }
-
-  function pausar() {
-    tocando = false;
-    cancelAnimationFrame(quadro);
-    pararClipes(atual);
-    if (trilha) trilha.parar();
-    if (typeof Narracao !== "undefined") Narracao.parar();
-    if (vozGravada) { vozGravada.pause(); vozGravada = null; }
-    atualizarBotao();
-  }
-
-  function fim() {
-    pausar();
-    decorrido = total();
-    pintar();
-    aviso("fim", 1200);
-    if (gravador && gravador.state === "recording") setTimeout(pararGravacao, 600);
-    if (gravadorAudio && gravadorAudio.state === "recording") setTimeout(pararGravacao, 600);
-  }
-
-  /* A narração da cena ainda está no ar? */
-  function narrando() {
-    if (vozGravada && !vozGravada.ended && !vozGravada.paused) return true;
-    if (typeof Narracao !== "undefined" && Narracao.falando && Narracao.falando()) return true;
-    return false;
-  }
-
-  function laco() {
-    if (!tocando) return;
-    decorrido = (performance.now() - t0) / 1000;
-    var alvo = cenas.length - 1;
-    var acc = 0;
-    for (var i = 0; i < cenas.length; i++) {
-      acc += duracaoDe(i);
-      if (decorrido < acc) { alvo = i; break; }
-    }
-    /* A CENA ESPERA A VOZ. O relógio andava só pela `duracao`, e uma narração
-       mais longa que a cena vazava por cima da seguinte — era a "narração
-       fora de sincronia". Se a fala da cena atual ainda está no ar, o relógio
-       congela na beirada da cena: quem dita o corte é a voz. */
-    var fimDaAtual = inicioDe(atual) + duracaoDe(atual);
-    if ((alvo !== atual || decorrido >= total()) && narrando()) {
-      t0 = performance.now() - (fimDaAtual - 0.05) * 1000;
-      decorrido = fimDaAtual - 0.05;
-      pintar();
-      quadro = requestAnimationFrame(laco);
-      return;
-    }
-    if (decorrido >= total()) return fim();
-    if (alvo !== atual) ir(alvo, true);
-    sincronizarClipes();
-    pintar();
-    quadro = requestAnimationFrame(laco);
-  }
-
-  function buscar(segundos) {
-    decorrido = Math.max(0, Math.min(total() - 0.01, segundos));
-    var acc = 0, alvo = 0;
-    for (var i = 0; i < cenas.length; i++) {
-      acc += duracaoDe(i);
-      if (decorrido < acc) { alvo = i; break; }
-      alvo = i;
-    }
-    ir(alvo, true);
-    t0 = performance.now() - decorrido * 1000;
-    if (trilha && trilha.elemento) trilha.elemento.currentTime = (doc.trilha.inicio || 0) + decorrido;
-    sincronizarClipes();
-    pintar();
-  }
-
-  /* Antes de exportar, os clipes precisam ter chegado — `drawImage` de um
-     <video> sem quadro decodificado desenha nada, e o resultado seria a
-     gravação do usuário faltando do vídeo dele. Espera com prazo: um arquivo
-     que não carrega não pode travar a exportação da peça inteira. */
-  function clipesProntos(prazo) {
-    var todos = [];
-    Array.prototype.forEach.call(palco.querySelectorAll("video"), function (v) {
-      if (v.readyState >= 2) return;
-      todos.push(new Promise(function (ok) {
-        var pronto = function () { v.removeEventListener("loadeddata", pronto); ok(); };
-        v.addEventListener("loadeddata", pronto);
-        v.addEventListener("error", pronto);
-        try { v.load(); } catch (e) {}
-      }));
-    });
-    if (!todos.length) return Promise.resolve();
-    return Promise.race([
-      Promise.all(todos),
-      new Promise(function (ok) { setTimeout(ok, prazo || 15000); }),
-    ]);
-  }
-
-  /* ---------------------------------------------------------- narração -- */
-
-  var vozGravada = null;
-
-  function narrar() {
-    if (typeof Narracao !== "undefined") Narracao.parar();
-    if (vozGravada) { vozGravada.pause(); vozGravada = null; }
-    if (trilha && trilha.duck) trilha.duck(false);
-    if (mudo || doc.narracao === false) return;
-
-    var cena = cenas[atual] || {};
-
-    // voz gravada pelo usuário ganha da sintetizada, sempre
-    if (cena.narracaoAudio) {
-      vozGravada = new Audio(cena.narracaoAudio);
-      vozGravada.volume = (doc.voz && doc.voz.volume != null) ? doc.voz.volume : 1;
-      /* Pelo grafo da trilha, quando ele existe: a voz entra na gravação MP4
-         sem "compartilhar áudio da aba", e a música cede espaço (duck)
-         enquanto a fala dura. Sem grafo, toca direto como antes. */
-      if (trilha && trilha.ctx && trilha.entradaVoz) {
-        try {
-          var fonteVoz = trilha.ctx.createMediaElementSource(vozGravada);
-          fonteVoz.connect(trilha.entradaVoz);
-        } catch (_) { /* elemento já conectado ou grafo indisponível */ }
-        if (trilha.duck) {
-          trilha.duck(true);
-          vozGravada.onended = function () { if (trilha && trilha.duck) trilha.duck(false); };
-        }
-      }
-      var p = vozGravada.play();
-      if (p && p.catch) p.catch(function () {});
-      return;
-    }
-
-    if (typeof Narracao === "undefined" || !Narracao.disponivel()) return;
-    if (cena.narracao) {
-      if (trilha && trilha.duck) {
-        trilha.duck(true);
-        Narracao.falar(cena.narracao, doc.voz || {}).then(function () {
-          if (trilha && trilha.duck) trilha.duck(false);
-        });
-      } else {
-        Narracao.falar(cena.narracao, doc.voz || {});
-      }
-    }
-  }
-
-  /* ----------------------------------------------------- apresentador --- */
-
-  var painel = null, cronometro = 0, tiquetaque = null;
-
-  function alternarApresentador() {
-    if (painel) {
-      painel.remove(); painel = null;
-      clearInterval(tiquetaque); tiquetaque = null;
-      ajustar();
-      return;
-    }
-    painel = document.createElement("div");
-    painel.className = "apresentador";
-    painel.innerHTML =
-      '<div><h4>Tempo</h4><div class="relogio" id="ap-relogio">00:00</div></div>' +
-      '<div><h4>Notas</h4><div class="corpo" id="ap-notas"></div></div>' +
-      '<div class="prox" id="ap-prox"></div>' +
-      '<div class="dica">→ avança · ← volta<br>S fecha · T zera o tempo<br>F tela cheia · P imprime</div>';
-    document.body.appendChild(painel);
-    tiquetaque = setInterval(function () {
-      cronometro++;
-      var r = document.getElementById("ap-relogio");
-      if (r) r.textContent = mmss(cronometro);
-    }, 1000);
-    pintarApresentador();
-    ajustar();
-  }
-
-  function pintarApresentador() {
-    if (!painel) return;
-    var notas = (cenas[atual] || {}).notas;
-    document.getElementById("ap-notas").innerHTML = notas
-      ? String(notas).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/\n/g, "<br>")
-      : '<span style="color:#5e6a77">— sem notas —</span>';
-    var prox = cenas[atual + 1];
-    var t = prox ? (prox.elementos || []).filter(function (e) {
-      return e.tipo === "texto" || e.tipo === "citacao";
-    })[0] : null;
-    document.getElementById("ap-prox").textContent = prox
-      ? "Próxima: " + ((t && t.texto) || "cena " + (atual + 2)).split("\n")[0]
-      : "Última cena";
-  }
-
-  /* ------------------------------------------------------------ trilha -- */
-
-  var sfx = null;
-
-  /* Os sons dos ELEMENTOS da cena que acabou de entrar. O atraso é o mesmo
-     que o render.js dá à animação de entrada (cascata: i × 0,09 s + 0,1 s, ou
-     o `anim.atraso` declarado), então o som cai no instante em que o
-     elemento aparece. Trocar de cena antes cancela o que ainda não tocou —
-     senão o "ding" da cena 3 tocava em cima da cena 4. */
-  var sonsAgendados = [];
-  function agendarSonsDosElementos(cena) {
-    sonsAgendados.forEach(clearTimeout);
-    sonsAgendados = [];
-    if (!sfx || !cena || !Array.isArray(cena.elementos)) return;
-    cena.elementos.forEach(function (e, i) {
-      if (!e || !e.som) return;
-      var atraso = (e.anim && typeof e.anim === "object" && e.anim.atraso != null)
-        ? +e.anim.atraso
-        : (e.chaves && e.chaves.length > 1 ? 0 : i * 0.09 + 0.1);
-      if (typeof e.som === "object" && e.som.em != null) atraso = +e.som.em;   // segundos na cena, explícito
-      sonsAgendados.push(setTimeout(function () { sfx.tocar(e.som); }, Math.max(0, atraso) * 1000));
-    });
-  }
-
-  function prepararTrilha() {
-    if (typeof criarTrilha !== "function") return;
-    var cfg = doc.trilha;
-    /* Sem trilha o grafo ainda nasce (tipo "nenhuma"): é por ele que a
-       narração e os SFX entram na gravação MP4. */
-    if (!cfg || (!cfg.src && cfg.tipo !== "gerada")) cfg = { tipo: "nenhuma" };
-    trilha = criarTrilha(cfg, function (msg) { aviso(msg, 3000); });
-    if (trilha && trilha.ctx && trilha.no && typeof criarSfx === "function" && doc.sfx !== false) {
-      sfx = criarSfx(trilha.ctx, trilha.no);
-    }
-  }
-
-  /* --------------------------------------------------------- transporte -- */
-
-  function montarTransporte() {
-    transporte = document.createElement("div");
-    transporte.className = "transporte";
-    transporte.innerHTML =
-      '<button class="tp-btn" id="tp-tocar" title="Tocar / pausar (K)"></button>' +
-      '<div class="tp-tempo" id="tp-agora">00:00</div>' +
-      '<div class="tp-barra" id="tp-barra"><div class="tp-cheio" id="tp-cheio"></div>' +
-      '<div class="tp-marcas" id="tp-marcas"></div></div>' +
-      '<div class="tp-tempo" id="tp-total">00:00</div>' +
-      '<button class="tp-btn pequeno" id="tp-som" title="Mudo (M)"></button>' +
-      '<input class="tp-vol" id="tp-vol" type="range" min="0" max="100" value="70">' +
-      '<button class="tp-btn texto primo" id="tp-gravar" title="Baixar vídeo ou áudio">Baixar ▾</button>';
-    document.body.appendChild(transporte);
-
-    document.getElementById("tp-tocar").onclick = function () { tocando ? pausar() : tocar(); };
-    document.getElementById("tp-som").onclick = alternarMudo;
-    document.getElementById("tp-gravar").onclick = menuBaixar;
-    document.getElementById("tp-vol").oninput = function () {
-      if (trilha) trilha.volume(this.value / 100);
-    };
-
-    var barra = document.getElementById("tp-barra");
-    barra.onclick = function (ev) {
-      var r = barra.getBoundingClientRect();
-      buscar(((ev.clientX - r.left) / r.width) * total());
-    };
-
-    var marcas = document.getElementById("tp-marcas");
-    cenas.forEach(function (_, i) {
-      if (!i) return;
-      var m = document.createElement("i");
-      m.style.left = (inicioDe(i) / total() * 100) + "%";
-      marcas.appendChild(m);
-    });
-
-    document.getElementById("tp-total").textContent = mmss(total());
-    atualizarBotao();
-  }
-
-  function atualizarBotao() {
-    var b = document.getElementById("tp-tocar");
-    if (b) b.innerHTML = svgIcone(tocando ? "pausa" : "play");
-    var s = document.getElementById("tp-som");
-    if (s) s.innerHTML = svgIcone("olho");
-  }
-
-  var mudo = false;
-  function alternarMudo() {
-    mudo = !mudo;
-    if (trilha) trilha.volume(mudo ? 0 : (document.getElementById("tp-vol").value / 100));
-    aviso(mudo ? "som desligado" : "som ligado", 900);
-  }
-
-  function pintar() {
-    var c = document.getElementById("tp-cheio");
-    if (!c) return;
-    c.style.width = (decorrido / total() * 100) + "%";
-    document.getElementById("tp-agora").textContent = mmss(decorrido);
-  }
-
-  /* ---------------------------------------------------------- gravação --- */
-
-  function alternarGravacao() {
-    if (gravador && gravador.state === "recording") return pararGravacao();
-    iniciarGravacao();
-  }
-
-  /* Menu do botão Baixar: vídeo completo ou só o áudio.
-
-     O áudio sai DIRETO do grafo (trilha + narração + SFX, já mixados com
-     ducking) — sem pedir permissão de tela nenhuma, porque não há tela:
-     é o MediaRecorder pendurado no fluxo da Web Audio. */
-  function menuBaixar() {
-    if ((gravador && gravador.state === "recording") ||
-        (gravadorAudio && gravadorAudio.state === "recording")) {
-      return pararGravacao();
-    }
-    var velho = document.getElementById("menu-baixar");
-    if (velho) { velho.remove(); return; }
-    var m = document.createElement("div");
-    m.id = "menu-baixar";
-    m.className = "menu-baixar";
-    m.innerHTML =
-      '<button data-acao="mp4">🎬 Vídeo completo <span>' + (gravaMp4() ? "MP4" : "WebM") + " · imagem + som</span></button>" +
-      '<button data-acao="audio">🎧 Só o áudio <span>narração + trilha + efeitos</span></button>';
-    document.body.appendChild(m);
-    m.onclick = function (ev) {
-      var b = ev.target.closest("button");
-      if (!b) return;
-      m.remove();
-      if (b.dataset.acao === "mp4") iniciarGravacao();
-      else iniciarGravacaoAudio();
-    };
-    setTimeout(function () {
-      document.addEventListener("click", function fecha(e) {
-        if (!m.contains(e.target)) { m.remove(); document.removeEventListener("click", fecha); }
-      });
-    }, 0);
-  }
-
-  /* ------------------------------------------------ gravação só de áudio -- */
-
-  var gravadorAudio = null, pedacosAudio = [];
-
-  var FORMATOS_AUDIO = [
-    "audio/mp4",                    // AAC → .m4a: toca em tudo, importa em tudo
-    "audio/webm;codecs=opus",
-    "audio/webm",
-  ];
-
-  function iniciarGravacaoAudio() {
-    if (!trilha || !trilha.fluxo) return aviso("áudio indisponível neste navegador", 2500);
-    var tipo = "";
-    for (var i = 0; i < FORMATOS_AUDIO.length; i++) {
-      if (MediaRecorder.isTypeSupported(FORMATOS_AUDIO[i])) { tipo = FORMATOS_AUDIO[i]; break; }
-    }
-    pedacosAudio = [];
-    gravadorAudio = new MediaRecorder(trilha.fluxo, tipo ? { mimeType: tipo, audioBitsPerSecond: 192000 } : undefined);
-    gravadorAudio.ondataavailable = function (ev) { if (ev.data.size) pedacosAudio.push(ev.data); };
-    gravadorAudio.onstop = baixarAudio;
-    gravadorAudio.start();
-    var b = document.getElementById("tp-gravar");
-    if (b) { b.classList.add("gravando"); b.textContent = "Parar"; }
-    buscar(0);
-    tocar();
-    aviso("gravando o áudio — para sozinho no fim", 2600);
-  }
-
-  function baixarAudio() {
-    var mime = (gravadorAudio && gravadorAudio.mimeType) || "audio/webm";
-    var ext = /mp4/.test(mime) ? ".m4a" : ".weba";
-    var blob = new Blob(pedacosAudio, { type: mime.split(";")[0] });
-    var url = URL.createObjectURL(blob);
-    var a = document.createElement("a");
-    a.href = url;
-    a.download = (arq.titulo || "audio").replace(/[^\w\-]+/g, "-").toLowerCase() + ext;
-    a.click();
-    setTimeout(function () { URL.revokeObjectURL(url); }, 4000);
-    aviso("áudio salvo em " + ext, 2600);
-    gravadorAudio = null;
-  }
-
-/* O melhor formato que este navegador sabe gravar.
- *
- * A ordem importa: H.264 com AAC é o MP4 que toca em qualquer lugar —
- * WhatsApp, Instagram, PowerPoint, TV. AV1 em MP4 é MP4 de verdade mas ainda
- * não toca em tudo, então vem depois. O webm é o último recurso: abre em
- * navegador e pouco mais.
- */
-var FORMATOS = [
-  "video/mp4;codecs=avc1.42E01E,mp4a.40.2",
-  "video/mp4;codecs=avc1,mp4a.40.2",
-  "video/mp4;codecs=avc1",
-  "video/mp4",
-  "video/webm;codecs=vp9,opus",
-  "video/webm",
-];
-
-function escolherFormato() {
-  for (var i = 0; i < FORMATOS.length; i++) {
-    if (MediaRecorder.isTypeSupported(FORMATOS[i])) return FORMATOS[i];
-  }
-  return "video/webm";
-}
-
-function gravaMp4() { return /mp4/.test(escolherFormato()); }
-
-  /* Baixar o vídeo = DESENHAR o vídeo, não gravar a tela.
-   *
-   * Aqui havia getDisplayMedia: pedia permissão, o usuário escolhia uma
-   * janela, e o navegador salvava o que estivesse aparecendo. O ponteiro do
-   * mouse entrava no vídeo, notificação entrava no vídeo, e a resolução era
-   * a da janela em vez da do projeto. Quem vai VENDER a ferramenta não pede
-   * ao cliente para compartilhar a tela para exportar um arquivo dele.
-   *
-   * Agora o player TOCA e o video.js fotografa a cena que está no palco,
-   * quadro a quadro, para um canvas do tamanho exato do projeto. O áudio é
-   * o mesmo grafo de sempre — trilha, narração e efeitos, já mixados com o
-   * ducking — então o arquivo sai idêntico ao que se ouve aqui.
-   */
-  /* Monta o arquivo com o PLAYER como fonte, sem baixar. É o que o botão usa
-     por baixo e o que a exportação escondida (studio_exportar) chama por
-     fora — um caminho só, para o arquivo sair igual nos dois.
-
-     O player é a fonte: ele sabe encadear cenas, narrar no tempo certo e
-     tocar os efeitos. O exportador só pergunta o que está na tela. */
-  function gerarArquivo(op) {
-    op = op || {};
-    if (typeof VideoExport === "undefined" || !VideoExport.disponivel()) {
-      return Promise.reject(new Error("este navegador não sabe gerar vídeo"));
-    }
-    var fonte = {
-      duracao: total(),
-      // A gravação do usuário precisa estar decodificada antes do primeiro
-      // quadro; sem isso ela sairia do arquivo final, e só nele.
-      preparar: function () { return clipesProntos(); },
-      comecar: function () { buscar(0); tocar(); },
-      parar: function () { pausar(); },
-      no: function () { return palco.children[atual] || null; },
-    };
-    // O AudioContext nasce suspenso sem gesto; a exportação escondida chega
-    // com um gesto emprestado, e este resume é o que o gasta.
-    if (trilha && trilha.ctx && trilha.ctx.state === "suspended") { try { trilha.ctx.resume(); } catch (e) {} }
-    return VideoExport.gerar(arq, {
-      fonte: fonte,
-      fps: op.fps,
-      fluxoAudio: trilha && trilha.fluxo,
-      aoAndar: op.aoAndar,
-    });
-  }
-
-  function iniciarGravacao() {
-    var b = document.getElementById("tp-gravar");
-    if (!b || b.dataset.exportando) return;
-    if (typeof VideoExport === "undefined" || !VideoExport.disponivel()) {
-      return aviso("este navegador não sabe gerar vídeo", 3200);
-    }
-
-    b.dataset.exportando = "1";
-    b.classList.add("gravando");
-    aviso("montando o vídeo — não feche esta aba", 3000);
-
-    gerarArquivo({
-      aoAndar: function (f) { b.textContent = Math.round(f * 100) + "%"; },
-    }).then(function (r) {
-      VideoExport.salvar(r, arq.titulo);
-      aviso(r.mp4 ? "vídeo salvo em .mp4" : "salvo em .webm (este navegador não faz mp4)", 3400);
-    }).catch(function (e) {
-      aviso("não consegui gerar: " + e.message, 4200);
-    }).then(function () {
-      delete b.dataset.exportando;
-      b.classList.remove("gravando");
-      b.textContent = "Baixar ▾";
-    });
-  }
-
-
-  function pararGravacao() {
-    if (gravador && gravador.state === "recording") gravador.stop();
-    if (gravadorAudio && gravadorAudio.state === "recording") gravadorAudio.stop();
-    var b = document.getElementById("tp-gravar");
-    if (b) { b.classList.remove("gravando"); b.textContent = "Baixar ▾"; }
-  }
-
-  function baixarGravacao() {
-    var mime = (gravador && gravador.mimeType) || "video/webm";
-    var ext = /mp4/.test(mime) ? ".mp4" : ".webm";
-    var blob = new Blob(pedacos, { type: mime.split(";")[0] });
-    var url = URL.createObjectURL(blob);
-    var a = document.createElement("a");
-    a.href = url;
-    a.download = (arq.titulo || "video").replace(/[^\w\-]+/g, "-").toLowerCase() + ext;
-    a.click();
-    setTimeout(function () { URL.revokeObjectURL(url); }, 4000);
-    aviso("vídeo salvo em " + ext, 2600);
-  }
-
-  /* -------------------------------------------------------------- print -- */
-
-  function imprimirTudo() {
-    palco.style.cssText = "position:static;transform:none;width:auto;height:auto";
-    Array.prototype.forEach.call(palco.children, function (n) {
-      n.style.display = "block";
-      n.style.position = "relative";
-      n.style.inset = "auto";
-      n.classList.remove("animar");
-    });
-    var p = document.getElementById("progresso");
-    if (p) p.remove();
-    if (transporte) transporte.remove();
-    window.print();
-  }
-
-  /* ------------------------------------------------------------ eventos -- */
-
-  window.addEventListener("resize", ajustar);
-
-  document.addEventListener("keydown", function (ev) {
-    if (ev.metaKey || ev.ctrlKey || /input|textarea/i.test(ev.target.tagName)) return;
-    switch (ev.key) {
-      case "ArrowRight": case " ": case "PageDown":
-        ev.preventDefault(); if (ehVideo) pausar(); proxima(); break;
-      case "ArrowLeft": case "PageUp":
-        ev.preventDefault(); if (ehVideo) pausar(); anterior(); break;
-      case "Home": pausar(); ir(0); break;
-      case "End": pausar(); ir(cenas.length - 1); break;
-      case "k": case "K": tocando ? pausar() : tocar(); break;
-      case "m": case "M": alternarMudo(); break;
-      case "s": case "S": alternarApresentador(); break;
-      case "t": case "T": cronometro = 0; break;
-      case "n": case "N":
-        if (typeof Narracao !== "undefined" && Narracao.disponivel()) {
-          Narracao.falando() ? Narracao.parar() : narrar();
-        }
-        break;
-      case "f": case "F":
-        if (document.fullscreenElement) document.exitFullscreen();
-        else document.documentElement.requestFullscreen();
-        break;
-      case "p": case "P": window.print(); break;
-      case "Escape": pausar(); pararGravacao(); break;
-    }
-  });
-
-  var tx = null;
-  document.addEventListener("touchstart", function (e) { tx = e.touches[0].clientX; }, { passive: true });
-  document.addEventListener("touchend", function (e) {
-    if (tx == null) return;
-    var d = e.changedTouches[0].clientX - tx;
-    if (Math.abs(d) > 50) { pausar(); d < 0 ? proxima() : anterior(); }
-    tx = null;
-  }, { passive: true });
-
-  document.addEventListener("click", function (e) {
-    if (!cenas.length || e.target.closest("a,button,input,.transporte")) return;
-    if (ehVideo) { tocando ? pausar() : tocar(); return; }
-    e.clientX < window.innerWidth * 0.3 ? anterior() : proxima();
-  });
-
-  window.addEventListener("message", function (e) {
-    var m = e.data || {};
-    if (m.tipo === "arquivo") montar(m.arquivo);
-    if (m.tipo === "ir") { pausar(); ir(m.n); }
-  });
-
-  /* --------------------------------------------------------------- carga */
-
-  var embutido = document.getElementById("dados");
-  if (embutido) {
-    montar(JSON.parse(embutido.textContent));
-  } else {
-    var id = location.pathname.split("/").pop();
-    // lido antes de montar: ir() reescreve o hash e não deve pausar a reprodução
-    var inicio = parseInt((location.hash.match(/^#\/(\d+)/) || [])[1], 10);
-    fetch("/api/arquivos/" + id)
-      .then(function (r) { return r.json(); })
-      .then(function (a) {
-        if (a.erro) { palco.innerHTML = '<div style="color:#888;padding:40px">Arquivo não encontrado.</div>'; return; }
-        montar(a);
-        if (!isNaN(inicio) && inicio > 1) { pausar(); ir(inicio - 1); }
-      });
-  }
-
-  window.Player = {
-    ir: function (n) { ir(n - 1); }, proxima: proxima, anterior: anterior,
-    tocar: tocar, parar: pausar, buscar: buscar, gravar: alternarGravacao,
-    get cena() { return atual + 1; }, get total() { return cenas.length; },
-    // Para a exportação escondida: espera o arquivo montado, troca o que
-    // precisar (um clipe convertido) e gera pelo mesmo caminho do botão.
-    carregado: carregado, remontar: montar, exportar: gerarArquivo,
-  };
-})();