primocode 9.8.0-beta.10 → 9.8.0-beta.12

package/lib/estudio/remotion.js

@@ -212,6 +212,7 @@ function Elemento({ el, t, dados }) {
     transform: [base.transform, move].filter(Boolean).join(' '),
     filter: filtroDe(a) || undefined,
     mixBlendMode: el.mistura || undefined,
+    transformOrigin: el.origem || undefined,
   };
 
   if (el.vidro) {
@@ -294,7 +295,7 @@ function Elemento({ el, t, dados }) {
       // O SVG foi baixado para a pasta do projeto (estudio/assets.js): render
       // que busca ícone na internet falha no meio, depois de tudo pronto.
       return (
-        <div style={{ ...estilo, width: medida(el.tamanho, '96px'), height: medida(el.tamanho, '96px'), color: el.cor || '#fff' }}
+        <div style={{ ...estilo, width: medida(el.tamanho, '96px'), height: medida(el.tamanho, '96px'), fontSize: medida(el.tamanho, '96px'), lineHeight: 0, color: el.cor || '#fff' }}
              dangerouslySetInnerHTML={{ __html: dados.icones[el.nome] || '' }} />
       );
 
@@ -302,6 +303,55 @@ function Elemento({ el, t, dados }) {
       const fala = (el.fala || []).find((f) => t >= f.de && t <= f.ate);
       if (!fala) return null;
       const e = el.estilo || {};
+      /* LEGENDA DE VIDEOMAKER: com o tempo de cada palavra, elas entram uma a
+         uma, no instante em que são ditas, com um salto curto. A que está
+         sendo dita ganha a cor de destaque; a palavra forte (a ideia da
+         frase) ganha a cor dela e fica maior. Sem "palavras", a frase entra
+         inteira, como antes. */
+      if (Array.isArray(fala.palavras) && fala.palavras.length) {
+        const destaque = e.destaque || '#FFD400';
+        const forte = e.corForte || '#00E0A4';
+        const soUma = e.modo === 'palavra';
+        const visiveis = soUma
+          ? fala.palavras.filter((p, i, l) => t >= p.de && (i === l.length - 1 || t < l[i + 1].de)).slice(-1)
+          : fala.palavras.filter((p) => t >= p.de - 0.02);
+        return (
+          <div style={{
+            ...estilo,
+            display: 'flex', flexWrap: 'wrap', justifyContent: 'center', alignItems: 'baseline',
+            gap: '0 0.34em', maxWidth: medida(e.largura, '86%'),
+            fontFamily: e.fonte ? '"' + e.fonte + '", system-ui, sans-serif' : 'system-ui, sans-serif',
+            fontSize: medida(e.tamanho, '64px'),
+            fontWeight: e.peso || 900,
+            textTransform: e.caixa || undefined,
+            lineHeight: 1.1,
+          }}>
+            {visiveis.map((p, i) => {
+              const idade = t - p.de;
+              const entra = Math.min(1, Math.max(0, idade / 0.14));
+              const salto = entra < 1 ? 0.7 + 0.42 * CURVAS.saida(entra) : 1.12 - 0.12 * Math.min(1, (idade - 0.14) / 0.12);
+              const falando = t >= p.de && t <= p.ate + 0.05;
+              const cor = p.forte ? forte : (falando ? destaque : (e.cor || '#fff'));
+              return (
+                <span key={i} style={{
+                  display: 'inline-block',
+                  // A palavra forte é MAIOR na fonte, não na escala: escala não
+                  // abre espaço, e ela cresceria por cima da vizinha.
+                  fontSize: p.forte ? '1.22em' : undefined,
+                  transform: 'scale(' + salto + ') translateY(' + (1 - entra) * 18 + 'px)',
+                  opacity: entra,
+                  color: cor,
+                  textShadow: e.sombra || '0 6px 22px rgba(0,0,0,.6), 0 2px 0 rgba(0,0,0,.35)',
+                  WebkitTextStroke: e.contorno || '2px rgba(0,0,0,.55)',
+                  paintOrder: 'stroke fill',
+                  background: falando && e.fundoAtivo ? e.fundoAtivo : undefined,
+                  borderRadius: '0.18em', padding: falando && e.fundoAtivo ? '0 0.12em' : undefined,
+                }}>{p.texto}{p.emoji ? ' ' + p.emoji : ''}</span>
+              );
+            })}
+          </div>
+        );
+      }
       return (
         <div style={{
           ...estilo,
@@ -366,7 +416,7 @@ export function Cena({ cena, dados }) {
     </AbsoluteFill>
   );
 }
-";`;
+`;
 
 const RAIZ_JSX = String.raw`import React from 'react';
 import { AbsoluteFill, Audio, Sequence, staticFile, useCurrentFrame, useVideoConfig, interpolate } from 'remotion';
@@ -428,6 +478,7 @@ export const Video = () => {
         <Audio
           src={staticFile(plano.audio.trilha.src || plano.audio.trilha)}
           volume={plano.audio.trilha.volume ?? 0.18}
+          loop={plano.audio.trilha.loop !== false}
         />
       )}
       {(plano.audio && plano.audio.efeitos ? plano.audio.efeitos : []).map((e, i) => (
@@ -438,7 +489,7 @@ export const Video = () => {
     </AbsoluteFill>
   );
 };
-";`;
+`;
 
 function rootJsx(plano) {
     const f = plano.formato || {};
@@ -513,12 +564,25 @@ para este projeto, não para o PrimoCode.
  * @param {object} op.plano
  * @param {object} op.icones   { "lucide:zap": "<svg…>" } já baixados
  */
+const TSCONFIG = JSON.stringify({
+    compilerOptions: {
+        target: 'ES2018', module: 'commonjs', jsx: 'react-jsx', strict: false, noEmit: true,
+        lib: ['es2015', 'dom'], esModuleInterop: true, skipLibCheck: true, forceConsistentCasingInFileNames: true,
+    },
+    exclude: ['remotion.config.ts'],
+}, null, 2) + '\n';
+
 function montar({ pasta, titulo, plano, icones = {} }) {
     const raiz = path.join(pasta, 'remotion');
     const src = path.join(raiz, 'src');
 
     escrever(path.join(raiz, 'package.json'), pkgJson(titulo || 'video'));
     escrever(path.join(raiz, 'remotion.config.ts'), REMOTION_CONFIG);
+    /* O remotion.config.ts é TypeScript, e o Remotion 4 recusa renderizar sem
+       um tsconfig.json na raiz ("Could not find a tsconfig.json"). Medido em
+       25/09: o vídeo que saiu bom só saiu porque o modelo criou este arquivo à
+       mão depois do erro — um modelo grátis travaria ali. */
+    escrever(path.join(raiz, 'tsconfig.json'), TSCONFIG);
     escrever(path.join(raiz, 'README.md'), readme(titulo || 'Vídeo', plano));
     escrever(path.join(src, 'index.js'), INDEX_JS);
     escrever(path.join(src, 'Root.jsx'), rootJsx(plano));