primocode 8.18.1 → 8.20.0

package/studio/web/js/player.js

@@ -33,8 +33,17 @@
   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 d = Number(cenas[i] && cenas[i].duracao);
-    return (isFinite(d) && d > 0) ? Math.min(60, d) : 4;
+    var c = cenas[i] || {};
+    var d = Number(c.duracao);
+    d = (isFinite(d) && d > 0) ? Math.min(60, d) : 4;
+    /* 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
+       a linha do tempo determinística — o "cena espera a voz" do laço vira
+       só a rede de segurança para narração sintetizada na hora. */
+    var n = Number(c.narracaoDur);
+    if (isFinite(n) && n > 0 && c.narracaoAudio) d = Math.max(d, Math.min(90, n + 0.4));
+    return d;
   }
   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; }
@@ -129,6 +138,7 @@
 
   function ir(n, semRelogio) {
     if (!cenas.length) return;
+    var anterior = atual;
     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";
@@ -139,6 +149,17 @@
         contar(no);
       }
     });
+    /* SFX na entrada da cena — só durante a reprodução (navegar com as setas
+       não faz barulho) e nunca na primeira montagem. `doc.sfx === false`
+       desliga tudo; `cena.sfx` escolhe o efeito ("whoosh" | "impacto" |
+       "click" | "nenhum") e ganha do automático por transição. */
+    if (sfx && tocando && ehVideo && atual !== anterior && doc.sfx !== false) {
+      var cenaNova = cenas[atual] || {};
+      if (cenaNova.sfx !== "nenhum") {
+        if (cenaNova.sfx && sfx[cenaNova.sfx]) sfx[cenaNova.sfx]();
+        else sfx.transicao(cenaNova.transicao, atual);
+      }
+    }
     narrar();
     pintarApresentador();
     if (!semRelogio) decorrido = inicioDe(atual);
@@ -255,6 +276,7 @@
   function narrar() {
     if (typeof Narracao !== "undefined") Narracao.parar();
     if (vozGravada) { vozGravada.pause(); vozGravada = null; }
+    if (trilha && trilha.duck) trilha.duck(false);
     if (mudo || doc.narracao === false) return;
 
     var cena = cenas[atual] || {};
@@ -263,13 +285,35 @@
     if (cena.narracaoAudio) {
       vozGravada = new Audio(cena.narracaoAudio);
       vozGravada.volume = (doc.voz && doc.voz.volume != null) ? doc.voz.volume : 1;
+      /* Pelo grafo da trilha, quando ele existe: a voz entra na gravação MP4
+         sem "compartilhar áudio da aba", e a música cede espaço (duck)
+         enquanto a fala dura. Sem grafo, toca direto como antes. */
+      if (trilha && trilha.ctx && trilha.entradaVoz) {
+        try {
+          var fonteVoz = trilha.ctx.createMediaElementSource(vozGravada);
+          fonteVoz.connect(trilha.entradaVoz);
+        } catch (_) { /* elemento já conectado ou grafo indisponível */ }
+        if (trilha.duck) {
+          trilha.duck(true);
+          vozGravada.onended = function () { if (trilha && trilha.duck) trilha.duck(false); };
+        }
+      }
       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 || {});
+    if (cena.narracao) {
+      if (trilha && trilha.duck) {
+        trilha.duck(true);
+        Narracao.falar(cena.narracao, doc.voz || {}).then(function () {
+          if (trilha && trilha.duck) trilha.duck(false);
+        });
+      } else {
+        Narracao.falar(cena.narracao, doc.voz || {});
+      }
+    }
   }
 
   /* ----------------------------------------------------- apresentador --- */
@@ -317,11 +361,18 @@
 
   /* ------------------------------------------------------------ trilha -- */
 
+  var sfx = null;
+
   function prepararTrilha() {
-    var cfg = doc.trilha;
-    if (!cfg || (!cfg.src && cfg.tipo !== "gerada")) return;
     if (typeof criarTrilha !== "function") return;
+    var cfg = doc.trilha;
+    /* Sem trilha o grafo ainda nasce (tipo "nenhuma"): é por ele que a
+       narração e os SFX entram na gravação MP4. */
+    if (!cfg || (!cfg.src && cfg.tipo !== "gerada")) cfg = { tipo: "nenhuma" };
     trilha = criarTrilha(cfg, function (msg) { aviso(msg, 3000); });
+    if (trilha && trilha.ctx && trilha.no && typeof criarSfx === "function" && doc.sfx !== false) {
+      sfx = criarSfx(trilha.ctx, trilha.no);
+    }
   }
 
   /* --------------------------------------------------------- transporte -- */
@@ -337,7 +388,7 @@
       '<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>';
+      '<button class="tp-btn texto primo" id="tp-gravar" title="Baixar este vídeo como arquivo">Baixar MP4</button>';
     document.body.appendChild(transporte);
 
     document.getElementById("tp-tocar").onclick = function () { tocando ? pausar() : tocar(); };
@@ -393,14 +444,47 @@
     iniciarGravacao();
   }
 
+/* O melhor formato que este navegador sabe gravar.
+ *
+ * A ordem importa: H.264 com AAC é o MP4 que toca em qualquer lugar —
+ * WhatsApp, Instagram, PowerPoint, TV. AV1 em MP4 é MP4 de verdade mas ainda
+ * não toca em tudo, então vem depois. O webm é o último recurso: abre em
+ * navegador e pouco mais.
+ */
+var FORMATOS = [
+  "video/mp4;codecs=avc1.42E01E,mp4a.40.2",
+  "video/mp4;codecs=avc1,mp4a.40.2",
+  "video/mp4;codecs=avc1",
+  "video/mp4",
+  "video/webm;codecs=vp9,opus",
+  "video/webm",
+];
+
+function escolherFormato() {
+  for (var i = 0; i < FORMATOS.length; i++) {
+    if (MediaRecorder.isTypeSupported(FORMATOS[i])) return FORMATOS[i];
+  }
+  return "video/webm";
+}
+
+function gravaMp4() { return /mp4/.test(escolherFormato()); }
+
   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
+    // 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();
@@ -410,11 +494,14 @@
       }
       var misto = new MediaStream(faixas);
       pedacos = [];
-      // MP4 primeiro, quando o navegador sabe gravar mp4 (Safari sabe;
-      // Chrome grava webm). O usuário pediu "baixar em mp4": onde dá, dá.
-      var tipo = MediaRecorder.isTypeSupported("video/mp4") ? "video/mp4"
-        : MediaRecorder.isTypeSupported("video/webm;codecs=vp9,opus")
-          ? "video/webm;codecs=vp9,opus" : "video/webm";
+      // 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;

package/studio/web/js/sfx.js

@@ -0,0 +1,107 @@
+/* ==========================================================================
+   sfx.js — efeitos sonoros do Corte, sintetizados na hora.
+
+   Nenhum arquivo, nenhuma licença: whoosh é ruído filtrado com varredura,
+   impacto é um seno grave despencando, click é um blip curto. Tudo entra no
+   mesmo grafo da trilha (via `destino`), então a gravação MP4 captura os
+   efeitos junto — sem depender de "compartilhar áudio da aba".
+
+   Uso:
+     var sfx = criarSfx(ctx, destino);   // destino: nó do grafo (compressor)
+     sfx.whoosh();      // transição de cena
+     sfx.impacto();     // ênfase (flash, número grande)
+     sfx.click();       // entrada de elemento, feedback discreto
+
+   O volume de cada efeito já vem calibrado para sentar SOB a narração.
+   ========================================================================== */
+
+function criarSfx(ctx, destino) {
+  "use strict";
+  if (!ctx || !destino) return null;
+
+  var saida = ctx.createGain();
+  saida.gain.value = 1;
+  saida.connect(destino);
+
+  var ruido = null;
+  function bufferRuido() {
+    if (ruido) return ruido;
+    ruido = ctx.createBuffer(1, ctx.sampleRate * 1.2, ctx.sampleRate);
+    var d = ruido.getChannelData(0);
+    for (var i = 0; i < d.length; i++) d[i] = Math.random() * 2 - 1;
+    return ruido;
+  }
+
+  /* Varredura de ruído — o "passar de página" do vídeo. `variacao` muda o
+     miolo da varredura para os whooshes não saírem todos idênticos. */
+  function whoosh(variacao) {
+    var agora = ctx.currentTime;
+    var v = (variacao == null ? Math.random() : variacao) % 1;
+    var s = ctx.createBufferSource(), g = ctx.createGain(), f = ctx.createBiquadFilter();
+    s.buffer = bufferRuido();
+    f.type = "bandpass";
+    f.Q.value = 1.1;
+    f.frequency.setValueAtTime(300 + v * 300, agora);
+    f.frequency.exponentialRampToValueAtTime(2200 + v * 1400, agora + 0.16);
+    f.frequency.exponentialRampToValueAtTime(500, agora + 0.42);
+    g.gain.setValueAtTime(0.0001, agora);
+    g.gain.exponentialRampToValueAtTime(0.11, agora + 0.10);
+    g.gain.exponentialRampToValueAtTime(0.0001, agora + 0.45);
+    s.connect(f); f.connect(g); g.connect(saida);
+    s.start(agora); s.stop(agora + 0.5);
+  }
+
+  /* Seno grave despencando + um sopro de ruído no ataque. */
+  function impacto() {
+    var agora = ctx.currentTime;
+    var o = ctx.createOscillator(), g = ctx.createGain();
+    o.type = "sine";
+    o.frequency.setValueAtTime(120, agora);
+    o.frequency.exponentialRampToValueAtTime(36, agora + 0.5);
+    g.gain.setValueAtTime(0.30, agora);
+    g.gain.exponentialRampToValueAtTime(0.0001, agora + 0.9);
+    o.connect(g); g.connect(saida);
+    o.start(agora); o.stop(agora + 1.0);
+
+    var s = ctx.createBufferSource(), gr = ctx.createGain(), f = ctx.createBiquadFilter();
+    s.buffer = bufferRuido();
+    f.type = "lowpass";
+    f.frequency.value = 900;
+    gr.gain.setValueAtTime(0.09, agora);
+    gr.gain.exponentialRampToValueAtTime(0.0001, agora + 0.22);
+    s.connect(f); f.connect(gr); gr.connect(saida);
+    s.start(agora); s.stop(agora + 0.3);
+  }
+
+  /* Blip de interface: curto, agudo, discreto. */
+  function click() {
+    var agora = ctx.currentTime;
+    var o = ctx.createOscillator(), g = ctx.createGain();
+    o.type = "sine";
+    o.frequency.setValueAtTime(2100, agora);
+    g.gain.setValueAtTime(0.06, agora);
+    g.gain.exponentialRampToValueAtTime(0.0001, agora + 0.05);
+    o.connect(g); g.connect(saida);
+    o.start(agora); o.stop(agora + 0.07);
+  }
+
+  /* O efeito certo para a ENTRADA de uma cena, pela transição dela.
+     flash e zoom pedem peso; corte seco não pede nada. */
+  function transicao(tipo, indice) {
+    if (tipo === "corte") return;
+    if (tipo === "flash" || tipo === "zoom") return impacto();
+    whoosh(((indice || 0) * 0.37) % 1);
+  }
+
+  return {
+    whoosh: whoosh,
+    impacto: impacto,
+    click: click,
+    transicao: transicao,
+    volume: function (v) { saida.gain.value = v; },
+  };
+}
+
+if (typeof module !== "undefined" && module.exports) {
+  module.exports = { criarSfx: criarSfx };
+}

package/studio/web/tool.html

@@ -67,6 +67,7 @@
   document.getElementById("btn-baixar").innerHTML = svgIcone("baixar");
 </script>
 <script src="/js/audio.js"></script>
+<script src="/js/sfx.js"></script>
 <script src="/js/voz-neural.js"></script>
   <script src="/js/narracao.js"></script>
 <script src="/js/midia.js"></script>

package/studio/web/view.html

@@ -17,6 +17,7 @@
 <script src="/js/render-prosa.js"></script>
 <script src="/js/render-grade.js"></script>
 <script src="/js/audio.js"></script>
+<script src="/js/sfx.js"></script>
 <script src="/js/voz-neural.js"></script>
   <script src="/js/narracao.js"></script>
 <script src="/js/player.js"></script>

package/studio/arquivos/corte-estatico-corte-a5bab.json

@@ -1,150 +0,0 @@
-{
-  "id": "corte-estatico-corte-a5bab",
-  "ferramenta": "corte",
-  "titulo": "estatico-corte",
-  "doc": {
-    "tema": "brasa",
-    "largura": 1080,
-    "altura": 1920,
-    "acabamento": "grao",
-    "trilha": {
-      "tipo": "gerada",
-      "estilo": "pulso",
-      "volume": 0.7
-    },
-    "cenas": [
-      {
-        "layout": "centro",
-        "duracao": 3,
-        "fundo": "aurora",
-        "transicao": "flash",
-        "elementos": [
-          {
-            "tipo": "texto",
-            "papel": "titulo",
-            "texto": "Sua conta subiu\nde novo.",
-            "tamanho": 124,
-            "estilo": "gradiente",
-            "anim": "nenhuma"
-          }
-        ]
-      },
-      {
-        "layout": "centro",
-        "duracao": 3,
-        "fundo": "vinheta",
-        "transicao": "limpar",
-        "elementos": [
-          {
-            "tipo": "texto",
-            "papel": "titulo",
-            "texto": "E não foi o seu chuveiro.",
-            "tamanho": 78,
-            "estilo": "marcador",
-            "anim": "nenhuma"
-          }
-        ]
-      },
-      {
-        "layout": "centro",
-        "duracao": 4,
-        "transicao": "zoom",
-        "acabamento": "vinheta",
-        "fundo": {
-          "imagem": "/midia/torre.jpg",
-          "escurecer": 0.5
-        },
-        "elementos": [
-          {
-            "tipo": "numeros",
-            "contar": true,
-            "anim": "nenhuma",
-            "tamanho": 180,
-            "itens": [
-              "+38% | bandeira tarifária em 12 meses"
-            ]
-          }
-        ]
-      },
-      {
-        "layout": "livre",
-        "duracao": 4,
-        "transicao": "deslizar",
-        "elementos": [
-          {
-            "tipo": "imagem",
-            "src": "/midia/campo.jpg",
-            "x": 0,
-            "y": 0,
-            "l": 1080,
-            "a": 1920,
-            "raio": 0,
-            "movimento": "aproximar",
-            "filtro": "contraste",
-            "anim": "nenhuma"
-          },
-          {
-            "tipo": "forma",
-            "forma": "retangulo",
-            "x": 0,
-            "y": 1180,
-            "l": 1080,
-            "a": 740,
-            "preenchimento": "rgba(10,5,6,.72)",
-            "anim": "nenhuma"
-          },
-          {
-            "tipo": "texto",
-            "x": 90,
-            "y": 1320,
-            "l": 900,
-            "a": 420,
-            "texto": "O custo está\nna transmissão",
-            "tamanho": 104,
-            "peso": 750,
-            "estilo": "sombra",
-            "anim": "nenhuma"
-          }
-        ]
-      },
-      {
-        "layout": "centro",
-        "duracao": 5,
-        "fundo": "raios",
-        "transicao": "subir",
-        "elementos": [
-          {
-            "tipo": "lista",
-            "revelar": true,
-            "tamanho": 52,
-            "intervalo": 0.9,
-            "itens": [
-              "Linhas saturadas no Nordeste",
-              "Usina gerando sem escoar",
-              "A conta chega em quem consome"
-            ],
-            "anim": "nenhuma"
-          }
-        ]
-      },
-      {
-        "layout": "centro",
-        "duracao": 3,
-        "fundo": "brilho",
-        "transicao": "fade",
-        "acabamento": "luz",
-        "elementos": [
-          {
-            "tipo": "texto",
-            "papel": "titulo",
-            "texto": "Segue para\nentender a próxima.",
-            "tamanho": 96,
-            "estilo": "contorno-tom",
-            "anim": "nenhuma"
-          }
-        ]
-      }
-    ]
-  },
-  "atualizado": "2026-08-16T15:08:28+00:00"
-}

package/studio/arquivos/corte-founders-ai-teste-do-player-2de1d.json

@@ -1,65 +0,0 @@
-{
-  "id": "corte-founders-ai-teste-do-player-2de1d",
-  "ferramenta": "corte",
-  "titulo": "Founders AI — teste do player",
-  "doc": {
-    "tema": "brasa",
-    "largura": 1080,
-    "altura": 1920,
-    "acabamento": "grao",
-    "trilha": {
-      "tipo": "gerada",
-      "estilo": "pulso",
-      "volume": 0.7
-    },
-    "cenas": [
-      {
-        "layout": "centro",
-        "duracao": 3,
-        "fundo": "aurora",
-        "transicao": "flash",
-        "elementos": [
-          {
-            "tipo": "texto",
-            "papel": "titulo",
-            "texto": "Imersão\nFounders AI",
-            "tamanho": 124,
-            "estilo": "gradiente",
-            "anim": "desfoque"
-          }
-        ]
-      },
-      {
-        "layout": "centro",
-        "duracao": 3,
-        "fundo": "vinheta",
-        "elementos": [
-          {
-            "tipo": "texto",
-            "papel": "titulo",
-            "texto": "Paris Group · Chapecó",
-            "tamanho": 78,
-            "estilo": "marcador",
-            "anim": "palavra"
-          }
-        ]
-      },
-      {
-        "layout": "centro",
-        "duracao": 4,
-        "fundo": "raios",
-        "elementos": [
-          {
-            "tipo": "numeros",
-            "contar": true,
-            "tamanho": 180,
-            "itens": [
-              "20 | empresários por turma"
-            ]
-          }
-        ]
-      }
-    ]
-  },
-  "atualizado": "2026-08-16T14:55:24+00:00"
-}

package/studio/arquivos/corte-legado-teste.json

@@ -1 +0,0 @@
-{"id": "corte-legado-teste", "ferramenta": "corte", "titulo": "legado", "doc": {"tema": "meia-noite", "largura": 1080, "altura": 1920, "cenas": [{"duracao": "4s", "fundo": "aurora", "elementos": [{"tipo": "titulo", "texto": "Imersão Founders AI"}, {"tipo": "subtitulo", "conteudo": "Paris Group · Chapecó"}]}]}}

package/studio/arquivos/corte-legado2.json

@@ -1 +0,0 @@
-{"id": "corte-legado2", "ferramenta": "corte", "titulo": "legado2", "doc": {"tema": "meia-noite", "largura": 1080, "altura": 1920, "cenas": [{"duracao": "4s", "fundo": "aurora", "elementos": [{"tipo": "titulo", "texto": "Imersão Founders AI", "anim": "nenhuma"}, {"tipo": "subtitulo", "conteudo": "Paris Group · Chapecó", "anim": "nenhuma"}]}]}}

package/studio/arquivos/corte-minimo-2a829.json

@@ -1,24 +0,0 @@
-{
-  "id": "corte-minimo-2a829",
-  "ferramenta": "corte",
-  "titulo": "minimo",
-  "doc": {
-    "tema": "claro",
-    "largura": 1080,
-    "altura": 1920,
-    "cenas": [
-      {
-        "layout": "centro",
-        "duracao": 5,
-        "elementos": [
-          {
-            "tipo": "texto",
-            "texto": "TESTE VISIVEL",
-            "tamanho": 120
-          }
-        ]
-      }
-    ]
-  },
-  "atualizado": "2026-08-16T14:57:24+00:00"
-}

package/studio/arquivos/corte-ok-00a3b.json

@@ -1,18 +0,0 @@
-{
-  "id": "corte-ok-00a3b",
-  "ferramenta": "corte",
-  "titulo": "ok",
-  "doc": {
-    "cenas": [
-      {
-        "elementos": [
-          {
-            "tipo": "texto",
-            "texto": "oi"
-          }
-        ]
-      }
-    ]
-  },
-  "atualizado": "2026-08-16T15:05:32+00:00"
-}

package/studio/arquivos/corte-ok-1270e.json

@@ -1,22 +0,0 @@
-{
-  "id": "corte-ok-1270e",
-  "ferramenta": "corte",
-  "titulo": "ok",
-  "doc": {
-    "tema": "brasa",
-    "cenas": [
-      {
-        "duracao": 3,
-        "elementos": [
-          {
-            "tipo": "texto",
-            "papel": "titulo",
-            "texto": "Founders AI",
-            "anim": "nenhuma"
-          }
-        ]
-      }
-    ]
-  },
-  "atualizado": "2026-08-16T17:50:21+00:00"
-}