@livepeer-frameworks/player-wc 0.1.8 → 0.2.1

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

@@ -15,9 +15,11 @@ export class FwVolumeControl extends LitElement {
 
   @state() private _hovered = false;
   @state() private _focused = false;
+  @state() private _dragging = false;
   @state() private _hasAudio = true;
 
   private _activePointerId: number | null = null;
+  private _activeSliderTarget: HTMLElement | null = null;
 
   static styles = [
     sharedStyles,
@@ -34,6 +36,8 @@ export class FwVolumeControl extends LitElement {
         background: rgb(255 255 255 / 0.2);
         border-radius: 9999px;
         cursor: pointer;
+        touch-action: none;
+        user-select: none;
       }
 
       .slider-fill {
@@ -59,7 +63,12 @@ export class FwVolumeControl extends LitElement {
   ];
 
   private get _expanded(): boolean {
-    return this._hovered || this._focused;
+    return this._hovered || this._focused || this._dragging;
+  }
+
+  disconnectedCallback(): void {
+    super.disconnectedCallback();
+    this._endDragInteraction();
   }
 
   protected updated(): void {
@@ -67,6 +76,13 @@ export class FwVolumeControl extends LitElement {
   }
 
   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;
+    }
+
     const video = this.pc?.s.videoElement;
     if (!video) {
       this._hasAudio = true;
@@ -106,6 +122,89 @@ export class FwVolumeControl extends LitElement {
     }
   }
 
+  private _beginDragInteraction(target: HTMLElement, pointerId: number): void {
+    this._activePointerId = pointerId;
+    this._activeSliderTarget = target;
+    this._dragging = true;
+    this._hovered = true;
+    this._focused = true;
+
+    try {
+      target.setPointerCapture(pointerId);
+    } catch {
+      // Non-fatal: we still listen on window as a fallback.
+    }
+
+    window.addEventListener("pointermove", this._onGlobalPointerMove);
+    window.addEventListener("pointerup", this._onGlobalPointerUp);
+    window.addEventListener("pointercancel", this._onGlobalPointerUp);
+  }
+
+  private _endDragInteraction(): void {
+    const pointerId = this._activePointerId;
+    const target = this._activeSliderTarget;
+    if (pointerId != null && target) {
+      try {
+        if (target.hasPointerCapture(pointerId)) {
+          target.releasePointerCapture(pointerId);
+        }
+      } catch {
+        // Ignore pointer-capture release errors.
+      }
+    }
+
+    this._activePointerId = null;
+    this._activeSliderTarget = null;
+    this._dragging = false;
+    window.removeEventListener("pointermove", this._onGlobalPointerMove);
+    window.removeEventListener("pointerup", this._onGlobalPointerUp);
+    window.removeEventListener("pointercancel", this._onGlobalPointerUp);
+  }
+
+  private _onGlobalPointerMove = (event: PointerEvent): void => {
+    if (!this._dragging || this._activePointerId !== event.pointerId) {
+      return;
+    }
+    const target = this._activeSliderTarget;
+    if (!target) {
+      return;
+    }
+    this._setVolumeFromClientX(event.clientX, target);
+  };
+
+  private _onGlobalPointerUp = (event: PointerEvent): void => {
+    if (!this._dragging || this._activePointerId !== event.pointerId) {
+      return;
+    }
+    this._endDragInteraction();
+  };
+
+  private _handleMouseEnter = (): void => {
+    this._hovered = true;
+  };
+
+  private _handleMouseLeave = (): void => {
+    if (this._dragging) {
+      return;
+    }
+    this._hovered = false;
+    this._focused = false;
+  };
+
+  private _handleFocusIn = (): void => {
+    this._focused = true;
+  };
+
+  private _handleFocusOut = (event: FocusEvent): void => {
+    if (this._dragging) {
+      return;
+    }
+    const related = event.relatedTarget as Node | null;
+    if (!related || !this.renderRoot.contains(related)) {
+      this._focused = false;
+    }
+  };
+
   private _onSliderPointerDown = (event: PointerEvent) => {
     if (!this._hasAudio) {
       return;
@@ -113,30 +212,8 @@ export class FwVolumeControl extends LitElement {
 
     event.preventDefault();
     const target = event.currentTarget as HTMLElement;
-    this._activePointerId = event.pointerId;
+    this._beginDragInteraction(target, event.pointerId);
     this._setVolumeFromClientX(event.clientX, target);
-
-    const onMove = (moveEvent: PointerEvent) => {
-      if (this._activePointerId !== moveEvent.pointerId) {
-        return;
-      }
-      this._setVolumeFromClientX(moveEvent.clientX, target);
-    };
-
-    const onUp = (upEvent: PointerEvent) => {
-      if (this._activePointerId !== upEvent.pointerId) {
-        return;
-      }
-
-      this._activePointerId = null;
-      window.removeEventListener("pointermove", onMove);
-      window.removeEventListener("pointerup", onUp);
-      window.removeEventListener("pointercancel", onUp);
-    };
-
-    window.addEventListener("pointermove", onMove);
-    window.addEventListener("pointerup", onUp);
-    window.addEventListener("pointercancel", onUp);
   };
 
   private _onWheel = (event: WheelEvent) => {
@@ -170,22 +247,10 @@ export class FwVolumeControl extends LitElement {
         })}
         role="group"
         aria-label="Volume controls"
-        @mouseenter=${() => {
-          this._hovered = true;
-        }}
-        @mouseleave=${() => {
-          this._hovered = false;
-          this._focused = false;
-        }}
-        @focusin=${() => {
-          this._focused = true;
-        }}
-        @focusout=${(event: FocusEvent) => {
-          const related = event.relatedTarget as Node | null;
-          if (!related || !this.renderRoot.contains(related)) {
-            this._focused = false;
-          }
-        }}
+        @mouseenter=${this._handleMouseEnter}
+        @mouseleave=${this._handleMouseLeave}
+        @focusin=${this._handleFocusIn}
+        @focusout=${this._handleFocusOut}
         @click=${(event: MouseEvent) => {
           if (this._hasAudio && event.target === event.currentTarget) {
             this.pc.toggleMute();
@@ -202,8 +267,12 @@ export class FwVolumeControl extends LitElement {
             }
           }}
           ?disabled=${!this._hasAudio}
-          aria-label=${!this._hasAudio ? "No audio" : isMuted ? "Unmute" : "Mute"}
-          title=${!this._hasAudio ? "No audio" : isMuted ? "Unmute" : "Mute"}
+          aria-label=${!this._hasAudio
+            ? "No audio"
+            : isMuted
+              ? this.pc.t("unmute")
+              : this.pc.t("mute")}
+          title=${!this._hasAudio ? "No audio" : isMuted ? this.pc.t("unmute") : this.pc.t("mute")}
         >
           ${isMuted || !this._hasAudio ? volumeOffIcon(16) : volumeUpIcon(16)}
         </button>
@@ -218,7 +287,7 @@ export class FwVolumeControl extends LitElement {
           <div
             class="slider"
             role="slider"
-            aria-label="Volume"
+            aria-label=${this.pc.t("volume")}
             aria-valuemin="0"
             aria-valuemax="100"
             aria-valuenow=${Math.round(displayVolume * 100)}

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

@@ -5,6 +5,7 @@
 import type { ReactiveController, ReactiveControllerHost } from "lit";
 import {
   PlayerController,
+  createTranslator,
   type PlayerControllerConfig,
   type PlayerState,
   type StreamState,
@@ -13,6 +14,8 @@ import {
   type ContentEndpoints,
   type ContentMetadata,
   type ClassifiedError,
+  type TranslateFn,
+  type I18nConfig,
 } from "@livepeer-frameworks/player-core";
 
 export interface PlayerControllerHostState {
@@ -105,11 +108,20 @@ export class PlayerControllerHost implements ReactiveController {
 
   s: PlayerControllerHostState = { ...initialState };
 
+  /** Translation function, updated when locale changes. */
+  t: TranslateFn = createTranslator({ locale: "en" });
+
   constructor(host: HostElement) {
     this.host = host;
     host.addController(this);
   }
 
+  /** Rebuild the translator when locale or custom translations change. */
+  updateTranslator(config: I18nConfig) {
+    this.t = createTranslator(config);
+    this.host.requestUpdate();
+  }
+
   // ---- Configuration & Lifecycle ----
 
   configure(config: PlayerControllerConfig) {
@@ -434,6 +446,12 @@ export class PlayerControllerHost implements ReactiveController {
   async retry() {
     await this.controller?.retry();
   }
+  async tryNextSource() {
+    await this.controller?.retryWithFallback();
+  }
+  canAttemptFallback(): boolean {
+    return this.controller?.canAttemptFallback() ?? false;
+  }
   async reload() {
     await this.controller?.reload();
   }

package/src/index.ts

@@ -30,6 +30,16 @@ export { FwSkipIndicator } from "./components/fw-skip-indicator.js";
 export { FwSpeedIndicator } from "./components/fw-speed-indicator.js";
 export { FwContextMenu } from "./components/fw-context-menu.js";
 
+// Composable control elements
+export {
+  FwPlayButton,
+  FwSkipButton,
+  FwVolumeControl as FwVolumeButton,
+  FwTimeDisplay,
+  FwLiveBadge,
+  FwFullscreenButton,
+} from "./components/controls/index.js";
+
 // Controller
 export { PlayerControllerHost } from "./controllers/player-controller-host.js";
 export type { PlayerControllerHostState } from "./controllers/player-controller-host.js";