primocode 8.34.1 → 8.36.0

package/studio/web/js/render.js

@@ -4,6 +4,60 @@
    Dois modos: layout nomeado (o estúdio posiciona) ou "livre" (x/y/l/a).
    ========================================================================== */
 
+/* ── A QUEBRA DA LEGENDA ─────────────────────────────────────────────────
+ * Legenda de vídeo tem regra de ofício, e ela não é opinião: linha curta o
+ * bastante para o olho pegar de relance (~38 caracteres em 1080p), no máximo
+ * três linhas, e a quebra caindo em espaço — nunca no meio da palavra.
+ *
+ * E as linhas saem EQUILIBRADAS. Encher a primeira até o talo e deixar duas
+ * palavras na segunda é o que faz a legenda parecer torta mesmo estando
+ * centralizada — foi essa a reclamação.
+ */
+var LEGENDA_LARGURA = 38;
+
+/** Quebra gulosa numa largura dada: enche a linha até não caber mais. */
+function envolver(palavras, largura) {
+  var linhas = [];
+  var atual = "";
+  for (var i = 0; i < palavras.length; i++) {
+    var tenta = atual ? atual + " " + palavras[i] : palavras[i];
+    if (atual && tenta.length > largura) { linhas.push(atual); atual = palavras[i]; }
+    else atual = tenta;
+  }
+  if (atual) linhas.push(atual);
+  return linhas;
+}
+
+function quebrarLegenda(texto) {
+  var t = String(texto == null ? "" : texto).replace(/\s+/g, " ").trim();
+  if (!t) return "";
+  if (t.length <= LEGENDA_LARGURA) return t;
+
+  var palavras = t.split(" ");
+  var quantas = envolver(palavras, LEGENDA_LARGURA).length;
+
+  /* O EQUILÍBRIO.
+   *
+   * A quebra gulosa enche a primeira linha até o talo e larga duas palavras na
+   * última — é isso que faz a legenda parecer torta mesmo estando
+   * centralizada, e foi essa a reclamação.
+   *
+   * A primeira tentativa foi dividir o comprimento pelo número de linhas e
+   * cortar no alvo. Não serve: o resto se acumula na última, que estourava a
+   * largura (41 caracteres numa régua de 38).
+   *
+   * O que serve é apertar a régua: procurar a MENOR largura que ainda cabe no
+   * mesmo número de linhas. Aí nenhuma linha passa do teto — a régua só
+   * encolheu — e todas ficam parecidas, porque foi o aperto que as igualou.
+   */
+  var melhor = LEGENDA_LARGURA;
+  for (var w = LEGENDA_LARGURA - 1; w >= 12; w--) {
+    if (envolver(palavras, w).length > quantas) break;
+    melhor = w;
+  }
+  return envolver(palavras, melhor).join("\n");
+}
+
 var PAPEIS = {
   chapeu:    { classe: "chapeu" },
   titulo:    { tamanho: 84, peso: 660, altura: 1.06 },
@@ -481,7 +535,15 @@ function renderElemento(e, ctx) {
       if (e.peso || papel.peso) no.style.fontWeight = e.peso || papel.peso;
       if (papel.altura) no.style.lineHeight = papel.altura;
       no.style.color = e.cor || papel.cor || "";
-      if (e.alinhar) { no.style.textAlign = e.alinhar; no.style.alignItems = e.alinhar === "centro" ? "center" : (e.alinhar === "direita" ? "flex-end" : "flex-start"); }
+      /* LEGENDA DE FALA É SEMPRE CENTRALIZADA, e o `alinhar` do modelo não
+         manda nela. Legenda de vídeo alinhada à esquerda não existe em lugar
+         nenhum — ela é lida em movimento, e o olho volta para o meio da tela.
+         Bastava o modelo escrever `alinhar: "esquerda"` uma vez para a legenda
+         sair torta, e ele escrevia. */
+      if (e.alinhar && e.papel !== "fala") {
+        no.style.textAlign = e.alinhar;
+        no.style.alignItems = e.alinhar === "centro" ? "center" : (e.alinhar === "direita" ? "flex-end" : "flex-start");
+      }
       if (e.fonte === "mono") no.style.fontFamily = "var(--f-mono)";
       if (e.fonte === "display") no.style.fontFamily = "var(--f-display)";
       if (e.maiusculas) no.style.textTransform = "uppercase";
@@ -489,7 +551,26 @@ function renderElemento(e, ctx) {
       if (e.altura != null) no.style.lineHeight = e.altura;
       if (e.estilo) no.setAttribute("data-estilo", e.estilo);
 
-      var corpoTexto = _rico(e.texto);
+      /* A LEGENDA SE QUEBRA SOZINHA.
+         "A IA não consegue formatar bem" — e não vai conseguir: ela escreve a
+         frase, não a diagramação. Quem sabe quantos caracteres cabem numa
+         linha de 1080p é este código, e é ele que quebra.
+
+         Sem isto a legenda saía como parágrafo: cinco linhas subindo pela
+         tela, tapando o rosto de quem fala. */
+      var corpoTexto = _rico(e.papel === "fala" ? quebrarLegenda(e.texto) : e.texto);
+      if (e.papel === "fala" && !e.tamanho) {
+        /* Legenda longa ENCOLHE em vez de crescer para cima. Três linhas com o
+           corpo de uma linha comem metade do quadro, e o rosto de quem fala
+           fica atrás delas.
+           
+           Não se corta palavra: perder o que foi dito é pior que letra menor.
+           O piso de 62% é onde a letra ainda se lê num celular. */
+        var nLinhas = String(quebrarLegenda(e.texto)).split("\n").length;
+        var base = (PAPEIS.fala.tamanho || 52) * (ctx.escalaTipo || 1);
+        var fator = Math.max(0.62, 1 - (nLinhas - 1) * 0.10);
+        if (nLinhas > 1) no.style.fontSize = _px(Math.round(base * fator));
+      }
 
       // marcador e fita precisam envolver cada linha para o fundo acompanhar
       if (e.estilo === "marcador" || e.estilo === "fita") {
@@ -844,6 +925,32 @@ function renderElemento(e, ctx) {
       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);
+
+      /* ── SÓ A VOZ, COM A TELA MONTADA POR CIMA ────────────────────────
+       *
+       *   "Não deixa opção de manter só a voz com uma tela de exemplos."
+       *
+       * Faltava mesmo, e não era teimosia do agente: o vocabulário tinha
+       * `mudo` (imagem sem som) e NÃO tinha o contrário. Sem isto, usar a
+       * gravação como narração — a voz da pessoa por cima de telas montadas
+       * pelo estúdio — era impossível de escrever, por mais que se pedisse.
+       *
+       * O <video> continua no lugar, carregando e tocando: é ele que leva o
+       * áudio para o grafo da trilha (e daí para o MP4) e é o `de`/`ate` dele
+       * que dá a duração da cena. O que muda é que ele não aparece — some da
+       * tela e some do quadro exportado, que é o `data-som` lido no
+       * `video.js`. Um <video> com `display:none` também continuaria tocando,
+       * mas alguns navegadores param de decodificar o que não está no
+       * layout, e sem quadro decodificado o player o trata como não-pronto. */
+      if (e.apenas === "som" || e.som === true) {
+        vid.dataset.som = "1";
+        no.style.position = "absolute";
+        no.style.left = "0"; no.style.top = "0";
+        no.style.width = "1px"; no.style.height = "1px";
+        no.style.opacity = "0";
+        no.style.pointerEvents = "none";
+        no.style.overflow = "hidden";
+      }
       no.appendChild(vid);
       break;
     }

package/studio/web/js/video.js

@@ -192,6 +192,10 @@ var VideoExport = (function () {
       // para desenhar levanta exceção em alguns navegadores e mancha o
       // canvas em outros.
       if (v.readyState < 2 || !v.videoWidth) return;
+      // Clipe de SÓ ÁUDIO: entra pelo som e não pelo quadro. Ele tem 1px na
+      // tela, então sem esta linha o export desenharia uma tira de um pixel
+      // esticada por cima da cena montada — visível, e sem causa aparente.
+      if (v.dataset && v.dataset.som === "1") return;
       var r = v.getBoundingClientRect();
       var dx = (r.left - caixaCena.left) * escX;
       var dy = (r.top - caixaCena.top) * escY;