@livepeer-frameworks/player-wc 0.1.9 → 0.2.2

package/dist/esm/components/controls/fw-fullscreen-button.js

@@ -0,0 +1,76 @@
+import { __decorate } from '../../node_modules/.pnpm/@rollup_plugin-typescript@12.3.0_rollup@4.57.1_tslib@2.8.1_typescript@5.9.3/node_modules/tslib/tslib.es6.js';
+import { css, LitElement, html } from 'lit';
+import { state, customElement } from 'lit/decorators.js';
+import { createTranslator } from '@livepeer-frameworks/player-core';
+
+let FwFullscreenButton = class FwFullscreenButton extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.isFullscreen = false;
+        this._player = null;
+        this._cleanup = null;
+    }
+    get _t() {
+        return this._player?.pc?.t ?? createTranslator({ locale: "en" });
+    }
+    _resolvePlayer() {
+        const forId = this.getAttribute("for");
+        if (forId)
+            return document.getElementById(forId);
+        return this.closest("fw-player");
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this._player = this._resolvePlayer();
+        if (!this._player)
+            return;
+        const pc = this._player.pc;
+        if (!pc)
+            return;
+        this.isFullscreen = pc.s.isFullscreen;
+        const handler = () => {
+            this.isFullscreen = this._player.pc.s.isFullscreen;
+        };
+        this._player.addEventListener("fw-fullscreen-change", handler);
+        this._player.addEventListener("fw-ready", handler);
+        this._cleanup = () => {
+            this._player?.removeEventListener("fw-fullscreen-change", handler);
+            this._player?.removeEventListener("fw-ready", handler);
+        };
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this._cleanup?.();
+        this._cleanup = null;
+    }
+    handleClick() {
+        this._player?.pc?.toggleFullscreen();
+    }
+    render() {
+        return html `<button
+      type="button"
+      class="fw-btn-flush"
+      aria-label=${this.isFullscreen ? this._t("exitFullscreen") : this._t("fullscreen")}
+      aria-pressed=${this.isFullscreen}
+      title=${this.isFullscreen ? this._t("exitFullscreen") : this._t("fullscreen")}
+      @click=${this.handleClick}
+    >
+      ${this.isFullscreen ? "\u2716" : "\u26F6"}
+    </button>`;
+    }
+};
+FwFullscreenButton.styles = css `
+    :host {
+      display: inline-flex;
+      align-items: center;
+    }
+  `;
+__decorate([
+    state()
+], FwFullscreenButton.prototype, "isFullscreen", void 0);
+FwFullscreenButton = __decorate([
+    customElement("fw-fullscreen-button")
+], FwFullscreenButton);
+
+export { FwFullscreenButton };
+//# sourceMappingURL=fw-fullscreen-button.js.map

package/dist/esm/components/controls/fw-fullscreen-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fw-fullscreen-button.js","sources":["../../../../../src/components/controls/fw-fullscreen-button.ts"],"sourcesContent":["import { LitElement, html, css } from \"lit\";\nimport { customElement, state } from \"lit/decorators.js\";\nimport { createTranslator, type TranslateFn } from \"@livepeer-frameworks/player-core\";\n\n@customElement(\"fw-fullscreen-button\")\nexport class FwFullscreenButton extends LitElement {\n  @state() private isFullscreen = false;\n  private _player: any = null;\n  private _cleanup: (() => void) | null = null;\n\n  private get _t(): TranslateFn {\n    return this._player?.pc?.t ?? createTranslator({ locale: \"en\" });\n  }\n\n  static styles = css`\n    :host {\n      display: inline-flex;\n      align-items: center;\n    }\n  `;\n\n  private _resolvePlayer(): HTMLElement | null {\n    const forId = this.getAttribute(\"for\");\n    if (forId) return document.getElementById(forId);\n    return this.closest(\"fw-player\");\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this._player = this._resolvePlayer();\n    if (!this._player) return;\n    const pc = this._player.pc;\n    if (!pc) return;\n\n    this.isFullscreen = pc.s.isFullscreen;\n    const handler = () => {\n      this.isFullscreen = this._player.pc.s.isFullscreen;\n    };\n    this._player.addEventListener(\"fw-fullscreen-change\", handler);\n    this._player.addEventListener(\"fw-ready\", handler);\n    this._cleanup = () => {\n      this._player?.removeEventListener(\"fw-fullscreen-change\", handler);\n      this._player?.removeEventListener(\"fw-ready\", handler);\n    };\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this._cleanup?.();\n    this._cleanup = null;\n  }\n\n  private handleClick() {\n    this._player?.pc?.toggleFullscreen();\n  }\n\n  render() {\n    return html`<button\n      type=\"button\"\n      class=\"fw-btn-flush\"\n      aria-label=${this.isFullscreen ? this._t(\"exitFullscreen\") : this._t(\"fullscreen\")}\n      aria-pressed=${this.isFullscreen}\n      title=${this.isFullscreen ? this._t(\"exitFullscreen\") : this._t(\"fullscreen\")}\n      @click=${this.handleClick}\n    >\n      ${this.isFullscreen ? \"\\u2716\" : \"\\u26F6\"}\n    </button>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"fw-fullscreen-button\": FwFullscreenButton;\n  }\n}\n"],"names":[],"mappings":";;;;;AAKO,IAAM,kBAAkB,GAAxB,MAAM,kBAAmB,SAAQ,UAAU,CAAA;AAA3C,IAAA,WAAA,GAAA;;QACY,IAAA,CAAA,YAAY,GAAG,KAAK;QAC7B,IAAA,CAAA,OAAO,GAAQ,IAAI;QACnB,IAAA,CAAA,QAAQ,GAAwB,IAAI;IA4D9C;AA1DE,IAAA,IAAY,EAAE,GAAA;AACZ,QAAA,OAAO,IAAI,CAAC,OAAO,EAAE,EAAE,EAAE,CAAC,IAAI,gBAAgB,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC;IAClE;IASQ,cAAc,GAAA;QACpB,MAAM,KAAK,GAAG,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC;AACtC,QAAA,IAAI,KAAK;AAAE,YAAA,OAAO,QAAQ,CAAC,cAAc,CAAC,KAAK,CAAC;AAChD,QAAA,OAAO,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC;IAClC;IAEA,iBAAiB,GAAA;QACf,KAAK,CAAC,iBAAiB,EAAE;AACzB,QAAA,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,cAAc,EAAE;QACpC,IAAI,CAAC,IAAI,CAAC,OAAO;YAAE;AACnB,QAAA,MAAM,EAAE,GAAG,IAAI,CAAC,OAAO,CAAC,EAAE;AAC1B,QAAA,IAAI,CAAC,EAAE;YAAE;QAET,IAAI,CAAC,YAAY,GAAG,EAAE,CAAC,CAAC,CAAC,YAAY;QACrC,MAAM,OAAO,GAAG,MAAK;AACnB,YAAA,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY;AACpD,QAAA,CAAC;QACD,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,sBAAsB,EAAE,OAAO,CAAC;QAC9D,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,UAAU,EAAE,OAAO,CAAC;AAClD,QAAA,IAAI,CAAC,QAAQ,GAAG,MAAK;YACnB,IAAI,CAAC,OAAO,EAAE,mBAAmB,CAAC,sBAAsB,EAAE,OAAO,CAAC;YAClE,IAAI,CAAC,OAAO,EAAE,mBAAmB,CAAC,UAAU,EAAE,OAAO,CAAC;AACxD,QAAA,CAAC;IACH;IAEA,oBAAoB,GAAA;QAClB,KAAK,CAAC,oBAAoB,EAAE;AAC5B,QAAA,IAAI,CAAC,QAAQ,IAAI;AACjB,QAAA,IAAI,CAAC,QAAQ,GAAG,IAAI;IACtB;IAEQ,WAAW,GAAA;AACjB,QAAA,IAAI,CAAC,OAAO,EAAE,EAAE,EAAE,gBAAgB,EAAE;IACtC;IAEA,MAAM,GAAA;AACJ,QAAA,OAAO,IAAI,CAAA,CAAA;;;AAGI,iBAAA,EAAA,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,GAAG,IAAI,CAAC,EAAE,CAAC,YAAY,CAAC;AACnE,mBAAA,EAAA,IAAI,CAAC,YAAY;AACxB,YAAA,EAAA,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,GAAG,IAAI,CAAC,EAAE,CAAC,YAAY,CAAC;AACpE,aAAA,EAAA,IAAI,CAAC,WAAW;;QAEvB,IAAI,CAAC,YAAY,GAAG,QAAQ,GAAG,QAAQ;cACjC;IACZ;;AArDO,kBAAA,CAAA,MAAM,GAAG,GAAG,CAAA;;;;;AAKlB,EAAA,CALY;AARI,UAAA,CAAA;AAAhB,IAAA,KAAK;AAAgC,CAAA,EAAA,kBAAA,CAAA,SAAA,EAAA,cAAA,EAAA,MAAA,CAAA;AAD3B,kBAAkB,GAAA,UAAA,CAAA;IAD9B,aAAa,CAAC,sBAAsB;AACxB,CAAA,EAAA,kBAAkB,CA+D9B;;;;"}

package/dist/esm/components/controls/fw-live-badge.js

@@ -0,0 +1,109 @@
+import { __decorate } from '../../node_modules/.pnpm/@rollup_plugin-typescript@12.3.0_rollup@4.57.1_tslib@2.8.1_typescript@5.9.3/node_modules/tslib/tslib.es6.js';
+import { css, LitElement, html } from 'lit';
+import { state, customElement } from 'lit/decorators.js';
+import { createTranslator } from '@livepeer-frameworks/player-core';
+
+let FwLiveBadge = class FwLiveBadge extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.isLive = false;
+        this._player = null;
+        this._cleanup = null;
+    }
+    get _t() {
+        return this._player?.pc?.t ?? createTranslator({ locale: "en" });
+    }
+    _resolvePlayer() {
+        const forId = this.getAttribute("for");
+        if (forId)
+            return document.getElementById(forId);
+        return this.closest("fw-player");
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this._player = this._resolvePlayer();
+        if (!this._player)
+            return;
+        const pc = this._player.pc;
+        if (!pc)
+            return;
+        this.syncLive();
+        const handler = () => this.syncLive();
+        this._player.addEventListener("fw-state-change", handler);
+        this._player.addEventListener("fw-stream-state", handler);
+        this._player.addEventListener("fw-ready", handler);
+        this._cleanup = () => {
+            this._player?.removeEventListener("fw-state-change", handler);
+            this._player?.removeEventListener("fw-stream-state", handler);
+            this._player?.removeEventListener("fw-ready", handler);
+        };
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this._cleanup?.();
+        this._cleanup = null;
+    }
+    syncLive() {
+        const live = this._player?.pc?.s?.isEffectivelyLive ?? false;
+        this.isLive = live;
+        this.toggleAttribute("live", live);
+    }
+    handleClick() {
+        this._player?.pc?.jumpToLive();
+    }
+    render() {
+        if (!this.isLive)
+            return html ``;
+        return html `<button type="button" aria-label=${this._t("live")} @click=${this.handleClick}>
+      <span class="dot"></span> ${this._t("live").toUpperCase()}
+    </button>`;
+    }
+};
+FwLiveBadge.styles = css `
+    :host {
+      display: inline-flex;
+      align-items: center;
+    }
+    button {
+      display: inline-flex;
+      align-items: center;
+      gap: 0.25rem;
+      border: none;
+      background: none;
+      cursor: pointer;
+      padding: 0.125rem 0.375rem;
+      border-radius: 0.25rem;
+      font-size: 0.625rem;
+      font-weight: 700;
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+      color: inherit;
+    }
+    .dot {
+      width: 0.375rem;
+      height: 0.375rem;
+      border-radius: 50%;
+      background: #ef4444;
+    }
+    :host([live]) .dot {
+      animation: pulse 1.5s ease-in-out infinite;
+    }
+    @keyframes pulse {
+      0%,
+      100% {
+        opacity: 1;
+      }
+      50% {
+        opacity: 0.4;
+      }
+    }
+  `;
+__decorate([
+    state()
+], FwLiveBadge.prototype, "isLive", void 0);
+FwLiveBadge = __decorate([
+    customElement("fw-live-badge")
+], FwLiveBadge);
+
+export { FwLiveBadge };
+//# sourceMappingURL=fw-live-badge.js.map

package/dist/esm/components/controls/fw-live-badge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fw-live-badge.js","sources":["../../../../../src/components/controls/fw-live-badge.ts"],"sourcesContent":["import { LitElement, html, css } from \"lit\";\nimport { customElement, state } from \"lit/decorators.js\";\nimport { createTranslator, type TranslateFn } from \"@livepeer-frameworks/player-core\";\n\n@customElement(\"fw-live-badge\")\nexport class FwLiveBadge extends LitElement {\n  @state() private isLive = false;\n  private _player: any = null;\n  private _cleanup: (() => void) | null = null;\n\n  private get _t(): TranslateFn {\n    return this._player?.pc?.t ?? createTranslator({ locale: \"en\" });\n  }\n\n  static styles = css`\n    :host {\n      display: inline-flex;\n      align-items: center;\n    }\n    button {\n      display: inline-flex;\n      align-items: center;\n      gap: 0.25rem;\n      border: none;\n      background: none;\n      cursor: pointer;\n      padding: 0.125rem 0.375rem;\n      border-radius: 0.25rem;\n      font-size: 0.625rem;\n      font-weight: 700;\n      text-transform: uppercase;\n      letter-spacing: 0.05em;\n      color: inherit;\n    }\n    .dot {\n      width: 0.375rem;\n      height: 0.375rem;\n      border-radius: 50%;\n      background: #ef4444;\n    }\n    :host([live]) .dot {\n      animation: pulse 1.5s ease-in-out infinite;\n    }\n    @keyframes pulse {\n      0%,\n      100% {\n        opacity: 1;\n      }\n      50% {\n        opacity: 0.4;\n      }\n    }\n  `;\n\n  private _resolvePlayer(): HTMLElement | null {\n    const forId = this.getAttribute(\"for\");\n    if (forId) return document.getElementById(forId);\n    return this.closest(\"fw-player\");\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this._player = this._resolvePlayer();\n    if (!this._player) return;\n    const pc = this._player.pc;\n    if (!pc) return;\n\n    this.syncLive();\n    const handler = () => this.syncLive();\n    this._player.addEventListener(\"fw-state-change\", handler);\n    this._player.addEventListener(\"fw-stream-state\", handler);\n    this._player.addEventListener(\"fw-ready\", handler);\n    this._cleanup = () => {\n      this._player?.removeEventListener(\"fw-state-change\", handler);\n      this._player?.removeEventListener(\"fw-stream-state\", handler);\n      this._player?.removeEventListener(\"fw-ready\", handler);\n    };\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this._cleanup?.();\n    this._cleanup = null;\n  }\n\n  private syncLive() {\n    const live = this._player?.pc?.s?.isEffectivelyLive ?? false;\n    this.isLive = live;\n    this.toggleAttribute(\"live\", live);\n  }\n\n  private handleClick() {\n    this._player?.pc?.jumpToLive();\n  }\n\n  render() {\n    if (!this.isLive) return html``;\n\n    return html`<button type=\"button\" aria-label=${this._t(\"live\")} @click=${this.handleClick}>\n      <span class=\"dot\"></span> ${this._t(\"live\").toUpperCase()}\n    </button>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"fw-live-badge\": FwLiveBadge;\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/components/controls/fw-play-button.js

@@ -0,0 +1,76 @@
+import { __decorate } from '../../node_modules/.pnpm/@rollup_plugin-typescript@12.3.0_rollup@4.57.1_tslib@2.8.1_typescript@5.9.3/node_modules/tslib/tslib.es6.js';
+import { css, LitElement, html } from 'lit';
+import { state, customElement } from 'lit/decorators.js';
+import { createTranslator } from '@livepeer-frameworks/player-core';
+
+let FwPlayButton = class FwPlayButton extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.isPlaying = false;
+        this._player = null;
+        this._cleanup = null;
+    }
+    get _t() {
+        return this._player?.pc?.t ?? createTranslator({ locale: "en" });
+    }
+    _resolvePlayer() {
+        const forId = this.getAttribute("for");
+        if (forId)
+            return document.getElementById(forId);
+        return this.closest("fw-player");
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this._player = this._resolvePlayer();
+        if (!this._player)
+            return;
+        const pc = this._player.pc;
+        if (!pc)
+            return;
+        this.isPlaying = pc.s.isPlaying;
+        const handler = () => {
+            this.isPlaying = pc.s.isPlaying;
+        };
+        this._player.addEventListener("fw-state-change", handler);
+        this._player.addEventListener("fw-ready", handler);
+        this._cleanup = () => {
+            this._player?.removeEventListener("fw-state-change", handler);
+            this._player?.removeEventListener("fw-ready", handler);
+        };
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this._cleanup?.();
+        this._cleanup = null;
+    }
+    handleClick() {
+        this._player?.pc?.togglePlay();
+    }
+    render() {
+        return html `<button
+      type="button"
+      class="fw-btn-flush"
+      aria-label=${this.isPlaying ? this._t("pause") : this._t("play")}
+      aria-pressed=${this.isPlaying}
+      title=${this.isPlaying ? this._t("pause") : this._t("play")}
+      @click=${this.handleClick}
+    >
+      ${this.isPlaying ? "\u23F8" : "\u25B6"}
+    </button>`;
+    }
+};
+FwPlayButton.styles = css `
+    :host {
+      display: inline-flex;
+      align-items: center;
+    }
+  `;
+__decorate([
+    state()
+], FwPlayButton.prototype, "isPlaying", void 0);
+FwPlayButton = __decorate([
+    customElement("fw-play-button")
+], FwPlayButton);
+
+export { FwPlayButton };
+//# sourceMappingURL=fw-play-button.js.map

package/dist/esm/components/controls/fw-play-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fw-play-button.js","sources":["../../../../../src/components/controls/fw-play-button.ts"],"sourcesContent":["import { LitElement, html, css } from \"lit\";\nimport { customElement, state } from \"lit/decorators.js\";\nimport { createTranslator, type TranslateFn } from \"@livepeer-frameworks/player-core\";\n\n@customElement(\"fw-play-button\")\nexport class FwPlayButton extends LitElement {\n  @state() private isPlaying = false;\n  private _player: any = null;\n  private _cleanup: (() => void) | null = null;\n\n  private get _t(): TranslateFn {\n    return this._player?.pc?.t ?? createTranslator({ locale: \"en\" });\n  }\n\n  static styles = css`\n    :host {\n      display: inline-flex;\n      align-items: center;\n    }\n  `;\n\n  private _resolvePlayer(): HTMLElement | null {\n    const forId = this.getAttribute(\"for\");\n    if (forId) return document.getElementById(forId);\n    return this.closest(\"fw-player\");\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this._player = this._resolvePlayer();\n    if (!this._player) return;\n    const pc = this._player.pc;\n    if (!pc) return;\n\n    this.isPlaying = pc.s.isPlaying;\n    const handler = () => {\n      this.isPlaying = pc.s.isPlaying;\n    };\n    this._player.addEventListener(\"fw-state-change\", handler);\n    this._player.addEventListener(\"fw-ready\", handler);\n    this._cleanup = () => {\n      this._player?.removeEventListener(\"fw-state-change\", handler);\n      this._player?.removeEventListener(\"fw-ready\", handler);\n    };\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this._cleanup?.();\n    this._cleanup = null;\n  }\n\n  private handleClick() {\n    this._player?.pc?.togglePlay();\n  }\n\n  render() {\n    return html`<button\n      type=\"button\"\n      class=\"fw-btn-flush\"\n      aria-label=${this.isPlaying ? this._t(\"pause\") : this._t(\"play\")}\n      aria-pressed=${this.isPlaying}\n      title=${this.isPlaying ? this._t(\"pause\") : this._t(\"play\")}\n      @click=${this.handleClick}\n    >\n      ${this.isPlaying ? \"\\u23F8\" : \"\\u25B6\"}\n    </button>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"fw-play-button\": FwPlayButton;\n  }\n}\n"],"names":[],"mappings":";;;;;AAKO,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,UAAU,CAAA;AAArC,IAAA,WAAA,GAAA;;QACY,IAAA,CAAA,SAAS,GAAG,KAAK;QAC1B,IAAA,CAAA,OAAO,GAAQ,IAAI;QACnB,IAAA,CAAA,QAAQ,GAAwB,IAAI;IA4D9C;AA1DE,IAAA,IAAY,EAAE,GAAA;AACZ,QAAA,OAAO,IAAI,CAAC,OAAO,EAAE,EAAE,EAAE,CAAC,IAAI,gBAAgB,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC;IAClE;IASQ,cAAc,GAAA;QACpB,MAAM,KAAK,GAAG,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC;AACtC,QAAA,IAAI,KAAK;AAAE,YAAA,OAAO,QAAQ,CAAC,cAAc,CAAC,KAAK,CAAC;AAChD,QAAA,OAAO,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC;IAClC;IAEA,iBAAiB,GAAA;QACf,KAAK,CAAC,iBAAiB,EAAE;AACzB,QAAA,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,cAAc,EAAE;QACpC,IAAI,CAAC,IAAI,CAAC,OAAO;YAAE;AACnB,QAAA,MAAM,EAAE,GAAG,IAAI,CAAC,OAAO,CAAC,EAAE;AAC1B,QAAA,IAAI,CAAC,EAAE;YAAE;QAET,IAAI,CAAC,SAAS,GAAG,EAAE,CAAC,CAAC,CAAC,SAAS;QAC/B,MAAM,OAAO,GAAG,MAAK;YACnB,IAAI,CAAC,SAAS,GAAG,EAAE,CAAC,CAAC,CAAC,SAAS;AACjC,QAAA,CAAC;QACD,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,iBAAiB,EAAE,OAAO,CAAC;QACzD,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,UAAU,EAAE,OAAO,CAAC;AAClD,QAAA,IAAI,CAAC,QAAQ,GAAG,MAAK;YACnB,IAAI,CAAC,OAAO,EAAE,mBAAmB,CAAC,iBAAiB,EAAE,OAAO,CAAC;YAC7D,IAAI,CAAC,OAAO,EAAE,mBAAmB,CAAC,UAAU,EAAE,OAAO,CAAC;AACxD,QAAA,CAAC;IACH;IAEA,oBAAoB,GAAA;QAClB,KAAK,CAAC,oBAAoB,EAAE;AAC5B,QAAA,IAAI,CAAC,QAAQ,IAAI;AACjB,QAAA,IAAI,CAAC,QAAQ,GAAG,IAAI;IACtB;IAEQ,WAAW,GAAA;AACjB,QAAA,IAAI,CAAC,OAAO,EAAE,EAAE,EAAE,UAAU,EAAE;IAChC;IAEA,MAAM,GAAA;AACJ,QAAA,OAAO,IAAI,CAAA,CAAA;;;AAGI,iBAAA,EAAA,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,GAAG,IAAI,CAAC,EAAE,CAAC,MAAM,CAAC;AACjD,mBAAA,EAAA,IAAI,CAAC,SAAS;AACrB,YAAA,EAAA,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,GAAG,IAAI,CAAC,EAAE,CAAC,MAAM,CAAC;AAClD,aAAA,EAAA,IAAI,CAAC,WAAW;;QAEvB,IAAI,CAAC,SAAS,GAAG,QAAQ,GAAG,QAAQ;cAC9B;IACZ;;AArDO,YAAA,CAAA,MAAM,GAAG,GAAG,CAAA;;;;;AAKlB,EAAA,CALY;AARI,UAAA,CAAA;AAAhB,IAAA,KAAK;AAA6B,CAAA,EAAA,YAAA,CAAA,SAAA,EAAA,WAAA,EAAA,MAAA,CAAA;AADxB,YAAY,GAAA,UAAA,CAAA;IADxB,aAAa,CAAC,gBAAgB;AAClB,CAAA,EAAA,YAAY,CA+DxB;;;;"}

package/dist/esm/components/controls/fw-skip-button.js

@@ -0,0 +1,62 @@
+import { __decorate } from '../../node_modules/.pnpm/@rollup_plugin-typescript@12.3.0_rollup@4.57.1_tslib@2.8.1_typescript@5.9.3/node_modules/tslib/tslib.es6.js';
+import { css, LitElement, html } from 'lit';
+import { property, customElement } from 'lit/decorators.js';
+import { createTranslator } from '@livepeer-frameworks/player-core';
+
+let FwSkipButton = class FwSkipButton extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.direction = "forward";
+        this.seconds = 10;
+        this._player = null;
+    }
+    get _t() {
+        return this._player?.pc?.t ?? createTranslator({ locale: "en" });
+    }
+    _resolvePlayer() {
+        const forId = this.getAttribute("for");
+        if (forId)
+            return document.getElementById(forId);
+        return this.closest("fw-player");
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this._player = this._resolvePlayer();
+    }
+    handleClick() {
+        const delta = this.direction === "back" ? -this.seconds : this.seconds;
+        this._player?.pc?.seekBy(delta);
+    }
+    render() {
+        const label = this.direction === "back" ? this._t("skipBackward") : this._t("skipForward");
+        const icon = this.direction === "back" ? "\u23EA" : "\u23E9";
+        const shortcut = this.direction === "back" ? "j" : "l";
+        return html `<button
+      type="button"
+      class="fw-btn-flush"
+      aria-label=${label}
+      title="${label} (${shortcut})"
+      @click=${this.handleClick}
+    >
+      ${icon} ${this.seconds}s
+    </button>`;
+    }
+};
+FwSkipButton.styles = css `
+    :host {
+      display: inline-flex;
+      align-items: center;
+    }
+  `;
+__decorate([
+    property({ type: String })
+], FwSkipButton.prototype, "direction", void 0);
+__decorate([
+    property({ type: Number })
+], FwSkipButton.prototype, "seconds", void 0);
+FwSkipButton = __decorate([
+    customElement("fw-skip-button")
+], FwSkipButton);
+
+export { FwSkipButton };
+//# sourceMappingURL=fw-skip-button.js.map

package/dist/esm/components/controls/fw-skip-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fw-skip-button.js","sources":["../../../../../src/components/controls/fw-skip-button.ts"],"sourcesContent":["import { LitElement, html, css } from \"lit\";\nimport { customElement, property } from \"lit/decorators.js\";\nimport { createTranslator, type TranslateFn } from \"@livepeer-frameworks/player-core\";\n\n@customElement(\"fw-skip-button\")\nexport class FwSkipButton extends LitElement {\n  @property({ type: String }) direction: \"back\" | \"forward\" = \"forward\";\n  @property({ type: Number }) seconds = 10;\n  private _player: any = null;\n\n  private get _t(): TranslateFn {\n    return this._player?.pc?.t ?? createTranslator({ locale: \"en\" });\n  }\n\n  static styles = css`\n    :host {\n      display: inline-flex;\n      align-items: center;\n    }\n  `;\n\n  private _resolvePlayer(): HTMLElement | null {\n    const forId = this.getAttribute(\"for\");\n    if (forId) return document.getElementById(forId);\n    return this.closest(\"fw-player\");\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this._player = this._resolvePlayer();\n  }\n\n  private handleClick() {\n    const delta = this.direction === \"back\" ? -this.seconds : this.seconds;\n    this._player?.pc?.seekBy(delta);\n  }\n\n  render() {\n    const label = this.direction === \"back\" ? this._t(\"skipBackward\") : this._t(\"skipForward\");\n    const icon = this.direction === \"back\" ? \"\\u23EA\" : \"\\u23E9\";\n    const shortcut = this.direction === \"back\" ? \"j\" : \"l\";\n\n    return html`<button\n      type=\"button\"\n      class=\"fw-btn-flush\"\n      aria-label=${label}\n      title=\"${label} (${shortcut})\"\n      @click=${this.handleClick}\n    >\n      ${icon} ${this.seconds}s\n    </button>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"fw-skip-button\": FwSkipButton;\n  }\n}\n"],"names":[],"mappings":";;;;;AAKO,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,UAAU,CAAA;AAArC,IAAA,WAAA,GAAA;;QACuB,IAAA,CAAA,SAAS,GAAuB,SAAS;QACzC,IAAA,CAAA,OAAO,GAAG,EAAE;QAChC,IAAA,CAAA,OAAO,GAAQ,IAAI;IA4C7B;AA1CE,IAAA,IAAY,EAAE,GAAA;AACZ,QAAA,OAAO,IAAI,CAAC,OAAO,EAAE,EAAE,EAAE,CAAC,IAAI,gBAAgB,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC;IAClE;IASQ,cAAc,GAAA;QACpB,MAAM,KAAK,GAAG,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC;AACtC,QAAA,IAAI,KAAK;AAAE,YAAA,OAAO,QAAQ,CAAC,cAAc,CAAC,KAAK,CAAC;AAChD,QAAA,OAAO,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC;IAClC;IAEA,iBAAiB,GAAA;QACf,KAAK,CAAC,iBAAiB,EAAE;AACzB,QAAA,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,cAAc,EAAE;IACtC;IAEQ,WAAW,GAAA;QACjB,MAAM,KAAK,GAAG,IAAI,CAAC,SAAS,KAAK,MAAM,GAAG,CAAC,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO;QACtE,IAAI,CAAC,OAAO,EAAE,EAAE,EAAE,MAAM,CAAC,KAAK,CAAC;IACjC;IAEA,MAAM,GAAA;QACJ,MAAM,KAAK,GAAG,IAAI,CAAC,SAAS,KAAK,MAAM,GAAG,IAAI,CAAC,EAAE,CAAC,cAAc,CAAC,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC;AAC1F,QAAA,MAAM,IAAI,GAAG,IAAI,CAAC,SAAS,KAAK,MAAM,GAAG,QAAQ,GAAG,QAAQ;AAC5D,QAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,SAAS,KAAK,MAAM,GAAG,GAAG,GAAG,GAAG;AAEtD,QAAA,OAAO,IAAI,CAAA,CAAA;;;mBAGI,KAAK;AACT,aAAA,EAAA,KAAK,KAAK,QAAQ,CAAA;AAClB,aAAA,EAAA,IAAI,CAAC,WAAW;;QAEvB,IAAI,CAAA,CAAA,EAAI,IAAI,CAAC,OAAO,CAAA;cACd;IACZ;;AArCO,YAAA,CAAA,MAAM,GAAG,GAAG,CAAA;;;;;AAKlB,EAAA,CALY;AARe,UAAA,CAAA;AAA3B,IAAA,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE;AAA4C,CAAA,EAAA,YAAA,CAAA,SAAA,EAAA,WAAA,EAAA,MAAA,CAAA;AAC1C,UAAA,CAAA;AAA3B,IAAA,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE;AAAe,CAAA,EAAA,YAAA,CAAA,SAAA,EAAA,SAAA,EAAA,MAAA,CAAA;AAF9B,YAAY,GAAA,UAAA,CAAA;IADxB,aAAa,CAAC,gBAAgB;AAClB,CAAA,EAAA,YAAY,CA+CxB;;;;"}

package/dist/esm/components/controls/fw-time-display.js

@@ -0,0 +1,77 @@
+import { __decorate } from '../../node_modules/.pnpm/@rollup_plugin-typescript@12.3.0_rollup@4.57.1_tslib@2.8.1_typescript@5.9.3/node_modules/tslib/tslib.es6.js';
+import { css, LitElement, html } from 'lit';
+import { state, customElement } from 'lit/decorators.js';
+import { formatTimeDisplay } from '@livepeer-frameworks/player-core';
+
+let FwTimeDisplay = class FwTimeDisplay extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.display = "";
+        this._player = null;
+        this._cleanup = null;
+    }
+    _resolvePlayer() {
+        const forId = this.getAttribute("for");
+        if (forId)
+            return document.getElementById(forId);
+        return this.closest("fw-player");
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this._player = this._resolvePlayer();
+        if (!this._player)
+            return;
+        const pc = this._player.pc;
+        if (!pc)
+            return;
+        this.updateDisplay();
+        const handler = () => this.updateDisplay();
+        this._player.addEventListener("fw-time-update", handler);
+        this._player.addEventListener("fw-ready", handler);
+        this._cleanup = () => {
+            this._player?.removeEventListener("fw-time-update", handler);
+            this._player?.removeEventListener("fw-ready", handler);
+        };
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this._cleanup?.();
+        this._cleanup = null;
+    }
+    updateDisplay() {
+        const pc = this._player?.pc;
+        if (!pc)
+            return;
+        const s = pc.s;
+        this.display = formatTimeDisplay({
+            isLive: s.isEffectivelyLive,
+            currentTime: s.currentTime,
+            duration: s.duration,
+            liveEdge: pc.getLiveEdge?.() ?? s.duration,
+            seekableStart: pc.getSeekableStart?.() ?? 0,
+        });
+    }
+    render() {
+        return html `<span>${this.display}</span>`;
+    }
+};
+FwTimeDisplay.styles = css `
+    :host {
+      display: inline-flex;
+      align-items: center;
+      font-variant-numeric: tabular-nums;
+    }
+    span {
+      white-space: nowrap;
+      font-size: 0.75rem;
+    }
+  `;
+__decorate([
+    state()
+], FwTimeDisplay.prototype, "display", void 0);
+FwTimeDisplay = __decorate([
+    customElement("fw-time-display")
+], FwTimeDisplay);
+
+export { FwTimeDisplay };
+//# sourceMappingURL=fw-time-display.js.map

package/dist/esm/components/controls/fw-time-display.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fw-time-display.js","sources":["../../../../../src/components/controls/fw-time-display.ts"],"sourcesContent":["import { LitElement, html, css } from \"lit\";\nimport { customElement, state } from \"lit/decorators.js\";\nimport { formatTimeDisplay } from \"@livepeer-frameworks/player-core\";\n\n@customElement(\"fw-time-display\")\nexport class FwTimeDisplay extends LitElement {\n  @state() private display = \"\";\n  private _player: any = null;\n  private _cleanup: (() => void) | null = null;\n\n  static styles = css`\n    :host {\n      display: inline-flex;\n      align-items: center;\n      font-variant-numeric: tabular-nums;\n    }\n    span {\n      white-space: nowrap;\n      font-size: 0.75rem;\n    }\n  `;\n\n  private _resolvePlayer(): HTMLElement | null {\n    const forId = this.getAttribute(\"for\");\n    if (forId) return document.getElementById(forId);\n    return this.closest(\"fw-player\");\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this._player = this._resolvePlayer();\n    if (!this._player) return;\n    const pc = this._player.pc;\n    if (!pc) return;\n\n    this.updateDisplay();\n    const handler = () => this.updateDisplay();\n    this._player.addEventListener(\"fw-time-update\", handler);\n    this._player.addEventListener(\"fw-ready\", handler);\n    this._cleanup = () => {\n      this._player?.removeEventListener(\"fw-time-update\", handler);\n      this._player?.removeEventListener(\"fw-ready\", handler);\n    };\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this._cleanup?.();\n    this._cleanup = null;\n  }\n\n  private updateDisplay() {\n    const pc = this._player?.pc;\n    if (!pc) return;\n    const s = pc.s;\n    this.display = formatTimeDisplay({\n      isLive: s.isEffectivelyLive,\n      currentTime: s.currentTime,\n      duration: s.duration,\n      liveEdge: pc.getLiveEdge?.() ?? s.duration,\n      seekableStart: pc.getSeekableStart?.() ?? 0,\n    });\n  }\n\n  render() {\n    return html`<span>${this.display}</span>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"fw-time-display\": FwTimeDisplay;\n  }\n}\n"],"names":[],"mappings":";;;;;AAKO,IAAM,aAAa,GAAnB,MAAM,aAAc,SAAQ,UAAU,CAAA;AAAtC,IAAA,WAAA,GAAA;;QACY,IAAA,CAAA,OAAO,GAAG,EAAE;QACrB,IAAA,CAAA,OAAO,GAAQ,IAAI;QACnB,IAAA,CAAA,QAAQ,GAAwB,IAAI;IA2D9C;IA7CU,cAAc,GAAA;QACpB,MAAM,KAAK,GAAG,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC;AACtC,QAAA,IAAI,KAAK;AAAE,YAAA,OAAO,QAAQ,CAAC,cAAc,CAAC,KAAK,CAAC;AAChD,QAAA,OAAO,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC;IAClC;IAEA,iBAAiB,GAAA;QACf,KAAK,CAAC,iBAAiB,EAAE;AACzB,QAAA,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,cAAc,EAAE;QACpC,IAAI,CAAC,IAAI,CAAC,OAAO;YAAE;AACnB,QAAA,MAAM,EAAE,GAAG,IAAI,CAAC,OAAO,CAAC,EAAE;AAC1B,QAAA,IAAI,CAAC,EAAE;YAAE;QAET,IAAI,CAAC,aAAa,EAAE;QACpB,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,aAAa,EAAE;QAC1C,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,gBAAgB,EAAE,OAAO,CAAC;QACxD,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,UAAU,EAAE,OAAO,CAAC;AAClD,QAAA,IAAI,CAAC,QAAQ,GAAG,MAAK;YACnB,IAAI,CAAC,OAAO,EAAE,mBAAmB,CAAC,gBAAgB,EAAE,OAAO,CAAC;YAC5D,IAAI,CAAC,OAAO,EAAE,mBAAmB,CAAC,UAAU,EAAE,OAAO,CAAC;AACxD,QAAA,CAAC;IACH;IAEA,oBAAoB,GAAA;QAClB,KAAK,CAAC,oBAAoB,EAAE;AAC5B,QAAA,IAAI,CAAC,QAAQ,IAAI;AACjB,QAAA,IAAI,CAAC,QAAQ,GAAG,IAAI;IACtB;IAEQ,aAAa,GAAA;AACnB,QAAA,MAAM,EAAE,GAAG,IAAI,CAAC,OAAO,EAAE,EAAE;AAC3B,QAAA,IAAI,CAAC,EAAE;YAAE;AACT,QAAA,MAAM,CAAC,GAAG,EAAE,CAAC,CAAC;AACd,QAAA,IAAI,CAAC,OAAO,GAAG,iBAAiB,CAAC;YAC/B,MAAM,EAAE,CAAC,CAAC,iBAAiB;YAC3B,WAAW,EAAE,CAAC,CAAC,WAAW;YAC1B,QAAQ,EAAE,CAAC,CAAC,QAAQ;YACpB,QAAQ,EAAE,EAAE,CAAC,WAAW,IAAI,IAAI,CAAC,CAAC,QAAQ;AAC1C,YAAA,aAAa,EAAE,EAAE,CAAC,gBAAgB,IAAI,IAAI,CAAC;AAC5C,SAAA,CAAC;IACJ;IAEA,MAAM,GAAA;AACJ,QAAA,OAAO,IAAI,CAAA,CAAA,MAAA,EAAS,IAAI,CAAC,OAAO,SAAS;IAC3C;;AAxDO,aAAA,CAAA,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;AAUlB,EAAA,CAVY;AAJI,UAAA,CAAA;AAAhB,IAAA,KAAK;AAAwB,CAAA,EAAA,aAAA,CAAA,SAAA,EAAA,SAAA,EAAA,MAAA,CAAA;AADnB,aAAa,GAAA,UAAA,CAAA;IADzB,aAAa,CAAC,iBAAiB;AACnB,CAAA,EAAA,aAAa,CA8DzB;;;;"}

package/dist/esm/components/controls/fw-volume-control.js

@@ -0,0 +1,76 @@
+import { __decorate } from '../../node_modules/.pnpm/@rollup_plugin-typescript@12.3.0_rollup@4.57.1_tslib@2.8.1_typescript@5.9.3/node_modules/tslib/tslib.es6.js';
+import { css, LitElement, html } from 'lit';
+import { state, customElement } from 'lit/decorators.js';
+import { createTranslator } from '@livepeer-frameworks/player-core';
+
+let FwVolumeControl = class FwVolumeControl extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.isMuted = false;
+        this._player = null;
+        this._cleanup = null;
+    }
+    get _t() {
+        return this._player?.pc?.t ?? createTranslator({ locale: "en" });
+    }
+    _resolvePlayer() {
+        const forId = this.getAttribute("for");
+        if (forId)
+            return document.getElementById(forId);
+        return this.closest("fw-player");
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this._player = this._resolvePlayer();
+        if (!this._player)
+            return;
+        const pc = this._player.pc;
+        if (!pc)
+            return;
+        this.isMuted = pc.s.isMuted;
+        const handler = () => {
+            this.isMuted = this._player.pc.s.isMuted;
+        };
+        this._player.addEventListener("fw-volume-change", handler);
+        this._player.addEventListener("fw-ready", handler);
+        this._cleanup = () => {
+            this._player?.removeEventListener("fw-volume-change", handler);
+            this._player?.removeEventListener("fw-ready", handler);
+        };
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this._cleanup?.();
+        this._cleanup = null;
+    }
+    handleClick() {
+        this._player?.pc?.toggleMute();
+    }
+    render() {
+        return html `<button
+      type="button"
+      class="fw-btn-flush"
+      aria-label=${this.isMuted ? this._t("unmute") : this._t("mute")}
+      aria-pressed=${this.isMuted}
+      title=${this.isMuted ? this._t("unmute") : this._t("mute")}
+      @click=${this.handleClick}
+    >
+      ${this.isMuted ? "\uD83D\uDD07" : "\uD83D\uDD0A"}
+    </button>`;
+    }
+};
+FwVolumeControl.styles = css `
+    :host {
+      display: inline-flex;
+      align-items: center;
+    }
+  `;
+__decorate([
+    state()
+], FwVolumeControl.prototype, "isMuted", void 0);
+FwVolumeControl = __decorate([
+    customElement("fw-volume-button")
+], FwVolumeControl);
+
+export { FwVolumeControl };
+//# sourceMappingURL=fw-volume-control.js.map

package/dist/esm/components/controls/fw-volume-control.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fw-volume-control.js","sources":["../../../../../src/components/controls/fw-volume-control.ts"],"sourcesContent":["import { LitElement, html, css } from \"lit\";\nimport { customElement, state } from \"lit/decorators.js\";\nimport { createTranslator, type TranslateFn } from \"@livepeer-frameworks/player-core\";\n\n@customElement(\"fw-volume-button\")\nexport class FwVolumeControl extends LitElement {\n  @state() private isMuted = false;\n  private _player: any = null;\n  private _cleanup: (() => void) | null = null;\n\n  private get _t(): TranslateFn {\n    return this._player?.pc?.t ?? createTranslator({ locale: \"en\" });\n  }\n\n  static styles = css`\n    :host {\n      display: inline-flex;\n      align-items: center;\n    }\n  `;\n\n  private _resolvePlayer(): HTMLElement | null {\n    const forId = this.getAttribute(\"for\");\n    if (forId) return document.getElementById(forId);\n    return this.closest(\"fw-player\");\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this._player = this._resolvePlayer();\n    if (!this._player) return;\n    const pc = this._player.pc;\n    if (!pc) return;\n\n    this.isMuted = pc.s.isMuted;\n    const handler = () => {\n      this.isMuted = this._player.pc.s.isMuted;\n    };\n    this._player.addEventListener(\"fw-volume-change\", handler);\n    this._player.addEventListener(\"fw-ready\", handler);\n    this._cleanup = () => {\n      this._player?.removeEventListener(\"fw-volume-change\", handler);\n      this._player?.removeEventListener(\"fw-ready\", handler);\n    };\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this._cleanup?.();\n    this._cleanup = null;\n  }\n\n  private handleClick() {\n    this._player?.pc?.toggleMute();\n  }\n\n  render() {\n    return html`<button\n      type=\"button\"\n      class=\"fw-btn-flush\"\n      aria-label=${this.isMuted ? this._t(\"unmute\") : this._t(\"mute\")}\n      aria-pressed=${this.isMuted}\n      title=${this.isMuted ? this._t(\"unmute\") : this._t(\"mute\")}\n      @click=${this.handleClick}\n    >\n      ${this.isMuted ? \"\\uD83D\\uDD07\" : \"\\uD83D\\uDD0A\"}\n    </button>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"fw-volume-button\": FwVolumeControl;\n  }\n}\n"],"names":[],"mappings":";;;;;AAKO,IAAM,eAAe,GAArB,MAAM,eAAgB,SAAQ,UAAU,CAAA;AAAxC,IAAA,WAAA,GAAA;;QACY,IAAA,CAAA,OAAO,GAAG,KAAK;QACxB,IAAA,CAAA,OAAO,GAAQ,IAAI;QACnB,IAAA,CAAA,QAAQ,GAAwB,IAAI;IA4D9C;AA1DE,IAAA,IAAY,EAAE,GAAA;AACZ,QAAA,OAAO,IAAI,CAAC,OAAO,EAAE,EAAE,EAAE,CAAC,IAAI,gBAAgB,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC;IAClE;IASQ,cAAc,GAAA;QACpB,MAAM,KAAK,GAAG,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC;AACtC,QAAA,IAAI,KAAK;AAAE,YAAA,OAAO,QAAQ,CAAC,cAAc,CAAC,KAAK,CAAC;AAChD,QAAA,OAAO,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC;IAClC;IAEA,iBAAiB,GAAA;QACf,KAAK,CAAC,iBAAiB,EAAE;AACzB,QAAA,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,cAAc,EAAE;QACpC,IAAI,CAAC,IAAI,CAAC,OAAO;YAAE;AACnB,QAAA,MAAM,EAAE,GAAG,IAAI,CAAC,OAAO,CAAC,EAAE;AAC1B,QAAA,IAAI,CAAC,EAAE;YAAE;QAET,IAAI,CAAC,OAAO,GAAG,EAAE,CAAC,CAAC,CAAC,OAAO;QAC3B,MAAM,OAAO,GAAG,MAAK;AACnB,YAAA,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC,CAAC,OAAO;AAC1C,QAAA,CAAC;QACD,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,kBAAkB,EAAE,OAAO,CAAC;QAC1D,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,UAAU,EAAE,OAAO,CAAC;AAClD,QAAA,IAAI,CAAC,QAAQ,GAAG,MAAK;YACnB,IAAI,CAAC,OAAO,EAAE,mBAAmB,CAAC,kBAAkB,EAAE,OAAO,CAAC;YAC9D,IAAI,CAAC,OAAO,EAAE,mBAAmB,CAAC,UAAU,EAAE,OAAO,CAAC;AACxD,QAAA,CAAC;IACH;IAEA,oBAAoB,GAAA;QAClB,KAAK,CAAC,oBAAoB,EAAE;AAC5B,QAAA,IAAI,CAAC,QAAQ,IAAI;AACjB,QAAA,IAAI,CAAC,QAAQ,GAAG,IAAI;IACtB;IAEQ,WAAW,GAAA;AACjB,QAAA,IAAI,CAAC,OAAO,EAAE,EAAE,EAAE,UAAU,EAAE;IAChC;IAEA,MAAM,GAAA;AACJ,QAAA,OAAO,IAAI,CAAA,CAAA;;;AAGI,iBAAA,EAAA,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,GAAG,IAAI,CAAC,EAAE,CAAC,MAAM,CAAC;AAChD,mBAAA,EAAA,IAAI,CAAC,OAAO;AACnB,YAAA,EAAA,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,GAAG,IAAI,CAAC,EAAE,CAAC,MAAM,CAAC;AACjD,aAAA,EAAA,IAAI,CAAC,WAAW;;QAEvB,IAAI,CAAC,OAAO,GAAG,cAAc,GAAG,cAAc;cACxC;IACZ;;AArDO,eAAA,CAAA,MAAM,GAAG,GAAG,CAAA;;;;;AAKlB,EAAA,CALY;AARI,UAAA,CAAA;AAAhB,IAAA,KAAK;AAA2B,CAAA,EAAA,eAAA,CAAA,SAAA,EAAA,SAAA,EAAA,MAAA,CAAA;AADtB,eAAe,GAAA,UAAA,CAAA;IAD3B,aAAa,CAAC,kBAAkB;AACpB,CAAA,EAAA,eAAe,CA+D3B;;;;"}

package/dist/esm/components/fw-dev-mode-panel.js

@@ -23,7 +23,7 @@ let FwDevModePanel = class FwDevModePanel extends LitElement {
         this.playbackMode = "auto";
         this._activeTab = "config";
         this._hoveredComboIndex = null;
-        this._tooltipAbove = false;
+        this._tooltipPos = null;
         this._showDisabledPlayers = false;
         this._playbackScore = 1;
         this._qualityScore = 100;
@@ -158,15 +158,12 @@ let FwDevModePanel = class FwDevModePanel extends LitElement {
     }
     _handleComboMouseEnter(index, event) {
         this._hoveredComboIndex = index;
-        const container = this.renderRoot.querySelector(".fw-dev-body");
-        if (!container) {
-            return;
-        }
         const row = event.currentTarget;
-        const containerRect = container.getBoundingClientRect();
         const rowRect = row.getBoundingClientRect();
-        const relativePosition = (rowRect.top - containerRect.top) / containerRect.height;
-        this._tooltipAbove = relativePosition > 0.6;
+        this._tooltipPos = {
+            top: Math.max(8, Math.min(rowRect.top, window.innerHeight - 200)),
+            left: Math.max(8, rowRect.left - 228),
+        };
     }
     _handleModeChange(mode) {
         this.playbackMode = mode;
@@ -645,6 +642,7 @@ let FwDevModePanel = class FwDevModePanel extends LitElement {
                       @mouseenter=${(event) => this._handleComboMouseEnter(index, event)}
                       @mouseleave=${() => {
                     this._hoveredComboIndex = null;
+                    this._tooltipPos = null;
                 }}
                     >
                       <button
@@ -685,14 +683,12 @@ let FwDevModePanel = class FwDevModePanel extends LitElement {
                         >
                       </button>
 
-                      ${this._hoveredComboIndex === index
+                      ${this._hoveredComboIndex === index && this._tooltipPos
                     ? html `
                             <div
-                              class=${classMap({
-                        "fw-dev-tooltip": true,
-                        "fw-dev-tooltip--above": this._tooltipAbove,
-                        "fw-dev-tooltip--below": !this._tooltipAbove,
-                    })}
+                              class="fw-dev-tooltip"
+                              style="top: ${this._tooltipPos.top}px; left: ${this._tooltipPos
+                        .left}px;"
                             >
                               <div class="fw-dev-tooltip-header">
                                 <div class="fw-dev-tooltip-title">${combo.playerName}</div>
@@ -877,7 +873,7 @@ __decorate([
 ], FwDevModePanel.prototype, "_hoveredComboIndex", void 0);
 __decorate([
     state()
-], FwDevModePanel.prototype, "_tooltipAbove", void 0);
+], FwDevModePanel.prototype, "_tooltipPos", void 0);
 __decorate([
     state()
 ], FwDevModePanel.prototype, "_showDisabledPlayers", void 0);