@aidenlx/player/dist-prod/ui/slider/SliderValueTextElement.js

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

import {
  __decorateClass
} from "../../chunks/chunk.LNH2V2XS.js";
import { derived, DisposalBin, formatTime, round } from "@vidstack/foundation";
import { css, html, LitElement } from "lit";
import { property, state } from "lit/decorators.js";
import { sliderStoreContext } from "./store";
class SliderValueTextElement extends LitElement {
  constructor() {
    super(...arguments);
    this._disposal = new DisposalBin();
    this._sliderStoreConsumer = sliderStoreContext.consume(this);
    this.__value = 0;
    this.type = "current";
    this.showHours = false;
    this.padHours = false;
    this.decimalPlaces = 2;
  }
  static get styles() {
    return [
      css`
        :host {
          display: inline-block;
          contain: content;
        }

        :host([hidden]) {
          display: none;
        }
      `
    ];
  }
  get _sliderStore() {
    return this._sliderStoreConsumer.value;
  }
  connectedCallback() {
    super.connectedCallback();
    this._handleTypeChange();
  }
  update(changedProperties) {
    if (changedProperties.has("type") || changedProperties.has("format")) {
      this._handleTypeChange();
    }
    super.update(changedProperties);
  }
  disconnectedCallback() {
    this._disposal.empty();
    super.disconnectedCallback();
  }
  render() {
    return html`${this._getValueText()}`;
  }
  _handleTypeChange() {
    this._disposal.empty();
    const valueStore = this._sliderStore[this.type === "current" ? "value" : "pointerValue"];
    const store = this.format === "percent" ? this._createPercentStore(valueStore) : valueStore;
    const unsub = store.subscribe(($value) => {
      this.__value = $value;
    });
    this._disposal.add(unsub);
  }
  _createPercentStore(valueStore) {
    return derived([valueStore, this._sliderStore.min, this._sliderStore.max], ([$value, $min, $max]) => {
      const range = $max - $min;
      return $value / range * 100;
    });
  }
  _getValueText() {
    switch (this.format) {
      case "percent":
        return this._getPercentFormat();
      case "time":
        return this._getTimeFormat();
      default:
        return `${this.__value}`;
    }
  }
  _getPercentFormat() {
    return `${round(this.__value, this.decimalPlaces)}%`;
  }
  _getTimeFormat() {
    return formatTime(this.__value, this.padHours, this.showHours);
  }
}
__decorateClass([
  state()
], SliderValueTextElement.prototype, "__value", 2);
__decorateClass([
  property()
], SliderValueTextElement.prototype, "type", 2);
__decorateClass([
  property()
], SliderValueTextElement.prototype, "format", 2);
__decorateClass([
  property({ attribute: "show-hours", type: Boolean })
], SliderValueTextElement.prototype, "showHours", 2);
__decorateClass([
  property({ attribute: "pad-hours", type: Boolean })
], SliderValueTextElement.prototype, "padHours", 2);
__decorateClass([
  property({ attribute: "decimal-places", type: Number })
], SliderValueTextElement.prototype, "decimalPlaces", 2);
export {
  SliderValueTextElement
};