@arcgis/map-components/dist/components/arcgis-video-player/customElement.js

ArcGIS Map Components

import { c as h } from "../../chunks/runtime.js";
import { html as i } from "lit-html";
import { usePropertyChange as c } from "@arcgis/lumina/controllers";
import { classes as v } from "@arcgis/components-utils";
import u from "@arcgis/core/widgets/VideoPlayer/VideoPlayerViewModel.js";
import { watch as t } from "@arcgis/core/core/reactiveUtils.js";
import { LitElement as m, createEvent as a, noShadowRoot as g, safeClassMap as o } from "@arcgis/lumina";
import { createRef as f, ref as _ } from "lit-html/directives/ref.js";
import { u as p } from "../../chunks/useT9n.js";
import { m as y } from "../../chunks/useViewModel.js";
import { g as w } from "../../chunks/globalCss.js";
import { css as V } from "@lit/reactive-element/css-tag.js";
/*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
See https://js.arcgis.com/4.33/esri/copyright.txt for details.
v4.33.13 */
const M = V`@layer{.arcgis-video-player{--esri-video-player-view-height: 300px;--esri-video-player-view-aspect-ratio: 1.77;--esri-video-player-controls-spacing: 16px;min-width:calc(var(--esri-video-player-view-height) * var(--esri-video-player-view-aspect-ratio))}.arcgis-video-player .arcgis-video-player__video-view{display:flex;height:var(--esri-video-player-view-height)}}`, d = "arcgis-video-player", l = {
  base: d,
  videoView: `${d}__video-view`
}, $ = y(u);
class b extends m {
  constructor() {
    super(...arguments), this.messages = p({ blocking: !0 }), this.viewModel = $(this), this._videoViewRef = f(), this._metadataVisible = !1, this._duration = 0, this._currentTime = 0, this._bufferedValue = 0, this._currentValue = 0, this._isBuffering = !1, this._videoViewReady = !1, this.position = "top-left", this.icon = "video-web", this.state = this.viewModel.state, this.layer = this.viewModel.layer, this.autoDestroyDisabled = !1, this.hideHeader = !1, this.arcgisPropertyChange = c()("state", "layer"), this.arcgisReady = a(), this.arcgisVideoReady = a();
  }
  static {
    this.properties = { _metadataVisible: 16, _duration: 16, _currentTime: 16, _bufferedValue: 16, _currentValue: 16, _isBuffering: 16, _videoViewReady: 16, _layerTitle: 16, _isLive: 16, referenceElement: 1, position: 3, icon: 1, state: 3, followingMode: 1, layer: 0, autoDestroyDisabled: 5, messageOverrides: 0, label: 3, hideHeader: 5 };
  }
  static {
    this.styles = M;
  }
  static {
    this.shadowRootOptions = g;
  }
  get followingMode() {
    return this.viewModel.followingMode;
  }
  set followingMode(e) {
    this.viewModel.followingMode = e;
  }
  async destroy() {
    await this.manager.destroy();
  }
  loaded() {
    this.manager.onLifecycle(() => [
      t(() => [this.viewModel.currentTime, this.viewModel.duration, this.viewModel.duration, this.viewModel.ended], () => {
        const { buffered: e, currentTime: s, duration: r, ended: n } = this.viewModel;
        this._duration = r, this._currentTime = s, this._bufferedValue = e / (r || 1), this._currentValue = s / (r || 1), this._isBuffering = !n && this._bufferedValue < this._currentValue;
      }),
      t(() => this._videoViewRef.value?.ready, (e) => {
        this._videoViewReady = !!e;
      }, { initial: !0 }),
      t(() => this.layer?.title, (e) => {
        this._layerTitle = e ?? void 0;
      }, { initial: !0 }),
      t(() => this.layer?.isLive, (e) => {
        this._isLive = e ?? void 0;
      }, { initial: !0 }),
      t(() => this.viewModel.view?.map, () => this.requestUpdate())
    ]);
  }
  render() {
    return i`<div class=${o(v(l.base, w.widget))}><calcite-panel .heading=${this.hideHeader ? void 0 : this._layerTitle ?? this.messages.videoPlayer}>${this._renderLoadingScrim()}${this._renderBuffering()}${this._renderVideoSection()}${this._renderSlider()}${this._renderActionBar()}${this._renderMetadataSection()}</calcite-panel></div>`;
  }
  _renderLoadingScrim() {
    return this._videoViewReady ? null : i`<calcite-scrim .loading=${this.state !== "error"}>${this.state === "error" ? this.messages.errorLoadingLayer : null}</calcite-scrim>`;
  }
  _renderBuffering() {
    return this._isBuffering ? i`<calcite-progress type=indeterminate></calcite-progress>` : null;
  }
  _renderVideoSection() {
    return i`<div class=${o(l.videoView)}><arcgis-video .layer=${this.layer} .map=${this.viewModel.view?.map} @arcgisViewReadyChange=${() => this.arcgisVideoReady.emit()} ${_(this._videoViewRef)}></arcgis-video></div>`;
  }
  _renderSlider() {
    return this._isLive ? null : i`<arcgis-video-player-slider .buffered=${this._bufferedValue} .value=${this._currentValue * 100} .viewModel=${this.viewModel}></arcgis-video-player-slider>`;
  }
  _renderActionBar() {
    return i`<arcgis-video-player-action-bar .currentTime=${this._currentTime} .duration=${this._duration} .messages=${this.messages} .toggleMetadata=${() => this._metadataVisible = !this._metadataVisible} .viewModel=${this.viewModel}></arcgis-video-player-action-bar>`;
  }
  _renderMetadataSection() {
    return this._metadataVisible ? i`<arcgis-video-player-metadata .messages=${this.messages} .viewModel=${this.viewModel}></arcgis-video-player-metadata>` : null;
  }
}
h("arcgis-video-player", b);
export {
  b as ArcgisVideoPlayer
};