infra/stacks/f1-stream/files/frontend/src/lib/api.js
Viktor Barzin 89c59ccc80 f1-stream: only show streams confirmed playable by headless browser
Cuts the stream list from 23 mostly-broken entries to ~6 confirmed-playable
ones, and adds an iframe-stripping proxy so embed sources (hmembeds, etc.)
load through our origin without X-Frame-Options / CSP / JS frame-buster
blocks.

Why: the previous list was dominated by Discord-shared news article URLs,
hardcoded aggregator landing pages, and other non-stream URLs that all sat
at is_live=true because embed streams skipped the health check entirely.
Users could not tell which links would actually play.

What:
- backend/playback_verifier.py: new headless-Chromium verifier (Playwright)
  that polls each candidate stream for a codec-independent "playable" signal
  (hls.js MANIFEST_PARSED for m3u8; <video>/player div for embed). Replaces
  the unconditional is_live=True for embed streams in service.py.
- backend/embed_proxy.py: new /embed and /embed-asset routes that fetch
  upstream embed pages, strip X-Frame-Options/CSP/Set-Cookie, and inject a
  <base href> + frame-buster-defeat <script> that locks down window.top,
  document.referrer, console.clear/table, and window.location so the
  hmembeds disable-devtool.js redirect-to-google trap can't fire.
- extractors/curated.py: new always-on extractor with two known-good 24/7
  hmembeds embeds (Sky Sports F1, DAZN F1) so the list isn't empty between
  race weekends.
- extractors/__init__.py: register CuratedExtractor first; drop
  FallbackExtractor (its 10 aggregator landing-pages can't iframe-play).
- extractors/discord_source.py: positive-match path filter (must look like
  /embed/, /stream, /watch, /live, /player, *.m3u8, *.php) plus expanded
  domain blocklist for news sites — was 10 noise URLs, now ~1.
- extractors/service.py: run_extraction now health-checks AND verifier-
  checks both stream types; only verified-playable streams reach is_live.
- main.py: register /embed + /embed-asset routes; defer initial extraction
  by 8s so the verifier can reach the local /embed proxy on 127.0.0.1:8000.
- frontend/lib/api.js + watch/+page.svelte: route embed iframes through
  /embed proxy instead of the upstream URL, so X-Frame-Options/CSP can't
  block them.
- Dockerfile: install Playwright chromium + system codec-runtime libs.
- main.tf: bump pod memory 256Mi → 1Gi for chromium.

Verified end-to-end with Playwright against
https://f1.viktorbarzin.me/watch — 6/6 streams reach a player UI; the 3
demo m3u8s actually play (codec-bearing browser); the 3 embeds (Sky
Sports F1, DAZN F1, sportsurge) render iframes through the proxy.

Image: viktorbarzin/f1-stream:v6.0.5

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
2026-05-06 21:00:07 +00:00

88 lines
2.6 KiB
JavaScript

/**
* API client for the F1 Streams backend.
* All endpoints are on the same origin, so no CORS issues.
*/
const API_BASE = '';
/**
* Fetch the F1 race schedule with session statuses.
* @returns {Promise<{season: string, fetched_at: string, races: Array}>}
*/
export async function fetchSchedule() {
const res = await fetch(`${API_BASE}/schedule`);
if (!res.ok) throw new Error(`Schedule fetch failed: ${res.status}`);
return res.json();
}
/**
* Fetch available live streams.
* @returns {Promise<{streams: Array, count: number}>}
*/
export async function fetchStreams() {
const res = await fetch(`${API_BASE}/streams`);
if (!res.ok) throw new Error(`Streams fetch failed: ${res.status}`);
return res.json();
}
/**
* Encode a URL to base64url for the proxy endpoint.
* @param {string} rawUrl - The original m3u8 URL
* @returns {string} base64url-encoded string
*/
function toBase64Url(rawUrl) {
return btoa(rawUrl).replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '');
}
/**
* Get the proxied m3u8 URL for HLS playback.
* @param {string} m3u8Url - The original m3u8 URL
* @returns {string} The proxy URL
*/
export function getProxyUrl(m3u8Url) {
const encoded = toBase64Url(m3u8Url);
return `${API_BASE}/proxy?url=${encoded}`;
}
/**
* Get the embed-proxy URL for an upstream iframe embed page.
*
* The proxy strips X-Frame-Options / CSP frame-ancestors and injects a
* frame-buster-defeat script so the embed renders inside our iframe even
* when the upstream tries to block it.
* @param {string} embedUrl - The original embed page URL
* @returns {string} URL pointing at our /embed proxy
*/
export function getEmbedProxyUrl(embedUrl) {
const encoded = toBase64Url(embedUrl);
return `${API_BASE}/embed?url=${encoded}`;
}
/**
* Mark a stream as actively being watched (enables token refresh).
* @param {string} url - The stream URL
* @param {string} [siteKey] - Optional site key
*/
export async function activateStream(url, siteKey = '') {
const res = await fetch(`${API_BASE}/streams/activate`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ url, site_key: siteKey })
});
if (!res.ok) throw new Error(`Activate failed: ${res.status}`);
return res.json();
}
/**
* Mark a stream as no longer being watched.
* @param {string} url - The stream URL
*/
export async function deactivateStream(url) {
const res = await fetch(`${API_BASE}/streams/deactivate`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ url })
});
if (!res.ok) throw new Error(`Deactivate failed: ${res.status}`);
return res.json();
}