Files
tuner/frontend/src/components/StatusBar.tsx
Scott Register 723ae1f1ac v2: mpegts.js + single-upstream fan-out hub (no FFmpeg/HLS)
Replaces the FFmpeg -> MediaMTX -> HLS pipeline with a raw MPEG-TS
fan-out architecture:

- Go stream.Hub holds ONE upstream connection per active channel and
  broadcasts the raw TS bytes to all connected browsers via /ts.
  The IPTV provider only ever sees one IP (the server), no matter how
  many viewers are watching (shared single-channel model).
- Frontend uses mpegts.js to play the raw TS in-browser via MSE,
  fixing HEVC/H.265 4K streams that HLS could not package.
- Dropped FFmpeg, MediaMTX, RTMP/RTSP, HLS proxy, playback/ingest
  modes, the OBS source toggle, and FFmpeg health stats.
- UI look preserved (fullscreen video, collapsible sidebar, status
  bar, upstream-down banner, hourly playlist auto-refresh).

Tradeoff: loses iOS Safari (no MSE/mpegts.js); fixes desktop/Android
playback of both H.264 and H.265.
2026-06-12 19:33:06 -07:00

43 lines
1.1 KiB
TypeScript

import type { StreamStatus } from "../types";
interface Props {
status: StreamStatus | null;
}
export default function StatusBar({ status }: Props) {
if (!status) {
return (
<div className="status-bar">
<span className="status-dot offline" />
<span className="status-text">Connecting...</span>
</div>
);
}
return (
<div className="status-bar">
<span className={`status-dot ${status.live ? "live" : "offline"}`} />
<span className="status-text">
{status.live ? "LIVE" : "Offline"}
</span>
{status.channel_name && (
<>
<span className="status-separator">|</span>
<span className={`status-channel ${status.transitioning ? "channel-transitioning" : ""}`}>
{status.channel_name}
{status.transitioning && (
<span className="channel-switching">Switching...</span>
)}
</span>
</>
)}
{status.upstream_down && (
<>
<span className="status-separator">|</span>
<span className="upstream-down-banner">Upstream down?</span>
</>
)}
</div>
);
}