diff --git a/remotion/src/Root.tsx b/remotion/src/Root.tsx index 573f829..67642d5 100644 --- a/remotion/src/Root.tsx +++ b/remotion/src/Root.tsx @@ -18,7 +18,9 @@ import {Banner, BannerRahmen, Profilbild} from './kanal/KanalBilder'; import {VorschauF01, VorschauF09} from './kanal/Vorschaubild'; import {ShortKompositionen} from './shorts/Short'; import {SHORTS_F01} from './shorts/folge01'; +import {SHORTS_F08} from './shorts/folge08'; import {SZENEN as SZENEN_F01} from './folge01/Folge01'; +import {SZENEN as SZENEN_F08} from './folge08/Folge08'; import {LIED01_DAUER, Lied01} from './lieder/lied01/Lied01'; import {LIED03_DAUER, Lied03} from './lieder/lied03/Lied03'; @@ -42,6 +44,7 @@ export const Root: React.FC = () => ( + diff --git a/remotion/src/lieder/karaoke.tsx b/remotion/src/lieder/karaoke.tsx index 4b68f46..d4d3134 100644 --- a/remotion/src/lieder/karaoke.tsx +++ b/remotion/src/lieder/karaoke.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import {interpolate, useCurrentFrame} from 'remotion'; +import {getInputProps, interpolate, useCurrentFrame} from 'remotion'; import {SCHRIFT} from '../baukasten/untertitel'; // Mitlese-Text für die Liedvideos („Pinos Liederbuch“). @@ -21,8 +21,11 @@ export const zeilenStart = (zeile: LiedZeile) => zerlege(zeile)[0].t; const VOR = 0.35; // Zeile erscheint kurz vor dem ersten Wort const NACH = 1.4; // und bleibt nach dem letzten Wort so lange stehen (höchstens bis zur nächsten Zeile) -export const Karaoke: React.FC<{zeilen: LiedZeile[]; fps?: number}> = ({zeilen, fps = 30}) => { +// `hoch`: Fassung für Shorts im Hochformat (umbrechend, über den Shorts-Knöpfen). Wird ein Short aus einer +// Folge geschnitten (Eingabe shortKaraoke), blendet sich der Querformat-Text der Szene aus. +export const Karaoke: React.FC<{zeilen: LiedZeile[]; fps?: number; hoch?: boolean}> = ({zeilen, fps = 30, hoch = false}) => { const f = useCurrentFrame(); + if (!hoch && getInputProps().shortKaraoke === true) return null; const jetzt = f / fps; const woerter = zeilen.map(zerlege); const i = woerter.findIndex((w, k) => { @@ -40,7 +43,7 @@ export const Karaoke: React.FC<{zeilen: LiedZeile[]; fps?: number}> = ({zeilen, interpolate(jetzt, [bis - 0.2, bis], [1, 0], {extrapolateLeft: 'clamp'}), ); return ( -
+
= ({zeilen, boxShadow: '0 6px 24px rgba(60,40,20,0.18)', fontFamily: SCHRIFT, fontWeight: 600, - fontSize: 60, - lineHeight: 1.1, - whiteSpace: 'nowrap', + fontSize: hoch ? 64 : 60, + lineHeight: 1.15, + whiteSpace: hoch ? 'normal' : 'nowrap', + textAlign: 'center', }} > {w.map((wort, k) => { diff --git a/remotion/src/shorts/Short.tsx b/remotion/src/shorts/Short.tsx index fbaee60..01bef2a 100644 --- a/remotion/src/shorts/Short.tsx +++ b/remotion/src/shorts/Short.tsx @@ -1,6 +1,8 @@ import React from 'react'; import {AbsoluteFill, Composition, Easing, Sequence, interpolate, useCurrentFrame} from 'remotion'; import type {SzenenEintrag} from '../baukasten/folge'; +import {Musik} from '../baukasten/musik'; +import {Karaoke, type LiedZeile} from '../lieder/karaoke'; // Shorts im Hochformat (1080×1920) direkt aus den Szenen einer Folge. // Die Szene läuft unverändert im 1920×1080-Rahmen, eine Kamera schneidet @@ -27,6 +29,8 @@ export type ShortDef = { kamera: KameraPunkt[]; titel: Record<'de' | 'es' | 'fr', string>; notiz?: string; + hintergrund?: string; // füllt oben/unten, wenn die Szene das Hochformat nicht ganz füllt (sonst Papier) + lied?: {zeile: string; zeilen: LiedZeile[]}; // Mitlesetext neu fürs Hochformat (Szene ohne ihren Querformat-Text rendern: shortKaraoke) }; const W = 1080; @@ -69,7 +73,7 @@ const Inhalt: React.FC<{szenen: SzenenEintrag[]; d: ShortDef}> = ({szenen, d}) = const ein = interpolate(f, [0, 8], [0, 1], {extrapolateRight: 'clamp'}); const aus = interpolate(f, [dauer - 18, dauer], [1, 0], {extrapolateLeft: 'clamp'}); return ( - +
= ({szenen, d}) = + {/* Hintergrundmusik bzw. gesungenes Lied der Szene (liegt in der Folge, nicht in K) */} + {sz.musik && }
+ {d.lied && ( + + + + )} ); diff --git a/remotion/src/shorts/folge01.ts b/remotion/src/shorts/folge01.ts index 131dd09..9c42d4e 100644 --- a/remotion/src/shorts/folge01.ts +++ b/remotion/src/shorts/folge01.ts @@ -98,5 +98,6 @@ export const SHORTS_F01: ShortDef[] = [ fr: 'Un petit et un grand 🎵', }, notiz: 'Das Serienlied komplett (Refrain, Strophe, Refrain).', + hintergrund: 'linear-gradient(#e9e3d2 0 50%, #93ad5c 50% 100%)', }, ]; diff --git a/remotion/src/shorts/folge08.ts b/remotion/src/shorts/folge08.ts new file mode 100644 index 0000000..6839a95 --- /dev/null +++ b/remotion/src/shorts/folge08.ts @@ -0,0 +1,27 @@ +import {LATERNENLIED} from '../folge08/laternenlied'; +import {VOLL, type ShortDef} from './Short'; + +// Shorts aus Folge 8 „Noas Laterne“ (Entscheidung 08.11.: neben den Lern-Shorts die Lieder als Shorts). +// Szene 3: Die Laterne geht an („Klick“), Pino staunt, dann das gesungene Laternenlied. + +export const SHORTS_F08: ShortDef[] = [ + { + id: 'F08-S01-laternenlied', + szene: 3, + von: {zeile: 'klick', plus: -0.6}, + bis: {zeile: 'bild1', wo: 'ende'}, + kamera: [ + {zeile: 'klick', x: 840, y: 560, z: VOLL}, + {zeile: 'p1', x: 840, y: 560, z: VOLL}, + {zeile: 'lied', plus: 3, x: 820, y: 560, z: VOLL}, + {zeile: 'bild1', wo: 'ende', x: 820, y: 560, z: VOLL}, + ], + titel: { + de: 'Mein kleines Licht – Laternenlied 🏮', + es: 'Mi farolito – canción del farol 🏮', + fr: 'Ma lanterne – chanson de la lanterne 🏮', + }, + notiz: 'Laterne geht an, dann das gesungene Laternenlied mit Mitlesetext.', + lied: {zeile: 'lied', zeilen: LATERNENLIED.zeilen}, + }, +]; diff --git a/veroeffentlichung/shorts-plan.md b/veroeffentlichung/shorts-plan.md index daf143f..102a473 100644 --- a/veroeffentlichung/shorts-plan.md +++ b/veroeffentlichung/shorts-plan.md @@ -8,15 +8,16 @@ Code `remotion/src/folge90/`, Dateien `/shared/youtube/shorts/Lnn--