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

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

import {
  __decorateClass
} from "../../chunks/chunk.LNH2V2XS.js";
import { ifNonEmpty, redispatchEvent, storeRecordSubscription } from "@vidstack/foundation";
import {
  css,
  html,
  LitElement
} from "lit";
import { property, state } from "lit/decorators.js";
import { createRef, ref } from "lit/directives/ref.js";
import { sliderStoreContext } from "./store";
class SliderVideoElement extends LitElement {
  constructor() {
    super();
    this._videoRef = createRef();
    this.__canPlay = false;
    this.__hasError = false;
    storeRecordSubscription(this, sliderStoreContext, "pointerValue", ($previewTime) => {
      this._updateCurrentTime($previewTime);
    });
  }
  static get styles() {
    return [
      css`
        :host {
          display: inline-block;
          contain: content;
        }

        :host([hidden]) {
          display: none;
        }

        video {
          display: block;
          width: 100%;
          height: auto;
        }
      `
    ];
  }
  get videoElement() {
    return this._videoRef.value;
  }
  _updateCurrentTime(seconds) {
    if (!this.__hasError && this.__canPlay && this.videoElement.currentTime !== seconds) {
      this.videoElement.currentTime = seconds;
    }
  }
  willUpdate(changedProperties) {
    if (changedProperties.has("src")) {
      this.__canPlay = false;
      this.__hasError = false;
      this.removeAttribute("video-can-play");
      this.removeAttribute("video-error");
    }
    super.willUpdate(changedProperties);
  }
  render() {
    return this._renderVideo();
  }
  _renderVideo() {
    return html`
      <video
        part="video"
        muted
        playsinline
        preload="auto"
        src=${ifNonEmpty(this.src)}
        @canplay=${this._handleCanPlay}
        @error=${this._handleError}
        ${ref(this._videoRef)}
      ></video>
    `;
  }
  async _handleCanPlay(event) {
    this.__canPlay = true;
    this.setAttribute("video-can-play", "");
    redispatchEvent(this, event);
  }
  _handleError(event) {
    this.__hasError = true;
    this.setAttribute("video-error", "");
    redispatchEvent(this, event);
  }
}
__decorateClass([
  property()
], SliderVideoElement.prototype, "src", 2);
__decorateClass([
  state()
], SliderVideoElement.prototype, "__canPlay", 2);
__decorateClass([
  state()
], SliderVideoElement.prototype, "__hasError", 2);
export {
  SliderVideoElement
};