@livepeer-frameworks/player-wc 0.2.11 → 0.3.1

package/dist/types/components/fw-seek-bar.d.ts

@@ -3,6 +3,7 @@
  * Behavioral parity with react/svelte SeekBar implementations.
  */
 import { LitElement } from "lit";
+import { type ThumbnailCue } from "@livepeer-frameworks/player-core";
 export declare class FwSeekBar extends LitElement {
     currentTime: number;
     duration: number;
@@ -12,6 +13,8 @@ export declare class FwSeekBar extends LitElement {
     seekableStart: number;
     liveEdge?: number;
     commitOnRelease: boolean;
+    isPlaying: boolean;
+    thumbnailCues: ThumbnailCue[];
     private _hovering;
     private _dragging;
     private _dragTime;
@@ -19,8 +22,12 @@ export declare class FwSeekBar extends LitElement {
     private _hoverTime;
     private _trackRect;
     private _activePointerId;
+    private _rafId;
+    private _rafBase;
     static styles: import("lit").CSSResult[];
     disconnectedCallback(): void;
+    updated(changed: Map<string, unknown>): void;
+    private _syncRaf;
     private get _effectiveLiveEdge();
     private get _seekableWindow();
     private get _displayTime();
@@ -37,10 +44,12 @@ export declare class FwSeekBar extends LitElement {
     private _onPointerLeave;
     private _onPointerMove;
     private _onPointerDown;
+    private _didDragMove;
     private _onGlobalPointerMove;
     private _onGlobalPointerUp;
     private _attachDragListeners;
     private _detachDragListeners;
+    private get _thumbnailStyle();
     protected render(): import("lit").TemplateResult<1>;
 }
 declare global {

package/dist/types/controllers/player-controller-host.d.ts

@@ -3,7 +3,7 @@
  * Direct port of usePlayerController.ts from player-react.
  */
 import type { ReactiveController, ReactiveControllerHost } from "lit";
-import { PlayerController, type PlayerControllerConfig, type PlayerState, type StreamState, type StreamInfo, type PlaybackQuality, type ContentEndpoints, type ContentMetadata, type ClassifiedError, type TranslateFn, type I18nConfig } from "@livepeer-frameworks/player-core";
+import { PlayerController, type PlayerControllerConfig, type PlayerState, type StreamState, type StreamInfo, type PlaybackQuality, type ContentEndpoints, type ContentMetadata, type ClassifiedError, type TranslateFn, type I18nConfig, type ThumbnailCue } from "@livepeer-frameworks/player-core";
 export interface PlayerControllerHostState {
     state: PlayerState;
     streamState: StreamState | null;
@@ -60,6 +60,7 @@ export interface PlayerControllerHostState {
         message: string;
         timestamp: number;
     } | null;
+    thumbnailCues: ThumbnailCue[];
 }
 type HostElement = ReactiveControllerHost & HTMLElement;
 export declare class PlayerControllerHost implements ReactiveController {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@livepeer-frameworks/player-wc",
-  "version": "0.2.11",
+  "version": "0.3.1",
   "type": "module",
   "description": "Lit Web Components for FrameWorks streaming player — <fw-player> custom element with full UI",
   "main": "dist/esm/index.js",
@@ -26,18 +26,18 @@
   },
   "dependencies": {
     "lit": "^3.3.2",
-    "@livepeer-frameworks/player-core": "0.2.5"
+    "@livepeer-frameworks/player-core": "0.3.1"
   },
   "devDependencies": {
-    "@rollup/plugin-commonjs": "^29.0.0",
+    "@rollup/plugin-commonjs": "^29.0.2",
     "@rollup/plugin-node-resolve": "^16.0.3",
-    "@rollup/plugin-terser": "^0.4.4",
+    "@rollup/plugin-terser": "^1.0.0",
     "@rollup/plugin-typescript": "^12.3.0",
-    "@vitest/coverage-v8": "^4.0.18",
-    "rollup": "^4.59.0",
+    "@vitest/coverage-v8": "^4.1.4",
+    "rollup": "^4.60.1",
     "tslib": "^2.8.1",
-    "typescript": "^5.9.3",
-    "vitest": "^4.0.18"
+    "typescript": "^6.0.2",
+    "vitest": "^4.1.4"
   },
   "keywords": [
     "web-components",

package/src/components/fw-player-controls.ts

@@ -358,6 +358,8 @@ export class FwPlayerControls extends LitElement {
                     .seekableStart=${context.seekableStart}
                     .liveEdge=${context.liveEdge}
                     .commitOnRelease=${context.commitOnRelease}
+                    .isPlaying=${state.isPlaying}
+                    .thumbnailCues=${state.thumbnailCues}
                     @fw-seek=${(event: CustomEvent<{ time: number }>) =>
                       this.pc.seek(event.detail.time)}
                   ></fw-seek-bar>

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

@@ -7,6 +7,7 @@ import { customElement, property, state } 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 { findCueAtTime, type ThumbnailCue } from "@livepeer-frameworks/player-core";
 
 interface BufferedSegment {
   startPercent: number;
@@ -23,6 +24,8 @@ export class FwSeekBar extends LitElement {
   @property({ type: Number, attribute: "seekable-start" }) seekableStart = 0;
   @property({ type: Number, attribute: "live-edge" }) liveEdge?: number;
   @property({ type: Boolean, attribute: "commit-on-release" }) commitOnRelease = false;
+  @property({ type: Boolean, attribute: "is-playing" }) isPlaying = false;
+  @property({ attribute: false }) thumbnailCues: ThumbnailCue[] = [];
 
   @state() private _hovering = false;
   @state() private _dragging = false;
@@ -32,6 +35,8 @@ export class FwSeekBar extends LitElement {
 
   private _trackRect: DOMRect | null = null;
   private _activePointerId: number | null = null;
+  private _rafId = 0;
+  private _rafBase = { time: 0, stamp: 0 };
 
   static styles = [
     sharedStyles,
@@ -60,6 +65,56 @@ export class FwSeekBar extends LitElement {
   disconnectedCallback(): void {
     super.disconnectedCallback();
     this._detachDragListeners();
+    cancelAnimationFrame(this._rafId);
+  }
+
+  updated(changed: Map<string, unknown>): void {
+    if (changed.has("currentTime")) {
+      this._rafBase = { time: this.currentTime, stamp: performance.now() };
+    }
+    if (
+      changed.has("isPlaying") ||
+      changed.has("disabled") ||
+      changed.has("currentTime") ||
+      changed.has("duration")
+    ) {
+      this._syncRaf();
+    }
+  }
+
+  private _syncRaf(): void {
+    const shouldAnimate = this.isPlaying && !this._dragging && !this.disabled;
+
+    if (!shouldAnimate) {
+      cancelAnimationFrame(this._rafId);
+      const el = this.renderRoot.querySelector(".fw-seek-progress") as HTMLElement | null;
+      if (el) {
+        el.style.transform = `scaleX(${this._progressPercent / 100})`;
+      }
+      return;
+    }
+
+    cancelAnimationFrame(this._rafId);
+    const rangeStart = this.isLive ? this.seekableStart : 0;
+    const rangeSize = this.isLive ? this._seekableWindow : this.duration;
+
+    const animate = () => {
+      if (!this.isPlaying || this._dragging || this.disabled) return;
+      const interpolated = this._rafBase.time + (performance.now() - this._rafBase.stamp);
+      const relative = interpolated - rangeStart;
+      const pct =
+        Number.isFinite(rangeSize) && rangeSize > 0
+          ? Math.min(100, Math.max(0, (relative / rangeSize) * 100))
+          : 0;
+
+      const el = this.renderRoot.querySelector(".fw-seek-progress") as HTMLElement | null;
+      if (el) {
+        el.style.transform = `scaleX(${pct / 100})`;
+      }
+      this._rafId = requestAnimationFrame(animate);
+    };
+
+    this._rafId = requestAnimationFrame(animate);
   }
 
   private get _effectiveLiveEdge(): number {
@@ -282,6 +337,7 @@ export class FwSeekBar extends LitElement {
     this._activePointerId = event.pointerId;
     this._dragging = true;
     this._hovering = true;
+    this._didDragMove = false;
 
     const initialTime = this._getTimeFromClientX(event.clientX);
     this._updateHover(event.clientX);
@@ -295,11 +351,14 @@ export class FwSeekBar extends LitElement {
     this._attachDragListeners();
   };
 
+  private _didDragMove = false;
+
   private _onGlobalPointerMove = (event: PointerEvent) => {
     if (!this._dragging || this._activePointerId !== event.pointerId) {
       return;
     }
 
+    this._didDragMove = true;
     const time = this._getTimeFromClientX(event.clientX);
     this._updateHover(event.clientX);
 
@@ -318,11 +377,14 @@ export class FwSeekBar extends LitElement {
     if (this.commitOnRelease && this._dragTime != null) {
       this._emitSeek(this._dragTime);
     }
+    // Non-commitOnRelease: drag moves already emitted seeks, no double-seek on release
 
     this._dragging = false;
     this._dragTime = null;
     this._activePointerId = null;
+    this._didDragMove = false;
     this._detachDragListeners();
+    this._syncRaf();
   };
 
   private _attachDragListeners(): void {
@@ -337,10 +399,25 @@ export class FwSeekBar extends LitElement {
     window.removeEventListener("pointercancel", this._onGlobalPointerUp);
   }
 
+  private get _thumbnailStyle(): Record<string, string> | null {
+    if (!this.thumbnailCues?.length || !this._hovering || this._dragging) return null;
+    const cue = findCueAtTime(this.thumbnailCues, this._hoverTime / 1000);
+    if (!cue || cue.width === undefined || cue.height === undefined) return null;
+    return {
+      backgroundImage: `url(${cue.url})`,
+      backgroundPosition: `-${cue.x ?? 0}px -${cue.y ?? 0}px`,
+      backgroundSize: "auto",
+      width: `${cue.width}px`,
+      height: `${cue.height}px`,
+      left: `${this._hoverPosition}%`,
+    };
+  }
+
   protected render() {
     const progressPercent = this._progressPercent;
     const showThumb = this._hovering || this._dragging;
     const canShowTooltip = this.isLive ? this._seekableWindow > 0 : Number.isFinite(this.duration);
+    const thumbStyle = this._thumbnailStyle;
 
     return html`
       <div
@@ -380,7 +457,10 @@ export class FwSeekBar extends LitElement {
               ></div>
             `
           )}
-          <div class="fw-seek-progress" style=${styleMap({ width: `${progressPercent}%` })}></div>
+          <div
+            class="fw-seek-progress"
+            style=${styleMap({ transform: `scaleX(${progressPercent / 100})` })}
+          ></div>
           ${this._hovering && !this._dragging
             ? html`<div
                 class="fw-seek-hover-line"
@@ -399,6 +479,9 @@ export class FwSeekBar extends LitElement {
           style=${styleMap({ left: `${progressPercent}%` })}
         ></div>
 
+        ${thumbStyle
+          ? html`<div class="fw-seek-thumbnail" style=${styleMap(thumbStyle)}></div>`
+          : nothing}
         ${this._hovering && !this._dragging && canShowTooltip
           ? html`
               <div class="fw-seek-tooltip" style=${styleMap({ left: `${this._hoverPosition}%` })}>

package/src/controllers/player-controller-host.ts

@@ -16,6 +16,7 @@ import {
   type ClassifiedError,
   type TranslateFn,
   type I18nConfig,
+  type ThumbnailCue,
 } from "@livepeer-frameworks/player-core";
 
 export interface PlayerControllerHostState {
@@ -60,6 +61,7 @@ export interface PlayerControllerHostState {
   textTracks: Array<{ id: string; label: string; lang?: string; active: boolean }>;
   streamInfo: StreamInfo | null;
   toast: { message: string; timestamp: number } | null;
+  thumbnailCues: ThumbnailCue[];
 }
 
 const initialState: PlayerControllerHostState = {
@@ -96,6 +98,7 @@ const initialState: PlayerControllerHostState = {
   textTracks: [],
   streamInfo: null,
   toast: null,
+  thumbnailCues: [],
 };
 
 type HostElement = ReactiveControllerHost & HTMLElement;
@@ -391,6 +394,12 @@ export class PlayerControllerHost implements ReactiveController {
         });
       })
     );
+
+    u.push(
+      controller.on("thumbnailCuesChange", ({ cues }) => {
+        this.update({ thumbnailCues: cues });
+      })
+    );
   }
 
   // ---- Event Dispatching ----

package/src/styles/shared-styles.ts

@@ -827,10 +827,12 @@ export const sharedStyles = css`
 
   .fw-seek-progress {
     position: absolute;
+    width: 100%;
     height: 100%;
     border-radius: 9999px;
     background: hsl(var(--fw-accent));
-    will-change: width;
+    transform-origin: left center;
+    will-change: transform;
   }
 
   .fw-seek-hover-line {
@@ -898,6 +900,20 @@ export const sharedStyles = css`
     transform: translateX(-50%);
   }
 
+  .fw-seek-thumbnail {
+    position: absolute;
+    bottom: 100%;
+    margin-bottom: 28px;
+    border-radius: 4px;
+    border: 2px solid hsl(var(--fw-surface-raised));
+    box-shadow: 0 4px 12px hsl(var(--fw-shadow-color) / 0.4);
+    background-color: hsl(var(--fw-surface-deep));
+    background-repeat: no-repeat;
+    pointer-events: none;
+    transform: translateX(-50%);
+    z-index: 10;
+  }
+
   /* --- Stats Panel --- */
   .fw-stats-panel {
     position: absolute;