@livepeer-frameworks/player-wc 0.2.7 → 0.2.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@livepeer-frameworks/player-wc",
-  "version": "0.2.7",
+  "version": "0.2.9",
   "type": "module",
   "description": "Lit Web Components for FrameWorks streaming player — <fw-player> custom element with full UI",
   "main": "dist/esm/index.js",
@@ -24,19 +24,9 @@
       "default": "./dist/fw-player.iife.js"
     }
   },
-  "scripts": {
-    "build": "rm -rf dist && pnpm run build:css && pnpm run build:types && NODE_ENV=production rollup -c",
-    "build:watch": "NODE_ENV=development rollup -c --watch",
-    "build:css": "node scripts/generate-shared-styles.js",
-    "build:types": "tsc --noEmit false --emitDeclarationOnly --outDir dist/types",
-    "type-check": "tsc --noEmit",
-    "test": "vitest run",
-    "test:watch": "vitest",
-    "test:coverage": "vitest run --coverage"
-  },
   "dependencies": {
-    "@livepeer-frameworks/player-core": "workspace:*",
-    "lit": "^3.3.2"
+    "lit": "^3.3.2",
+    "@livepeer-frameworks/player-core": "0.2.3"
   },
   "devDependencies": {
     "@rollup/plugin-commonjs": "^29.0.0",
@@ -58,5 +48,15 @@
     "custom-elements"
   ],
   "author": "Livepeer FrameWorks",
-  "license": "Unlicense"
-}
+  "license": "Unlicense",
+  "scripts": {
+    "build": "rm -rf dist && pnpm run build:css && pnpm run build:types && NODE_ENV=production rollup -c",
+    "build:watch": "NODE_ENV=development rollup -c --watch",
+    "build:css": "node scripts/generate-shared-styles.js",
+    "build:types": "tsc --noEmit false --emitDeclarationOnly --outDir dist/types",
+    "type-check": "tsc --noEmit",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:coverage": "vitest run --coverage"
+  }
+}

package/src/components/controls/fw-skip-button.ts

@@ -31,7 +31,7 @@ export class FwSkipButton extends LitElement {
   }
 
   private handleClick() {
-    const delta = this.direction === "back" ? -this.seconds : this.seconds;
+    const delta = (this.direction === "back" ? -this.seconds : this.seconds) * 1000;
     this._player?.pc?.seekBy(delta);
   }
 

package/src/components/fw-dev-mode-panel.ts

@@ -717,7 +717,9 @@ export class FwDevModePanel extends LitElement {
             : html`
                 ${allCombinations.map((combo, index) => {
                   const isCodecIncompatible = combo.codecIncompatible === true;
-                  if (!combo.compatible && !isCodecIncompatible && !this._showDisabledPlayers) {
+                  const isPartial = ((combo as any).missingTracks?.length ?? 0) > 0;
+                  const isWarn = isCodecIncompatible || isPartial;
+                  if (!combo.compatible && !isWarn && !this._showDisabledPlayers) {
                     return nothing;
                   }
 
@@ -726,9 +728,9 @@ export class FwDevModePanel extends LitElement {
                     SOURCE_TYPE_LABELS[combo.sourceType] || combo.sourceType.split("/").pop();
 
                   const scoreClass =
-                    !combo.compatible && !isCodecIncompatible
+                    !combo.compatible && !isWarn
                       ? "fw-dev-combo-score--disabled"
-                      : isCodecIncompatible
+                      : isWarn
                         ? "fw-dev-combo-score--low"
                         : combo.score >= 2
                           ? "fw-dev-combo-score--high"
@@ -738,16 +740,16 @@ export class FwDevModePanel extends LitElement {
 
                   const rankClass = isActive
                     ? "fw-dev-combo-rank--active"
-                    : !combo.compatible && !isCodecIncompatible
+                    : !combo.compatible && !isWarn
                       ? "fw-dev-combo-rank--disabled"
-                      : isCodecIncompatible
+                      : isWarn
                         ? "fw-dev-combo-rank--warn"
                         : "";
 
                   const typeClass =
-                    !combo.compatible && !isCodecIncompatible
+                    !combo.compatible && !isWarn
                       ? "fw-dev-combo-type--disabled"
-                      : isCodecIncompatible
+                      : isWarn
                         ? "fw-dev-combo-type--warn"
                         : "";
 
@@ -766,8 +768,8 @@ export class FwDevModePanel extends LitElement {
                         class=${classMap({
                           "fw-dev-combo-btn": true,
                           "fw-dev-combo-btn--active": isActive,
-                          "fw-dev-combo-btn--disabled": !combo.compatible && !isCodecIncompatible,
-                          "fw-dev-combo-btn--codec-warn": isCodecIncompatible,
+                          "fw-dev-combo-btn--disabled": !combo.compatible && !isWarn,
+                          "fw-dev-combo-btn--codec-warn": isWarn,
                         })}
                         @click=${() => this._handleSelectCombo(index)}
                       >
@@ -776,9 +778,9 @@ export class FwDevModePanel extends LitElement {
                             "fw-dev-combo-rank": true,
                             [rankClass]: rankClass.length > 0,
                           })}
-                          >${combo.compatible
+                          >${combo.compatible && !isPartial
                             ? index + 1
-                            : isCodecIncompatible
+                            : isWarn
                               ? "\u26A0"
                               : "\u2014"}</span
                         >
@@ -822,6 +824,14 @@ export class FwDevModePanel extends LitElement {
                                   : nothing}
                               </div>
 
+                              ${combo.note
+                                ? html`<div class="fw-dev-tooltip-note">${combo.note}</div>`
+                                : nothing}
+                              ${isPartial
+                                ? html`<div class="fw-dev-tooltip-note">
+                                    No compatible ${(combo as any).missingTracks.join(", ")} codec
+                                  </div>`
+                                : nothing}
                               ${combo.compatible && combo.scoreBreakdown
                                 ? html`
                                     <div class="fw-dev-tooltip-score">

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

@@ -169,13 +169,16 @@ export class FwPlayerControls extends LitElement {
   };
 
   private _deriveBufferWindowMs(
-    tracks?: Record<string, { firstms?: number; lastms?: number }>
+    tracks?: Record<string, { type?: string; firstms?: number; lastms?: number }>
   ): number | undefined {
     if (!tracks) {
       return undefined;
     }
 
-    const trackValues = Object.values(tracks);
+    // Filter out meta tracks and tracks with lastms <= 0 (same as PlayerController)
+    const trackValues = Object.values(tracks).filter(
+      (t) => t.type !== "meta" && (t.lastms === undefined || t.lastms > 0)
+    );
     if (trackValues.length === 0) {
       return undefined;
     }
@@ -191,8 +194,8 @@ export class FwPlayerControls extends LitElement {
       return undefined;
     }
 
-    const firstms = Math.max(...firstmsValues);
-    const lastms = Math.min(...lastmsValues);
+    const firstms = Math.min(...firstmsValues);
+    const lastms = Math.max(...lastmsValues);
     const window = lastms - firstms;
 
     if (!Number.isFinite(window) || window <= 0) {
@@ -213,7 +216,7 @@ export class FwPlayerControls extends LitElement {
       mistStreamInfo?.meta?.buffer_window ??
       this._deriveBufferWindowMs(
         mistStreamInfo?.meta?.tracks as
-          | Record<string, { firstms?: number; lastms?: number }>
+          | Record<string, { type?: string; firstms?: number; lastms?: number }>
           | undefined
       );
 
@@ -386,7 +389,7 @@ export class FwPlayerControls extends LitElement {
                         class="fw-btn-flush hidden sm:flex"
                         ?disabled=${disabled}
                         aria-label=${this.pc.t("skipBackward")}
-                        @click=${() => this.pc.seekBy(-10)}
+                        @click=${() => this.pc.seekBy(-10000)}
                       >
                         ${skipBackIcon(16)}
                       </button>
@@ -395,7 +398,7 @@ export class FwPlayerControls extends LitElement {
                         class="fw-btn-flush hidden sm:flex"
                         ?disabled=${disabled}
                         aria-label=${this.pc.t("skipForward")}
-                        @click=${() => this.pc.seekBy(10)}
+                        @click=${() => this.pc.seekBy(10000)}
                       >
                         ${skipForwardIcon(16)}
                       </button>

package/src/components/fw-player.ts

@@ -33,7 +33,7 @@ export class FwPlayer extends LitElement {
   @property({ attribute: "mist-url" }) mistUrl?: string;
   @property({ attribute: "auth-token" }) authToken?: string;
   @property({ type: Boolean }) autoplay = true;
-  @property({ type: Boolean }) muted = true;
+  @property({ type: Boolean }) muted = false;
   // React/Svelte use `stockControls` for native controls. Keep `controls` as a
   // compatibility no-op so WC parity does not hide custom controls/seekbar.
   @property({ type: Boolean }) controls = false;
@@ -765,7 +765,7 @@ export class FwPlayer extends LitElement {
                       >
                         ${this.pc.t("retry")}
                       </button>
-                      ${this.pc.canAttemptFallback()
+                      ${this.devMode && this.pc.canAttemptFallback()
                         ? html`
                             <button
                               type="button"
@@ -780,17 +780,21 @@ export class FwPlayer extends LitElement {
                             </button>
                           `
                         : nothing}
-                      <button
-                        type="button"
-                        class="fw-error-btn fw-error-btn--secondary"
-                        aria-label=${this.pc.t("reloadPlayer")}
-                        @click=${() => {
-                          this.pc.clearError();
-                          this.pc.reload();
-                        }}
-                      >
-                        ${this.pc.t("reloadPlayer")}
-                      </button>
+                      ${this.devMode
+                        ? html`
+                            <button
+                              type="button"
+                              class="fw-error-btn fw-error-btn--secondary"
+                              aria-label=${this.pc.t("reloadPlayer")}
+                              @click=${() => {
+                                this.pc.clearError();
+                                this.pc.reload();
+                              }}
+                            >
+                              ${this.pc.t("reloadPlayer")}
+                            </button>
+                          `
+                        : nothing}
                     </div>
                   </div>
                 </div>

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

@@ -108,8 +108,9 @@ export class FwSeekBar extends LitElement {
 
     const segments: BufferedSegment[] = [];
     for (let i = 0; i < buffered.length; i += 1) {
-      const start = buffered.start(i);
-      const end = buffered.end(i);
+      // buffered TimeRanges are in seconds (browser API), convert to ms
+      const start = buffered.start(i) * 1000;
+      const end = buffered.end(i) * 1000;
       const relativeStart = start - rangeStart;
       const relativeEnd = end - rangeStart;
 
@@ -122,12 +123,12 @@ export class FwSeekBar extends LitElement {
     return segments;
   }
 
-  private _formatTime(seconds: number): string {
-    if (!Number.isFinite(seconds) || seconds < 0) {
+  private _formatTime(ms: number): string {
+    if (!Number.isFinite(ms) || ms < 0) {
       return "0:00";
     }
 
-    const total = Math.floor(seconds);
+    const total = Math.floor(ms / 1000);
     const hours = Math.floor(total / 3600);
     const minutes = Math.floor((total % 3600) / 60);
     const secs = total % 60;
@@ -139,13 +140,13 @@ export class FwSeekBar extends LitElement {
     return `${minutes}:${String(secs).padStart(2, "0")}`;
   }
 
-  private _formatLiveTime(seconds: number, edge: number): string {
-    const behindSeconds = edge - seconds;
-    if (behindSeconds < 1) {
+  private _formatLiveTime(ms: number, edgeMs: number): string {
+    const behindMs = edgeMs - ms;
+    if (behindMs < 1000) {
       return "LIVE";
     }
 
-    const total = Math.floor(behindSeconds);
+    const total = Math.floor(behindMs / 1000);
     const hours = Math.floor(total / 3600);
     const minutes = Math.floor((total % 3600) / 60);
     const secs = total % 60;
@@ -218,7 +219,7 @@ export class FwSeekBar extends LitElement {
       return;
     }
 
-    const step = event.shiftKey ? 10 : 5;
+    const step = event.shiftKey ? 10000 : 5000;
     const rawRangeEnd = this.isLive ? this._effectiveLiveEdge : this.duration;
     const rangeEnd = Number.isFinite(rawRangeEnd) ? rawRangeEnd : this.currentTime + step;
     const rangeStart = this.isLive ? this.seekableStart : 0;
@@ -380,6 +381,13 @@ export class FwSeekBar extends LitElement {
             `
           )}
           <div class="fw-seek-progress" style=${styleMap({ width: `${progressPercent}%` })}></div>
+          ${this._hovering && !this._dragging
+            ? html`<div
+                class="fw-seek-hover-line"
+                style=${styleMap({ left: `${this._hoverPosition}%` })}
+              ></div>`
+            : nothing}
+          ${this.isLive ? html`<div class="fw-seek-live-edge"></div>` : nothing}
         </div>
 
         <div

package/src/components/fw-subtitle-renderer.ts

@@ -179,7 +179,7 @@ export class FwSubtitleRenderer extends LitElement {
       return;
     }
 
-    const currentTimeMs = this.currentTime * 1000;
+    const currentTimeMs = this.currentTime;
     const activeCue = this._getAllCues().find(
       (cue) => currentTimeMs >= cue.startTime && currentTimeMs < cue.endTime
     );
@@ -195,7 +195,7 @@ export class FwSubtitleRenderer extends LitElement {
       return;
     }
 
-    const currentTimeMs = this.currentTime * 1000;
+    const currentTimeMs = this.currentTime;
     const filtered = this._liveCues.filter((cue) => {
       const endTime = cue.endTime === Infinity ? cue.startTime + 10000 : cue.endTime;
       return endTime >= currentTimeMs - 30000;

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

@@ -73,7 +73,7 @@ const initialState: PlayerControllerHostState = {
   isPlaying: false,
   isPaused: true,
   isBuffering: false,
-  isMuted: true,
+  isMuted: false,
   volume: 1,
   error: null,
   errorDetails: null,
@@ -209,7 +209,10 @@ export class PlayerControllerHost implements ReactiveController {
 
     u.push(
       controller.on("stateChange", ({ state }) => {
-        this.update({ state });
+        this.update({
+          state,
+          shouldShowIdleScreen: controller.shouldShowIdleScreen(),
+        });
         this.dispatchEvent("fw-state-change", { state });
       })
     );
@@ -249,6 +252,7 @@ export class PlayerControllerHost implements ReactiveController {
         this.update({
           error,
           isPassiveError: controller.isPassiveError(),
+          shouldShowIdleScreen: controller.shouldShowIdleScreen(),
         });
         this.dispatchEvent("fw-error", { error });
       })

package/src/styles/shared-styles.ts

@@ -803,15 +803,16 @@ export const sharedStyles = css`
     position: absolute;
     left: 0;
     right: 0;
-    height: 4px;
+    height: 3px;
     border-radius: 9999px;
     background: hsl(var(--fw-text-faint) / 0.4);
     transition: height 0.15s ease;
   }
 
   .fw-seek-wrapper:hover .fw-seek-track,
+  .fw-seek-root:hover .fw-seek-track,
   .fw-seek-track--active {
-    height: 6px;
+    height: 8px;
   }
 
   .fw-seek-buffered {
@@ -819,7 +820,9 @@ export const sharedStyles = css`
     height: 100%;
     border-radius: 9999px;
     background: hsl(var(--fw-text) / 0.3);
-    transition: all 0.2s ease;
+    transition:
+      left 0.2s ease,
+      width 0.2s ease;
   }
 
   .fw-seek-progress {
@@ -827,7 +830,29 @@ export const sharedStyles = css`
     height: 100%;
     border-radius: 9999px;
     background: hsl(var(--fw-accent));
-    transition: width 0.1s linear;
+    will-change: width;
+  }
+
+  .fw-seek-hover-line {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    width: 2px;
+    background: hsl(var(--fw-text) / 0.5);
+    transform: translateX(-50%);
+    pointer-events: none;
+    border-radius: 1px;
+  }
+
+  .fw-seek-live-edge {
+    position: absolute;
+    top: -2px;
+    bottom: -2px;
+    right: 0;
+    width: 3px;
+    background: hsl(var(--fw-accent));
+    border-radius: 1px;
+    opacity: 0.7;
   }
 
   .fw-seek-thumb {
@@ -847,6 +872,7 @@ export const sharedStyles = css`
   }
 
   .fw-seek-wrapper:hover .fw-seek-thumb,
+  .fw-seek-root:hover .fw-seek-thumb,
   .fw-seek-thumb--active {
     opacity: 1;
     transform: translate(-50%, -50%) scale(1);
@@ -1863,6 +1889,16 @@ export const sharedStyles = css`
     margin-top: 0.25rem;
   }
 
+  .fw-dev-tooltip-note {
+    color: hsl(var(--fw-text-muted));
+    font-style: italic;
+    font-size: 0.75rem;
+    margin: 0.25rem 0;
+    line-height: 1.3;
+    white-space: normal;
+    overflow-wrap: break-word;
+  }
+
   .fw-dev-tooltip-value {
     color: hsl(var(--fw-text));
   }