disaster-broadcast-studio 0.2.0 → 0.3.0

package/dist/video/Broadcast.js

@@ -3,6 +3,7 @@ import { AbsoluteFill, useCurrentFrame } from 'remotion';
 import { FPS } from '../scenario.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';
@@ -11,6 +12,8 @@ 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;
@@ -22,6 +25,7 @@ export function Broadcast(props) {
     const signal = signalLevels(state.visible, frame);
     const mapEvents = [...state.visible, ...receiptHighlights(timeline, state.contentFrame)];
     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,7 +38,7 @@ 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',
@@ -44,7 +48,7 @@ export function Broadcast(props) {
                         }, children: [_jsx(Status, { timeline: timeline, frame: state.contentFrame }), _jsx("time", { style: {
                                     marginLeft: 'auto',
                                     flexShrink: 0,
-                                    fontSize: 23,
+                                    fontSize: 32,
                                     fontFamily: numberFont,
                                     fontVariantNumeric: 'tabular-nums',
                                     color: state.jumping ? '#eef2f4' : '#bdc7ce',
@@ -55,70 +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',
-                                    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: {
+                                }, 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',
-                                    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: 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 }) }), [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,
-                            right: 0,
-                            height: 92,
-                            borderTop: '1px solid #606a72',
-                            display: 'flex',
-                            alignItems: 'center',
-                            background: '#0b0e10',
-                            padding: '0 26px',
-                            gap: 24,
-                        }, children: _jsx(News, { timeline: timeline, frame: state.contentFrame }) })] }), 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')
@@ -149,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,10 +1,9 @@
 import React from 'react';
 import type { CompiledEvent } from '../scenario.js';
-export declare function Bulletin({ event, source, frame, progress, }: {
+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,15 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { pages } from '../scenario.js';
-import { numberFont } from './fonts.js';
-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 } = pageAt(frame, event.start, 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',
@@ -19,21 +14,17 @@ export function Bulletin({ event, source, frame, progress = 1, }) {
             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: _jsx(PagedText, { chunks: chunks, frame: frame, start: event.start, seconds: event.pageSeconds }) }), 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;

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

@@ -1,11 +1,5 @@
 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;

package/dist/video/Information.js

@@ -2,19 +2,8 @@ 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] })] }));
-}
+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: {
@@ -22,28 +11,35 @@ export function News({ timeline, frame }) {
             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: {
+        }, 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,
@@ -81,7 +77,7 @@ export function Status({ timeline, frame }) {
                             border: `1px solid ${badge.color}`,
                             color: badge.color,
                             padding: '3px 10px',
-                            fontSize: 18,
+                            fontSize: 28,
                             lineHeight: 1.3,
                             whiteSpace: 'nowrap',
                             background: `${badge.color}${Math.round((layer === 1 && changed

package/dist/video/Map.js

@@ -220,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));
@@ -242,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/transitions.d.ts

@@ -17,11 +17,9 @@ export declare function transitionAt<T extends CompiledEvent['type']>(events: Co
             duration: number;
             volume: number;
         };
-        pageSeconds: number;
         id: string;
         cut: string;
         at: number;
-        corrects?: string | undefined;
         occurredAt?: string | undefined;
         publishedAt?: string | undefined;
     } & {
@@ -84,7 +82,6 @@ export declare function transitionAt<T extends CompiledEvent['type']>(events: Co
         heading: string;
         text: string;
         color: string;
-        pageSeconds: number;
         duration: number;
         carry: boolean;
         id: string;
@@ -96,6 +93,35 @@ export declare function transitionAt<T extends CompiledEvent['type']>(events: Co
         order: number;
     }, {
         type: T;
+    }> | Extract<{
+        type: "chat";
+        title: string;
+        duration: number;
+        carry: boolean;
+        id: string;
+        cut: string;
+        at: number;
+    } & {
+        start: number;
+        end: number;
+        order: number;
+    }, {
+        type: T;
+    }> | Extract<{
+        type: "chat-message";
+        chat: string;
+        author: string;
+        text: string;
+        color: string;
+        id: string;
+        cut: string;
+        at: number;
+    } & {
+        start: number;
+        end: number;
+        order: number;
+    }, {
+        type: T;
     }> | Extract<{
         type: "zone";
         points: [number, number][];
@@ -292,11 +318,9 @@ export declare function transitionAt<T extends CompiledEvent['type']>(events: Co
             duration: number;
             volume: number;
         };
-        pageSeconds: number;
         id: string;
         cut: string;
         at: number;
-        corrects?: string | undefined;
         occurredAt?: string | undefined;
         publishedAt?: string | undefined;
     } & {
@@ -359,7 +383,6 @@ export declare function transitionAt<T extends CompiledEvent['type']>(events: Co
         heading: string;
         text: string;
         color: string;
-        pageSeconds: number;
         duration: number;
         carry: boolean;
         id: string;
@@ -371,6 +394,35 @@ export declare function transitionAt<T extends CompiledEvent['type']>(events: Co
         order: number;
     }, {
         type: T;
+    }> | Extract<{
+        type: "chat";
+        title: string;
+        duration: number;
+        carry: boolean;
+        id: string;
+        cut: string;
+        at: number;
+    } & {
+        start: number;
+        end: number;
+        order: number;
+    }, {
+        type: T;
+    }> | Extract<{
+        type: "chat-message";
+        chat: string;
+        author: string;
+        text: string;
+        color: string;
+        id: string;
+        cut: string;
+        at: number;
+    } & {
+        start: number;
+        end: number;
+        order: number;
+    }, {
+        type: T;
     }> | Extract<{
         type: "zone";
         points: [number, number][];
@@ -555,8 +607,3 @@ export declare function transitionAt<T extends CompiledEvent['type']>(events: Co
     progress: number;
     start: number;
 };
-export declare function pageAt(frame: number, start: number, seconds: number, count: number): {
-    page: number;
-    previous: number | undefined;
-    progress: number;
-};

package/dist/video/transitions.js

@@ -20,12 +20,3 @@ export function transitionAt(events, type, frame) {
         start,
     };
 }
-export function pageAt(frame, start, seconds, count) {
-    const frames = Math.round(seconds * FPS);
-    const turn = Math.floor(Math.max(0, frame - start) / frames);
-    return {
-        page: turn % count,
-        previous: turn > 0 && count > 1 ? (turn - 1) % count : undefined,
-        progress: turn > 0 && count > 1 ? changeProgress(frame, start + turn * frames) : 1,
-    };
-}

package/dist/video/useBundledFonts.js

@@ -21,7 +21,7 @@ export function useBundledFonts(text) {
         })))
             .then(() => Promise.all(fonts.flatMap((font) => font.weights.map((weight) => document.fonts.load(`${weight} 28px "${font.family}"`, font.id === 'mono'
             ? '0123456789:.- /+'
-            : text + ' 재난문자 수신 이력 발생 발표 이전 정정 안전안내 긴급재난 위급재난')))))
+            : text + ' 재난문자 수신 이력 발생 발표 안전안내 긴급재난 위급재난')))))
             .then(() => document.fonts.ready)
             .then(() => { if (!cancelled) {
             continueRender(fontHandle);