cuju-render 0.1.0__py3-none-any.whl

cuju/render/web/js/export/video-range.js

@@ -0,0 +1,185 @@
+// Copyright 2026 The cuju Authors
+// SPDX-License-Identifier: Apache-2.0
+
+// The range and settings of a video export, as the Export video dialog of the Watch page reads
+// them and the server's endpoint POST /api/matches/{id}/video takes them.
+
+import { formatNumber, serverText, t } from '../core/i18n.js';
+import { SIZE_PRESETS, checkSize, parseGraphicsScale, parseSafe } from './sizes.js';
+
+// The sizes, frame rates, qualities and cameras that the server accepts from the page. The sizes
+// are the shared presets of sizes.js, and a custom size takes any even width and height within
+// their limits.
+export const VIDEO_SIZES = SIZE_PRESETS;
+export const VIDEO_RATES = [24, 25, 30, 50, 60];
+export const VIDEO_QUALITIES = [
+    { id: 'draft', label: t('video.quality.draft') },
+    { id: 'standard', label: t('video.quality.standard') },
+    { id: 'high', label: t('video.quality.high') },
+];
+export const VIDEO_CAMERAS = [
+    { id: 'broadcast', label: t('video.camera.broadcast') },
+    { id: 'tactical', label: t('video.camera.tactical') },
+    { id: 'goal', label: t('video.camera.goal') },
+    { id: 'ball', label: t('video.camera.ball') },
+    { id: 'owner', label: t('video.camera.owner') },
+];
+// The longest export that the page asks for, in seconds, as the server's default limit.
+export const VIDEO_MAX_SECONDS = 600;
+// A goal's range runs from this long before the goal to this long after it.
+export const GOAL_BEFORE = 8;
+export const GOAL_AFTER = 4;
+
+// Reads a moment typed as seconds, such as 75 or 75.5, or as minutes and seconds, such as 1:15.
+// Returns the seconds, or null for text that names no moment.
+export function parseMoment(text) {
+    const value = String(text ?? '').trim();
+    let m = value.match(/^(\d+(?:\.\d+)?)$/);
+    if (m) {
+        return Number(m[1]);
+    }
+    m = value.match(/^(\d+):(\d{1,2}(?:\.\d+)?)$/);
+    if (m && Number(m[2]) < 60) {
+        return Number(m[1]) * 60 + Number(m[2]);
+    }
+    return null;
+}
+
+// Writes seconds as minutes and seconds with a tenth, such as 1:05.3, or 1:05 for whole seconds.
+export function formatMoment(seconds) {
+    const tenths = Math.max(0, Math.round(seconds * 10));
+    const whole = Math.floor(tenths / 10);
+    const text = `${Math.floor(whole / 60)}:${String(whole % 60).padStart(2, '0')}`;
+    return tenths % 10 ? `${text}.${tenths % 10}` : text;
+}
+
+// The range around a goal at the given seconds, kept within a recording of duration seconds.
+export function goalRange(at, duration) {
+    return { start: Math.max(0, at - GOAL_BEFORE), end: Math.min(duration, at + GOAL_AFTER) };
+}
+
+// Checks a range typed in the dialog against a recording of duration seconds. Returns the start
+// and end in seconds, or an error to show.
+export function checkRange(startText, endText, duration) {
+    const start = parseMoment(startText);
+    const end = parseMoment(endText);
+    if (start == null || end == null) {
+        return { error: t('video.range.unreadable') };
+    }
+    if (start >= duration) {
+        return { error: t('video.range.past_end', { end: formatMoment(duration) }) };
+    }
+    const last = Math.min(end, duration);
+    if (last <= start) {
+        return { error: t('video.range.order') };
+    }
+    if (last - start > VIDEO_MAX_SECONDS) {
+        return { error: t('video.range.too_long', { count: VIDEO_MAX_SECONDS / 60 }) };
+    }
+    return { start, end: last };
+}
+
+// The body of an export request, from a checked range and the choices of the dialog. The arena
+// and time of day come from the field settings of the page.
+export function exportRequest(range, choices, field) {
+    const size = videoSize(choices.size);
+    const body = {
+        start: Math.round(range.start * 1000) / 1000,
+        end: Math.round(range.end * 1000) / 1000,
+        camera: VIDEO_CAMERAS.some((c) => c.id === choices.camera) ? choices.camera : 'broadcast',
+        width: size.width,
+        height: size.height,
+        fps: VIDEO_RATES.includes(Number(choices.fps)) ? Number(choices.fps) : 30,
+        quality: VIDEO_QUALITIES.some((q) => q.id === choices.quality) ? choices.quality : 'standard',
+        score: choices.score !== false,
+    };
+    // The annotations show only when asked for, so the field stays out otherwise.
+    if (choices.annotations === true) {
+        body.annotations = true;
+    }
+    const graphics = graphicsScale(choices.scale);
+    if (graphics !== 1) {
+        body.scale = graphics;
+    }
+    const safe = safeChoice(choices.safe);
+    if (safe !== 'auto') {
+        body.safe = safe;
+    }
+    if (field && typeof field.arena === 'string') {
+        body.arena = field.arena;
+    }
+    if (field && typeof field.time === 'number' && Number.isFinite(field.time)) {
+        body.time = Math.min(24, Math.max(0, field.time));
+    }
+    return body;
+}
+
+// The size of a choice, a preset's identifier or a width and height, which a video needs even.
+// Anything else falls back to 720p.
+export function videoSize(choice) {
+    const preset = VIDEO_SIZES.find((s) => s.id === choice);
+    if (preset) {
+        return preset;
+    }
+    if (choice && typeof choice === 'object') {
+        try {
+            return checkSize(choice.width, choice.height, { even: true });
+        } catch {
+            // A size out of range falls back below.
+        }
+    }
+    return VIDEO_SIZES.find((s) => s.id === '720p');
+}
+
+function graphicsScale(value) {
+    try {
+        return parseGraphicsScale(value);
+    } catch {
+        return 1;
+    }
+}
+
+function safeChoice(value) {
+    try {
+        return parseSafe(value);
+    } catch {
+        return 'auto';
+    }
+}
+
+// The size of a file for people, in KB below a megabyte and in MB from there.
+export function fileSize(bytes) {
+    return bytes < 1e6
+        ? t('video.size.kb', { kb: Math.max(1, Math.round(bytes / 1e3)) })
+        : t('video.size.mb', { mb: formatNumber(bytes / 1e6, { minimumFractionDigits: 1, maximumFractionDigits: 1, useGrouping: false }) });
+}
+
+// The line of progress of an export entry from the server.
+export function progressText(entry) {
+    if (!entry) {
+        return '';
+    }
+    if (entry.state === 'done') {
+        // The entry may be an export of before, so the line names its range, which the fields of
+        // the dialog may no longer show.
+        if (typeof entry.start === 'number' && typeof entry.end === 'number') {
+            const range = { start: formatMoment(entry.start), end: formatMoment(entry.end) };
+            return entry.bytes ? t('video.progress.ready_range_size', { ...range, size: fileSize(entry.bytes) }) : t('video.progress.ready_range', range);
+        }
+        return entry.bytes ? t('video.progress.ready_size', { size: fileSize(entry.bytes) }) : t('video.progress.ready');
+    }
+    if (entry.state === 'failed') {
+        const error = serverText(entry);
+        return error ? t('video.progress.failed_reason', { error }) : t('video.progress.failed');
+    }
+    if (entry.state === 'cancelled') {
+        return t('video.progress.cancelled');
+    }
+    if (!entry.frame) {
+        return t(entry.browser ? 'video.browser.starting' : 'video.progress.starting');
+    }
+    if (entry.progress >= 1) {
+        return t('video.progress.finishing');
+    }
+    return t('video.progress.drawing', { frame: entry.frame, frames: entry.frames, percent: Math.round(entry.progress * 100) });
+}

cuju/render/web/js/export/webm-mux.js

@@ -0,0 +1,198 @@
+// Copyright 2026 The cuju Authors
+// SPDX-License-Identifier: Apache-2.0
+
+// A small writer of WebM files of one video track, VP9 or VP8, for the video export of a browser
+// without H.264. It writes the EBML header and a segment of Matroska, with a seek head, the
+// segment's information and its track, the frames in clusters that each start at a key frame, and
+// cues that point at the clusters, so a player seeks the file. The clusters gather into blobs as
+// they close, so a browser may keep a long video on its disk rather than in memory.
+
+const ID = {
+    ebml: 0x1a45dfa3, ebmlVersion: 0x4286, ebmlReadVersion: 0x42f7, maxIdLength: 0x42f2, maxSizeLength: 0x42f3,
+    docType: 0x4282, docTypeVersion: 0x4287, docTypeReadVersion: 0x4285,
+    segment: 0x18538067, seekHead: 0x114d9b74, seek: 0x4dbb, seekId: 0x53ab, seekPosition: 0x53ac,
+    info: 0x1549a966, timestampScale: 0x2ad7b1, duration: 0x4489, muxingApp: 0x4d80, writingApp: 0x5741,
+    tracks: 0x1654ae6b, trackEntry: 0xae, trackNumber: 0xd7, trackUid: 0x73c5, trackType: 0x83,
+    flagLacing: 0x9c, codecId: 0x86, codecPrivate: 0x63a2, defaultDuration: 0x23e383, video: 0xe0,
+    pixelWidth: 0xb0, pixelHeight: 0xba,
+    cluster: 0x1f43b675, timestamp: 0xe7, simpleBlock: 0xa3,
+    cues: 0x1c53bb6b, cuePoint: 0xbb, cueTime: 0xb3, cueTrackPositions: 0xb7, cueTrack: 0xf7,
+    cueClusterPosition: 0xf1,
+};
+
+// The codec names of Matroska for the codecs of the browser's encoder.
+export const WEBM_CODECS = Object.freeze({ vp8: 'V_VP8', vp09: 'V_VP9', av01: 'V_AV1' });
+
+// The bytes of an element's identifier, which carries its own length.
+function idBytes(id) {
+    const out = [];
+    for (let value = id; value > 0; value = Math.floor(value / 256)) {
+        out.unshift(value & 255);
+    }
+    return Uint8Array.from(out);
+}
+
+// A size as a variable length integer, of the given length or the shortest that holds it.
+export function sizeBytes(size, length = 0) {
+    let n = length;
+    if (!n) {
+        n = 1;
+        while (n < 8 && size >= 2 ** (7 * n) - 1) {
+            n++;
+        }
+    }
+    const out = new Uint8Array(n);
+    let value = BigInt(size);
+    for (let i = n - 1; i >= 0; i--) {
+        out[i] = Number(value & 255n);
+        value >>= 8n;
+    }
+    out[0] |= 1 << (8 - n);
+    return out;
+}
+
+function uintBytes(value, length = 0) {
+    let n = length;
+    if (!n) {
+        n = 1;
+        while (n < 8 && value >= 2 ** (8 * n)) {
+            n++;
+        }
+    }
+    const out = new Uint8Array(n);
+    let v = BigInt(value);
+    for (let i = n - 1; i >= 0; i--) {
+        out[i] = Number(v & 255n);
+        v >>= 8n;
+    }
+    return out;
+}
+
+function concat(parts) {
+    const out = new Uint8Array(parts.reduce((sum, p) => sum + p.length, 0));
+    let at = 0;
+    for (const p of parts) {
+        out.set(p, at);
+        at += p.length;
+    }
+    return out;
+}
+
+const text = (value) => Uint8Array.from(value, (c) => c.charCodeAt(0));
+
+// An element of an identifier and a body of bytes.
+function element(id, body) {
+    return concat([idBytes(id), sizeBytes(body.length), body]);
+}
+
+const master = (id, ...children) => element(id, concat(children));
+const uint = (id, value, length = 0) => element(id, uintBytes(value, length));
+
+function float(id, value) {
+    const body = new Uint8Array(8);
+    new DataView(body.buffer).setFloat64(0, value);
+    return element(id, body);
+}
+
+// Gathers the encoded frames of one video track and writes the file.
+export class WebmWriter {
+    // codec is the codec string of the encoder, such as vp09.00.41.08 or vp8.
+    constructor({ width, height, fps, codec }) {
+        this.width = width;
+        this.height = height;
+        this.fps = fps;
+        const family = Object.keys(WEBM_CODECS).find((key) => String(codec).startsWith(key));
+        if (!family) {
+            throw new Error(`WebM holds VP8, VP9 or AV1, not ${codec}.`);
+        }
+        this.codecId = WEBM_CODECS[family];
+        this.description = null;
+        this.clusters = [];
+        this.cues = [];
+        this.open = null;
+        this.position = 0;
+        this.bytes = 0;
+        this.count = 0;
+        this.end = 0;
+    }
+
+    // Adds one encoded frame, its bytes, its time and length in microseconds and whether it is a
+    // key frame.
+    add(data, { timestamp, duration, key, description }) {
+        if (description && !this.description) {
+            const view = description instanceof ArrayBuffer ? new Uint8Array(description) : new Uint8Array(description.buffer, description.byteOffset, description.byteLength);
+            this.description = view.slice();
+        }
+        const bytes = data instanceof Uint8Array ? data : new Uint8Array(data);
+        const ms = Math.round(timestamp / 1000);
+        if (!this.open || key || ms - this.open.time > 32767) {
+            this.close();
+            this.open = { time: ms, parts: [uint(ID.timestamp, ms)], size: 0 };
+            this.open.size = this.open.parts[0].length;
+            if (key) {
+                this.cues.push({ time: ms, position: this.position });
+            }
+        }
+        const head = new Uint8Array(4);
+        head[0] = 0x81;
+        new DataView(head.buffer).setInt16(1, ms - this.open.time);
+        head[3] = key ? 0x80 : 0;
+        const block = concat([idBytes(ID.simpleBlock), sizeBytes(head.length + bytes.length), head]);
+        this.open.parts.push(block, bytes);
+        this.open.size += block.length + bytes.length;
+        this.bytes += bytes.length;
+        this.count++;
+        this.end = Math.max(this.end, (timestamp + duration) / 1000);
+    }
+
+    // Closes the open cluster into a blob, or a list of byte arrays where the runtime has none.
+    close() {
+        if (!this.open) {
+            return;
+        }
+        const head = concat([idBytes(ID.cluster), sizeBytes(this.open.size, 8)]);
+        const parts = [head, ...this.open.parts];
+        this.clusters.push(typeof Blob === 'function' ? new Blob(parts) : parts);
+        this.position += head.length + this.open.size;
+        this.open = null;
+    }
+
+    // The finished file as a blob of the type video/webm, or as a list of byte arrays where the
+    // runtime has no Blob.
+    finish() {
+        if (!this.count) {
+            throw new Error('The video holds no frames.');
+        }
+        this.close();
+        const header = master(ID.ebml,
+            uint(ID.ebmlVersion, 1), uint(ID.ebmlReadVersion, 1), uint(ID.maxIdLength, 4), uint(ID.maxSizeLength, 8),
+            element(ID.docType, text('webm')), uint(ID.docTypeVersion, 4), uint(ID.docTypeReadVersion, 2));
+        const info = master(ID.info, uint(ID.timestampScale, 1e6), float(ID.duration, this.end),
+            element(ID.muxingApp, text('cuju')), element(ID.writingApp, text('cuju')));
+        const entry = [
+            uint(ID.trackNumber, 1), uint(ID.trackUid, 1), uint(ID.trackType, 1), uint(ID.flagLacing, 0),
+            element(ID.codecId, text(this.codecId)),
+        ];
+        if (this.description) {
+            entry.push(element(ID.codecPrivate, this.description));
+        }
+        entry.push(uint(ID.defaultDuration, Math.round(1e9 / this.fps)),
+            master(ID.video, uint(ID.pixelWidth, this.width), uint(ID.pixelHeight, this.height)));
+        const tracks = master(ID.tracks, master(ID.trackEntry, ...entry));
+        // The seek head takes positions of eight bytes, so its size is known before the positions.
+        const seekHead = (positions) => master(ID.seekHead, ...positions.map(([id, at]) => master(ID.seek,
+            element(ID.seekId, idBytes(id)), uint(ID.seekPosition, at, 8))));
+        const headSize = seekHead([[ID.info, 0], [ID.tracks, 0], [ID.cues, 0]]).length;
+        const first = headSize + info.length + tracks.length;
+        const cues = master(ID.cues, ...this.cues.map((cue) => master(ID.cuePoint, uint(ID.cueTime, cue.time),
+            master(ID.cueTrackPositions, uint(ID.cueTrack, 1), uint(ID.cueClusterPosition, first + cue.position)))));
+        const seek = seekHead([[ID.info, headSize], [ID.tracks, headSize + info.length], [ID.cues, first + this.position]]);
+        const segmentSize = first + this.position + cues.length;
+        const segment = concat([idBytes(ID.segment), sizeBytes(segmentSize, 8)]);
+        const parts = [header, segment, seek, info, tracks, ...this.clusters, cues];
+        if (typeof Blob === 'function') {
+            return new Blob(parts, { type: 'video/webm' });
+        }
+        return parts.flat();
+    }
+}

cuju/render/web/js/feed-boot.js

@@ -0,0 +1,151 @@
+// Copyright 2026 The cuju Authors
+// SPDX-License-Identifier: Apache-2.0
+
+// The start of the page as a clean feed, active only when the address carries the query parameter
+// feed, as the frame of /feed gives it. It runs before main.js, so the viewer starts with the
+// feed's own settings. The settings live in memory for the visit, so a feed never changes the
+// settings that the browser keeps for the page, and the same address always looks the same. The
+// pointer stays free, keys and controllers reach nothing, and the page opens on Watch.
+
+import { parseFeed } from './export/feed-params.js';
+
+const params = new URLSearchParams(location.search);
+
+// Settings in memory, with the interface of localStorage.
+export class MemoryStorage {
+    constructor(entries) {
+        this.map = new Map(entries);
+    }
+
+    get length() {
+        return this.map.size;
+    }
+
+    key(index) {
+        return [...this.map.keys()][index] ?? null;
+    }
+
+    getItem(key) {
+        return this.map.has(String(key)) ? this.map.get(String(key)) : null;
+    }
+
+    setItem(key, value) {
+        this.map.set(String(key), String(value));
+    }
+
+    removeItem(key) {
+        this.map.delete(String(key));
+    }
+
+    clear() {
+        this.map.clear();
+    }
+}
+
+// The stored settings that give the feed its look, from its checked options.
+export function feedSettings(options) {
+    const broadcast = options.broadcast;
+    const remembered = ['broadcast', 'tactical', 'goal'].includes(options.camera) ? options.camera : 'broadcast';
+    const settings = {
+        muted: !options.audio,
+        volume: options.volume,
+        quality: options.quality,
+        theme: options.theme,
+        tvMode: true,
+        idleReturn: false,
+        pointerLock: false,
+        camera: remembered,
+        lineups: broadcast,
+        celebrations: broadcast,
+        replays: broadcast,
+        decisionReplays: broadcast,
+        transitions: broadcast,
+        podium: broadcast && options.show,
+        tips: { off: true },
+        playerLabels: false,
+        clickFollow: false,
+        view2dDeclined: true,
+        touchControls: 'off',
+        annotations: { players: false, actions: false, text: false },
+        captions: options.captions,
+    };
+    const field = {};
+    if (options.arena) {
+        field.arena = options.arena;
+    }
+    if (options.time != null) {
+        field.time = options.time;
+    }
+    if (Object.keys(field).length) {
+        settings.field = field;
+    }
+    return settings;
+}
+
+function boot() {
+    const { options, problems } = parseFeed(params);
+    const settings = feedSettings(options);
+    const storage = new MemoryStorage(Object.entries(settings).map(([key, value]) => [`cuju.${key}`, JSON.stringify(value)]));
+    try {
+        Object.defineProperty(window, 'localStorage', { configurable: true, get: () => storage });
+    } catch {
+        // A browser that keeps its storage fixed runs the feed on the stored settings.
+    }
+    // The frame of /feed scales the page up to the picture, so the drawing takes the picture's
+    // own pixels rather than those of the layout.
+    let ratio = Math.min(8, Math.max(0.25, Number(params.get('ratio')) || window.devicePixelRatio || 1));
+    try {
+        Object.defineProperty(window, 'devicePixelRatio', { configurable: true, get: () => ratio });
+    } catch {
+        // The drawing then takes the window's own ratio.
+    }
+    Element.prototype.requestPointerLock = function () {
+        return Promise.reject(new Error('The pointer stays free in a feed.'));
+    };
+    Object.defineProperty(navigator, 'getGamepads', { configurable: true, value: () => [] });
+    // Keys reach nothing, a feed shows the match on its own.
+    for (const type of ['keydown', 'keyup', 'keypress']) {
+        window.addEventListener(type, (e) => {
+            e.stopImmediatePropagation();
+            e.preventDefault();
+        }, true);
+    }
+    window.addEventListener('contextmenu', (e) => e.preventDefault(), true);
+    history.replaceState(null, '', `${location.pathname}${location.search}#page=watch`);
+    const root = document.documentElement;
+    root.classList.add('cuju-feed');
+    root.dataset.feedLayer = options.layer;
+    root.dataset.feedBackground = options.background === 'transparent' ? 'transparent' : 'solid';
+    root.style.setProperty('--feed-background', options.background);
+    if (!options.score) {
+        root.classList.add('feed-no-score');
+    }
+    window.cujuFeed = {
+        options,
+        problems,
+        ready: false,
+        broken: null,
+        alive: Date.now(),
+        get ratio() {
+            return ratio;
+        },
+        // The frame calls this when the window changes size, and the page then draws anew.
+        setRatio(value) {
+            const next = Math.min(8, Math.max(0.25, Number(value) || 1));
+            if (next !== ratio) {
+                ratio = next;
+                const app = window.cuju;
+                if (app && app.view && app.settings) {
+                    app.view.setQuality(app.settings.quality);
+                }
+            }
+        },
+    };
+    for (const problem of problems) {
+        console.warn(`cuju feed: ${problem}`);
+    }
+}
+
+if (params.has('feed')) {
+    boot();
+}

cuju/render/web/js/feed-frame.js

@@ -0,0 +1,101 @@
+// Copyright 2026 The cuju Authors
+// SPDX-License-Identifier: Apache-2.0
+
+// The frame of the clean feed, the page at /feed. It lays the Watch page out at the size that
+// keeps the graphics in proportion, as layoutFor of sizes.js gives it, and scales the frame up to
+// the picture, so a feed of 1920 by 1080 shows the graphics as the page shows them at 1280 by
+// 720, and a vertical feed lays out 720 wide. A window of another size than the picture fits the
+// picture inside it, centered. The page inside draws at the picture's own pixels, and a page
+// that stops answering, fails to load or loses its graphics context loads again. The page inside
+// takes the whole query of the feed's address, so the parameter lang names the language of the
+// feed, as i18n.js reads it, and a feed without one follows the language of the browser.
+
+import './core/i18n.js';
+import { frameScheme, parseFeed } from './export/feed-params.js';
+
+// A page that has not started this long after it loaded, or has not answered this long, loads
+// again. The check pauses while the window is hidden.
+const START_MS = 20000;
+const SILENT_MS = 30000;
+const CHECK_MS = 5000;
+
+const frame = document.getElementById('feed-frame');
+const query = location.search.replace(/^\?/, '');
+const { options } = parseFeed(query);
+document.documentElement.style.background = options.background;
+document.body.style.background = options.background;
+// The frame takes the color scheme of the page inside it. Chrome paints an opaque backdrop behind
+// a frame whose page has another scheme than the frame itself, which a transparent feed would show.
+frame.style.colorScheme = frameScheme(options.theme);
+
+// Places the frame and returns the ratio of the picture's pixels to the layout's.
+function place() {
+    const { width, height, layout } = options;
+    const vw = window.innerWidth || width;
+    const vh = window.innerHeight || height;
+    const fit = Math.min(vw / width, vh / height) || 1;
+    const sx = (width * fit) / layout.width;
+    const sy = (height * fit) / layout.height;
+    frame.style.width = `${layout.width}px`;
+    frame.style.height = `${layout.height}px`;
+    frame.style.transform = `translate(${(vw - width * fit) / 2}px, ${(vh - height * fit) / 2}px) scale(${sx}, ${sy})`;
+    return Math.max(sx, sy) * (window.devicePixelRatio || 1);
+}
+
+let ratio = place();
+let loadedAt = performance.now();
+
+function load() {
+    loadedAt = performance.now();
+    frame.src = `./?feed=1${query ? `&${query}` : ''}&ratio=${ratio.toFixed(4)}#page=watch`;
+}
+
+function inner() {
+    try {
+        return frame.contentWindow && frame.contentWindow.cujuFeed;
+    } catch {
+        // A page of the browser's own, such as an error page, is out of reach.
+        return null;
+    }
+}
+
+frame.addEventListener('load', () => {
+    loadedAt = performance.now();
+});
+
+window.addEventListener('resize', () => {
+    ratio = place();
+    const feed = inner();
+    if (feed) {
+        feed.setRatio(ratio);
+    }
+});
+
+setInterval(() => {
+    if (document.hidden) {
+        return;
+    }
+    const feed = inner();
+    const now = performance.now();
+    const stale = feed
+        ? !!feed.broken || (feed.ready && Date.now() - feed.alive > SILENT_MS) || (!feed.ready && now - loadedAt > START_MS)
+        : now - loadedAt > START_MS;
+    if (stale) {
+        load();
+    }
+}, CHECK_MS);
+
+// Scripts that hold this window reach the feed's state here as well.
+window.cujuFeedFrame = {
+    options,
+    get ratio() {
+        return ratio;
+    },
+    state: () => {
+        const app = frame.contentWindow && frame.contentWindow.cuju;
+        return app && app.feed ? app.feed.state() : null;
+    },
+    reload: load,
+};
+
+load();