@aidenlx/player/dist-prod/ui/time-slider/TimeSliderElement.js

Headless web components that make integrating media on the a web a breeze.

import {
  __decorateClass
} from "../../chunks/chunk.LNH2V2XS.js";
import {
  eventListener,
  formatSpokenTime,
  isKeyboardEvent,
  setAttributeIfEmpty,
  throttle
} from "@vidstack/foundation";
import { property, state } from "lit/decorators.js";
import { mediaStoreSubscription } from "../../media";
import { SliderElement } from "../slider";
import { timeSliderElementStyles } from "./styles";
class TimeSliderElement extends SliderElement {
  constructor() {
    super();
    this._step = 0.1;
    this.value = 0;
    this.valueText = "{currentTime} out of {duration}";
    this.pauseWhileDragging = false;
    this.seekingRequestThrottle = 100;
    this.__mediaDuration = 0;
    this.__mediaPaused = true;
    this._handleSliderDragStart = eventListener(this, "vds-slider-drag-start", (event) => {
      this._togglePlaybackWhileDragging(event);
    });
    this._handleSliderValueChange = eventListener(this, "vds-slider-value-change", (event) => {
      if (isKeyboardEvent(event.originEvent)) {
        this._dispatchSeekingRequest.cancel();
        this._mediaRemote.seek(this.value, event);
      }
    });
    this._handleSliderDragValueChange = eventListener(this, "vds-slider-drag-value-change", (event) => {
      this._dispatchSeekingRequest(event);
    });
    this._handleSliderDragEnd = eventListener(this, "vds-slider-drag-end", (event) => {
      this._dispatchSeekingRequest.cancel();
      this._mediaRemote.seek(this.value, event);
      this._togglePlaybackWhileDragging(event);
    });
    this._dispatchSeekingRequest = throttle((event) => {
      this._mediaRemote.seeking(this.value, event);
    }, this.seekingRequestThrottle);
    this._wasPlayingBeforeDragStart = false;
    mediaStoreSubscription(this, "currentTime", ($currentTime) => {
      this.value = $currentTime;
    });
    mediaStoreSubscription(this, "duration", ($duration) => {
      this.__mediaDuration = $duration;
      this.requestUpdate("max");
    });
    mediaStoreSubscription(this, "paused", ($paused) => {
      this.__mediaPaused = $paused;
    });
  }
  static get styles() {
    return [super.styles, timeSliderElementStyles];
  }
  connectedCallback() {
    super.connectedCallback();
    setAttributeIfEmpty(this, "aria-label", "Media time");
  }
  get min() {
    return 0;
  }
  set min(_) {
  }
  get max() {
    return this.__mediaDuration;
  }
  set max(_) {
  }
  update(changedProperties) {
    if (changedProperties.has("disabled") && this.disabled) {
      this._dispatchSeekingRequest.cancel();
    }
    super.update(changedProperties);
  }
  disconnectedCallback() {
    this._dispatchSeekingRequest.cancel();
    super.disconnectedCallback();
  }
  _getValueMin() {
    return "0%";
  }
  _getValueNow() {
    return `${Math.round(this.fillPercent)}%`;
  }
  _getValueText() {
    return this.valueText.replace("{currentTime}", formatSpokenTime(this.value)).replace("{duration}", formatSpokenTime(this.__mediaDuration));
  }
  _getValueMax() {
    return "100%";
  }
  _togglePlaybackWhileDragging(event) {
    if (!this.pauseWhileDragging)
      return;
    if (this.isDragging && !this.__mediaPaused) {
      this._wasPlayingBeforeDragStart = true;
      this._mediaRemote.pause(event);
    } else if (this._wasPlayingBeforeDragStart && !this.isDragging && this.__mediaPaused) {
      this._wasPlayingBeforeDragStart = false;
      this._mediaRemote.play(event);
    }
  }
}
__decorateClass([
  property({ attribute: false, state: true })
], TimeSliderElement.prototype, "value", 2);
__decorateClass([
  property({ attribute: false })
], TimeSliderElement.prototype, "min", 1);
__decorateClass([
  property({ attribute: false })
], TimeSliderElement.prototype, "max", 1);
__decorateClass([
  property({ attribute: "value-text" })
], TimeSliderElement.prototype, "valueText", 2);
__decorateClass([
  property({ attribute: "pause-while-dragging", type: Boolean })
], TimeSliderElement.prototype, "pauseWhileDragging", 2);
__decorateClass([
  property({ attribute: "seeking-request-throttle", type: Number })
], TimeSliderElement.prototype, "seekingRequestThrottle", 2);
__decorateClass([
  state()
], TimeSliderElement.prototype, "__mediaDuration", 2);
__decorateClass([
  state()
], TimeSliderElement.prototype, "__mediaPaused", 2);
export {
  TimeSliderElement
};