disaster-broadcast-studio 0.1.1 → 0.2.0

package/dist/video/transitions.d.ts

@@ -0,0 +1,562 @@
+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;
+        };
+        pageSeconds: number;
+        id: string;
+        cut: string;
+        at: number;
+        corrects?: string | undefined;
+        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;
+        pageSeconds: number;
+        duration: number;
+        carry: boolean;
+        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;
+        };
+        pageSeconds: number;
+        id: string;
+        cut: string;
+        at: number;
+        corrects?: string | undefined;
+        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;
+        pageSeconds: number;
+        duration: number;
+        carry: boolean;
+        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;
+};
+export declare function pageAt(frame: number, start: number, seconds: number, count: number): {
+    page: number;
+    previous: number | undefined;
+    progress: number;
+};

package/dist/video/transitions.js

@@ -0,0 +1,31 @@
+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,
+    };
+}
+export function pageAt(frame, start, seconds, count) {
+    const frames = Math.round(seconds * FPS);
+    const turn = Math.floor(Math.max(0, frame - start) / frames);
+    return {
+        page: turn % count,
+        previous: turn > 0 && count > 1 ? (turn - 1) % count : undefined,
+        progress: turn > 0 && count > 1 ? changeProgress(frame, start + turn * frames) : 1,
+    };
+}

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';
@@ -20,8 +23,14 @@ export function useBundledFonts(text) {
             ? '0123456789:.- /+'
             : 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.2.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",

package/skills/scenario-writing/SKILL.md

@@ -31,7 +31,7 @@ description: 재난방송실을 이용하는 창작 AI가 한국형 재난방송
 1. 사용자가 정한 소재·길이·분위기·매체를 바탕으로 사건의 흐름을 설계한다. 미정인 창작 선택은 작품에 맞춰 결정하되 이미 합의한 조건을 바꾸지 않는다.
 2. 사건 내용과 관객이 정보를 보게 되는 시점을 구분한다. 사건 발생·발령·보도·수신 시각이 다르면 그 차이를 명시한다.
 3. 문자의 대상·행동·발신자와 뉴스의 발표 주체·확인 범위를 구별한다. 발신기관과 발송 대상을 혼동하지 않으며, 모든 문자에서 본문·지역 코드·지도 범위를 맞춘다. 도 전역이면 소속 시군 전체를 조회한다. 수신 시 채우기가 부드럽게 나타났다 사라지는 지도 강조는 기본 기능이며 필요하면 끈다.
-4. 공통 문자 수신음은 엔진 기본 기능을 쓰며 작품별로 중복 제작하지 않는다. [Tone.js 음원 제작](references/audio.md)의 실행 가능한 예제를 활용해 필요한 소리를 만든다. 기존 로컬 음원도 사용할 수 있으며 출처·사용권을 기록한다.
+4. 상태·방송 안내·등급별 문자 알림음은 엔진 기본 기능을 쓰며 작품별로 중복 제작하지 않는다. 뉴스는 기본 무음으로 두고 필요한 경우에만 소리를 명시한다. 이벤트의 `sound`로 끄거나 교체한다. [Tone.js 음원 제작](references/audio.md)의 실행 가능한 예제를 활용해 필요한 소리를 만든다. 기존 로컬 음원도 사용할 수 있으며 출처·사용권을 기록한다.
 5. 내용과 함께 등장·퇴장·지도 이동·강조·음향·침묵·전환의 시점을 작성한다. 컷 내부 시간은 현실과 1:1로 흐르게 하고, 시간 생략은 명시적 컷 경계의 `clockTransition`으로 표현한다. 기존 상단 시계의 강조·숫자 이동·도착 시각 유지가 읽힌 뒤 새 정보를 배치한다.
 6. 절제된 방송 화면을 기본으로 삼되 모든 작품에 같은 긴장 장치나 반전을 강제하지 않는다. 행정 표현의 현실감과 읽을 시간을 확보한다.
 
@@ -39,7 +39,7 @@ description: 재난방송실을 이용하는 창작 AI가 한국형 재난방송
 
 [작품 파일과 CLI](references/format.md)에 따라 외부 작품 파일을 작성한다. 정확한 필드 계약은 설치된 CLI의 `dbs schema`, 명령은 `dbs --help`로 확인한다.
 
-`dbs validate` → `dbs frame`과 구간 `dbs render` → 문안 가독성·지도 범위·음향·시간 수정 → 전체 `dbs render` 순으로 진행한다. 중요 장면의 앞뒤 프레임과 컷 경계를 확인하며 매번 전체 영상을 다시 출력하지 않는다. 작품 데이터에서 고칠 수 있는 오류는 그곳에서 고치고, 엔진 기능이 부족하면 필요한 기능을 구체적으로 분리한다. 창작 중 엔진 코드를 임의로 바꾸지 않는다.
+`dbs validate` → `dbs preview`로 화면·음향 재생과 탐색 → 문안 가독성·지도 범위·음향·시간 수정 → 필요한 `dbs frame`·구간 `dbs render` 검증 → 전체 `dbs render` 순으로 진행한다. 웹 미리보기는 저장한 변경을 현재 위치에서 일시정지해 반영한다. 중요 장면의 앞뒤 프레임과 컷 경계를 확인하며 매번 전체 영상을 다시 출력하지 않는다. 작품 데이터에서 고칠 수 있는 오류는 그곳에서 고치고, 엔진 기능이 부족하면 필요한 기능을 구체적으로 분리한다. 창작 중 엔진 코드를 임의로 바꾸지 않는다.
 
 ## 결과물 확인
 

package/skills/scenario-writing/references/audio.md

@@ -4,7 +4,7 @@
 
 ## 실행 가능한 시작점
 
-문자 수신음은 엔진 공통 기능이다. 생략 시 창작 알림음이 자동 재생되며 작품마다 생성하지 않는다. `alert.sound: false`로 끄거나 `{asset, duration, volume}`으로 다른 음원을 연결한다. 기존 작품의 수신음 `audio` 이벤트와 중복하지 않는다.
+상태 변경·방송 안내·등급별 문자 수신음은 엔진 기본 기능이며 작품마다 생성하지 않는다. 뉴스는 기본 무음이며 `sound: default` 또는 사용자 음원을 명시한 경우에만 소리를 재생한다. 상태 변경음은 화면 교체 시작에 같은 높이로 두 번 울리는 0.3초의 짧은 전자음이다. 안전안내는 0.55초의 휴대폰 진동형 수신음, 긴급재난은 2.4초의 반복 경보, 위급재난은 4.2초의 더 강한 반복·지속 경보다. 긴급·위급은 EAS풍의 불협화음으로 합성했다. `alert`, `status`, `news`, `bulletin`에서 `sound: false`로 끄거나 `{asset, duration, volume}`으로 다른 음원을 연결한다. 기본음과 별도 `audio` 이벤트를 중복하지 않는다. `silence`는 기본음도 음소거한다.
 
 아래 합성은 작품 고유 음향이 필요한 경우에 사용한다. 스킬의 `examples/receipt.mjs`를 `audio-code/receipt.mjs`로 직접 복사해 실행할 수 있다. CC0-1.0의 합성 예제이며 실제 정부 경보음이 아니다.