disaster-broadcast-studio 0.1.1 → 0.3.0

package/dist/timeline.d.ts

@@ -1,6 +1,36 @@
 import { type Timeline, type Camera, type CompiledEvent } from './scenario.js';
 export declare const active: (e: CompiledEvent, frame: number) => boolean;
+export declare function chatAt(t: Timeline, frame: number): {
+    panel: {
+        type: "chat";
+        title: string;
+        duration: number;
+        carry: boolean;
+        id: string;
+        cut: string;
+        at: number;
+    } & {
+        start: number;
+        end: number;
+        order: number;
+    };
+    messages: ({
+        type: "chat-message";
+        chat: string;
+        author: string;
+        text: string;
+        color: string;
+        id: string;
+        cut: string;
+        at: number;
+    } & {
+        start: number;
+        end: number;
+        order: number;
+    })[];
+} | null;
 export declare const mix: (a: number, b: number, t: number) => number;
+export declare function notificationPulse(frame: number, start: number, end: number): number;
 export declare function cameraAt(t: Timeline, frame: number): Camera;
 export declare function receiptHighlights(t: Timeline, frame: number): Extract<CompiledEvent, {
     type: 'region';
@@ -8,11 +38,6 @@ export declare function receiptHighlights(t: Timeline, frame: number): Extract<C
 export declare function regionOpacity(e: Extract<CompiledEvent, {
     type: 'region';
 }>, frame: number, fill?: boolean): number;
-export declare function statusEntry(frame: number, start: number, duration?: number): {
-    opacity: number;
-    offset: number;
-    glow: number;
-};
 export declare function shutdownAt(events: CompiledEvent[], frame: number): {
     y: number;
     x: number;
@@ -26,6 +51,10 @@ export declare function stateAt(t: Timeline, frame: number): {
     displayEpoch: number;
     jumping: boolean;
     clockPhase: string | null;
+    timeJump: {
+        progress: number;
+        elapsedFrames: number;
+    } | null;
     contentFrame: number;
     camera: {
         center: [number, number];
@@ -34,9 +63,43 @@ export declare function stateAt(t: Timeline, frame: number): {
         pitch: number;
     };
     alerts: CompiledEvent[];
+    chat: {
+        panel: {
+            type: "chat";
+            title: string;
+            duration: number;
+            carry: boolean;
+            id: string;
+            cut: string;
+            at: number;
+        } & {
+            start: number;
+            end: number;
+            order: number;
+        };
+        messages: ({
+            type: "chat-message";
+            chat: string;
+            author: string;
+            text: string;
+            color: string;
+            id: string;
+            cut: string;
+            at: number;
+        } & {
+            start: number;
+            end: number;
+            order: number;
+        })[];
+    } | null;
     visible: CompiledEvent[];
     news: ({
         type: "news";
+        sound: false | "default" | {
+            asset: string;
+            duration: number;
+            volume: number;
+        };
         source: string;
         headline: string;
         duration: number;

package/dist/timeline.js

@@ -1,6 +1,19 @@
 import { FPS } from './scenario.js';
 export const active = (e, frame) => e.start <= frame && frame < e.end;
+export function chatAt(t, frame) {
+    const panel = t.events.find((e) => e.type === 'chat' && active(e, frame));
+    if (!panel || panel.type !== 'chat')
+        return null;
+    const messages = t.events.filter((e) => e.type === 'chat-message' && e.chat === panel.id && e.start <= frame);
+    return { panel, messages };
+}
 export const mix = (a, b, t) => a + (b - a) * t;
+// Three smooth pulses, bounded by the authored frame interval.
+export function notificationPulse(frame, start, end) {
+    if (frame < start || frame >= end)
+        return 0;
+    return Math.sin(((frame - start) / (end - start)) * Math.PI * 3) ** 2;
+}
 export function cameraAt(t, frame) {
     let cam = { ...t.scenario.map.camera };
     for (const e of t.events) {
@@ -21,7 +34,8 @@ export function receiptHighlights(t, frame) {
     return t.events.flatMap((e) => {
         if (e.type !== 'alert' || !e.mapHighlight || !e.regions.length)
             return [];
-        const end = Math.min(t.durationInFrames, e.start + Math.round(e.mapHighlight.duration * FPS));
+        const highlightEnd = e.start + Math.round(e.mapHighlight.duration * FPS);
+        const end = Math.min(t.durationInFrames, highlightEnd);
         if (frame < e.start || frame >= end)
             return [];
         return [
@@ -37,13 +51,13 @@ export function receiptHighlights(t, frame) {
                 order: e.order,
                 regions: e.regions,
                 color: e.mapHighlight.color,
-                fillOpacity: 0.28,
+                fillOpacity: 0.28 * notificationPulse(frame, e.start, highlightEnd),
                 strokeColor: e.mapHighlight.color,
                 strokeOpacity: 0,
                 strokeWidth: 0,
                 pulse: false,
-                fadeIn: Math.min(0.2, e.mapHighlight.duration * 0.2),
-                fadeOut: Math.min(0.7, e.mapHighlight.duration * 0.4),
+                fadeIn: Math.min(0.1, e.mapHighlight.duration / 12),
+                fadeOut: Math.min(0.1, e.mapHighlight.duration / 12),
             },
         ];
     });
@@ -52,10 +66,6 @@ export function regionOpacity(e, frame, fill = true) {
     const fade = envelope(frame, e.start, e.end, e.fadeIn, e.fadeOut);
     return (fade * (fill && e.pulse ? 0.88 + 0.12 * Math.cos(((frame - e.start) / FPS) * Math.PI * 0.9) : 1));
 }
-export function statusEntry(frame, start, duration = 0.55) {
-    const p = Math.max(0, Math.min(1, (frame - start) / (duration * FPS)));
-    return { opacity: 0.4 + 0.6 * p, offset: (1 - p) * -5, glow: (1 - p) * 0.22 };
-}
 export function shutdownAt(events, frame) {
     const e = events.find((e) => e.type === 'screen' && e.effect === 'shutdown' && e.intensity > 0 && active(e, frame));
     if (!e)
@@ -76,12 +86,15 @@ export function stateAt(t, frame) {
     const jumping = index > 0 && transition > 0 && frame < cut.start + transition;
     const contentFrame = jumping ? cut.start - 1 : frame;
     const previous = index > 0 ? t.cuts[index - 1] : null;
+    const previousEnd = previous
+        ? previous.epoch + ((previous.end - previous.start) * 1000) / FPS
+        : cut.epoch;
     const epoch = cut.epoch + ((frame - cut.start) * 1000) / FPS;
     const p = jumping ? (frame - cut.start) / transition : 1;
     const clockPhase = jumping ? (p < 0.15 ? 'lead' : p < 0.75 ? 'run' : 'hold') : null;
     const roll = Math.max(0, Math.min(1, (p - 0.15) / 0.6));
     const displayEpoch = jumping
-        ? mix(previous.epoch + ((previous.end - previous.start) * 1000) / FPS, cut.epoch + (transition * 1000) / FPS, roll)
+        ? mix(previousEnd, cut.epoch + (transition * 1000) / FPS, roll)
         : epoch;
     const visible = t.events.filter((e) => active(e, contentFrame));
     return {
@@ -91,9 +104,16 @@ export function stateAt(t, frame) {
         displayEpoch,
         jumping,
         clockPhase,
+        timeJump: jumping && cut.epoch > previousEnd
+            ? {
+                progress: (frame - cut.start) / Math.max(1, transition - 1),
+                elapsedFrames: frame - cut.start,
+            }
+            : null,
         contentFrame,
         camera: cameraAt(t, contentFrame),
         alerts: t.events.filter((e) => e.type === 'alert' && e.start <= contentFrame).reverse(),
+        chat: chatAt(t, contentFrame),
         visible,
         news: visible.find((e) => e.type === 'news'),
         opacity: Math.min(1, cut.fadeIn ? (frame - cut.start) / FPS / cut.fadeIn : 1, cut.fadeOut ? (cut.end - 1 - frame) / FPS / cut.fadeOut : 1),

package/dist/video/Alerts.js

@@ -1,62 +1,62 @@
-import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-import { FPS, pages, alertText } from '../scenario.js';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { alertText } from '../scenario.js';
 import { stateAt, clock } from '../timeline.js';
 import { numberFont } from './fonts.js';
+import { changeProgress } 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 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',
-                            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)] }))] }));
+    return (_jsx("div", { style: { display: 'grid', gridTemplateRows: `${arrival}fr` }, children: _jsx("div", { style: { minHeight: 0, overflow: 'hidden' }, children: _jsxs("article", { style: {
+                    padding: '16px 24px',
+                    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: 28,
+                            color: colors[event.level],
+                            marginBottom: 10,
+                        }, children: [_jsx("b", { style: {
+                                    border: `1px solid ${colors[event.level]}`,
+                                    padding: '2px 7px',
+                                    fontWeight: 400,
+                                }, children: event.level }), _jsxs("span", { style: {
+                                    marginLeft: 'auto',
+                                    fontFamily: numberFont,
+                                    fontVariantNumeric: 'tabular-nums',
+                                    fontSize: 26,
+                                    color: '#aab3b9',
+                                }, children: ["\uC218\uC2E0 ", clock(received, timeline.scenario.timezone)] })] }), (event.occurredAt || event.publishedAt) && (_jsxs("div", { style: { fontSize: 26, color: '#b0bac2', marginBottom: 8 }, 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: 32 + 8 * emphasis,
+                            lineHeight: 1.4,
+                            whiteSpace: 'pre-wrap',
+                            wordBreak: 'normal',
+                            overflowWrap: 'anywhere',
+                            color: latest ? '#edf0f2' : '#c0c9d0',
+                        }, children: alertText(timeline.scenario.agencies[event.sender], event.text) })] }) }) }));
 }
 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,27 +1,31 @@
-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 { ChatPanel } from './Chat.js';
 import { BroadcastMap } from './Map.js';
 import { SignalEffects, signalLevels } from './SignalEffects.js';
 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';
+import { layout } from './layout.js';
+import { TimeJump, timeJumpStrength } from './TimeJump.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);
+    const jumpStrength = timeJumpStrength(state.timeJump);
     return (_jsxs(AbsoluteFill, { style: {
             filter: signal.chromatic > 0 ? 'url(#dbs-chromatic)' : undefined,
             background: shutdown ? '#000' : '#080b0d',
@@ -34,30 +38,17 @@ export function Broadcast(props) {
                 }, children: [_jsxs("header", { style: {
                             position: 'absolute',
                             inset: '0 0 auto 0',
-                            height: 48,
+                            height: layout.header,
                             display: 'flex',
                             alignItems: 'center',
                             padding: '0 26px',
                             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',
-                                    fontSize: 23,
+                                    flexShrink: 0,
+                                    fontSize: 32,
                                     fontFamily: numberFont,
                                     fontVariantNumeric: 'tabular-nums',
                                     color: state.jumping ? '#eef2f4' : '#bdc7ce',
@@ -68,81 +59,76 @@ export function Broadcast(props) {
                                     padding: '2px 8px',
                                     fontWeight: state.jumping ? 600 : 400,
                                     letterSpacing: 0.5,
-                                }, children: clock(state.displayEpoch, timeline.scenario.timezone, true) })] }), _jsxs("main", { style: {
-                            position: 'absolute',
-                            left: 0,
-                            top: 49,
-                            right: 640,
-                            bottom: 93,
-                        }, children: [_jsx(BroadcastMap, { camera: state.camera, countries: countries, regions: regions, provinces: provinces, events: mapEvents, frame: state.contentFrame }), legend?.type === 'legend' && (_jsx("div", { style: {
+                                }, children: clock(state.displayEpoch, timeline.scenario.timezone, true) })] }), _jsxs(AbsoluteFill, { style: {
+                            filter: jumpStrength > 0
+                                ? `url(#dbs-time-jump) saturate(${1 - jumpStrength * 0.35})`
+                                : undefined,
+                        }, children: [_jsxs("main", { style: {
+                                    position: 'absolute',
+                                    left: 0,
+                                    top: layout.header + 1,
+                                    right: layout.sidebar,
+                                    bottom: layout.footer + 1,
+                                }, children: [_jsx(BroadcastMap, { camera: state.camera, countries: countries, regions: regions, provinces: provinces, events: mapEvents, frame: state.contentFrame }), legend?.type === 'legend' && (_jsx("div", { style: {
+                                            position: 'absolute',
+                                            left: 24,
+                                            bottom: 24,
+                                            display: 'flex',
+                                            flexDirection: 'column',
+                                            gap: 10,
+                                            background: '#0b0e10ed',
+                                            padding: '14px 18px',
+                                            fontSize: 30,
+                                            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,
+                                                        background: item.symbol === 'fill' ? item.color : 'transparent',
+                                                        border: item.symbol === 'fill' ? 'none' : `2px solid ${item.color}`,
+                                                    } }), _jsx("span", { children: item.text })] }, i))) })), inset?.type === 'inset' && (_jsxs("div", { style: {
+                                            position: 'absolute',
+                                            right: 20,
+                                            bottom: 20,
+                                            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,
+                                                    left: 0,
+                                                    right: 0,
+                                                    padding: '7px 12px',
+                                                    background: '#0b0e10f2',
+                                                    borderBottom: '1px solid #485159',
+                                                    fontSize: 28,
+                                                }, children: inset.title })] }))] }), _jsxs("aside", { style: {
                                     position: 'absolute',
-                                    left: 24,
-                                    bottom: 24,
+                                    top: layout.header + 1,
+                                    right: 0,
+                                    bottom: layout.footer + 1,
+                                    width: layout.sidebar,
+                                    borderLeft: '1px solid #495159',
+                                    background: '#0c1012',
+                                    overflow: 'hidden',
                                     display: 'flex',
                                     flexDirection: 'column',
-                                    gap: 10,
-                                    background: '#0b0e10ed',
-                                    padding: '14px 18px',
-                                    fontSize: 21,
-                                    color: '#d0d5da',
-                                }, 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,
-                                                background: item.symbol === 'fill' ? item.color : 'transparent',
-                                                border: item.symbol === 'fill' ? 'none' : `2px solid ${item.color}`,
-                                            } }), _jsx("span", { children: item.text })] }, i))) })), inset?.type === 'inset' && (_jsxs("div", { style: {
+                                }, children: [_jsx("div", { style: { flex: 1, minHeight: 0, overflow: 'hidden' }, children: _jsx(AlertHistory, { timeline: timeline, frame: state.contentFrame }) }), state.chat && _jsx(ChatPanel, { timeline: timeline, chat: state.chat, frame: state.contentFrame })] }), [bulletins.previous, bulletins.current].map((bulletin, i) => bulletin && (_jsx(Bulletin, { event: bulletin, source: timeline.scenario.agencies[bulletin.source], progress: i === 0 ? 1 - bulletins.progress : bulletins.progress }, bulletin.id))), _jsx("footer", { style: {
                                     position: 'absolute',
-                                    right: 20,
-                                    bottom: 20,
-                                    width: 420,
-                                    height: 290,
-                                    border: '1px solid #78858e',
-                                }, 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,
-                                            left: 0,
-                                            right: 0,
-                                            padding: '7px 12px',
-                                            background: '#0b0e10f2',
-                                            borderBottom: '1px solid #485159',
-                                            fontSize: 17,
-                                        }, children: inset.title })] }))] }), _jsx("aside", { style: {
-                            position: 'absolute',
-                            top: 49,
-                            right: 0,
-                            bottom: 93,
-                            width: 640,
-                            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: {
-                            position: 'absolute',
-                            bottom: 0,
-                            left: 0,
-                            right: 0,
-                            height: 92,
-                            borderTop: '1px solid #606a72',
-                            display: 'flex',
-                            alignItems: 'center',
-                            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
+                                    bottom: 0,
+                                    left: 0,
+                                    right: 0,
+                                    height: layout.footer,
+                                    borderTop: '1px solid #606a72',
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                    background: '#0b0e10',
+                                    padding: '0 26px',
+                                    gap: 24,
+                                }, children: _jsx(News, { timeline: timeline, frame: state.contentFrame }) })] }), _jsx(TimeJump, { jump: state.timeJump })] }), state.visible
                 .filter((e) => e.type === 'screen' && ['blackout', 'flash', 'interference'].includes(e.effect))
                 .map((event) => {
                 if (event.type !== 'screen')
@@ -173,14 +159,14 @@ export function Broadcast(props) {
                     alignItems: 'center',
                     opacity: frame < openingFrames - 30 ? 1 : (openingFrames - frame) / 30,
                 }, children: [_jsx("div", { style: {
-                            fontSize: timeline.scenario.title.length > 40 ? 30 : 36,
+                            fontSize: 54,
                             fontWeight: 600,
                             maxWidth: 1440,
                             textAlign: 'center',
                             overflowWrap: 'anywhere',
                             lineHeight: 1.5,
                         }, children: timeline.scenario.title }), _jsx("div", { style: {
-                            fontSize: 24,
+                            fontSize: 36,
                             color: '#bac3c9',
                             marginTop: 22,
                             maxWidth: 1200,

package/dist/video/Bulletin.d.ts

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

package/dist/video/Bulletin.js

@@ -1,35 +1,30 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { FPS, pages } from '../scenario.js';
-import { numberFont } from './fonts.js';
-export function Bulletin({ event, source, frame, }) {
-    const chunks = pages(event.text);
-    const page = Math.floor((frame - event.start) / FPS / event.pageSeconds) % chunks.length;
+import { layout } from './layout.js';
+export function Bulletin({ event, source, progress = 1, }) {
     return (_jsxs("section", { style: {
             position: 'absolute',
-            top: 49,
-            bottom: 93,
+            top: layout.header + 1,
+            bottom: layout.footer + 1,
             left: 0,
             right: 0,
             background: '#0a0d0f',
+            opacity: progress,
+            transform: `translateY(${16 * (1 - progress)}px)`,
             display: 'flex',
             flexDirection: 'column',
             justifyContent: 'center',
             padding: '50px 190px',
-        }, children: [_jsx("div", { style: { fontSize: 23, color: '#9ba5ac', marginBottom: 32 }, children: source }), _jsx("h2", { style: {
-                    fontSize: 46,
+        }, children: [_jsx("div", { style: { fontSize: 32, color: '#b8c3cb', marginBottom: 24 }, children: source }), _jsx("h2", { style: {
+                    fontSize: 54,
                     fontWeight: 600,
                     color: event.color,
                     margin: '0 0 32px',
                     lineHeight: 1.5,
                 }, children: event.heading }), _jsx("div", { style: {
-                    fontSize: 34,
-                    lineHeight: 1.9,
+                    fontSize: 44,
+                    lineHeight: 1.6,
                     whiteSpace: 'pre-wrap',
-                    wordBreak: 'keep-all',
-                }, children: chunks[page] }), chunks.length > 1 && (_jsxs("div", { style: {
-                    fontSize: 18,
-                    marginTop: 30,
-                    color: '#8c969d',
-                    fontFamily: numberFont,
-                }, children: [page + 1, " / ", chunks.length] }))] }));
+                    wordBreak: 'normal',
+                    overflowWrap: 'anywhere',
+                }, children: event.text })] }));
 }

package/dist/video/Chat.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { Timeline } from '../scenario.js';
+import { stateAt } from '../timeline.js';
+export declare const chatHeight = 260;
+export declare function ChatPanel({ timeline, chat, frame, }: {
+    timeline: Timeline;
+    chat: NonNullable<ReturnType<typeof stateAt>['chat']>;
+    frame: number;
+}): React.JSX.Element;