morfeo 0.3.4 → 0.5.0

package/remotion/motor/Video.tsx

@@ -53,6 +53,21 @@ const EscenaVista: React.FC<{e: Escena; t: number; tema: Tema; semilla: string;
 	);
 };
 
+/** Lugar (mundo) de la escena `i`: el suyo, o el de la última escena anterior que dijo uno, o el primero de `lugares`. */
+export function lugarDe(d: Datos, i: number): string | null {
+	const nombres = Object.keys(d.lugares ?? {});
+	if (!nombres.length) return null;
+	for (let j = i; j >= 0; j--) {
+		const l = d.escenas[j]?.p.lugar;
+		if (typeof l === 'string' && d.lugares![l]) return l;
+	}
+	return d.mundo?.length ? null : nombres[0];
+}
+const capasDeLugar = (d: Datos, i: number) => {
+	const l = lugarDe(d, i);
+	return (l ? d.lugares![l] : d.mundo) ?? [];
+};
+
 type Toma = {x: number; y: number; zoom: number; giro: number};
 const TOMA0: Toma = {x: 540, y: 960, zoom: 1, giro: 0};
 
@@ -62,8 +77,10 @@ const TOMA0: Toma = {x: 540, y: 960, zoom: 1, giro: 0};
  * Sin `toma`, la escena conserva la anterior. `corte: true` salta sin viaje.
  */
 export function camaraMundo(d: Datos, si: number, t: number): Toma {
+	// cada lugar tiene su propia cámara: al buscar la toma anterior no se cruza a otro lugar
 	const destino = (i: number): Toma => {
-		for (let j = i; j >= 0; j--) if (d.escenas[j].p.toma) return {...TOMA0, ...d.escenas[j].p.toma};
+		const l = lugarDe(d, i);
+		for (let j = i; j >= 0 && lugarDe(d, j) === l; j--) if (d.escenas[j].p.toma) return {...TOMA0, ...d.escenas[j].p.toma};
 		return TOMA0;
 	};
 	const final = (i: number): Toma => {
@@ -76,7 +93,8 @@ export function camaraMundo(d: Datos, si: number, t: number): Toma {
 	const tm = e.p.toma ?? {};
 	const a = destino(si);
 	const b = final(si);
-	const viaje = tm.corte || si === 0 ? 0 : tm.duracion ?? Math.min(1.1, e.dur * 0.55);
+	const cambiaLugar = si > 0 && lugarDe(d, si) !== lugarDe(d, si - 1);
+	const viaje = tm.corte || si === 0 || cambiaLugar ? 0 : tm.duracion ?? Math.min(1.1, e.dur * 0.55);
 	const kd = clamp((t - viaje * 0.6) / Math.max(0.01, e.dur - viaje * 0.6));
 	const kq = tm.a ? easeIO(kd) : kd;
 	const actual: Toma = {x: lerp(a.x, b.x, kq), y: lerp(a.y, b.y, kq), zoom: lerp(a.zoom, b.zoom, kq), giro: lerp(a.giro, b.giro, kq)};
@@ -99,7 +117,7 @@ const Mundo: React.FC<{d: Datos; si: number; t: number; T: number; tema: Tema}>
 	const propias = capasDe(e.tipo, e.p, temaEsc, marca).filter((c: any) => c.enMundo);
 	return (
 		<AbsoluteFill style={{transform: `translate(540px, 960px) scale(${cam.zoom}) rotate(${cam.giro}deg) translate(${-cam.x}px, ${-cam.y}px)`, transformOrigin: '0 0'}}>
-			<Capas capas={d.mundo as any} ctx={ctxMundo} />
+			<Capas capas={capasDeLugar(d, si) as any} ctx={ctxMundo} />
 			{propias.length ? <Capas capas={propias} ctx={ctxEsc} /> : null}
 		</AbsoluteFill>
 	);
@@ -198,7 +216,9 @@ const RotuloSello: React.FC<{texto: string; t: number; tema: Tema; e: Escena}> =
 		const w = ancho(limpio, tema.fuentes.titulo, tam, 900);
 		if (w > 820) tam = Math.max(44, Math.floor((tam * 820) / w));
 	} catch {}
-	const y = e.p.rotuloY ?? tema.rotulo?.y ?? 1180;
+	// lejos de los subtítulos: si van a media altura, el sello se pone arriba de ellos
+	const S = tema.subtitulos;
+	const y = e.p.rotuloY ?? tema.rotulo?.y ?? (S.tipo !== 'ninguno' && Math.abs(S.y - 1180) < 260 ? S.y - 300 : 1180);
 	return (
 		<div style={{position: 'absolute', left: 0, width: W, top: y, display: 'flex', justifyContent: 'center', pointerEvents: 'none', opacity: clamp(caida * 4)}}>
 			<div
@@ -238,7 +258,9 @@ const RotuloPaso: React.FC<{texto: string; t: number; tema: Tema; e: Escena}> =
 	const k = easeIO(clamp(t / 0.35));
 	const color = colorRotulo(e.p.rotuloColor ?? tema.rotulo?.color, tema.colores.acento);
 	const tam = e.p.rotuloTam ?? tema.rotulo?.tam ?? 64;
-	const y = e.p.rotuloY ?? tema.rotulo?.y ?? 250;
+	// si los subtítulos van arriba, el titular baja para no encimarse con ellos
+	const S = tema.subtitulos;
+	const y = e.p.rotuloY ?? tema.rotulo?.y ?? (S.tipo !== 'ninguno' && S.y < 600 ? S.y + 120 : 250);
 	const n = e.p.rotuloPaso;
 	return (
 		<div style={{position: 'absolute', left: 56, right: 56, top: y, display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 24, pointerEvents: 'none'}}>
@@ -305,7 +327,8 @@ const RotuloPixel: React.FC<{texto: string; t: number; tema: Tema; e: Escena}> =
 		const w = ancho(limpio, PIXEL, tam, 400);
 		if (w > 900) tam = Math.max(30, Math.floor((tam * 900) / w));
 	} catch {}
-	const y = e.p.rotuloY ?? tema.rotulo?.y ?? 230;
+	const S = tema.subtitulos;
+	const y = e.p.rotuloY ?? tema.rotulo?.y ?? (S.tipo !== 'ninguno' && S.y < 600 ? S.y + 150 : 230);
 	return (
 		<div style={{position: 'absolute', left: 0, width: W, top: y, display: 'flex', justifyContent: 'center', pointerEvents: 'none'}}>
 			<div
@@ -360,7 +383,7 @@ const MarcaEsquina: React.FC<{tema: Tema}> = ({tema}) => {
 	);
 };
 
-export const VideoMotor: React.FC<{d: Datos; T: number; estilos?: Record<string, any>; miniatura?: boolean}> = ({d, T, estilos, miniatura}) => {
+export const VideoMotor: React.FC<{d: Datos; T: number; estilos?: Record<string, any>; miniatura?: boolean; sinMarca?: boolean}> = ({d, T, estilos, miniatura, sinMarca}) => {
 	const tema = temaDe(d.estilo, d.tema, estilos);
 	const n = d.escenas.length;
 	let si = d.escenas.findIndex((e) => T < e.t0 + e.dur);
@@ -368,10 +391,12 @@ export const VideoMotor: React.FC<{d: Datos; T: number; estilos?: Record<string,
 	const e = d.escenas[si];
 	const t = T - e.t0;
 	const semilla = d.id;
-	const conMundo = !!d.mundo?.length;
+	const conMundo = !!d.mundo?.length || Object.keys(d.lugares ?? {}).length > 0;
 	const DUR = tema.movimiento?.transicion ?? TRANSICION;
-	// con mundo, la transición es el viaje de la cámara: las capas de pantalla solo entran con su propia animación
-	const trans = conMundo ? 'corte' : ((e.p.transicion ?? tema.transicion) as string);
+	// con mundo, la transición es el viaje de la cámara: las capas de pantalla solo entran con su propia animación.
+	// Al cambiar de lugar sí hay transición (la de la escena; corte si no dice), y el lugar anterior sale con ella.
+	const cambiaLugar = conMundo && si > 0 && lugarDe(d, si) !== lugarDe(d, si - 1);
+	const trans = conMundo ? (cambiaLugar ? ((e.p.transicion as string) ?? 'corte') : 'corte') : ((e.p.transicion ?? tema.transicion) as string);
 	const enTransicion = si > 0 && t < DUR && trans !== 'corte';
 	const lin = clamp(t / DUR);
 	const k = easeOut(lin);
@@ -408,10 +433,19 @@ export const VideoMotor: React.FC<{d: Datos; T: number; estilos?: Record<string,
 	return (
 		<AbsoluteFill style={{background: '#000', overflow: 'hidden'}}>
 			<Modo d={d} si={si} t={t} T={T} claro={LOOKS_CLAROS.includes(d.estilo ?? '') || tema.colores.texto !== '#FFFFFF'}>
-				{conMundo ? <Mundo d={d} si={si} t={t} T={T} tema={tema} /> : null}
+				{conMundo && enTransicion && prev ? (
+					<AbsoluteFill style={estiloPrevio}>
+						<Mundo d={d} si={si - 1} t={prev.dur + t} T={T} tema={tema} />
+					</AbsoluteFill>
+				) : null}
+				{conMundo ? (
+					<AbsoluteFill style={enTransicion ? estiloActual : undefined}>
+						<Mundo d={d} si={si} t={t} T={T} tema={tema} />
+					</AbsoluteFill>
+				) : null}
 				{enTransicion && prev ? (
 					<AbsoluteFill style={estiloPrevio}>
-						<EscenaVista e={prev} t={prev.dur + t} tema={tema} semilla={semilla} />
+						<EscenaVista e={prev} t={prev.dur + t} tema={tema} semilla={semilla} sinFondo={conMundo} />
 					</AbsoluteFill>
 				) : null}
 				<AbsoluteFill style={estiloActual}>
@@ -425,18 +459,18 @@ export const VideoMotor: React.FC<{d: Datos; T: number; estilos?: Record<string,
 			<Vineta fuerza={tema.vineta ?? 0} color={tema.post?.vinetaColor} />
 			{d.hud?.length ? <Hud d={d} T={T} tema={tema} /> : null}
 			{d.serie && e.tipo !== 'cta' ? <Serie texto={d.serie} tema={tema} /> : null}
-			{e.tipo !== 'cta' ? <Rotulo e={e} t={t} tema={e.p.tema ? mezclar(tema, e.p.tema) : tema} /> : null}
+			{e.tipo !== 'cta' && !sinMarca ? <Rotulo e={e} t={t} tema={e.p.tema ? mezclar(tema, e.p.tema) : tema} /> : null}
 			{e.tipo !== 'cta' && !miniatura ? <Subtitulos tema={e.p.tema ? mezclar(tema, e.p.tema) : tema} palabras={e.palabras ?? []} t={t} dur={e.dur} claves={e.p.claves} /> : null}
-			{e.tipo !== 'cta' ? <MarcaEsquina tema={tema} /> : null}
+			{e.tipo !== 'cta' && !sinMarca ? <MarcaEsquina tema={tema} /> : null}
 		</AbsoluteFill>
 	);
 };
 
 /** Componente raíz de un video del motor de capas (con su audio). */
-export const VideoConAudio: React.FC<{d: Datos; frame: number; marca: any; estilos?: Record<string, any>; miniatura?: boolean}> = ({d, frame, marca, estilos, miniatura}) => (
+export const VideoConAudio: React.FC<{d: Datos; frame: number; marca: any; estilos?: Record<string, any>; miniatura?: boolean; sinMarca?: boolean}> = ({d, frame, marca, estilos, miniatura, sinMarca}) => (
 	<MarcaContexto.Provider value={marca}>
 		<AbsoluteFill>
-			<VideoMotor d={d} T={frame / FPS} estilos={estilos} miniatura={miniatura} />
+			<VideoMotor d={d} T={frame / FPS} estilos={estilos} miniatura={miniatura} sinMarca={sinMarca} />
 			<Audio src={staticFile(d.audio)} />
 		</AbsoluteFill>
 	</MarcaContexto.Provider>

package/remotion/motor/capas.tsx

@@ -6,6 +6,7 @@ import {Avatar, Icono, tamIcono, useMarca} from '../piezas';
 import {H, W, ancho, backOut, clamp, easeIO, easeOut, easeOutExpo, lerp, resorte} from '../estilo';
 import {ANOTACIONES, ANOTACIONES_SIN_ENTRADA, Anotacion} from './anotaciones';
 import {FICHAS, Fichas} from './fichas';
+import {HISTORIAS, Historias} from './historias';
 import {azar, cuando, formatoNumero, partesResaltadas, recurso, type CtxEscena} from './util';
 import {Particulas} from './fondo';
 import {Escena3D, Modelo3D} from './modelo3d';
@@ -280,6 +281,7 @@ const Contenido: React.FC<{c: Capa; ctx: CtxEscena}> = ({c, ctx}) => {
 		default:
 			if (ANOTACIONES.includes(c.tipo)) return <Anotacion c={c} ctx={ctx} />;
 			if (FICHAS.includes(c.tipo)) return <Fichas c={c} ctx={ctx} />;
+			if (HISTORIAS.includes(c.tipo)) return <Historias c={c} ctx={ctx} />;
 			return <div style={{color: 'red', fontSize: 40, fontFamily: 'sans-serif', background: '#fff', padding: 10}}>capa desconocida: {c.tipo}</div>;
 	}
 };