@gaulatti/giorgia 0.1.57

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

@@ -0,0 +1,751 @@
+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';
+import { FIFTHBELL_ASSETS } from './assets.js';
+import { MarqueeCurtain } from './components/MarqueeCurtain.js';
+import Marquee from './components/Marquee.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, 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';
+const FIFTHBELL_COMPONENT_TYPE_MARQUEE = 'fifthbell-marquee';
+const FIFTHBELL_COMPONENT_TYPE_TONI_CLOCK = 'toni-clock';
+const FIFTHBELL_COMPONENT_TYPE_CORNER = 'fifthbell-corner';
+const FIFTHBELL_COMPONENT_TYPE_LEGACY = 'fifthbell';
+const DEFAULT_FIFTHBELL_CONFIG = {
+    showArticles: true,
+    showWeather: true,
+    showEarthquakes: true,
+    showMarkets: true,
+    showLiveEvents: true,
+    showMarquee: false,
+    showCallsignTake: true,
+    weatherCities: [],
+    languageRotation: DEFAULT_LANGUAGE_ROTATION,
+    dataLoadTimeoutMs: 15000,
+    playlistDefaultDurationMs: 10000,
+    playlistUpdateIntervalMs: 100,
+    articlesDurationMs: 10000,
+    weatherDurationMs: 5000,
+    earthquakesDurationMs: 10000,
+    marketsDurationMs: 10000,
+    showWorldClocks: true,
+    showBellIcon: true,
+    worldClockRotateIntervalMs: 7000,
+    worldClockTransitionMs: 300,
+    worldClockShuffle: true,
+    worldClockWidthPx: 200,
+    worldClockCities: [...DEFAULT_WORLD_CLOCK_CITIES],
+    audioCueEnabled: true,
+    audioCueMinute: 59,
+    audioCueSecond: 55,
+    callsignPrelaunchUntilNyc: DEFAULT_CALLSIGN_PRELAUNCH_UNTIL_NYC,
+    callsignWindowStartSecond: 50,
+    callsignWindowEndSecond: 3,
+    marqueeMinPostsCount: 4,
+    marqueeMinAverageRelevance: 0,
+    marqueeMinMedianRelevance: 0,
+    marqueePixelsPerSecond: 150,
+    marqueeMinDurationSeconds: 10,
+    marqueeHeightPx: 72
+};
+function clampNumber(value, fallback, min, max) {
+    const numeric = typeof value === 'number' ? value : Number(value);
+    if (!Number.isFinite(numeric)) {
+        return fallback;
+    }
+    return Math.min(max, Math.max(min, numeric));
+}
+function normalizeBoolean(value, fallback) {
+    if (typeof value === 'boolean') {
+        return value;
+    }
+    if (typeof value === 'number') {
+        return value !== 0;
+    }
+    if (typeof value === 'string') {
+        const normalized = value.trim().toLowerCase();
+        if (['true', '1', 'yes', 'on'].includes(normalized)) {
+            return true;
+        }
+        if (['false', '0', 'no', 'off', ''].includes(normalized)) {
+            return false;
+        }
+    }
+    return fallback;
+}
+function normalizeStringArray(value) {
+    if (!Array.isArray(value)) {
+        return [];
+    }
+    const deduped = new Set();
+    for (const item of value) {
+        if (typeof item !== 'string') {
+            continue;
+        }
+        const trimmed = item.trim();
+        if (!trimmed) {
+            continue;
+        }
+        deduped.add(trimmed);
+    }
+    return [...deduped];
+}
+function normalizeLanguageRotation(value) {
+    if (!Array.isArray(value)) {
+        return [...DEFAULT_LANGUAGE_ROTATION];
+    }
+    const allowed = new Set(['en', 'es', 'it']);
+    const filtered = value.filter((item) => typeof item === 'string' && allowed.has(item));
+    return filtered.length > 0 ? filtered : [...DEFAULT_LANGUAGE_ROTATION];
+}
+function normalizeWorldClockCities(value) {
+    if (!Array.isArray(value)) {
+        return [...DEFAULT_WORLD_CLOCK_CITIES];
+    }
+    const normalized = value
+        .map((item) => {
+        if (!item || typeof item !== 'object' || Array.isArray(item)) {
+            return null;
+        }
+        const city = typeof item.city === 'string' ? item.city.trim() : '';
+        const timezone = typeof item.timezone === 'string' ? item.timezone.trim() : '';
+        if (!city || !timezone) {
+            return null;
+        }
+        return { city, timezone };
+    })
+        .filter((item) => item !== null);
+    return normalized.length > 0 ? normalized : [...DEFAULT_WORLD_CLOCK_CITIES];
+}
+function normalizeCityKey(value) {
+    return value
+        .normalize('NFD')
+        .replace(/[\u0300-\u036f]/g, '')
+        .trim()
+        .toLowerCase();
+}
+function toRecord(value) {
+    if (value && typeof value === 'object' && !Array.isArray(value)) {
+        return value;
+    }
+    return {};
+}
+function parseSceneMetadata(scene) {
+    if (!scene || !scene.metadata) {
+        return {};
+    }
+    try {
+        const parsed = JSON.parse(scene.metadata);
+        return toRecord(parsed);
+    }
+    catch {
+        return {};
+    }
+}
+function resolveFifthBellLayerAvailability(activeComponents) {
+    const defaultAvailability = {
+        content: true,
+        marquee: true
+    };
+    if (!activeComponents || activeComponents.length === 0) {
+        return defaultAvailability;
+    }
+    if (activeComponents.includes(FIFTHBELL_COMPONENT_TYPE_LEGACY)) {
+        return defaultAvailability;
+    }
+    return {
+        content: activeComponents.includes(FIFTHBELL_COMPONENT_TYPE_CONTENT),
+        marquee: activeComponents.includes(FIFTHBELL_COMPONENT_TYPE_MARQUEE)
+    };
+}
+function extractConfigFromMetadata(metadataInput) {
+    const metadata = toRecord(metadataInput);
+    const legacyProps = toRecord(metadata[FIFTHBELL_COMPONENT_TYPE_LEGACY]);
+    const contentProps = {
+        ...legacyProps,
+        ...toRecord(metadata[FIFTHBELL_COMPONENT_TYPE_CONTENT])
+    };
+    const marqueeProps = {
+        ...legacyProps,
+        ...toRecord(metadata[FIFTHBELL_COMPONENT_TYPE_MARQUEE])
+    };
+    const cornerProps = {
+        ...legacyProps,
+        ...toRecord(metadata[FIFTHBELL_COMPONENT_TYPE_TONI_CLOCK]),
+        ...toRecord(metadata[FIFTHBELL_COMPONENT_TYPE_CORNER])
+    };
+    const parsedMarqueeMinPostsCount = clampNumber(marqueeProps.marqueeMinPostsCount, DEFAULT_FIFTHBELL_CONFIG.marqueeMinPostsCount, 0, 50);
+    let parsedMarqueeMinAverageRelevance = clampNumber(marqueeProps.marqueeMinAverageRelevance, DEFAULT_FIFTHBELL_CONFIG.marqueeMinAverageRelevance, 0, 100);
+    let parsedMarqueeMinMedianRelevance = clampNumber(marqueeProps.marqueeMinMedianRelevance, DEFAULT_FIFTHBELL_CONFIG.marqueeMinMedianRelevance, 0, 100);
+    // Compatibility: prior defaults were tuned for OR logic. Under threshold logic, treat that trio as legacy.
+    if (parsedMarqueeMinPostsCount === 4 && parsedMarqueeMinAverageRelevance === 5 && parsedMarqueeMinMedianRelevance === 7) {
+        parsedMarqueeMinAverageRelevance = 0;
+        parsedMarqueeMinMedianRelevance = 0;
+    }
+    return {
+        showArticles: normalizeBoolean(contentProps.showArticles, DEFAULT_FIFTHBELL_CONFIG.showArticles),
+        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),
+        languageRotation: normalizeLanguageRotation(contentProps.languageRotation),
+        dataLoadTimeoutMs: clampNumber(contentProps.dataLoadTimeoutMs, DEFAULT_FIFTHBELL_CONFIG.dataLoadTimeoutMs, 1000, 120000),
+        playlistDefaultDurationMs: clampNumber(contentProps.playlistDefaultDurationMs, DEFAULT_FIFTHBELL_CONFIG.playlistDefaultDurationMs, 1000, 120000),
+        playlistUpdateIntervalMs: clampNumber(contentProps.playlistUpdateIntervalMs, DEFAULT_FIFTHBELL_CONFIG.playlistUpdateIntervalMs, 16, 5000),
+        articlesDurationMs: clampNumber(contentProps.articlesDurationMs, DEFAULT_FIFTHBELL_CONFIG.articlesDurationMs, 1000, 120000),
+        weatherDurationMs: clampNumber(contentProps.weatherDurationMs, DEFAULT_FIFTHBELL_CONFIG.weatherDurationMs, 1000, 120000),
+        earthquakesDurationMs: clampNumber(contentProps.earthquakesDurationMs, DEFAULT_FIFTHBELL_CONFIG.earthquakesDurationMs, 1000, 120000),
+        marketsDurationMs: clampNumber(contentProps.marketsDurationMs, DEFAULT_FIFTHBELL_CONFIG.marketsDurationMs, 1000, 120000),
+        showWorldClocks: normalizeBoolean(cornerProps.showWorldClocks, DEFAULT_FIFTHBELL_CONFIG.showWorldClocks),
+        showBellIcon: true,
+        worldClockRotateIntervalMs: clampNumber(cornerProps.worldClockRotateIntervalMs, DEFAULT_FIFTHBELL_CONFIG.worldClockRotateIntervalMs, 500, 120000),
+        worldClockTransitionMs: clampNumber(cornerProps.worldClockTransitionMs, DEFAULT_FIFTHBELL_CONFIG.worldClockTransitionMs, 0, 10000),
+        worldClockShuffle: normalizeBoolean(cornerProps.worldClockShuffle, DEFAULT_FIFTHBELL_CONFIG.worldClockShuffle),
+        worldClockWidthPx: clampNumber(cornerProps.worldClockWidthPx, DEFAULT_FIFTHBELL_CONFIG.worldClockWidthPx, 120, 600),
+        worldClockCities: normalizeWorldClockCities(cornerProps.worldClockCities),
+        audioCueEnabled: normalizeBoolean(contentProps.audioCueEnabled, DEFAULT_FIFTHBELL_CONFIG.audioCueEnabled),
+        audioCueMinute: clampNumber(contentProps.audioCueMinute, DEFAULT_FIFTHBELL_CONFIG.audioCueMinute, 0, 59),
+        audioCueSecond: clampNumber(contentProps.audioCueSecond, DEFAULT_FIFTHBELL_CONFIG.audioCueSecond, 0, 59),
+        callsignPrelaunchUntilNyc: typeof contentProps.callsignPrelaunchUntilNyc === 'string' && contentProps.callsignPrelaunchUntilNyc.trim()
+            ? contentProps.callsignPrelaunchUntilNyc.trim()
+            : DEFAULT_FIFTHBELL_CONFIG.callsignPrelaunchUntilNyc,
+        callsignWindowStartSecond: clampNumber(contentProps.callsignWindowStartSecond, DEFAULT_FIFTHBELL_CONFIG.callsignWindowStartSecond, 0, 59),
+        callsignWindowEndSecond: clampNumber(contentProps.callsignWindowEndSecond, DEFAULT_FIFTHBELL_CONFIG.callsignWindowEndSecond, 0, 59),
+        marqueeMinPostsCount: parsedMarqueeMinPostsCount,
+        marqueeMinAverageRelevance: parsedMarqueeMinAverageRelevance,
+        marqueeMinMedianRelevance: parsedMarqueeMinMedianRelevance,
+        marqueePixelsPerSecond: clampNumber(marqueeProps.marqueePixelsPerSecond, DEFAULT_FIFTHBELL_CONFIG.marqueePixelsPerSecond, 10, 1000),
+        marqueeMinDurationSeconds: clampNumber(marqueeProps.marqueeMinDurationSeconds, DEFAULT_FIFTHBELL_CONFIG.marqueeMinDurationSeconds, 1, 120),
+        marqueeHeightPx: clampNumber(marqueeProps.marqueeHeightPx, DEFAULT_FIFTHBELL_CONFIG.marqueeHeightPx, 72, 200)
+    };
+}
+function normalizeLaunchDate(rawDate) {
+    const parsed = new Date(rawDate);
+    if (Number.isNaN(parsed.getTime())) {
+        return new Date(DEFAULT_CALLSIGN_PRELAUNCH_UNTIL_NYC);
+    }
+    return parsed;
+}
+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());
+    const audioRef = useRef(null);
+    const audioInitialized = useRef(false);
+    const [languageIndex, setLanguageIndex] = useState(0);
+    const [articles, setArticles] = useState([]);
+    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);
+    const [updatePending, setUpdatePending] = useState(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) {
+            return toRecord(sceneMetadata);
+        }
+        return parseSceneMetadata(state?.activeScene ?? null);
+    }, [sceneMetadata, state?.activeScene]);
+    const config = useMemo(() => extractConfigFromMetadata(effectiveSceneMetadata), [effectiveSceneMetadata]);
+    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);
+        }
+    }, [languageIndex, languageRotation.length]);
+    useEffect(() => {
+        updatePendingRef.current = updatePending;
+    }, [updatePending]);
+    useEffect(() => {
+        if (controlledBySceneRenderer) {
+            return;
+        }
+        fetch(`${resolvedApiBaseUrl}/state`)
+            .then((res) => res.json())
+            .then((data) => setState(data))
+            .catch((err) => console.error('Failed to fetch FifthBell program state:', err));
+    }, [controlledBySceneRenderer, resolvedApiBaseUrl]);
+    const refreshAllData = useCallback(async () => {
+        const [articlesData, weatherDataResult, earthquakesData, marketsData, liveEventData] = await Promise.all([
+            fetchArticles(currentLanguage),
+            fetchWeatherData(),
+            fetchEarthquakes(currentLanguage),
+            fetchMarketData(),
+            fetchLiveEvent(currentLanguage),
+            fetchEvents({
+                language: currentLanguage,
+                allowedLanguages: [currentLanguage]
+            })
+        ]);
+        setArticles(articlesData);
+        setWeatherData(weatherDataResult);
+        setEarthquakes(earthquakesData);
+        setMarkets(marketsData);
+        setLiveEvent(liveEventData);
+        const cachedEvents = getCachedEvents();
+        if (cachedEvents) {
+            setStageEvents(cachedEvents);
+            setProgramEvents(cachedEvents);
+        }
+        setDataLoaded(true);
+    }, [currentLanguage]);
+    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: `${resolvedApiBaseUrl}/events`,
+        enabled: !controlledBySceneRenderer,
+        onMessage: (data) => {
+            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') {
+                setState((prev) => {
+                    if (!prev)
+                        return prev;
+                    return {
+                        ...prev,
+                        activeScene: data.scene ?? prev.activeScene
+                    };
+                });
+            }
+            else if (data.type === 'scene_cleared') {
+                setState((prev) => {
+                    if (!prev)
+                        return prev;
+                    return {
+                        ...prev,
+                        activeSceneId: null,
+                        activeScene: null
+                    };
+                });
+            }
+            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
+            }
+        }
+    });
+    const refreshEvents = useCallback(async () => {
+        await fetchEvents({
+            language: currentLanguage,
+            allowedLanguages: [currentLanguage]
+        });
+        const cachedEvents = getCachedEvents();
+        if (!cachedEvents) {
+            return;
+        }
+        setStageEvents((prevStage) => {
+            const prevJson = JSON.stringify(prevStage);
+            const nextJson = JSON.stringify(cachedEvents);
+            return prevJson === nextJson ? prevStage : cachedEvents;
+        });
+    }, [currentLanguage]);
+    useEffect(() => {
+        if (stageEvents.length > 0 && programEvents.length > 0 && hasEventChanges(programEvents, stageEvents) && !showCurtain && !updatePending) {
+            setUpdatePending(true);
+        }
+    }, [programEvents, showCurtain, stageEvents, updatePending]);
+    const handleMarqueeCycleComplete = useCallback(() => {
+        if (updatePendingRef.current) {
+            setShowCurtain(true);
+            setUpdatePending(false);
+        }
+    }, []);
+    const handleCurtainComplete = useCallback(() => {
+        setProgramEvents(stageEvents);
+        setShowCurtain(false);
+    }, [stageEvents]);
+    const handlePlaylistLoop = useCallback(() => {
+        setLanguageIndex((prev) => (prev + 1) % Math.max(1, languageRotation.length));
+    }, [languageRotation.length]);
+    const articlesSegment = useMemo(() => {
+        const segment = createArticlesSegment(articles, setArticles, currentLanguage);
+        segment.durationMsPerItem = config.articlesDurationMs;
+        const originalRender = segment.render;
+        const originalOnEnter = segment.onEnter;
+        segment.onEnter = () => {
+            originalOnEnter?.();
+            lastFetchedItemRef.current = -1;
+        };
+        segment.render = (itemIndex, progress) => {
+            if (lastFetchedItemRef.current !== itemIndex) {
+                lastFetchedItemRef.current = itemIndex;
+                void refreshEvents();
+            }
+            return originalRender(itemIndex, progress);
+        };
+        return segment;
+    }, [articles, currentLanguage, refreshEvents, config.articlesDurationMs]);
+    const filteredWeatherData = useMemo(() => {
+        if (!config.weatherCities || config.weatherCities.length === 0) {
+            return weatherData;
+        }
+        const allowed = new Set(config.weatherCities.map(normalizeCityKey));
+        return weatherData
+            .map((region) => ({
+            ...region,
+            cities: region.cities.filter((city) => allowed.has(normalizeCityKey(city.name)))
+        }))
+            .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;
+        return segment;
+    }, [filteredWeatherData, setWeatherData, currentLanguage, config.weatherDurationMs]);
+    const earthquakeSegment = useMemo(() => {
+        const segment = createEarthquakeSegment(earthquakes, setEarthquakes, currentLanguage);
+        segment.durationMsPerItem = config.earthquakesDurationMs;
+        return segment;
+    }, [earthquakes, setEarthquakes, currentLanguage, config.earthquakesDurationMs]);
+    const marketsSegment = useMemo(() => {
+        const segment = createMarketsSegment(markets, setMarkets, currentLanguage);
+        segment.durationMsPerItem = config.marketsDurationMs;
+        return segment;
+    }, [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)
+            nextSegments.push(weatherSegment);
+        if (config.showEarthquakes)
+            nextSegments.push(earthquakeSegment);
+        if (config.showMarkets)
+            nextSegments.push(marketsSegment);
+        return nextSegments;
+    }, [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,
+        updateIntervalMs: config.playlistUpdateIntervalMs,
+        onPlaylistLoop: handlePlaylistLoop
+    });
+    useEffect(() => {
+        if (!audioRef.current || audioInitialized.current) {
+            return;
+        }
+        audioRef.current.load();
+        audioInitialized.current = true;
+    }, []);
+    useEffect(() => {
+        if (!config.audioCueEnabled) {
+            return;
+        }
+        const interval = window.setInterval(() => {
+            const now = new Date();
+            if (now.getMinutes() === config.audioCueMinute && now.getSeconds() === config.audioCueSecond && audioRef.current) {
+                audioRef.current.currentTime = 0;
+                void audioRef.current.play().catch((error) => {
+                    console.log('Audio playback prevented:', error);
+                });
+            }
+        }, 1000);
+        return () => window.clearInterval(interval);
+    }, [config.audioCueEnabled, config.audioCueMinute, config.audioCueSecond]);
+    useEffect(() => {
+        const checkTime = () => {
+            const now = new Date();
+            const minutes = now.getMinutes();
+            const seconds = now.getSeconds();
+            const nycTime = new Date(now.toLocaleString('en-US', { timeZone: 'America/New_York' }));
+            const launchDateNyc = new Date(normalizeLaunchDate(config.callsignPrelaunchUntilNyc).toLocaleString('en-US', { timeZone: 'America/New_York' }));
+            const isBeforeLaunch = nycTime < launchDateNyc;
+            const withinScheduleWindow = (minutes === 59 && seconds >= config.callsignWindowStartSecond) || (minutes === 0 && seconds <= config.callsignWindowEndSecond);
+            const shouldShow = config.showCallsignTake && (isBeforeLaunch || withinScheduleWindow);
+            if (shouldShow && !showLogoSlide) {
+                reset();
+            }
+            setShowLogoSlide(shouldShow);
+            if (shouldShow) {
+                setCallsignTime(now);
+            }
+        };
+        checkTime();
+        const timer = window.setInterval(checkTime, 1000);
+        return () => window.clearInterval(timer);
+    }, [reset, config.showCallsignTake, config.callsignPrelaunchUntilNyc, config.callsignWindowStartSecond, config.callsignWindowEndSecond, showLogoSlide]);
+    useEffect(() => {
+        if (showLogoSlide) {
+            pause();
+        }
+        else if (playlistState.isPaused) {
+            resume();
+        }
+    }, [pause, resume, showLogoSlide, playlistState.isPaused]);
+    const marqueeEnabled = layerAvailability.marquee && config.showMarquee;
+    const isMarqueeVisible = useMemo(() => {
+        if (!marqueeEnabled || showLogoSlide || segments.length === 0) {
+            return false;
+        }
+        return true;
+    }, [marqueeEnabled, showLogoSlide, segments.length]);
+    const stageContainerStyle = embedded
+        ? { width: '100%', height: '100%' }
+        : { width: '1920px', height: '1080px', transform: 'scale(min(1, min(100vw / 1920, 100vh / 1080)))', transformOrigin: 'center center' };
+    const stageContainerClass = embedded
+        ? 'relative bg-black text-white overflow-hidden w-full h-full'
+        : 'relative bg-black text-white overflow-hidden shadow-2xl';
+    const loadingStage = (_jsx("div", { className: stageContainerClass, style: stageContainerStyle, children: layerAvailability.content ? _jsx(CallsignSlide, { currentTime: callsignTime, audioRef: audioRef }) : _jsx("div", { className: 'absolute inset-0 bg-black' }) }));
+    if (!dataLoaded) {
+        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 }))) })), (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 })] }));
+}