@fifthbell/brokaw 0.1.48 → 0.1.50

package/dist/components/live-program/LiveProgram.d.ts

@@ -3,6 +3,7 @@ interface LiveProgramProps {
     embedded?: boolean;
     sceneMetadata?: Record<string, unknown> | null;
     activeComponents?: string[];
+    apiBaseUrl?: string;
 }
-export default function LiveProgram({ programId, embedded, sceneMetadata, activeComponents }: LiveProgramProps): import("react/jsx-runtime").JSX.Element;
+export default function LiveProgram({ embedded, sceneMetadata, activeComponents, apiBaseUrl }: LiveProgramProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/live-program/LiveProgram.js

@@ -1,26 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { BellRing } from 'lucide-react';
 import { useSSE } from './hooks/useSSE.js';
-// Hardcoded API Base URL for Fifthbell
-function getApiBaseUrl() {
-    if (typeof window === 'undefined')
-        return 'http://127.0.0.1:3000';
-    // Use the current host to dynamically target however they're accessing it
-    const hostname = window.location.hostname;
-    return `http://${hostname.includes(':') ? `[${hostname}]` : hostname}:3000`;
-}
-function apiUrl(path) {
-    const normalizedPath = path.startsWith('/') ? path : `/${path}`;
-    return `${getApiBaseUrl()}${normalizedPath}`;
-}
 import { FIFTHBELL_ASSETS } from './assets.js';
 import { MarqueeCurtain } from './components/MarqueeCurtain.js';
 import Marquee from './components/Marquee.js';
-import { DEFAULT_WORLD_CLOCK_CITIES } from './components/WorldClocks.js';
+import { WorldClocks, DEFAULT_WORLD_CLOCK_CITIES } from './components/WorldClocks.js';
 import { CallsignSlide } from './components/slides/CallsignSlide.js';
 import { slideStyles } from './components/slides/slideStyles.js';
 import { fetchEvents, getCachedEvents, hasEventChanges } from './events.js';
-import { createArticlesSegment, createEarthquakeSegment, createMarketsSegment, createWeatherSegment, fetchArticles, fetchEarthquakes, fetchMarketData, fetchWeatherData, usePlaylistEngine } from './segments/index.js';
+import { createArticlesSegment, createEarthquakeSegment, createLiveEventSegment, createMarketsSegment, createWeatherSegment, fetchArticles, fetchEarthquakes, fetchLiveEvent, fetchMarketData, fetchWeatherData, usePlaylistEngine } from './segments/index.js';
 const DEFAULT_LANGUAGE_ROTATION = ['en', 'es', 'en', 'it'];
 const DEFAULT_CALLSIGN_PRELAUNCH_UNTIL_NYC = '2026-01-02T21:30:00';
 const FIFTHBELL_COMPONENT_TYPE_CONTENT = 'fifthbell-content';
@@ -33,6 +22,7 @@ const DEFAULT_FIFTHBELL_CONFIG = {
     showWeather: true,
     showEarthquakes: true,
     showMarkets: true,
+    showLiveEvents: true,
     showMarquee: false,
     showCallsignTake: true,
     weatherCities: [],
@@ -203,6 +193,7 @@ function extractConfigFromMetadata(metadataInput) {
         showWeather: normalizeBoolean(contentProps.showWeather, DEFAULT_FIFTHBELL_CONFIG.showWeather),
         showEarthquakes: normalizeBoolean(contentProps.showEarthquakes, DEFAULT_FIFTHBELL_CONFIG.showEarthquakes),
         showMarkets: normalizeBoolean(contentProps.showMarkets, DEFAULT_FIFTHBELL_CONFIG.showMarkets),
+        showLiveEvents: normalizeBoolean(contentProps.showLiveEvents, DEFAULT_FIFTHBELL_CONFIG.showLiveEvents),
         showMarquee: normalizeBoolean(marqueeProps.showMarquee, DEFAULT_FIFTHBELL_CONFIG.showMarquee),
         showCallsignTake: normalizeBoolean(contentProps.showCallsignTake, DEFAULT_FIFTHBELL_CONFIG.showCallsignTake),
         weatherCities: normalizeStringArray(contentProps.weatherCities),
@@ -244,8 +235,7 @@ function normalizeLaunchDate(rawDate) {
     }
     return parsed;
 }
-export default function LiveProgram({ programId = 'fifthbell', embedded = false, sceneMetadata, activeComponents }) {
-    const encodedProgramId = encodeURIComponent(programId);
+export default function LiveProgram({ embedded = false, sceneMetadata, activeComponents, apiBaseUrl }) {
     const [state, setState] = useState(null);
     const [showLogoSlide, setShowLogoSlide] = useState(false);
     const [callsignTime, setCallsignTime] = useState(new Date());
@@ -256,6 +246,7 @@ export default function LiveProgram({ programId = 'fifthbell', embedded = false,
     const [weatherData, setWeatherData] = useState([]);
     const [earthquakes, setEarthquakes] = useState([]);
     const [markets, setMarkets] = useState([]);
+    const [liveEvent, setLiveEvent] = useState(null);
     const [stageEvents, setStageEvents] = useState([]);
     const [programEvents, setProgramEvents] = useState([]);
     const [showCurtain, setShowCurtain] = useState(false);
@@ -263,6 +254,11 @@ export default function LiveProgram({ programId = 'fifthbell', embedded = false,
     const updatePendingRef = useRef(false);
     const [dataLoaded, setDataLoaded] = useState(false);
     const lastFetchedItemRef = useRef(-1);
+    const activeInstantAudioRef = useRef(null);
+    const activeInstantAudiosRef = useRef(new Set());
+    const sceneInstantTakeSequenceRef = useRef(0);
+    const mixerSettingsRef = useRef({});
+    const songAudioRef = useRef(null);
     const controlledBySceneRenderer = sceneMetadata !== undefined;
     const effectiveSceneMetadata = useMemo(() => {
         if (sceneMetadata !== undefined) {
@@ -274,6 +270,13 @@ export default function LiveProgram({ programId = 'fifthbell', embedded = false,
     const layerAvailability = useMemo(() => resolveFifthBellLayerAvailability(activeComponents), [activeComponents]);
     const languageRotation = config.languageRotation;
     const currentLanguage = languageRotation[languageIndex] ?? languageRotation[0] ?? 'en';
+    const resolvedApiBaseUrl = apiBaseUrl?.replace(/\/+$/, '') ||
+        (() => {
+            if (typeof window === 'undefined')
+                return 'http://127.0.0.1:3000';
+            const hostname = window.location.hostname;
+            return `http://${hostname.includes(':') ? `[${hostname}]` : hostname}:3000`;
+        })();
     useEffect(() => {
         if (languageIndex >= languageRotation.length) {
             setLanguageIndex(0);
@@ -286,17 +289,18 @@ export default function LiveProgram({ programId = 'fifthbell', embedded = false,
         if (controlledBySceneRenderer) {
             return;
         }
-        fetch(apiUrl(`/program/${encodedProgramId}/state`))
+        fetch(`${resolvedApiBaseUrl}/state`)
             .then((res) => res.json())
             .then((data) => setState(data))
             .catch((err) => console.error('Failed to fetch FifthBell program state:', err));
-    }, [controlledBySceneRenderer, encodedProgramId]);
+    }, [controlledBySceneRenderer, resolvedApiBaseUrl]);
     const refreshAllData = useCallback(async () => {
-        const [articlesData, weatherDataResult, earthquakesData, marketsData] = await Promise.all([
+        const [articlesData, weatherDataResult, earthquakesData, marketsData, liveEventData] = await Promise.all([
             fetchArticles(currentLanguage),
             fetchWeatherData(),
             fetchEarthquakes(currentLanguage),
             fetchMarketData(),
+            fetchLiveEvent(currentLanguage),
             fetchEvents({
                 language: currentLanguage,
                 allowedLanguages: [currentLanguage]
@@ -306,6 +310,7 @@ export default function LiveProgram({ programId = 'fifthbell', embedded = false,
         setWeatherData(weatherDataResult);
         setEarthquakes(earthquakesData);
         setMarkets(marketsData);
+        setLiveEvent(liveEventData);
         const cachedEvents = getCachedEvents();
         if (cachedEvents) {
             setStageEvents(cachedEvents);
@@ -316,11 +321,58 @@ export default function LiveProgram({ programId = 'fifthbell', embedded = false,
     useEffect(() => {
         void refreshAllData();
     }, [refreshAllData]);
+    const stopSceneInstantAudio = useCallback((fadeMs = 0) => {
+        const audio = activeInstantAudioRef.current;
+        if (!audio)
+            return;
+        if (fadeMs > 0) {
+            const initialVolume = audio.volume;
+            const startTime = performance.now();
+            const fadeStep = (timestamp) => {
+                const elapsed = timestamp - startTime;
+                if (elapsed >= fadeMs) {
+                    audio.volume = 0;
+                    audio.pause();
+                    try {
+                        audio.currentTime = 0;
+                    }
+                    catch { /* no-op */ }
+                    audio.onended = null;
+                    audio.onerror = null;
+                    activeInstantAudioRef.current = null;
+                    return;
+                }
+                audio.volume = Math.max(0, initialVolume * (1 - elapsed / fadeMs));
+                requestAnimationFrame(fadeStep);
+            };
+            requestAnimationFrame(fadeStep);
+            return;
+        }
+        audio.pause();
+        try {
+            audio.currentTime = 0;
+        }
+        catch { /* no-op */ }
+        audio.onended = null;
+        audio.onerror = null;
+        activeInstantAudioRef.current = null;
+    }, []);
     useSSE({
-        url: apiUrl(`/program/${encodedProgramId}/events`),
+        url: `${resolvedApiBaseUrl}/events`,
         enabled: !controlledBySceneRenderer,
         onMessage: (data) => {
-            if ((data.type === 'scene_change' || data.type === 'program_scenes_changed') && data.state) {
+            if (data.type === 'scene_staged') {
+                setState((prev) => {
+                    if (!prev)
+                        return prev;
+                    return {
+                        ...prev,
+                        stagedSceneId: typeof data.stagedSceneId === 'number' && Number.isFinite(data.stagedSceneId) ? data.stagedSceneId : null,
+                        stagedScene: data.scene && typeof data.scene === 'object' ? data.scene : null,
+                    };
+                });
+            }
+            else if ((data.type === 'scene_change' || data.type === 'program_scenes_changed') && data.state) {
                 setState(data.state);
             }
             else if (data.type === 'scene_update') {
@@ -344,17 +396,183 @@ export default function LiveProgram({ programId = 'fifthbell', embedded = false,
                     };
                 });
             }
+            else if (data.type === 'broadcast_settings_update') {
+                // broadcast settings stored for overlay display
+            }
+            else if (data.type === 'scene_instant_take' && data.instant?.audioUrl) {
+                console.log('[scene_instant_take]', data.instant.name, data.instant.audioUrl);
+                sceneInstantTakeSequenceRef.current += 1;
+                const takeSequence = sceneInstantTakeSequenceRef.current;
+                const ms = (mixerSettingsRef.current || {});
+                const masterVol = ms.sceneInstantMasterVolume ?? 1;
+                const muted = ms.sceneInstantMuted === true;
+                const baseVol = typeof data.instant.volume === 'number' ? Math.max(0, Math.min(1, data.instant.volume)) : 1;
+                const finalVol = muted ? 0 : Math.max(0, Math.min(1, baseVol * masterVol));
+                const playAudio = () => {
+                    const audio = new Audio(data.instant.audioUrl);
+                    audio.preload = 'auto';
+                    audio.loop = data.loop !== false;
+                    audio.volume = finalVol;
+                    audio.onended = () => { activeInstantAudioRef.current = null; };
+                    audio.onerror = () => { console.error('[scene_instant] audio error'); activeInstantAudioRef.current = null; };
+                    activeInstantAudioRef.current = audio;
+                    audio.play().catch((err) => { console.error('[scene_instant] play failed:', err); activeInstantAudioRef.current = null; });
+                };
+                const currentlyPlaying = activeInstantAudioRef.current;
+                if (currentlyPlaying && !currentlyPlaying.paused && !currentlyPlaying.ended) {
+                    const switchFadeMs = 1500;
+                    stopSceneInstantAudio(switchFadeMs);
+                    window.setTimeout(() => {
+                        if (sceneInstantTakeSequenceRef.current !== takeSequence)
+                            return;
+                        playAudio();
+                    }, switchFadeMs);
+                    return;
+                }
+                stopSceneInstantAudio();
+                playAudio();
+            }
+            else if (data.type === 'scene_instant_stop') {
+                stopSceneInstantAudio(data.fadeMs || 0);
+            }
+            else if (data.type === 'scene_instant_state') {
+                console.log('[scene_instant_state]', data.playback?.isPlaying ? 'playing' : 'stopped');
+                const playback = data.playback;
+                if (playback?.isPlaying && playback?.instant?.audioUrl) {
+                    const currentlyPlaying = activeInstantAudioRef.current;
+                    if (currentlyPlaying && !currentlyPlaying.paused && !currentlyPlaying.ended) {
+                        return;
+                    }
+                    stopSceneInstantAudio(1500);
+                    window.setTimeout(() => {
+                        const audio = new Audio(playback.instant.audioUrl);
+                        audio.preload = 'auto';
+                        audio.loop = true;
+                        audio.volume = typeof playback.instant.volume === 'number' ? Math.max(0, Math.min(1, playback.instant.volume)) : 1;
+                        audio.onended = () => { activeInstantAudioRef.current = null; };
+                        audio.onerror = () => { console.error('[scene_instant] audio error'); activeInstantAudioRef.current = null; };
+                        activeInstantAudioRef.current = audio;
+                        audio.play().catch((err) => { console.error('[scene_instant] play failed:', err); activeInstantAudioRef.current = null; });
+                    }, 1500);
+                }
+                else {
+                    stopSceneInstantAudio();
+                }
+            }
+            else if (data.type === 'instant_play' && data.instant?.audioUrl) {
+                console.log('[instant_play]', data.instant.name, data.instant.audioUrl);
+                const ms = (mixerSettingsRef.current || {});
+                const masterVol = ms.instantMasterVolume ?? 1;
+                const muted = ms.instantMuted === true;
+                const baseVol = typeof data.instant.volume === 'number' ? Math.max(0, Math.min(1, data.instant.volume)) : 1;
+                const finalVol = muted ? 0 : Math.max(0, Math.min(1, baseVol * masterVol));
+                const audio = new Audio(data.instant.audioUrl);
+                audio.preload = 'auto';
+                audio.volume = finalVol;
+                const cleanup = () => {
+                    activeInstantAudiosRef.current.delete(audio);
+                };
+                audio.onended = cleanup;
+                audio.onerror = () => { console.error('[instant_play] error'); cleanup(); };
+                activeInstantAudiosRef.current.add(audio);
+                audio.play().catch((err) => { console.error('[instant_play] play failed:', err); cleanup(); });
+            }
+            else if (data.type === 'instant_stop_all') {
+                stopSceneInstantAudio();
+                for (const audio of activeInstantAudiosRef.current) {
+                    audio.pause();
+                    try {
+                        audio.currentTime = 0;
+                    }
+                    catch { /* no-op */ }
+                    audio.onended = null;
+                    audio.onerror = null;
+                }
+                activeInstantAudiosRef.current.clear();
+            }
+            else if (data.type === 'audio_bus_update' && data.settings) {
+                const settings = data.settings;
+                mixerSettingsRef.current = settings.mixerSettings || {};
+                // Update scene instant volume
+                const current = activeInstantAudioRef.current;
+                if (current) {
+                    const ms = mixerSettingsRef.current;
+                    const vol = ms.sceneInstantMasterVolume ?? 1;
+                    const muted = ms.sceneInstantMuted === true;
+                    current.volume = muted ? 0 : Math.max(0, Math.min(1, vol));
+                }
+                // Update instant play volumes
+                const ms = (mixerSettingsRef.current || {});
+                const instantVol = ms.instantMasterVolume ?? 1;
+                const instantMuted = ms.instantMuted === true;
+                for (const audio of activeInstantAudiosRef.current) {
+                    audio.volume = instantMuted ? 0 : Math.max(0, Math.min(1, instantVol));
+                }
+                // Handle song sequence playback
+                const songSeq = settings.songSequence;
+                const currentSong = songAudioRef.current;
+                const hasActiveSong = songSeq && songSeq.items && songSeq.items.length > 0 && songSeq.items.some((item) => item.audioUrl);
+                if (hasActiveSong) {
+                    const activeItem = songSeq.items.find((item) => item.id === songSeq.activeItemId) || songSeq.items[0];
+                    const songUrl = activeItem?.audioUrl;
+                    if (songUrl) {
+                        if (!currentSong || currentSong.src !== songUrl) {
+                            if (currentSong) {
+                                currentSong.pause();
+                                currentSong.onended = null;
+                                currentSong.onerror = null;
+                            }
+                            const audio = new Audio(songUrl);
+                            audio.preload = 'auto';
+                            audio.loop = songSeq.loop !== false;
+                            const ms2 = (mixerSettingsRef.current || {});
+                            const songMuted = ms2.songMuted === true;
+                            const songVol = ms2.songMasterVolume ?? 1;
+                            audio.volume = songMuted ? 0 : Math.max(0, Math.min(1, songVol));
+                            audio.onerror = () => { console.error('[song] playback error'); };
+                            songAudioRef.current = audio;
+                            audio.play().catch((err) => { console.error('[song] play failed:', err); });
+                        }
+                    }
+                }
+                else if (currentSong) {
+                    currentSong.pause();
+                    currentSong.onended = null;
+                    currentSong.onerror = null;
+                    songAudioRef.current = null;
+                }
+            }
+            else if (data.type === 'song_off_air') {
+                const song = songAudioRef.current;
+                if (song) {
+                    song.pause();
+                    song.onended = null;
+                    song.onerror = null;
+                    songAudioRef.current = null;
+                }
+            }
+            else if (data.type === 'program_reload') {
+                if (typeof window === 'undefined')
+                    return;
+                const reloadWithCacheBust = () => {
+                    const nextUrl = new URL(window.location.href);
+                    nextUrl.searchParams.set('_reload', Date.now().toString());
+                    window.location.replace(nextUrl.toString());
+                };
+                if (!('caches' in window)) {
+                    reloadWithCacheBust();
+                    return;
+                }
+                void window.caches.keys()
+                    .then((keys) => Promise.all(keys.map((key) => window.caches.delete(key))))
+                    .catch((err) => { console.warn('[program_reload] cache clear failed:', err); })
+                    .finally(() => { reloadWithCacheBust(); });
+            }
+            else if (data.type === 'program_stingers_changed') {
+                // stinger video URLs for scene transitions — stored for transition system
+            }
         }
     });
-    useEffect(() => {
-        if (dataLoaded || config.dataLoadTimeoutMs <= 0) {
-            return;
-        }
-        const timeoutId = window.setTimeout(() => {
-            window.location.reload();
-        }, config.dataLoadTimeoutMs);
-        return () => window.clearTimeout(timeoutId);
-    }, [dataLoaded, config.dataLoadTimeoutMs]);
     const refreshEvents = useCallback(async () => {
         await fetchEvents({
             language: currentLanguage,
@@ -418,6 +636,11 @@ export default function LiveProgram({ programId = 'fifthbell', embedded = false,
         }))
             .filter((region) => region.cities.length > 0);
     }, [config.weatherCities, weatherData]);
+    const liveEventSegment = useMemo(() => {
+        const segment = createLiveEventSegment(liveEvent, setLiveEvent, currentLanguage);
+        segment.durationMsPerItem = 15000;
+        return segment;
+    }, [liveEvent, setLiveEvent, currentLanguage]);
     const weatherSegment = useMemo(() => {
         const segment = createWeatherSegment(filteredWeatherData, setWeatherData, currentLanguage);
         segment.durationMsPerItem = config.weatherDurationMs;
@@ -435,6 +658,8 @@ export default function LiveProgram({ programId = 'fifthbell', embedded = false,
     }, [markets, setMarkets, currentLanguage, config.marketsDurationMs]);
     const segments = useMemo(() => {
         const nextSegments = [];
+        if (config.showLiveEvents)
+            nextSegments.push(liveEventSegment);
         if (config.showArticles)
             nextSegments.push(articlesSegment);
         if (config.showWeather)
@@ -444,7 +669,7 @@ export default function LiveProgram({ programId = 'fifthbell', embedded = false,
         if (config.showMarkets)
             nextSegments.push(marketsSegment);
         return nextSegments;
-    }, [articlesSegment, weatherSegment, earthquakeSegment, marketsSegment, config.showArticles, config.showWeather, config.showEarthquakes, config.showMarkets]);
+    }, [liveEventSegment, articlesSegment, weatherSegment, earthquakeSegment, marketsSegment, config.showLiveEvents, config.showArticles, config.showWeather, config.showEarthquakes, config.showMarkets]);
     const { state: playlistState, currentSegment, pause, resume, reset } = usePlaylistEngine({
         segments,
         defaultDurationMs: config.playlistDefaultDurationMs,
@@ -521,6 +746,6 @@ export default function LiveProgram({ programId = 'fifthbell', embedded = false,
         return embedded ? (_jsx("div", { className: 'w-full h-full bg-black overflow-hidden', children: loadingStage })) : (_jsx("div", { className: 'min-h-screen bg-black flex items-center justify-center overflow-hidden', children: loadingStage }));
     }
     const liveStage = (_jsxs("div", { className: stageContainerClass, style: stageContainerStyle, children: [layerAvailability.content ? (showLogoSlide ? (_jsx(CallsignSlide, { currentTime: callsignTime, audioRef: audioRef })) : currentSegment ? (currentSegment.render(playlistState.currentItemIndex, playlistState.progress)) : (_jsx("div", { className: 'absolute inset-0 bg-black' }))) : (_jsx("div", { className: 'absolute inset-0 bg-black' })), isMarqueeVisible && (_jsx("div", { className: 'absolute bottom-0 left-0 right-0 z-100 transition-transform duration-1000 ease-in-out translate-y-0', children: !showLogoSlide &&
-                    (showCurtain ? (_jsx(MarqueeCurtain, { onComplete: handleCurtainComplete })) : (_jsx(Marquee, { events: programEvents, onCycleComplete: handleMarqueeCycleComplete, minPostsCount: config.marqueeMinPostsCount, minAverageRelevance: config.marqueeMinAverageRelevance, minMedianRelevance: config.marqueeMinMedianRelevance, pixelsPerSecond: config.marqueePixelsPerSecond, minDurationSeconds: config.marqueeMinDurationSeconds, heightPx: config.marqueeHeightPx }))) }))] }));
+                    (showCurtain ? (_jsx(MarqueeCurtain, { onComplete: handleCurtainComplete })) : (_jsx(Marquee, { events: programEvents, onCycleComplete: handleMarqueeCycleComplete, minPostsCount: config.marqueeMinPostsCount, minAverageRelevance: config.marqueeMinAverageRelevance, minMedianRelevance: config.marqueeMinMedianRelevance, pixelsPerSecond: config.marqueePixelsPerSecond, minDurationSeconds: config.marqueeMinDurationSeconds, heightPx: config.marqueeHeightPx }))) })), (config.showWorldClocks || config.showBellIcon) && (_jsxs("div", { className: 'absolute top-16 right-24 z-50 flex items-start gap-6', children: [config.showWorldClocks && (_jsx("div", { className: 'flex items-start pt-1.5', children: _jsx(WorldClocks, { currentTime: callsignTime, language: currentLanguage, cities: config.worldClockCities, rotateIntervalMs: config.worldClockRotateIntervalMs, transitionDurationMs: config.worldClockTransitionMs, shuffleCities: config.worldClockShuffle, widthPx: config.worldClockWidthPx }) })), config.showBellIcon && (_jsx("div", { className: 'bg-[#b21100] text-white p-6 shadow-2xl', children: _jsx(BellRing, { size: 64, strokeWidth: 2 }) }))] }))] }));
     return (_jsxs("div", { className: embedded ? 'w-full h-full bg-black overflow-hidden' : 'min-h-screen bg-black flex items-center justify-center overflow-hidden', children: [liveStage, _jsx("audio", { ref: audioRef, preload: 'auto', children: _jsx("source", { src: FIFTHBELL_ASSETS.audio.pipes, type: 'audio/ogg' }) }), _jsx("style", { children: slideStyles })] }));
 }

package/dist/components/live-program/assets.d.ts

@@ -1,14 +1,14 @@
 export declare const FIFTHBELL_ASSETS: {
     readonly audio: {
-        readonly pipes: "/fifthbell/audio/pipes.ogg";
+        readonly pipes: "./fifthbell/audio/pipes.ogg";
     };
     readonly images: {
-        readonly logo: "/fifthbell/images/fifthbell.png";
-        readonly nyc: "/fifthbell/images/nyc.jpg";
-        readonly berlin: "/fifthbell/images/berlin.jpg";
-        readonly santiago: "/fifthbell/images/santiago.jpg";
-        readonly tokyo: "/fifthbell/images/tokyo.jpg";
-        readonly nyse: "/fifthbell/images/nyse.jpg";
-        readonly seismograph: "/fifthbell/images/seismograph.jpg";
+        readonly logo: "./fifthbell/images/fifthbell.png";
+        readonly nyc: "./fifthbell/images/nyc.jpg";
+        readonly berlin: "./fifthbell/images/berlin.jpg";
+        readonly santiago: "./fifthbell/images/santiago.jpg";
+        readonly tokyo: "./fifthbell/images/tokyo.jpg";
+        readonly nyse: "./fifthbell/images/nyse.jpg";
+        readonly seismograph: "./fifthbell/images/seismograph.jpg";
     };
 };

package/dist/components/live-program/assets.js

@@ -1,14 +1,14 @@
 export const FIFTHBELL_ASSETS = {
     audio: {
-        pipes: '/fifthbell/audio/pipes.ogg'
+        pipes: './fifthbell/audio/pipes.ogg'
     },
     images: {
-        logo: '/fifthbell/images/fifthbell.png',
-        nyc: '/fifthbell/images/nyc.jpg',
-        berlin: '/fifthbell/images/berlin.jpg',
-        santiago: '/fifthbell/images/santiago.jpg',
-        tokyo: '/fifthbell/images/tokyo.jpg',
-        nyse: '/fifthbell/images/nyse.jpg',
-        seismograph: '/fifthbell/images/seismograph.jpg'
+        logo: './fifthbell/images/fifthbell.png',
+        nyc: './fifthbell/images/nyc.jpg',
+        berlin: './fifthbell/images/berlin.jpg',
+        santiago: './fifthbell/images/santiago.jpg',
+        tokyo: './fifthbell/images/tokyo.jpg',
+        nyse: './fifthbell/images/nyse.jpg',
+        seismograph: './fifthbell/images/seismograph.jpg'
     }
 };

package/dist/components/live-program/components/slides/ArticleSlide.js

@@ -1,9 +1,19 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo, useState } from 'react';
 import { FastAverageColor } from 'fast-average-color';
+import qrcode from 'qrcode-generator';
 const fac = new FastAverageColor();
 function buildQrCodeUrl(value) {
-    return `https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=${encodeURIComponent(value)}`;
+    const qr = qrcode(0, 'M');
+    qr.addData(value);
+    qr.make();
+    let rawSvg = qr.createSvgTag(5, 0);
+    // Make background transparent and foreground white so it pops on the dark parent box.
+    // Leave width/height/viewBox as-is — the <img> CSS (w-32 h-32) handles scaling.
+    rawSvg = rawSvg.replace(/fill="(?:#ffffff|white)"/i, 'fill="transparent"');
+    rawSvg = rawSvg.replace(/fill="(?:#000000|black)"/i, 'fill="white"');
+    const encodedSvg = encodeURIComponent(rawSvg);
+    return `data:image/svg+xml;charset=utf-8,${encodedSvg}`;
 }
 export function ArticleSlide({ newsItem, progress }) {
     const [dominantColor, setDominantColor] = useState('#b21100');
@@ -18,5 +28,5 @@ export function ArticleSlide({ newsItem, progress }) {
             console.error('Error getting average color', error);
         }
     };
-    return (_jsxs("div", { className: 'absolute inset-0', children: [_jsx("div", { className: 'absolute inset-0', children: _jsx("img", { src: imageUrl, alt: '', crossOrigin: 'anonymous', onLoad: handleImageLoad, className: 'w-full h-full object-cover blur-xl scale-105' }, imageUrl) }), _jsx("div", { className: 'absolute inset-0 opacity-75 mix-blend-multiply transition-all duration-1000', style: { background: `linear-gradient(to bottom right, ${dominantColor}, #000000)` } }), _jsx("div", { className: 'absolute inset-0 bg-[radial-gradient(circle_at_30%_30%,rgba(255,255,255,0.1),transparent_60%)]' }), _jsxs("div", { className: 'relative z-10 grid grid-cols-12 h-full', children: [_jsxs("div", { className: 'col-span-5 flex flex-col justify-center px-24 relative', children: [_jsx("div", { className: 'w-32 h-2 bg-white mb-12' }), _jsxs("div", { className: 'animate-slide-up', children: [_jsx("h1", { className: "text-5xl font-bold leading-tight mb-8 tracking-tight line-clamp-6 font-['Encode_Sans']", children: newsItem.headline }), _jsx("p", { className: "text-4xl font-light leading-relaxed opacity-90 line-clamp-6 font-['Libre_Franklin']", children: newsItem.summary })] }, newsItem.id), newsItem.category && (_jsx("div", { className: 'absolute bottom-40 left-24 animate-slide-up', children: _jsx("span", { className: 'text-white px-4 py-2 text-2xl font-bold uppercase tracking-wider', style: { backgroundColor: dominantColor }, children: newsItem.category }) }, `${newsItem.id}-cat`))] }), _jsx("div", { className: 'col-span-7 relative h-full flex items-center justify-center p-16 pb-40', children: _jsxs("div", { className: 'relative w-full aspect-video shadow-2xl overflow-hidden border-4 border-white/10', children: [_jsx("div", { className: 'absolute top-0 left-0 h-1 bg-white/30 w-full z-20', children: _jsx("div", { className: 'h-full bg-white transition-all duration-100 ease-linear', style: { width: `${progress}%` } }) }), _jsx("img", { src: imageUrl, alt: newsItem.headline, className: 'w-full h-full object-cover', style: { animation: 'kenburns 20s infinite alternate' } }, imageUrl)] }) })] }), _jsx("div", { className: 'absolute bottom-24 left-0 w-full flex justify-between items-end px-24 z-50', children: _jsx("div", { className: 'ml-auto p-2 bg-white/10 backdrop-blur-sm', children: _jsx("img", { src: qrCodeUrl, alt: 'Article QR code', className: 'block w-37.5 h-37.5' }) }) })] }));
+    return (_jsxs("div", { className: 'absolute inset-0', children: [_jsx("div", { className: 'absolute inset-0', children: _jsx("img", { src: imageUrl, alt: '', crossOrigin: 'anonymous', onLoad: handleImageLoad, className: 'w-full h-full object-cover blur-xl scale-105' }, imageUrl) }), _jsx("div", { className: 'absolute inset-0 opacity-75 mix-blend-multiply transition-all duration-1000', style: { background: `linear-gradient(to bottom right, ${dominantColor}, #000000)` } }), _jsx("div", { className: 'absolute inset-0 bg-[radial-gradient(circle_at_30%_30%,rgba(255,255,255,0.1),transparent_60%)]' }), _jsxs("div", { className: 'relative z-10 grid grid-cols-12 h-full', children: [_jsx("div", { className: 'col-span-5 flex flex-col justify-center p-24 relative bg-black/35 backdrop-blur-2xl', children: _jsxs("div", { className: 'animate-slide-up flex flex-col items-start', children: [newsItem.category && (_jsx("span", { className: "text-white text-3xl font-semibold uppercase tracking-wider mb-8 font-['Encode_Sans_Condensed'] inline-block px-4 py-2", style: { backgroundColor: dominantColor }, children: newsItem.category })), _jsx("div", { className: 'w-16 h-1.5 bg-[#b21100] mb-8' }), _jsx("h1", { className: "text-5xl font-bold leading-tight mb-8 tracking-tight line-clamp-6 font-['Encode_Sans'] [text-wrap:balance]", children: newsItem.headline }), _jsx("p", { className: "text-4xl font-light leading-relaxed opacity-90 line-clamp-6 font-['Libre_Franklin']", children: newsItem.summary })] }, newsItem.id) }), _jsx("div", { className: 'col-span-7 relative h-full flex items-center justify-center p-16 pb-40', children: _jsxs("div", { className: 'relative w-full aspect-video shadow-2xl overflow-hidden border-4 border-white/10', children: [_jsx("div", { className: 'absolute top-0 left-0 h-1 bg-white/30 w-full z-20', children: _jsx("div", { className: 'h-full bg-white transition-all duration-100 ease-linear', style: { width: `${progress}%` } }) }), _jsx("img", { src: imageUrl, alt: newsItem.headline, className: 'w-full h-full object-cover', style: { animation: 'kenburns 20s infinite alternate' } }, imageUrl), _jsx("div", { className: 'absolute bottom-8 right-8 z-30', children: _jsx("div", { className: 'p-2 rounded-sm backdrop-blur-md shadow-2xl', style: { backgroundColor: 'rgba(0,0,0,0.4)' }, children: _jsx("img", { src: qrCodeUrl, alt: 'Article QR code', className: 'block w-32 h-32' }) }) })] }) })] })] }));
 }

package/dist/components/live-program/components/slides/LiveEventSlide.d.ts

@@ -0,0 +1,9 @@
+import type { LiveEventData } from '../../segments/fetchLiveEvents.js';
+import type { SupportedLanguage } from '../../i18n.js';
+interface LiveEventSlideProps {
+    event: LiveEventData;
+    progress: number;
+    language: SupportedLanguage;
+}
+export declare function LiveEventSlide({ event, progress, language }: LiveEventSlideProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/live-program/components/slides/LiveEventSlide.js

@@ -0,0 +1,86 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useRef, useState, useEffect, useCallback } from 'react';
+import { FastAverageColor } from 'fast-average-color';
+import qrcode from 'qrcode-generator';
+import { t } from '../../i18n.js';
+import { buildSofascoreAttackMomentumUrl } from '../../../../utils/sofascore.js';
+const fac = new FastAverageColor();
+function buildQrCodeUrl(value) {
+    const qr = qrcode(0, 'M');
+    qr.addData(value);
+    qr.make();
+    let rawSvg = qr.createSvgTag(5, 0);
+    rawSvg = rawSvg.replace(/fill="(?:#ffffff|white)"/i, 'fill="transparent"');
+    rawSvg = rawSvg.replace(/fill="(?:#000000|black)"/i, 'fill="white"');
+    const encodedSvg = encodeURIComponent(rawSvg);
+    return `data:image/svg+xml;charset=utf-8,${encodedSvg}`;
+}
+function formatUpdateTime(update) {
+    if (update.timestamp) {
+        const d = new Date(update.timestamp);
+        return d.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit', hour12: false });
+    }
+    return update.time || '';
+}
+function LatestUpdates({ updates, language }) {
+    const latest = useMemo(() => updates.slice(0, 5), [updates]);
+    if (latest.length === 0) {
+        return (_jsx("p", { className: "text-white/50 font-['Libre_Franklin'] text-xl", children: t('liveEvent.noUpdates', language) }));
+    }
+    return (_jsx("div", { className: 'flex flex-col gap-3', children: latest.map((update, i) => (_jsxs("div", { className: 'flex gap-3 items-start', children: [_jsx("div", { className: 'w-2 h-2 rounded-full bg-[#4FC3F7] flex-shrink-0 mt-2' }), _jsxs("div", { className: 'flex flex-col gap-0.5 min-w-0', children: [formatUpdateTime(update) && (_jsx("span", { className: "text-sm font-semibold text-[#0ea5e9] font-['Libre_Franklin']", children: formatUpdateTime(update) })), update.html ? (_jsx("div", { className: "text-white/90 text-lg leading-snug font-['Libre_Franklin'] [&_img]:hidden", children: update.html.replace(/<[^>]*>/g, '') })) : update.text ? (_jsx("p", { className: "text-white/90 text-lg leading-snug font-['Libre_Franklin'] truncate", children: update.text })) : null] })] }, i))) }));
+}
+function ScrollingTimeline({ updates, language }) {
+    const [visibleStart, setVisibleStart] = useState(0);
+    const displayCount = 4;
+    const cycleRef = useRef(null);
+    useEffect(() => {
+        if (updates.length <= displayCount)
+            return;
+        cycleRef.current = setInterval(() => {
+            setVisibleStart((prev) => (prev + 1) % updates.length);
+        }, 5000);
+        return () => {
+            if (cycleRef.current)
+                clearInterval(cycleRef.current);
+        };
+    }, [updates.length]);
+    const visibleUpdates = useMemo(() => {
+        if (updates.length <= displayCount)
+            return updates;
+        const items = [];
+        for (let i = 0; i < displayCount; i++) {
+            items.push(updates[(visibleStart + i) % updates.length]);
+        }
+        return items;
+    }, [updates, visibleStart, displayCount]);
+    if (updates.length === 0) {
+        return (_jsx("div", { className: 'flex items-center justify-center h-full', children: _jsx("p", { className: "text-white/50 font-['Libre_Franklin'] text-2xl", children: t('liveEvent.noUpdates', language) }) }));
+    }
+    return (_jsx("div", { className: 'flex flex-col justify-center gap-5 h-full', children: visibleUpdates.map((update, i) => (_jsxs("div", { className: 'flex gap-4 items-start animate-slide-up', children: [_jsx("div", { className: 'w-3 h-3 rounded-full bg-[#4FC3F7] flex-shrink-0 mt-1.5 shadow-[0_0_12px_rgba(79,195,247,0.5)]' }), _jsxs("div", { className: 'flex flex-col gap-1 min-w-0 flex-1', children: [formatUpdateTime(update) && (_jsx("span", { className: "text-sm font-semibold text-[#4FC3F7] font-['Libre_Franklin'] tracking-wide", children: formatUpdateTime(update) })), update.html ? (_jsx("div", { className: "text-white text-xl leading-snug font-['Libre_Franklin'] font-light [&_img]:hidden [&_a]:text-[#4FC3F7] [&_a]:underline", children: update.html.replace(/<[^>]*>/g, '') })) : update.text ? (_jsx("p", { className: "text-white text-xl leading-snug font-['Libre_Franklin'] font-light line-clamp-2", children: update.text })) : null] })] }, `${visibleStart}-${i}`))) }));
+}
+export function LiveEventSlide({ event, progress, language }) {
+    const [dominantColor, setDominantColor] = useState('#b21100');
+    const isSports = typeof event.sofascore_id === 'number' && event.sofascore_id > 0;
+    const qrCodeUrl = useMemo(() => buildQrCodeUrl(event.liveUrl || event.url), [event.liveUrl, event.url]);
+    const sofascoreWidgetUrl = useMemo(() => {
+        if (!isSports)
+            return '';
+        return buildSofascoreAttackMomentumUrl(event.sofascore_id, 'dark');
+    }, [isSports, event.sofascore_id]);
+    const handleImageLoad = useCallback((e) => {
+        try {
+            const color = fac.getColor(e.currentTarget);
+            setDominantColor(color.hex);
+        }
+        catch {
+            setDominantColor('#b21100');
+        }
+    }, []);
+    if (isSports) {
+        return (_jsxs("div", { className: 'absolute inset-0', children: [_jsx("div", { className: 'absolute inset-0', children: _jsx("img", { src: event.image, alt: '', crossOrigin: 'anonymous', onLoad: handleImageLoad, className: 'w-full h-full object-cover blur-xl scale-105' }, event.image) }), _jsx("div", { className: 'absolute inset-0 opacity-75 mix-blend-multiply transition-all duration-1000', style: { background: `linear-gradient(to bottom right, ${dominantColor}, #000000)` } }), _jsx("div", { className: 'absolute inset-0 bg-[radial-gradient(circle_at_30%_30%,rgba(255,255,255,0.1),transparent_60%)]' }), _jsxs("div", { className: 'relative z-10 grid grid-cols-12 h-full', children: [_jsx("div", { className: 'col-span-5 flex flex-col justify-center p-16 relative bg-black/35 backdrop-blur-2xl', children: _jsxs("div", { className: 'animate-slide-up flex flex-col items-start', children: [_jsx("span", { className: "inline-flex items-center px-4 py-1.5 bg-[#cc0000] text-white text-xl font-bold tracking-[0.08em] uppercase font-['Encode_Sans_Condensed'] mb-4", children: "LIVE" }), _jsx("span", { className: "text-white/80 text-2xl font-semibold uppercase tracking-wider mb-2 font-['Encode_Sans_Condensed']", children: event.category }), _jsx("div", { className: 'w-16 h-1.5 bg-[#b21100] mb-6' }), _jsx("h1", { className: "text-4xl font-bold leading-tight mb-4 tracking-tight line-clamp-5 font-['Encode_Sans'] [text-wrap:balance] text-white", children: event.title }), event.excerpt && (_jsx("p", { className: "text-2xl font-light leading-relaxed opacity-80 line-clamp-3 font-['Libre_Franklin'] text-white mb-6", children: event.excerpt })), _jsx(LatestUpdates, { updates: event.updates, language: language })] }) }), _jsx("div", { className: 'col-span-7 relative h-full flex items-center justify-center p-12 pb-32', children: _jsxs("div", { className: 'relative w-full max-w-lg flex flex-col gap-4', children: [_jsxs("div", { className: 'relative aspect-video shadow-2xl overflow-hidden border border-white/10', children: [_jsx("div", { className: 'absolute top-0 left-0 h-1 bg-white/30 w-full z-20', children: _jsx("div", { className: 'h-full bg-white transition-all duration-100 ease-linear', style: { width: `${progress}%` } }) }), _jsx("img", { src: event.image, alt: event.alt, className: 'w-full h-full object-cover', style: { animation: 'kenburns 20s infinite alternate' }, crossOrigin: 'anonymous' }, event.image)] }), sofascoreWidgetUrl && (_jsx("div", { className: 'w-full overflow-hidden border border-white/10 bg-black/40', children: _jsx("iframe", { width: '100%', height: '180', src: sofascoreWidgetUrl, title: 'SofaScore Attack Momentum', frameBorder: '0', scrolling: 'no', loading: 'lazy', referrerPolicy: 'no-referrer-when-downgrade', style: { border: 0 } }) })), _jsx("div", { className: 'absolute bottom-4 right-4 z-30', children: _jsx("div", { className: 'p-2 rounded-sm backdrop-blur-md shadow-2xl', style: { backgroundColor: 'rgba(0,0,0,0.4)' }, children: _jsx("img", { src: qrCodeUrl, alt: 'QR code', className: 'block w-24 h-24' }) }) })] }) })] })] }));
+    }
+    return (_jsxs("div", { className: 'absolute inset-0', children: [_jsx("div", { className: 'absolute inset-0', children: _jsx("img", { src: event.image, alt: '', crossOrigin: 'anonymous', onLoad: handleImageLoad, className: 'w-full h-full object-cover blur-xl scale-105' }, event.image) }), _jsx("div", { className: 'absolute inset-0 opacity-80 mix-blend-multiply transition-all duration-1000', style: { background: `linear-gradient(to bottom right, ${dominantColor}, #000000)` } }), _jsx("div", { className: 'absolute inset-0 bg-[radial-gradient(circle_at_30%_30%,rgba(255,255,255,0.1),transparent_60%)]' }), _jsxs("div", { className: 'relative z-10 grid grid-cols-12 h-full', children: [_jsx("div", { className: 'col-span-5 flex flex-col justify-center p-16 relative bg-black/35 backdrop-blur-2xl', children: _jsxs("div", { className: 'animate-slide-up flex flex-col items-start', children: [_jsx("span", { className: "inline-flex items-center px-4 py-1.5 bg-[#cc0000] text-white text-xl font-bold tracking-[0.08em] uppercase font-['Encode_Sans_Condensed'] mb-4", children: "LIVE" }), _jsx("span", { className: "text-white/80 text-2xl font-semibold uppercase tracking-wider mb-2 font-['Encode_Sans_Condensed']", children: event.category }), _jsx("div", { className: 'w-16 h-1.5 bg-[#b21100] mb-6' }), _jsx("h1", { className: "text-4xl font-bold leading-tight mb-4 tracking-tight line-clamp-5 font-['Encode_Sans'] [text-wrap:balance] text-white", children: event.title }), event.excerpt && (_jsx("p", { className: "text-2xl font-light leading-relaxed opacity-80 line-clamp-3 font-['Libre_Franklin'] text-white", children: event.excerpt }))] }) }), _jsxs("div", { className: 'col-span-7 relative h-full flex flex-col justify-center p-16 pl-12', children: [_jsxs("div", { className: 'flex items-start gap-4 mb-8', children: [_jsx("div", { className: 'bg-[#b21100] text-white px-4 py-2 shadow-lg', children: _jsx(SecondBellIcon, { size: 32 }) }), _jsx("h2", { className: "text-white/60 text-2xl font-semibold uppercase tracking-[0.12em] font-['Encode_Sans_Condensed']", children: "LIVE UPDATES" })] }), _jsx(ScrollingTimeline, { updates: event.updates, language: language }), _jsx("div", { className: 'absolute bottom-8 right-8 z-30', children: _jsx("div", { className: 'p-2 rounded-sm backdrop-blur-md shadow-2xl', style: { backgroundColor: 'rgba(0,0,0,0.4)' }, children: _jsx("img", { src: qrCodeUrl, alt: 'QR code', className: 'block w-24 h-24' }) }) })] })] })] }));
+}
+function SecondBellIcon({ size }) {
+    return (_jsxs("svg", { width: size, height: size, viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: '2', strokeLinecap: 'round', strokeLinejoin: 'round', children: [_jsx("path", { d: 'M10.268 21a2 2 0 0 0 3.464 0' }), _jsx("path", { d: 'M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326' }), _jsx("path", { d: 'M4 2C2.8 3.7 2 5.7 2 8' }), _jsx("path", { d: 'M22 8a10 10 0 0 0-2-6' })] }));
+}