Watch live: embed the CS2 stream

GET /api/v1/cs2/matches/cs2-match-2399855/streams

{
  "platform": "twitch",
  "channel": "eslcs",
  "official": true,
  "embedUrl": null,
  "embedUrlTemplate": "https://player.twitch.tv/?channel=eslcs&parent={parent}",
  "requiresParent": true,
  "embedNote": "Twitch only plays inside pages it can verify: request this endpoint with ?parent=<your page's hostname> ..."
}

GET /api/v1/cs2/matches/cs2-match-2399855/streams?parent=www.example.com

{
  "platform": "twitch",
  "channel": "eslcs",
  "official": true,
  "embedUrl": "https://player.twitch.tv/?channel=eslcs&parent=www.example.com",
  "chatEmbedUrl": "https://www.twitch.tv/embed/eslcs/chat?parent=www.example.com"
}

// server.js: keep your API key on the server; the browser calls /api/watch.
import express from "express";

const BASE = "https://api.citoapi.com/api/v1";
const HEADERS = { "x-api-key": process.env.CITO_API_KEY };
// Every hostname your watch page is served from (Twitch checks each one).
const PARENT = "www.example.com,example.com";

const app = express();
app.get("/api/watch", async (req, res) => {
  const live = await fetch(`${BASE}/cs2/live`, { headers: HEADERS }).then((r) => r.json());
  const match = live.data.find((m) => m.id === req.query.match) ?? live.data[0];
  if (!match) return res.json({ match: null, streams: [] });
  const list = await fetch(
    `${BASE}/cs2/matches/${match.id}/streams?parent=${encodeURIComponent(PARENT)}`,
    { headers: HEADERS },
  ).then((r) => r.json());
  res.json({ match, streams: list.data.streams });
});
app.listen(3000);

<div class="watch">
  <aside id="scoreboard"></aside>
  <section>
    <div id="switcher"></div>
    <iframe id="player" allow="autoplay; fullscreen" allowfullscreen
            style="width: 100%; aspect-ratio: 16 / 9; border: 0"></iframe>
  </section>
</div>

<script type="module">
  const { match, streams } = await fetch("/api/watch").then((r) => r.json());
  const player = document.getElementById("player");
  // Streams arrive official first. embedUrl is ready because the server passed ?parent=.
  const playable = streams.filter((s) => s.embedUrl);

  document.getElementById("scoreboard").textContent = match
    ? `${match.team1Name} ${match.team1Score} - ${match.team2Score} ${match.team2Name} · ${match.currentMap ?? ""}`
    : "No match live right now";

  const switcher = document.getElementById("switcher");
  for (const s of playable) {
    const button = document.createElement("button");
    button.textContent = `${s.label ?? s.channel} · ${s.platform} · ${s.language ?? "?"}${s.official ? " (official)" : ""}`;
    button.onclick = () => (player.src = s.embedUrl);
    switcher.append(button);
  }
  if (playable[0]) player.src = playable[0].embedUrl; // the official broadcast when there is one
</script>

// WatchMatch.tsx: same /api/watch endpoint as above (or a Next.js route handler).
import { useEffect, useMemo, useState } from "react";

type Stream = {
  platform: string; language: string | null; label: string | null; channel: string | null;
  official: boolean; embedUrl: string | null; embedUrlTemplate: string | null; url: string;
};

export function WatchMatch() {
  const [data, setData] = useState<{ match: any; streams: Stream[] } | null>(null);
  const [language, setLanguage] = useState<string | null>(null);
  const [current, setCurrent] = useState<Stream | null>(null);

  useEffect(() => {
    fetch("/api/watch").then((r) => r.json()).then((d) => {
      setData(d);
      setCurrent(d.streams.find((s: Stream) => s.embedUrl) ?? null); // official first
    });
  }, []);

  // Works with or without ?parent= on the server: fill {parent} with this page's hostname.
  const src = (s: Stream) => s.embedUrl ?? s.embedUrlTemplate?.replace("{parent}", window.location.hostname) ?? null;
  const languages = useMemo(() => [...new Set((data?.streams ?? []).map((s) => s.language ?? "other"))], [data]);
  if (!data?.match) return <p>No match live right now.</p>;
  const { match, streams } = data;
  const shown = streams.filter((s) => src(s) && (!language || (s.language ?? "other") === language));

  return (
    <div style={{ display: "grid", gridTemplateColumns: "240px 1fr", gap: 16 }}>
      <aside>
        <strong>{match.team1Name} {match.team1Score} - {match.team2Score} {match.team2Name}</strong>
        <p>{match.currentMap} · round {match.currentRound}</p>
        {languages.map((l) => <button key={l} onClick={() => setLanguage(l)}>{l}</button>)}
        {shown.map((s) => (
          <button key={s.url} onClick={() => setCurrent(s)}>
            {s.label ?? s.channel} · {s.platform}{s.official ? " · official" : ""}
          </button>
        ))}
      </aside>
      {current && src(current) ? (
        <iframe key={src(current)!} src={src(current)!} allow="autoplay; fullscreen" allowFullScreen
                style={{ width: "100%", aspectRatio: "16 / 9", border: 0 }} />
      ) : <p>No embeddable stream for this match.</p>}
    </div>
  );
}