@livepeer-frameworks/player-wc 0.1.8 → 0.1.9

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

@@ -3,7 +3,7 @@
  * Parity port of React/Svelte control behavior.
  */
 import { LitElement, html, css, nothing, type PropertyValues } from "lit";
-import { customElement, property, state } from "lit/decorators.js";
+import { customElement, property, query, 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";
@@ -55,6 +55,7 @@ export class FwPlayerControls extends LitElement {
   @state() private _settingsOpen = false;
   @state() private _isNearLiveState = true;
   @state() private _buffered: TimeRanges | null = null;
+  @query(".fw-settings-anchor") private _settingsAnchorEl!: HTMLElement | null;
 
   private _boundVideo: HTMLVideoElement | null = null;
   private _onBufferedUpdate: (() => void) | null = null;
@@ -150,15 +151,15 @@ export class FwPlayerControls extends LitElement {
 
   private _onWindowClick = (event: MouseEvent): void => {
     const path = event.composedPath();
-    const insideControls = path.some((entry) => {
-      if (!(entry instanceof HTMLElement)) {
-        return false;
-      }
-      return (
-        entry.classList.contains("fw-settings-anchor") ||
-        entry.classList.contains("fw-settings-menu")
-      );
-    });
+    const anchor = this._settingsAnchorEl;
+    const insideControls =
+      anchor !== null &&
+      path.some((entry) => {
+        if (!(entry instanceof Node)) {
+          return false;
+        }
+        return anchor.contains(entry);
+      });
 
     if (!insideControls) {
       this._settingsOpen = false;
@@ -331,6 +332,7 @@ export class FwPlayerControls extends LitElement {
       seekableStart: context.seekableStart,
       unixoffset: context.mistStreamInfo?.unixoffset,
     });
+    const showTimeDisplay = !(context.isLive && timeDisplay === "LIVE");
 
     const liveButtonDisabled = !context.hasDvrWindow || this._isNearLiveState;
 
@@ -404,10 +406,13 @@ export class FwPlayerControls extends LitElement {
                 <fw-volume-control .pc=${this.pc}></fw-volume-control>
               </div>
 
-              <div class="fw-control-group">
-                <span class="fw-time-display">${timeDisplay}</span>
-              </div>
-
+              ${showTimeDisplay
+                ? html`
+                    <div class="fw-control-group">
+                      <span class="fw-time-display">${timeDisplay}</span>
+                    </div>
+                  `
+                : nothing}
               ${context.isLive
                 ? html`
                     <div class="fw-control-group">
@@ -472,7 +477,8 @@ export class FwPlayerControls extends LitElement {
                   aria-label="Settings"
                   title="Settings"
                   ?disabled=${disabled}
-                  @click=${() => {
+                  @click=${(event: MouseEvent) => {
+                    event.stopPropagation();
                     if (disabled) {
                       return;
                     }
@@ -489,6 +495,7 @@ export class FwPlayerControls extends LitElement {
                   .open=${this._settingsOpen}
                   .playbackMode=${this.playbackMode}
                   .isContentLive=${this.isContentLive}
+                  @click=${(event: MouseEvent) => event.stopPropagation()}
                   @fw-close=${() => {
                     this._settingsOpen = false;
                   }}

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 {
@@ -106,6 +115,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 +205,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 +240,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();