disaster-broadcast-studio 0.1.1 → 0.2.0

package/dist/video/Alerts.js

@@ -1,62 +1,78 @@
 import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-import { FPS, pages, alertText } from '../scenario.js';
+import { pages, alertText } from '../scenario.js';
 import { stateAt, clock } from '../timeline.js';
 import { numberFont } from './fonts.js';
+import { PagedText } from './Information.js';
+import { changeProgress, pageAt } from './transitions.js';
 const colors = {
     안전안내: '#a0adb5',
     긴급재난: '#c2746e',
     위급재난: '#dd655f',
 };
-function AlertCard({ event, latest, frame, timeline, }) {
+function AlertCard({ event, emphasis, frame, timeline, }) {
     if (event.type !== 'alert')
         return null;
-    const chunks = pages(alertText(timeline.scenario.agencies[event.sender], event.text)), page = Math.floor((frame - event.start) / FPS / event.pageSeconds) % chunks.length;
+    const chunks = pages(alertText(timeline.scenario.agencies[event.sender], event.text));
+    const { page } = pageAt(frame, event.start, event.pageSeconds, chunks.length);
+    const arrival = changeProgress(frame, event.start);
+    const latest = emphasis > 0;
     const received = stateAt(timeline, event.start).epoch;
-    return (_jsxs("article", { style: {
-            padding: latest ? '20px 24px 22px' : '17px 24px 20px',
-            borderBottom: '1px solid #343a3f',
-            background: latest ? '#131719' : '#0e1214',
-            borderLeft: `2px solid ${latest ? colors[event.level] : '#434b51'}`,
-        }, children: [_jsxs("div", { style: {
-                    display: 'flex',
-                    alignItems: 'center',
-                    gap: 10,
-                    fontSize: 17,
-                    color: latest ? colors[event.level] : '#8c979e',
-                    marginBottom: 12,
-                }, children: [_jsxs("b", { style: {
-                            border: `1px solid ${latest ? colors[event.level] : '#4b565d'}`,
-                            padding: '2px 7px',
-                            fontWeight: 400,
-                        }, children: [event.corrects ? '정정 · ' : '', event.level] }), _jsxs("span", { style: {
-                            marginLeft: 'auto',
-                            fontFamily: numberFont,
-                            fontVariantNumeric: 'tabular-nums',
+    return (_jsx("div", { style: { display: 'grid', gridTemplateRows: `${arrival}fr` }, children: _jsx("div", { style: { minHeight: 0, overflow: 'hidden' }, children: _jsxs("article", { style: {
+                    padding: `${17 + 3 * emphasis}px 24px ${20 + 2 * emphasis}px`,
+                    opacity: arrival,
+                    transform: `translateY(${-14 * (1 - arrival)}px)`,
+                    boxShadow: `inset 4px 0 ${colors[event.level]}${Math.round((1 - changeProgress(frame, event.start, 66)) * 180)
+                        .toString(16)
+                        .padStart(2, '0')}`,
+                    borderBottom: '1px solid #343a3f',
+                    background: latest ? '#131719' : '#0e1214',
+                    borderLeft: `2px solid ${colors[event.level]}`,
+                }, children: [_jsxs("div", { style: {
+                            display: 'flex',
+                            alignItems: 'center',
+                            gap: 10,
                             fontSize: 17,
-                            color: '#aab3b9',
-                        }, children: ["\uC218\uC2E0 ", clock(received, timeline.scenario.timezone)] })] }), (event.occurredAt || event.publishedAt) && (_jsxs("div", { style: { fontSize: 16, color: '#939fa7', marginBottom: 10 }, children: [event.occurredAt &&
-                        `발생 ${clock(Date.parse(event.occurredAt), timeline.scenario.timezone)} `, event.publishedAt &&
-                        `발표 ${clock(Date.parse(event.publishedAt), timeline.scenario.timezone)}`] })), _jsx("div", { style: {
-                    fontSize: latest ? 28 : 22,
-                    lineHeight: 1.65,
-                    whiteSpace: 'pre-wrap',
-                    wordBreak: 'keep-all',
-                    overflowWrap: 'anywhere',
-                    color: latest ? '#e0e4e7' : '#aab5bd',
-                }, children: chunks[page] }), chunks.length > 1 && (_jsxs("div", { style: {
-                    fontFamily: numberFont,
-                    fontSize: 16,
-                    color: '#839099',
-                    marginTop: 12,
-                    textAlign: 'right',
-                }, children: [page + 1, " / ", chunks.length] })), event.corrects && (_jsxs("div", { style: {
-                    fontSize: 16,
-                    color: '#a4afb6',
-                    marginTop: 12,
-                    borderTop: '1px solid #343a3f',
-                    paddingTop: 10,
-                }, children: ["\uC774\uC804 \uBB38\uC790 \uC815\uC815 \u00B7", ' ', clock(stateAt(timeline, timeline.events.find((e) => e.id === event.corrects).start).epoch, timeline.scenario.timezone)] }))] }));
+                            color: colors[event.level],
+                            marginBottom: 12,
+                        }, children: [_jsxs("b", { style: {
+                                    border: `1px solid ${colors[event.level]}`,
+                                    padding: '2px 7px',
+                                    fontWeight: 400,
+                                }, children: [event.corrects ? '정정 · ' : '', event.level] }), _jsxs("span", { style: {
+                                    marginLeft: 'auto',
+                                    fontFamily: numberFont,
+                                    fontVariantNumeric: 'tabular-nums',
+                                    fontSize: 17,
+                                    color: '#aab3b9',
+                                }, children: ["\uC218\uC2E0 ", clock(received, timeline.scenario.timezone)] })] }), (event.occurredAt || event.publishedAt) && (_jsxs("div", { style: { fontSize: 16, color: '#939fa7', marginBottom: 10 }, children: [event.occurredAt &&
+                                `발생 ${clock(Date.parse(event.occurredAt), timeline.scenario.timezone)} `, event.publishedAt &&
+                                `발표 ${clock(Date.parse(event.publishedAt), timeline.scenario.timezone)}`] })), _jsx("div", { style: {
+                            fontSize: 22 + 6 * emphasis,
+                            lineHeight: 1.65,
+                            whiteSpace: 'pre-wrap',
+                            wordBreak: 'keep-all',
+                            overflowWrap: 'anywhere',
+                            color: latest ? '#e0e4e7' : '#aab5bd',
+                        }, children: _jsx(PagedText, { chunks: chunks, frame: frame, start: event.start, seconds: event.pageSeconds }) }), chunks.length > 1 && (_jsxs("div", { style: {
+                            fontFamily: numberFont,
+                            fontSize: 16,
+                            color: '#839099',
+                            marginTop: 12,
+                            textAlign: 'right',
+                        }, children: [page + 1, " / ", chunks.length] })), event.corrects && (_jsxs("div", { style: {
+                            fontSize: 16,
+                            color: '#a4afb6',
+                            marginTop: 12,
+                            borderTop: '1px solid #343a3f',
+                            paddingTop: 10,
+                        }, children: ["\uC774\uC804 \uBB38\uC790 \uC815\uC815 \u00B7", ' ', clock(stateAt(timeline, timeline.events.find((e) => e.id === event.corrects).start)
+                                .epoch, timeline.scenario.timezone)] }))] }) }) }));
 }
 export function AlertHistory({ timeline, frame }) {
-    return (_jsx(_Fragment, { children: stateAt(timeline, frame).alerts.map((event, i) => (_jsx(AlertCard, { event: event, latest: i === 0, frame: frame, timeline: timeline }, event.id))) }));
+    const alerts = stateAt(timeline, frame).alerts;
+    return (_jsx(_Fragment, { children: alerts.map((event, i) => (_jsx(AlertCard, { event: event, emphasis: i === 0
+                ? 1
+                : alerts[i - 1].start > event.start
+                    ? 1 - changeProgress(frame, alerts[i - 1].start)
+                    : 0, frame: frame, timeline: timeline }, event.id))) }));
 }

package/dist/video/Broadcast.js

@@ -1,7 +1,7 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { AbsoluteFill, useCurrentFrame } from 'remotion';
 import { FPS } from '../scenario.js';
-import { stateAt, clock, envelope, receiptHighlights, statusEntry, shutdownAt, } from '../timeline.js';
+import { stateAt, clock, envelope, receiptHighlights, shutdownAt } from '../timeline.js';
 import { AlertHistory } from './Alerts.js';
 import { BroadcastMap } from './Map.js';
 import { SignalEffects, signalLevels } from './SignalEffects.js';
@@ -9,18 +9,18 @@ import { AudioTrack } from './AudioTrack.js';
 import { Bulletin } from './Bulletin.js';
 import { useBundledFonts } from './useBundledFonts.js';
 import { bodyFont, numberFont } from './fonts.js';
+import { News, Status } from './Information.js';
+import { changeProgress, transitionAt } from './transitions.js';
 export function Broadcast(props) {
     const { timeline, regions, countries, provinces, audio } = props;
     const openingFrames = 5 * FPS;
-    const frame = useCurrentFrame(), state = stateAt(timeline, frame), news = state.news;
+    const frame = useCurrentFrame(), state = stateAt(timeline, frame);
     useBundledFonts(JSON.stringify(timeline.scenario));
-    const status = state.visible.find((e) => e.type === 'status');
-    const bulletin = state.visible.find((e) => e.type === 'bulletin');
+    const bulletins = transitionAt(timeline.events, 'bulletin', state.contentFrame);
     const inset = state.visible.find((e) => e.type === 'inset');
     const legend = state.visible.find((e) => e.type === 'legend');
     const signal = signalLevels(state.visible, frame);
     const mapEvents = [...state.visible, ...receiptHighlights(timeline, state.contentFrame)];
-    const entry = statusEntry(state.contentFrame, status?.start ?? 0);
     const shutdown = shutdownAt(state.visible, frame);
     return (_jsxs(AbsoluteFill, { style: {
             filter: signal.chromatic > 0 ? 'url(#dbs-chromatic)' : undefined,
@@ -41,22 +41,9 @@ export function Broadcast(props) {
                             borderBottom: '1px solid #495159',
                             background: '#0b0e10',
                             gap: 14,
-                        }, children: [status?.type === 'status' &&
-                                status.items.map((item, i) => (_jsx("span", { style: {
-                                        opacity: entry.opacity,
-                                        transform: `translateY(${entry.offset}px)`,
-                                        background: `${item.color}${Math.round(entry.glow * 255)
-                                            .toString(16)
-                                            .padStart(2, '0')}`,
-                                        border: `1px solid ${item.color}`,
-                                        color: item.color,
-                                        padding: '3px 10px',
-                                        fontSize: 18,
-                                        lineHeight: 1.3,
-                                        whiteSpace: 'nowrap',
-                                        flexShrink: 0,
-                                    }, children: item.text }, `${status.id}-${i}`))), _jsx("time", { style: {
+                        }, children: [_jsx(Status, { timeline: timeline, frame: state.contentFrame }), _jsx("time", { style: {
                                     marginLeft: 'auto',
+                                    flexShrink: 0,
                                     fontSize: 23,
                                     fontFamily: numberFont,
                                     fontVariantNumeric: 'tabular-nums',
@@ -85,6 +72,8 @@ export function Broadcast(props) {
                                     padding: '14px 18px',
                                     fontSize: 21,
                                     color: '#d0d5da',
+                                    opacity: changeProgress(state.contentFrame, legend.start),
+                                    transform: `translateY(${10 * (1 - changeProgress(state.contentFrame, legend.start))}px)`,
                                 }, children: legend.items.map((item, i) => (_jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 12 }, children: [_jsx("span", { style: {
                                                 width: 23,
                                                 height: item.symbol === 'line' ? 0 : 16,
@@ -97,6 +86,8 @@ export function Broadcast(props) {
                                     width: 420,
                                     height: 290,
                                     border: '1px solid #78858e',
+                                    opacity: changeProgress(state.contentFrame, inset.start),
+                                    transform: `translateY(${10 * (1 - changeProgress(state.contentFrame, inset.start))}px)`,
                                 }, children: [_jsx(BroadcastMap, { camera: inset.camera, countries: countries, regions: regions, provinces: provinces, events: mapEvents, frame: state.contentFrame, inset: true }), _jsx("div", { style: {
                                             position: 'absolute',
                                             top: 0,
@@ -115,7 +106,7 @@ export function Broadcast(props) {
                             borderLeft: '1px solid #495159',
                             background: '#0c1012',
                             overflow: 'hidden',
-                        }, children: _jsx(AlertHistory, { timeline: timeline, frame: state.contentFrame }) }), bulletin && (_jsx(Bulletin, { event: bulletin, source: timeline.scenario.agencies[bulletin.source], frame: state.contentFrame })), _jsx("footer", { style: {
+                        }, children: _jsx(AlertHistory, { timeline: timeline, frame: state.contentFrame }) }), [bulletins.previous, bulletins.current].map((bulletin, i) => bulletin && (_jsx(Bulletin, { event: bulletin, source: timeline.scenario.agencies[bulletin.source], frame: i === 0 ? Math.min(state.contentFrame, bulletin.end - 1) : state.contentFrame, progress: i === 0 ? 1 - bulletins.progress : bulletins.progress }, bulletin.id))), _jsx("footer", { style: {
                             position: 'absolute',
                             bottom: 0,
                             left: 0,
@@ -127,22 +118,7 @@ export function Broadcast(props) {
                             background: '#0b0e10',
                             padding: '0 26px',
                             gap: 24,
-                        }, children: news?.type === 'news' && (_jsxs(_Fragment, { children: [_jsxs("div", { style: { minWidth: 135 }, children: [_jsx("div", { style: { fontSize: 18, color: '#b3c0c9', fontWeight: 600 }, children: timeline.scenario.agencies[news.source] }), _jsx("div", { style: {
-                                                fontSize: 16,
-                                                color: '#85959f',
-                                                marginTop: 5,
-                                                fontFamily: numberFont,
-                                                fontVariantNumeric: 'tabular-nums',
-                                            }, children: clock(news.publishedAt
-                                                ? Date.parse(news.publishedAt)
-                                                : stateAt(timeline, news.start).epoch, timeline.scenario.timezone) })] }), _jsx("div", { style: {
-                                        fontSize: news.headline.length > 120 ? 23 : news.headline.length > 85 ? 25 : 30,
-                                        lineHeight: 1.3,
-                                        fontWeight: 400,
-                                        wordBreak: 'keep-all',
-                                        overflowWrap: 'anywhere',
-                                        opacity: Math.min(1, (frame - news.start + 1) / 12),
-                                    }, children: news.headline })] })) })] }), state.visible
+                        }, children: _jsx(News, { timeline: timeline, frame: state.contentFrame }) })] }), state.visible
                 .filter((e) => e.type === 'screen' && ['blackout', 'flash', 'interference'].includes(e.effect))
                 .map((event) => {
                 if (event.type !== 'screen')

package/dist/video/Bulletin.d.ts

@@ -1,9 +1,10 @@
 import React from 'react';
 import type { CompiledEvent } from '../scenario.js';
-export declare function Bulletin({ event, source, frame, }: {
+export declare function Bulletin({ event, source, frame, progress, }: {
     event: Extract<CompiledEvent, {
         type: 'bulletin';
     }>;
     source: string;
     frame: number;
+    progress?: number;
 }): React.JSX.Element;

package/dist/video/Bulletin.js

@@ -1,9 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { FPS, pages } from '../scenario.js';
+import { pages } from '../scenario.js';
 import { numberFont } from './fonts.js';
-export function Bulletin({ event, source, frame, }) {
+import { PagedText } from './Information.js';
+import { pageAt } from './transitions.js';
+export function Bulletin({ event, source, frame, progress = 1, }) {
     const chunks = pages(event.text);
-    const page = Math.floor((frame - event.start) / FPS / event.pageSeconds) % chunks.length;
+    const { page } = pageAt(frame, event.start, event.pageSeconds, chunks.length);
     return (_jsxs("section", { style: {
             position: 'absolute',
             top: 49,
@@ -11,6 +13,8 @@ export function Bulletin({ event, source, frame, }) {
             left: 0,
             right: 0,
             background: '#0a0d0f',
+            opacity: progress,
+            transform: `translateY(${16 * (1 - progress)}px)`,
             display: 'flex',
             flexDirection: 'column',
             justifyContent: 'center',
@@ -26,7 +30,7 @@ export function Bulletin({ event, source, frame, }) {
                     lineHeight: 1.9,
                     whiteSpace: 'pre-wrap',
                     wordBreak: 'keep-all',
-                }, children: chunks[page] }), chunks.length > 1 && (_jsxs("div", { style: {
+                }, children: _jsx(PagedText, { chunks: chunks, frame: frame, start: event.start, seconds: event.pageSeconds }) }), chunks.length > 1 && (_jsxs("div", { style: {
                     fontSize: 18,
                     marginTop: 30,
                     color: '#8c969d',

package/dist/video/Information.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import { type Timeline } from '../scenario.js';
+export declare function PagedText({ chunks, frame, start, seconds, }: {
+    chunks: string[];
+    frame: number;
+    start: number;
+    seconds: number;
+}): React.JSX.Element;
+export declare function News({ timeline, frame }: {
+    timeline: Timeline;
+    frame: number;
+}): React.JSX.Element;
+export declare function Status({ timeline, frame }: {
+    timeline: Timeline;
+    frame: number;
+}): React.JSX.Element;

package/dist/video/Information.js

@@ -0,0 +1,104 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { FPS } from '../scenario.js';
+import { clock, notificationPulse, stateAt } from '../timeline.js';
+import { numberFont } from './fonts.js';
+import { changeFrames, changeProgress, pageAt, transitionAt } from './transitions.js';
+export function PagedText({ chunks, frame, start, seconds, }) {
+    const { page, previous, progress } = pageAt(frame, start, seconds, chunks.length);
+    return (_jsxs("div", { style: { display: 'grid', overflow: 'hidden' }, children: [previous !== undefined && progress < 1 && (_jsx("div", { "aria-hidden": true, style: {
+                    gridArea: '1 / 1',
+                    opacity: 1 - progress,
+                    transform: `translateY(${-12 * progress}px)`,
+                }, children: chunks[previous] })), _jsx("div", { style: {
+                    gridArea: '1 / 1',
+                    opacity: progress,
+                    transform: `translateY(${12 * (1 - progress)}px)`,
+                }, children: chunks[page] })] }));
+}
+export function News({ timeline, frame }) {
+    const { current, previous, progress } = transitionAt(timeline.events, 'news', frame);
+    return (_jsxs("div", { style: {
+            position: 'relative',
+            flex: 1,
+            alignSelf: 'stretch',
+            overflow: 'hidden',
+        }, children: [[previous, current].map((news, i) => news && (_jsxs("div", { "aria-hidden": i === 0 || undefined, style: {
+                    position: 'absolute',
+                    inset: 0,
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: 24,
+                    opacity: i === 0 ? 1 - progress : progress,
+                    transform: `translateY(${i === 0 ? -92 * progress : 92 * (1 - progress)}px)`,
+                }, children: [_jsxs("div", { style: { minWidth: 135, flexShrink: 0 }, children: [_jsx("div", { style: { fontSize: 18, color: '#b3c0c9', fontWeight: 600 }, children: timeline.scenario.agencies[news.source] }), _jsx("div", { style: {
+                                    fontSize: 16,
+                                    color: '#85959f',
+                                    marginTop: 5,
+                                    fontFamily: numberFont,
+                                    fontVariantNumeric: 'tabular-nums',
+                                }, children: clock(news.publishedAt
+                                    ? Date.parse(news.publishedAt)
+                                    : stateAt(timeline, news.start).epoch, timeline.scenario.timezone) })] }), _jsx("div", { style: {
+                            fontSize: news.headline.length > 120 ? 23 : news.headline.length > 85 ? 25 : 30,
+                            lineHeight: 1.3,
+                            wordBreak: 'keep-all',
+                            overflowWrap: 'anywhere',
+                        }, children: news.headline })] }, news.id))), _jsx("div", { style: {
+                    position: 'absolute',
+                    top: 0,
+                    left: 0,
+                    right: 0,
+                    height: 2,
+                    background: '#b3c0c9',
+                    opacity: current ? (1 - changeProgress(frame, current.start, 60)) * 0.7 : 0,
+                } })] }));
+}
+export function Status({ timeline, frame }) {
+    const { current, previous, progress, start } = transitionAt(timeline.events, 'status', frame);
+    const pulse = notificationPulse(frame, start + changeFrames, start + changeFrames + 1.8 * FPS);
+    // Compare authored values, so unchanged badges do not animate on event replacement.
+    const before = timeline.events.find((e) => e.type === 'status' && e.end === current?.start);
+    const oldItems = before?.type === 'status' ? before.items : [];
+    const same = (a, b) => a.text === b.text && a.color === b.color;
+    const removed = previous?.items.filter((item) => !current?.items.some((next) => same(item, next))) ?? [];
+    const count = Math.max(current?.items.length ?? 0, previous?.items.length ?? 0);
+    return (_jsx("div", { style: { display: 'flex', alignItems: 'center', overflow: 'hidden', minWidth: 0 }, children: Array.from({ length: count }, (_, i) => {
+            const item = current?.items[i];
+            const old = previous?.items[i];
+            const outgoing = old && removed.includes(old) ? old : undefined;
+            const changed = item && !oldItems.some((old) => same(item, old));
+            return (_jsx("div", { style: {
+                    display: 'grid',
+                    flexShrink: 0,
+                    gridTemplateColumns: `${item ? 1 : 1 - progress}fr`,
+                }, children: _jsx("div", { style: { display: 'grid', minWidth: 0, overflow: 'hidden' }, children: [outgoing, item].map((badge, layer) => badge && (_jsxs("span", { "aria-hidden": layer === 0 || undefined, style: {
+                            gridArea: '1 / 1',
+                            position: 'relative',
+                            display: 'block',
+                            marginRight: 14,
+                            opacity: layer === 0 ? 1 - progress : changed ? progress * (1 - 0.6 * pulse) : 1,
+                            transform: `translateY(${layer === 0 ? -24 * progress : changed ? 24 * (1 - progress) : 0}px)`,
+                            border: `1px solid ${badge.color}`,
+                            color: badge.color,
+                            padding: '3px 10px',
+                            fontSize: 18,
+                            lineHeight: 1.3,
+                            whiteSpace: 'nowrap',
+                            background: `${badge.color}${Math.round((layer === 1 && changed
+                                ? Math.max(1 - changeProgress(frame, start, 66), pulse)
+                                : 0) * 96)
+                                .toString(16)
+                                .padStart(2, '0')}`,
+                        }, children: [badge.text, layer === 1 && changed && (_jsx("span", { style: {
+                                    position: 'absolute',
+                                    left: 0,
+                                    right: 0,
+                                    bottom: 0,
+                                    height: 2,
+                                    background: badge.color,
+                                    transformOrigin: 'left',
+                                    transform: `scaleX(${progress})`,
+                                    opacity: Math.max(1 - changeProgress(frame, start, 66), pulse),
+                                } }))] }, layer))) }) }, i));
+        }) }));
+}

package/dist/video/Map.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useLayoutEffect, useRef, useState } from 'react';
 import * as maplibregl from 'maplibre-gl';
-import { useDelayRender, cancelRender, staticFile } from 'remotion';
+import { useBufferState, useDelayRender, useRemotionEnvironment, staticFile } from 'remotion';
 import { FPS } from '../scenario.js';
 import { regionOpacity } from '../timeline.js';
 const style = (countries, regions, provinces) => ({
@@ -89,27 +89,32 @@ export function BroadcastMap({ camera, countries, regions, provinces, events, fr
     const container = useRef(null), map = useRef(null);
     const snapshot = useRef(null), markers = useRef(null);
     const paths = useRef(new Map()), capturedCamera = useRef(''), completed = useRef('');
-    const { delayRender, continueRender } = useDelayRender();
+    const { delayRender, continueRender, cancelRender } = useDelayRender();
+    const buffer = useBufferState();
+    const { isRendering } = useRemotionEnvironment();
     const pending = useRef(null);
     const [revision, setRevision] = useState(0);
     useLayoutEffect(() => { pending.current?.(); pending.current = null; }, [revision]);
     useEffect(() => {
         const handle = delayRender('Initializing offline map');
+        const playback = buffer.delayPlayback();
         maplibregl.setWorkerUrl(staticFile('maplibre-gl-worker.mjs'));
         let m;
         try {
             m = new maplibregl.Map({ container: container.current, style: style(countries, regions, provinces),
                 ...camera, interactive: false, attributionControl: false, fadeDuration: 0,
-                canvasContextAttributes: { alpha: true, preserveDrawingBuffer: true, antialias: true } });
+                canvasContextAttributes: { alpha: true, preserveDrawingBuffer: isRendering, antialias: true } });
         }
         catch (e) {
+            playback.unblock();
+            continueRender(handle);
             cancelRender(e);
             return;
         }
         map.current = m;
         m.on('error', e => cancelRender(new Error(`MapLibre: ${e.error.message}`)));
-        m.once('load', () => { m.resize(); continueRender(handle); });
-        return () => { map.current = null; m.remove(); };
+        m.once('load', () => { m.resize(); continueRender(handle); playback.unblock(); });
+        return () => { playback.unblock(); continueRender(handle); map.current = null; m.remove(); };
     }, []);
     const cameraKey = JSON.stringify(camera);
     const regionEvents = events.filter(e => e.type === 'region');
@@ -121,19 +126,23 @@ export function BroadcastMap({ camera, countries, regions, provinces, events, fr
             return;
         const handle = delayRender(`Projecting map frame ${frame}`);
         let settled = false, cancelled = false;
+        const playback = isRendering ? buffer.delayPlayback() : null;
         const finish = () => { if (!settled) {
             settled = true;
             continueRender(handle);
+            playback?.unblock();
         } };
         const project = () => {
             if (cancelled)
                 return;
             try {
                 if (capturedCamera.current !== cameraKey) {
-                    const canvas = snapshot.current;
-                    canvas.width = m.getCanvas().width;
-                    canvas.height = m.getCanvas().height;
-                    canvas.getContext('2d').drawImage(m.getCanvas(), 0, 0);
+                    if (isRendering) {
+                        const canvas = snapshot.current;
+                        canvas.width = m.getCanvas().width;
+                        canvas.height = m.getCanvas().height;
+                        canvas.getContext('2d').drawImage(m.getCanvas(), 0, 0);
+                    }
                     capturedCamera.current = cameraKey;
                     paths.current.clear();
                 }
@@ -168,6 +177,13 @@ export function BroadcastMap({ camera, countries, regions, provinces, events, fr
             }
         };
         const update = () => {
+            // Playback lets MapLibre paint continuously. Waiting for idle and reading
+            // the WebGL canvas on every moving frame is only needed for file output.
+            if (!isRendering) {
+                m.jumpTo(camera);
+                project();
+                return;
+            }
             if (capturedCamera.current === cameraKey) {
                 project();
                 return;
@@ -182,7 +198,7 @@ export function BroadcastMap({ camera, countries, regions, provinces, events, fr
             m.once('load', update);
         return () => { cancelled = true; m.off('load', update); m.off('idle', project); finish(); };
     }, [requestKey]);
-    return _jsxs("div", { style: { position: 'absolute', inset: 0, overflow: 'hidden' }, children: [_jsx("style", { children: '.maplibregl-canvas {position:absolute;left:0;top:0;}' }), _jsx("div", { ref: container, style: { position: 'absolute', inset: 0, opacity: 0, pointerEvents: 'none' } }), _jsx("canvas", { ref: snapshot, "aria-hidden": "true", style: { position: 'absolute', inset: 0, width: '100%', height: '100%' } }), _jsxs("svg", { width: "100%", height: "100%", style: { position: 'absolute', inset: 0, pointerEvents: 'none' }, children: [_jsx("g", { children: regionEvents.map(e => e.regions.map(id => _jsx("path", { d: paths.current.get(id), fill: e.color, fillRule: "evenodd", opacity: e.fillOpacity * regionOpacity(e, frame) }, `${e.id}-${id}`))) }), _jsx("g", { fill: "none", strokeLinejoin: "round", children: regionEvents.map(e => e.regions.map(id => _jsx("path", { d: paths.current.get(id), stroke: e.strokeColor ?? e.color, strokeWidth: e.strokeWidth, opacity: e.strokeOpacity * regionOpacity(e, frame, false) }, `${e.id}-${id}`))) })] }), _jsxs("div", { ref: markers, style: { position: 'absolute', inset: 0, pointerEvents: 'none' }, children: [_jsx("svg", { width: "100%", height: "100%", style: { position: 'absolute', inset: 0 }, children: events.map((e) => {
+    return _jsxs("div", { style: { position: 'absolute', inset: 0, overflow: 'hidden' }, children: [_jsx("style", { children: '.maplibregl-canvas {position:absolute;left:0;top:0;}' }), _jsx("div", { ref: container, style: { position: 'absolute', inset: 0, opacity: isRendering ? 0 : 1, pointerEvents: 'none' } }), isRendering && _jsx("canvas", { ref: snapshot, "aria-hidden": "true", style: { position: 'absolute', inset: 0, width: '100%', height: '100%' } }), _jsxs("svg", { width: "100%", height: "100%", style: { position: 'absolute', inset: 0, pointerEvents: 'none' }, children: [_jsx("g", { children: regionEvents.map(e => e.regions.map(id => _jsx("path", { d: paths.current.get(id), fill: e.color, fillRule: "evenodd", opacity: e.fillOpacity * regionOpacity(e, frame) }, `${e.id}-${id}`))) }), _jsx("g", { fill: "none", strokeLinejoin: "round", children: regionEvents.map(e => e.regions.map(id => _jsx("path", { d: paths.current.get(id), stroke: e.strokeColor ?? e.color, strokeWidth: e.strokeWidth, opacity: e.strokeOpacity * regionOpacity(e, frame, false) }, `${e.id}-${id}`))) })] }), _jsxs("div", { ref: markers, style: { position: 'absolute', inset: 0, pointerEvents: 'none' }, children: [_jsx("svg", { width: "100%", height: "100%", style: { position: 'absolute', inset: 0 }, children: events.map((e) => {
                             if (e.type === 'zone')
                                 return (_jsx("polygon", { "data-geometry": JSON.stringify(e.points), fill: e.color, fillOpacity: e.opacity, stroke: e.color, strokeWidth: 1.5 }, e.id));
                             if (e.type !== 'line')

package/dist/video/prepare.d.ts

@@ -0,0 +1,4 @@
+import type { Loaded } from '../load.js';
+import type { BroadcastProps } from './Broadcast.js';
+export declare function prepareStaticAssets(publicDir: string): Promise<void>;
+export declare function prepareBroadcast(loaded: Loaded, publicDir: string, audioPrefix?: string): Promise<BroadcastProps>;

package/dist/video/prepare.js

@@ -0,0 +1,47 @@
+import { mkdir, copyFile, readFile, writeFile } from 'node:fs/promises';
+import { createRequire } from 'node:module';
+import path from 'node:path';
+import { readBundledJson } from '../assets.js';
+import { fonts } from './fonts.js';
+const require = createRequire(import.meta.url);
+// PNG, MP4 and browser playback share the same assets and composition props.
+export async function prepareStaticAssets(publicDir) {
+    await mkdir(path.join(publicDir, 'fonts', 'files'), { recursive: true });
+    for (const name of ['maplibre-gl-worker.mjs', 'maplibre-gl-shared.mjs'])
+        await copyFile(require.resolve(`maplibre-gl/dist/${name}`), path.join(publicDir, name));
+    for (const font of fonts) {
+        const fontRoot = path.dirname(require.resolve(`${font.package}/package.json`));
+        for (const weight of font.weights) {
+            const css = await readFile(path.join(fontRoot, `${weight}.css`), 'utf8');
+            await writeFile(path.join(publicDir, 'fonts', `${font.id}-${weight}.css`), css);
+            for (const match of css.matchAll(/url\(([^)]+)\)/g)) {
+                const relative = match[1].replace(/['"]/g, '');
+                await copyFile(path.join(fontRoot, relative), path.join(publicDir, 'fonts', relative));
+            }
+        }
+    }
+}
+export async function prepareBroadcast(loaded, publicDir, audioPrefix = 'audio') {
+    const audio = {};
+    for (const [id, file] of Object.entries(loaded.assetPaths)) {
+        const name = `${audioPrefix}/${id}${path.extname(file)}`;
+        await mkdir(path.join(publicDir, audioPrefix), { recursive: true });
+        await copyFile(file, path.join(publicDir, name));
+        audio[id] = name;
+    }
+    const countries = await readBundledJson('countries.geojson.gz');
+    const defaultRegions = !loaded.timeline.scenario.map.regions;
+    // The full SGIS polygons supply the Korean coastline and administrative fills.
+    if (defaultRegions)
+        countries.features = countries.features.filter((f) => f.properties?.code !== 'KOR');
+    const provinces = defaultRegions
+        ? await readBundledJson('provinces.geojson.gz')
+        : { type: 'FeatureCollection', features: [] };
+    return {
+        timeline: loaded.timeline,
+        regions: loaded.regions,
+        countries,
+        provinces,
+        audio,
+    };
+}