@livepeer-frameworks/player-wc 0.1.0

package/dist/esm/components/fw-stats-panel.js

@@ -0,0 +1,141 @@
+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, nothing, html } from 'lit';
+import { property, customElement } from 'lit/decorators.js';
+import { sharedStyles } from '../styles/shared-styles.js';
+import { utilityStyles } from '../styles/utility-styles.js';
+import { closeIcon } from '../icons/index.js';
+
+let FwStatsPanel = class FwStatsPanel extends LitElement {
+    _resolution() {
+        const video = this.pc.s.videoElement;
+        if (!video || !video.videoWidth || !video.videoHeight)
+            return null;
+        return `${video.videoWidth}x${video.videoHeight}`;
+    }
+    _stat(label, value) {
+        if (value == null || value === "")
+            return nothing;
+        return html `<div class="row">
+      <span class="label">${label}</span><span class="value">${value}</span>
+    </div>`;
+    }
+    render() {
+        const s = this.pc.s;
+        const q = s.playbackQuality;
+        const meta = s.metadata;
+        const ss = s.streamState;
+        return html `
+      <div class="panel fw-stats-panel">
+        <div class="header">
+          <span class="title">Stats</span>
+          <button
+            class="close"
+            @click=${() => this.dispatchEvent(new CustomEvent("fw-close", { bubbles: true, composed: true }))}
+            aria-label="Close stats"
+          >
+            ${closeIcon()}
+          </button>
+        </div>
+
+        ${this._stat("State", s.state)} ${this._stat("Player", s.currentPlayerInfo?.name)}
+        ${this._stat("Source", s.currentSourceInfo?.type)}
+
+        <div class="sep"></div>
+
+        ${q
+            ? html `
+              ${this._stat("Resolution", this._resolution())}
+              ${this._stat("Bitrate", q.bitrate ? `${Math.round(q.bitrate / 1000)} kbps` : null)}
+              ${this._stat("Latency", q.latency != null ? `${q.latency.toFixed(1)}s` : null)}
+              ${this._stat("Buffer", q.bufferedAhead != null ? `${q.bufferedAhead.toFixed(1)}s` : null)}
+              ${this._stat("Quality", q.score != null ? `${q.score.toFixed(0)}` : null)}
+              ${this._stat("Frame drops", q.frameDropRate != null ? `${q.frameDropRate.toFixed(1)}%` : null)}
+              ${this._stat("Stalls", q.stallCount ?? null)}
+            `
+            : nothing}
+        ${meta || ss
+            ? html `
+              <div class="sep"></div>
+              ${this._stat("Viewers", meta?.viewers ?? null)}
+              ${this._stat("Stream status", ss?.status ?? null)}
+            `
+            : nothing}
+      </div>
+    `;
+    }
+};
+FwStatsPanel.styles = [
+    sharedStyles,
+    utilityStyles,
+    css `
+      :host {
+        display: contents;
+      }
+      .panel {
+        position: absolute;
+        top: 0.75rem;
+        left: 0.75rem;
+        z-index: 30;
+        min-width: 240px;
+        max-width: 320px;
+        max-height: 80%;
+        overflow: auto;
+        border-radius: 0.5rem;
+        border: 1px solid rgb(255 255 255 / 0.1);
+        background: rgb(0 0 0 / 0.85);
+        backdrop-filter: blur(8px);
+        padding: 0.5rem 0.75rem;
+        font-size: 0.6875rem;
+        color: rgb(255 255 255 / 0.7);
+      }
+      .header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 0.5rem;
+      }
+      .title {
+        font-size: 0.75rem;
+        font-weight: 600;
+        color: white;
+      }
+      .close {
+        display: flex;
+        background: none;
+        border: none;
+        color: rgb(255 255 255 / 0.5);
+        cursor: pointer;
+        padding: 0;
+      }
+      .close:hover {
+        color: white;
+      }
+      .row {
+        display: flex;
+        justify-content: space-between;
+        padding: 0.125rem 0;
+      }
+      .label {
+        color: rgb(255 255 255 / 0.5);
+      }
+      .value {
+        color: rgb(255 255 255 / 0.9);
+        font-variant-numeric: tabular-nums;
+        font-family: ui-monospace, monospace;
+      }
+      .sep {
+        height: 1px;
+        background: rgb(255 255 255 / 0.08);
+        margin: 0.375rem 0;
+      }
+    `,
+];
+__decorate([
+    property({ attribute: false })
+], FwStatsPanel.prototype, "pc", void 0);
+FwStatsPanel = __decorate([
+    customElement("fw-stats-panel")
+], FwStatsPanel);
+
+export { FwStatsPanel };
+//# sourceMappingURL=fw-stats-panel.js.map

package/dist/esm/components/fw-stats-panel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fw-stats-panel.js","sources":["../../../../src/components/fw-stats-panel.ts"],"sourcesContent":["/**\n * <fw-stats-panel> — Stats for nerds overlay.\n * Port of StatsPanel.tsx from player-react.\n */\nimport { LitElement, html, css, nothing } from \"lit\";\nimport { customElement, property } from \"lit/decorators.js\";\nimport { sharedStyles } from \"../styles/shared-styles.js\";\nimport { utilityStyles } from \"../styles/utility-styles.js\";\nimport { closeIcon } from \"../icons/index.js\";\nimport type { PlayerControllerHost } from \"../controllers/player-controller-host.js\";\n\n@customElement(\"fw-stats-panel\")\nexport class FwStatsPanel extends LitElement {\n  @property({ attribute: false }) pc!: PlayerControllerHost;\n\n  static styles = [\n    sharedStyles,\n    utilityStyles,\n    css`\n      :host {\n        display: contents;\n      }\n      .panel {\n        position: absolute;\n        top: 0.75rem;\n        left: 0.75rem;\n        z-index: 30;\n        min-width: 240px;\n        max-width: 320px;\n        max-height: 80%;\n        overflow: auto;\n        border-radius: 0.5rem;\n        border: 1px solid rgb(255 255 255 / 0.1);\n        background: rgb(0 0 0 / 0.85);\n        backdrop-filter: blur(8px);\n        padding: 0.5rem 0.75rem;\n        font-size: 0.6875rem;\n        color: rgb(255 255 255 / 0.7);\n      }\n      .header {\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        margin-bottom: 0.5rem;\n      }\n      .title {\n        font-size: 0.75rem;\n        font-weight: 600;\n        color: white;\n      }\n      .close {\n        display: flex;\n        background: none;\n        border: none;\n        color: rgb(255 255 255 / 0.5);\n        cursor: pointer;\n        padding: 0;\n      }\n      .close:hover {\n        color: white;\n      }\n      .row {\n        display: flex;\n        justify-content: space-between;\n        padding: 0.125rem 0;\n      }\n      .label {\n        color: rgb(255 255 255 / 0.5);\n      }\n      .value {\n        color: rgb(255 255 255 / 0.9);\n        font-variant-numeric: tabular-nums;\n        font-family: ui-monospace, monospace;\n      }\n      .sep {\n        height: 1px;\n        background: rgb(255 255 255 / 0.08);\n        margin: 0.375rem 0;\n      }\n    `,\n  ];\n\n  private _resolution(): string | null {\n    const video = this.pc.s.videoElement;\n    if (!video || !video.videoWidth || !video.videoHeight) return null;\n    return `${video.videoWidth}x${video.videoHeight}`;\n  }\n\n  private _stat(label: string, value: string | number | null | undefined) {\n    if (value == null || value === \"\") return nothing;\n    return html`<div class=\"row\">\n      <span class=\"label\">${label}</span><span class=\"value\">${value}</span>\n    </div>`;\n  }\n\n  protected render() {\n    const s = this.pc.s;\n    const q = s.playbackQuality;\n    const meta = s.metadata;\n    const ss = s.streamState;\n\n    return html`\n      <div class=\"panel fw-stats-panel\">\n        <div class=\"header\">\n          <span class=\"title\">Stats</span>\n          <button\n            class=\"close\"\n            @click=${() =>\n              this.dispatchEvent(new CustomEvent(\"fw-close\", { bubbles: true, composed: true }))}\n            aria-label=\"Close stats\"\n          >\n            ${closeIcon()}\n          </button>\n        </div>\n\n        ${this._stat(\"State\", s.state)} ${this._stat(\"Player\", s.currentPlayerInfo?.name)}\n        ${this._stat(\"Source\", s.currentSourceInfo?.type)}\n\n        <div class=\"sep\"></div>\n\n        ${q\n          ? html`\n              ${this._stat(\"Resolution\", this._resolution())}\n              ${this._stat(\"Bitrate\", q.bitrate ? `${Math.round(q.bitrate / 1000)} kbps` : null)}\n              ${this._stat(\"Latency\", q.latency != null ? `${q.latency.toFixed(1)}s` : null)}\n              ${this._stat(\n                \"Buffer\",\n                q.bufferedAhead != null ? `${q.bufferedAhead.toFixed(1)}s` : null\n              )}\n              ${this._stat(\"Quality\", q.score != null ? `${q.score.toFixed(0)}` : null)}\n              ${this._stat(\n                \"Frame drops\",\n                q.frameDropRate != null ? `${q.frameDropRate.toFixed(1)}%` : null\n              )}\n              ${this._stat(\"Stalls\", q.stallCount ?? null)}\n            `\n          : nothing}\n        ${meta || ss\n          ? html`\n              <div class=\"sep\"></div>\n              ${this._stat(\"Viewers\", meta?.viewers ?? null)}\n              ${this._stat(\"Stream status\", ss?.status ?? null)}\n            `\n          : nothing}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"fw-stats-panel\": FwStatsPanel;\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/components/fw-subtitle-renderer.js

@@ -0,0 +1,70 @@
+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, nothing, html } from 'lit';
+import { property, customElement } from 'lit/decorators.js';
+
+let FwSubtitleRenderer = class FwSubtitleRenderer extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.currentTime = 0;
+        this.enabled = false;
+        this.cues = [];
+    }
+    get _activeCue() {
+        if (!this.enabled || !this.cues.length)
+            return null;
+        const t = this.currentTime * 1000; // Convert to ms
+        for (const cue of this.cues) {
+            if (t >= cue.startTime && t <= cue.endTime)
+                return cue.text;
+        }
+        return null;
+    }
+    render() {
+        const text = this._activeCue;
+        if (!text)
+            return nothing;
+        return html `<span class="subtitle" aria-live="polite">${text}</span>`;
+    }
+};
+FwSubtitleRenderer.styles = css `
+    :host {
+      display: contents;
+    }
+    .subtitle {
+      position: absolute;
+      bottom: 5%;
+      left: 50%;
+      transform: translateX(-50%);
+      display: inline-block;
+      max-width: 90%;
+      padding: 0.5em 1em;
+      border-radius: 4px;
+      background: rgb(0 0 0 / 0.75);
+      color: white;
+      font-size: 1.5rem;
+      font-family:
+        system-ui,
+        -apple-system,
+        sans-serif;
+      text-shadow: 2px 2px 4px rgb(0 0 0 / 0.5);
+      white-space: pre-wrap;
+      text-align: center;
+      z-index: 15;
+      pointer-events: none;
+    }
+  `;
+__decorate([
+    property({ type: Number })
+], FwSubtitleRenderer.prototype, "currentTime", void 0);
+__decorate([
+    property({ type: Boolean })
+], FwSubtitleRenderer.prototype, "enabled", void 0);
+__decorate([
+    property({ attribute: false })
+], FwSubtitleRenderer.prototype, "cues", void 0);
+FwSubtitleRenderer = __decorate([
+    customElement("fw-subtitle-renderer")
+], FwSubtitleRenderer);
+
+export { FwSubtitleRenderer };
+//# sourceMappingURL=fw-subtitle-renderer.js.map

package/dist/esm/components/fw-subtitle-renderer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fw-subtitle-renderer.js","sources":["../../../../src/components/fw-subtitle-renderer.ts"],"sourcesContent":["import { LitElement, html, css, nothing } from \"lit\";\nimport { customElement, property, state } from \"lit/decorators.js\";\n\ninterface SubtitleCue {\n  id?: string;\n  startTime: number;\n  endTime: number;\n  text: string;\n}\n\n@customElement(\"fw-subtitle-renderer\")\nexport class FwSubtitleRenderer extends LitElement {\n  @property({ type: Number }) currentTime = 0;\n  @property({ type: Boolean }) enabled = false;\n  @property({ attribute: false }) cues: SubtitleCue[] = [];\n\n  static styles = css`\n    :host {\n      display: contents;\n    }\n    .subtitle {\n      position: absolute;\n      bottom: 5%;\n      left: 50%;\n      transform: translateX(-50%);\n      display: inline-block;\n      max-width: 90%;\n      padding: 0.5em 1em;\n      border-radius: 4px;\n      background: rgb(0 0 0 / 0.75);\n      color: white;\n      font-size: 1.5rem;\n      font-family:\n        system-ui,\n        -apple-system,\n        sans-serif;\n      text-shadow: 2px 2px 4px rgb(0 0 0 / 0.5);\n      white-space: pre-wrap;\n      text-align: center;\n      z-index: 15;\n      pointer-events: none;\n    }\n  `;\n\n  private get _activeCue(): string | null {\n    if (!this.enabled || !this.cues.length) return null;\n    const t = this.currentTime * 1000; // Convert to ms\n    for (const cue of this.cues) {\n      if (t >= cue.startTime && t <= cue.endTime) return cue.text;\n    }\n    return null;\n  }\n\n  protected render() {\n    const text = this._activeCue;\n    if (!text) return nothing;\n    return html`<span class=\"subtitle\" aria-live=\"polite\">${text}</span>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"fw-subtitle-renderer\": FwSubtitleRenderer;\n  }\n}\n"],"names":[],"mappings":";;;;AAWO,IAAM,kBAAkB,GAAxB,MAAM,kBAAmB,SAAQ,UAAU,CAAA;AAA3C,IAAA,WAAA,GAAA;;QACuB,IAAA,CAAA,WAAW,GAAG,CAAC;QACd,IAAA,CAAA,OAAO,GAAG,KAAK;QACZ,IAAA,CAAA,IAAI,GAAkB,EAAE;IA4C1D;AAdE,IAAA,IAAY,UAAU,GAAA;QACpB,IAAI,CAAC,IAAI,CAAC,OAAO,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM;AAAE,YAAA,OAAO,IAAI;QACnD,MAAM,CAAC,GAAG,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;AAClC,QAAA,KAAK,MAAM,GAAG,IAAI,IAAI,CAAC,IAAI,EAAE;YAC3B,IAAI,CAAC,IAAI,GAAG,CAAC,SAAS,IAAI,CAAC,IAAI,GAAG,CAAC,OAAO;gBAAE,OAAO,GAAG,CAAC,IAAI;QAC7D;AACA,QAAA,OAAO,IAAI;IACb;IAEU,MAAM,GAAA;AACd,QAAA,MAAM,IAAI,GAAG,IAAI,CAAC,UAAU;AAC5B,QAAA,IAAI,CAAC,IAAI;AAAE,YAAA,OAAO,OAAO;AACzB,QAAA,OAAO,IAAI,CAAA,CAAA,0CAAA,EAA6C,IAAI,SAAS;IACvE;;AAzCO,kBAAA,CAAA,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;AA0BlB,EAAA,CA1BY;AAJe,UAAA,CAAA;AAA3B,IAAA,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE;AAAkB,CAAA,EAAA,kBAAA,CAAA,SAAA,EAAA,aAAA,EAAA,MAAA,CAAA;AACf,UAAA,CAAA;AAA5B,IAAA,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE;AAAkB,CAAA,EAAA,kBAAA,CAAA,SAAA,EAAA,SAAA,EAAA,MAAA,CAAA;AACb,UAAA,CAAA;AAA/B,IAAA,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE;AAA2B,CAAA,EAAA,kBAAA,CAAA,SAAA,EAAA,MAAA,EAAA,MAAA,CAAA;AAH9C,kBAAkB,GAAA,UAAA,CAAA;IAD9B,aAAa,CAAC,sBAAsB;AACxB,CAAA,EAAA,kBAAkB,CA+C9B;;;;"}

package/dist/esm/components/fw-title-overlay.js

@@ -0,0 +1,72 @@
+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, nothing, html } from 'lit';
+import { property, customElement } from 'lit/decorators.js';
+import { sharedStyles } from '../styles/shared-styles.js';
+import { utilityStyles } from '../styles/utility-styles.js';
+
+let FwTitleOverlay = class FwTitleOverlay extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.title = "";
+        this.description = null;
+    }
+    render() {
+        if (this.title === "" && !this.description)
+            return nothing;
+        return html `
+      <div class="overlay fw-title-overlay">
+        ${this.title ? html `<div class="title">${this.title}</div>` : nothing}
+        ${this.description ? html `<div class="desc">${this.description}</div>` : nothing}
+      </div>
+    `;
+    }
+};
+FwTitleOverlay.styles = [
+    sharedStyles,
+    utilityStyles,
+    css `
+      :host {
+        display: contents;
+      }
+      .overlay {
+        position: absolute;
+        inset: 0 0 auto 0;
+        padding: 1rem 1.25rem;
+        background: linear-gradient(to bottom, rgb(0 0 0 / 0.7), rgb(0 0 0 / 0.4), transparent);
+        pointer-events: none;
+        transition: opacity 300ms ease;
+        z-index: 10;
+      }
+      .title {
+        font-size: 0.875rem;
+        font-weight: 500;
+        color: white;
+        max-width: 80%;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+      .desc {
+        margin-top: 0.25rem;
+        font-size: 0.75rem;
+        color: rgb(255 255 255 / 0.7);
+        max-width: 70%;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+      }
+    `,
+];
+__decorate([
+    property({ type: String })
+], FwTitleOverlay.prototype, "title", void 0);
+__decorate([
+    property({ type: String })
+], FwTitleOverlay.prototype, "description", void 0);
+FwTitleOverlay = __decorate([
+    customElement("fw-title-overlay")
+], FwTitleOverlay);
+
+export { FwTitleOverlay };
+//# sourceMappingURL=fw-title-overlay.js.map

package/dist/esm/components/fw-title-overlay.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fw-title-overlay.js","sources":["../../../../src/components/fw-title-overlay.ts"],"sourcesContent":["import { LitElement, html, css, nothing } from \"lit\";\nimport { customElement, property } from \"lit/decorators.js\";\nimport { sharedStyles } from \"../styles/shared-styles.js\";\nimport { utilityStyles } from \"../styles/utility-styles.js\";\n\n@customElement(\"fw-title-overlay\")\nexport class FwTitleOverlay extends LitElement {\n  @property({ type: String }) override title: string = \"\";\n  @property({ type: String }) description: string | null = null;\n\n  static styles = [\n    sharedStyles,\n    utilityStyles,\n    css`\n      :host {\n        display: contents;\n      }\n      .overlay {\n        position: absolute;\n        inset: 0 0 auto 0;\n        padding: 1rem 1.25rem;\n        background: linear-gradient(to bottom, rgb(0 0 0 / 0.7), rgb(0 0 0 / 0.4), transparent);\n        pointer-events: none;\n        transition: opacity 300ms ease;\n        z-index: 10;\n      }\n      .title {\n        font-size: 0.875rem;\n        font-weight: 500;\n        color: white;\n        max-width: 80%;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n      }\n      .desc {\n        margin-top: 0.25rem;\n        font-size: 0.75rem;\n        color: rgb(255 255 255 / 0.7);\n        max-width: 70%;\n        display: -webkit-box;\n        -webkit-line-clamp: 2;\n        -webkit-box-orient: vertical;\n        overflow: hidden;\n      }\n    `,\n  ];\n\n  protected render() {\n    if (this.title === \"\" && !this.description) return nothing;\n    return html`\n      <div class=\"overlay fw-title-overlay\">\n        ${this.title ? html`<div class=\"title\">${this.title}</div>` : nothing}\n        ${this.description ? html`<div class=\"desc\">${this.description}</div>` : nothing}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"fw-title-overlay\": FwTitleOverlay;\n  }\n}\n"],"names":[],"mappings":";;;;;;AAMO,IAAM,cAAc,GAApB,MAAM,cAAe,SAAQ,UAAU,CAAA;AAAvC,IAAA,WAAA,GAAA;;QACgC,IAAA,CAAA,KAAK,GAAW,EAAE;QAC3B,IAAA,CAAA,WAAW,GAAkB,IAAI;IAiD/D;IATY,MAAM,GAAA;QACd,IAAI,IAAI,CAAC,KAAK,KAAK,EAAE,IAAI,CAAC,IAAI,CAAC,WAAW;AAAE,YAAA,OAAO,OAAO;AAC1D,QAAA,OAAO,IAAI,CAAA;;AAEL,QAAA,EAAA,IAAI,CAAC,KAAK,GAAG,IAAI,CAAA,CAAA,mBAAA,EAAsB,IAAI,CAAC,KAAK,CAAA,MAAA,CAAQ,GAAG,OAAO;AACnE,QAAA,EAAA,IAAI,CAAC,WAAW,GAAG,IAAI,CAAA,CAAA,kBAAA,EAAqB,IAAI,CAAC,WAAW,CAAA,MAAA,CAAQ,GAAG,OAAO;;KAEnF;IACH;;AA9CO,cAAA,CAAA,MAAM,GAAG;IACd,YAAY;IACZ,aAAa;AACb,IAAA,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgCF,IAAA,CAAA;AACF,CApCY;AAHwB,UAAA,CAAA;AAApC,IAAA,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE;AAA8B,CAAA,EAAA,cAAA,CAAA,SAAA,EAAA,OAAA,EAAA,MAAA,CAAA;AAC5B,UAAA,CAAA;AAA3B,IAAA,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE;AAAoC,CAAA,EAAA,cAAA,CAAA,SAAA,EAAA,aAAA,EAAA,MAAA,CAAA;AAFnD,cAAc,GAAA,UAAA,CAAA;IAD1B,aAAa,CAAC,kBAAkB;AACpB,CAAA,EAAA,cAAc,CAmD1B;;;;"}

package/dist/esm/components/fw-toast.js

@@ -0,0 +1,74 @@
+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, nothing, html } from 'lit';
+import { property, customElement } from 'lit/decorators.js';
+import { closeIcon } from '../icons/index.js';
+
+let FwToast = class FwToast extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.message = "";
+    }
+    render() {
+        if (!this.message)
+            return nothing;
+        return html `
+      <div class="toast">
+        <span>${this.message}</span>
+        <button type="button" @click=${this._dismiss} aria-label="Dismiss">${closeIcon()}</button>
+      </div>
+    `;
+    }
+    _dismiss() {
+        this.dispatchEvent(new CustomEvent("fw-dismiss", { bubbles: true, composed: true }));
+    }
+};
+FwToast.styles = css `
+    :host {
+      display: contents;
+    }
+    .toast {
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+      border-radius: 0.5rem;
+      border: 1px solid rgb(255 255 255 / 0.1);
+      background: rgb(0 0 0 / 0.8);
+      padding: 0.5rem 1rem;
+      font-size: 0.875rem;
+      color: white;
+      box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
+      backdrop-filter: blur(4px);
+      animation: _fw-slide-up 200ms ease-out;
+    }
+    @keyframes _fw-slide-up {
+      from {
+        opacity: 0;
+        transform: translateY(8px);
+      }
+      to {
+        opacity: 1;
+        transform: translateY(0);
+      }
+    }
+    button {
+      margin-left: 0.125rem;
+      color: rgb(255 255 255 / 0.6);
+      background: none;
+      border: none;
+      cursor: pointer;
+      padding: 0;
+      display: flex;
+    }
+    button:hover {
+      color: white;
+    }
+  `;
+__decorate([
+    property({ type: String })
+], FwToast.prototype, "message", void 0);
+FwToast = __decorate([
+    customElement("fw-toast")
+], FwToast);
+
+export { FwToast };
+//# sourceMappingURL=fw-toast.js.map

package/dist/esm/components/fw-toast.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fw-toast.js","sources":["../../../../src/components/fw-toast.ts"],"sourcesContent":["import { LitElement, html, css, nothing } from \"lit\";\nimport { customElement, property } from \"lit/decorators.js\";\nimport { closeIcon } from \"../icons/index.js\";\n\n@customElement(\"fw-toast\")\nexport class FwToast extends LitElement {\n  @property({ type: String }) message = \"\";\n\n  static styles = css`\n    :host {\n      display: contents;\n    }\n    .toast {\n      display: flex;\n      align-items: center;\n      gap: 0.5rem;\n      border-radius: 0.5rem;\n      border: 1px solid rgb(255 255 255 / 0.1);\n      background: rgb(0 0 0 / 0.8);\n      padding: 0.5rem 1rem;\n      font-size: 0.875rem;\n      color: white;\n      box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);\n      backdrop-filter: blur(4px);\n      animation: _fw-slide-up 200ms ease-out;\n    }\n    @keyframes _fw-slide-up {\n      from {\n        opacity: 0;\n        transform: translateY(8px);\n      }\n      to {\n        opacity: 1;\n        transform: translateY(0);\n      }\n    }\n    button {\n      margin-left: 0.125rem;\n      color: rgb(255 255 255 / 0.6);\n      background: none;\n      border: none;\n      cursor: pointer;\n      padding: 0;\n      display: flex;\n    }\n    button:hover {\n      color: white;\n    }\n  `;\n\n  protected render() {\n    if (!this.message) return nothing;\n    return html`\n      <div class=\"toast\">\n        <span>${this.message}</span>\n        <button type=\"button\" @click=${this._dismiss} aria-label=\"Dismiss\">${closeIcon()}</button>\n      </div>\n    `;\n  }\n\n  private _dismiss() {\n    this.dispatchEvent(new CustomEvent(\"fw-dismiss\", { bubbles: true, composed: true }));\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"fw-toast\": FwToast;\n  }\n}\n"],"names":[],"mappings":";;;;;AAKO,IAAM,OAAO,GAAb,MAAM,OAAQ,SAAQ,UAAU,CAAA;AAAhC,IAAA,WAAA,GAAA;;QACuB,IAAA,CAAA,OAAO,GAAG,EAAE;IAyD1C;IAbY,MAAM,GAAA;QACd,IAAI,CAAC,IAAI,CAAC,OAAO;AAAE,YAAA,OAAO,OAAO;AACjC,QAAA,OAAO,IAAI,CAAA;;AAEC,cAAA,EAAA,IAAI,CAAC,OAAO,CAAA;AACW,qCAAA,EAAA,IAAI,CAAC,QAAQ,CAAA,sBAAA,EAAyB,SAAS,EAAE,CAAA;;KAEnF;IACH;IAEQ,QAAQ,GAAA;AACd,QAAA,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,YAAY,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC;IACtF;;AAtDO,OAAA,CAAA,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwClB,EAAA,CAxCY;AAFe,UAAA,CAAA;AAA3B,IAAA,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE;AAAe,CAAA,EAAA,OAAA,CAAA,SAAA,EAAA,SAAA,EAAA,MAAA,CAAA;AAD9B,OAAO,GAAA,UAAA,CAAA;IADnB,aAAa,CAAC,UAAU;AACZ,CAAA,EAAA,OAAO,CA0DnB;;;;"}

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

@@ -0,0 +1,140 @@
+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, state, customElement } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { styleMap } from 'lit/directives/style-map.js';
+import { sharedStyles } from '../styles/shared-styles.js';
+import { volumeOffIcon, volumeUpIcon } from '../icons/index.js';
+
+let FwVolumeControl = class FwVolumeControl extends LitElement {
+    constructor() {
+        super(...arguments);
+        this._expanded = false;
+        this._handleSliderClick = (e) => {
+            const target = e.currentTarget;
+            const rect = target.getBoundingClientRect();
+            const pct = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
+            this.pc.setVolume(pct);
+            if (this.pc.s.isMuted && pct > 0)
+                this.pc.toggleMute();
+        };
+        this._handleSliderDrag = (e) => {
+            const target = e.currentTarget;
+            const rect = target.getBoundingClientRect();
+            const pct = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
+            this.pc.setVolume(pct);
+        };
+    }
+    render() {
+        const { isMuted, volume } = this.pc.s;
+        const displayVol = isMuted ? 0 : volume;
+        return html `
+      <div
+        class="group fw-volume-group"
+        @mouseenter=${() => {
+            this._expanded = true;
+        }}
+        @mouseleave=${() => {
+            this._expanded = false;
+        }}
+      >
+        <button
+          class="btn fw-btn-flush fw-volume-btn"
+          type="button"
+          @click=${() => this.pc.toggleMute()}
+          aria-label="${isMuted ? "Unmute" : "Mute"}"
+        >
+          ${isMuted ? volumeOffIcon(16) : volumeUpIcon(16)}
+        </button>
+        <div class=${classMap({ "slider-wrap": true, "slider-wrap--expanded": this._expanded })}>
+          <div
+            class="slider"
+            @click=${this._handleSliderClick}
+            @pointermove=${this._handleSliderDrag}
+          >
+            <div class="slider-fill" style=${styleMap({ width: `${displayVol * 100}%` })}></div>
+            <div class="slider-thumb" style=${styleMap({ left: `${displayVol * 100}%` })}></div>
+          </div>
+        </div>
+      </div>
+    `;
+    }
+};
+FwVolumeControl.styles = [
+    sharedStyles,
+    css `
+      :host {
+        display: flex;
+        align-items: center;
+      }
+      .group {
+        display: flex;
+        align-items: center;
+        gap: 0;
+      }
+      .btn {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 2rem;
+        height: 2rem;
+        background: none;
+        border: none;
+        color: rgb(255 255 255 / 0.8);
+        cursor: pointer;
+        padding: 0;
+        border-radius: 0.25rem;
+        transition: color 150ms;
+      }
+      .btn:hover {
+        color: white;
+      }
+      .slider-wrap {
+        width: 0;
+        overflow: hidden;
+        transition: width 200ms ease;
+      }
+      .slider-wrap--expanded {
+        width: 72px;
+      }
+      .slider {
+        position: relative;
+        width: 72px;
+        height: 4px;
+        background: rgb(255 255 255 / 0.15);
+        border-radius: 2px;
+        cursor: pointer;
+      }
+      .slider-fill {
+        position: absolute;
+        top: 0;
+        left: 0;
+        height: 100%;
+        background: white;
+        border-radius: 2px;
+        pointer-events: none;
+      }
+      .slider-thumb {
+        position: absolute;
+        top: 50%;
+        width: 10px;
+        height: 10px;
+        border-radius: 50%;
+        background: white;
+        transform: translate(-50%, -50%);
+        pointer-events: none;
+      }
+    `,
+];
+__decorate([
+    property({ attribute: false })
+], FwVolumeControl.prototype, "pc", void 0);
+__decorate([
+    state()
+], FwVolumeControl.prototype, "_expanded", void 0);
+FwVolumeControl = __decorate([
+    customElement("fw-volume-control")
+], FwVolumeControl);
+
+export { FwVolumeControl };
+//# sourceMappingURL=fw-volume-control.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"fw-volume-control.js","sources":["../../../../src/components/fw-volume-control.ts"],"sourcesContent":["/**\n * <fw-volume-control> — Mute toggle + volume slider.\n */\nimport { LitElement, html, css } from \"lit\";\nimport { customElement, property, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { styleMap } from \"lit/directives/style-map.js\";\nimport { sharedStyles } from \"../styles/shared-styles.js\";\nimport { volumeUpIcon, volumeOffIcon } from \"../icons/index.js\";\nimport type { PlayerControllerHost } from \"../controllers/player-controller-host.js\";\n\n@customElement(\"fw-volume-control\")\nexport class FwVolumeControl extends LitElement {\n  @property({ attribute: false }) pc!: PlayerControllerHost;\n  @state() private _expanded = false;\n\n  static styles = [\n    sharedStyles,\n    css`\n      :host {\n        display: flex;\n        align-items: center;\n      }\n      .group {\n        display: flex;\n        align-items: center;\n        gap: 0;\n      }\n      .btn {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        width: 2rem;\n        height: 2rem;\n        background: none;\n        border: none;\n        color: rgb(255 255 255 / 0.8);\n        cursor: pointer;\n        padding: 0;\n        border-radius: 0.25rem;\n        transition: color 150ms;\n      }\n      .btn:hover {\n        color: white;\n      }\n      .slider-wrap {\n        width: 0;\n        overflow: hidden;\n        transition: width 200ms ease;\n      }\n      .slider-wrap--expanded {\n        width: 72px;\n      }\n      .slider {\n        position: relative;\n        width: 72px;\n        height: 4px;\n        background: rgb(255 255 255 / 0.15);\n        border-radius: 2px;\n        cursor: pointer;\n      }\n      .slider-fill {\n        position: absolute;\n        top: 0;\n        left: 0;\n        height: 100%;\n        background: white;\n        border-radius: 2px;\n        pointer-events: none;\n      }\n      .slider-thumb {\n        position: absolute;\n        top: 50%;\n        width: 10px;\n        height: 10px;\n        border-radius: 50%;\n        background: white;\n        transform: translate(-50%, -50%);\n        pointer-events: none;\n      }\n    `,\n  ];\n\n  private _handleSliderClick = (e: MouseEvent) => {\n    const target = e.currentTarget as HTMLElement;\n    const rect = target.getBoundingClientRect();\n    const pct = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));\n    this.pc.setVolume(pct);\n    if (this.pc.s.isMuted && pct > 0) this.pc.toggleMute();\n  };\n\n  private _handleSliderDrag = (e: PointerEvent) => {\n    const target = e.currentTarget as HTMLElement;\n    const rect = target.getBoundingClientRect();\n    const pct = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));\n    this.pc.setVolume(pct);\n  };\n\n  protected render() {\n    const { isMuted, volume } = this.pc.s;\n    const displayVol = isMuted ? 0 : volume;\n\n    return html`\n      <div\n        class=\"group fw-volume-group\"\n        @mouseenter=${() => {\n          this._expanded = true;\n        }}\n        @mouseleave=${() => {\n          this._expanded = false;\n        }}\n      >\n        <button\n          class=\"btn fw-btn-flush fw-volume-btn\"\n          type=\"button\"\n          @click=${() => this.pc.toggleMute()}\n          aria-label=\"${isMuted ? \"Unmute\" : \"Mute\"}\"\n        >\n          ${isMuted ? volumeOffIcon(16) : volumeUpIcon(16)}\n        </button>\n        <div class=${classMap({ \"slider-wrap\": true, \"slider-wrap--expanded\": this._expanded })}>\n          <div\n            class=\"slider\"\n            @click=${this._handleSliderClick}\n            @pointermove=${this._handleSliderDrag}\n          >\n            <div class=\"slider-fill\" style=${styleMap({ width: `${displayVol * 100}%` })}></div>\n            <div class=\"slider-thumb\" style=${styleMap({ left: `${displayVol * 100}%` })}></div>\n          </div>\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"fw-volume-control\": FwVolumeControl;\n  }\n}\n"],"names":[],"mappings":"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"}