@livepeer-frameworks/player-wc 0.1.0

package/src/components/fw-seek-bar.ts

@@ -0,0 +1,219 @@
+/**
+ * <fw-seek-bar> — Video seek bar with buffer visualization, drag, tooltips.
+ * Port of SeekBar.tsx from player-react.
+ */
+import { LitElement, html, css, nothing } from "lit";
+import { customElement, property, state, query } 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";
+
+@customElement("fw-seek-bar")
+export class FwSeekBar extends LitElement {
+  @property({ type: Number }) currentTime = 0;
+  @property({ type: Number }) duration = 0;
+  @property({ type: Boolean }) disabled = false;
+  @property({ type: Boolean, attribute: "is-live" }) isLive = false;
+
+  @state() private _hovering = false;
+  @state() private _dragging = false;
+  @state() private _hoverPct = 0;
+  @state() private _dragPct: number | null = null;
+
+  @query(".track") private _trackEl!: HTMLDivElement;
+
+  static styles = [
+    sharedStyles,
+    css`
+      :host {
+        display: block;
+        width: 100%;
+      }
+      .wrap {
+        position: relative;
+        padding: 0.25rem 0;
+        cursor: pointer;
+      }
+      .wrap--disabled {
+        opacity: 0.4;
+        pointer-events: none;
+      }
+      .track {
+        position: relative;
+        height: 4px;
+        background: rgb(255 255 255 / 0.15);
+        border-radius: 2px;
+        overflow: hidden;
+        transition: height 150ms ease;
+      }
+      .wrap:hover .track,
+      .track--active {
+        height: 6px;
+      }
+      .progress {
+        position: absolute;
+        top: 0;
+        left: 0;
+        height: 100%;
+        background: hsl(var(--tn-blue, 217 89% 61%));
+        border-radius: 2px;
+        pointer-events: none;
+      }
+      .thumb {
+        position: absolute;
+        top: 50%;
+        width: 12px;
+        height: 12px;
+        border-radius: 50%;
+        background: white;
+        transform: translate(-50%, -50%) scale(0);
+        transition: transform 150ms ease;
+        z-index: 5;
+        pointer-events: none;
+      }
+      .wrap:hover .thumb,
+      .thumb--active {
+        transform: translate(-50%, -50%) scale(1);
+      }
+      .tooltip {
+        position: absolute;
+        bottom: 100%;
+        margin-bottom: 8px;
+        transform: translateX(-50%);
+        padding: 0.25rem 0.5rem;
+        border-radius: 4px;
+        background: rgb(0 0 0 / 0.85);
+        color: white;
+        font-size: 0.6875rem;
+        font-variant-numeric: tabular-nums;
+        white-space: nowrap;
+        pointer-events: none;
+        z-index: 10;
+      }
+    `,
+  ];
+
+  private _pctFromEvent(e: MouseEvent | PointerEvent): number {
+    if (!this._trackEl) return 0;
+    const rect = this._trackEl.getBoundingClientRect();
+    return Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
+  }
+
+  private _timeFromPct(pct: number): number {
+    const d = this.isLive ? this.duration : this.duration;
+    return isFinite(d) && d > 0 ? pct * d : 0;
+  }
+
+  private _formatTime(seconds: number): string {
+    if (!isFinite(seconds)) return "0:00";
+    const abs = Math.abs(Math.floor(seconds));
+    const h = Math.floor(abs / 3600);
+    const m = Math.floor((abs % 3600) / 60);
+    const s = abs % 60;
+    const sign = seconds < 0 ? "-" : "";
+    if (h > 0) return `${sign}${h}:${String(m).padStart(2, "0")}:${String(s).padStart(2, "0")}`;
+    return `${sign}${m}:${String(s).padStart(2, "0")}`;
+  }
+
+  private _handlePointerDown = (e: PointerEvent) => {
+    if (this.disabled) return;
+    e.preventDefault();
+    this._dragging = true;
+    this._dragPct = this._pctFromEvent(e);
+    (e.target as HTMLElement).setPointerCapture?.(e.pointerId);
+  };
+
+  private _handlePointerMove = (e: PointerEvent) => {
+    const pct = this._pctFromEvent(e);
+    if (this._dragging) {
+      this._dragPct = pct;
+    }
+    this._hoverPct = pct;
+  };
+
+  private _handlePointerUp = (e: PointerEvent) => {
+    if (this._dragging && this._dragPct != null) {
+      const time = this._timeFromPct(this._dragPct);
+      this.dispatchEvent(
+        new CustomEvent("fw-seek", { detail: { time }, bubbles: true, composed: true })
+      );
+    }
+    this._dragging = false;
+    this._dragPct = null;
+  };
+
+  private _handleClick = (e: MouseEvent) => {
+    if (this.disabled || this._dragging) return;
+    const pct = this._pctFromEvent(e);
+    const time = this._timeFromPct(pct);
+    this.dispatchEvent(
+      new CustomEvent("fw-seek", { detail: { time }, bubbles: true, composed: true })
+    );
+  };
+
+  private _handleMouseEnter = () => {
+    this._hovering = true;
+  };
+  private _handleMouseLeave = () => {
+    this._hovering = false;
+  };
+
+  private get _progressPct(): number {
+    if (this._dragPct != null) return this._dragPct * 100;
+    const d = this.duration;
+    if (!isFinite(d) || d <= 0) return 0;
+    return Math.min(100, (this.currentTime / d) * 100);
+  }
+
+  protected render() {
+    const progressPct = this._progressPct;
+    const thumbPct = this._dragPct != null ? this._dragPct * 100 : progressPct;
+    const showTooltip = this._hovering || this._dragging;
+    const tooltipPct = this._dragging ? (this._dragPct ?? 0) * 100 : this._hoverPct * 100;
+    const tooltipTime = this._timeFromPct(tooltipPct / 100);
+
+    let tooltipText = this._formatTime(tooltipTime);
+    if (this.isLive && isFinite(this.duration) && this.duration > 0) {
+      const behindLive = tooltipTime - this.duration;
+      if (behindLive < -1) tooltipText = this._formatTime(behindLive);
+    }
+
+    return html`
+      <div
+        class=${classMap({ wrap: true, "wrap--disabled": this.disabled })}
+        @pointerdown=${this._handlePointerDown}
+        @pointermove=${this._handlePointerMove}
+        @pointerup=${this._handlePointerUp}
+        @click=${this._handleClick}
+        @mouseenter=${this._handleMouseEnter}
+        @mouseleave=${this._handleMouseLeave}
+      >
+        <div
+          class=${classMap({ track: true, "track--active": this._dragging, "fw-seek-track": true })}
+        >
+          <div
+            class="progress fw-seek-progress"
+            style=${styleMap({ width: `${progressPct}%` })}
+          ></div>
+        </div>
+        <div
+          class=${classMap({ thumb: true, "thumb--active": this._dragging, "fw-seek-thumb": true })}
+          style=${styleMap({ left: `${thumbPct}%` })}
+        ></div>
+        ${showTooltip
+          ? html`
+              <div class="tooltip fw-seek-tooltip" style=${styleMap({ left: `${tooltipPct}%` })}>
+                ${tooltipText}
+              </div>
+            `
+          : nothing}
+      </div>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "fw-seek-bar": FwSeekBar;
+  }
+}

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

@@ -0,0 +1,128 @@
+/**
+ * <fw-settings-menu> — Quality, speed, 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 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;
+
+  static styles = [
+    sharedStyles,
+    utilityStyles,
+    css`
+      :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 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];
+
+    return html`
+      <div class="menu fw-settings-menu">
+        ${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>
+            `
+          : 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>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "fw-settings-menu": FwSettingsMenu;
+  }
+}

package/src/components/fw-skip-indicator.ts

@@ -0,0 +1,139 @@
+import { LitElement, html, css, nothing } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+
+export type SkipDirection = "back" | "forward" | null;
+
+@customElement("fw-skip-indicator")
+export class FwSkipIndicator extends LitElement {
+  @property({ attribute: false }) direction: SkipDirection = null;
+  @property({ type: Number }) seconds = 10;
+
+  @state() private _visible = false;
+  private _timer?: ReturnType<typeof setTimeout>;
+
+  static styles = css`
+    :host {
+      display: contents;
+    }
+    .overlay {
+      position: absolute;
+      inset: 0;
+      pointer-events: none;
+      z-index: 25;
+    }
+    .ripple {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      width: 33%;
+      background: rgb(255 255 255 / 0.1);
+      border-radius: 50%;
+      animation: _fw-ripple 600ms ease-out forwards;
+    }
+    .ripple--back {
+      left: 0;
+      border-radius: 0 50% 50% 0;
+    }
+    .ripple--forward {
+      right: 0;
+      border-radius: 50% 0 0 50%;
+    }
+    @keyframes _fw-ripple {
+      from {
+        opacity: 1;
+      }
+      to {
+        opacity: 0;
+      }
+    }
+    .content {
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 0.25rem;
+      color: white;
+      animation: _fw-skip-pop 400ms ease-out;
+    }
+    .content--back {
+      left: 12%;
+    }
+    .content--forward {
+      right: 12%;
+    }
+    @keyframes _fw-skip-pop {
+      from {
+        opacity: 0;
+        transform: translateY(-50%) scale(0.8);
+      }
+      to {
+        opacity: 1;
+        transform: translateY(-50%) scale(1);
+      }
+    }
+    .icons {
+      display: flex;
+    }
+    .icons svg:nth-child(2) {
+      margin-left: -1rem;
+    }
+    .time {
+      font-size: 0.75rem;
+      font-weight: 600;
+    }
+  `;
+
+  protected updated() {
+    if (this.direction && !this._visible) {
+      this._visible = true;
+      clearTimeout(this._timer);
+      this._timer = setTimeout(() => {
+        this._visible = false;
+        this.dispatchEvent(new CustomEvent("fw-hide", { bubbles: true, composed: true }));
+      }, 600);
+    }
+  }
+
+  private _renderRewind() {
+    return html`<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
+      <path d="M11 18V6l-8.5 6 8.5 6zm.5-6l8.5 6V6l-8.5 6z" />
+    </svg>`;
+  }
+
+  private _renderForward() {
+    return html`<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
+      <path d="M4 18l8.5-6L4 6v12zm9-12v12l8.5-6L13 6z" />
+    </svg>`;
+  }
+
+  protected render() {
+    if (!this._visible || !this.direction) return nothing;
+    const isBack = this.direction === "back";
+    return html`
+      <div class="overlay">
+        <div
+          class=${classMap({ ripple: true, "ripple--back": isBack, "ripple--forward": !isBack })}
+        ></div>
+        <div
+          class=${classMap({ content: true, "content--back": isBack, "content--forward": !isBack })}
+        >
+          <div class="icons">
+            ${isBack
+              ? html`${this._renderRewind()}${this._renderRewind()}`
+              : html`${this._renderForward()}${this._renderForward()}`}
+          </div>
+          <span class="time">${isBack ? `-${this.seconds}s` : `+${this.seconds}s`}</span>
+        </div>
+      </div>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "fw-skip-indicator": FwSkipIndicator;
+  }
+}

package/src/components/fw-speed-indicator.ts

@@ -0,0 +1,57 @@
+import { LitElement, html, css } from "lit";
+import { customElement, property } from "lit/decorators.js";
+
+@customElement("fw-speed-indicator")
+export class FwSpeedIndicator extends LitElement {
+  @property({ type: Number }) speed = 2;
+
+  static styles = css`
+    :host {
+      display: contents;
+    }
+    .pill {
+      position: absolute;
+      top: 0.75rem;
+      right: 0.75rem;
+      display: inline-flex;
+      align-items: center;
+      gap: 0.375rem;
+      padding: 0.25rem 0.625rem;
+      border-radius: 9999px;
+      background: rgb(0 0 0 / 0.6);
+      color: white;
+      font-size: 0.75rem;
+      font-variant-numeric: tabular-nums;
+      z-index: 30;
+      transform: scale(1);
+      animation: _fw-pop 150ms ease-out;
+    }
+    @keyframes _fw-pop {
+      from {
+        transform: scale(0.9);
+        opacity: 0;
+      }
+      to {
+        transform: scale(1);
+        opacity: 1;
+      }
+    }
+  `;
+
+  protected render() {
+    return html`
+      <div class="pill fw-speed-indicator">
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+          <path d="M4 18l8.5-6L4 6v12zm9-12v12l8.5-6L13 6z" />
+        </svg>
+        <span>${this.speed}x</span>
+      </div>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "fw-speed-indicator": FwSpeedIndicator;
+  }
+}

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

@@ -0,0 +1,154 @@
+/**
+ * <fw-stats-panel> — Stats for nerds overlay.
+ * Port of StatsPanel.tsx from player-react.
+ */
+import { LitElement, html, css, nothing } 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";
+
+@customElement("fw-stats-panel")
+export class FwStatsPanel extends LitElement {
+  @property({ attribute: false }) pc!: PlayerControllerHost;
+
+  static 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;
+      }
+    `,
+  ];
+
+  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 _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>`;
+  }
+
+  protected 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>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "fw-stats-panel": FwStatsPanel;
+  }
+}