@livepeer-frameworks/player-wc 0.1.8 → 0.1.9

package/dist/esm/components/fw-player-controls.js.map

@@ -1 +1 @@
-{"version":3,"file":"fw-player-controls.js","sources":["../../../../src/components/fw-player-controls.ts"],"sourcesContent":["/**\n * <fw-player-controls> — Player controls with seek, volume, live state, and settings.\n * Parity port of React/Svelte control behavior.\n */\nimport { LitElement, html, css, nothing, type PropertyValues } from \"lit\";\nimport { customElement, property, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { sharedStyles } from \"../styles/shared-styles.js\";\nimport { utilityStyles } from \"../styles/utility-styles.js\";\nimport {\n  playIcon,\n  pauseIcon,\n  fullscreenIcon,\n  fullscreenExitIcon,\n  settingsIcon,\n  seekToLiveIcon,\n  skipBackIcon,\n  skipForwardIcon,\n  statsIcon,\n} from \"../icons/index.js\";\nimport {\n  calculateIsNearLive,\n  calculateLiveThresholds,\n  calculateSeekableRange,\n  canSeekStream,\n  formatTimeDisplay,\n  isLiveContent,\n  isMediaStreamSource,\n  type MistStreamInfo,\n  type PlaybackMode,\n} from \"@livepeer-frameworks/player-core\";\nimport type { PlayerControllerHost } from \"../controllers/player-controller-host.js\";\n\ninterface SeekingContext {\n  mistStreamInfo?: MistStreamInfo;\n  isLive: boolean;\n  sourceType?: string;\n  seekableStart: number;\n  liveEdge: number;\n  hasDvrWindow: boolean;\n  canSeek: boolean;\n  commitOnRelease: boolean;\n  liveThresholds: ReturnType<typeof calculateLiveThresholds>;\n}\n\n@customElement(\"fw-player-controls\")\nexport class FwPlayerControls extends LitElement {\n  @property({ attribute: false }) pc!: PlayerControllerHost;\n  @property({ type: String }) playbackMode: PlaybackMode = \"auto\";\n  @property({ type: Boolean, attribute: \"is-content-live\" }) isContentLive = false;\n  @property({ type: Boolean, attribute: \"dev-mode\" }) devMode = false;\n  @property({ type: Boolean, attribute: \"show-stats-button\" }) showStatsButton = false;\n  @property({ type: Boolean, attribute: \"is-stats-open\" }) isStatsOpen = false;\n\n  @state() private _settingsOpen = false;\n  @state() private _isNearLiveState = true;\n  @state() private _buffered: TimeRanges | null = null;\n\n  private _boundVideo: HTMLVideoElement | null = null;\n  private _onBufferedUpdate: (() => void) | null = null;\n\n  static styles = [\n    sharedStyles,\n    utilityStyles,\n    css`\n      :host {\n        display: contents;\n      }\n\n      .fw-settings-anchor {\n        position: relative;\n      }\n    `,\n  ];\n\n  connectedCallback(): void {\n    super.connectedCallback();\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this._unbindVideoEvents();\n    this._detachWindowClickListener();\n  }\n\n  protected updated(changed: PropertyValues<this>): void {\n    this._bindVideoEvents();\n    this._reconcileNearLiveState();\n\n    if (changed.has(\"_settingsOpen\" as keyof FwPlayerControls)) {\n      if (this._settingsOpen) {\n        this._attachWindowClickListener();\n      } else {\n        this._detachWindowClickListener();\n      }\n    }\n  }\n\n  private _bindVideoEvents(): void {\n    const video = this.pc?.s.videoElement ?? null;\n    if (video === this._boundVideo) {\n      return;\n    }\n\n    this._unbindVideoEvents();\n    this._boundVideo = video;\n\n    if (!video) {\n      this._buffered = null;\n      return;\n    }\n\n    const updateBuffered = () => {\n      this._buffered = this.pc.getBufferedRanges() ?? video.buffered;\n    };\n\n    updateBuffered();\n    video.addEventListener(\"progress\", updateBuffered);\n    video.addEventListener(\"loadeddata\", updateBuffered);\n    this._onBufferedUpdate = updateBuffered;\n  }\n\n  private _unbindVideoEvents(): void {\n    if (!this._boundVideo) {\n      return;\n    }\n\n    const updateBuffered = this._onBufferedUpdate;\n    if (updateBuffered) {\n      this._boundVideo.removeEventListener(\"progress\", updateBuffered);\n      this._boundVideo.removeEventListener(\"loadeddata\", updateBuffered);\n    }\n\n    this._boundVideo = null;\n    this._onBufferedUpdate = null;\n  }\n\n  private _attachWindowClickListener(): void {\n    window.setTimeout(() => {\n      if (!this._settingsOpen) {\n        return;\n      }\n      window.addEventListener(\"click\", this._onWindowClick);\n    }, 0);\n  }\n\n  private _detachWindowClickListener(): void {\n    window.removeEventListener(\"click\", this._onWindowClick);\n  }\n\n  private _onWindowClick = (event: MouseEvent): void => {\n    const path = event.composedPath();\n    const insideControls = path.some((entry) => {\n      if (!(entry instanceof HTMLElement)) {\n        return false;\n      }\n      return (\n        entry.classList.contains(\"fw-settings-anchor\") ||\n        entry.classList.contains(\"fw-settings-menu\")\n      );\n    });\n\n    if (!insideControls) {\n      this._settingsOpen = false;\n    }\n  };\n\n  private _deriveBufferWindowMs(\n    tracks?: Record<string, { firstms?: number; lastms?: number }>\n  ): number | undefined {\n    if (!tracks) {\n      return undefined;\n    }\n\n    const trackValues = Object.values(tracks);\n    if (trackValues.length === 0) {\n      return undefined;\n    }\n\n    const firstmsValues = trackValues\n      .map((track) => track.firstms)\n      .filter((value): value is number => typeof value === \"number\");\n    const lastmsValues = trackValues\n      .map((track) => track.lastms)\n      .filter((value): value is number => typeof value === \"number\");\n\n    if (firstmsValues.length === 0 || lastmsValues.length === 0) {\n      return undefined;\n    }\n\n    const firstms = Math.max(...firstmsValues);\n    const lastms = Math.min(...lastmsValues);\n    const window = lastms - firstms;\n\n    if (!Number.isFinite(window) || window <= 0) {\n      return undefined;\n    }\n\n    return window;\n  }\n\n  private _getSeekingContext(): SeekingContext {\n    const state = this.pc.s;\n    const controller = this.pc.getController();\n    const sourceType = state.currentSourceInfo?.type;\n    const mistStreamInfo = state.streamState?.streamInfo as MistStreamInfo | undefined;\n\n    const isLive = isLiveContent(this.isContentLive, mistStreamInfo, state.duration);\n    const bufferWindowMs =\n      mistStreamInfo?.meta?.buffer_window ??\n      this._deriveBufferWindowMs(\n        mistStreamInfo?.meta?.tracks as\n          | Record<string, { firstms?: number; lastms?: number }>\n          | undefined\n      );\n\n    const isWebRTC = isMediaStreamSource(state.videoElement);\n\n    const allowMediaStreamDvr =\n      isMediaStreamSource(state.videoElement) &&\n      bufferWindowMs !== undefined &&\n      bufferWindowMs > 0 &&\n      sourceType !== \"whep\" &&\n      sourceType !== \"webrtc\";\n\n    const calculatedRange = calculateSeekableRange({\n      isLive,\n      video: state.videoElement,\n      mistStreamInfo,\n      currentTime: state.currentTime,\n      duration: state.duration,\n      allowMediaStreamDvr,\n    });\n\n    const controllerSeekableStart = this.pc.getSeekableStart();\n    const controllerLiveEdge = this.pc.getLiveEdge();\n\n    const useControllerRange =\n      Number.isFinite(controllerSeekableStart) &&\n      Number.isFinite(controllerLiveEdge) &&\n      controllerLiveEdge >= controllerSeekableStart &&\n      (controllerLiveEdge > 0 || controllerSeekableStart > 0);\n\n    const seekableStart = useControllerRange\n      ? controllerSeekableStart\n      : calculatedRange.seekableStart;\n    const liveEdge = useControllerRange ? controllerLiveEdge : calculatedRange.liveEdge;\n\n    const hasDvrWindow =\n      isLive &&\n      Number.isFinite(liveEdge) &&\n      Number.isFinite(seekableStart) &&\n      liveEdge > seekableStart;\n\n    const baseCanSeek =\n      controller?.canSeekStream?.() ??\n      canSeekStream({\n        video: state.videoElement,\n        isLive,\n        duration: state.duration,\n        bufferWindowMs,\n      });\n\n    const liveThresholds = calculateLiveThresholds(sourceType, isWebRTC, bufferWindowMs);\n\n    return {\n      mistStreamInfo,\n      isLive,\n      sourceType,\n      seekableStart,\n      liveEdge,\n      hasDvrWindow,\n      canSeek: baseCanSeek && (!isLive || hasDvrWindow),\n      commitOnRelease: isLive,\n      liveThresholds,\n    };\n  }\n\n  private _reconcileNearLiveState(): void {\n    const context = this._getSeekingContext();\n\n    if (!context.isLive) {\n      if (!this._isNearLiveState) {\n        this._isNearLiveState = true;\n      }\n      return;\n    }\n\n    const next = calculateIsNearLive(\n      this.pc.s.currentTime,\n      context.liveEdge,\n      context.liveThresholds,\n      this._isNearLiveState\n    );\n\n    if (next !== this._isNearLiveState) {\n      this._isNearLiveState = next;\n    }\n  }\n\n  private _handleModeChange(\n    event: CustomEvent<{ mode: \"auto\" | \"low-latency\" | \"quality\" }>\n  ): void {\n    const { mode } = event.detail;\n    this.dispatchEvent(\n      new CustomEvent(\"fw-mode-change\", {\n        detail: { mode },\n        bubbles: true,\n        composed: true,\n      })\n    );\n  }\n\n  protected render() {\n    const state = this.pc.s;\n    const disabled = !state.videoElement;\n    const context = this._getSeekingContext();\n    const shouldShowControls =\n      state.shouldShowControls ||\n      state.isPaused ||\n      !state.hasPlaybackStarted ||\n      state.shouldShowIdleScreen ||\n      !!state.error ||\n      this._settingsOpen;\n\n    const timeDisplay = formatTimeDisplay({\n      isLive: context.isLive,\n      currentTime: state.currentTime,\n      duration: state.duration,\n      liveEdge: context.liveEdge,\n      seekableStart: context.seekableStart,\n      unixoffset: context.mistStreamInfo?.unixoffset,\n    });\n\n    const liveButtonDisabled = !context.hasDvrWindow || this._isNearLiveState;\n\n    return html`\n      <div\n        class=${classMap({\n          \"fw-player-surface\": true,\n          \"fw-controls-wrapper\": true,\n          \"fw-controls-wrapper--visible\": shouldShowControls,\n          \"fw-controls-wrapper--hidden\": !shouldShowControls,\n        })}\n      >\n        <div class=\"fw-control-bar\" @click=${(event: Event) => event.stopPropagation()}>\n          ${context.canSeek\n            ? html`\n                <div class=\"fw-seek-wrapper\">\n                  <fw-seek-bar\n                    .currentTime=${state.currentTime}\n                    .duration=${state.duration}\n                    .buffered=${this._buffered}\n                    .disabled=${disabled}\n                    .isLive=${context.isLive}\n                    .seekableStart=${context.seekableStart}\n                    .liveEdge=${context.liveEdge}\n                    .commitOnRelease=${context.commitOnRelease}\n                    @fw-seek=${(event: CustomEvent<{ time: number }>) =>\n                      this.pc.seek(event.detail.time)}\n                  ></fw-seek-bar>\n                </div>\n              `\n            : nothing}\n\n          <div class=\"fw-controls-row\">\n            <div class=\"fw-controls-left\">\n              <div class=\"fw-control-group\">\n                <button\n                  type=\"button\"\n                  class=\"fw-btn-flush\"\n                  ?disabled=${disabled}\n                  aria-label=${state.isPlaying ? \"Pause\" : \"Play\"}\n                  @click=${() => this.pc.togglePlay()}\n                >\n                  ${state.isPlaying ? pauseIcon(18) : playIcon(18)}\n                </button>\n\n                ${context.canSeek\n                  ? html`\n                      <button\n                        type=\"button\"\n                        class=\"fw-btn-flush hidden sm:flex\"\n                        ?disabled=${disabled}\n                        aria-label=\"Skip back 10 seconds\"\n                        @click=${() => this.pc.seekBy(-10)}\n                      >\n                        ${skipBackIcon(16)}\n                      </button>\n                      <button\n                        type=\"button\"\n                        class=\"fw-btn-flush hidden sm:flex\"\n                        ?disabled=${disabled}\n                        aria-label=\"Skip forward 10 seconds\"\n                        @click=${() => this.pc.seekBy(10)}\n                      >\n                        ${skipForwardIcon(16)}\n                      </button>\n                    `\n                  : nothing}\n              </div>\n\n              <div class=\"fw-control-group\">\n                <fw-volume-control .pc=${this.pc}></fw-volume-control>\n              </div>\n\n              <div class=\"fw-control-group\">\n                <span class=\"fw-time-display\">${timeDisplay}</span>\n              </div>\n\n              ${context.isLive\n                ? html`\n                    <div class=\"fw-control-group\">\n                      <button\n                        type=\"button\"\n                        @click=${() => this.pc.jumpToLive()}\n                        ?disabled=${liveButtonDisabled}\n                        class=${classMap({\n                          \"fw-live-badge\": true,\n                          \"fw-live-badge--active\": liveButtonDisabled,\n                          \"fw-live-badge--behind\": !liveButtonDisabled,\n                        })}\n                        title=${!context.hasDvrWindow\n                          ? \"Live only\"\n                          : this._isNearLiveState\n                            ? \"At live edge\"\n                            : \"Jump to live\"}\n                      >\n                        LIVE\n                        ${!this._isNearLiveState && context.hasDvrWindow\n                          ? seekToLiveIcon(10)\n                          : nothing}\n                      </button>\n                    </div>\n                  `\n                : nothing}\n            </div>\n\n            <div class=\"fw-controls-right\">\n              ${this.showStatsButton\n                ? html`\n                    <div class=\"fw-control-group\">\n                      <button\n                        type=\"button\"\n                        class=${classMap({\n                          \"fw-btn-flush\": true,\n                          \"fw-btn-flush--active\": this.isStatsOpen,\n                        })}\n                        aria-label=\"Toggle stats\"\n                        title=\"Stats\"\n                        @click=${() =>\n                          this.dispatchEvent(\n                            new CustomEvent(\"fw-stats-toggle\", {\n                              bubbles: true,\n                              composed: true,\n                            })\n                          )}\n                      >\n                        ${statsIcon(16)}\n                      </button>\n                    </div>\n                  `\n                : nothing}\n              <div class=\"fw-control-group fw-settings-anchor\">\n                <button\n                  type=\"button\"\n                  class=${classMap({\n                    \"fw-btn-flush\": true,\n                    group: true,\n                    \"fw-btn-flush--active\": this._settingsOpen,\n                  })}\n                  aria-label=\"Settings\"\n                  title=\"Settings\"\n                  ?disabled=${disabled}\n                  @click=${() => {\n                    if (disabled) {\n                      return;\n                    }\n                    this._settingsOpen = !this._settingsOpen;\n                  }}\n                >\n                  <span class=\"transition-transform group-hover:rotate-90\"\n                    >${settingsIcon(16)}</span\n                  >\n                </button>\n\n                <fw-settings-menu\n                  .pc=${this.pc}\n                  .open=${this._settingsOpen}\n                  .playbackMode=${this.playbackMode}\n                  .isContentLive=${this.isContentLive}\n                  @fw-close=${() => {\n                    this._settingsOpen = false;\n                  }}\n                  @fw-mode-change=${this._handleModeChange}\n                ></fw-settings-menu>\n              </div>\n\n              <div class=\"fw-control-group\">\n                <button\n                  type=\"button\"\n                  class=\"fw-btn-flush\"\n                  ?disabled=${disabled}\n                  aria-label=${state.isFullscreen ? \"Exit fullscreen\" : \"Fullscreen\"}\n                  @click=${() => this.pc.toggleFullscreen()}\n                >\n                  ${state.isFullscreen ? fullscreenExitIcon(16) : fullscreenIcon(16)}\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"fw-player-controls\": FwPlayerControls;\n  }\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"fw-player-controls.js","sources":["../../../../src/components/fw-player-controls.ts"],"sourcesContent":["/**\n * <fw-player-controls> — Player controls with seek, volume, live state, and settings.\n * Parity port of React/Svelte control behavior.\n */\nimport { LitElement, html, css, nothing, type PropertyValues } from \"lit\";\nimport { customElement, property, query, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { sharedStyles } from \"../styles/shared-styles.js\";\nimport { utilityStyles } from \"../styles/utility-styles.js\";\nimport {\n  playIcon,\n  pauseIcon,\n  fullscreenIcon,\n  fullscreenExitIcon,\n  settingsIcon,\n  seekToLiveIcon,\n  skipBackIcon,\n  skipForwardIcon,\n  statsIcon,\n} from \"../icons/index.js\";\nimport {\n  calculateIsNearLive,\n  calculateLiveThresholds,\n  calculateSeekableRange,\n  canSeekStream,\n  formatTimeDisplay,\n  isLiveContent,\n  isMediaStreamSource,\n  type MistStreamInfo,\n  type PlaybackMode,\n} from \"@livepeer-frameworks/player-core\";\nimport type { PlayerControllerHost } from \"../controllers/player-controller-host.js\";\n\ninterface SeekingContext {\n  mistStreamInfo?: MistStreamInfo;\n  isLive: boolean;\n  sourceType?: string;\n  seekableStart: number;\n  liveEdge: number;\n  hasDvrWindow: boolean;\n  canSeek: boolean;\n  commitOnRelease: boolean;\n  liveThresholds: ReturnType<typeof calculateLiveThresholds>;\n}\n\n@customElement(\"fw-player-controls\")\nexport class FwPlayerControls extends LitElement {\n  @property({ attribute: false }) pc!: PlayerControllerHost;\n  @property({ type: String }) playbackMode: PlaybackMode = \"auto\";\n  @property({ type: Boolean, attribute: \"is-content-live\" }) isContentLive = false;\n  @property({ type: Boolean, attribute: \"dev-mode\" }) devMode = false;\n  @property({ type: Boolean, attribute: \"show-stats-button\" }) showStatsButton = false;\n  @property({ type: Boolean, attribute: \"is-stats-open\" }) isStatsOpen = false;\n\n  @state() private _settingsOpen = false;\n  @state() private _isNearLiveState = true;\n  @state() private _buffered: TimeRanges | null = null;\n  @query(\".fw-settings-anchor\") private _settingsAnchorEl!: HTMLElement | null;\n\n  private _boundVideo: HTMLVideoElement | null = null;\n  private _onBufferedUpdate: (() => void) | null = null;\n\n  static styles = [\n    sharedStyles,\n    utilityStyles,\n    css`\n      :host {\n        display: contents;\n      }\n\n      .fw-settings-anchor {\n        position: relative;\n      }\n    `,\n  ];\n\n  connectedCallback(): void {\n    super.connectedCallback();\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this._unbindVideoEvents();\n    this._detachWindowClickListener();\n  }\n\n  protected updated(changed: PropertyValues<this>): void {\n    this._bindVideoEvents();\n    this._reconcileNearLiveState();\n\n    if (changed.has(\"_settingsOpen\" as keyof FwPlayerControls)) {\n      if (this._settingsOpen) {\n        this._attachWindowClickListener();\n      } else {\n        this._detachWindowClickListener();\n      }\n    }\n  }\n\n  private _bindVideoEvents(): void {\n    const video = this.pc?.s.videoElement ?? null;\n    if (video === this._boundVideo) {\n      return;\n    }\n\n    this._unbindVideoEvents();\n    this._boundVideo = video;\n\n    if (!video) {\n      this._buffered = null;\n      return;\n    }\n\n    const updateBuffered = () => {\n      this._buffered = this.pc.getBufferedRanges() ?? video.buffered;\n    };\n\n    updateBuffered();\n    video.addEventListener(\"progress\", updateBuffered);\n    video.addEventListener(\"loadeddata\", updateBuffered);\n    this._onBufferedUpdate = updateBuffered;\n  }\n\n  private _unbindVideoEvents(): void {\n    if (!this._boundVideo) {\n      return;\n    }\n\n    const updateBuffered = this._onBufferedUpdate;\n    if (updateBuffered) {\n      this._boundVideo.removeEventListener(\"progress\", updateBuffered);\n      this._boundVideo.removeEventListener(\"loadeddata\", updateBuffered);\n    }\n\n    this._boundVideo = null;\n    this._onBufferedUpdate = null;\n  }\n\n  private _attachWindowClickListener(): void {\n    window.setTimeout(() => {\n      if (!this._settingsOpen) {\n        return;\n      }\n      window.addEventListener(\"click\", this._onWindowClick);\n    }, 0);\n  }\n\n  private _detachWindowClickListener(): void {\n    window.removeEventListener(\"click\", this._onWindowClick);\n  }\n\n  private _onWindowClick = (event: MouseEvent): void => {\n    const path = event.composedPath();\n    const anchor = this._settingsAnchorEl;\n    const insideControls =\n      anchor !== null &&\n      path.some((entry) => {\n        if (!(entry instanceof Node)) {\n          return false;\n        }\n        return anchor.contains(entry);\n      });\n\n    if (!insideControls) {\n      this._settingsOpen = false;\n    }\n  };\n\n  private _deriveBufferWindowMs(\n    tracks?: Record<string, { firstms?: number; lastms?: number }>\n  ): number | undefined {\n    if (!tracks) {\n      return undefined;\n    }\n\n    const trackValues = Object.values(tracks);\n    if (trackValues.length === 0) {\n      return undefined;\n    }\n\n    const firstmsValues = trackValues\n      .map((track) => track.firstms)\n      .filter((value): value is number => typeof value === \"number\");\n    const lastmsValues = trackValues\n      .map((track) => track.lastms)\n      .filter((value): value is number => typeof value === \"number\");\n\n    if (firstmsValues.length === 0 || lastmsValues.length === 0) {\n      return undefined;\n    }\n\n    const firstms = Math.max(...firstmsValues);\n    const lastms = Math.min(...lastmsValues);\n    const window = lastms - firstms;\n\n    if (!Number.isFinite(window) || window <= 0) {\n      return undefined;\n    }\n\n    return window;\n  }\n\n  private _getSeekingContext(): SeekingContext {\n    const state = this.pc.s;\n    const controller = this.pc.getController();\n    const sourceType = state.currentSourceInfo?.type;\n    const mistStreamInfo = state.streamState?.streamInfo as MistStreamInfo | undefined;\n\n    const isLive = isLiveContent(this.isContentLive, mistStreamInfo, state.duration);\n    const bufferWindowMs =\n      mistStreamInfo?.meta?.buffer_window ??\n      this._deriveBufferWindowMs(\n        mistStreamInfo?.meta?.tracks as\n          | Record<string, { firstms?: number; lastms?: number }>\n          | undefined\n      );\n\n    const isWebRTC = isMediaStreamSource(state.videoElement);\n\n    const allowMediaStreamDvr =\n      isMediaStreamSource(state.videoElement) &&\n      bufferWindowMs !== undefined &&\n      bufferWindowMs > 0 &&\n      sourceType !== \"whep\" &&\n      sourceType !== \"webrtc\";\n\n    const calculatedRange = calculateSeekableRange({\n      isLive,\n      video: state.videoElement,\n      mistStreamInfo,\n      currentTime: state.currentTime,\n      duration: state.duration,\n      allowMediaStreamDvr,\n    });\n\n    const controllerSeekableStart = this.pc.getSeekableStart();\n    const controllerLiveEdge = this.pc.getLiveEdge();\n\n    const useControllerRange =\n      Number.isFinite(controllerSeekableStart) &&\n      Number.isFinite(controllerLiveEdge) &&\n      controllerLiveEdge >= controllerSeekableStart &&\n      (controllerLiveEdge > 0 || controllerSeekableStart > 0);\n\n    const seekableStart = useControllerRange\n      ? controllerSeekableStart\n      : calculatedRange.seekableStart;\n    const liveEdge = useControllerRange ? controllerLiveEdge : calculatedRange.liveEdge;\n\n    const hasDvrWindow =\n      isLive &&\n      Number.isFinite(liveEdge) &&\n      Number.isFinite(seekableStart) &&\n      liveEdge > seekableStart;\n\n    const baseCanSeek =\n      controller?.canSeekStream?.() ??\n      canSeekStream({\n        video: state.videoElement,\n        isLive,\n        duration: state.duration,\n        bufferWindowMs,\n      });\n\n    const liveThresholds = calculateLiveThresholds(sourceType, isWebRTC, bufferWindowMs);\n\n    return {\n      mistStreamInfo,\n      isLive,\n      sourceType,\n      seekableStart,\n      liveEdge,\n      hasDvrWindow,\n      canSeek: baseCanSeek && (!isLive || hasDvrWindow),\n      commitOnRelease: isLive,\n      liveThresholds,\n    };\n  }\n\n  private _reconcileNearLiveState(): void {\n    const context = this._getSeekingContext();\n\n    if (!context.isLive) {\n      if (!this._isNearLiveState) {\n        this._isNearLiveState = true;\n      }\n      return;\n    }\n\n    const next = calculateIsNearLive(\n      this.pc.s.currentTime,\n      context.liveEdge,\n      context.liveThresholds,\n      this._isNearLiveState\n    );\n\n    if (next !== this._isNearLiveState) {\n      this._isNearLiveState = next;\n    }\n  }\n\n  private _handleModeChange(\n    event: CustomEvent<{ mode: \"auto\" | \"low-latency\" | \"quality\" }>\n  ): void {\n    const { mode } = event.detail;\n    this.dispatchEvent(\n      new CustomEvent(\"fw-mode-change\", {\n        detail: { mode },\n        bubbles: true,\n        composed: true,\n      })\n    );\n  }\n\n  protected render() {\n    const state = this.pc.s;\n    const disabled = !state.videoElement;\n    const context = this._getSeekingContext();\n    const shouldShowControls =\n      state.shouldShowControls ||\n      state.isPaused ||\n      !state.hasPlaybackStarted ||\n      state.shouldShowIdleScreen ||\n      !!state.error ||\n      this._settingsOpen;\n\n    const timeDisplay = formatTimeDisplay({\n      isLive: context.isLive,\n      currentTime: state.currentTime,\n      duration: state.duration,\n      liveEdge: context.liveEdge,\n      seekableStart: context.seekableStart,\n      unixoffset: context.mistStreamInfo?.unixoffset,\n    });\n    const showTimeDisplay = !(context.isLive && timeDisplay === \"LIVE\");\n\n    const liveButtonDisabled = !context.hasDvrWindow || this._isNearLiveState;\n\n    return html`\n      <div\n        class=${classMap({\n          \"fw-player-surface\": true,\n          \"fw-controls-wrapper\": true,\n          \"fw-controls-wrapper--visible\": shouldShowControls,\n          \"fw-controls-wrapper--hidden\": !shouldShowControls,\n        })}\n      >\n        <div class=\"fw-control-bar\" @click=${(event: Event) => event.stopPropagation()}>\n          ${context.canSeek\n            ? html`\n                <div class=\"fw-seek-wrapper\">\n                  <fw-seek-bar\n                    .currentTime=${state.currentTime}\n                    .duration=${state.duration}\n                    .buffered=${this._buffered}\n                    .disabled=${disabled}\n                    .isLive=${context.isLive}\n                    .seekableStart=${context.seekableStart}\n                    .liveEdge=${context.liveEdge}\n                    .commitOnRelease=${context.commitOnRelease}\n                    @fw-seek=${(event: CustomEvent<{ time: number }>) =>\n                      this.pc.seek(event.detail.time)}\n                  ></fw-seek-bar>\n                </div>\n              `\n            : nothing}\n\n          <div class=\"fw-controls-row\">\n            <div class=\"fw-controls-left\">\n              <div class=\"fw-control-group\">\n                <button\n                  type=\"button\"\n                  class=\"fw-btn-flush\"\n                  ?disabled=${disabled}\n                  aria-label=${state.isPlaying ? \"Pause\" : \"Play\"}\n                  @click=${() => this.pc.togglePlay()}\n                >\n                  ${state.isPlaying ? pauseIcon(18) : playIcon(18)}\n                </button>\n\n                ${context.canSeek\n                  ? html`\n                      <button\n                        type=\"button\"\n                        class=\"fw-btn-flush hidden sm:flex\"\n                        ?disabled=${disabled}\n                        aria-label=\"Skip back 10 seconds\"\n                        @click=${() => this.pc.seekBy(-10)}\n                      >\n                        ${skipBackIcon(16)}\n                      </button>\n                      <button\n                        type=\"button\"\n                        class=\"fw-btn-flush hidden sm:flex\"\n                        ?disabled=${disabled}\n                        aria-label=\"Skip forward 10 seconds\"\n                        @click=${() => this.pc.seekBy(10)}\n                      >\n                        ${skipForwardIcon(16)}\n                      </button>\n                    `\n                  : nothing}\n              </div>\n\n              <div class=\"fw-control-group\">\n                <fw-volume-control .pc=${this.pc}></fw-volume-control>\n              </div>\n\n              ${showTimeDisplay\n                ? html`\n                    <div class=\"fw-control-group\">\n                      <span class=\"fw-time-display\">${timeDisplay}</span>\n                    </div>\n                  `\n                : nothing}\n              ${context.isLive\n                ? html`\n                    <div class=\"fw-control-group\">\n                      <button\n                        type=\"button\"\n                        @click=${() => this.pc.jumpToLive()}\n                        ?disabled=${liveButtonDisabled}\n                        class=${classMap({\n                          \"fw-live-badge\": true,\n                          \"fw-live-badge--active\": liveButtonDisabled,\n                          \"fw-live-badge--behind\": !liveButtonDisabled,\n                        })}\n                        title=${!context.hasDvrWindow\n                          ? \"Live only\"\n                          : this._isNearLiveState\n                            ? \"At live edge\"\n                            : \"Jump to live\"}\n                      >\n                        LIVE\n                        ${!this._isNearLiveState && context.hasDvrWindow\n                          ? seekToLiveIcon(10)\n                          : nothing}\n                      </button>\n                    </div>\n                  `\n                : nothing}\n            </div>\n\n            <div class=\"fw-controls-right\">\n              ${this.showStatsButton\n                ? html`\n                    <div class=\"fw-control-group\">\n                      <button\n                        type=\"button\"\n                        class=${classMap({\n                          \"fw-btn-flush\": true,\n                          \"fw-btn-flush--active\": this.isStatsOpen,\n                        })}\n                        aria-label=\"Toggle stats\"\n                        title=\"Stats\"\n                        @click=${() =>\n                          this.dispatchEvent(\n                            new CustomEvent(\"fw-stats-toggle\", {\n                              bubbles: true,\n                              composed: true,\n                            })\n                          )}\n                      >\n                        ${statsIcon(16)}\n                      </button>\n                    </div>\n                  `\n                : nothing}\n              <div class=\"fw-control-group fw-settings-anchor\">\n                <button\n                  type=\"button\"\n                  class=${classMap({\n                    \"fw-btn-flush\": true,\n                    group: true,\n                    \"fw-btn-flush--active\": this._settingsOpen,\n                  })}\n                  aria-label=\"Settings\"\n                  title=\"Settings\"\n                  ?disabled=${disabled}\n                  @click=${(event: MouseEvent) => {\n                    event.stopPropagation();\n                    if (disabled) {\n                      return;\n                    }\n                    this._settingsOpen = !this._settingsOpen;\n                  }}\n                >\n                  <span class=\"transition-transform group-hover:rotate-90\"\n                    >${settingsIcon(16)}</span\n                  >\n                </button>\n\n                <fw-settings-menu\n                  .pc=${this.pc}\n                  .open=${this._settingsOpen}\n                  .playbackMode=${this.playbackMode}\n                  .isContentLive=${this.isContentLive}\n                  @click=${(event: MouseEvent) => event.stopPropagation()}\n                  @fw-close=${() => {\n                    this._settingsOpen = false;\n                  }}\n                  @fw-mode-change=${this._handleModeChange}\n                ></fw-settings-menu>\n              </div>\n\n              <div class=\"fw-control-group\">\n                <button\n                  type=\"button\"\n                  class=\"fw-btn-flush\"\n                  ?disabled=${disabled}\n                  aria-label=${state.isFullscreen ? \"Exit fullscreen\" : \"Fullscreen\"}\n                  @click=${() => this.pc.toggleFullscreen()}\n                >\n                  ${state.isFullscreen ? fullscreenExitIcon(16) : fullscreenIcon(16)}\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"fw-player-controls\": FwPlayerControls;\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/components/fw-volume-control.js

@@ -11,34 +11,56 @@ let FwVolumeControl = class FwVolumeControl extends LitElement {
         super(...arguments);
         this._hovered = false;
         this._focused = false;
+        this._dragging = false;
         this._hasAudio = true;
         this._activePointerId = null;
+        this._activeSliderTarget = null;
+        this._onGlobalPointerMove = (event) => {
+            if (!this._dragging || this._activePointerId !== event.pointerId) {
+                return;
+            }
+            const target = this._activeSliderTarget;
+            if (!target) {
+                return;
+            }
+            this._setVolumeFromClientX(event.clientX, target);
+        };
+        this._onGlobalPointerUp = (event) => {
+            if (!this._dragging || this._activePointerId !== event.pointerId) {
+                return;
+            }
+            this._endDragInteraction();
+        };
+        this._handleMouseEnter = () => {
+            this._hovered = true;
+        };
+        this._handleMouseLeave = () => {
+            if (this._dragging) {
+                return;
+            }
+            this._hovered = false;
+            this._focused = false;
+        };
+        this._handleFocusIn = () => {
+            this._focused = true;
+        };
+        this._handleFocusOut = (event) => {
+            if (this._dragging) {
+                return;
+            }
+            const related = event.relatedTarget;
+            if (!related || !this.renderRoot.contains(related)) {
+                this._focused = false;
+            }
+        };
         this._onSliderPointerDown = (event) => {
             if (!this._hasAudio) {
                 return;
             }
             event.preventDefault();
             const target = event.currentTarget;
-            this._activePointerId = event.pointerId;
+            this._beginDragInteraction(target, event.pointerId);
             this._setVolumeFromClientX(event.clientX, target);
-            const onMove = (moveEvent) => {
-                if (this._activePointerId !== moveEvent.pointerId) {
-                    return;
-                }
-                this._setVolumeFromClientX(moveEvent.clientX, target);
-            };
-            const onUp = (upEvent) => {
-                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);
         };
         this._onWheel = (event) => {
             if (!this._hasAudio) {
@@ -55,7 +77,11 @@ let FwVolumeControl = class FwVolumeControl extends LitElement {
         };
     }
     get _expanded() {
-        return this._hovered || this._focused;
+        return this._hovered || this._focused || this._dragging;
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this._endDragInteraction();
     }
     updated() {
         this._updateHasAudio();
@@ -88,6 +114,42 @@ let FwVolumeControl = class FwVolumeControl extends LitElement {
             this.pc.toggleMute();
         }
     }
+    _beginDragInteraction(target, pointerId) {
+        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);
+    }
+    _endDragInteraction() {
+        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);
+    }
     render() {
         const isMuted = this.pc.s.isMuted;
         const volume = this.pc.s.volume;
@@ -101,22 +163,10 @@ let FwVolumeControl = 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) => {
-            const related = event.relatedTarget;
-            if (!related || !this.renderRoot.contains(related)) {
-                this._focused = false;
-            }
-        }}
+        @mouseenter=${this._handleMouseEnter}
+        @mouseleave=${this._handleMouseLeave}
+        @focusin=${this._handleFocusIn}
+        @focusout=${this._handleFocusOut}
         @click=${(event) => {
             if (this._hasAudio && event.target === event.currentTarget) {
                 this.pc.toggleMute();
@@ -178,6 +228,8 @@ FwVolumeControl.styles = [
         background: rgb(255 255 255 / 0.2);
         border-radius: 9999px;
         cursor: pointer;
+        touch-action: none;
+        user-select: none;
       }
 
       .slider-fill {
@@ -210,6 +262,9 @@ __decorate([
 __decorate([
     state()
 ], FwVolumeControl.prototype, "_focused", void 0);
+__decorate([
+    state()
+], FwVolumeControl.prototype, "_dragging", void 0);
 __decorate([
     state()
 ], FwVolumeControl.prototype, "_hasAudio", void 0);

package/dist/esm/components/fw-volume-control.js.map

@@ -1 +1 @@
-{"version":3,"file":"fw-volume-control.js","sources":["../../../../src/components/fw-volume-control.ts"],"sourcesContent":["/**\n * <fw-volume-control> — Mute toggle + expandable volume slider.\n */\nimport { LitElement, html, css } from \"lit\";\nimport { customElement, property, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { styleMap } from \"lit/directives/style-map.js\";\nimport { sharedStyles } from \"../styles/shared-styles.js\";\nimport { volumeUpIcon, volumeOffIcon } from \"../icons/index.js\";\nimport type { PlayerControllerHost } from \"../controllers/player-controller-host.js\";\n\n@customElement(\"fw-volume-control\")\nexport class FwVolumeControl extends LitElement {\n  @property({ attribute: false }) pc!: PlayerControllerHost;\n\n  @state() private _hovered = false;\n  @state() private _focused = false;\n  @state() private _hasAudio = true;\n\n  private _activePointerId: number | null = null;\n\n  static styles = [\n    sharedStyles,\n    css`\n      :host {\n        display: flex;\n        align-items: center;\n      }\n\n      .slider {\n        position: relative;\n        width: 100%;\n        height: 0.25rem;\n        background: rgb(255 255 255 / 0.2);\n        border-radius: 9999px;\n        cursor: pointer;\n      }\n\n      .slider-fill {\n        position: absolute;\n        top: 0;\n        left: 0;\n        height: 100%;\n        border-radius: 9999px;\n        background: hsl(var(--tn-fg));\n      }\n\n      .slider-thumb {\n        position: absolute;\n        top: 50%;\n        width: 0.625rem;\n        height: 0.625rem;\n        border-radius: 9999px;\n        background: hsl(var(--tn-fg));\n        transform: translate(-50%, -50%);\n        pointer-events: none;\n      }\n    `,\n  ];\n\n  private get _expanded(): boolean {\n    return this._hovered || this._focused;\n  }\n\n  protected updated(): void {\n    this._updateHasAudio();\n  }\n\n  private _updateHasAudio(): void {\n    const video = this.pc?.s.videoElement;\n    if (!video) {\n      this._hasAudio = true;\n      return;\n    }\n\n    if (video.srcObject instanceof MediaStream) {\n      this._hasAudio = video.srcObject.getAudioTracks().length > 0;\n      return;\n    }\n\n    const maybeWithTracks = video as HTMLVideoElement & {\n      audioTracks?: {\n        length: number;\n      };\n    };\n\n    if (maybeWithTracks.audioTracks && typeof maybeWithTracks.audioTracks.length === \"number\") {\n      this._hasAudio = maybeWithTracks.audioTracks.length > 0;\n      return;\n    }\n\n    this._hasAudio = true;\n  }\n\n  private _setVolumeFromClientX(clientX: number, target: HTMLElement): void {\n    const rect = target.getBoundingClientRect();\n    if (rect.width <= 0) {\n      return;\n    }\n\n    const pct = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));\n    this.pc.setVolume(pct);\n\n    if (this.pc.s.isMuted && pct > 0) {\n      this.pc.toggleMute();\n    }\n  }\n\n  private _onSliderPointerDown = (event: PointerEvent) => {\n    if (!this._hasAudio) {\n      return;\n    }\n\n    event.preventDefault();\n    const target = event.currentTarget as HTMLElement;\n    this._activePointerId = event.pointerId;\n    this._setVolumeFromClientX(event.clientX, target);\n\n    const onMove = (moveEvent: PointerEvent) => {\n      if (this._activePointerId !== moveEvent.pointerId) {\n        return;\n      }\n      this._setVolumeFromClientX(moveEvent.clientX, target);\n    };\n\n    const onUp = (upEvent: PointerEvent) => {\n      if (this._activePointerId !== upEvent.pointerId) {\n        return;\n      }\n\n      this._activePointerId = null;\n      window.removeEventListener(\"pointermove\", onMove);\n      window.removeEventListener(\"pointerup\", onUp);\n      window.removeEventListener(\"pointercancel\", onUp);\n    };\n\n    window.addEventListener(\"pointermove\", onMove);\n    window.addEventListener(\"pointerup\", onUp);\n    window.addEventListener(\"pointercancel\", onUp);\n  };\n\n  private _onWheel = (event: WheelEvent) => {\n    if (!this._hasAudio) {\n      return;\n    }\n\n    event.preventDefault();\n\n    const current = this.pc.s.isMuted ? 0 : Math.round(this.pc.s.volume * 100);\n    const delta = event.deltaY < 0 ? 5 : -5;\n    const next = Math.max(0, Math.min(100, current + delta));\n    this.pc.setVolume(next / 100);\n\n    if (this.pc.s.isMuted && next > 0) {\n      this.pc.toggleMute();\n    }\n  };\n\n  protected render() {\n    const isMuted = this.pc.s.isMuted;\n    const volume = this.pc.s.volume;\n    const displayVolume = isMuted ? 0 : Math.max(0, Math.min(1, volume));\n\n    return html`\n      <div\n        class=${classMap({\n          \"fw-volume-group\": true,\n          \"fw-volume-group--expanded\": this._expanded,\n          \"fw-volume-group--disabled\": !this._hasAudio,\n        })}\n        role=\"group\"\n        aria-label=\"Volume controls\"\n        @mouseenter=${() => {\n          this._hovered = true;\n        }}\n        @mouseleave=${() => {\n          this._hovered = false;\n          this._focused = false;\n        }}\n        @focusin=${() => {\n          this._focused = true;\n        }}\n        @focusout=${(event: FocusEvent) => {\n          const related = event.relatedTarget as Node | null;\n          if (!related || !this.renderRoot.contains(related)) {\n            this._focused = false;\n          }\n        }}\n        @click=${(event: MouseEvent) => {\n          if (this._hasAudio && event.target === event.currentTarget) {\n            this.pc.toggleMute();\n          }\n        }}\n        @wheel=${this._onWheel}\n      >\n        <button\n          class=\"fw-volume-btn\"\n          type=\"button\"\n          @click=${() => {\n            if (this._hasAudio) {\n              this.pc.toggleMute();\n            }\n          }}\n          ?disabled=${!this._hasAudio}\n          aria-label=${!this._hasAudio ? \"No audio\" : isMuted ? \"Unmute\" : \"Mute\"}\n          title=${!this._hasAudio ? \"No audio\" : isMuted ? \"Unmute\" : \"Mute\"}\n        >\n          ${isMuted || !this._hasAudio ? volumeOffIcon(16) : volumeUpIcon(16)}\n        </button>\n\n        <div\n          class=${classMap({\n            \"fw-volume-slider-wrapper\": true,\n            \"fw-volume-slider-wrapper--expanded\": this._expanded,\n            \"fw-volume-slider-wrapper--collapsed\": !this._expanded,\n          })}\n        >\n          <div\n            class=\"slider\"\n            role=\"slider\"\n            aria-label=\"Volume\"\n            aria-valuemin=\"0\"\n            aria-valuemax=\"100\"\n            aria-valuenow=${Math.round(displayVolume * 100)}\n            @pointerdown=${this._onSliderPointerDown}\n          >\n            <div class=\"slider-fill\" style=${styleMap({ width: `${displayVolume * 100}%` })}></div>\n            <div class=\"slider-thumb\" style=${styleMap({ left: `${displayVolume * 100}%` })}></div>\n          </div>\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"fw-volume-control\": FwVolumeControl;\n  }\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"fw-volume-control.js","sources":["../../../../src/components/fw-volume-control.ts"],"sourcesContent":["/**\n * <fw-volume-control> — Mute toggle + expandable volume slider.\n */\nimport { LitElement, html, css } from \"lit\";\nimport { customElement, property, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { styleMap } from \"lit/directives/style-map.js\";\nimport { sharedStyles } from \"../styles/shared-styles.js\";\nimport { volumeUpIcon, volumeOffIcon } from \"../icons/index.js\";\nimport type { PlayerControllerHost } from \"../controllers/player-controller-host.js\";\n\n@customElement(\"fw-volume-control\")\nexport class FwVolumeControl extends LitElement {\n  @property({ attribute: false }) pc!: PlayerControllerHost;\n\n  @state() private _hovered = false;\n  @state() private _focused = false;\n  @state() private _dragging = false;\n  @state() private _hasAudio = true;\n\n  private _activePointerId: number | null = null;\n  private _activeSliderTarget: HTMLElement | null = null;\n\n  static styles = [\n    sharedStyles,\n    css`\n      :host {\n        display: flex;\n        align-items: center;\n      }\n\n      .slider {\n        position: relative;\n        width: 100%;\n        height: 0.25rem;\n        background: rgb(255 255 255 / 0.2);\n        border-radius: 9999px;\n        cursor: pointer;\n        touch-action: none;\n        user-select: none;\n      }\n\n      .slider-fill {\n        position: absolute;\n        top: 0;\n        left: 0;\n        height: 100%;\n        border-radius: 9999px;\n        background: hsl(var(--tn-fg));\n      }\n\n      .slider-thumb {\n        position: absolute;\n        top: 50%;\n        width: 0.625rem;\n        height: 0.625rem;\n        border-radius: 9999px;\n        background: hsl(var(--tn-fg));\n        transform: translate(-50%, -50%);\n        pointer-events: none;\n      }\n    `,\n  ];\n\n  private get _expanded(): boolean {\n    return this._hovered || this._focused || this._dragging;\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this._endDragInteraction();\n  }\n\n  protected updated(): void {\n    this._updateHasAudio();\n  }\n\n  private _updateHasAudio(): void {\n    const video = this.pc?.s.videoElement;\n    if (!video) {\n      this._hasAudio = true;\n      return;\n    }\n\n    if (video.srcObject instanceof MediaStream) {\n      this._hasAudio = video.srcObject.getAudioTracks().length > 0;\n      return;\n    }\n\n    const maybeWithTracks = video as HTMLVideoElement & {\n      audioTracks?: {\n        length: number;\n      };\n    };\n\n    if (maybeWithTracks.audioTracks && typeof maybeWithTracks.audioTracks.length === \"number\") {\n      this._hasAudio = maybeWithTracks.audioTracks.length > 0;\n      return;\n    }\n\n    this._hasAudio = true;\n  }\n\n  private _setVolumeFromClientX(clientX: number, target: HTMLElement): void {\n    const rect = target.getBoundingClientRect();\n    if (rect.width <= 0) {\n      return;\n    }\n\n    const pct = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));\n    this.pc.setVolume(pct);\n\n    if (this.pc.s.isMuted && pct > 0) {\n      this.pc.toggleMute();\n    }\n  }\n\n  private _beginDragInteraction(target: HTMLElement, pointerId: number): void {\n    this._activePointerId = pointerId;\n    this._activeSliderTarget = target;\n    this._dragging = true;\n    this._hovered = true;\n    this._focused = true;\n\n    try {\n      target.setPointerCapture(pointerId);\n    } catch {\n      // Non-fatal: we still listen on window as a fallback.\n    }\n\n    window.addEventListener(\"pointermove\", this._onGlobalPointerMove);\n    window.addEventListener(\"pointerup\", this._onGlobalPointerUp);\n    window.addEventListener(\"pointercancel\", this._onGlobalPointerUp);\n  }\n\n  private _endDragInteraction(): void {\n    const pointerId = this._activePointerId;\n    const target = this._activeSliderTarget;\n    if (pointerId != null && target) {\n      try {\n        if (target.hasPointerCapture(pointerId)) {\n          target.releasePointerCapture(pointerId);\n        }\n      } catch {\n        // Ignore pointer-capture release errors.\n      }\n    }\n\n    this._activePointerId = null;\n    this._activeSliderTarget = null;\n    this._dragging = false;\n    window.removeEventListener(\"pointermove\", this._onGlobalPointerMove);\n    window.removeEventListener(\"pointerup\", this._onGlobalPointerUp);\n    window.removeEventListener(\"pointercancel\", this._onGlobalPointerUp);\n  }\n\n  private _onGlobalPointerMove = (event: PointerEvent): void => {\n    if (!this._dragging || this._activePointerId !== event.pointerId) {\n      return;\n    }\n    const target = this._activeSliderTarget;\n    if (!target) {\n      return;\n    }\n    this._setVolumeFromClientX(event.clientX, target);\n  };\n\n  private _onGlobalPointerUp = (event: PointerEvent): void => {\n    if (!this._dragging || this._activePointerId !== event.pointerId) {\n      return;\n    }\n    this._endDragInteraction();\n  };\n\n  private _handleMouseEnter = (): void => {\n    this._hovered = true;\n  };\n\n  private _handleMouseLeave = (): void => {\n    if (this._dragging) {\n      return;\n    }\n    this._hovered = false;\n    this._focused = false;\n  };\n\n  private _handleFocusIn = (): void => {\n    this._focused = true;\n  };\n\n  private _handleFocusOut = (event: FocusEvent): void => {\n    if (this._dragging) {\n      return;\n    }\n    const related = event.relatedTarget as Node | null;\n    if (!related || !this.renderRoot.contains(related)) {\n      this._focused = false;\n    }\n  };\n\n  private _onSliderPointerDown = (event: PointerEvent) => {\n    if (!this._hasAudio) {\n      return;\n    }\n\n    event.preventDefault();\n    const target = event.currentTarget as HTMLElement;\n    this._beginDragInteraction(target, event.pointerId);\n    this._setVolumeFromClientX(event.clientX, target);\n  };\n\n  private _onWheel = (event: WheelEvent) => {\n    if (!this._hasAudio) {\n      return;\n    }\n\n    event.preventDefault();\n\n    const current = this.pc.s.isMuted ? 0 : Math.round(this.pc.s.volume * 100);\n    const delta = event.deltaY < 0 ? 5 : -5;\n    const next = Math.max(0, Math.min(100, current + delta));\n    this.pc.setVolume(next / 100);\n\n    if (this.pc.s.isMuted && next > 0) {\n      this.pc.toggleMute();\n    }\n  };\n\n  protected render() {\n    const isMuted = this.pc.s.isMuted;\n    const volume = this.pc.s.volume;\n    const displayVolume = isMuted ? 0 : Math.max(0, Math.min(1, volume));\n\n    return html`\n      <div\n        class=${classMap({\n          \"fw-volume-group\": true,\n          \"fw-volume-group--expanded\": this._expanded,\n          \"fw-volume-group--disabled\": !this._hasAudio,\n        })}\n        role=\"group\"\n        aria-label=\"Volume controls\"\n        @mouseenter=${this._handleMouseEnter}\n        @mouseleave=${this._handleMouseLeave}\n        @focusin=${this._handleFocusIn}\n        @focusout=${this._handleFocusOut}\n        @click=${(event: MouseEvent) => {\n          if (this._hasAudio && event.target === event.currentTarget) {\n            this.pc.toggleMute();\n          }\n        }}\n        @wheel=${this._onWheel}\n      >\n        <button\n          class=\"fw-volume-btn\"\n          type=\"button\"\n          @click=${() => {\n            if (this._hasAudio) {\n              this.pc.toggleMute();\n            }\n          }}\n          ?disabled=${!this._hasAudio}\n          aria-label=${!this._hasAudio ? \"No audio\" : isMuted ? \"Unmute\" : \"Mute\"}\n          title=${!this._hasAudio ? \"No audio\" : isMuted ? \"Unmute\" : \"Mute\"}\n        >\n          ${isMuted || !this._hasAudio ? volumeOffIcon(16) : volumeUpIcon(16)}\n        </button>\n\n        <div\n          class=${classMap({\n            \"fw-volume-slider-wrapper\": true,\n            \"fw-volume-slider-wrapper--expanded\": this._expanded,\n            \"fw-volume-slider-wrapper--collapsed\": !this._expanded,\n          })}\n        >\n          <div\n            class=\"slider\"\n            role=\"slider\"\n            aria-label=\"Volume\"\n            aria-valuemin=\"0\"\n            aria-valuemax=\"100\"\n            aria-valuenow=${Math.round(displayVolume * 100)}\n            @pointerdown=${this._onSliderPointerDown}\n          >\n            <div class=\"slider-fill\" style=${styleMap({ width: `${displayVolume * 100}%` })}></div>\n            <div class=\"slider-thumb\" style=${styleMap({ left: `${displayVolume * 100}%` })}></div>\n          </div>\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"fw-volume-control\": FwVolumeControl;\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/fw-player.iife.js

@@ -3079,7 +3079,7 @@ function ve(e,t){return(t,n,i)=>((e,t,n)=>(n.configurable=!0,n.enumerable=!0,Ref
         min-width: 0;
         min-height: 0;
       }
-    `],n([ye({attribute:"content-id"})],e.FwPlayer.prototype,"contentId",void 0),n([ye({attribute:"content-type"})],e.FwPlayer.prototype,"contentType",void 0),n([ye({attribute:"gateway-url"})],e.FwPlayer.prototype,"gatewayUrl",void 0),n([ye({attribute:"mist-url"})],e.FwPlayer.prototype,"mistUrl",void 0),n([ye({attribute:"auth-token"})],e.FwPlayer.prototype,"authToken",void 0),n([ye({type:Boolean})],e.FwPlayer.prototype,"autoplay",void 0),n([ye({type:Boolean})],e.FwPlayer.prototype,"muted",void 0),n([ye({type:Boolean})],e.FwPlayer.prototype,"controls",void 0),n([ye({type:Boolean,attribute:"stock-controls"})],e.FwPlayer.prototype,"stockControls",void 0),n([ye({type:Boolean,attribute:"native-controls"})],e.FwPlayer.prototype,"nativeControls",void 0),n([ye({type:Boolean})],e.FwPlayer.prototype,"debug",void 0),n([ye({type:Boolean,attribute:"dev-mode"})],e.FwPlayer.prototype,"devMode",void 0),n([ye({attribute:"thumbnail-url"})],e.FwPlayer.prototype,"thumbnailUrl",void 0),n([ye({attribute:"playback-mode"})],e.FwPlayer.prototype,"playbackMode",void 0),n([ye({attribute:!1})],e.FwPlayer.prototype,"endpoints",void 0),n([be()],e.FwPlayer.prototype,"_isStatsOpen",void 0),n([be()],e.FwPlayer.prototype,"_isDevPanelOpen",void 0),n([be()],e.FwPlayer.prototype,"_skipDirection",void 0),n([be()],e.FwPlayer.prototype,"_contextMenuOpen",void 0),n([be()],e.FwPlayer.prototype,"_contextMenuMounted",void 0),n([be()],e.FwPlayer.prototype,"_contextMenuState",void 0),n([be()],e.FwPlayer.prototype,"_contextMenuSide",void 0),n([be()],e.FwPlayer.prototype,"_contextMenuX",void 0),n([be()],e.FwPlayer.prototype,"_contextMenuY",void 0),n([ve("#container")],e.FwPlayer.prototype,"_containerEl",void 0),e.FwPlayer=n([pe("fw-player")],e.FwPlayer);let Qt=class extends he{constructor(){super(...arguments),this.playbackMode="auto",this.isContentLive=!1,this.devMode=!1,this.showStatsButton=!1,this.isStatsOpen=!1,this._settingsOpen=!1,this._isNearLiveState=!0,this._buffered=null,this._boundVideo=null,this._onBufferedUpdate=null,this._onWindowClick=e=>{e.composedPath().some(e=>e instanceof HTMLElement&&(e.classList.contains("fw-settings-anchor")||e.classList.contains("fw-settings-menu")))||(this._settingsOpen=!1)}}connectedCallback(){super.connectedCallback()}disconnectedCallback(){super.disconnectedCallback(),this._unbindVideoEvents(),this._detachWindowClickListener()}updated(e){this._bindVideoEvents(),this._reconcileNearLiveState(),e.has("_settingsOpen")&&(this._settingsOpen?this._attachWindowClickListener():this._detachWindowClickListener())}_bindVideoEvents(){const e=this.pc?.s.videoElement??null;if(e===this._boundVideo)return;if(this._unbindVideoEvents(),this._boundVideo=e,!e)return void(this._buffered=null);const t=()=>{this._buffered=this.pc.getBufferedRanges()??e.buffered};t(),e.addEventListener("progress",t),e.addEventListener("loadeddata",t),this._onBufferedUpdate=t}_unbindVideoEvents(){if(!this._boundVideo)return;const e=this._onBufferedUpdate;e&&(this._boundVideo.removeEventListener("progress",e),this._boundVideo.removeEventListener("loadeddata",e)),this._boundVideo=null,this._onBufferedUpdate=null}_attachWindowClickListener(){window.setTimeout(()=>{this._settingsOpen&&window.addEventListener("click",this._onWindowClick)},0)}_detachWindowClickListener(){window.removeEventListener("click",this._onWindowClick)}_deriveBufferWindowMs(e){if(!e)return;const t=Object.values(e);if(0===t.length)return;const n=t.map(e=>e.firstms).filter(e=>"number"==typeof e),i=t.map(e=>e.lastms).filter(e=>"number"==typeof e);if(0===n.length||0===i.length)return;const r=Math.max(...n),s=Math.min(...i)-r;return!Number.isFinite(s)||s<=0?void 0:s}_getSeekingContext(){const e=this.pc.s,t=this.pc.getController(),n=e.currentSourceInfo?.type,i=e.streamState?.streamInfo,r=function(e,t,n){return void 0!==e?e:t?.type?"live"===t.type:!Number.isFinite(n)}(this.isContentLive,i,e.duration),s=i?.meta?.buffer_window??this._deriveBufferWindowMs(i?.meta?.tracks),a=St(e.videoElement),o=St(e.videoElement)&&void 0!==s&&s>0&&"whep"!==n&&"webrtc"!==n,l=kt({isLive:r,video:e.videoElement,mistStreamInfo:i,currentTime:e.currentTime,duration:e.duration,allowMediaStreamDvr:o}),u=this.pc.getSeekableStart(),d=this.pc.getLiveEdge(),c=Number.isFinite(u)&&Number.isFinite(d)&&d>=u&&(d>0||u>0),h=c?u:l.seekableStart,f=c?d:l.liveEdge,p=r&&Number.isFinite(f)&&Number.isFinite(h)&&f>h;return{mistStreamInfo:i,isLive:r,sourceType:n,seekableStart:h,liveEdge:f,hasDvrWindow:p,canSeek:(t?.canSeekStream?.()??It({video:e.videoElement,isLive:r,duration:e.duration,bufferWindowMs:s}))&&(!r||p),commitOnRelease:r,liveThresholds:At(n,a,s)}}_reconcileNearLiveState(){const e=this._getSeekingContext();if(!e.isLive)return void(this._isNearLiveState||(this._isNearLiveState=!0));const t=Ct(this.pc.s.currentTime,e.liveEdge,e.liveThresholds,this._isNearLiveState);t!==this._isNearLiveState&&(this._isNearLiveState=t)}_handleModeChange(e){const{mode:t}=e.detail;this.dispatchEvent(new CustomEvent("fw-mode-change",{detail:{mode:t},bubbles:!0,composed:!0}))}render(){const e=this.pc.s,t=!e.videoElement,n=this._getSeekingContext(),i=e.shouldShowControls||e.isPaused||!e.hasPlaybackStarted||e.shouldShowIdleScreen||!!e.error||this._settingsOpen,r=$t({isLive:n.isLive,currentTime:e.currentTime,duration:e.duration,liveEdge:n.liveEdge,seekableStart:n.seekableStart,unixoffset:n.mistStreamInfo?.unixoffset}),s=!n.hasDvrWindow||this._isNearLiveState;return W`
+    `],n([ye({attribute:"content-id"})],e.FwPlayer.prototype,"contentId",void 0),n([ye({attribute:"content-type"})],e.FwPlayer.prototype,"contentType",void 0),n([ye({attribute:"gateway-url"})],e.FwPlayer.prototype,"gatewayUrl",void 0),n([ye({attribute:"mist-url"})],e.FwPlayer.prototype,"mistUrl",void 0),n([ye({attribute:"auth-token"})],e.FwPlayer.prototype,"authToken",void 0),n([ye({type:Boolean})],e.FwPlayer.prototype,"autoplay",void 0),n([ye({type:Boolean})],e.FwPlayer.prototype,"muted",void 0),n([ye({type:Boolean})],e.FwPlayer.prototype,"controls",void 0),n([ye({type:Boolean,attribute:"stock-controls"})],e.FwPlayer.prototype,"stockControls",void 0),n([ye({type:Boolean,attribute:"native-controls"})],e.FwPlayer.prototype,"nativeControls",void 0),n([ye({type:Boolean})],e.FwPlayer.prototype,"debug",void 0),n([ye({type:Boolean,attribute:"dev-mode"})],e.FwPlayer.prototype,"devMode",void 0),n([ye({attribute:"thumbnail-url"})],e.FwPlayer.prototype,"thumbnailUrl",void 0),n([ye({attribute:"playback-mode"})],e.FwPlayer.prototype,"playbackMode",void 0),n([ye({attribute:!1})],e.FwPlayer.prototype,"endpoints",void 0),n([be()],e.FwPlayer.prototype,"_isStatsOpen",void 0),n([be()],e.FwPlayer.prototype,"_isDevPanelOpen",void 0),n([be()],e.FwPlayer.prototype,"_skipDirection",void 0),n([be()],e.FwPlayer.prototype,"_contextMenuOpen",void 0),n([be()],e.FwPlayer.prototype,"_contextMenuMounted",void 0),n([be()],e.FwPlayer.prototype,"_contextMenuState",void 0),n([be()],e.FwPlayer.prototype,"_contextMenuSide",void 0),n([be()],e.FwPlayer.prototype,"_contextMenuX",void 0),n([be()],e.FwPlayer.prototype,"_contextMenuY",void 0),n([ve("#container")],e.FwPlayer.prototype,"_containerEl",void 0),e.FwPlayer=n([pe("fw-player")],e.FwPlayer);let Qt=class extends he{constructor(){super(...arguments),this.playbackMode="auto",this.isContentLive=!1,this.devMode=!1,this.showStatsButton=!1,this.isStatsOpen=!1,this._settingsOpen=!1,this._isNearLiveState=!0,this._buffered=null,this._boundVideo=null,this._onBufferedUpdate=null,this._onWindowClick=e=>{const t=e.composedPath(),n=this._settingsAnchorEl;null!==n&&t.some(e=>e instanceof Node&&n.contains(e))||(this._settingsOpen=!1)}}connectedCallback(){super.connectedCallback()}disconnectedCallback(){super.disconnectedCallback(),this._unbindVideoEvents(),this._detachWindowClickListener()}updated(e){this._bindVideoEvents(),this._reconcileNearLiveState(),e.has("_settingsOpen")&&(this._settingsOpen?this._attachWindowClickListener():this._detachWindowClickListener())}_bindVideoEvents(){const e=this.pc?.s.videoElement??null;if(e===this._boundVideo)return;if(this._unbindVideoEvents(),this._boundVideo=e,!e)return void(this._buffered=null);const t=()=>{this._buffered=this.pc.getBufferedRanges()??e.buffered};t(),e.addEventListener("progress",t),e.addEventListener("loadeddata",t),this._onBufferedUpdate=t}_unbindVideoEvents(){if(!this._boundVideo)return;const e=this._onBufferedUpdate;e&&(this._boundVideo.removeEventListener("progress",e),this._boundVideo.removeEventListener("loadeddata",e)),this._boundVideo=null,this._onBufferedUpdate=null}_attachWindowClickListener(){window.setTimeout(()=>{this._settingsOpen&&window.addEventListener("click",this._onWindowClick)},0)}_detachWindowClickListener(){window.removeEventListener("click",this._onWindowClick)}_deriveBufferWindowMs(e){if(!e)return;const t=Object.values(e);if(0===t.length)return;const n=t.map(e=>e.firstms).filter(e=>"number"==typeof e),i=t.map(e=>e.lastms).filter(e=>"number"==typeof e);if(0===n.length||0===i.length)return;const r=Math.max(...n),s=Math.min(...i)-r;return!Number.isFinite(s)||s<=0?void 0:s}_getSeekingContext(){const e=this.pc.s,t=this.pc.getController(),n=e.currentSourceInfo?.type,i=e.streamState?.streamInfo,r=function(e,t,n){return void 0!==e?e:t?.type?"live"===t.type:!Number.isFinite(n)}(this.isContentLive,i,e.duration),s=i?.meta?.buffer_window??this._deriveBufferWindowMs(i?.meta?.tracks),a=St(e.videoElement),o=St(e.videoElement)&&void 0!==s&&s>0&&"whep"!==n&&"webrtc"!==n,l=kt({isLive:r,video:e.videoElement,mistStreamInfo:i,currentTime:e.currentTime,duration:e.duration,allowMediaStreamDvr:o}),u=this.pc.getSeekableStart(),d=this.pc.getLiveEdge(),c=Number.isFinite(u)&&Number.isFinite(d)&&d>=u&&(d>0||u>0),h=c?u:l.seekableStart,f=c?d:l.liveEdge,p=r&&Number.isFinite(f)&&Number.isFinite(h)&&f>h;return{mistStreamInfo:i,isLive:r,sourceType:n,seekableStart:h,liveEdge:f,hasDvrWindow:p,canSeek:(t?.canSeekStream?.()??It({video:e.videoElement,isLive:r,duration:e.duration,bufferWindowMs:s}))&&(!r||p),commitOnRelease:r,liveThresholds:At(n,a,s)}}_reconcileNearLiveState(){const e=this._getSeekingContext();if(!e.isLive)return void(this._isNearLiveState||(this._isNearLiveState=!0));const t=Ct(this.pc.s.currentTime,e.liveEdge,e.liveThresholds,this._isNearLiveState);t!==this._isNearLiveState&&(this._isNearLiveState=t)}_handleModeChange(e){const{mode:t}=e.detail;this.dispatchEvent(new CustomEvent("fw-mode-change",{detail:{mode:t},bubbles:!0,composed:!0}))}render(){const e=this.pc.s,t=!e.videoElement,n=this._getSeekingContext(),i=e.shouldShowControls||e.isPaused||!e.hasPlaybackStarted||e.shouldShowIdleScreen||!!e.error||this._settingsOpen,r=$t({isLive:n.isLive,currentTime:e.currentTime,duration:e.duration,liveEdge:n.liveEdge,seekableStart:n.seekableStart,unixoffset:n.mistStreamInfo?.unixoffset}),s=!(n.isLive&&"LIVE"===r),a=!n.hasDvrWindow||this._isNearLiveState;return W`
       <div
         class=${Se({"fw-player-surface":!0,"fw-controls-wrapper":!0,"fw-controls-wrapper--visible":i,"fw-controls-wrapper--hidden":!i})}
       >
@@ -3164,17 +3164,18 @@ function ve(e,t){return(t,n,i)=>((e,t,n)=>(n.configurable=!0,n.enumerable=!0,Ref
                 <fw-volume-control .pc=${this.pc}></fw-volume-control>
               </div>
 
-              <div class="fw-control-group">
-                <span class="fw-time-display">${r}</span>
-              </div>
-
+              ${s?W`
+                    <div class="fw-control-group">
+                      <span class="fw-time-display">${r}</span>
+                    </div>
+                  `:X}
               ${n.isLive?W`
                     <div class="fw-control-group">
                       <button
                         type="button"
                         @click=${()=>this.pc.jumpToLive()}
-                        ?disabled=${s}
-                        class=${Se({"fw-live-badge":!0,"fw-live-badge--active":s,"fw-live-badge--behind":!s})}
+                        ?disabled=${a}
+                        class=${Se({"fw-live-badge":!0,"fw-live-badge--active":a,"fw-live-badge--behind":!a})}
                         title=${n.hasDvrWindow?this._isNearLiveState?"At live edge":"Jump to live":"Live only"}
                       >
                         LIVE
@@ -3210,7 +3211,7 @@ function ve(e,t){return(t,n,i)=>((e,t,n)=>(n.configurable=!0,n.enumerable=!0,Ref
                   aria-label="Settings"
                   title="Settings"
                   ?disabled=${t}
-                  @click=${()=>{t||(this._settingsOpen=!this._settingsOpen)}}
+                  @click=${e=>{e.stopPropagation(),t||(this._settingsOpen=!this._settingsOpen)}}
                 >
                   <span class="transition-transform group-hover:rotate-90"
                     >${Yt(16)}</span
@@ -3222,6 +3223,7 @@ function ve(e,t){return(t,n,i)=>((e,t,n)=>(n.configurable=!0,n.enumerable=!0,Ref
                   .open=${this._settingsOpen}
                   .playbackMode=${this.playbackMode}
                   .isContentLive=${this.isContentLive}
+                  @click=${e=>e.stopPropagation()}
                   @fw-close=${()=>{this._settingsOpen=!1}}
                   @fw-mode-change=${this._handleModeChange}
                 ></fw-settings-menu>
@@ -3270,7 +3272,7 @@ function ve(e,t){return(t,n,i)=>((e,t,n)=>(n.configurable=!0,n.enumerable=!0,Ref
       .fw-settings-anchor {
         position: relative;
       }
-    `],n([ye({attribute:!1})],Qt.prototype,"pc",void 0),n([ye({type:String})],Qt.prototype,"playbackMode",void 0),n([ye({type:Boolean,attribute:"is-content-live"})],Qt.prototype,"isContentLive",void 0),n([ye({type:Boolean,attribute:"dev-mode"})],Qt.prototype,"devMode",void 0),n([ye({type:Boolean,attribute:"show-stats-button"})],Qt.prototype,"showStatsButton",void 0),n([ye({type:Boolean,attribute:"is-stats-open"})],Qt.prototype,"isStatsOpen",void 0),n([be()],Qt.prototype,"_settingsOpen",void 0),n([be()],Qt.prototype,"_isNearLiveState",void 0),n([be()],Qt.prototype,"_buffered",void 0),Qt=n([pe("fw-player-controls")],Qt);
+    `],n([ye({attribute:!1})],Qt.prototype,"pc",void 0),n([ye({type:String})],Qt.prototype,"playbackMode",void 0),n([ye({type:Boolean,attribute:"is-content-live"})],Qt.prototype,"isContentLive",void 0),n([ye({type:Boolean,attribute:"dev-mode"})],Qt.prototype,"devMode",void 0),n([ye({type:Boolean,attribute:"show-stats-button"})],Qt.prototype,"showStatsButton",void 0),n([ye({type:Boolean,attribute:"is-stats-open"})],Qt.prototype,"isStatsOpen",void 0),n([be()],Qt.prototype,"_settingsOpen",void 0),n([be()],Qt.prototype,"_isNearLiveState",void 0),n([be()],Qt.prototype,"_buffered",void 0),n([ve(".fw-settings-anchor")],Qt.prototype,"_settingsAnchorEl",void 0),Qt=n([pe("fw-player-controls")],Qt);
 /**
      * @license
      * Copyright 2018 Google LLC
@@ -3332,15 +3334,15 @@ const Xt="important",Jt=" !"+Xt,Zt=_e(class extends Ee{constructor(e){if(super(e
         opacity: 0.5;
         cursor: not-allowed;
       }
-    `],n([ye({type:Number})],en.prototype,"currentTime",void 0),n([ye({type:Number})],en.prototype,"duration",void 0),n([ye({attribute:!1})],en.prototype,"buffered",void 0),n([ye({type:Boolean})],en.prototype,"disabled",void 0),n([ye({type:Boolean,attribute:"is-live"})],en.prototype,"isLive",void 0),n([ye({type:Number,attribute:"seekable-start"})],en.prototype,"seekableStart",void 0),n([ye({type:Number,attribute:"live-edge"})],en.prototype,"liveEdge",void 0),n([ye({type:Boolean,attribute:"commit-on-release"})],en.prototype,"commitOnRelease",void 0),n([be()],en.prototype,"_hovering",void 0),n([be()],en.prototype,"_dragging",void 0),n([be()],en.prototype,"_dragTime",void 0),n([be()],en.prototype,"_hoverPosition",void 0),n([be()],en.prototype,"_hoverTime",void 0),en=n([pe("fw-seek-bar")],en);let tn=class extends he{constructor(){super(...arguments),this._hovered=!1,this._focused=!1,this._hasAudio=!0,this._activePointerId=null,this._onSliderPointerDown=e=>{if(!this._hasAudio)return;e.preventDefault();const t=e.currentTarget;this._activePointerId=e.pointerId,this._setVolumeFromClientX(e.clientX,t);const n=e=>{this._activePointerId===e.pointerId&&this._setVolumeFromClientX(e.clientX,t)},i=e=>{this._activePointerId===e.pointerId&&(this._activePointerId=null,window.removeEventListener("pointermove",n),window.removeEventListener("pointerup",i),window.removeEventListener("pointercancel",i))};window.addEventListener("pointermove",n),window.addEventListener("pointerup",i),window.addEventListener("pointercancel",i)},this._onWheel=e=>{if(!this._hasAudio)return;e.preventDefault();const t=this.pc.s.isMuted?0:Math.round(100*this.pc.s.volume),n=e.deltaY<0?5:-5,i=Math.max(0,Math.min(100,t+n));this.pc.setVolume(i/100),this.pc.s.isMuted&&i>0&&this.pc.toggleMute()}}get _expanded(){return this._hovered||this._focused}updated(){this._updateHasAudio()}_updateHasAudio(){const e=this.pc?.s.videoElement;if(!e)return void(this._hasAudio=!0);if(e.srcObject instanceof MediaStream)return void(this._hasAudio=e.srcObject.getAudioTracks().length>0);const t=e;t.audioTracks&&"number"==typeof t.audioTracks.length?this._hasAudio=t.audioTracks.length>0:this._hasAudio=!0}_setVolumeFromClientX(e,t){const n=t.getBoundingClientRect();if(n.width<=0)return;const i=Math.max(0,Math.min(1,(e-n.left)/n.width));this.pc.setVolume(i),this.pc.s.isMuted&&i>0&&this.pc.toggleMute()}render(){const e=this.pc.s.isMuted,t=this.pc.s.volume,n=e?0:Math.max(0,Math.min(1,t));return W`
+    `],n([ye({type:Number})],en.prototype,"currentTime",void 0),n([ye({type:Number})],en.prototype,"duration",void 0),n([ye({attribute:!1})],en.prototype,"buffered",void 0),n([ye({type:Boolean})],en.prototype,"disabled",void 0),n([ye({type:Boolean,attribute:"is-live"})],en.prototype,"isLive",void 0),n([ye({type:Number,attribute:"seekable-start"})],en.prototype,"seekableStart",void 0),n([ye({type:Number,attribute:"live-edge"})],en.prototype,"liveEdge",void 0),n([ye({type:Boolean,attribute:"commit-on-release"})],en.prototype,"commitOnRelease",void 0),n([be()],en.prototype,"_hovering",void 0),n([be()],en.prototype,"_dragging",void 0),n([be()],en.prototype,"_dragTime",void 0),n([be()],en.prototype,"_hoverPosition",void 0),n([be()],en.prototype,"_hoverTime",void 0),en=n([pe("fw-seek-bar")],en);let tn=class extends he{constructor(){super(...arguments),this._hovered=!1,this._focused=!1,this._dragging=!1,this._hasAudio=!0,this._activePointerId=null,this._activeSliderTarget=null,this._onGlobalPointerMove=e=>{if(!this._dragging||this._activePointerId!==e.pointerId)return;const t=this._activeSliderTarget;t&&this._setVolumeFromClientX(e.clientX,t)},this._onGlobalPointerUp=e=>{this._dragging&&this._activePointerId===e.pointerId&&this._endDragInteraction()},this._handleMouseEnter=()=>{this._hovered=!0},this._handleMouseLeave=()=>{this._dragging||(this._hovered=!1,this._focused=!1)},this._handleFocusIn=()=>{this._focused=!0},this._handleFocusOut=e=>{if(this._dragging)return;const t=e.relatedTarget;t&&this.renderRoot.contains(t)||(this._focused=!1)},this._onSliderPointerDown=e=>{if(!this._hasAudio)return;e.preventDefault();const t=e.currentTarget;this._beginDragInteraction(t,e.pointerId),this._setVolumeFromClientX(e.clientX,t)},this._onWheel=e=>{if(!this._hasAudio)return;e.preventDefault();const t=this.pc.s.isMuted?0:Math.round(100*this.pc.s.volume),n=e.deltaY<0?5:-5,i=Math.max(0,Math.min(100,t+n));this.pc.setVolume(i/100),this.pc.s.isMuted&&i>0&&this.pc.toggleMute()}}get _expanded(){return this._hovered||this._focused||this._dragging}disconnectedCallback(){super.disconnectedCallback(),this._endDragInteraction()}updated(){this._updateHasAudio()}_updateHasAudio(){const e=this.pc?.s.videoElement;if(!e)return void(this._hasAudio=!0);if(e.srcObject instanceof MediaStream)return void(this._hasAudio=e.srcObject.getAudioTracks().length>0);const t=e;t.audioTracks&&"number"==typeof t.audioTracks.length?this._hasAudio=t.audioTracks.length>0:this._hasAudio=!0}_setVolumeFromClientX(e,t){const n=t.getBoundingClientRect();if(n.width<=0)return;const i=Math.max(0,Math.min(1,(e-n.left)/n.width));this.pc.setVolume(i),this.pc.s.isMuted&&i>0&&this.pc.toggleMute()}_beginDragInteraction(e,t){this._activePointerId=t,this._activeSliderTarget=e,this._dragging=!0,this._hovered=!0,this._focused=!0;try{e.setPointerCapture(t)}catch{}window.addEventListener("pointermove",this._onGlobalPointerMove),window.addEventListener("pointerup",this._onGlobalPointerUp),window.addEventListener("pointercancel",this._onGlobalPointerUp)}_endDragInteraction(){const e=this._activePointerId,t=this._activeSliderTarget;if(null!=e&&t)try{t.hasPointerCapture(e)&&t.releasePointerCapture(e)}catch{}this._activePointerId=null,this._activeSliderTarget=null,this._dragging=!1,window.removeEventListener("pointermove",this._onGlobalPointerMove),window.removeEventListener("pointerup",this._onGlobalPointerUp),window.removeEventListener("pointercancel",this._onGlobalPointerUp)}render(){const e=this.pc.s.isMuted,t=this.pc.s.volume,n=e?0:Math.max(0,Math.min(1,t));return W`
       <div
         class=${Se({"fw-volume-group":!0,"fw-volume-group--expanded":this._expanded,"fw-volume-group--disabled":!this._hasAudio})}
         role="group"
         aria-label="Volume controls"
-        @mouseenter=${()=>{this._hovered=!0}}
-        @mouseleave=${()=>{this._hovered=!1,this._focused=!1}}
-        @focusin=${()=>{this._focused=!0}}
-        @focusout=${e=>{const t=e.relatedTarget;t&&this.renderRoot.contains(t)||(this._focused=!1)}}
+        @mouseenter=${this._handleMouseEnter}
+        @mouseleave=${this._handleMouseLeave}
+        @focusin=${this._handleFocusIn}
+        @focusout=${this._handleFocusOut}
         @click=${e=>{this._hasAudio&&e.target===e.currentTarget&&this.pc.toggleMute()}}
         @wheel=${this._onWheel}
       >
@@ -3418,6 +3420,8 @@ const Xt="important",Jt=" !"+Xt,Zt=_e(class extends Ee{constructor(e){if(super(e
         background: rgb(255 255 255 / 0.2);
         border-radius: 9999px;
         cursor: pointer;
+        touch-action: none;
+        user-select: none;
       }
 
       .slider-fill {
@@ -3439,7 +3443,7 @@ const Xt="important",Jt=" !"+Xt,Zt=_e(class extends Ee{constructor(e){if(super(e
         transform: translate(-50%, -50%);
         pointer-events: none;
       }
-    `],n([ye({attribute:!1})],tn.prototype,"pc",void 0),n([be()],tn.prototype,"_hovered",void 0),n([be()],tn.prototype,"_focused",void 0),n([be()],tn.prototype,"_hasAudio",void 0),tn=n([pe("fw-volume-control")],tn);let nn=class extends he{constructor(){super(...arguments),this.open=!1,this.playbackMode="auto",this.isContentLive=!0,this._playbackRate=1}updated(){if(!this.open)return;if(Number.isFinite(this.playbackRate))return void(this._playbackRate=this.playbackRate);const e=this.pc?.s.videoElement;e&&Number.isFinite(e.playbackRate)&&(this._playbackRate=e.playbackRate)}_close(){this.dispatchEvent(new CustomEvent("fw-close",{bubbles:!0,composed:!0}))}_handleModeChange(e){this.pc.setDevModeOptions({playbackMode:e}),this.dispatchEvent(new CustomEvent("fw-mode-change",{detail:{mode:e},bubbles:!0,composed:!0})),this._close()}_handleSpeedChange(e){this._playbackRate=e,this.pc.setPlaybackRate(e),this.dispatchEvent(new CustomEvent("fw-speed-change",{detail:{rate:e},bubbles:!0,composed:!0})),this._close()}_handleQualityChange(e){this.pc.selectQuality(e),this.dispatchEvent(new CustomEvent("fw-quality-change",{detail:{quality:e},bubbles:!0,composed:!0})),this._close()}_handleCaptionChange(e){"none"===e?this.pc.selectTextTrack(null):this.pc.selectTextTrack(e),this.dispatchEvent(new CustomEvent("fw-caption-change",{detail:{caption:e},bubbles:!0,composed:!0})),this._close()}_deriveFallbackQualities(){const e=this.pc?.s.streamState?.streamInfo?.meta?.tracks;return e?Object.entries(e).filter(([,e])=>"video"===e?.type).map(([e,t])=>({id:e,label:t.height?`${t.height}p`:t.codec??e,width:t.width,height:t.height,bitrate:t.bps})).sort((e,t)=>(t.height??0)-(e.height??0)):[]}render(){if(!this.open)return X;const e=this.pc.s,t=e.qualities??[],n=t.length>0?t:this._deriveFallbackQualities(),i=e.textTracks??[],r=this.qualityValue??n.find(e=>e.active)?.id??"auto",s=this.captionValue??i.find(e=>e.active)?.id??"none",a=this.supportsPlaybackRate??wt(e.videoElement);return W`
+    `],n([ye({attribute:!1})],tn.prototype,"pc",void 0),n([be()],tn.prototype,"_hovered",void 0),n([be()],tn.prototype,"_focused",void 0),n([be()],tn.prototype,"_dragging",void 0),n([be()],tn.prototype,"_hasAudio",void 0),tn=n([pe("fw-volume-control")],tn);let nn=class extends he{constructor(){super(...arguments),this.open=!1,this.playbackMode="auto",this.isContentLive=!0,this._playbackRate=1}updated(){if(!this.open)return;if(Number.isFinite(this.playbackRate))return void(this._playbackRate=this.playbackRate);const e=this.pc?.s.videoElement;e&&Number.isFinite(e.playbackRate)&&(this._playbackRate=e.playbackRate)}_close(){this.dispatchEvent(new CustomEvent("fw-close",{bubbles:!0,composed:!0}))}_handleModeChange(e){this.pc.setDevModeOptions({playbackMode:e}),this.dispatchEvent(new CustomEvent("fw-mode-change",{detail:{mode:e},bubbles:!0,composed:!0})),this._close()}_handleSpeedChange(e){this._playbackRate=e,this.pc.setPlaybackRate(e),this.dispatchEvent(new CustomEvent("fw-speed-change",{detail:{rate:e},bubbles:!0,composed:!0})),this._close()}_handleQualityChange(e){this.pc.selectQuality(e),this.dispatchEvent(new CustomEvent("fw-quality-change",{detail:{quality:e},bubbles:!0,composed:!0})),this._close()}_handleCaptionChange(e){"none"===e?this.pc.selectTextTrack(null):this.pc.selectTextTrack(e),this.dispatchEvent(new CustomEvent("fw-caption-change",{detail:{caption:e},bubbles:!0,composed:!0})),this._close()}_deriveFallbackQualities(){const e=this.pc?.s.streamState?.streamInfo?.meta?.tracks;return e?Object.entries(e).filter(([,e])=>"video"===e?.type).map(([e,t])=>({id:e,label:t.height?`${t.height}p`:t.codec??e,width:t.width,height:t.height,bitrate:t.bps})).sort((e,t)=>(t.height??0)-(e.height??0)):[]}render(){if(!this.open)return X;const e=this.pc.s,t=e.qualities??[],n=t.length>0?t:this._deriveFallbackQualities(),i=e.textTracks??[],r=this.qualityValue??n.find(e=>e.active)?.id??"auto",s=this.captionValue??i.find(e=>e.active)?.id??"none",a=this.supportsPlaybackRate??wt(e.videoElement);return W`
       <div class="fw-player-surface fw-settings-menu" role="menu" aria-label="Player settings">
         ${this.isContentLive?W`
               <div class="fw-settings-section">

package/dist/types/components/fw-player-controls.d.ts

@@ -15,6 +15,7 @@ export declare class FwPlayerControls extends LitElement {
     private _settingsOpen;
     private _isNearLiveState;
     private _buffered;
+    private _settingsAnchorEl;
     private _boundVideo;
     private _onBufferedUpdate;
     static styles: import("lit").CSSResult[];

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

@@ -7,13 +7,24 @@ export declare class FwVolumeControl extends LitElement {
     pc: PlayerControllerHost;
     private _hovered;
     private _focused;
+    private _dragging;
     private _hasAudio;
     private _activePointerId;
+    private _activeSliderTarget;
     static styles: import("lit").CSSResult[];
     private get _expanded();
+    disconnectedCallback(): void;
     protected updated(): void;
     private _updateHasAudio;
     private _setVolumeFromClientX;
+    private _beginDragInteraction;
+    private _endDragInteraction;
+    private _onGlobalPointerMove;
+    private _onGlobalPointerUp;
+    private _handleMouseEnter;
+    private _handleMouseLeave;
+    private _handleFocusIn;
+    private _handleFocusOut;
     private _onSliderPointerDown;
     private _onWheel;
     protected render(): import("lit").TemplateResult<1>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@livepeer-frameworks/player-wc",
-  "version": "0.1.8",
+  "version": "0.1.9",
   "type": "module",
   "description": "Lit Web Components for FrameWorks streaming player — <fw-player> custom element with full UI",
   "main": "dist/cjs/index.js",