@aidenlx/player/dist/providers/video/VideoElement.js

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

import {
  __decorateClass
} from "../../chunks/chunk.S6UZ27SZ.js";
import { ifNonEmpty, ifNumber, vdsEvent } from "@vidstack/foundation";
import { html } from "lit";
import { property } from "lit/decorators.js";
import { ref } from "lit/directives/ref.js";
import { ViewType } from "../../media";
import { Html5MediaElement } from "../html5";
import { VideoFullscreenController } from "./fullscreen";
import { VideoPresentationController } from "./presentation";
import { videoElementStyles } from "./styles";
class VideoElement extends Html5MediaElement {
  constructor() {
    super(...arguments);
    this.presentationController = new VideoPresentationController(this);
    this.fullscreenController = new VideoFullscreenController(this, this.screenOrientationController, this.presentationController);
  }
  static get styles() {
    return [videoElementStyles];
  }
  static get parts() {
    return ["root", "video"];
  }
  get poster() {
    return this.mediaState.currentPoster;
  }
  set poster(newPoster) {
    this._connectedQueue.queue("current-poster", () => {
      this.dispatchEvent(vdsEvent("vds-poster-change", { detail: newPoster }));
      this.requestUpdate();
    });
  }
  get mediaElement() {
    return this._mediaRef.value;
  }
  get videoElement() {
    return this.mediaElement;
  }
  get engine() {
    return this.mediaElement;
  }
  get videoEngine() {
    return this.videoElement;
  }
  connectedCallback() {
    super.connectedCallback();
    this.dispatchEvent(vdsEvent("vds-view-type-change", {
      detail: ViewType.Video
    }));
  }
  render() {
    return this._renderVideo();
  }
  _renderVideo() {
    return html`
      <video
        part="${this._getVideoPartAttr()}"
        src="${ifNonEmpty(this._shouldSetVideoSrcAttr() ? this.src : "")}"
        width="${ifNumber(this.width)}"
        height="${ifNumber(this.height)}"
        poster="${ifNonEmpty(this.__canLoadPoster ? this.poster : "")}"
        preload="${ifNonEmpty(this.preload)}"
        crossorigin="${ifNonEmpty(this.crossOrigin)}"
        controlslist="${ifNonEmpty(this.controlsList)}"
        ?playsinline="${this.playsinline}"
        ?controls="${this.controls}"
        ?autopictureinpicture="${this.autoPiP}"
        ?disablepictureinpicture="${this.disablePiP}"
        ?disableremoteplayback="${this.disableRemotePlayback}"
        .defaultMuted="${this.defaultMuted ?? this.muted}"
        .defaultPlaybackRate="${this.defaultPlaybackRate ?? 1}"
        ${ref(this._mediaRef)}
      >
        ${this._renderMediaChildren()}
      </video>
    `;
  }
  _getVideoPartAttr() {
    return "media video";
  }
  _shouldSetVideoSrcAttr() {
    return this.canLoad;
  }
  async handleMediaCanLoad() {
    await super.handleMediaCanLoad();
    if (this._shouldSetVideoSrcAttr()) {
      this.requestUpdate();
      await this.updateComplete;
      this.load();
    }
  }
  async requestPictureInPicture() {
    return this.videoElement?.requestPictureInPicture();
  }
}
__decorateClass([
  property({ type: Boolean, attribute: "autopictureinpicture" })
], VideoElement.prototype, "autoPiP", 2);
__decorateClass([
  property({ type: Boolean, attribute: "disablepictureinpicture" })
], VideoElement.prototype, "disablePiP", 2);
__decorateClass([
  property({ reflect: true })
], VideoElement.prototype, "poster", 1);
export {
  VideoElement
};
//# sourceMappingURL=VideoElement.js.map