@aidenlx/player/dist-prod/ui/time/TimeElement.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 } from "@vidstack/foundation";
import { css, html, LitElement } from "lit";
import { property, state } from "lit/decorators.js";
import { mediaStoreContext } from "../../media";
class TimeElement extends LitElement {
  constructor() {
    super(...arguments);
    this._disposal = new DisposalBin();
    this._mediaStoreConsumer = mediaStoreContext.consume(this);
    this.__seconds = 0;
    this.type = "current";
    this.showHours = false;
    this.padHours = false;
    this.remainder = false;
  }
  static get styles() {
    return [
      css`
        :host {
          display: inline-block;
          contain: content;
        }

        :host([hidden]) {
          display: none;
        }
      `
    ];
  }
  get _mediaStore() {
    return this._mediaStoreConsumer.value;
  }
  connectedCallback() {
    super.connectedCallback();
    this._handleTypeChange();
  }
  update(changedProperties) {
    if (changedProperties.has("type") || changedProperties.has("remainder")) {
      this._handleTypeChange();
    }
    super.update(changedProperties);
  }
  disconnectedCallback() {
    this._disposal.empty();
    super.disconnectedCallback();
  }
  render() {
    return html`${this._getFormattedTime()}`;
  }
  _handleTypeChange() {
    this._disposal.empty();
    const store = this._getTypeStore();
    const unsub = (this.remainder ? this._createRemainderStore(store) : store).subscribe(($seconds) => {
      this.__seconds = $seconds;
    });
    this._disposal.add(unsub);
  }
  _getTypeStore() {
    switch (this.type) {
      case "buffered":
        return this._mediaStore.bufferedAmount;
      case "seekable":
        return this._mediaStore.seekableAmount;
      case "duration":
        return this._mediaStore.duration;
      default:
        return this._mediaStore.currentTime;
    }
  }
  _createRemainderStore(secondsStore) {
    return derived([secondsStore, this._mediaStore.duration], ([$seconds, $duration]) => Math.max(0, $duration - $seconds));
  }
  _getFormattedTime() {
    return formatTime(this.__seconds, this.padHours, this.showHours);
  }
}
__decorateClass([
  state()
], TimeElement.prototype, "__seconds", 2);
__decorateClass([
  property()
], TimeElement.prototype, "type", 2);
__decorateClass([
  property({ attribute: "show-hours", type: Boolean })
], TimeElement.prototype, "showHours", 2);
__decorateClass([
  property({ attribute: "pad-hours", type: Boolean })
], TimeElement.prototype, "padHours", 2);
__decorateClass([
  property({ type: Boolean })
], TimeElement.prototype, "remainder", 2);
export {
  TimeElement
};