primocode 8.22.1 → 8.26.0

package/studio/web/js/video.js

@@ -0,0 +1,434 @@
+/* ==========================================================================
+   video.js — o vídeo vira ARQUIVO. Sem gravar a tela de ninguém.
+
+   ── O QUE ESTAVA ERRADO ─────────────────────────────────────────────────
+   O botão de baixar usava getDisplayMedia: pedia permissão, o usuário
+   escolhia uma janela, e o navegador salvava o que estivesse aparecendo.
+   Isso é gravação de tela, não exportação. O dono foi direto ao ponto, em
+   quatro conversas diferentes:
+
+     "O mp4 não vai ser uma gravação da tela do usuário, tem nada a ver.
+      Tu clica no botão download ele já vai baixar o arquivo."
+
+   E não é preferência. Gravando a tela: o ponteiro do mouse entra no vídeo,
+   uma notificação entra no vídeo, a resolução é a da janela e não a do
+   projeto, e quem for VENDER a ferramenta não vai pedir para o cliente
+   compartilhar a tela para exportar um arquivo dele mesmo.
+
+   ── COMO FUNCIONA ───────────────────────────────────────────────────────
+   O vídeo é DESENHADO. Um canvas do tamanho exato do projeto é fotografado
+   a partir da cena que está tocando, quadro a quadro, e vira faixa de vídeo
+   por captureStream. O áudio vem do grafo que o player já monta — trilha,
+   narração e efeitos, com o ducking que abaixa a música na voz. O
+   MediaRecorder junta os dois num arquivo. Zero permissão.
+
+   ── POR QUE ELE DIRIGE O PLAYER EM VEZ DE RENDERIZAR SOZINHO ────────────
+   Porque o player já sabe tocar: ele encadeia as cenas, dispara a narração
+   no tempo certo, aplica ducking e toca os efeitos de transição. Refazer
+   isso aqui seria manter duas versões da mesma lógica — e elas divergiriam,
+   como já aconteceu neste código com o editor e o renderizador. Aqui o
+   exportador só pergunta "qual cena está na tela agora?" e fotografa.
+
+   ── POR QUE EM TEMPO REAL ───────────────────────────────────────────────
+   O ideal seria renderizar sem pressa e carimbar cada quadro com o tempo
+   dele (MediaStreamTrackGenerator). Foi testado: o MediaRecorder não produz
+   um byte com faixa vinda de gerador — zero em mp4, webm/vp8 e webm/vp9. Só
+   o captureStream de canvas grava, e ele é preso ao relógio.
+
+   O custo aparece na taxa de quadros: rasterizar 1920×1080 leva ~76 ms.
+   Mas quase nunca é preciso rasterizar — numa cena de 4 segundos a entrada
+   dura menos de um, e o resto do tempo o quadro está PARADO. Este arquivo
+   pergunta ao navegador se ainda há animação rodando; enquanto há,
+   redesenha; quando todas terminam, para, e o captureStream segue emitindo
+   o último quadro na taxa cheia. Movimento suave onde há movimento, imagem
+   limpa onde não há.
+   ========================================================================== */
+
+var VideoExport = (function () {
+  "use strict";
+
+  /* Do mais compatível para o menos.
+   *
+   * H.264 com AAC é o MP4 que toca em tudo — WhatsApp, Instagram,
+   * PowerPoint, TV, editor de vídeo. AV1 dentro de MP4 é MP4 de verdade mas
+   * ainda não toca em todo lugar, então vem depois. O webm é o último
+   * recurso: abre em navegador e pouco mais.
+   *
+   * Testar só "video/mp4" não basta: o Chrome responde false para o nome
+   * solto e true para a forma com codec. Já custou MP4 a quem pediu MP4. */
+  var FORMATOS = [
+    "video/mp4;codecs=avc1.42E01E,mp4a.40.2",
+    "video/mp4;codecs=avc1.4d002a,mp4a.40.2",
+    "video/mp4;codecs=avc1,mp4a.40.2",
+    "video/mp4;codecs=avc1",
+    "video/mp4",
+    "video/webm;codecs=vp9,opus",
+    "video/webm;codecs=vp8,opus",
+    "video/webm",
+  ];
+
+  function formato() {
+    if (!window.MediaRecorder) return null;
+    for (var i = 0; i < FORMATOS.length; i++) {
+      if (MediaRecorder.isTypeSupported(FORMATOS[i])) return FORMATOS[i];
+    }
+    return null;
+  }
+
+  function disponivel() {
+    return !!(formato() && document.createElement("canvas").captureStream
+      && typeof Exportar !== "undefined" && Exportar.retrato);
+  }
+
+  function ehMp4(tipo) { return /mp4/.test(tipo || ""); }
+  function extensaoDe(tipo) { return ehMp4(tipo) ? ".mp4" : ".webm"; }
+
+  /* Ainda há algo se mexendo nesta cena?
+   *
+   * É a pergunta que decide se vale gastar dezenas de milissegundos
+   * redesenhando. Animação infinita (Ken Burns, cubo 3D girando, brilho de
+   * gradiente) nunca termina — e aí redesenhar é o certo, porque a imagem
+   * MUDA mesmo. */
+  function aindaAnima(no) {
+    if (!no || !no.getAnimations) return true;   // sem a API: redesenha sempre
+    var todas;
+    try { todas = no.getAnimations({ subtree: true }); }
+    catch (e) { return true; }
+    for (var i = 0; i < todas.length; i++) {
+      if (todas[i].playState === "running") return true;
+    }
+    return false;
+  }
+
+  function duracaoDaCena(c) {
+    var d = c && c.duracao;
+    return (typeof d === "number" && isFinite(d) && d > 0) ? d : 4;
+  }
+
+  /* ------------------------------------------------------------ a fonte -- */
+
+  /* Uma "fonte" diz ao exportador o que fotografar e por quanto tempo.
+   *
+   * Quando o player está na página, ele é a fonte: sabe tocar, narrar e
+   * mixar. Fora dele (no editor, ou num teste), o exportador monta uma fonte
+   * própria que percorre as cenas por conta — mais simples, sem narração.
+   */
+  function fonteDoDocumento(doc, palco) {
+    var cenas = doc.cenas || [];
+    var nos = cenas.map(function (c) {
+      var no = renderCena(c, doc, { animar: true });
+      no.style.position = "static";
+      no.style.transform = "none";
+      no.style.display = "none";
+      palco.appendChild(no);
+      return no;
+    });
+    var atual = -1;
+    var t0 = 0;
+    var total = cenas.reduce(function (t, c) { return t + duracaoDaCena(c); }, 0);
+
+    function qualCena(t) {
+      var acc = 0;
+      for (var i = 0; i < cenas.length; i++) {
+        acc += duracaoDaCena(cenas[i]);
+        if (t < acc) return i;
+      }
+      return cenas.length - 1;
+    }
+
+    return {
+      duracao: total,
+      comecar: function () { t0 = performance.now(); },
+      parar: function () {},
+      no: function () {
+        var t = (performance.now() - t0) / 1000;
+        var i = qualCena(t);
+        if (i !== atual) {
+          atual = i;
+          nos.forEach(function (n, k) { n.style.display = k === i ? "block" : "none"; });
+          // reinicia entrada e transição, como o player faz
+          nos[i].classList.remove("animar");
+          void nos[i].offsetWidth;
+          nos[i].classList.add("animar");
+        }
+        return nos[i];
+      },
+    };
+  }
+
+  /* ------------------------------------------------------------ clipes -- */
+
+  /* Desenha os vídeos do usuário no canvas, ANTES do desenho da cena.
+   *
+   * O retrato de uma cena é feita por SVG com foreignObject, e foreignObject
+   * NÃO rasteriza <video>: o quadro do vídeo sairia em branco, por mais
+   * correto que o resto estivesse. Então o vídeo é desenhado direto no
+   * canvas — drawImage aceita um <video> e pega o quadro atual — e a cena
+   * entra por cima, onde o buraco do vídeo é transparente.
+   *
+   * A conta de posição vem do layout real: getBoundingClientRect do vídeo
+   * contra o da cena, convertido para as coordenadas do projeto. Assim vale
+   * para clipe posicionado à mão (x/y) e para clipe que o layout arrumou.
+   *
+   * "Onde o buraco é transparente" não era verdade e por isso a gravação
+   * sumia do arquivo: a cena carrega o fundo do tema, opaco, e ele cobria o
+   * vídeo inteiro. Um vídeo do usuário que não aparece no vídeo do usuário —
+   * e nada denunciava, porque na tela, no DOM, estava certo.
+   *
+   * Então numa cena com clipe a ordem é: a cor de chão do tema, o vídeo, e a
+   * cena SEM fundo por cima (é o que `semFundo` faz no clone). O texto, a
+   * legenda e a marca continuam por cima da imagem, que é onde devem estar.
+   */
+  function desenharClipes(ctx2d, cenaEl, L, A) {
+    var vids = cenaEl.querySelectorAll("video");
+    if (!vids.length) return;
+    var caixaCena = cenaEl.getBoundingClientRect();
+    if (!caixaCena.width || !caixaCena.height) return;
+    var escX = L / caixaCena.width;
+    var escY = A / caixaCena.height;
+
+    Array.prototype.forEach.call(vids, function (v) {
+      // readyState < 2 é vídeo sem quadro nenhum decodificado ainda: pedir
+      // para desenhar levanta exceção em alguns navegadores e mancha o
+      // canvas em outros.
+      if (v.readyState < 2 || !v.videoWidth) return;
+      var r = v.getBoundingClientRect();
+      var dx = (r.left - caixaCena.left) * escX;
+      var dy = (r.top - caixaCena.top) * escY;
+      var dw = r.width * escX;
+      var dh = r.height * escY;
+      if (dw <= 0 || dh <= 0) return;
+
+      // "cobrir" recorta o vídeo para encher a caixa sem deformar — o mesmo
+      // que o object-fit faz na tela. Sem isto o export esticaria a imagem
+      // e ficaria diferente do que a pessoa aprovou no player.
+      var conter = v.style.objectFit === "contain";
+      var escala = conter
+        ? Math.min(dw / v.videoWidth, dh / v.videoHeight)
+        : Math.max(dw / v.videoWidth, dh / v.videoHeight);
+      var lw = v.videoWidth * escala;
+      var lh = v.videoHeight * escala;
+      var lx = dx + (dw - lw) / 2;
+      var ly = dy + (dh - lh) / 2;
+
+      ctx2d.save();
+      ctx2d.beginPath();
+      ctx2d.rect(dx, dy, dw, dh);
+      ctx2d.clip();
+      // "cinza", "sepia", "contraste": na tela é filter do CSS, e drawImage
+      // ignora o CSS do elemento. O canvas tem o mesmo filtro, com a mesma
+      // gramática — então é só repassar, e o arquivo sai como o player.
+      var f = window.getComputedStyle(v).filter;
+      if (f && f !== "none") { try { ctx2d.filter = f; } catch (e) {} }
+      try { ctx2d.drawImage(v, lx, ly, lw, lh); } catch (e) { /* quadro ainda não veio */ }
+      ctx2d.restore();
+    });
+  }
+
+  /* O chão da cena, para o clipe que não ocupa o quadro inteiro. Sem isto,
+     a volta do vídeo sairia preta em vez da cor do tema. */
+  function corDeChao(no) {
+    var c = window.getComputedStyle(no).backgroundColor;
+    return (c && c !== "rgba(0, 0, 0, 0)" && c !== "transparent") ? c : "#0b0e14";
+  }
+
+  /* Prepara o CLONE da cena que tem gravação — só o clone, a tela do usuário
+     não muda. Duas coisas precisam sair, e as duas escondiam o vídeo:
+
+     · o fundo da cena, opaco por cima da gravação. `data-fundo` sai junto
+       porque os padrões (aurora, raios, ondas) são pseudo-elementos: zerar
+       `background` deixaria a camada de cima intacta;
+
+     · o próprio <video>. foreignObject não decodifica vídeo, mas também não
+       deixa o espaço vazio: pinta a caixa do elemento no cinza padrão
+       (#333). O quadro saía com a gravação desenhada embaixo e um retângulo
+       cinza chapado exatamente em cima dela. */
+  function semFundo(clone) {
+    clone.removeAttribute("data-fundo");
+    clone.style.background = "transparent";
+    clone.style.backgroundImage = "none";
+    Array.prototype.forEach.call(clone.querySelectorAll("video"), function (v) {
+      v.style.visibility = "hidden";
+      v.style.background = "transparent";
+      // A caixa que segura o vídeo também pinta (é o cinza de espera, útil na
+      // tela enquanto o arquivo carrega). No quadro exportado ela é só mais
+      // uma tampa em cima da gravação — e foi a última a ser encontrada,
+      // porque some junto com o resto do fundo e parece o fundo.
+      for (var pai = v.parentNode; pai && pai !== clone; pai = pai.parentNode) {
+        pai.style.background = "transparent";
+        pai.style.backgroundImage = "none";
+      }
+    });
+  }
+
+  /* Cena com vídeo nunca fica "parada": o clipe corre mesmo sem animação
+     CSS, e pular o redesenho congelaria a imagem do usuário. */
+  function temClipe(no) {
+    return !!(no && no.querySelector && no.querySelector("video"));
+  }
+
+  /* --------------------------------------------------------------- gerar -- */
+
+  /* Monta o arquivo e devolve { blob, bytes, formato, mp4, segundos }.
+   *
+   * `op.fonte` — quem diz o que fotografar (o player, normalmente).
+   * `op.fluxoAudio` — MediaStream já mixado. Sem ele o vídeo sai mudo.
+   * `op.aoAndar(fracao)` — progresso, para a interface mostrar.
+   */
+  function gerar(arq, op) {
+    op = op || {};
+    var doc = (arq && arq.doc) || {};
+    var cenas = doc.cenas || [];
+    if (!cenas.length) return Promise.reject(new Error("este arquivo não tem cenas"));
+
+    var tipo = formato();
+    if (!tipo) return Promise.reject(new Error("este navegador não sabe gerar vídeo"));
+
+    var L = doc.largura || 1920;
+    var A = doc.altura || 1080;
+    var FPS = op.fps || 30;
+    var andar = op.aoAndar || function () {};
+
+    var tela = document.createElement("canvas");
+    tela.width = L; tela.height = A;
+    var ctx2d = tela.getContext("2d", { alpha: false });
+    ctx2d.fillStyle = "#000";
+    ctx2d.fillRect(0, 0, L, A);
+
+    // Palco próprio só quando o exportador tem de montar as cenas sozinho.
+    // Fica DENTRO do documento (fora dele não há layout nem animação) mas
+    // fora da vista — e não com display:none, que também mataria o layout.
+    var palco = null;
+    var fonte = op.fonte;
+    if (!fonte) {
+      palco = document.createElement("div");
+      palco.setAttribute("aria-hidden", "true");
+      palco.style.cssText = "position:fixed;left:-99999px;top:0;pointer-events:none;"
+        + "width:" + L + "px;height:" + A + "px;overflow:hidden";
+      document.body.appendChild(palco);
+      fonte = fonteDoDocumento(doc, palco);
+    }
+
+    var fluxo = tela.captureStream(FPS);
+    if (op.fluxoAudio) {
+      op.fluxoAudio.getAudioTracks().forEach(function (f) { fluxo.addTrack(f); });
+    }
+
+    var pedacos = [];
+    var rec = new MediaRecorder(fluxo, {
+      mimeType: tipo,
+      videoBitsPerSecond: op.bitrate || (L * A > 1000000 ? 8000000 : 4000000),
+    });
+    rec.ondataavailable = function (ev) { if (ev.data && ev.data.size) pedacos.push(ev.data); };
+
+    var totalMs = (op.duracao || fonte.duracao || 0) * 1000;
+    var cancelado = false;
+    var folhaCss = null;
+
+    function limpar() {
+      try { if (fonte.parar) fonte.parar(); } catch (e) {}
+      if (palco) { try { palco.remove(); } catch (e) {} }
+      fluxo.getVideoTracks().forEach(function (t) { try { t.stop(); } catch (e) {} });
+    }
+
+    var promessa = Exportar.css().then(function (folha) {
+      folhaCss = folha;
+      // A fonte pode ter o que carregar antes do primeiro quadro — a gravação
+      // do usuário, que sem quadro decodificado desenharia em branco.
+      return fonte.preparar ? fonte.preparar() : null;
+    }).then(function () {
+      rec.start(1000);
+      if (fonte.comecar) fonte.comecar();
+
+      return new Promise(function (pronto) {
+        var t0 = performance.now();
+        var primeiro = true;
+
+        function volta() {
+          if (cancelado) return pronto();
+          var t = performance.now() - t0;
+          if (t >= totalMs) return pronto();
+          andar(Math.min(0.995, t / totalMs));
+
+          var no = fonte.no();
+          if (!no) return setTimeout(volta, 1000 / FPS);
+
+          // Quadro idêntico ao anterior não precisa ser refeito: o
+          // captureStream repete o último sozinho, na taxa cheia.
+          if (!primeiro && !aindaAnima(no) && !temClipe(no)) {
+            return setTimeout(volta, 1000 / FPS);
+          }
+          primeiro = false;
+
+          var comVideo = temClipe(no);
+          Exportar.retrato(no, L, A, folhaCss, false, comVideo ? semFundo : null)
+            .then(function (img) {
+            if (cancelado) return pronto();
+            if (comVideo) {
+              // chão do tema → gravação do usuário → cena sem fundo
+              ctx2d.fillStyle = corDeChao(no);
+              ctx2d.fillRect(0, 0, L, A);
+              desenharClipes(ctx2d, no, L, A);
+            }
+            ctx2d.drawImage(img, 0, 0, L, A);
+            volta();
+          }).catch(function () {
+            // Um quadro que não rasterizou não derruba o vídeo: segue, e o
+            // quadro anterior continua na tela.
+            setTimeout(volta, 1000 / FPS);
+          });
+        }
+        volta();
+      });
+    }).then(function () {
+      return new Promise(function (ok) {
+        // Um instante a mais antes de parar: o codificador precisa fechar o
+        // último trecho, e parar em cima do fim corta o final do vídeo.
+        setTimeout(function () {
+          rec.onstop = function () { ok(); };
+          if (rec.state !== "inactive") rec.stop(); else ok();
+        }, 400);
+      });
+    }).then(function () {
+      limpar();
+      var blob = new Blob(pedacos, { type: tipo.split(";")[0] });
+      if (!blob.size) throw new Error("o navegador não produziu vídeo");
+      andar(1);
+      return {
+        ok: true, blob: blob, bytes: blob.size,
+        formato: extensaoDe(tipo), tipo: tipo, mp4: ehMp4(tipo),
+        segundos: totalMs / 1000,
+      };
+    }).catch(function (e) {
+      limpar();
+      throw e;
+    });
+
+    promessa.cancelar = function () { cancelado = true; };
+    return promessa;
+  }
+
+  /* Gera e entrega o arquivo. É isto que o botão chama. */
+  function baixar(arq, op) {
+    op = op || {};
+    return gerar(arq, op).then(function (r) {
+      var url = URL.createObjectURL(r.blob);
+      var a = document.createElement("a");
+      a.href = url;
+      a.download = (op.nome || arq.titulo || "video")
+        .replace(/[^\w\-]+/g, "-").replace(/^-+|-+$/g, "").toLowerCase() + r.formato;
+      document.body.appendChild(a);
+      a.click();
+      a.remove();
+      setTimeout(function () { URL.revokeObjectURL(url); }, 8000);
+      return r;
+    });
+  }
+
+  return {
+    disponivel: disponivel, formato: formato, gerar: gerar, baixar: baixar,
+    FORMATOS: FORMATOS, _aindaAnima: aindaAnima,
+  };
+})();
+
+if (typeof module !== "undefined" && module.exports) module.exports = VideoExport;

package/studio/web/render.css

@@ -214,6 +214,33 @@
 }
 .cena .fluxo > .el { flex: 0 0 auto; max-width: 100%; }
 
+/* --------------------------------------------------- legenda de fala ----
+   Legenda de vídeo é lida em movimento e, muitas vezes, sem som — e por cima
+   de uma imagem que muda a cada quadro. Cor de tema não resolve: sobre um céu
+   claro, texto claro some; sobre uma sombra, texto escuro some.
+
+   Então ela não confia no fundo. Branco puro, peso alto, chapa escura atrás e
+   um contorno de sombra que segura a leitura mesmo quando a chapa cai em cima
+   de algo claro. É a mesma decisão de toda legenda de streaming. */
+.cena .faixa-fala {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
+  text-align: center;
+  pointer-events: none;
+}
+.cena .el.txt.fala {
+  display: inline-block;
+  max-width: 86%;
+  color: #fff;
+  background: rgba(6, 8, 12, .72);
+  padding: .32em .7em;
+  border-radius: .28em;
+  text-shadow: 0 2px 10px rgba(0, 0, 0, .85), 0 0 2px rgba(0, 0, 0, .9);
+  text-wrap: balance;
+}
+
 .cena .fluxo[data-layout="capa"],
 .cena .fluxo[data-layout="centro"],
 .cena .fluxo[data-layout="citacao"] { align-items: center; text-align: center; }

package/studio/web/tool.html

@@ -72,6 +72,7 @@
   <script src="/js/narracao.js"></script>
 <script src="/js/midia.js"></script>
 <script src="/js/exportar.js"></script>
+<script src="/js/video.js"></script>
 <script src="/js/editor.js"></script>
 </body>
 </html>

package/studio/web/view.html

@@ -20,6 +20,8 @@
 <script src="/js/sfx.js"></script>
 <script src="/js/voz-neural.js"></script>
   <script src="/js/narracao.js"></script>
+<script src="/js/exportar.js"></script>
+<script src="/js/video.js"></script>
 <script src="/js/player.js"></script>
 </body>
 </html>