primocode 8.22.1 → 8.26.0

package/studio/web/js/exportar.js

@@ -63,6 +63,93 @@ var Exportar = (function () {
     return Promise.all(tarefas);
   }
 
+/* Copia para o clone o estado ATUAL de cada animação.
+ *
+ * Sem isto o vídeo exportado perde todo o movimento, e o erro é silencioso.
+ * O XMLSerializer copia a MARCAÇÃO, não o instante: o SVG resultante mostra
+ * o elemento no estado final da animação, sempre. Foi medido — aos 0,3 s de
+ * um vídeo, o título já aparecia no lugar final, com a entrada inteira
+ * perdida. O arquivo ficava tecnicamente perfeito e visualmente morto.
+ *
+ * A leitura vem do getComputedStyle do elemento VIVO, que reflete onde a
+ * animação está agora, e entra como estilo inline no clone. Depois as
+ * animações são desligadas no clone: o estado já está escrito, e deixá-las
+ * ligadas faria o SVG recomeçar do zero por cima.
+ *
+ * Só três propriedades são copiadas — são as que as animações do estúdio
+ * mexem (entrada, transição, chaves, Ken Burns, cubo 3D). Copiar o estilo
+ * computado inteiro seria dezenas de vezes mais caro por quadro, e o resto
+ * já vem das folhas embutidas no próprio SVG. */
+function assarAnimacoes(original, clone) {
+  var deLa = original.querySelectorAll("*");
+  var daCa = clone.querySelectorAll("*");
+  var n = Math.min(deLa.length, daCa.length);
+  for (var i = 0; i < n; i++) {
+    var cs = window.getComputedStyle(deLa[i]);
+    var alvo = daCa[i].style;
+    if (cs.transform && cs.transform !== "none") alvo.transform = cs.transform;
+    if (cs.opacity !== "" && cs.opacity !== "1") alvo.opacity = cs.opacity;
+    if (cs.filter && cs.filter !== "none") alvo.filter = cs.filter;
+    alvo.animation = "none";
+  }
+  // A raiz também: a TRANSIÇÃO de cena (zoom, deslizar, persiana) anima o
+  // transform dela. Quem chama zera esse transform para desfazer a escala de
+  // pré-visualização — e sem copiar de volta o valor animado, toda transição
+  // sumia do arquivo exportado.
+  var raiz = window.getComputedStyle(original);
+  if (raiz.transform && raiz.transform !== "none") clone.style.transform = raiz.transform;
+  if (raiz.opacity !== "" && raiz.opacity !== "1") clone.style.opacity = raiz.opacity;
+  if (raiz.filter && raiz.filter !== "none") clone.style.filter = raiz.filter;
+  clone.style.animation = "none";
+}
+
+/* Uma cena do DOM → uma <img> pronta para desenhar no canvas.
+ *
+ * Separado de `imagem()` porque o vídeo precisa disto CENTENAS de vezes, e
+ * com a folha de CSS já buscada: refazer o fetch do core.css e do render.css
+ * a cada quadro seria o gasto dominante.
+ *
+ * `congelar` põe as animações no estado final — é o que a exportação de PNG
+ * quer. O vídeo passa false, porque o que ele quer é o retrato do instante. */
+/* `mascara` recebe o clone antes de virar SVG e pode esconder camadas. É como
+   a exportação de vídeo tira o fundo da cena que tem gravação do usuário: o
+   quadro do <video> é pintado à parte, no canvas, e o fundo do tema por cima
+   dele apagaria justamente a imagem que se quer mostrar. */
+function retrato(cenaEl, L, A, folha, congelar, mascara) {
+  var clone = cenaEl.cloneNode(true);
+  clone.style.transform = "none";
+  clone.style.position = "static";
+  clone.style.display = "block";
+  clone.style.width = L + "px";
+  clone.style.height = A + "px";
+  if (congelar) {
+    clone.classList.remove("animar");
+    Array.prototype.forEach.call(clone.querySelectorAll("*"), function (n) {
+      n.style.animation = "none";
+      n.style.opacity = n.style.opacity === "0" ? "1" : n.style.opacity;
+    });
+  } else {
+    assarAnimacoes(cenaEl, clone);
+  }
+  if (typeof mascara === "function") mascara(clone);
+  var caixa = document.createElement("div");
+  caixa.appendChild(clone);
+  return embutirImagens(caixa).then(function () {
+    var html = new XMLSerializer().serializeToString(clone);
+    var svg = '<svg xmlns="http://www.w3.org/2000/svg" width="' + L + '" height="' + A + '">' +
+      "<foreignObject width='100%' height='100%'>" +
+      '<div xmlns="http://www.w3.org/1999/xhtml">' +
+      "<style>" + folha.replace(/<\/style>/gi, "") + "</style>" +
+      html + "</div></foreignObject></svg>";
+    return new Promise(function (ok, falha) {
+      var img = new Image();
+      img.onload = function () { ok(img); };
+      img.onerror = function () { falha(new Error("não consegui montar a imagem")); };
+      img.src = "data:image/svg+xml;charset=utf-8," + encodeURIComponent(svg);
+    });
+  });
+}
+
   function imagem(cenaEl, op) {
     op = op || {};
     var L = op.largura || cenaEl.offsetWidth || 1920;
@@ -131,5 +218,5 @@ var Exportar = (function () {
       });
   }
 
-  return { imagem: imagem };
+  return { imagem: imagem, retrato: retrato, css: css, assarAnimacoes: assarAnimacoes };
 })();

package/studio/web/js/player.js

@@ -11,7 +11,7 @@
 
   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 trilha = null, gravador = null, pedacos = [];
   var ehVideo = false, transporte = null;
 
   /* ------------------------------------------------------------- avisos -- */
@@ -30,12 +30,32 @@
     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);
-    d = (isFinite(d) && d > 0) ? Math.min(60, d) : 4;
+    /* 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
@@ -140,6 +160,7 @@
     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) {
@@ -163,6 +184,7 @@
     narrar();
     pintarApresentador();
     if (!semRelogio) decorrido = inicioDe(atual);
+    sincronizarClipes();
     pintar();
     if (location.hash.indexOf("#imprimir") !== 0) {
       history.replaceState(null, "", "#/" + (atual + 1));
@@ -172,6 +194,79 @@
   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; }
+      if (Math.abs(v.currentTime - alvo) > DERIVA) {
+        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) {
@@ -200,6 +295,7 @@
     tocando = true;
     t0 = performance.now() - decorrido * 1000;
     if (trilha) { trilha.tocar(); }
+    sincronizarClipes();
     laco();
     atualizarBotao();
   }
@@ -207,6 +303,7 @@
   function pausar() {
     tocando = false;
     cancelAnimationFrame(quadro);
+    pararClipes(atual);
     if (trilha) trilha.parar();
     if (typeof Narracao !== "undefined") Narracao.parar();
     if (vozGravada) { vozGravada.pause(); vozGravada = null; }
@@ -252,6 +349,7 @@
     }
     if (decorrido >= total()) return fim();
     if (alvo !== atual) ir(alvo, true);
+    sincronizarClipes();
     pintar();
     quadro = requestAnimationFrame(laco);
   }
@@ -267,9 +365,32 @@
     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;
@@ -545,57 +666,62 @@ function escolherFormato() {
 
 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.
+   */
   function iniciarGravacao() {
-    if (!navigator.mediaDevices || !navigator.mediaDevices.getDisplayMedia) {
-      return aviso("este navegador não grava a tela", 3000);
+    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);
     }
-    // audio:true deixa o usuário marcar "compartilhar áudio da aba" — é assim
-    // que a narração falada entra na gravação
-    // preferCurrentTab tira o passo de escolher a janela: o Chrome já vem
-    // com ESTA aba selecionada, então baixar vira um clique e um "permitir"
-    // em vez de um clique, uma escolha e um "permitir".
-    navigator.mediaDevices.getDisplayMedia({
-      video: { frameRate: 30 }, audio: true,
-      preferCurrentTab: true, selfBrowserSurface: "include",
-    }).catch(function () {
-      // Navegador que não conhece preferCurrentTab recusa o pedido inteiro:
-      // repete sem as opções novas em vez de falhar.
-      return 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 = [];
-      // MP4 primeiro, e testando os codecs NOMEADOS antes do genérico.
-      //
-      // Testar só "video/mp4" perdia MP4 em navegador que existe: o Chrome
-      // responde false para o nome solto e true para
-      // "video/mp4;codecs=avc1.42E01E,mp4a.40.2". Quem pediu MP4 recebia
-      // webm à toa. A lista vai do mais compatível (H.264 + AAC, que toca em
-      // tudo) para o menos, e só cai no webm quando não há MP4 nenhum.
-      var tipo = escolherFormato();
-      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); });
+
+    b.dataset.exportando = "1";
+    b.classList.add("gravando");
+    aviso("montando o vídeo — não feche esta aba", 3000);
+
+    // 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.
+    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; },
+    };
+
+    VideoExport.baixar(arq, {
+      nome: arq.titulo,
+      fonte: fonte,
+      fluxoAudio: trilha && trilha.fluxo,
+      aoAndar: function (f) { b.textContent = Math.round(f * 100) + "%"; },
+    }).then(function (r) {
+      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();
-    if (fluxoTela) fluxoTela.getTracks().forEach(function (f) { f.stop(); });
     var b = document.getElementById("tp-gravar");
     if (b) { b.classList.remove("gravando"); b.textContent = "Baixar ▾"; }
   }

package/studio/web/js/render.js

@@ -11,6 +11,11 @@ var PAPEIS = {
   apoio:     { tamanho: 30, peso: 400, altura: 1.45, cor: "var(--c-fraco)" },
   corpo:     { tamanho: 25, peso: 400, altura: 1.5, classe: "corpo" },
   legenda:   { tamanho: 18, peso: 400, altura: 1.45, cor: "var(--c-fraco)", classe: "corpo" },
+  /* Legenda de FALA, para vídeo — outra coisa de `legenda`, que é a nota de
+     rodapé de um slide. 18px sobre 1080p é ilegível no celular, e legenda de
+     vídeo é lida em movimento, muitas vezes sem som. Grande, com peso, e com
+     chapa escura atrás para funcionar sobre qualquer imagem. */
+  fala:      { tamanho: 52, peso: 640, altura: 1.25, classe: "fala" },
 };
 
 var LAYOUTS = ["capa", "titulo", "secao", "duas-colunas", "tres-colunas",
@@ -157,7 +162,7 @@ function svgGrafico(e, l, a) {
 
 var TIPOS_CONHECIDOS = { texto: 1, lista: 1, cartoes: 1, numeros: 1, tabela: 1, codigo: 1,
   citacao: 1, forma: 1, imagem: 1, icone: 1, grafico: 1, no: 1, conector: 1,
-  objeto3d: 1 };
+  objeto3d: 1, clipe: 1 };
 
 /* ── chaves de animação ──────────────────────────────────────────────────
    Transforma a lista de instantes de um elemento numa regra @keyframes de
@@ -611,6 +616,43 @@ function renderElemento(e, ctx) {
       break;
     }
 
+    /* ── clipe: um pedaço de vídeo do próprio usuário ────────────────────
+       "Eu gravo o vídeo, e aí ele vai editar: cortar as pausas demoradas,
+       legendar, colocar efeito, transição, uma música que combine."
+
+       Nada disso era possível — o estúdio não tinha como pôr o vídeo de
+       alguém dentro de uma cena. Um `clipe` é um trecho: o arquivo, de onde
+       começa e onde termina. Cortar as pausas vira uma lista de clipes do
+       MESMO arquivo, com os pedaços mudos fora.
+
+       `de` e `ate` são segundos no arquivo original. `mudo` deixa só a
+       imagem (para quando a trilha manda na cena), e `volume` mistura a voz
+       do vídeo com o resto. */
+    case "clipe": {
+      var vid = document.createElement("video");
+      vid.src = e.src || "";
+      vid.preload = "auto";
+      vid.playsInline = true;
+      vid.muted = !!e.mudo;
+      if (e.volume != null) vid.volume = Math.max(0, Math.min(1, e.volume));
+      vid.style.width = "100%";
+      vid.style.height = "100%";
+      vid.style.objectFit = e.ajuste === "conter" ? "contain" : "cover";
+      if (e.posicao) vid.style.objectPosition = e.posicao;
+      if (e.filtro) vid.style.filter = e.filtro === "cinza" ? "grayscale(1)"
+        : e.filtro === "sepia" ? "sepia(.7)"
+        : e.filtro === "contraste" ? "contrast(1.35) saturate(1.15)"
+        : e.filtro === "desbotado" ? "saturate(.55) brightness(1.08)"
+        : e.filtro;
+      // O trecho fica gravado no nó: quem toca (player) e quem exporta
+      // (video.js) leem daqui em vez de reabrir o documento.
+      if (typeof e.de === "number") vid.dataset.de = e.de;
+      if (typeof e.ate === "number") vid.dataset.ate = e.ate;
+      no.style.borderRadius = _px(e.raio != null ? e.raio : 0);
+      no.appendChild(vid);
+      break;
+    }
+
     case "icone": {
       var t = e.tamanho || 90;
       no.style.width = _px(e.l || t);
@@ -831,6 +873,25 @@ function renderCena(cena, doc, op) {
   var elementos = (cena.elementos || []).slice();
   var margem = Math.round(W * 0.068);
 
+  /* A gravação do usuário é o CHÃO da cena, não um bloco no meio do texto.
+     Entrando pelo fluxo, ela virava uma caixinha de 190px espremida embaixo
+     do título — e no vídeo exportado sobrava uma tarja de imagem cercada de
+     fundo. Quem grava o próprio rosto falando quer a imagem ocupando o
+     quadro, com a legenda POR CIMA.
+
+     Um clipe com `x`/`y` continua sendo elemento posicionado: aí a pessoa
+     pediu a caixinha de propósito (canto da tela, quadro dentro do quadro). */
+  var deChao = [];
+  var falas = [];
+  elementos = elementos.filter(function (e) {
+    if (!e || e.x != null || e.y != null) return true;
+    if (e.tipo === "clipe") { deChao.push(e); return false; }
+    // Legenda de fala mora no terço de baixo, como toda legenda de vídeo.
+    // Pelo fluxo ela iria para o meio da tela, em cima do rosto de quem fala.
+    if (e.tipo === "texto" && e.papel === "fala") { falas.push(e); return false; }
+    return true;
+  });
+
   var fluxo = document.createElement("div");
   fluxo.className = "fluxo";
   fluxo.setAttribute("data-layout", layout);
@@ -856,6 +917,43 @@ function renderCena(cena, doc, op) {
     })(),
   };
 
+  deChao.forEach(function (e) {
+    ctx.i++;
+    var el = renderElemento(e, ctx);
+    el.style.position = "absolute";
+    /* `inset: 0` sozinho não estica: renderElemento já deixou uma `height`
+       inline, e com altura declarada o `bottom` é ignorado (a regra do
+       over-constrained do CSS). A camada saía com 60px de altura — uma tarja
+       de imagem no topo, com fundo do tema no resto. Largura e altura ditas
+       na cara não têm essa conversa. */
+    el.style.left = "0"; el.style.top = "0"; el.style.right = ""; el.style.bottom = "";
+    el.style.width = "100%"; el.style.height = "100%";
+    el.style.zIndex = "0";
+    // Sem animação de entrada por padrão: deslizar o quadro inteiro da
+    // gravação não é efeito, é defeito. Quem pedir `anim` continua tendo.
+    if (!e.anim) { el.removeAttribute("data-an"); el.style.animation = "none"; }
+    no.insertBefore(el, fluxo);          // atrás do texto, na frente do fundo
+  });
+  if (deChao.length) {
+    fluxo.style.position = "relative";
+    fluxo.style.zIndex = "1";
+  }
+
+  if (falas.length) {
+    var faixa = document.createElement("div");
+    faixa.className = "faixa-fala";
+    faixa.style.position = "absolute";
+    faixa.style.left = "0"; faixa.style.right = "0";
+    faixa.style.bottom = Math.round(H * 0.085) + "px";
+    faixa.style.zIndex = "2";                 // acima do texto e da gravação
+    faixa.style.padding = "0 " + Math.round(W * 0.08) + "px";
+    falas.forEach(function (e) {
+      ctx.i++;
+      faixa.appendChild(renderElemento(e, ctx));
+    });
+    no.appendChild(faixa);
+  }
+
   if (layout === "livre") {
     fluxo.style.padding = "0";
     if (cena.auto) posicionarAuto(elementos, W, H, cena.auto);