@livepeer-frameworks/player-wc 0.2.9 → 0.2.11

package/dist/types/components/fw-volume-control.d.ts

@@ -11,10 +11,13 @@ export declare class FwVolumeControl extends LitElement {
     private _hasAudio;
     private _activePointerId;
     private _activeSliderTarget;
+    private _boundStream;
+    private _onStreamTrackChange;
     static styles: import("lit").CSSResult[];
     private get _expanded();
     disconnectedCallback(): void;
     protected updated(): void;
+    private _unbindStreamListeners;
     private _updateHasAudio;
     private _setVolumeFromClientX;
     private _beginDragInteraction;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@livepeer-frameworks/player-wc",
-  "version": "0.2.9",
+  "version": "0.2.11",
   "type": "module",
   "description": "Lit Web Components for FrameWorks streaming player — <fw-player> custom element with full UI",
   "main": "dist/esm/index.js",
@@ -26,7 +26,7 @@
   },
   "dependencies": {
     "lit": "^3.3.2",
-    "@livepeer-frameworks/player-core": "0.2.3"
+    "@livepeer-frameworks/player-core": "0.2.5"
   },
   "devDependencies": {
     "@rollup/plugin-commonjs": "^29.0.0",
@@ -34,7 +34,7 @@
     "@rollup/plugin-terser": "^0.4.4",
     "@rollup/plugin-typescript": "^12.3.0",
     "@vitest/coverage-v8": "^4.0.18",
-    "rollup": "^4.57.1",
+    "rollup": "^4.59.0",
     "tslib": "^2.8.1",
     "typescript": "^5.9.3",
     "vitest": "^4.0.18"

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

@@ -223,11 +223,7 @@ export class FwPlayerControls extends LitElement {
     const isWebRTC = isMediaStreamSource(state.videoElement);
 
     const allowMediaStreamDvr =
-      isMediaStreamSource(state.videoElement) &&
-      bufferWindowMs !== undefined &&
-      bufferWindowMs > 0 &&
-      sourceType !== "whep" &&
-      sourceType !== "webrtc";
+      isMediaStreamSource(state.videoElement) && bufferWindowMs !== undefined && bufferWindowMs > 0;
 
     const calculatedRange = calculateSeekableRange({
       isLive,

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

@@ -11,6 +11,7 @@ import {
   supportsPlaybackRate as coreSupportsPlaybackRate,
   getAvailableLocales,
   getLocaleDisplayName,
+  formatQualityLabel,
 } from "@livepeer-frameworks/player-core";
 import type { PlaybackMode, FwLocale } from "@livepeer-frameworks/player-core";
 import type { PlayerControllerHost } from "../controllers/player-controller-host.js";
@@ -152,7 +153,7 @@ export class FwSettingsMenu extends LitElement {
       .filter(([, track]) => track?.type === "video")
       .map(([id, track]) => ({
         id,
-        label: track.height ? `${track.height}p` : (track.codec ?? id),
+        label: formatQualityLabel(track.width, track.height, track.bps),
         width: track.width,
         height: track.height,
         bitrate: track.bps,

package/src/components/fw-volume-control.ts

@@ -20,6 +20,8 @@ export class FwVolumeControl extends LitElement {
 
   private _activePointerId: number | null = null;
   private _activeSliderTarget: HTMLElement | null = null;
+  private _boundStream: MediaStream | null = null;
+  private _onStreamTrackChange: (() => void) | null = null;
 
   static styles = [
     sharedStyles,
@@ -69,28 +71,52 @@ export class FwVolumeControl extends LitElement {
   disconnectedCallback(): void {
     super.disconnectedCallback();
     this._endDragInteraction();
+    this._unbindStreamListeners();
   }
 
   protected updated(): void {
     this._updateHasAudio();
   }
 
-  private _updateHasAudio(): void {
-    // Primary: trust MistServer stream metadata (matches ddvtech embed approach)
-    const mistHasAudio = this.pc?.s.streamState?.streamInfo?.hasAudio;
-    if (mistHasAudio !== undefined) {
-      this._hasAudio = mistHasAudio;
-      return;
+  private _unbindStreamListeners(): void {
+    if (this._boundStream && this._onStreamTrackChange) {
+      this._boundStream.removeEventListener("addtrack", this._onStreamTrackChange);
+      this._boundStream.removeEventListener("removetrack", this._onStreamTrackChange);
     }
+    this._boundStream = null;
+    this._onStreamTrackChange = null;
+  }
 
+  private _updateHasAudio(): void {
     const video = this.pc?.s.videoElement;
     if (!video) {
+      this._unbindStreamListeners();
       this._hasAudio = true;
       return;
     }
 
+    // MediaStream: bind track change listeners (WebRTC tracks arrive async)
     if (video.srcObject instanceof MediaStream) {
-      this._hasAudio = video.srcObject.getAudioTracks().length > 0;
+      const stream = video.srcObject;
+      if (stream !== this._boundStream) {
+        this._unbindStreamListeners();
+        this._boundStream = stream;
+        this._onStreamTrackChange = () => {
+          this._hasAudio = stream.getAudioTracks().length > 0;
+        };
+        stream.addEventListener("addtrack", this._onStreamTrackChange);
+        stream.addEventListener("removetrack", this._onStreamTrackChange);
+      }
+      this._hasAudio = stream.getAudioTracks().length > 0;
+      return;
+    }
+
+    this._unbindStreamListeners();
+
+    // Fallback: metadata for non-MediaStream sources.
+    const mistHasAudio = this.pc?.s.streamState?.streamInfo?.hasAudio;
+    if (mistHasAudio !== undefined) {
+      this._hasAudio = mistHasAudio;
       return;
     }