/* global React, RC, RCSpinner, Hls */
// Public viewer — Editorial Motorsport aesthetic.
// Italian race-photography annual energy: oxidised cream on warm ink,
// sweeping Fraunces serif numerals as the hero, hairline rules,
// restrained ferrari-red accents. Print magazine, not dashboard.
//
// Stage states:
// 'loading' → tuning frequencies (hairline loader)
// 'password' → editorial card with single underline input
// 'error' → "OFF THE RECORD" 404
// 'ready' → BroadcastTheatre
const { useState: useSV, useEffect: useEV, useRef: useRefV, useMemo: useMV } = React;
// ── HLS plumbing (unchanged) ────────────────────────────────────────
function useHlsPlayer(srcUrl, { live = true } = {}) {
const videoRef = useRefV(null);
const [error, setError] = useSV(null);
useEV(() => {
setError(null);
const video = videoRef.current;
if (!video || !srcUrl) return;
let hls;
if (video.canPlayType('application/vnd.apple.mpegurl')) {
video.src = srcUrl;
const onErr = () => setError('Playback fehlgeschlagen');
video.addEventListener('error', onErr);
video.play().catch(() => {});
return () => video.removeEventListener('error', onErr);
}
if (window.Hls && Hls.isSupported()) {
hls = new Hls({
lowLatencyMode: live, liveSyncDuration: 2,
maxLiveSyncPlaybackRate: 1.5,
backBufferLength: live ? 30 : 60,
});
hls.loadSource(srcUrl); hls.attachMedia(video);
hls.on(Hls.Events.ERROR, (_e, data) => {
if (!data.fatal) return;
if (data.type === Hls.ErrorTypes.NETWORK_ERROR) setError('Stream nicht verfügbar');
else if (data.type === Hls.ErrorTypes.MEDIA_ERROR) {
try { hls.recoverMediaError(); } catch (_) {}
} else setError('Player-Fehler: ' + data.details);
});
video.play().catch(() => {});
return () => { try { hls.destroy(); } catch (_) {} };
}
setError('Browser unterstützt HLS nicht');
}, [srcUrl, live]);
return { videoRef, error };
}
// ── Top-level router for viewer states ─────────────────────────────
function LiveViewer({ slug, toast }) {
const [stage, setStage] = useSV('loading');
const [info, setInfo] = useSV(null);
const [pw, setPw] = useSV('');
const [submitting, setSubmitting] = useSV(false);
useEV(() => {
let cancelled = false;
(async () => {
try {
const data = await RC.viewerLogin(slug, '');
if (cancelled) return;
setInfo(data);
setStage('ready');
} catch (e) {
if (cancelled) return;
if (e.status === 401) setStage('password');
else setStage('error');
}
})();
return () => { cancelled = true; };
}, [slug]);
const submitPw = async (e) => {
e?.preventDefault?.();
setSubmitting(true);
try {
const data = await RC.viewerLogin(slug, pw);
setInfo(data);
setStage('ready');
} catch (err) {
toast?.('Falsches Stream-Passwort', 'error');
} finally {
setSubmitting(false);
}
};
return (
{stage === 'loading' &&
}
{stage === 'error' &&
}
{stage === 'password' &&
}
{stage === 'ready' && info &&
}
);
}
// ── Loading ─────────────────────────────────────────────────────────
function LoadingState() {
return (
);
}
// ── 404 ─────────────────────────────────────────────────────────────
function ErrorState({ slug }) {
return (
Off the record
No signal on this frequency.
Der Slug {slug} ist nicht
(mehr) auf Sendung. Vielleicht wurde der Broadcast beendet, oder
das Rennen ist noch nicht freigegeben.
← Zurück
);
}
// ── Password gate ───────────────────────────────────────────────────
function PasswordState({ slug, pw, setPw, submitting, onSubmit }) {
return (
);
}
// ── The actual broadcast theatre ────────────────────────────────────
function BroadcastTheatre({ info, toast }) {
const [state, setState] = useSV(info.state || 'offline');
const [tele, setTele] = useSV({ speedKmh: null, avgSpeed: null, history: [] });
const [bitrateKbps, setBitrateKbps] = useSV(null);
const [readers, setReaders] = useSV(null);
const [muted, setMuted] = useSV(true);
const startedAt = useMV(() => Date.now(), []);
const [now, setNow] = useSV(Date.now());
const { videoRef, error } = useHlsPlayer(info.playback.hls);
// tick-tick clock for the masthead
useEV(() => {
const t = setInterval(() => setNow(Date.now()), 1000);
return () => clearInterval(t);
}, []);
// WS subscribe
useEV(() => {
const conn = RC.openWs({
token: RC.getViewerToken(),
handlers: {
onOpen: () => conn.subscribe(info.streamId),
onMessage: (type, msg) => {
if (type === 'state') setState(msg.state);
if (type === 'health') {
setBitrateKbps(msg.bitrateKbps);
if (msg.readers != null) setReaders(msg.readers);
}
if (type === 'telemetry' && msg.payload) {
setTele((t) => {
const v = msg.payload.speedKmh;
const hist = v != null ? [...t.history.slice(-59), v] : t.history;
const avg = hist.length ? hist.reduce((a, b) => a + b, 0) / hist.length : null;
return { speedKmh: v ?? t.speedKmh, avgSpeed: avg, history: hist };
});
}
},
},
});
return () => conn.close();
}, [info.streamId]);
const elapsed = Math.max(0, Math.floor((now - startedAt) / 1000));
const clock = formatClock(elapsed);
return (
);
}
// ── Masthead ────────────────────────────────────────────────────────
function Masthead({ title, state, clock }) {
const today = new Date();
const dateLabel = today.toLocaleDateString('de-DE', { day: '2-digit', month: 'long', year: 'numeric' });
return (
RaceCast
Editoriale
{title || 'Anonymous Run'}
·
{dateLabel}
{state === 'live' ? (
live · {clock}
) : (
paused · {clock}
)}
);
}
// ── Stage ───────────────────────────────────────────────────────────
function Stage({ videoRef, state, error, muted, setMuted, streamName, clock }) {
return (
{state !== 'live' && (
)}
{state === 'live' && (
<>
onboard · live
{(streamName || '').toUpperCase()}
{clock}
)}
{/* mute toggle, lower-right, only on hover-able context */}
);
}
function OfflineCurtain({ message }) {
return (
Pas de signal
{message}
);
}
// ── Velocity hero — the magazine cover number ───────────────────────
function VelocityHero({ state, speed, avg }) {
const v = state === 'live' && speed != null ? Math.round(speed) : null;
const a = state === 'live' && avg != null ? Math.round(avg) : null;
return (
—
Velocità
{v != null ? : —}
km / h
Ø média
{a != null ? a : '—'}
km/h moyenne
);
}
// Per-digit ticker — simple cross-fade so digits don't shift width.
function DigitTicker({ value }) {
const str = String(value);
return (
{str.split('').map((d, i) => (
))}
);
}
function DigitCell({ digit }) {
// Use the key change in DigitTicker to retrigger a tiny in-animation.
const ref = useRefV(null);
useEV(() => {
const el = ref.current;
if (!el) return;
el.animate(
[
{ opacity: 0, transform: 'translateY(0.3em)' },
{ opacity: 1, transform: 'translateY(0)' },
],
{ duration: 320, easing: 'cubic-bezier(0.32, 0.04, 0.18, 1)' }
);
}, []);
return {digit};
}
// ── Telemetry strip ─────────────────────────────────────────────────
function TelemetryStrip({ state, bitrateKbps, readers, visibility, history }) {
const min = history.length ? Math.round(Math.min(...history)) : null;
const max = history.length ? Math.round(Math.max(...history)) : null;
return (
|
|
|
|
{history.length > 0 && (
Velocità · last {Math.min(history.length, 60)}s
min {min ?? '—'} · max {max ?? '—'}
)}
);
}
function Cell({ label, value }) {
return (
{label}
{value}
);
}
// Editorial sparkline — single ferrari hairline trace, no fill.
function Sparkline({ data, width = 880, height = 44 }) {
if (!data || data.length < 2) return null;
const max = Math.max(...data, 1);
const min = Math.min(...data, 0);
const span = Math.max(1, max - min);
const pts = data.map((v, i) => {
const x = (i / (data.length - 1)) * width;
const y = height - ((v - min) / span) * height;
return `${x.toFixed(1)},${y.toFixed(1)}`;
}).join(' ');
return (
);
}
// ── Footer ──────────────────────────────────────────────────────────
function Footer() {
const yr = new Date().getFullYear();
return (
<>
);
}
// ── helpers ─────────────────────────────────────────────────────────
function formatClock(sec) {
const h = Math.floor(sec / 3600);
const m = Math.floor((sec / 60) % 60).toString().padStart(2, '0');
const s = (sec % 60).toString().padStart(2, '0');
return h > 0 ? `${h}:${m}:${s}` : `${m}:${s}`;
}
window.LiveViewer = LiveViewer;