@mattebox/player 0.1.0

package/dist/controls/bar.js

@@ -0,0 +1,245 @@
+import { el, state } from '../dom.js';
+import { namespaces } from '../namespaces.js';
+import { fullscreenButton, muteButton, pipButton, playButton, skipButton } from './buttons.js';
+import { cueLift, cueStyle } from './cues.js';
+import { fullscreen } from './fullscreen.js';
+import { keys } from './keys.js';
+import { liveButton } from './live.js';
+import { MENUS } from './menus.js';
+import { clusters } from './options.js';
+import { pictureInPicture } from './pip.js';
+import { errorScreen, startButton } from './screens.js';
+import { seekBar } from './seek.js';
+import { speedMenu } from './speed.js';
+import { volumeSlider } from './volume.js';
+export function controlBar(host, stage, video, options, 
+/** Told of the states the host reflects, so the page can reach the light-DOM video by them. */
+reflect, 
+/** What the error screen's retry does. */
+retry) {
+    const root = el('div', 'controls');
+    const flags = {};
+    let timer;
+    /** Whether the last input was a key, so focus inside is a keyboard user's and holds the bar. */
+    let keyboard = false;
+    function render() {
+        state(root, 'controls', flags);
+    }
+    function flag(name, on) {
+        if (flags[name] === on)
+            return;
+        flags[name] = on;
+        render();
+        if (name === 'fullscreen')
+            reflect(name, on);
+        if (name === 'idle')
+            cues.lifted(!on);
+        if (name === 'seekable')
+            live.seekable(on);
+    }
+    /** What keeps the bar up when the timer fires. Read then, never remembered. */
+    function held() {
+        if (video.paused)
+            return true;
+        if (root.querySelector('[part~="open"]') !== null)
+            return true;
+        if (!keyboard)
+            return false;
+        const active = root.getRootNode().activeElement;
+        return active !== null && root.contains(active);
+    }
+    function sleep() {
+        timer = undefined;
+        // A hold is checked again later: a menu closes and a pause ends without
+        // an event the bar hears.
+        if (held()) {
+            timer = setTimeout(sleep, options.idleMs);
+            return;
+        }
+        flag('idle', true);
+    }
+    /** Shows the bar and arms the timer again. */
+    function wake() {
+        clearTimeout(timer);
+        if (flags.idle === true)
+            flag('idle', false);
+        timer = setTimeout(sleep, options.idleMs);
+    }
+    function pointer() {
+        keyboard = false;
+        wake();
+    }
+    function key() {
+        keyboard = true;
+        wake();
+    }
+    cueStyle();
+    const cues = cueLift(video, root, host);
+    // The live button first: the seek row reports whether it is seekable as
+    // it is built, and the flag passes that on to the button.
+    const live = liveButton(video);
+    const seek = seekBar(video, flag, options);
+    seek.root.append(live.root);
+    const screen = fullscreen(host, stage, video);
+    const start = startButton(video, flag, options.start !== 0);
+    const failure = errorScreen(retry);
+    /** An error over a picture that then plays is wrong by definition: playback resuming clears it. */
+    function played() {
+        if (failure.shown()) {
+            failure.clear();
+            start.root.hidden = !video.paused;
+        }
+    }
+    video.addEventListener('playing', played);
+    stage.append(start.root, failure.root);
+    /** The menus' places in the row, filled per session. */
+    const slots = new Map();
+    let session = [];
+    /** A control by the name the layout gives it, or null for a name that is not one. */
+    function build(name) {
+        switch (name) {
+            case 'skip-back':
+                return options.skipBack > 0 ? skipButton(video, -options.skipBack) : null;
+            case 'skip-forward':
+                return options.skipForward > 0 ? skipButton(video, options.skipForward) : null;
+            case 'play':
+                return playButton(video, flag);
+            case 'volume': {
+                const group = el('div', 'group volume-group');
+                const sound = [muteButton(video, flag), volumeSlider(video)];
+                for (const control of sound)
+                    group.append(control.root);
+                return {
+                    root: group,
+                    dispose() {
+                        for (const control of sound)
+                            control.dispose();
+                    },
+                };
+            }
+            case 'speed':
+                return speedMenu(video);
+            case 'pip':
+                return pipButton(pictureInPicture(video), flag);
+            case 'fullscreen':
+                return fullscreenButton(screen, flag);
+            default: {
+                if (!(name in MENUS))
+                    return null;
+                const slot = el('div', `slot ${name}-slot`);
+                slots.set(name, slot);
+                return { root: slot, dispose() { } };
+            }
+        }
+    }
+    const row = el('div', 'row buttons');
+    const cluster = el('div', 'cluster');
+    const built = [];
+    const [leftNames, rightNames] = clusters(options.layout);
+    for (const name of leftNames) {
+        const control = build(name);
+        if (control === null)
+            continue;
+        built.push(control);
+        row.append(control.root);
+    }
+    for (const name of rightNames) {
+        const control = build(name);
+        if (control === null)
+            continue;
+        built.push(control);
+        cluster.append(control.root);
+    }
+    row.append(cluster);
+    root.append(seek.root, row);
+    const controls = [
+        ...built,
+        live,
+        start,
+        failure,
+        keys({
+            host,
+            stage,
+            own: [root, start.root, failure.root],
+            video,
+            step: options.seekStep,
+            fullscreen: screen,
+        }),
+        cues,
+    ];
+    function drop() {
+        for (const control of session)
+            control.dispose();
+        session = [];
+        for (const slot of slots.values())
+            slot.replaceChildren();
+    }
+    stage.addEventListener('pointermove', pointer);
+    stage.addEventListener('pointerdown', pointer);
+    host.addEventListener('keydown', key);
+    video.addEventListener('play', wake);
+    video.addEventListener('pause', wake);
+    video.addEventListener('ended', wake);
+    wake();
+    cues.lifted(true);
+    return {
+        root,
+        attach(current) {
+            drop();
+            const engine = current.engine;
+            if (engine === null) {
+                seek.attach({});
+                live.attach(undefined);
+                return;
+            }
+            const found = namespaces(engine);
+            seek.attach({
+                live: found.live,
+                thumbnails: found.thumbnails,
+                pdt: found.pdt,
+                // The forward buffer goal and the availability window live on the
+                // diagnostics snapshot and nowhere else.
+                bufferGoal: () => engine.stats.snapshot().scheduling.bufferGoal,
+                window: () => engine.stats.snapshot().live?.span ?? null,
+            });
+            live.attach(found.live);
+            for (const [name, slot] of slots) {
+                const factory = MENUS[name];
+                if (factory === undefined)
+                    continue;
+                const control = factory({ engine, host });
+                session.push(control);
+                slot.append(control.root);
+            }
+        },
+        detach() {
+            drop();
+            seek.detach();
+            live.detach();
+        },
+        error(error) {
+            failure.show(error);
+            start.root.hidden = true;
+        },
+        clearError() {
+            failure.clear();
+            start.root.hidden = options.start === 0 || !video.paused;
+        },
+        dispose() {
+            clearTimeout(timer);
+            drop();
+            seek.dispose();
+            for (const control of controls)
+                control.dispose();
+            stage.removeEventListener('pointermove', pointer);
+            stage.removeEventListener('pointerdown', pointer);
+            host.removeEventListener('keydown', key);
+            video.removeEventListener('play', wake);
+            video.removeEventListener('pause', wake);
+            video.removeEventListener('ended', wake);
+            video.removeEventListener('playing', played);
+            root.remove();
+        },
+    };
+}
+//# sourceMappingURL=bar.js.map

package/dist/controls/bar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bar.js","sourceRoot":"","sources":["../../src/controls/bar.ts"],"names":[],"mappings":"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"}

package/dist/controls/buttons.d.ts

@@ -0,0 +1,13 @@
+import type { Control, Flag } from './control.js';
+import type { Fullscreen } from './fullscreen.js';
+import type { IconName } from './icons.js';
+import type { PictureInPicture } from './pip.js';
+/** A button with its glyph. `control` is the generic name, so `::part(control)` reaches every one. */
+export declare function button(name: string, first: IconName): [HTMLButtonElement, SVGSVGElement];
+export declare function playButton(video: HTMLVideoElement, flag: Flag): Control;
+export declare function muteButton(video: HTMLVideoElement, flag: Flag): Control;
+/** Moves the playhead by `seconds`, negative for back, within what the video can reach. */
+export declare function skipButton(video: HTMLVideoElement, seconds: number): Control;
+export declare function pipButton(api: PictureInPicture, flag: Flag): Control;
+export declare function fullscreenButton(api: Fullscreen, flag: Flag): Control;
+//# sourceMappingURL=buttons.d.ts.map

package/dist/controls/buttons.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"buttons.d.ts","sourceRoot":"","sources":["../../src/controls/buttons.ts"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAClD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAE3C,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAEjD,sGAAsG;AACtG,wBAAgB,MAAM,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,QAAQ,GAAG,CAAC,iBAAiB,EAAE,aAAa,CAAC,CAMxF;AASD,wBAAgB,UAAU,CAAC,KAAK,EAAE,gBAAgB,EAAE,IAAI,EAAE,IAAI,GAAG,OAAO,CAgCvE;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,gBAAgB,EAAE,IAAI,EAAE,IAAI,GAAG,OAAO,CAiCvE;AASD,2FAA2F;AAC3F,wBAAgB,UAAU,CAAC,KAAK,EAAE,gBAAgB,EAAE,OAAO,EAAE,MAAM,GAAG,OAAO,CAuB5E;AAED,wBAAgB,SAAS,CAAC,GAAG,EAAE,gBAAgB,EAAE,IAAI,EAAE,IAAI,GAAG,OAAO,CAsBpE;AAED,wBAAgB,gBAAgB,CAAC,GAAG,EAAE,UAAU,EAAE,IAAI,EAAE,IAAI,GAAG,OAAO,CAsBrE"}

package/dist/controls/buttons.js

@@ -0,0 +1,157 @@
+/**
+ * The buttons: play/pause, mute, fullscreen. Each reads the video on the
+ * events the video already fires, swaps its glyph and its name, and writes
+ * one thing back on click. The glyph is decoration; the name is on the
+ * button, where a screen reader reads it.
+ */
+import { el } from '../dom.js';
+import { glyph, icon } from './icons.js';
+/** A button with its glyph. `control` is the generic name, so `::part(control)` reaches every one. */
+export function button(name, first) {
+    const node = el('button', `control ${name}-button`);
+    node.type = 'button';
+    const svg = icon(first);
+    node.append(svg);
+    return [node, svg];
+}
+function listen(target, names, fn) {
+    for (const name of names)
+        target.addEventListener(name, fn);
+    return () => {
+        for (const name of names)
+            target.removeEventListener(name, fn);
+    };
+}
+export function playButton(video, flag) {
+    const [root, svg] = button('play', 'play');
+    function render() {
+        const paused = video.paused;
+        const name = video.ended ? 'replay' : paused ? 'play' : 'pause';
+        glyph(svg, name);
+        root.setAttribute('aria-label', video.ended ? 'Replay' : paused ? 'Play' : 'Pause');
+        flag('playing', !paused);
+    }
+    function click() {
+        if (video.paused) {
+            // Rejected outside a user gesture on an unmuted video, which the
+            // browser reports on the video's own error path; nothing to add.
+            video.play().catch(() => undefined);
+        }
+        else {
+            video.pause();
+        }
+    }
+    root.addEventListener('click', click);
+    const off = listen(video, ['play', 'pause', 'ended', 'emptied'], render);
+    render();
+    return {
+        root,
+        dispose() {
+            root.removeEventListener('click', click);
+            off();
+        },
+    };
+}
+export function muteButton(video, flag) {
+    const [root, svg] = button('mute', 'volume-high');
+    function render() {
+        const silent = video.muted || video.volume === 0;
+        const name = silent ? 'mute' : video.volume <= 0.5 ? 'volume-low' : 'volume-high';
+        glyph(svg, name);
+        root.setAttribute('aria-label', silent ? 'Unmute' : 'Mute');
+        root.setAttribute('aria-pressed', String(video.muted));
+        flag('muted', silent);
+    }
+    function click() {
+        if (video.muted) {
+            video.muted = false;
+            // Unmuting at zero volume would change nothing the viewer can hear.
+            if (video.volume === 0)
+                video.volume = 1;
+        }
+        else {
+            video.muted = true;
+        }
+    }
+    root.addEventListener('click', click);
+    const off = listen(video, ['volumechange', 'emptied'], render);
+    render();
+    return {
+        root,
+        dispose() {
+            root.removeEventListener('click', click);
+            off();
+        },
+    };
+}
+/** The glyph for a skip amount: the set draws 10 and 30, and a plain arrow says the rest. */
+function skipGlyph(back, amount) {
+    const side = back ? 'seek-backward' : 'seek-forward';
+    if (amount === 10 || amount === 30)
+        return `${side}-${amount}`;
+    return side;
+}
+/** Moves the playhead by `seconds`, negative for back, within what the video can reach. */
+export function skipButton(video, seconds) {
+    const back = seconds < 0;
+    const amount = Math.abs(seconds);
+    const [root] = button(back ? 'skip-back' : 'skip-forward', skipGlyph(back, amount));
+    root.setAttribute('aria-label', `${back ? 'Back' : 'Forward'} ${amount} seconds`);
+    function click() {
+        const ranges = video.seekable;
+        const end = Number.isFinite(video.duration)
+            ? video.duration
+            : ranges.length > 0
+                ? ranges.end(ranges.length - 1)
+                : video.currentTime;
+        video.currentTime = Math.min(end, Math.max(0, video.currentTime + seconds));
+    }
+    root.addEventListener('click', click);
+    return {
+        root,
+        dispose() {
+            root.removeEventListener('click', click);
+        },
+    };
+}
+export function pipButton(api, flag) {
+    const [root, svg] = button('pip', 'picture-in-picture');
+    root.hidden = !api.supported;
+    function render() {
+        const active = api.active();
+        glyph(svg, active ? 'picture-in-picture-exit' : 'picture-in-picture');
+        root.setAttribute('aria-label', active ? 'Leave picture in picture' : 'Picture in picture');
+        flag('pip', active);
+    }
+    root.addEventListener('click', api.toggle);
+    const off = api.watch(render);
+    render();
+    return {
+        root,
+        dispose() {
+            root.removeEventListener('click', api.toggle);
+            off();
+        },
+    };
+}
+export function fullscreenButton(api, flag) {
+    const [root, svg] = button('fullscreen', 'fullscreen');
+    root.hidden = !api.supported;
+    function render() {
+        const active = api.active();
+        glyph(svg, active ? 'fullscreen-exit' : 'fullscreen');
+        root.setAttribute('aria-label', active ? 'Exit fullscreen' : 'Enter fullscreen');
+        flag('fullscreen', active);
+    }
+    root.addEventListener('click', api.toggle);
+    const off = api.watch(render);
+    render();
+    return {
+        root,
+        dispose() {
+            root.removeEventListener('click', api.toggle);
+            off();
+        },
+    };
+}
+//# sourceMappingURL=buttons.js.map

package/dist/controls/buttons.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"buttons.js","sourceRoot":"","sources":["../../src/controls/buttons.ts"],"names":[],"mappings":"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"}

package/dist/controls/control.d.ts

@@ -0,0 +1,12 @@
+/**
+ * What a control is: a root the bar places, and a teardown. The same shape
+ * as a panel, kept separate because a control reads the video and a panel
+ * reads an engine namespace.
+ */
+export interface Control {
+    readonly root: HTMLElement;
+    dispose(): void;
+}
+/** Reports a state the bar carries on its part name: `playing`, `muted`, `fullscreen`. */
+export type Flag = (name: string, on: boolean) => void;
+//# sourceMappingURL=control.d.ts.map

package/dist/controls/control.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"control.d.ts","sourceRoot":"","sources":["../../src/controls/control.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,MAAM,WAAW,OAAO;IACtB,QAAQ,CAAC,IAAI,EAAE,WAAW,CAAC;IAC3B,OAAO,IAAI,IAAI,CAAC;CACjB;AAED,0FAA0F;AAC1F,MAAM,MAAM,IAAI,GAAG,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,OAAO,KAAK,IAAI,CAAC"}

package/dist/controls/control.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=control.js.map

package/dist/controls/control.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"control.js","sourceRoot":"","sources":["../../src/controls/control.ts"],"names":[],"mappings":""}

package/dist/controls/cues.d.ts

@@ -0,0 +1,33 @@
+/**
+ * Subtitles and the bar. Two things.
+ *
+ * The lift: the browser draws native cues at the bottom of the video, under
+ * the bar. While the bar shows, every active cue the author left
+ * unpositioned is moved above it, and put back when the bar hides. The
+ * position is a negative line count, the one form every browser wraps at
+ * the video's width; a percentage does not wrap in Chromium. Chromium
+ * anchors the box's top on the count and Gecko its bottom, and their
+ * overlap avoidance pushes in opposite directions, so nothing is left to
+ * them: subtitles often show two cues at once, and the cues stack by their
+ * own measured heights, wrapping included, clear under both readings. A
+ * cue with a position of its own is the author's and is not touched.
+ *
+ * The look: `::cue` can only be styled from the document that holds the
+ * video, which is the page and not the shadow root, and it takes no custom
+ * properties. So a small sheet goes into the document, once, with one rule
+ * per look the host's `subtitle-size` and `subtitle-background` attributes
+ * can take. Sizes are percentages of the browser's own cue size, which
+ * already follows the video's height, in the page and in fullscreen alike.
+ * A page that wants more writes its own `mattebox-player > video::cue`.
+ */
+import type { Control } from './control.js';
+/** How the sizes scale the browser's own cue size; the lift counts lines by it. */
+export declare const SCALES: Readonly<Record<string, number>>;
+/** Puts the cue rules in the document, once. */
+export declare function cueStyle(): void;
+export interface CueLift extends Control {
+    /** Whether the bar is showing, so the cues move above it or back. */
+    lifted(on: boolean): void;
+}
+export declare function cueLift(video: HTMLVideoElement, bar: HTMLElement, host: HTMLElement): CueLift;
+//# sourceMappingURL=cues.d.ts.map

package/dist/controls/cues.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cues.d.ts","sourceRoot":"","sources":["../../src/controls/cues.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAE5C,mFAAmF;AACnF,eAAO,MAAM,MAAM,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAKnD,CAAC;AA4BF,gDAAgD;AAChD,wBAAgB,QAAQ,IAAI,IAAI,CAM/B;AASD,MAAM,WAAW,OAAQ,SAAQ,OAAO;IACtC,qEAAqE;IACrE,MAAM,CAAC,EAAE,EAAE,OAAO,GAAG,IAAI,CAAC;CAC3B;AAED,wBAAgB,OAAO,CAAC,KAAK,EAAE,gBAAgB,EAAE,GAAG,EAAE,WAAW,EAAE,IAAI,EAAE,WAAW,GAAG,OAAO,CAqI7F"}