@livepeer-frameworks/player-wc 0.1.2 → 0.1.4

package/dist/esm/components/fw-settings-menu.js

@@ -1,46 +1,210 @@
 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 { property, state, customElement } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { sharedStyles } from '../styles/shared-styles.js';
 import { utilityStyles } from '../styles/utility-styles.js';
+import { supportsPlaybackRate, SPEED_PRESETS } from '@livepeer-frameworks/player-core';
 
 let FwSettingsMenu = class FwSettingsMenu extends LitElement {
     constructor() {
         super(...arguments);
         this.open = false;
+        this.playbackMode = "auto";
+        this.isContentLive = true;
+        this._playbackRate = 1;
+    }
+    updated() {
+        if (!this.open) {
+            return;
+        }
+        if (Number.isFinite(this.playbackRate)) {
+            this._playbackRate = this.playbackRate;
+            return;
+        }
+        const video = this.pc?.s.videoElement;
+        if (video && Number.isFinite(video.playbackRate)) {
+            this._playbackRate = video.playbackRate;
+        }
+    }
+    _close() {
+        this.dispatchEvent(new CustomEvent("fw-close", { bubbles: true, composed: true }));
+    }
+    _handleModeChange(mode) {
+        this.pc.setDevModeOptions({ playbackMode: mode });
+        this.dispatchEvent(new CustomEvent("fw-mode-change", {
+            detail: { mode },
+            bubbles: true,
+            composed: true,
+        }));
+        this._close();
+    }
+    _handleSpeedChange(rate) {
+        this._playbackRate = rate;
+        this.pc.setPlaybackRate(rate);
+        this.dispatchEvent(new CustomEvent("fw-speed-change", {
+            detail: { rate },
+            bubbles: true,
+            composed: true,
+        }));
+        this._close();
+    }
+    _handleQualityChange(id) {
+        this.pc.selectQuality(id);
+        this.dispatchEvent(new CustomEvent("fw-quality-change", {
+            detail: { quality: id },
+            bubbles: true,
+            composed: true,
+        }));
+        this._close();
+    }
+    _handleCaptionChange(id) {
+        if (id === "none") {
+            this.pc.selectTextTrack(null);
+        }
+        else {
+            this.pc.selectTextTrack(id);
+        }
+        this.dispatchEvent(new CustomEvent("fw-caption-change", {
+            detail: { caption: id },
+            bubbles: true,
+            composed: true,
+        }));
+        this._close();
+    }
+    _deriveFallbackQualities() {
+        const tracks = this.pc?.s.streamState?.streamInfo?.meta?.tracks;
+        if (!tracks) {
+            return [];
+        }
+        return Object.entries(tracks)
+            .filter(([, track]) => track?.type === "video")
+            .map(([id, track]) => ({
+            id,
+            label: track.height ? `${track.height}p` : (track.codec ?? id),
+            width: track.width,
+            height: track.height,
+            bitrate: track.bps,
+        }))
+            .sort((a, b) => (b.height ?? 0) - (a.height ?? 0));
     }
     render() {
-        if (!this.open)
+        if (!this.open) {
             return nothing;
-        const { qualities } = this.pc.s;
-        const speeds = [0.25, 0.5, 0.75, 1, 1.25, 1.5, 2];
+        }
+        const state = this.pc.s;
+        const controllerQualities = state.qualities ?? [];
+        const qualities = controllerQualities.length > 0 ? controllerQualities : this._deriveFallbackQualities();
+        const textTracks = state.textTracks ?? [];
+        const activeQuality = this.qualityValue ?? qualities.find((quality) => quality.active)?.id ?? "auto";
+        const activeCaption = this.captionValue ?? textTracks.find((track) => track.active)?.id ?? "none";
+        const supportsPlaybackRate$1 = this.supportsPlaybackRate ?? supportsPlaybackRate(state.videoElement);
         return html `
-      <div class="menu fw-settings-menu">
+      <div class="fw-player-surface fw-settings-menu" role="menu" aria-label="Player settings">
+        ${this.isContentLive
+            ? html `
+              <div class="fw-settings-section">
+                <div class="fw-settings-label">Mode</div>
+                <div class="fw-settings-options">
+                  ${["auto", "low-latency", "quality"].map((mode) => html `
+                      <button
+                        type="button"
+                        class=${classMap({
+                "fw-settings-btn": true,
+                "fw-settings-btn--active": this.playbackMode === mode,
+            })}
+                        @click=${() => this._handleModeChange(mode)}
+                      >
+                        ${mode === "low-latency" ? "Fast" : mode === "quality" ? "Stable" : "Auto"}
+                      </button>
+                    `)}
+                </div>
+              </div>
+            `
+            : nothing}
+        ${supportsPlaybackRate$1
+            ? html `
+              <div class="fw-settings-section">
+                <div class="fw-settings-label">Speed</div>
+                <div class="fw-settings-options fw-settings-options--wrap">
+                  ${SPEED_PRESETS.map((rate) => html `
+                      <button
+                        type="button"
+                        class=${classMap({
+                "fw-settings-btn": true,
+                "fw-settings-btn--active": this._playbackRate === rate,
+            })}
+                        @click=${() => this._handleSpeedChange(rate)}
+                      >
+                        ${rate}x
+                      </button>
+                    `)}
+                </div>
+              </div>
+            `
+            : nothing}
         ${qualities.length > 0
             ? html `
-              <div class="section">
-                <div class="label">Quality</div>
-                ${qualities.map((q) => html `
-                    <button
-                      class=${classMap({ option: true, "option--active": !!q.active })}
-                      @click=${() => this.pc.selectQuality(q.id)}
-                    >
-                      <div class=${classMap({ dot: true, "dot--hidden": !q.active })}></div>
-                      ${q.label}
-                    </button>
-                  `)}
+              <div class="fw-settings-section">
+                <div class="fw-settings-label">Quality</div>
+                <div class="fw-settings-list">
+                  <button
+                    type="button"
+                    class=${classMap({
+                "fw-settings-list-item": true,
+                "fw-settings-list-item--active": activeQuality === "auto",
+            })}
+                    @click=${() => this._handleQualityChange("auto")}
+                  >
+                    Auto
+                  </button>
+                  ${qualities.map((quality) => html `
+                      <button
+                        type="button"
+                        class=${classMap({
+                "fw-settings-list-item": true,
+                "fw-settings-list-item--active": activeQuality === quality.id,
+            })}
+                        @click=${() => this._handleQualityChange(quality.id)}
+                      >
+                        ${quality.label}
+                      </button>
+                    `)}
+                </div>
+              </div>
+            `
+            : nothing}
+        ${textTracks.length > 0
+            ? html `
+              <div class="fw-settings-section">
+                <div class="fw-settings-label">Captions</div>
+                <div class="fw-settings-list">
+                  <button
+                    type="button"
+                    class=${classMap({
+                "fw-settings-list-item": true,
+                "fw-settings-list-item--active": activeCaption === "none",
+            })}
+                    @click=${() => this._handleCaptionChange("none")}
+                  >
+                    Off
+                  </button>
+                  ${textTracks.map((track) => html `
+                      <button
+                        type="button"
+                        class=${classMap({
+                "fw-settings-list-item": true,
+                "fw-settings-list-item--active": activeCaption === track.id,
+            })}
+                        @click=${() => this._handleCaptionChange(track.id)}
+                      >
+                        ${track.label || track.id}
+                      </button>
+                    `)}
+                </div>
               </div>
             `
             : nothing}
-        <div class="section">
-          <div class="label">Speed</div>
-          ${speeds.map((s) => html `
-              <button class="option" @click=${() => this.pc.getController()?.setPlaybackRate(s)}>
-                ${s === 1 ? "Normal" : `${s}x`}
-              </button>
-            `)}
-        </div>
       </div>
     `;
     }
@@ -52,64 +216,6 @@ FwSettingsMenu.styles = [
       :host {
         display: contents;
       }
-      .menu {
-        position: absolute;
-        bottom: 100%;
-        right: 0;
-        margin-bottom: 0.5rem;
-        min-width: 200px;
-        border-radius: 0.5rem;
-        border: 1px solid rgb(255 255 255 / 0.1);
-        background: rgb(0 0 0 / 0.9);
-        backdrop-filter: blur(8px);
-        padding: 0.5rem;
-        z-index: 50;
-        box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.3);
-      }
-      .section {
-        padding: 0.25rem 0;
-      }
-      .section + .section {
-        border-top: 1px solid rgb(255 255 255 / 0.1);
-      }
-      .label {
-        padding: 0.25rem 0.5rem;
-        font-size: 0.6875rem;
-        font-weight: 600;
-        text-transform: uppercase;
-        letter-spacing: 0.05em;
-        color: rgb(255 255 255 / 0.4);
-      }
-      .option {
-        display: flex;
-        align-items: center;
-        width: 100%;
-        padding: 0.375rem 0.5rem;
-        border: none;
-        background: none;
-        color: rgb(255 255 255 / 0.7);
-        font-size: 0.8125rem;
-        cursor: pointer;
-        border-radius: 0.25rem;
-        text-align: left;
-      }
-      .option:hover {
-        background: rgb(255 255 255 / 0.1);
-        color: white;
-      }
-      .option--active {
-        color: hsl(var(--tn-blue, 217 89% 61%));
-      }
-      .dot {
-        width: 6px;
-        height: 6px;
-        border-radius: 50%;
-        background: hsl(var(--tn-blue, 217 89% 61%));
-        margin-right: 0.5rem;
-      }
-      .dot--hidden {
-        visibility: hidden;
-      }
     `,
 ];
 __decorate([
@@ -118,6 +224,27 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], FwSettingsMenu.prototype, "open", void 0);
+__decorate([
+    property({ type: String })
+], FwSettingsMenu.prototype, "playbackMode", void 0);
+__decorate([
+    property({ type: Boolean, attribute: "is-content-live" })
+], FwSettingsMenu.prototype, "isContentLive", void 0);
+__decorate([
+    property({ type: Number, attribute: "playback-rate" })
+], FwSettingsMenu.prototype, "playbackRate", void 0);
+__decorate([
+    property({ type: String, attribute: "quality-value" })
+], FwSettingsMenu.prototype, "qualityValue", void 0);
+__decorate([
+    property({ type: String, attribute: "caption-value" })
+], FwSettingsMenu.prototype, "captionValue", void 0);
+__decorate([
+    property({ type: Boolean, attribute: "supports-playback-rate" })
+], FwSettingsMenu.prototype, "supportsPlaybackRate", void 0);
+__decorate([
+    state()
+], FwSettingsMenu.prototype, "_playbackRate", void 0);
 FwSettingsMenu = __decorate([
     customElement("fw-settings-menu")
 ], FwSettingsMenu);

package/dist/esm/components/fw-settings-menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"fw-settings-menu.js","sources":["../../../../src/components/fw-settings-menu.ts"],"sourcesContent":["/**\n * <fw-settings-menu> — Quality, speed, and captions settings popup.\n */\nimport { LitElement, html, css, nothing } from \"lit\";\nimport { customElement, property, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { sharedStyles } from \"../styles/shared-styles.js\";\nimport { utilityStyles } from \"../styles/utility-styles.js\";\nimport type { PlayerControllerHost } from \"../controllers/player-controller-host.js\";\n\n@customElement(\"fw-settings-menu\")\nexport class FwSettingsMenu extends LitElement {\n  @property({ attribute: false }) pc!: PlayerControllerHost;\n  @property({ type: Boolean }) open = false;\n\n  static styles = [\n    sharedStyles,\n    utilityStyles,\n    css`\n      :host {\n        display: contents;\n      }\n      .menu {\n        position: absolute;\n        bottom: 100%;\n        right: 0;\n        margin-bottom: 0.5rem;\n        min-width: 200px;\n        border-radius: 0.5rem;\n        border: 1px solid rgb(255 255 255 / 0.1);\n        background: rgb(0 0 0 / 0.9);\n        backdrop-filter: blur(8px);\n        padding: 0.5rem;\n        z-index: 50;\n        box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.3);\n      }\n      .section {\n        padding: 0.25rem 0;\n      }\n      .section + .section {\n        border-top: 1px solid rgb(255 255 255 / 0.1);\n      }\n      .label {\n        padding: 0.25rem 0.5rem;\n        font-size: 0.6875rem;\n        font-weight: 600;\n        text-transform: uppercase;\n        letter-spacing: 0.05em;\n        color: rgb(255 255 255 / 0.4);\n      }\n      .option {\n        display: flex;\n        align-items: center;\n        width: 100%;\n        padding: 0.375rem 0.5rem;\n        border: none;\n        background: none;\n        color: rgb(255 255 255 / 0.7);\n        font-size: 0.8125rem;\n        cursor: pointer;\n        border-radius: 0.25rem;\n        text-align: left;\n      }\n      .option:hover {\n        background: rgb(255 255 255 / 0.1);\n        color: white;\n      }\n      .option--active {\n        color: hsl(var(--tn-blue, 217 89% 61%));\n      }\n      .dot {\n        width: 6px;\n        height: 6px;\n        border-radius: 50%;\n        background: hsl(var(--tn-blue, 217 89% 61%));\n        margin-right: 0.5rem;\n      }\n      .dot--hidden {\n        visibility: hidden;\n      }\n    `,\n  ];\n\n  protected render() {\n    if (!this.open) return nothing;\n    const { qualities } = this.pc.s;\n    const speeds = [0.25, 0.5, 0.75, 1, 1.25, 1.5, 2];\n\n    return html`\n      <div class=\"menu fw-settings-menu\">\n        ${qualities.length > 0\n          ? html`\n              <div class=\"section\">\n                <div class=\"label\">Quality</div>\n                ${qualities.map(\n                  (q) => html`\n                    <button\n                      class=${classMap({ option: true, \"option--active\": !!q.active })}\n                      @click=${() => this.pc.selectQuality(q.id)}\n                    >\n                      <div class=${classMap({ dot: true, \"dot--hidden\": !q.active })}></div>\n                      ${q.label}\n                    </button>\n                  `\n                )}\n              </div>\n            `\n          : nothing}\n        <div class=\"section\">\n          <div class=\"label\">Speed</div>\n          ${speeds.map(\n            (s) => html`\n              <button class=\"option\" @click=${() => this.pc.getController()?.setPlaybackRate(s)}>\n                ${s === 1 ? \"Normal\" : `${s}x`}\n              </button>\n            `\n          )}\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"fw-settings-menu\": FwSettingsMenu;\n  }\n}\n"],"names":[],"mappings":";;;;;;;AAWO,IAAM,cAAc,GAApB,MAAM,cAAe,SAAQ,UAAU,CAAA;AAAvC,IAAA,WAAA,GAAA;;QAEwB,IAAA,CAAA,IAAI,GAAG,KAAK;IA4G3C;IAtCY,MAAM,GAAA;QACd,IAAI,CAAC,IAAI,CAAC,IAAI;AAAE,YAAA,OAAO,OAAO;QAC9B,MAAM,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC,EAAE,CAAC,CAAC;AAC/B,QAAA,MAAM,MAAM,GAAG,CAAC,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,GAAG,EAAE,CAAC,CAAC;AAEjD,QAAA,OAAO,IAAI,CAAA;;UAEL,SAAS,CAAC,MAAM,GAAG;cACjB,IAAI,CAAA;;;kBAGE,SAAS,CAAC,GAAG,CACb,CAAC,CAAC,KAAK,IAAI,CAAA;;AAEC,4BAAA,EAAA,QAAQ,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,gBAAgB,EAAE,CAAC,CAAC,CAAC,CAAC,MAAM,EAAE,CAAC;+BACvD,MAAM,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,CAAC;;AAE7B,iCAAA,EAAA,QAAQ,CAAC,EAAE,GAAG,EAAE,IAAI,EAAE,aAAa,EAAE,CAAC,CAAC,CAAC,MAAM,EAAE,CAAC,CAAA;AAC5D,sBAAA,EAAA,CAAC,CAAC,KAAK;;mBAEZ,CACF;;AAEJ,YAAA;AACH,cAAE,OAAO;;;YAGP,MAAM,CAAC,GAAG,CACV,CAAC,CAAC,KAAK,IAAI,CAAA;AACuB,4CAAA,EAAA,MAAM,IAAI,CAAC,EAAE,CAAC,aAAa,EAAE,EAAE,eAAe,CAAC,CAAC,CAAC,CAAA;kBAC7E,CAAC,KAAK,CAAC,GAAG,QAAQ,GAAG,CAAA,EAAG,CAAC,CAAA,CAAA,CAAG;;aAEjC,CACF;;;KAGN;IACH;;AAzGO,cAAA,CAAA,MAAM,GAAG;IACd,YAAY;IACZ,aAAa;AACb,IAAA,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8DF,IAAA,CAAA;AACF,CAlEY;AAHmB,UAAA,CAAA;AAA/B,IAAA,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE;AAA4B,CAAA,EAAA,cAAA,CAAA,SAAA,EAAA,IAAA,EAAA,MAAA,CAAA;AAC7B,UAAA,CAAA;AAA5B,IAAA,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE;AAAe,CAAA,EAAA,cAAA,CAAA,SAAA,EAAA,MAAA,EAAA,MAAA,CAAA;AAF/B,cAAc,GAAA,UAAA,CAAA;IAD1B,aAAa,CAAC,kBAAkB;AACpB,CAAA,EAAA,cAAc,CA8G1B;;;;"}
+{"version":3,"file":"fw-settings-menu.js","sources":["../../../../src/components/fw-settings-menu.ts"],"sourcesContent":["/**\n * <fw-settings-menu> — Mode, speed, quality, and captions settings popup.\n */\nimport { LitElement, html, css, nothing } from \"lit\";\nimport { customElement, property, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { sharedStyles } from \"../styles/shared-styles.js\";\nimport { utilityStyles } from \"../styles/utility-styles.js\";\nimport {\n  SPEED_PRESETS,\n  supportsPlaybackRate as coreSupportsPlaybackRate,\n} from \"@livepeer-frameworks/player-core\";\nimport type { PlaybackMode } from \"@livepeer-frameworks/player-core\";\nimport type { PlayerControllerHost } from \"../controllers/player-controller-host.js\";\n\n@customElement(\"fw-settings-menu\")\nexport class FwSettingsMenu extends LitElement {\n  @property({ attribute: false }) pc!: PlayerControllerHost;\n  @property({ type: Boolean }) open = false;\n  @property({ type: String }) playbackMode: PlaybackMode = \"auto\";\n  @property({ type: Boolean, attribute: \"is-content-live\" }) isContentLive = true;\n  @property({ type: Number, attribute: \"playback-rate\" }) playbackRate?: number;\n  @property({ type: String, attribute: \"quality-value\" }) qualityValue?: string;\n  @property({ type: String, attribute: \"caption-value\" }) captionValue?: string;\n  @property({ type: Boolean, attribute: \"supports-playback-rate\" }) supportsPlaybackRate?: boolean;\n\n  @state() private _playbackRate = 1;\n\n  static styles = [\n    sharedStyles,\n    utilityStyles,\n    css`\n      :host {\n        display: contents;\n      }\n    `,\n  ];\n\n  protected updated(): void {\n    if (!this.open) {\n      return;\n    }\n\n    if (Number.isFinite(this.playbackRate)) {\n      this._playbackRate = this.playbackRate as number;\n      return;\n    }\n\n    const video = this.pc?.s.videoElement;\n    if (video && Number.isFinite(video.playbackRate)) {\n      this._playbackRate = video.playbackRate;\n    }\n  }\n\n  private _close(): void {\n    this.dispatchEvent(new CustomEvent(\"fw-close\", { bubbles: true, composed: true }));\n  }\n\n  private _handleModeChange(mode: \"auto\" | \"low-latency\" | \"quality\"): void {\n    this.pc.setDevModeOptions({ playbackMode: mode });\n    this.dispatchEvent(\n      new CustomEvent(\"fw-mode-change\", {\n        detail: { mode },\n        bubbles: true,\n        composed: true,\n      })\n    );\n    this._close();\n  }\n\n  private _handleSpeedChange(rate: number): void {\n    this._playbackRate = rate;\n    this.pc.setPlaybackRate(rate);\n    this.dispatchEvent(\n      new CustomEvent(\"fw-speed-change\", {\n        detail: { rate },\n        bubbles: true,\n        composed: true,\n      })\n    );\n    this._close();\n  }\n\n  private _handleQualityChange(id: string): void {\n    this.pc.selectQuality(id);\n    this.dispatchEvent(\n      new CustomEvent(\"fw-quality-change\", {\n        detail: { quality: id },\n        bubbles: true,\n        composed: true,\n      })\n    );\n    this._close();\n  }\n\n  private _handleCaptionChange(id: string): void {\n    if (id === \"none\") {\n      this.pc.selectTextTrack(null);\n    } else {\n      this.pc.selectTextTrack(id);\n    }\n    this.dispatchEvent(\n      new CustomEvent(\"fw-caption-change\", {\n        detail: { caption: id },\n        bubbles: true,\n        composed: true,\n      })\n    );\n    this._close();\n  }\n\n  private _deriveFallbackQualities(): Array<{\n    id: string;\n    label: string;\n    bitrate?: number;\n    width?: number;\n    height?: number;\n    isAuto?: boolean;\n    active?: boolean;\n  }> {\n    const tracks = (\n      this.pc?.s.streamState?.streamInfo as\n        | {\n            meta?: {\n              tracks?: Record<\n                string,\n                { type?: string; codec?: string; width?: number; height?: number; bps?: number }\n              >;\n            };\n          }\n        | undefined\n    )?.meta?.tracks;\n\n    if (!tracks) {\n      return [];\n    }\n\n    return Object.entries(tracks)\n      .filter(([, track]) => track?.type === \"video\")\n      .map(([id, track]) => ({\n        id,\n        label: track.height ? `${track.height}p` : (track.codec ?? id),\n        width: track.width,\n        height: track.height,\n        bitrate: track.bps,\n      }))\n      .sort((a, b) => (b.height ?? 0) - (a.height ?? 0));\n  }\n\n  protected render() {\n    if (!this.open) {\n      return nothing;\n    }\n\n    const state = this.pc.s;\n    const controllerQualities = state.qualities ?? [];\n    const qualities =\n      controllerQualities.length > 0 ? controllerQualities : this._deriveFallbackQualities();\n    const textTracks = state.textTracks ?? [];\n    const activeQuality =\n      this.qualityValue ?? qualities.find((quality) => quality.active)?.id ?? \"auto\";\n    const activeCaption =\n      this.captionValue ?? textTracks.find((track) => track.active)?.id ?? \"none\";\n\n    const supportsPlaybackRate =\n      this.supportsPlaybackRate ?? coreSupportsPlaybackRate(state.videoElement);\n\n    return html`\n      <div class=\"fw-player-surface fw-settings-menu\" role=\"menu\" aria-label=\"Player settings\">\n        ${this.isContentLive\n          ? html`\n              <div class=\"fw-settings-section\">\n                <div class=\"fw-settings-label\">Mode</div>\n                <div class=\"fw-settings-options\">\n                  ${([\"auto\", \"low-latency\", \"quality\"] as const).map(\n                    (mode) => html`\n                      <button\n                        type=\"button\"\n                        class=${classMap({\n                          \"fw-settings-btn\": true,\n                          \"fw-settings-btn--active\": this.playbackMode === mode,\n                        })}\n                        @click=${() => this._handleModeChange(mode)}\n                      >\n                        ${mode === \"low-latency\" ? \"Fast\" : mode === \"quality\" ? \"Stable\" : \"Auto\"}\n                      </button>\n                    `\n                  )}\n                </div>\n              </div>\n            `\n          : nothing}\n        ${supportsPlaybackRate\n          ? html`\n              <div class=\"fw-settings-section\">\n                <div class=\"fw-settings-label\">Speed</div>\n                <div class=\"fw-settings-options fw-settings-options--wrap\">\n                  ${SPEED_PRESETS.map(\n                    (rate) => html`\n                      <button\n                        type=\"button\"\n                        class=${classMap({\n                          \"fw-settings-btn\": true,\n                          \"fw-settings-btn--active\": this._playbackRate === rate,\n                        })}\n                        @click=${() => this._handleSpeedChange(rate)}\n                      >\n                        ${rate}x\n                      </button>\n                    `\n                  )}\n                </div>\n              </div>\n            `\n          : nothing}\n        ${qualities.length > 0\n          ? html`\n              <div class=\"fw-settings-section\">\n                <div class=\"fw-settings-label\">Quality</div>\n                <div class=\"fw-settings-list\">\n                  <button\n                    type=\"button\"\n                    class=${classMap({\n                      \"fw-settings-list-item\": true,\n                      \"fw-settings-list-item--active\": activeQuality === \"auto\",\n                    })}\n                    @click=${() => this._handleQualityChange(\"auto\")}\n                  >\n                    Auto\n                  </button>\n                  ${qualities.map(\n                    (quality) => html`\n                      <button\n                        type=\"button\"\n                        class=${classMap({\n                          \"fw-settings-list-item\": true,\n                          \"fw-settings-list-item--active\": activeQuality === quality.id,\n                        })}\n                        @click=${() => this._handleQualityChange(quality.id)}\n                      >\n                        ${quality.label}\n                      </button>\n                    `\n                  )}\n                </div>\n              </div>\n            `\n          : nothing}\n        ${textTracks.length > 0\n          ? html`\n              <div class=\"fw-settings-section\">\n                <div class=\"fw-settings-label\">Captions</div>\n                <div class=\"fw-settings-list\">\n                  <button\n                    type=\"button\"\n                    class=${classMap({\n                      \"fw-settings-list-item\": true,\n                      \"fw-settings-list-item--active\": activeCaption === \"none\",\n                    })}\n                    @click=${() => this._handleCaptionChange(\"none\")}\n                  >\n                    Off\n                  </button>\n                  ${textTracks.map(\n                    (track) => html`\n                      <button\n                        type=\"button\"\n                        class=${classMap({\n                          \"fw-settings-list-item\": true,\n                          \"fw-settings-list-item--active\": activeCaption === track.id,\n                        })}\n                        @click=${() => this._handleCaptionChange(track.id)}\n                      >\n                        ${track.label || track.id}\n                      </button>\n                    `\n                  )}\n                </div>\n              </div>\n            `\n          : nothing}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"fw-settings-menu\": FwSettingsMenu;\n  }\n}\n"],"names":["supportsPlaybackRate","coreSupportsPlaybackRate"],"mappings":"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"}

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

@@ -1,65 +1,126 @@
 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 { css, LitElement, 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}`;
+    _deriveTracksFromMist(mistInfo) {
+        const mistTracks = mistInfo?.meta?.tracks;
+        if (!mistTracks)
+            return undefined;
+        return Object.values(mistTracks).map((track) => ({
+            type: track.type,
+            codec: track.codec,
+            width: track.width,
+            height: track.height,
+            bitrate: typeof track.bps === "number" ? Math.round(track.bps) : undefined,
+            fps: typeof track.fpks === "number" ? track.fpks / 1000 : undefined,
+            channels: track.channels,
+            sampleRate: track.rate,
+        }));
     }
-    _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>`;
+    _formatTracks(metadata, mistInfo) {
+        const tracks = metadata?.tracks ?? this._deriveTracksFromMist(mistInfo);
+        if (!tracks?.length)
+            return "—";
+        return tracks
+            .map((track) => {
+            if (track.type === "video") {
+                const resolution = track.width && track.height ? `${track.width}x${track.height}` : "?";
+                const bitrate = track.bitrate ? `${Math.round(track.bitrate / 1000)}kbps` : "?";
+                return `${track.codec ?? "?"} ${resolution}@${bitrate}`;
+            }
+            const channels = track.channels ? `${track.channels}ch` : "?";
+            return `${track.codec ?? "?"} ${channels}`;
+        })
+            .join(", ");
     }
-    render() {
+    _collectStats() {
         const s = this.pc.s;
-        const q = s.playbackQuality;
-        const meta = s.metadata;
-        const ss = s.streamState;
+        const video = s.videoElement;
+        const quality = s.playbackQuality;
+        const metadata = s.metadata;
+        const streamState = s.streamState;
+        const primaryEndpoint = s.endpoints?.primary;
+        const currentRes = video ? `${video.videoWidth}x${video.videoHeight}` : "—";
+        const buffered = video && video.buffered.length > 0
+            ? (video.buffered.end(video.buffered.length - 1) - video.currentTime).toFixed(1)
+            : "—";
+        const playbackRate = video?.playbackRate?.toFixed(2) ?? "1.00";
+        const qualityScore = quality?.score?.toFixed(0) ?? "—";
+        const bitrateKbps = quality?.bitrate ? `${(quality.bitrate / 1000).toFixed(0)} kbps` : "—";
+        const frameDropRate = quality?.frameDropRate?.toFixed(1) ?? "—";
+        const stallCount = quality?.stallCount ?? 0;
+        const latency = quality?.latency ? `${Math.round(quality.latency)} ms` : "—";
+        const viewers = metadata?.viewers ?? "—";
+        const streamStatus = streamState?.status ?? metadata?.status ?? "—";
+        const mistInfo = metadata?.mist ?? streamState?.streamInfo;
+        const mistType = mistInfo?.type ?? "—";
+        const mistBufferWindow = mistInfo?.meta?.buffer_window;
+        const mistLastMs = mistInfo?.lastms;
+        const mistUnixOffset = mistInfo?.unixoffset;
+        const stats = [
+            { label: "Resolution", value: currentRes },
+            { label: "Buffer", value: `${buffered}s` },
+            { label: "Latency", value: latency },
+            { label: "Bitrate", value: bitrateKbps },
+            { label: "Quality Score", value: `${qualityScore}/100` },
+            { label: "Frame Drop Rate", value: `${frameDropRate}%` },
+            { label: "Stalls", value: String(stallCount) },
+            { label: "Playback Rate", value: `${playbackRate}x` },
+            { label: "Protocol", value: primaryEndpoint?.protocol ?? "—" },
+            { label: "Node", value: primaryEndpoint?.nodeId ?? "—" },
+            {
+                label: "Geo Distance",
+                value: primaryEndpoint?.geoDistance ? `${primaryEndpoint.geoDistance.toFixed(0)} km` : "—",
+            },
+            { label: "Viewers", value: String(viewers) },
+            { label: "Status", value: streamStatus },
+            { label: "Tracks", value: this._formatTracks(metadata, mistInfo) },
+            { label: "Mist Type", value: mistType },
+            {
+                label: "Mist Buffer Window",
+                value: mistBufferWindow != null ? String(mistBufferWindow) : "—",
+            },
+            { label: "Mist Lastms", value: mistLastMs != null ? String(mistLastMs) : "—" },
+            { label: "Mist Unixoffset", value: mistUnixOffset != null ? String(mistUnixOffset) : "—" },
+        ];
+        if (metadata?.title) {
+            stats.unshift({ label: "Title", value: metadata.title });
+        }
+        if (metadata?.durationSeconds) {
+            const mins = Math.floor(metadata.durationSeconds / 60);
+            const secs = metadata.durationSeconds % 60;
+            stats.push({ label: "Duration", value: `${mins}:${String(secs).padStart(2, "0")}` });
+        }
+        if (metadata?.recordingSizeBytes) {
+            const mb = (metadata.recordingSizeBytes / (1024 * 1024)).toFixed(1);
+            stats.push({ label: "Size", value: `${mb} MB` });
+        }
+        return stats;
+    }
+    render() {
+        const stats = this._collectStats();
         return html `
       <div class="panel fw-stats-panel">
-        <div class="header">
-          <span class="title">Stats</span>
+        <div class="header fw-stats-header">
+          <span class="title">Stats Overlay</span>
           <button
             class="close"
             @click=${() => this.dispatchEvent(new CustomEvent("fw-close", { bubbles: true, composed: true }))}
-            aria-label="Close stats"
+            aria-label="Close stats panel"
           >
             ${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 class="rows">
+          ${stats.map((stat) => html `<div class="row fw-stats-row">
+                <span class="label">${stat.label}</span>
+                <span class="value fw-stats-value">${stat.value}</span>
+              </div>`)}
+        </div>
       </div>
     `;
     }
@@ -73,60 +134,63 @@ FwStatsPanel.styles = [
       }
       .panel {
         position: absolute;
-        top: 0.75rem;
-        left: 0.75rem;
+        top: 0.5rem;
+        right: 0.5rem;
         z-index: 30;
-        min-width: 240px;
-        max-width: 320px;
+        width: 18rem;
         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);
+        overflow-y: auto;
+        background: hsl(var(--tn-bg-dark) / 0.9);
+        backdrop-filter: blur(4px);
+        border: 1px solid hsl(var(--tn-fg-gutter) / 0.3);
+        font-family: ui-monospace, monospace;
+        font-size: 0.75rem;
+        color: hsl(var(--tn-fg));
       }
       .header {
         display: flex;
         align-items: center;
         justify-content: space-between;
-        margin-bottom: 0.5rem;
+        padding: 0.5rem;
+        border-bottom: 1px solid hsl(var(--tn-fg-gutter) / 0.3);
       }
       .title {
-        font-size: 0.75rem;
+        font-size: 10px;
         font-weight: 600;
-        color: white;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+        color: hsl(var(--tn-fg-dark));
       }
       .close {
         display: flex;
-        background: none;
+        align-items: center;
+        justify-content: center;
+        width: 1.5rem;
+        height: 1.5rem;
         border: none;
-        color: rgb(255 255 255 / 0.5);
+        background: transparent;
+        color: hsl(var(--tn-fg-dark));
         cursor: pointer;
-        padding: 0;
       }
       .close:hover {
-        color: white;
+        color: hsl(var(--tn-fg));
+      }
+      .rows {
+        padding: 0.5rem;
       }
       .row {
         display: flex;
         justify-content: space-between;
+        gap: 0.5rem;
         padding: 0.125rem 0;
       }
       .label {
-        color: rgb(255 255 255 / 0.5);
+        color: hsl(var(--tn-fg-dark));
       }
       .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;
+        color: hsl(var(--tn-fg));
+        text-align: right;
+        word-break: break-word;
       }
     `,
 ];