Function Stream

web/src/stream/Stream.tsx:27–182

()

}

export function Stream() {
  const { stream } = useTracker();
  const { state: serverState } = useStream("display");
  const { state, config } = stream;
  const mse = useMse(stream.connected, state?.video);
  const liveVideo = useLiveVideo(stream.connected, mse.ok ? undefined : state?.video);
  useStabilize(mse.videoRef, state?.vision?.detection, { enabled: mse.ok });

  // Stream options via URL params; route info is opt-IN here (it's wrong
  // often enough that the default is to keep it off the broadcast).
  const showRoute = useMemo(
    () => new URLSearchParams(window.location.search).get("route") === "1",
    [],
  );

  const [now, setNow] = useState(Date.now());
  useEffect(() => {
    const t = setInterval(() => setNow(Date.now()), 1000);
    return () => clearInterval(t);
  }, []);
  void now; // re-render tick keeps detection age/LIVE pulse fresh

  const target = state?.target;
  const targetAc = useMemo(
    () => serverState.aircraft.find((a) => a.hex === target?.hex),
    [serverState.aircraft, target?.hex],
  );

  if (!state || !config) {
    return (
      <div className="stream-boot">
        <div className="stream-boot-mark">SKYLIGHT</div>
      </div>
    );
  }

  const det = state.vision.detection;
  const { from, to } = routeLine(targetAc);
  const tracking = Boolean(target?.hex);

  return (
    <div className="stream">
      {/* ---- top: flight card ---- */}
      <header className="stream-top">
        <div className="stream-live">
          <span className="stream-live-dot" />
          LIVE · SKY CAMERA OVER SFO
        </div>
        {tracking ? (
          <div className="stream-card">
            <div className="stream-card-tag">
              {det && det.ageMs < 1500 ? "VISUAL LOCK" : "TRACKING"}
            </div>
            <div className="stream-flight">{targetAc?.flight ?? target!.hex}</div>
            {targetAc?.airline && <div className="stream-airline">{targetAc.airline}</div>}
            {showRoute && (from || to) && (
              <div className="stream-route">
                <span>{from ?? "·"}</span>