disaster-broadcast-studio 0.1.1 → 0.3.0

package/dist/video/transitions.d.ts

@@ -0,0 +1,609 @@
+import { type CompiledEvent } from '../scenario.js';
+export declare const changeFrames: number;
+export declare function changeProgress(frame: number, start: number, frames?: number): number;
+export declare function transitionAt<T extends CompiledEvent['type']>(events: CompiledEvent[], type: T, frame: number): {
+    current: Extract<{
+        type: "alert";
+        sender: string;
+        text: string;
+        level: "안전안내" | "긴급재난" | "위급재난";
+        regions: string[];
+        mapHighlight: false | {
+            duration: number;
+            color: string;
+        };
+        sound: false | "default" | {
+            asset: string;
+            duration: number;
+            volume: number;
+        };
+        id: string;
+        cut: string;
+        at: number;
+        occurredAt?: string | undefined;
+        publishedAt?: string | undefined;
+    } & {
+        start: number;
+        end: number;
+        order: number;
+    }, {
+        type: T;
+    }> | Extract<{
+        type: "news";
+        sound: false | "default" | {
+            asset: string;
+            duration: number;
+            volume: number;
+        };
+        source: string;
+        headline: string;
+        duration: number;
+        carry: boolean;
+        id: string;
+        cut: string;
+        at: number;
+        publishedAt?: string | undefined;
+    } & {
+        start: number;
+        end: number;
+        order: number;
+    }, {
+        type: T;
+    }> | Extract<{
+        type: "status";
+        sound: false | "default" | {
+            asset: string;
+            duration: number;
+            volume: number;
+        };
+        items: {
+            text: string;
+            color: string;
+        }[];
+        duration: number;
+        carry: boolean;
+        id: string;
+        cut: string;
+        at: number;
+    } & {
+        start: number;
+        end: number;
+        order: number;
+    }, {
+        type: T;
+    }> | Extract<{
+        type: "bulletin";
+        sound: false | "default" | {
+            asset: string;
+            duration: number;
+            volume: number;
+        };
+        source: string;
+        heading: string;
+        text: string;
+        color: string;
+        duration: number;
+        carry: boolean;
+        id: string;
+        cut: string;
+        at: number;
+    } & {
+        start: number;
+        end: number;
+        order: number;
+    }, {
+        type: T;
+    }> | Extract<{
+        type: "chat";
+        title: string;
+        duration: number;
+        carry: boolean;
+        id: string;
+        cut: string;
+        at: number;
+    } & {
+        start: number;
+        end: number;
+        order: number;
+    }, {
+        type: T;
+    }> | Extract<{
+        type: "chat-message";
+        chat: string;
+        author: string;
+        text: string;
+        color: string;
+        id: string;
+        cut: string;
+        at: number;
+    } & {
+        start: number;
+        end: number;
+        order: number;
+    }, {
+        type: T;
+    }> | Extract<{
+        type: "zone";
+        points: [number, number][];
+        color: string;
+        opacity: number;
+        duration: number;
+        carry: boolean;
+        id: string;
+        cut: string;
+        at: number;
+    } & {
+        start: number;
+        end: number;
+        order: number;
+    }, {
+        type: T;
+    }> | Extract<{
+        type: "line";
+        points: [number, number][];
+        color: string;
+        width: number;
+        drawSeconds: number;
+        dashed: boolean;
+        duration: number;
+        carry: boolean;
+        id: string;
+        cut: string;
+        at: number;
+    } & {
+        start: number;
+        end: number;
+        order: number;
+    }, {
+        type: T;
+    }> | Extract<{
+        type: "region";
+        regions: string[];
+        color: string;
+        fillOpacity: number;
+        strokeOpacity: number;
+        strokeWidth: number;
+        fadeIn: number;
+        fadeOut: number;
+        pulse: boolean;
+        duration: number;
+        carry: boolean;
+        id: string;
+        cut: string;
+        at: number;
+        strokeColor?: string | undefined;
+        label?: string | undefined;
+    } & {
+        start: number;
+        end: number;
+        order: number;
+    }, {
+        type: T;
+    }> | Extract<{
+        type: "legend";
+        items: {
+            text: string;
+            color: string;
+            symbol: "line" | "fill" | "outline";
+        }[];
+        duration: number;
+        carry: boolean;
+        id: string;
+        cut: string;
+        at: number;
+    } & {
+        start: number;
+        end: number;
+        order: number;
+    }, {
+        type: T;
+    }> | Extract<{
+        type: "marker";
+        position: [number, number];
+        color: string;
+        effect: "point" | "ring";
+        duration: number;
+        carry: boolean;
+        id: string;
+        cut: string;
+        at: number;
+        label?: string | undefined;
+    } & {
+        start: number;
+        end: number;
+        order: number;
+    }, {
+        type: T;
+    }> | Extract<{
+        type: "camera";
+        to: {
+            center: [number, number];
+            zoom: number;
+            bearing: number;
+            pitch: number;
+        };
+        ease: "linear" | "smooth";
+        duration: number;
+        carry: boolean;
+        id: string;
+        cut: string;
+        at: number;
+    } & {
+        start: number;
+        end: number;
+        order: number;
+    }, {
+        type: T;
+    }> | Extract<{
+        type: "inset";
+        camera: {
+            center: [number, number];
+            zoom: number;
+            bearing: number;
+            pitch: number;
+        };
+        title: string;
+        duration: number;
+        carry: boolean;
+        id: string;
+        cut: string;
+        at: number;
+    } & {
+        start: number;
+        end: number;
+        order: number;
+    }, {
+        type: T;
+    }> | Extract<{
+        type: "audio";
+        asset: string;
+        offset: number;
+        volume: number;
+        fadeIn: number;
+        fadeOut: number;
+        duration: number;
+        carry: boolean;
+        id: string;
+        cut: string;
+        at: number;
+    } & {
+        start: number;
+        end: number;
+        order: number;
+    }, {
+        type: T;
+    }> | Extract<{
+        type: "silence";
+        duration: number;
+        carry: boolean;
+        id: string;
+        cut: string;
+        at: number;
+    } & {
+        start: number;
+        end: number;
+        order: number;
+    }, {
+        type: T;
+    }> | Extract<{
+        type: "screen";
+        effect: "blackout" | "flash" | "interference" | "noise" | "scanlines" | "chromatic" | "dropout" | "shutdown";
+        intensity: number;
+        fadeIn: number;
+        fadeOut: number;
+        duration: number;
+        carry: boolean;
+        id: string;
+        cut: string;
+        at: number;
+    } & {
+        start: number;
+        end: number;
+        order: number;
+    }, {
+        type: T;
+    }> | undefined;
+    previous: Extract<{
+        type: "alert";
+        sender: string;
+        text: string;
+        level: "안전안내" | "긴급재난" | "위급재난";
+        regions: string[];
+        mapHighlight: false | {
+            duration: number;
+            color: string;
+        };
+        sound: false | "default" | {
+            asset: string;
+            duration: number;
+            volume: number;
+        };
+        id: string;
+        cut: string;
+        at: number;
+        occurredAt?: string | undefined;
+        publishedAt?: string | undefined;
+    } & {
+        start: number;
+        end: number;
+        order: number;
+    }, {
+        type: T;
+    }> | Extract<{
+        type: "news";
+        sound: false | "default" | {
+            asset: string;
+            duration: number;
+            volume: number;
+        };
+        source: string;
+        headline: string;
+        duration: number;
+        carry: boolean;
+        id: string;
+        cut: string;
+        at: number;
+        publishedAt?: string | undefined;
+    } & {
+        start: number;
+        end: number;
+        order: number;
+    }, {
+        type: T;
+    }> | Extract<{
+        type: "status";
+        sound: false | "default" | {
+            asset: string;
+            duration: number;
+            volume: number;
+        };
+        items: {
+            text: string;
+            color: string;
+        }[];
+        duration: number;
+        carry: boolean;
+        id: string;
+        cut: string;
+        at: number;
+    } & {
+        start: number;
+        end: number;
+        order: number;
+    }, {
+        type: T;
+    }> | Extract<{
+        type: "bulletin";
+        sound: false | "default" | {
+            asset: string;
+            duration: number;
+            volume: number;
+        };
+        source: string;
+        heading: string;
+        text: string;
+        color: string;
+        duration: number;
+        carry: boolean;
+        id: string;
+        cut: string;
+        at: number;
+    } & {
+        start: number;
+        end: number;
+        order: number;
+    }, {
+        type: T;
+    }> | Extract<{
+        type: "chat";
+        title: string;
+        duration: number;
+        carry: boolean;
+        id: string;
+        cut: string;
+        at: number;
+    } & {
+        start: number;
+        end: number;
+        order: number;
+    }, {
+        type: T;
+    }> | Extract<{
+        type: "chat-message";
+        chat: string;
+        author: string;
+        text: string;
+        color: string;
+        id: string;
+        cut: string;
+        at: number;
+    } & {
+        start: number;
+        end: number;
+        order: number;
+    }, {
+        type: T;
+    }> | Extract<{
+        type: "zone";
+        points: [number, number][];
+        color: string;
+        opacity: number;
+        duration: number;
+        carry: boolean;
+        id: string;
+        cut: string;
+        at: number;
+    } & {
+        start: number;
+        end: number;
+        order: number;
+    }, {
+        type: T;
+    }> | Extract<{
+        type: "line";
+        points: [number, number][];
+        color: string;
+        width: number;
+        drawSeconds: number;
+        dashed: boolean;
+        duration: number;
+        carry: boolean;
+        id: string;
+        cut: string;
+        at: number;
+    } & {
+        start: number;
+        end: number;
+        order: number;
+    }, {
+        type: T;
+    }> | Extract<{
+        type: "region";
+        regions: string[];
+        color: string;
+        fillOpacity: number;
+        strokeOpacity: number;
+        strokeWidth: number;
+        fadeIn: number;
+        fadeOut: number;
+        pulse: boolean;
+        duration: number;
+        carry: boolean;
+        id: string;
+        cut: string;
+        at: number;
+        strokeColor?: string | undefined;
+        label?: string | undefined;
+    } & {
+        start: number;
+        end: number;
+        order: number;
+    }, {
+        type: T;
+    }> | Extract<{
+        type: "legend";
+        items: {
+            text: string;
+            color: string;
+            symbol: "line" | "fill" | "outline";
+        }[];
+        duration: number;
+        carry: boolean;
+        id: string;
+        cut: string;
+        at: number;
+    } & {
+        start: number;
+        end: number;
+        order: number;
+    }, {
+        type: T;
+    }> | Extract<{
+        type: "marker";
+        position: [number, number];
+        color: string;
+        effect: "point" | "ring";
+        duration: number;
+        carry: boolean;
+        id: string;
+        cut: string;
+        at: number;
+        label?: string | undefined;
+    } & {
+        start: number;
+        end: number;
+        order: number;
+    }, {
+        type: T;
+    }> | Extract<{
+        type: "camera";
+        to: {
+            center: [number, number];
+            zoom: number;
+            bearing: number;
+            pitch: number;
+        };
+        ease: "linear" | "smooth";
+        duration: number;
+        carry: boolean;
+        id: string;
+        cut: string;
+        at: number;
+    } & {
+        start: number;
+        end: number;
+        order: number;
+    }, {
+        type: T;
+    }> | Extract<{
+        type: "inset";
+        camera: {
+            center: [number, number];
+            zoom: number;
+            bearing: number;
+            pitch: number;
+        };
+        title: string;
+        duration: number;
+        carry: boolean;
+        id: string;
+        cut: string;
+        at: number;
+    } & {
+        start: number;
+        end: number;
+        order: number;
+    }, {
+        type: T;
+    }> | Extract<{
+        type: "audio";
+        asset: string;
+        offset: number;
+        volume: number;
+        fadeIn: number;
+        fadeOut: number;
+        duration: number;
+        carry: boolean;
+        id: string;
+        cut: string;
+        at: number;
+    } & {
+        start: number;
+        end: number;
+        order: number;
+    }, {
+        type: T;
+    }> | Extract<{
+        type: "silence";
+        duration: number;
+        carry: boolean;
+        id: string;
+        cut: string;
+        at: number;
+    } & {
+        start: number;
+        end: number;
+        order: number;
+    }, {
+        type: T;
+    }> | Extract<{
+        type: "screen";
+        effect: "blackout" | "flash" | "interference" | "noise" | "scanlines" | "chromatic" | "dropout" | "shutdown";
+        intensity: number;
+        fadeIn: number;
+        fadeOut: number;
+        duration: number;
+        carry: boolean;
+        id: string;
+        cut: string;
+        at: number;
+    } & {
+        start: number;
+        end: number;
+        order: number;
+    }, {
+        type: T;
+    }> | undefined;
+    progress: number;
+    start: number;
+};

package/dist/video/transitions.js

@@ -0,0 +1,22 @@
+import { FPS } from '../scenario.js';
+// Frame-derived motion: seeking and parallel renders never depend on DOM history.
+export const changeFrames = Math.round(0.45 * FPS);
+export function changeProgress(frame, start, frames = changeFrames) {
+    const p = Math.max(0, Math.min(1, (frame - start) / frames));
+    return 1 - (1 - p) ** 3;
+}
+export function transitionAt(events, type, frame) {
+    const candidates = events.filter((e) => e.type === type && e.start <= frame);
+    const current = candidates.find((e) => frame < e.end);
+    const previous = current
+        ? candidates.find((e) => e !== current && e.end === current.start)
+        : candidates.reduce((last, e) => (!last || e.end > last.end ? e : last), undefined);
+    const start = current?.start ?? previous?.end ?? frame;
+    const progress = changeProgress(frame, start);
+    return {
+        current,
+        previous: progress < 1 ? previous : undefined,
+        progress,
+        start,
+    };
+}

package/dist/video/useBundledFonts.js

@@ -1,10 +1,13 @@
 import { useEffect, useState } from 'react';
-import { staticFile, useDelayRender, cancelRender } from 'remotion';
+import { staticFile, useBufferState, useDelayRender } from 'remotion';
 import { fonts } from './fonts.js';
 export function useBundledFonts(text) {
-    const { delayRender, continueRender } = useDelayRender();
+    const { delayRender, continueRender, cancelRender } = useDelayRender();
+    const buffer = useBufferState();
     const [fontHandle] = useState(() => delayRender('Loading bundled Korean font'));
     useEffect(() => {
+        const playback = buffer.delayPlayback();
+        let cancelled = false;
         const links = fonts.flatMap((font) => font.weights.map((weight) => {
             const link = document.createElement('link');
             link.rel = 'stylesheet';
@@ -18,10 +21,16 @@ export function useBundledFonts(text) {
         })))
             .then(() => Promise.all(fonts.flatMap((font) => font.weights.map((weight) => document.fonts.load(`${weight} 28px "${font.family}"`, font.id === 'mono'
             ? '0123456789:.- /+'
-            : text + ' 재난문자 수신 이력 발생 발표 이전 정정 안전안내 긴급재난 위급재난')))))
+            : text + ' 재난문자 수신 이력 발생 발표 안전안내 긴급재난 위급재난')))))
             .then(() => document.fonts.ready)
-            .then(() => continueRender(fontHandle))
-            .catch(cancelRender);
-        return () => links.forEach((link) => link.remove());
-    }, [text, fontHandle, delayRender, continueRender]);
+            .then(() => { if (!cancelled) {
+            continueRender(fontHandle);
+            playback.unblock();
+        } })
+            .catch(error => { if (!cancelled) {
+            playback.unblock();
+            cancelRender(error);
+        } });
+        return () => { cancelled = true; playback.unblock(); continueRender(fontHandle); links.forEach((link) => link.remove()); };
+    }, [text, fontHandle, buffer, delayRender, continueRender, cancelRender]);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "disaster-broadcast-studio",
-  "version": "0.1.1",
+  "version": "0.3.0",
   "description": "Render text-authored Korean disaster broadcast fiction into deterministic videos.",
   "type": "module",
   "bin": {
@@ -27,6 +27,7 @@
     "@fontsource/ibm-plex-mono": "5.3.0",
     "@fontsource/ibm-plex-sans-kr": "5.3.0",
     "@remotion/bundler": "4.0.543",
+    "@remotion/player": "4.0.543",
     "@remotion/renderer": "4.0.543",
     "commander": "^14.0.0",
     "maplibre-gl": "6.18.0",