@livepeer-frameworks/player-wc 0.1.1 → 0.1.3

package/src/components/fw-settings-menu.ts

@@ -1,17 +1,30 @@
 /**
- * <fw-settings-menu> — Quality, speed, and captions settings popup.
+ * <fw-settings-menu> — Mode, speed, quality, and captions settings popup.
  */
 import { LitElement, html, css, nothing } from "lit";
 import { customElement, property, state } 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 {
+  SPEED_PRESETS,
+  supportsPlaybackRate as coreSupportsPlaybackRate,
+} from "@livepeer-frameworks/player-core";
+import type { PlaybackMode } from "@livepeer-frameworks/player-core";
 import type { PlayerControllerHost } from "../controllers/player-controller-host.js";
 
 @customElement("fw-settings-menu")
 export class FwSettingsMenu extends LitElement {
   @property({ attribute: false }) pc!: PlayerControllerHost;
   @property({ type: Boolean }) open = false;
+  @property({ type: String }) playbackMode: PlaybackMode = "auto";
+  @property({ type: Boolean, attribute: "is-content-live" }) isContentLive = true;
+  @property({ type: Number, attribute: "playback-rate" }) playbackRate?: number;
+  @property({ type: String, attribute: "quality-value" }) qualityValue?: string;
+  @property({ type: String, attribute: "caption-value" }) captionValue?: string;
+  @property({ type: Boolean, attribute: "supports-playback-rate" }) supportsPlaybackRate?: boolean;
+
+  @state() private _playbackRate = 1;
 
   static styles = [
     sharedStyles,
@@ -20,102 +33,212 @@ export class FwSettingsMenu extends LitElement {
       :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;
-      }
     `,
   ];
 
+  protected updated(): void {
+    if (!this.open) {
+      return;
+    }
+
+    if (Number.isFinite(this.playbackRate)) {
+      this._playbackRate = this.playbackRate as number;
+      return;
+    }
+
+    const video = this.pc?.s.videoElement;
+    if (video && Number.isFinite(video.playbackRate)) {
+      this._playbackRate = video.playbackRate;
+    }
+  }
+
+  private _close(): void {
+    this.dispatchEvent(new CustomEvent("fw-close", { bubbles: true, composed: true }));
+  }
+
+  private _handleModeChange(mode: "auto" | "low-latency" | "quality"): void {
+    this.pc.setDevModeOptions({ playbackMode: mode });
+    this.dispatchEvent(
+      new CustomEvent("fw-mode-change", {
+        detail: { mode },
+        bubbles: true,
+        composed: true,
+      })
+    );
+    this._close();
+  }
+
+  private _handleSpeedChange(rate: number): void {
+    this._playbackRate = rate;
+    this.pc.setPlaybackRate(rate);
+    this.dispatchEvent(
+      new CustomEvent("fw-speed-change", {
+        detail: { rate },
+        bubbles: true,
+        composed: true,
+      })
+    );
+    this._close();
+  }
+
+  private _handleQualityChange(id: string): void {
+    this.pc.selectQuality(id);
+    this.dispatchEvent(
+      new CustomEvent("fw-quality-change", {
+        detail: { quality: id },
+        bubbles: true,
+        composed: true,
+      })
+    );
+    this._close();
+  }
+
+  private _handleCaptionChange(id: string): void {
+    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();
+  }
+
   protected render() {
-    if (!this.open) return nothing;
-    const { qualities } = this.pc.s;
-    const speeds = [0.25, 0.5, 0.75, 1, 1.25, 1.5, 2];
+    if (!this.open) {
+      return nothing;
+    }
+
+    const state = this.pc.s;
+    const qualities = state.qualities ?? [];
+    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 =
+      this.supportsPlaybackRate ?? coreSupportsPlaybackRate(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"] as const).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
+          ? 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}
-        <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>
+        ${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>
             `
-          )}
-        </div>
+          : nothing}
       </div>
     `;
   }

package/src/components/fw-stats-panel.ts

@@ -1,14 +1,18 @@
 /**
- * <fw-stats-panel> — Stats for nerds overlay.
- * Port of StatsPanel.tsx from player-react.
+ * <fw-stats-panel> — Stats for nerds overlay aligned with wrapper diagnostics.
  */
-import { LitElement, html, css, nothing } from "lit";
+import { LitElement, html, css } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import { sharedStyles } from "../styles/shared-styles.js";
 import { utilityStyles } from "../styles/utility-styles.js";
 import { closeIcon } from "../icons/index.js";
 import type { PlayerControllerHost } from "../controllers/player-controller-host.js";
 
+interface StatRow {
+  label: string;
+  value: string;
+}
+
 @customElement("fw-stats-panel")
 export class FwStatsPanel extends LitElement {
   @property({ attribute: false }) pc!: PlayerControllerHost;
@@ -22,126 +26,195 @@ export class FwStatsPanel extends LitElement {
       }
       .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;
       }
     `,
   ];
 
-  private _resolution(): string | null {
-    const video = this.pc.s.videoElement;
-    if (!video || !video.videoWidth || !video.videoHeight) return null;
-    return `${video.videoWidth}x${video.videoHeight}`;
+  private _deriveTracksFromMist(mistInfo: any) {
+    const mistTracks = mistInfo?.meta?.tracks;
+    if (!mistTracks) return undefined;
+    return Object.values(mistTracks as Record<string, any>).map((track: any) => ({
+      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,
+    }));
   }
 
-  private _stat(label: string, value: string | number | null | undefined) {
-    if (value == null || value === "") return nothing;
-    return html`<div class="row">
-      <span class="label">${label}</span><span class="value">${value}</span>
-    </div>`;
+  private _formatTracks(metadata: any, mistInfo: any): string {
+    const tracks = metadata?.tracks ?? this._deriveTracksFromMist(mistInfo);
+    if (!tracks?.length) return "—";
+    return tracks
+      .map((track: any) => {
+        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(", ");
   }
 
-  protected render() {
+  private _collectStats(): StatRow[] {
     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 as
+      | { protocol?: string; nodeId?: string; geoDistance?: number }
+      | undefined;
+
+    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: StatRow[] = [
+      { 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;
+  }
+
+  protected 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>
     `;
   }