@mattebox/player 0.1.0 → 0.2.0

package/dist/elements/mute-button.js

@@ -0,0 +1,61 @@
+/**
+ * <mbx-mute-button>: mute and unmute, with the level drawn in the glyph:
+ * `icon-mute` while muted or at zero, `icon-low` up to half, `icon-high`
+ * above. Unmuting at zero volume would change nothing the viewer can
+ * hear, so it brings the volume up too. The name comes from `label-mute`
+ * and `label-unmute`, and `aria-pressed` says which state it is in.
+ */
+import { icon } from '../controls/icons.js';
+import { Component } from './component.js';
+import { BUTTON_STYLE, iconSlots, show, style } from './shared.js';
+const LEVELS = ['mute', 'low', 'high'];
+export class MbxMuteButton extends Component {
+    static get observedAttributes() {
+        return ['label-mute', 'label-unmute'];
+    }
+    constructor() {
+        super();
+        const root = this.attachShadow({ mode: 'open' });
+        this.button = document.createElement('button');
+        this.button.type = 'button';
+        this.button.setAttribute('part', 'button');
+        this.slots = iconSlots(LEVELS, (level) => icon(level === 'mute' ? 'mute' : level === 'low' ? 'volume-low' : 'volume-high'));
+        for (const level of LEVELS)
+            this.button.append(this.slots[level]);
+        this.button.addEventListener('click', () => {
+            this.toggle();
+        });
+        root.append(style(BUTTON_STYLE), this.button);
+    }
+    toggle() {
+        const video = this.player?.video;
+        if (video === undefined)
+            return;
+        if (video.muted) {
+            video.muted = false;
+            if (video.volume === 0)
+                video.volume = 1;
+        }
+        else {
+            video.muted = true;
+        }
+    }
+    attach(player) {
+        this.listen(player.video, ['volumechange', 'emptied'], () => {
+            this.render();
+        });
+        this.render();
+    }
+    render() {
+        const video = this.player?.video;
+        if (video === undefined)
+            return;
+        const silent = video.muted || video.volume === 0;
+        show(this.slots, silent ? 'mute' : video.volume <= 0.5 ? 'low' : 'high');
+        this.button.setAttribute('aria-label', silent
+            ? (this.getAttribute('label-unmute') ?? 'Unmute')
+            : (this.getAttribute('label-mute') ?? 'Mute'));
+        this.button.setAttribute('aria-pressed', String(video.muted));
+    }
+}
+//# sourceMappingURL=mute-button.js.map

package/dist/elements/mute-button.js.map

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

package/dist/elements/panels.d.ts

@@ -0,0 +1,15 @@
+/**
+ * <mbx-panels>: the row under the video for what native controls cannot
+ * show. It sits in the player beside the video, in flow, so it lands
+ * under the picture, and lays its children out in a row: the quality,
+ * audio and subtitles menus, the live button, the lock. Each child hides
+ * itself when its session has nothing for it, and the row hides when
+ * every child has, so a native session shows no strip at all.
+ */
+import { Component } from './component.js';
+export declare class MbxPanels extends Component {
+    constructor();
+    private empty;
+    protected attach(): void;
+}
+//# sourceMappingURL=panels.d.ts.map

package/dist/elements/panels.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"panels.d.ts","sourceRoot":"","sources":["../../src/elements/panels.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAiB3C,qBAAa,SAAU,SAAQ,SAAS;;IAOtC,OAAO,CAAC,KAAK;cAIM,MAAM,IAAI,IAAI;CAoBlC"}

package/dist/elements/panels.js

@@ -0,0 +1,55 @@
+/**
+ * <mbx-panels>: the row under the video for what native controls cannot
+ * show. It sits in the player beside the video, in flow, so it lands
+ * under the picture, and lays its children out in a row: the quality,
+ * audio and subtitles menus, the live button, the lock. Each child hides
+ * itself when its session has nothing for it, and the row hides when
+ * every child has, so a native session shows no strip at all.
+ */
+import { Component } from './component.js';
+import { style } from './shared.js';
+const STYLE = `
+:host {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--mbx-gap);
+  padding: var(--mbx-pad);
+  background: var(--mbx-surface);
+  color: var(--mbx-text);
+  font: 400 13px/1.4 var(--mbx-font);
+}
+:host([hidden]) { display: none; }
+`;
+export class MbxPanels extends Component {
+    constructor() {
+        super();
+        const root = this.attachShadow({ mode: 'open' });
+        root.append(style(STYLE), document.createElement('slot'));
+    }
+    empty() {
+        return ![...this.children].some((child) => !child.hidden);
+    }
+    attach() {
+        const tick = () => {
+            const empty = this.empty();
+            // Only on a change: the observer sees the row's own attribute too, and
+            // a write it did not need would wake it again without end.
+            if (this.hidden !== empty)
+                this.hidden = empty;
+        };
+        // The children say `hidden` on themselves; the row follows the last of them.
+        const observer = new MutationObserver(tick);
+        observer.observe(this, {
+            childList: true,
+            subtree: true,
+            attributes: true,
+            attributeFilter: ['hidden'],
+        });
+        this.keep(() => {
+            observer.disconnect();
+        });
+        tick();
+    }
+}
+//# sourceMappingURL=panels.js.map

package/dist/elements/panels.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"panels.js","sourceRoot":"","sources":["../../src/elements/panels.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAC3C,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAEpC,MAAM,KAAK,GAAG;;;;;;;;;;;;CAYb,CAAC;AAEF,MAAM,OAAO,SAAU,SAAQ,SAAS;IACtC;QACE,KAAK,EAAE,CAAC;QACR,MAAM,IAAI,GAAG,IAAI,CAAC,YAAY,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,CAAC;QACjD,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC,CAAC;IAC5D,CAAC;IAEO,KAAK;QACX,OAAO,CAAC,CAAC,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CAAE,KAAqB,CAAC,MAAM,CAAC,CAAC;IAC7E,CAAC;IAEkB,MAAM;QACvB,MAAM,IAAI,GAAG,GAAS,EAAE;YACtB,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,EAAE,CAAC;YAC3B,uEAAuE;YACvE,2DAA2D;YAC3D,IAAI,IAAI,CAAC,MAAM,KAAK,KAAK;gBAAE,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;QACjD,CAAC,CAAC;QACF,6EAA6E;QAC7E,MAAM,QAAQ,GAAG,IAAI,gBAAgB,CAAC,IAAI,CAAC,CAAC;QAC5C,QAAQ,CAAC,OAAO,CAAC,IAAI,EAAE;YACrB,SAAS,EAAE,IAAI;YACf,OAAO,EAAE,IAAI;YACb,UAAU,EAAE,IAAI;YAChB,eAAe,EAAE,CAAC,QAAQ,CAAC;SAC5B,CAAC,CAAC;QACH,IAAI,CAAC,IAAI,CAAC,GAAG,EAAE;YACb,QAAQ,CAAC,UAAU,EAAE,CAAC;QACxB,CAAC,CAAC,CAAC;QACH,IAAI,EAAE,CAAC;IACT,CAAC;CACF"}

package/dist/elements/pip-button.d.ts

@@ -0,0 +1,13 @@
+import type { PlayerHost } from '../host.js';
+import { Component } from './component.js';
+export declare class MbxPipButton extends Component {
+    static get observedAttributes(): readonly string[];
+    private readonly button;
+    private readonly slots;
+    private api;
+    constructor();
+    protected attach(player: PlayerHost): void;
+    protected detach(player: PlayerHost): void;
+    protected render(): void;
+}
+//# sourceMappingURL=pip-button.d.ts.map

package/dist/elements/pip-button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pip-button.d.ts","sourceRoot":"","sources":["../../src/elements/pip-button.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAM3C,qBAAa,YAAa,SAAQ,SAAS;IACzC,MAAM,KAAK,kBAAkB,IAAI,SAAS,MAAM,EAAE,CAEjD;IAED,iBAAyB,MAAM,CAAoB;IACnD,iBAAyB,KAAK,CAAiC;IAC/D,QAAgB,GAAG,CAA0B;;cAmB1B,MAAM,CAAC,MAAM,EAAE,UAAU,GAAG,IAAI;cAYhC,MAAM,CAAC,MAAM,EAAE,UAAU,GAAG,IAAI;cAKhC,MAAM,IAAI,IAAI;CAalC"}

package/dist/elements/pip-button.js

@@ -0,0 +1,56 @@
+/**
+ * <mbx-pip-button>: picture in picture, through whichever API the browser
+ * has, and hidden where there is none. The glyph is `icon-enter` or
+ * `icon-exit`, the name `label-enter` or `label-exit`, and the element
+ * sets `pip` on the player while the video is in the floating window.
+ */
+import { icon } from '../controls/icons.js';
+import { pictureInPicture } from '../controls/pip.js';
+import { Component } from './component.js';
+import { BUTTON_STYLE, iconSlots, show, style } from './shared.js';
+const STATES = ['enter', 'exit'];
+export class MbxPipButton extends Component {
+    static get observedAttributes() {
+        return ['label-enter', 'label-exit'];
+    }
+    constructor() {
+        super();
+        this.api = null;
+        const root = this.attachShadow({ mode: 'open' });
+        this.button = document.createElement('button');
+        this.button.type = 'button';
+        this.button.setAttribute('part', 'button');
+        this.slots = iconSlots(STATES, (state) => icon(state === 'enter' ? 'picture-in-picture' : 'picture-in-picture-exit'));
+        for (const state of STATES)
+            this.button.append(this.slots[state]);
+        this.button.addEventListener('click', () => {
+            this.api?.toggle();
+        });
+        root.append(style(BUTTON_STYLE), this.button);
+    }
+    attach(player) {
+        const api = pictureInPicture(player.video);
+        this.api = api;
+        this.hidden = !api.supported;
+        this.keep(api.watch(() => {
+            this.render();
+        }));
+        this.render();
+    }
+    detach(player) {
+        this.api = null;
+        player.removeAttribute('pip');
+    }
+    render() {
+        const player = this.player;
+        if (player === null || this.api === null)
+            return;
+        const active = this.api.active();
+        show(this.slots, active ? 'exit' : 'enter');
+        this.button.setAttribute('aria-label', active
+            ? (this.getAttribute('label-exit') ?? 'Leave picture in picture')
+            : (this.getAttribute('label-enter') ?? 'Picture in picture'));
+        player.toggleAttribute('pip', active);
+    }
+}
+//# sourceMappingURL=pip-button.js.map

package/dist/elements/pip-button.js.map

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

package/dist/elements/play-button.d.ts

@@ -0,0 +1,12 @@
+import type { PlayerHost } from '../host.js';
+import { Component } from './component.js';
+export declare class MbxPlayButton extends Component {
+    static get observedAttributes(): readonly string[];
+    private readonly button;
+    private readonly slots;
+    constructor();
+    private toggle;
+    protected attach(player: PlayerHost): void;
+    protected render(): void;
+}
+//# sourceMappingURL=play-button.d.ts.map

package/dist/elements/play-button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"play-button.d.ts","sourceRoot":"","sources":["../../src/elements/play-button.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAO3C,qBAAa,aAAc,SAAQ,SAAS;IAC1C,MAAM,KAAK,kBAAkB,IAAI,SAAS,MAAM,EAAE,CAEjD;IAED,iBAAyB,MAAM,CAAoB;IACnD,iBAAyB,KAAK,CAAiC;;IAgB/D,OAAO,CAAC,MAAM;cAYK,MAAM,CAAC,MAAM,EAAE,UAAU,GAAG,IAAI;cAOhC,MAAM,IAAI,IAAI;CAOlC"}

package/dist/elements/play-button.js

@@ -0,0 +1,60 @@
+/**
+ * <mbx-play-button>: play, pause, or replay once the media has ended. It
+ * reads the video on the events the video already fires and writes one
+ * thing back on click. The glyph is a slot per state, so a page drops its
+ * own SVG into `icon-play`, `icon-pause` or `icon-replay`; the name is on
+ * the button, from `label-play`, `label-pause` and `label-replay`, where a
+ * screen reader reads it.
+ */
+import { icon } from '../controls/icons.js';
+import { Component } from './component.js';
+import { BUTTON_STYLE, iconSlots, show, style } from './shared.js';
+const STATES = ['play', 'pause', 'replay'];
+const LABELS = { play: 'Play', pause: 'Pause', replay: 'Replay' };
+export class MbxPlayButton extends Component {
+    static get observedAttributes() {
+        return STATES.map((state) => `label-${state}`);
+    }
+    constructor() {
+        super();
+        const root = this.attachShadow({ mode: 'open' });
+        this.button = document.createElement('button');
+        this.button.type = 'button';
+        this.button.setAttribute('part', 'button');
+        this.slots = iconSlots(STATES, icon);
+        for (const state of STATES)
+            this.button.append(this.slots[state]);
+        this.button.addEventListener('click', () => {
+            this.toggle();
+        });
+        root.append(style(BUTTON_STYLE), this.button);
+    }
+    toggle() {
+        const video = this.player?.video;
+        if (video === undefined)
+            return;
+        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();
+        }
+    }
+    attach(player) {
+        this.listen(player.video, ['play', 'pause', 'ended', 'emptied'], () => {
+            this.render();
+        });
+        this.render();
+    }
+    render() {
+        const video = this.player?.video;
+        if (video === undefined)
+            return;
+        const state = video.ended ? 'replay' : video.paused ? 'play' : 'pause';
+        show(this.slots, state);
+        this.button.setAttribute('aria-label', this.getAttribute(`label-${state}`) ?? LABELS[state]);
+    }
+}
+//# sourceMappingURL=play-button.js.map

package/dist/elements/play-button.js.map

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

package/dist/elements/quality-menu.d.ts

@@ -0,0 +1,11 @@
+import type { PlayerHost } from '../host.js';
+import { MenuElement } from './menu-element.js';
+export declare class MbxQualityMenu extends MenuElement {
+    static get observedAttributes(): readonly string[];
+    private engine;
+    constructor();
+    protected name(): string;
+    protected attach(player: PlayerHost): void;
+    protected render(): void;
+}
+//# sourceMappingURL=quality-menu.d.ts.map

package/dist/elements/quality-menu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"quality-menu.d.ts","sourceRoot":"","sources":["../../src/elements/quality-menu.ts"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAU,MAAM,mBAAmB,CAAC;AAUxD,qBAAa,cAAe,SAAQ,WAAW;IAC7C,MAAM,KAAK,kBAAkB,IAAI,SAAS,MAAM,EAAE,CAEjD;IAED,QAAgB,MAAM,CAAkB;;cAQrB,IAAI,IAAI,MAAM;cAId,MAAM,CAAC,MAAM,EAAE,UAAU,GAAG,IAAI;cAmBhC,MAAM,IAAI,IAAI;CA4BlC"}

package/dist/elements/quality-menu.js

@@ -0,0 +1,72 @@
+import { MenuElement, single } from './menu-element.js';
+import { show } from './shared.js';
+const AUTO = 'auto';
+function renditionLabel(rendition) {
+    if (rendition.height !== undefined)
+        return `${rendition.height}p`;
+    return `${Math.round(rendition.bitrate / 1000)} kbps`;
+}
+export class MbxQualityMenu extends MenuElement {
+    static get observedAttributes() {
+        return ['label', 'label-auto', 'label-back'];
+    }
+    constructor() {
+        super(...single('settings'));
+        this.engine = null;
+        show(this.slots, 'default');
+    }
+    name() {
+        return 'Quality';
+    }
+    attach(player) {
+        this.follow(player, (engine) => {
+            this.engine = engine;
+            this.render();
+            if (engine === null)
+                return undefined;
+            const tick = () => {
+                this.render();
+            };
+            const offs = [
+                engine.on('tracks:changed', tick),
+                engine.on('quality:constraints-unsatisfiable', tick),
+                engine.on('quality:pin-unsatisfiable', tick),
+            ];
+            return () => {
+                for (const off of offs)
+                    off();
+            };
+        });
+    }
+    render() {
+        super.render();
+        const engine = this.engine;
+        if (engine === null) {
+            this.hidden = true;
+            return;
+        }
+        const quality = engine.quality;
+        const items = [
+            [AUTO, this.getAttribute('label-auto') ?? 'Auto'],
+        ];
+        for (const rendition of quality.renditions) {
+            items.push([rendition.id, renditionLabel(rendition)]);
+        }
+        this.menu.fill([
+            {
+                name: 'rendition',
+                items,
+                value: quality.pinned ?? AUTO,
+                onSelect: (value) => {
+                    if (value === AUTO)
+                        quality.auto();
+                    else
+                        quality.pin(value);
+                    this.render();
+                },
+            },
+        ]);
+        this.hidden = quality.renditions.length === 0;
+    }
+}
+//# sourceMappingURL=quality-menu.js.map

package/dist/elements/quality-menu.js.map

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

package/dist/elements/seek-bar.d.ts

@@ -0,0 +1,83 @@
+/**
+ * <mbx-seek-bar>: the bar over the slider primitive, with four layers on
+ * its track, every one a part: the buffered ranges from `video.buffered`,
+ * the played span, the hover position, and for live the edge from
+ * `engine.live`. The span it maps is the availability window for live and
+ * the duration for VOD; `controls/session.ts` says which.
+ *
+ * A live stream is seekable only when the window is worth it: at least
+ * `live-window` forward buffer goals long, the goal read from the engine.
+ * Below that the bar hides. VOD is always seekable. The element sets
+ * `live` and `seekable` on the player, which the time and the live button
+ * read.
+ *
+ * Reads happen on the events the video already fires; the live window has
+ * no event of its own and moves with the clock, so `timeupdate` covers it.
+ * While a pointer holds the thumb, the played layer follows the pointer and
+ * `currentTime` is written at most once per frame, so the bar never fights
+ * a slow seek. The element carries `dragging` meanwhile.
+ *
+ * The preview above the pointer carries the time and, when the session's
+ * `engine.thumbnails` answers for that time, the tile: a rectangle of a
+ * sprite, drawn by background position at the sprite's own size and scaled
+ * down to `--mbx-preview-width`, so a page sets the size with one token.
+ *
+ * Chapters divide the track: one gap per chapter boundary, cut through
+ * every layer with a mask, so the played and the buffered spans read per
+ * chapter, and the preview names the chapter under the pointer. They are
+ * the video's own chapters track, see `controls/chapters.ts`.
+ * `chapters="none"` leaves the track whole and the preview without a name.
+ *
+ * `step` is what an arrow key moves the playhead by and `page` what Page
+ * Up and Page Down do, in seconds. The name comes from `label`; what a
+ * screen reader hears at a position from `label-of`, "{current} of
+ * {duration}", and on live from `label-behind`, "{time} behind live". It
+ * sits in the bar's seek row unless the page says otherwise.
+ */
+import type { PlayerHost } from '../host.js';
+import { Component } from './component.js';
+export declare class MbxSeekBar extends Component {
+    static get observedAttributes(): readonly string[];
+    private readonly bar;
+    private readonly buffered;
+    private readonly hover;
+    private readonly edge;
+    private readonly preview;
+    private readonly image;
+    private readonly tile;
+    private readonly time;
+    private readonly caption;
+    private range;
+    /** The chapters as last drawn, so the mask is written only when they change. */
+    private divided;
+    private list;
+    private pending;
+    private frame;
+    constructor();
+    connectedCallback(): void;
+    private isLive;
+    /** Whether the chapters divide the track and name the preview. */
+    private chaptered;
+    /** The gaps at the chapter boundaries, on every layer of the track at once. */
+    private paintChapters;
+    /** What a screen reader hears at a time. */
+    private say;
+    /** What the preview shows at a time. */
+    private label;
+    private input;
+    private flush;
+    /** The width the page asked for through the token, or the default. */
+    private previewWidth;
+    /** The tile for a time, if the track has one, drawn at its size and scaled to fit. */
+    private paintTile;
+    private paintBuffered;
+    /** Whether a live window is wide enough to be worth a bar. */
+    private worthSeeking;
+    /** The hover marker and the preview follow the pointer, clamped to the bar. */
+    private point;
+    private leave;
+    protected attach(player: PlayerHost): void;
+    protected detach(player: PlayerHost): void;
+    protected render(): void;
+}
+//# sourceMappingURL=seek-bar.d.ts.map

package/dist/elements/seek-bar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"seek-bar.d.ts","sourceRoot":"","sources":["../../src/elements/seek-bar.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AAWH,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAE7C,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AA8E3C,qBAAa,UAAW,SAAQ,SAAS;IACvC,MAAM,KAAK,kBAAkB,IAAI,SAAS,MAAM,EAAE,CAEjD;IAED,iBAAyB,GAAG,CAAS;IACrC,iBAAyB,QAAQ,CAAc;IAC/C,iBAAyB,KAAK,CAAc;IAC5C,iBAAyB,IAAI,CAAc;IAC3C,iBAAyB,OAAO,CAAc;IAC9C,iBAAyB,KAAK,CAAc;IAC5C,iBAAyB,IAAI,CAAc;IAC3C,iBAAyB,IAAI,CAAc;IAC3C,iBAAyB,OAAO,CAAc;IAC9C,QAAgB,KAAK,CAAO;IAC5B,gFAAgF;IAChF,QAAgB,OAAO,CAAS;IAChC,QAAgB,IAAI,CAAY;IAChC,QAAgB,OAAO,CAAgB;IACvC,QAAgB,KAAK,CAAS;;IAgDrB,iBAAiB,IAAI,IAAI;IAKlC,OAAO,CAAC,MAAM;IAId,kEAAkE;IAClE,OAAO,CAAC,SAAS;IAIjB,+EAA+E;IAC/E,OAAO,CAAC,aAAa;IAWrB,4CAA4C;IAC5C,OAAO,CAAC,GAAG;IAeX,wCAAwC;IACxC,OAAO,CAAC,KAAK;IAKb,OAAO,CAAC,KAAK;IAmBb,OAAO,CAAC,KAAK;IAQb,sEAAsE;IACtE,OAAO,CAAC,YAAY;IAOpB,sFAAsF;IACtF,OAAO,CAAC,SAAS;IAcjB,OAAO,CAAC,aAAa;IAsBrB,8DAA8D;IAC9D,OAAO,CAAC,YAAY;IAOpB,+EAA+E;IAC/E,OAAO,CAAC,KAAK;IAmBb,OAAO,CAAC,KAAK;cAKM,MAAM,CAAC,MAAM,EAAE,UAAU,GAAG,IAAI;cAahC,MAAM,CAAC,MAAM,EAAE,UAAU,GAAG,IAAI;cAShC,MAAM,IAAI,IAAI;CAuBlC"}