disaster-broadcast-studio 0.1.1 → 0.3.0

package/dist/video/Chat.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { clock, stateAt } from '../timeline.js';
+import { numberFont } from './fonts.js';
+import { changeProgress } from './transitions.js';
+export const chatHeight = 260;
+export function ChatPanel({ timeline, chat, frame, }) {
+    const progress = changeProgress(frame, chat.panel.start);
+    return (_jsxs("section", { "aria-label": chat.panel.title, style: {
+            height: chatHeight,
+            boxSizing: 'border-box',
+            flexShrink: 0,
+            display: 'flex',
+            flexDirection: 'column',
+            borderTop: '1px solid #495159',
+            background: '#0b0f12',
+            opacity: progress,
+            transform: `translateY(${12 * (1 - progress)}px)`,
+        }, children: [_jsxs("div", { style: {
+                    height: 42,
+                    flexShrink: 0,
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: 12,
+                    padding: '0 24px',
+                    borderBottom: '1px solid #293238',
+                }, children: [_jsx("span", { style: { width: 6, height: 6, borderRadius: '50%', background: '#b46e68' } }), _jsx("span", { style: { fontSize: chat.panel.title.length > 20 ? 20 : 28, fontWeight: 600 }, children: chat.panel.title }), _jsx("span", { style: { marginLeft: 'auto', fontSize: 22, color: '#b2bdc5', letterSpacing: 1 }, children: "LIVE" })] }), _jsxs("div", { style: { position: 'relative', flex: 1, minHeight: 0, overflow: 'hidden' }, children: [chat.messages.length === 0 && (_jsx("div", { style: { padding: '16px 24px', color: '#b2bdc5', fontSize: 28 }, children: "\uC544\uC9C1 \uCC44\uD305\uC774 \uC5C6\uC2B5\uB2C8\uB2E4." })), _jsx("div", { style: { position: 'absolute', bottom: 12, left: 24, right: 24 }, children: chat.messages.slice(-12).map((message) => {
+                            const arrival = changeProgress(frame, message.start, 18);
+                            return (_jsx("div", { style: { display: 'grid', gridTemplateRows: `${arrival}fr` }, children: _jsx("div", { style: { minHeight: 0, overflow: 'hidden' }, children: _jsxs("article", { style: {
+                                            paddingTop: 8,
+                                            opacity: arrival,
+                                            transform: `translateY(${8 * (1 - arrival)}px)`,
+                                        }, children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 12, marginBottom: 3 }, children: [_jsx("span", { style: { fontSize: 24, color: message.color, overflowWrap: 'anywhere' }, children: message.author }), _jsx("time", { style: { fontSize: 22, color: '#abb8c2', fontFamily: numberFont, flexShrink: 0 }, children: clock(stateAt(timeline, message.start).epoch, timeline.scenario.timezone) })] }), _jsx("div", { style: { fontSize: 28, lineHeight: 1.35, overflowWrap: 'anywhere' }, children: message.text })] }) }) }, message.id));
+                        }) })] })] }));
+}

package/dist/video/Information.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { type Timeline } from '../scenario.js';
+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,100 @@
+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, transitionAt } from './transitions.js';
+import { layout } from './layout.js';
+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) => {
+                if (!news)
+                    return null;
+                return (_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 ? -layout.footer * progress : layout.footer * (1 - progress)}px)`,
+                    }, children: [_jsxs("div", { style: { width: 280, flexShrink: 0, overflowWrap: 'anywhere' }, children: [_jsx("div", { style: { fontSize: 28, color: '#c6d0d7', fontWeight: 600, lineHeight: 1.3 }, children: timeline.scenario.agencies[news.source] }), _jsx("div", { style: {
+                                        fontSize: 26,
+                                        color: '#b0bec8',
+                                        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: 40,
+                                lineHeight: 1.3,
+                                wordBreak: 'normal',
+                                whiteSpace: 'pre-wrap',
+                                minWidth: 0,
+                                flex: 1,
+                                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: 28,
+                            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')
@@ -204,7 +220,7 @@ export function BroadcastMap({ camera, countries, regions, provinces, events, fr
                                 background: '#0b0e10f2',
                                 padding: '6px 12px',
                                 borderLeft: `3px solid ${e.color}`,
-                                fontSize: 18,
+                                fontSize: 28,
                                 color: e.color,
                                 whiteSpace: 'nowrap',
                             }, children: e.label }, e.id));
@@ -226,7 +242,7 @@ export function BroadcastMap({ camera, countries, regions, provinces, events, fr
                                         top: '50%',
                                         left: 'calc(100% + 10px)',
                                         transform: 'translateY(-50%)',
-                                        fontSize: 22,
+                                        fontSize: 32,
                                         fontWeight: 600,
                                         color: e.color,
                                         whiteSpace: 'nowrap',

package/dist/video/TimeJump.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { stateAt } from '../timeline.js';
+type Jump = ReturnType<typeof stateAt>['timeJump'];
+export declare function timeJumpStrength(jump: Jump): number;
+export declare function TimeJump({ jump }: {
+    jump: Jump;
+}): React.JSX.Element | null;
+export {};

package/dist/video/TimeJump.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { layout } from './layout.js';
+export function timeJumpStrength(jump) {
+    if (!jump)
+        return 0;
+    const ramp = Math.max(0, Math.min(1, jump.progress / 0.15, (1 - jump.progress) / 0.25));
+    return ramp * ramp * (3 - 2 * ramp);
+}
+// All motion comes from the requested frame, including direct seeks and stills.
+export function TimeJump({ jump }) {
+    if (!jump)
+        return null;
+    const strength = timeJumpStrength(jump);
+    return (_jsxs(_Fragment, { children: [_jsx("svg", { width: 0, height: 0, "aria-hidden": "true", style: { position: 'absolute' }, children: _jsx("defs", { children: _jsx("filter", { id: "dbs-time-jump", x: "-5%", y: "-5%", width: "110%", height: "110%", children: _jsx("feGaussianBlur", { stdDeviation: `${5 * strength} ${0.3 * strength}` }) }) }) }), _jsxs("div", { "aria-hidden": "true", style: {
+                    position: 'absolute',
+                    inset: `${layout.header + 1}px 0 0`,
+                    overflow: 'hidden',
+                    pointerEvents: 'none',
+                    opacity: strength,
+                }, children: [_jsx("div", { style: {
+                            position: 'absolute',
+                            inset: 0,
+                            opacity: 0.22,
+                            background: 'repeating-linear-gradient(to bottom, transparent 0px, transparent 3px, #c6d6df55 3px, #c6d6df55 4px, #0005 4px, #0005 6px)',
+                            backgroundPositionY: (jump.elapsedFrames * 1.4) % 6,
+                        } }), [0, 60].map((offset) => (_jsx("div", { style: {
+                            position: 'absolute',
+                            left: 0,
+                            right: 0,
+                            top: `${((jump.elapsedFrames * 2.8 + offset) % 120) - 10}%`,
+                            height: '5%',
+                            background: 'linear-gradient(to bottom, transparent, #dce8ed20 45%, #dce8ed66 50%, #0005 54%, transparent)',
+                        } }, offset)))] }), _jsx("svg", { viewBox: "0 0 240 140", width: 240, height: 140, "aria-hidden": "true", style: {
+                    position: 'absolute',
+                    left: '50%',
+                    top: '50%',
+                    transform: 'translate(-50%, -50%)',
+                    pointerEvents: 'none',
+                    opacity: strength * 0.27,
+                    filter: 'blur(2.5px)',
+                }, children: _jsx("path", { d: "M20 20 L104 70 L20 120 Z M122 20 L206 70 L122 120 Z", fill: "#e0e8ed" }) })] }));
+}

package/dist/video/layout.d.ts

@@ -0,0 +1,5 @@
+export declare const layout: {
+    readonly header: 64;
+    readonly footer: 128;
+    readonly sidebar: 768;
+};

package/dist/video/layout.js

@@ -0,0 +1,2 @@
+// Composition pixels. At 854px landscape width, 40px text is approximately 18px.
+export const layout = { header: 64, footer: 128, sidebar: 768 };

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,
+    };
+}