primocode 8.36.0 → 8.38.0

package/studio/web/js/render.js

@@ -115,6 +115,13 @@ function aplicarFundo(no, fundo) {
     // Era metade do "os vídeos ficaram todos iguais".
     if (/^(malha|brilho|grade|pontos|suave|vinheta|aurora|nevoa|ondas|raios|xadrez)$/.test(fundo)) {
       no.setAttribute("data-fundo", fundo);
+    } else if (fundo === "marca") {
+      /* A cor da casa, chapada e sem efeito nenhum. Num anúncio de marca é o
+         fundo mais usado de todos — e escrevê-lo como `"#21C25E"` obrigaria a
+         repetir o hexadecimal em cada cena, que é como uma delas acaba com a
+         cor de ontem depois de a marca mudar de tom. */
+      no.style.background = "var(--c-tom)";
+      no.setAttribute("data-fundo", "marca");
     } else no.style.background = fundo;
     return;
   }
@@ -214,11 +221,30 @@ function svgGrafico(e, l, a) {
 
 /* -------------------------------------------------------------- elementos */
 
+/* O KIT DE ANÚNCIO — os quatro últimos da lista abaixo.
+ *
+ * Nasceram de um vídeo de referência mandado pelo dono — um comercial de
+ * fintech — com uma frase só: "ainda não tá bom, tá genérico. Quero nesse
+ * nível."
+ *
+ * Medindo a peça de hoje contra aquela, o que faltava não era tema nem cor:
+ * tema claro e `marca.cor` já existiam e resolvem o mundo da marca. O que não
+ * existia era o PRODUTO. Um anúncio de cartão mostra o cartão, mostra o app
+ * funcionando dentro do celular, mostra a linha de produtos e assina no fim.
+ * Com o vocabulário antigo, "o cartão" era um retângulo verde com a palavra
+ * "cartão" escrita dentro — e é exatamente isso que se lê como genérico.
+ *
+ * ── A LISTA ABAIXO É LIDA POR UM TESTE, e por isso não tem comentário dentro.
+ * O `vocabulario.test.js` recorta este objeto com uma expressão regular e
+ * pega as palavras: qualquer texto entre as chaves vira "tipo que o servidor
+ * precisa aceitar", e o teste passa a cobrar `fintech`, `genérico` e `dono`.
+ * Comentário sobre os tipos mora AQUI FORA. */
 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, clipe: 1,
   selo: 1, progresso: 1, avatar: 1, dispositivo: 1, conversa: 1, passos: 1,
-  opcoes: 1 };
+  opcoes: 1,
+  cartao: 1, app: 1, vitrine: 1, assinatura: 1 };
 /* Os sete últimos são o vocabulário do vídeo de referência: pílula de estado,
    trilha de progresso, foto de pessoa, celular/notebook com conteúdo dentro,
    balões de conversa, etapas com uma acesa, e pergunta com alternativas.
@@ -955,12 +981,212 @@ function renderElemento(e, ctx) {
       break;
     }
 
+    /* ── O CARTÃO ────────────────────────────────────────────────────────
+       Um produto desenhado, não um retângulo com o nome dele escrito dentro.
+       O que faz o olho ler "cartão" são quatro detalhes pequenos e nenhum
+       deles é o formato: o CHIP, o símbolo de aproximação, a numeração
+       mascarada e o pé com nome e validade. Sem eles o desenho é uma caixa;
+       com eles, qualquer pessoa reconhece em um quadro de vídeo.
+
+       A cor sai da marca (`--c-tom`) quando ninguém diz outra, para o cartão
+       pertencer à peça em vez de ser mais um objeto colorido nela. */
+    case "cartao": {
+      var cc = e.cor || "var(--c-tom)";
+      no.style.setProperty("--cc", cc);
+      if (e.largura) no.style.width = _px(e.largura);
+      if (e.movimento) no.setAttribute("data-mov", e.movimento);
+      if (e.face === "verso") no.setAttribute("data-face", "verso");
+
+      var corpo = document.createElement("div");
+      corpo.className = "cartao-corpo";
+
+      var topo = document.createElement("div");
+      topo.className = "cartao-topo";
+      var marca = document.createElement("span");
+      marca.className = "cartao-marca";
+      marca.textContent = e.nome || "";
+      var vari = document.createElement("span");
+      vari.className = "cartao-variante";
+      vari.textContent = e.variante || "";
+      topo.appendChild(marca); topo.appendChild(vari);
+
+      var meio = document.createElement("div");
+      meio.className = "cartao-meio";
+      var chip = document.createElement("i");
+      chip.className = "cartao-chip";
+      // O símbolo de aproximação: três arcos. Em SVG porque em texto ele
+      // depende de uma fonte que a máquina pode não ter.
+      var onda = document.createElement("span");
+      onda.className = "cartao-onda";
+      onda.innerHTML = '<svg viewBox="0 0 24 24" aria-hidden="true">'
+        + '<path d="M8 5a10 10 0 0 1 0 14M13 8a5.6 5.6 0 0 1 0 8M17.6 2.4a15 15 0 0 1 0 19.2"'
+        + ' fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>';
+      meio.appendChild(chip); meio.appendChild(onda);
+
+      var num = document.createElement("div");
+      num.className = "cartao-numero";
+      // Os quatro últimos dígitos e mais nada: é o que aparece num cartão de
+      // verdade em foto de campanha, e é o que não vira dado de ninguém.
+      num.textContent = "•••• •••• •••• " + String(e.numero || "4821").slice(-4);
+
+      var pe = document.createElement("div");
+      pe.className = "cartao-pe";
+      var quem = document.createElement("span");
+      quem.textContent = e.titular || "SEU NOME AQUI";
+      var val = document.createElement("span");
+      val.textContent = e.validade || "12/29";
+      pe.appendChild(quem); pe.appendChild(val);
+
+      var brilho = document.createElement("i");
+      brilho.className = "cartao-brilho";
+
+      corpo.appendChild(brilho);
+      corpo.appendChild(topo);
+      corpo.appendChild(meio);
+      corpo.appendChild(num);
+      corpo.appendChild(pe);
+      no.appendChild(corpo);
+      break;
+    }
+
+    /* ── A TELA DO APP ───────────────────────────────────────────────────
+       O `dispositivo` já desenhava o aparelho; o que ele mostrava DENTRO era
+       texto centralizado no meio do vidro, que não se parece com aplicativo
+       nenhum. O que faz uma tela parecer um app é a ARRUMAÇÃO: cabeçalho em
+       cima, um número grande, linhas com o nome à esquerda e o valor à
+       direita separadas por fio, e um botão cheio embaixo.
+
+       Vale sozinho na cena e vale dentro do `dispositivo` — é o mesmo
+       elemento, e por isso a tela do celular e a do print da campanha não
+       divergem. */
+    case "app": {
+      if (e.escuro) no.setAttribute("data-escuro", "1");
+      if (e.topo) {
+        var cab = document.createElement("div");
+        cab.className = "app-topo";
+        cab.innerHTML = "<span>" + _fugir(e.topo) + "</span><i></i>";
+        no.appendChild(cab);
+      }
+      if (e.valor) {
+        var caixaV = document.createElement("div");
+        caixaV.className = "app-valor";
+        if (e.rotulo) {
+          var rot = document.createElement("small");
+          rot.textContent = e.rotulo;
+          caixaV.appendChild(rot);
+        }
+        var vv = document.createElement("strong");
+        vv.textContent = e.valor;
+        caixaV.appendChild(vv);
+        no.appendChild(caixaV);
+      }
+      var linhas = e.linhas || e.itens || [];
+      if (linhas.length) {
+        var lista = document.createElement("div");
+        lista.className = "app-linhas";
+        linhas.slice(0, 8).forEach(function (li) {
+          /* Aceita ["nome", "valor"] e "nome|valor" — o segundo é a forma que
+             todo o resto da spec usa (lista, cartoes, passos), e quem escreve
+             o documento vai chutar a que já conhece. */
+          var nome = li, valor = "";
+          if (Array.isArray(li)) { nome = li[0]; valor = li[1] || ""; }
+          else if (typeof li === "string" && li.indexOf("|") > -1) {
+            var par = li.split("|"); nome = par[0]; valor = par.slice(1).join("|");
+          }
+          var linha = document.createElement("div");
+          linha.className = "app-linha";
+          linha.innerHTML = "<span>" + _fugir(String(nome).trim()) + "</span>"
+            + "<b>" + _fugir(String(valor).trim()) + "</b>";
+          lista.appendChild(linha);
+        });
+        no.appendChild(lista);
+      }
+      if (e.botao) {
+        var bt = document.createElement("div");
+        bt.className = "app-botao";
+        bt.textContent = e.botao;
+        no.appendChild(bt);
+      }
+      break;
+    }
+
+    /* ── A VITRINE ───────────────────────────────────────────────────────
+       A linha de produtos, com um escolhido. O `cartoes` genérico resolvia
+       isso com três caixinhas de vidro do tamanho de um selo; aqui os itens
+       são CARTÕES, o atual vem à frente e os outros recuam — que é o desenho
+       de toda tela de "escolha o seu". */
+    case "vitrine": {
+      var itens = (e.itens || []).slice(0, 5);
+      var atual = e.atual != null ? Number(e.atual) : 0;
+      if (e.titulo) {
+        var tt = document.createElement("div");
+        tt.className = "vitrine-titulo";
+        tt.textContent = e.titulo;
+        no.appendChild(tt);
+      }
+      var fila = document.createElement("div");
+      fila.className = "vitrine-fila";
+      itens.forEach(function (it, i) {
+        var dado = typeof it === "string"
+          ? { nome: it.split("|")[0], detalhe: it.split("|").slice(1).join("|") }
+          : (it || {});
+        var mini = renderElemento({
+          tipo: "cartao", nome: e.nome || dado.marca || "",
+          variante: dado.nome || dado.variante || "",
+          cor: dado.cor || e.cor, numero: dado.numero,
+          titular: " ", validade: " ",
+        }, ctx);
+        var col = document.createElement("div");
+        col.className = "vitrine-item" + (i === atual ? " atual" : "");
+        col.appendChild(mini);
+        if (dado.detalhe) {
+          var d = document.createElement("small");
+          d.textContent = dado.detalhe;
+          col.appendChild(d);
+        }
+        fila.appendChild(col);
+      });
+      no.appendChild(fila);
+      break;
+    }
+
+    /* ── A ASSINATURA ────────────────────────────────────────────────────
+       O fim do anúncio. Toda peça de marca fecha assim — o logo sozinho,
+       grande, sobre a cor da casa, e nada mais na tela. Sem este elemento a
+       última cena do vídeo era mais uma frase, e a peça acabava sem assinar
+       quem falou. */
+    case "assinatura": {
+      no.setAttribute("data-sobre", /^(marca|claro|escuro)$/.test(e.sobre || "") ? e.sobre : "marca");
+      if (e.logo) {
+        var img2 = document.createElement("img");
+        img2.className = "assinatura-logo";
+        img2.src = e.logo; img2.alt = e.nome || "";
+        no.appendChild(img2);
+      } else if (e.nome) {
+        var nm = document.createElement("div");
+        nm.className = "assinatura-nome";
+        nm.textContent = e.nome;
+        no.appendChild(nm);
+      }
+      if (e.frase) {
+        var fr = document.createElement("div");
+        fr.className = "assinatura-frase";
+        fr.textContent = e.frase;
+        no.appendChild(fr);
+      }
+      break;
+    }
+
     case "icone": {
       var t = e.tamanho || 90;
       no.style.width = _px(e.l || t);
       no.style.height = _px(e.a || t);
       no.style.color = e.cor || "var(--c-tom)";
-      no.innerHTML = svgIcone(e.nome || "estrela");
+      // `caminho`: o ícone desenhado pelo modelo (path SVG 24×24) — ver
+      // icones.js. Sem ele, um da lista pelo nome.
+      no.innerHTML = e.caminho
+        ? svgCaminho(e.caminho, { preenchido: !!e.preenchido, traco: e.traco })
+        : svgIcone(e.nome || "estrela");
       var s = no.querySelector("svg");
       if (s) s.setAttribute("stroke-width", e.traco || 1.5);
       break;
@@ -1188,6 +1414,11 @@ function renderCena(cena, doc, op) {
   elementos = elementos.filter(function (e) {
     if (!e || e.x != null || e.y != null) return true;
     if (e.tipo === "clipe") { deChao.push(e); return false; }
+    /* A ASSINATURA É A CENA INTEIRA, e por isso entra pelo chão e não pelo
+       fluxo. Pelo fluxo ela vira uma caixinha colorida no meio da tela, com a
+       margem do layout em volta — que é o oposto de assinar: o logo tem de
+       encostar nas bordas do quadro, como em qualquer fim de comercial. */
+    if (e.tipo === "assinatura") { 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; }
@@ -1203,6 +1434,21 @@ function renderCena(cena, doc, op) {
   // tela vertical pede tipografia maior: os padrões são calibrados em 1920x1080
   var escalaTipo = H > W ? 1.35 : 1;
   no.style.setProperty("--esc", escalaTipo);
+  // A altura do quadro, para o CSS dimensionar o que precisa ocupar a cena
+  // (o aparelho, hoje) em proporção e não em pixels calibrados num formato só.
+  no.style.setProperty("--alto", H + "px");
+  /* A UNIDADE DA CENA: 1% da largura do quadro.
+
+     Sem ela, tudo o que o CSS escreve em `em` cai na fonte herdada — que numa
+     cena é a do navegador, ~14px — e o desenho colapsa sem erro nenhum. Foi
+     medido num quadro de 1080x1920: a linha do extrato saiu com 7,84px e o
+     nome da assinatura com 30,8px, num quadro de 1920 de altura. Na tela
+     aquilo não é "pequeno": é invisível.
+
+     O resto do sistema resolve isso mandando PIXEL do documento (`tamanho`).
+     Peça que não tem `tamanho` — a tela do app, a vitrine, a assinatura — se
+     mede por aqui, e assim acompanha o formato em vez de ser calibrada num só. */
+  no.style.setProperty("--u", (W / 100) + "px");
   var ctx = {
     i: 0, escalaTipo: escalaTipo,
     animPadrao: op.animar ? (cena.anim || "subir") : null,
@@ -1328,10 +1574,12 @@ function renderCena(cena, doc, op) {
     cols.style.gridTemplateColumns = "repeat(" + (layout === "duas-colunas" ? 2 : 3) + ", 1fr)";
     solta(corpo, cols);
     fluxo.appendChild(cols);
+    comporCabecaCorpo(fluxo, layout, cabecalho.length, 1);
   } else {
     // um bloco só (cartoes, numeros…) já se distribui sozinho: não engaiolar
     solta(cabecalho, fluxo);
     solta(corpo, fluxo);
+    comporCabecaCorpo(fluxo, layout, cabecalho.length, corpo.length);
   }
 
   flutuantes.forEach(function (e) {
@@ -1341,8 +1589,54 @@ function renderCena(cena, doc, op) {
     no.appendChild(el);
   });
 
+  /* O RODAPÉ DA APRESENTAÇÃO: nome do deck à esquerda, "03 / 08" à direita.
+     É o que ancora a composição no quadro — sem ele, uma cena de título e
+     lista é um bloco flutuando no meio do preto, e todo deck parece o mesmo
+     deck. Quem manda é quem chama (o player, quando a peça é prisma): o
+     vídeo não tem rodapé, e a capa e as seções também não — são as cenas
+     que se sustentam sozinhas. */
+  if (op.rodape && layout !== "capa" && layout !== "secao") {
+    var rodape = document.createElement("div");
+    rodape.className = "rodape";
+    rodape.style.left = Math.round(W * 0.075) + "px";
+    rodape.style.right = Math.round(W * 0.075) + "px";
+    rodape.style.bottom = Math.round(H * 0.048) + "px";
+    var esq = document.createElement("span");
+    esq.textContent = op.rodape.titulo || "";
+    var dir = document.createElement("span");
+    if (op.rodape.indice && op.rodape.total) {
+      dir.textContent = String(op.rodape.indice).padStart(2, "0") + " / " + String(op.rodape.total).padStart(2, "0");
+    }
+    rodape.appendChild(esq);
+    rodape.appendChild(dir);
+    no.appendChild(rodape);
+  }
+
   desenharConectores(no, elementos, W, H);
   return no;
 }
 
+/* A COMPOSIÇÃO DE SLIDE: cabeça em cima, corpo no meio do que sobra.
+
+   Tudo centrado verticalmente — que era o padrão para todo layout — deixa um
+   título com três linhas de lista ocupando 30% do quadro, com 350px de nada
+   em cima e 350px embaixo: a cara de "slide genérico" que o dono apontou. A
+   composição de quem faz deck de verdade ancora o título no alto e dá o resto
+   do quadro ao conteúdo, que se centra ali.
+
+   Só quando há as duas metades (cabeça E corpo) e o layout não é o dos que se
+   sustentam centrados (capa, centro, citação, seção): uma cena de vídeo com um
+   título sozinho continua no meio, onde um título sozinho fica bem. O corpo é
+   marcado no primeiro e no último filho (`margin: auto` no CSS), e o DOM
+   continua chapado — nada de embrulho novo em volta dos elementos. */
+function comporCabecaCorpo(fluxo, layout, nCabeca, nCorpo) {
+  if (!nCabeca || !nCorpo) return;
+  if (layout === "capa" || layout === "centro" || layout === "citacao" || layout === "secao") return;
+  var filhos = fluxo.children;
+  if (filhos.length <= nCabeca) return;
+  fluxo.setAttribute("data-composicao", "cabeca-corpo");
+  filhos[nCabeca].classList.add("corpo-inicio");
+  filhos[filhos.length - 1].classList.add("corpo-fim");
+}
+
 if (typeof module !== "undefined" && module.exports) module.exports = { renderCena: renderCena };

package/studio/web/js/video.js

@@ -347,6 +347,23 @@ var VideoExport = (function () {
       return new Promise(function (pronto) {
         var t0 = performance.now();
         var primeiro = true;
+        /* A camada de cima de uma cena com clipe (título, legenda, marca),
+           já rasterizada. Enquanto nada nela anima, só o quadro do vídeo
+           muda — e rasterizar o SVG inteiro trinta vezes por segundo era o
+           que engasgava a máquina: o decodificador do <video> ficava sem
+           CPU, o clipe atrasava, o player o puxava de volta e a busca não
+           terminava nunca (medido: seeking=true e readyState=1 do 0,7s ao
+           fim, arquivo com o chão da cena no lugar da gravação). Com a
+           camada guardada, cada quadro é dois drawImage. */
+        var camada = null;
+
+        function pintarComClipe(no, img) {
+          // 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);
+        }
 
         function volta() {
           if (cancelado) return pronto();
@@ -365,16 +382,20 @@ var VideoExport = (function () {
           primeiro = false;
 
           var comVideo = temClipe(no);
+          if (comVideo && camada && camada.no === no && !aindaAnima(no)) {
+            pintarComClipe(no, camada.img);
+            return setTimeout(volta, 1000 / FPS);
+          }
+
           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);
+              camada = aindaAnima(no) ? null : { no: no, img: img };
+              pintarComClipe(no, img);
+            } else {
+              ctx2d.drawImage(img, 0, 0, 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
@@ -412,25 +433,30 @@ var VideoExport = (function () {
     return promessa;
   }
 
+  /* Entrega ao usuário o arquivo que `gerar` montou. Separado de `baixar`
+     porque a exportação ESCONDIDA (studio_exportar) gera pelo mesmo caminho e
+     não baixa: manda o blob de volta ao estúdio. Um só `gerar` para os dois. */
+  function salvar(r, nome) {
+    var url = URL.createObjectURL(r.blob);
+    var a = document.createElement("a");
+    a.href = url;
+    a.download = (nome || "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;
+  }
+
   /* 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 gerar(arq, op).then(function (r) { return salvar(r, op.nome || arq.titulo); });
   }
 
   return {
-    disponivel: disponivel, formato: formato, gerar: gerar, baixar: baixar,
+    disponivel: disponivel, formato: formato, gerar: gerar, baixar: baixar, salvar: salvar,
     FORMATOS: FORMATOS, _aindaAnima: aindaAnima,
   };
 })();