primocode 7.18.0 → 8.0.0

package/studio/web/js/player.js

@@ -0,0 +1,504 @@
+/* ==========================================================================
+   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 = [], fluxoTela = null;
+  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");
+  }
+
+  function duracaoDe(i) { return (cenas[i] && cenas[i].duracao) || 4; }
+  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 || [];
+    cenas.forEach(function (c, i) {
+      var no = renderCena(c, doc, { animar: true });
+      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 (location.hash === "#imprimir") return setTimeout(imprimirTudo, 350);
+
+    if (ehVideo) {
+      montarTransporte();
+      prepararTrilha();
+      tocar();
+    }
+  }
+
+  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;
+    atual = Math.max(0, Math.min(cenas.length - 1, n));
+    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);
+      }
+    });
+    narrar();
+    pintarApresentador();
+    if (!semRelogio) decorrido = inicioDe(atual);
+    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); }
+
+  /* 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(); }
+    laco();
+    atualizarBotao();
+  }
+
+  function pausar() {
+    tocando = false;
+    cancelAnimationFrame(quadro);
+    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);
+  }
+
+  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; }
+    }
+    if (decorrido >= total()) return fim();
+    if (alvo !== atual) ir(alvo, true);
+    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;
+    pintar();
+  }
+
+  /* ---------------------------------------------------------- narração -- */
+
+  var vozGravada = null;
+
+  function narrar() {
+    if (typeof Narracao !== "undefined") Narracao.parar();
+    if (vozGravada) { vozGravada.pause(); vozGravada = null; }
+    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;
+      var p = vozGravada.play();
+      if (p && p.catch) p.catch(function () {});
+      return;
+    }
+
+    if (typeof Narracao === "undefined" || !Narracao.disponivel()) return;
+    if (cena.narracao) 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 -- */
+
+  function prepararTrilha() {
+    var cfg = doc.trilha;
+    if (!cfg || (!cfg.src && cfg.tipo !== "gerada")) return;
+    if (typeof criarTrilha !== "function") return;
+    trilha = criarTrilha(cfg, function (msg) { aviso(msg, 3000); });
+  }
+
+  /* --------------------------------------------------------- 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" id="tp-gravar" title="Gravar em .webm">Gravar</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 = alternarGravacao;
+    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();
+  }
+
+  function iniciarGravacao() {
+    if (!navigator.mediaDevices || !navigator.mediaDevices.getDisplayMedia) {
+      return aviso("este navegador não grava a tela", 3000);
+    }
+    // audio:true deixa o usuário marcar "compartilhar áudio da aba" — é assim
+    // que a narração falada entra na gravação
+    navigator.mediaDevices.getDisplayMedia({
+      video: { frameRate: 30 }, audio: true,
+    }).then(function (fluxo) {
+      fluxoTela = fluxo;
+      var faixas = fluxo.getVideoTracks();
+      fluxo.getAudioTracks().forEach(function (f) { faixas.push(f); });
+      if (trilha && trilha.fluxo) {
+        trilha.fluxo.getAudioTracks().forEach(function (f) { faixas.push(f); });
+      }
+      var misto = new MediaStream(faixas);
+      pedacos = [];
+      var tipo = MediaRecorder.isTypeSupported("video/webm;codecs=vp9,opus")
+        ? "video/webm;codecs=vp9,opus" : "video/webm";
+      gravador = new MediaRecorder(misto, { mimeType: tipo, videoBitsPerSecond: 8000000 });
+      gravador.ondataavailable = function (ev) { if (ev.data.size) pedacos.push(ev.data); };
+      gravador.onstop = baixarGravacao;
+      fluxo.getVideoTracks()[0].onended = pararGravacao;
+
+      gravador.start();
+      document.getElementById("tp-gravar").classList.add("gravando");
+      document.getElementById("tp-gravar").textContent = "Parar";
+      buscar(0);
+      tocar();
+      aviso("gravando — o vídeo para sozinho no fim", 3000);
+    }).catch(function () { aviso("gravação cancelada", 1500); });
+  }
+
+  function pararGravacao() {
+    if (gravador && gravador.state === "recording") gravador.stop();
+    if (fluxoTela) fluxoTela.getTracks().forEach(function (f) { f.stop(); });
+    var b = document.getElementById("tp-gravar");
+    if (b) { b.classList.remove("gravando"); b.textContent = "Gravar"; }
+  }
+
+  function baixarGravacao() {
+    var blob = new Blob(pedacos, { type: "video/webm" });
+    var url = URL.createObjectURL(blob);
+    var a = document.createElement("a");
+    a.href = url;
+    a.download = (arq.titulo || "video").replace(/[^\w\-]+/g, "-").toLowerCase() + ".webm";
+    a.click();
+    setTimeout(function () { URL.revokeObjectURL(url); }, 4000);
+    aviso("vídeo salvo em .webm", 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; },
+  };
+})();