cuju-render 0.1.0__py3-none-any.whl

cuju/render/web/js/export/dom-picture.js

@@ -0,0 +1,330 @@
+// Copyright 2026 The cuju Authors
+// SPDX-License-Identifier: Apache-2.0
+
+// The graphics of a page as a picture, for the video export of the browser. The scoreboard, the
+// banners, the captions and every other part of the page over the view are HTML, which a canvas
+// cannot draw by itself, so each frame writes the shown part of the page as XHTML with the page's
+// own styles into an SVG image, which the browser lays out and draws as it lays out the page. The
+// view's own canvas stays empty in the picture and is drawn beneath it, so the backgrounds behind
+// the view turn clear. CSS animations show at the moment they have reached, each animated value
+// written onto its element. Pictures of the page become data addresses, since an SVG image loads
+// nothing of its own.
+
+const XHTML = 'http://www.w3.org/1999/xhtml';
+const SVG = 'http://www.w3.org/2000/svg';
+// Elements that never show or that the styles already hold.
+const SKIPPED = new Set(['script', 'style', 'link', 'meta', 'title', 'template', 'noscript', 'head', 'iframe', 'audio', 'video']);
+// Properties of an animation's keyframes that name no style.
+const NOT_STYLES = new Set(['offset', 'easing', 'composite', 'computedOffset']);
+
+const escapeText = (value) => value.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+const escapeAttribute = (value) => escapeText(value).replace(/"/g, '&quot;').replace(/\n/g, '&#10;');
+// Characters that XML refuses, which an attribute or a text may still hold.
+// eslint-disable-next-line no-control-regex
+const clean = (value) => value.replace(/[\u0000-\u0008\u000b\u000c\u000e-\u001f￾￿]/g, '');
+
+// Reads a blob as a data address.
+function dataAddress(blob) {
+    return new Promise((resolve, reject) => {
+        const reader = new FileReader();
+        reader.onload = () => resolve(reader.result);
+        reader.onerror = () => reject(reader.error);
+        reader.readAsDataURL(blob);
+    });
+}
+
+// Whether this browser draws an SVG image with HTML inside into a canvas that it can still read,
+// which the export needs. Some browsers mark such a canvas as unreadable.
+export async function readableHtmlPictures() {
+    try {
+        const svg = `<svg xmlns="${SVG}" width="4" height="4"><foreignObject width="4" height="4"><div xmlns="${XHTML}" style="width:4px;height:4px;background:#f00"></div></foreignObject></svg>`;
+        const image = new Image();
+        image.src = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg)}`;
+        await image.decode();
+        const canvas = document.createElement('canvas');
+        canvas.width = 4;
+        canvas.height = 4;
+        const context = canvas.getContext('2d');
+        context.drawImage(image, 0, 0);
+        return context.getImageData(1, 1, 1, 1).data[0] > 128;
+    } catch {
+        return false;
+    }
+}
+
+export class DomPicture {
+    // win is the window of the page, view the canvas that is drawn beneath the picture, width and
+    // height the size of the page's layout in CSS pixels.
+    constructor(win, view, width, height) {
+        this.win = win;
+        this.doc = win.document;
+        this.view = view;
+        this.width = width;
+        this.height = height;
+        this.urls = new Map();
+        this.stylesKey = '';
+        this.styles = '';
+        this.markup = '';
+        this.image = null;
+    }
+
+    // The text of every style sheet of the page, gathered again whenever a sheet or rule changes.
+    async gatherStyles() {
+        const sheets = [...this.doc.styleSheets];
+        let key = `${sheets.length}`;
+        for (const sheet of sheets) {
+            try {
+                key += `,${sheet.cssRules.length}`;
+            } catch {
+                key += ',x';
+            }
+        }
+        if (key === this.stylesKey) {
+            return;
+        }
+        const texts = [];
+        for (const sheet of sheets) {
+            if (sheet.disabled) {
+                continue;
+            }
+            let rules;
+            try {
+                rules = [...sheet.cssRules];
+            } catch {
+                continue;
+            }
+            const base = sheet.href || this.doc.baseURI;
+            let text = rules.map((rule) => rule.cssText).join('\n');
+            text = await this.inlineUrls(text, base);
+            const media = sheet.media && sheet.media.mediaText;
+            texts.push(media ? `@media ${media} {\n${text}\n}` : text);
+        }
+        this.styles = texts.join('\n');
+        this.stylesKey = key;
+    }
+
+    // The data address of a file of the page, fetched once.
+    async dataOf(address) {
+        if (!address || address.startsWith('data:')) {
+            return address;
+        }
+        let url;
+        try {
+            url = new URL(address, this.doc.baseURI).href;
+        } catch {
+            return '';
+        }
+        if (!this.urls.has(url)) {
+            this.urls.set(url, (async () => {
+                try {
+                    const response = await this.win.fetch(url);
+                    return response.ok ? await dataAddress(await response.blob()) : '';
+                } catch {
+                    return '';
+                }
+            })());
+        }
+        return this.urls.get(url);
+    }
+
+    // The text with each url() of a file made a data address.
+    async inlineUrls(text, base) {
+        const found = [...text.matchAll(/url\(\s*(['"]?)([^'")]+)\1\s*\)/g)];
+        if (!found.length) {
+            return text;
+        }
+        let out = text;
+        for (const match of found) {
+            const address = match[2];
+            if (address.startsWith('data:') || address.startsWith('#')) {
+                continue;
+            }
+            let url;
+            try {
+                url = new URL(address, base).href;
+            } catch {
+                continue;
+            }
+            const data = await this.dataOf(url);
+            out = out.split(match[0]).join(data ? `url("${data}")` : 'none');
+        }
+        return out;
+    }
+
+    // The values that the animations of the page have reached, by element, as styles to write.
+    animated() {
+        const out = new Map();
+        for (const animation of this.doc.getAnimations()) {
+            const effect = animation.effect;
+            const target = effect && effect.target;
+            if (!target || effect.pseudoElement) {
+                continue;
+            }
+            const names = new Set();
+            if (typeof animation.transitionProperty === 'string') {
+                names.add(animation.transitionProperty);
+            } else if (typeof effect.getKeyframes === 'function') {
+                for (const frame of effect.getKeyframes()) {
+                    for (const name of Object.keys(frame)) {
+                        if (!NOT_STYLES.has(name)) {
+                            names.add(name.replace(/[A-Z]/g, (c) => `-${c.toLowerCase()}`));
+                        }
+                    }
+                }
+            }
+            const style = this.win.getComputedStyle(target);
+            const list = out.get(target) || [];
+            for (const name of names) {
+                const value = style.getPropertyValue(name);
+                if (value) {
+                    list.push(`${name}: ${value} !important`);
+                }
+            }
+            out.set(target, list);
+        }
+        return out;
+    }
+
+    // Writes an element and what it holds as XHTML, leaving out what does not show.
+    async write(node, out, context) {
+        if (node.nodeType === 3) {
+            out.push(escapeText(clean(node.data)));
+            return;
+        }
+        if (node.nodeType !== 1) {
+            return;
+        }
+        const tag = node.localName;
+        if (SKIPPED.has(tag) || (tag === 'dialog' && !node.open)) {
+            return;
+        }
+        const svg = node.namespaceURI === SVG;
+        if (!svg && node.hidden && node !== this.doc.body) {
+            return;
+        }
+        // The parts of an SVG that only other parts use, its symbols and definitions, never show
+        // by themselves, so their own display says nothing.
+        const used = context.defs || (svg && (tag === 'defs' || tag === 'symbol'));
+        if (!used && this.win.getComputedStyle(node).display === 'none') {
+            return;
+        }
+        let name = tag;
+        const attributes = [];
+        let extra = context.animated.get(node) || [];
+        if (context.clear.has(node)) {
+            extra = [...extra, 'background: transparent !important', 'background-image: none !important'];
+        }
+        let source = null;
+        if (tag === 'canvas') {
+            if (node !== this.view) {
+                // Another canvas shows as a picture of itself.
+                try {
+                    source = node.toDataURL();
+                } catch {
+                    source = '';
+                }
+                name = 'img';
+                extra = [...extra, `width: ${node.clientWidth}px`, `height: ${node.clientHeight}px`];
+            }
+        } else if (tag === 'img') {
+            source = await this.dataOf(node.currentSrc || node.getAttribute('src') || '');
+        }
+        for (const attribute of node.attributes) {
+            const key = attribute.name;
+            if (key.startsWith('on') || key === 'src' || key === 'srcset' || key === 'xmlns' || key.startsWith('xmlns:')) {
+                continue;
+            }
+            if (tag === 'canvas' && node !== this.view && (key === 'width' || key === 'height')) {
+                continue;
+            }
+            let value = attribute.value;
+            if (key === 'style' && value.includes('url(')) {
+                value = await this.inlineUrls(value, this.doc.baseURI);
+            }
+            if (key === 'style' && extra.length) {
+                value = `${value};${extra.join(';')}`;
+                extra = [];
+            }
+            if ((key === 'value' || key === 'checked') && tag === 'input') {
+                continue;
+            }
+            attributes.push(` ${key}="${escapeAttribute(clean(value))}"`);
+        }
+        if (extra.length) {
+            attributes.push(` style="${escapeAttribute(extra.join(';'))}"`);
+        }
+        if (tag === 'input') {
+            if (node.type === 'checkbox' || node.type === 'radio') {
+                if (node.checked) {
+                    attributes.push(' checked="checked"');
+                }
+            } else {
+                attributes.push(` value="${escapeAttribute(clean(String(node.value)))}"`);
+            }
+        }
+        if (source !== null) {
+            attributes.push(` src="${escapeAttribute(source)}"`);
+        }
+        if (svg && node.parentNode && node.parentNode.namespaceURI !== SVG) {
+            attributes.push(` xmlns="${SVG}" xmlns:xlink="http://www.w3.org/1999/xlink"`);
+        }
+        const children = name === 'img' ? [] : node.childNodes;
+        if (!children.length) {
+            out.push(`<${name}${attributes.join('')}/>`);
+            return;
+        }
+        out.push(`<${name}${attributes.join('')}>`);
+        if (tag === 'textarea') {
+            out.push(escapeText(clean(node.value)));
+        } else {
+            const inner = used && !context.defs ? { ...context, defs: true } : context;
+            for (const child of children) {
+                await this.write(child, out, inner);
+            }
+        }
+        out.push(`</${name}>`);
+    }
+
+    // The SVG markup of the page as it shows now.
+    async markupNow() {
+        await this.gatherStyles();
+        const root = this.doc.documentElement;
+        const clear = new Set();
+        for (let node = this.view; node; node = node.parentElement) {
+            clear.add(node);
+        }
+        const context = { animated: this.animated(), clear };
+        const body = [];
+        await this.write(this.doc.body, body, context);
+        const rootAttributes = [...root.attributes]
+            .filter((a) => !a.name.startsWith('xmlns') && a.name !== 'style')
+            .map((a) => ` ${a.name}="${escapeAttribute(clean(a.value))}"`).join('');
+        const rootStyle = escapeAttribute(clean(root.getAttribute('style') || ''));
+        // The root of the image is the SVG element, which the rules for the page's root then match,
+        // so it takes the attributes of the page's root as well.
+        const overrides = [
+            '*, *::before, *::after { animation: none !important; transition: none !important; caret-color: transparent !important; }',
+            ':root, html, body { background: transparent !important; overflow: hidden !important; }',
+        ].join('\n');
+        const { width, height } = this;
+        return `<svg xmlns="${SVG}" width="${width}" height="${height}" viewBox="0 0 ${width} ${height}"${rootAttributes} style="${rootStyle}">`
+            + `<foreignObject x="0" y="0" width="${width}" height="${height}">`
+            + `<html xmlns="${XHTML}"${rootAttributes} style="${rootStyle};width:${width}px;height:${height}px">`
+            + `<head><style>${escapeText(this.styles)}\n${overrides}</style></head>`
+            + `${body.join('')}</html></foreignObject></svg>`;
+    }
+
+    // Draws the graphics of the page over a context of the picture's size.
+    async draw(context, width, height) {
+        const markup = await this.markupNow();
+        if (markup !== this.markup || !this.image) {
+            const image = new Image();
+            image.decoding = 'sync';
+            image.src = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(markup)}`;
+            await image.decode();
+            this.image = image;
+            this.markup = markup;
+        }
+        context.drawImage(this.image, 0, 0, width, height);
+    }
+}

cuju/render/web/js/export/export-host.js

@@ -0,0 +1,97 @@
+// Copyright 2026 The cuju Authors
+// SPDX-License-Identifier: Apache-2.0
+
+// The page of the command cuju render video, export.html, which src/cuju/render/_export/video.py
+// opens in a headless Chrome, Edge or Chromium. It runs the browser's own export of
+// video-browser.js, so the command needs no program beyond the browser, and the command follows
+// it through window.cujuVideoExport over the debugging protocol. It asks what the browser can
+// encode, starts one export, reads its state, cancels it and hands the finished file back in
+// pieces of base64, so neither side holds the file twice in memory.
+
+import { BrowserExport, hasEncoder } from './video-browser.js';
+import { readableHtmlPictures } from './dom-picture.js';
+import { chooseEncoder, encoderCandidates } from './video-plan.js';
+
+let job = null;
+let state = { state: 'idle' };
+let result = null;
+
+// The encoder of each container at a size, or null where the browser has none.
+async function support(width, height, fps, quality) {
+    const out = { mp4: null, webm: null, pictures: await readableHtmlPictures() };
+    if (!hasEncoder()) {
+        return out;
+    }
+    for (const container of ['mp4', 'webm']) {
+        const chosen = await chooseEncoder(encoderCandidates(width, height, fps, quality, container), (config) => VideoEncoder.isConfigSupported(config));
+        out[container] = chosen ? chosen.config.codec : null;
+    }
+    return out;
+}
+
+// Starts an export. options holds the recording's match and title, the body of the export, the
+// container, the language and the limits of frames and bytes.
+function start(options) {
+    if (job) {
+        throw new Error('An export runs already.');
+    }
+    result = null;
+    state = { state: 'running', frame: 0, progress: 0 };
+    const current = new BrowserExport({
+        match: options.match,
+        title: options.title,
+        body: options.body,
+        lang: options.lang,
+        container: options.container,
+        maxFrames: options.maxFrames,
+        maxBytes: options.maxBytes,
+        report: (entry) => {
+            if (job === current) {
+                state = { ...entry };
+            }
+        },
+    });
+    job = current;
+    current.run().then((done) => {
+        result = done;
+        const { blob, ...facts } = done;
+        state = { ...facts, state: 'done' };
+    }, (error) => {
+        state = error && error.id === 'cancelled'
+            ? { state: 'cancelled' }
+            : { state: 'failed', id: error && error.id, values: (error && error.values) || {}, message: String((error && error.message) || error) };
+    }).finally(() => {
+        job = null;
+    });
+    return true;
+}
+
+// The bytes of the finished file from start, at most length of them, as base64.
+async function read(from, length) {
+    if (!result) {
+        return '';
+    }
+    const bytes = new Uint8Array(await result.blob.slice(from, from + length).arrayBuffer());
+    let text = '';
+    for (let i = 0; i < bytes.length; i += 32768) {
+        text += String.fromCharCode(...bytes.subarray(i, i + 32768));
+    }
+    return btoa(text);
+}
+
+window.cujuVideoExport = {
+    support,
+    start,
+    read,
+    state: () => state,
+    cancel: () => {
+        if (job) {
+            job.cancel();
+        }
+        return true;
+    },
+    clear: () => {
+        result = null;
+        return true;
+    },
+};

cuju/render/web/js/export/feed-dialog.js

@@ -0,0 +1,191 @@
+// Copyright 2026 The cuju Authors
+// SPDX-License-Identifier: Apache-2.0
+
+// The Copy feed address dialog of the Watch page. It writes the address of a clean feed, the page
+// at /feed that a browser source of OBS or another streaming program shows, from what the feed
+// follows, its size, the scale and safe area of its graphics, its background, whether it shows
+// the graphics alone, its camera, its sound and its frame rate, and copies the address or opens
+// the feed in a new tab. The server's live sources and tournaments join the sources it follows.
+
+import { h } from '../teams/library.js';
+import { icon, symbolOnly } from '../core/icons.js';
+import { feedAddress, namedSources } from './feed-params.js';
+import { serverText, t, tn } from '../core/i18n.js';
+import { sizeFields } from './size-fields.js';
+import { VIDEO_CAMERAS } from './video-range.js';
+
+// The sources that the dialog offers beside the open match.
+const FOLLOW = [
+    ['auto', t('feed.dialog.follow.auto')],
+    ['live', t('feed.dialog.follow.live')],
+    ['latest', t('feed.dialog.follow.latest')],
+    ['tournament', t('feed.dialog.follow.tournament')],
+    ['queue', t('feed.dialog.follow.queue')],
+];
+const BACKGROUNDS = [
+    ['black', t('feed.dialog.background.black')],
+    ['transparent', t('feed.dialog.background.transparent')],
+    ['green', t('feed.dialog.background.green')],
+];
+const RATES = [
+    ['0', t('feed.dialog.rate.display')],
+    ['30', t('feed.dialog.rate.option', { rate: 30 })],
+    ['60', t('feed.dialog.rate.option', { rate: 60 })],
+];
+
+// The source of the open match, a recording of the library or a live source of this server.
+export function openSource(source) {
+    if (!source || source.game) {
+        return null;
+    }
+    if (source.kind === 'match') {
+        return { value: `recording:${source.id}`, label: t('feed.dialog.follow.this_recording') };
+    }
+    if (source.kind === 'live' && source.live && !source.live.url) {
+        return { value: `live:${source.id}`, label: t('feed.dialog.follow.this_live') };
+    }
+    return null;
+}
+
+export class FeedDialog {
+    constructor(app) {
+        this.app = app;
+        this.dialog = h('dialog', { class: 'feed-address', 'aria-labelledby': 'feed-address-title' });
+        document.getElementById('app').appendChild(this.dialog);
+        this.dialog.addEventListener('input', () => this.update());
+        this.dialog.addEventListener('change', () => this.update());
+    }
+
+    open() {
+        if (this.dialog.open) {
+            return;
+        }
+        if (document.pointerLockElement) {
+            document.exitPointerLock();
+        }
+        this.render();
+        this.dialog.showModal();
+        this.update();
+        this.addNamed();
+    }
+
+    // Adds the live sources and tournaments of the server to the Follows list once it answers.
+    async addNamed() {
+        let rows;
+        try {
+            const res = await fetch('/api/feed', { cache: 'no-store' });
+            rows = res.ok ? await res.json() : [];
+        } catch {
+            return;
+        }
+        if (!this.dialog.open) {
+            return;
+        }
+        const taken = [...this.source.options].map((o) => o.value);
+        // A row's label shows in the page's language when the server names its message.
+        const shown = (Array.isArray(rows) ? rows : []).map((row) => (row && row.label_id ? { ...row, label: serverText(row, 'label') } : row));
+        this.source.append(...namedSources(shown, taken).map(([value, label]) => h('option', { value }, label)));
+    }
+
+    close() {
+        if (this.dialog.open) {
+            this.dialog.close();
+        }
+    }
+
+    render() {
+        const d = this.dialog;
+        const own = openSource(this.app.source);
+        const choices = [...(own ? [[own.value, own.label]] : []), ...FOLLOW];
+        const select = (id, entries) => h('select', { id }, entries.map(([value, label]) => h('option', { value }, label)));
+        this.source = select('fa-source', choices);
+        this.sizes = sizeFields('fa', { value: '1080p' });
+        this.background = select('fa-bg', BACKGROUNDS);
+        this.fps = select('fa-fps', RATES);
+        this.camera = select('fa-camera', VIDEO_CAMERAS.map((c) => [c.id, c.label]));
+        this.graphicsOnly = h('input', { id: 'fa-layer', type: 'checkbox' });
+        this.audio = h('input', { id: 'fa-audio', type: 'checkbox' });
+        this.loop = h('input', { id: 'fa-loop', type: 'checkbox' });
+        this.captions = h('input', { id: 'fa-captions', type: 'checkbox' });
+        this.output = h('input', { id: 'fa-url', type: 'text', readonly: true, spellcheck: 'false', 'aria-label': t('feed.dialog.address') });
+        this.note = h('p', { class: 've-note', role: 'status', 'aria-live': 'polite' });
+        this.openLink = h('a', { class: 'btn', target: '_blank', rel: 'noopener' }, t('feed.dialog.open'));
+        const field = (label, control) => h('label', { class: 've-field' }, h('span', {}, label), control);
+        d.replaceChildren(
+            h('div', { class: 've-head' },
+                h('h2', { id: 'feed-address-title' }, t('feed.dialog.title')),
+                h('button', { class: 'icon-btn', type: 'button', 'aria-label': t('feed.dialog.close'), title: t('feed.dialog.close.title'), onclick: () => this.close() }, icon('close'))),
+            h('p', { class: 'muted small' }, tn('feed.dialog.intro')),
+            h('div', { class: 've-grid' },
+                field(t('feed.dialog.follows'), this.source),
+                ...this.sizes.fields,
+                field(t('feed.dialog.background'), this.background),
+                field(t('feed.dialog.rate'), this.fps),
+                field(t('feed.dialog.camera'), this.camera),
+                h('label', { class: 'check' }, this.graphicsOnly, t('feed.dialog.graphicsOnly')),
+                h('label', { class: 'check' }, this.audio, t('feed.dialog.audio')),
+                h('label', { class: 'check' }, this.loop, t('feed.dialog.loop')),
+                h('label', { class: 'check' }, this.captions, t('feed.dialog.captions'))),
+            this.output,
+            this.note,
+            h('div', { class: 've-actions' },
+                h('button', { class: 'btn primary', type: 'button', onclick: () => this.copy() }, icon('copy'), t('feed.dialog.copy')),
+                this.openLink,
+                h('button', { class: 'btn', type: 'button', ...symbolOnly(t('feed.dialog.close'), t('feed.dialog.close.title')), onclick: () => this.close() }, icon('close'))));
+    }
+
+    // The feed's options from the fields, or null with the problem shown.
+    options() {
+        let size;
+        try {
+            size = this.sizes.read();
+        } catch (err) {
+            this.note.textContent = err.message;
+            this.note.classList.add('error');
+            return null;
+        }
+        this.note.classList.remove('error');
+        this.note.textContent = t('feed.dialog.size_note', { width: size.width, height: size.height });
+        return {
+            source: this.source.value,
+            width: size.width,
+            height: size.height,
+            scale: size.scale,
+            safe: size.safe,
+            bg: this.background.value,
+            fps: Number(this.fps.value),
+            camera: this.camera.value,
+            layer: this.graphicsOnly.checked ? 'graphics' : 'full',
+            audio: this.audio.checked,
+            loop: this.loop.checked,
+            captions: this.captions.checked,
+        };
+    }
+
+    address() {
+        const options = this.options();
+        return options ? feedAddress(`${location.origin}${location.pathname.replace(/[^/]*$/, '')}`, options) : '';
+    }
+
+    update() {
+        const url = this.address();
+        this.output.value = url;
+        this.openLink.href = url || '#';
+        this.openLink.toggleAttribute('aria-disabled', !url);
+    }
+
+    async copy() {
+        const url = this.address();
+        if (!url) {
+            return;
+        }
+        try {
+            await navigator.clipboard.writeText(url);
+            this.note.textContent = t('feed.dialog.copied');
+        } catch {
+            this.output.focus();
+            this.output.select();
+            this.note.replaceChildren(...tn('feed.dialog.copy_by_hand'));
+        }
+    }
+}