@arcgis/map-components
Version:
ArcGIS Map Components
80 lines (79 loc) • 5.89 kB
JavaScript
/* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
import { c as h } from "../../chunks/runtime.js";
import { css as u, html as e } from "lit";
import { watch as t } from "@arcgis/core/core/reactiveUtils.js";
import f from "@arcgis/core/widgets/VideoPlayer/VideoPlayerViewModel.js";
import { LitElement as g, createEvent as l, safeClassMap as m } from "@arcgis/lumina";
import { usePropertyChange as v } from "@arcgis/lumina/controllers";
import { classes as p } from "@arcgis/toolkit/dom";
import { createRef as _, ref as y } from "lit/directives/ref.js";
import { u as w } from "../../chunks/useT9n.js";
import { m as V } from "../../chunks/useViewModel.js";
import { g as $ } from "../../chunks/globalCss.js";
import { n as r } from "../../chunks/video-utils.js";
const M = u`:host{--arcgis-internal-video-player-controls-spacing: 16px;width:531px;height:100%}:host([inline]){width:auto;height:auto}.root,.content{height:100%}.inline{display:flex;gap:var(--calcite-spacing-xs);background-color:var(--calcite-color-foreground-1);padding:var(--calcite-spacing-xxs)}.footer{flex:1}arcgis-video{display:flex;flex:1 1 auto;aspect-ratio:16 / 9;min-height:0}`, b = V(f);
class T extends g {
constructor() {
super(...arguments), this.messages = w({ blocking: !0 }), this.viewModel = b(this), this._videoViewRef = _(), this._metadataVisible = !1, this._duration = 0, this._currentTime = 0, this._bufferedValue = 0, this._currentValue = 0, this._isBuffering = !1, this._videoViewReady = !1, this._loopPlayback = !1, this.icon = "video-web", this.state = this.viewModel.state, this.layer = this.viewModel.layer, this.autoDestroyDisabled = !1, this.inline = !1, this.showFullscreenToggle = !1, this.operationalDataVisible = !1, this.hideHeader = !1, this.view = this.viewModel.view, this.arcgisPropertyChange = v()("state", "layer"), this.arcgisReady = l(), this.arcgisVideoReady = l();
}
static {
this.properties = { _metadataVisible: 16, _duration: 16, _currentTime: 16, _bufferedValue: 16, _currentValue: 16, _isBuffering: 16, _videoViewReady: 16, _layerTitle: 16, _isLive: 16, _loopPlayback: 16, referenceElement: 1, icon: 1, state: 32, followingMode: 1, layer: 0, autoDestroyDisabled: 5, messageOverrides: 0, label: 3, inline: 7, showFullscreenToggle: 5, operationalDataVisible: 5, hideHeader: 5, view: 0 };
}
static {
this.styles = M;
}
get followingMode() {
return this.viewModel.followingMode;
}
set followingMode(i) {
this.viewModel.followingMode = i;
}
async destroy() {
await this.manager.destroy();
}
loaded() {
this.manager.onLifecycle(() => [
t(() => [this.viewModel.currentTime, this.viewModel.duration, this.viewModel.buffered, this.viewModel.ended], () => {
const { buffered: i, currentTime: o, duration: n, ended: d } = this.viewModel, s = r(n), a = r(o), c = r(i);
this._duration = s, this._currentTime = a, this._bufferedValue = c / (s || 1), this._currentValue = a / (s || 1), this._isBuffering = !d && this._bufferedValue < this._currentValue;
}),
t(() => this.layer?.title, (i) => {
this._layerTitle = i ?? void 0;
}, { initial: !0 }),
t(() => this.layer?.isLive, (i) => {
this._isLive = i ?? void 0;
}, { initial: !0 }),
t(() => this.layer?.playbackRate, (i) => {
typeof i == "number" && this.viewModel.changePlaybackSpeed(i);
}, { initial: !0 }),
t(() => this.viewModel.view?.map, () => this.requestUpdate())
]);
}
render() {
return e`<div class=${m(p(this.inline ? "inline" : "root", $.widget))}><calcite-panel .heading=${this.hideHeader || this.inline ? void 0 : this._layerTitle ?? this.messages.videoPlayer}>${this.inline || this.hideHeader || !this.showFullscreenToggle ? null : e`<calcite-action slot=header-actions-end icon=full-screen-exit text=minimize =${() => this.inline = !this.inline}></calcite-action>`}${this.inline ? e`<div class="inline">${this._renderActionBar()}${this._renderSlider()}${this.showFullscreenToggle ? e`<calcite-action icon=full-screen text=maximize =${() => this.inline = !this.inline}></calcite-action>` : null}</div>` : e`<div class="content">${this._renderLoadingScrim()}${this._renderBuffering()}${this._renderVideoSection()}</div>`}${this.inline ? null : e`<div slot=footer class="footer">${this._renderSlider()}${this._renderActionBar()}${this._renderMetadataSection()}</div>`}</calcite-panel></div>`;
}
_renderLoadingScrim() {
return this._videoViewReady ? null : e`<calcite-scrim .loading=${this.state !== "error"}>${this.state === "error" ? this.messages.errorLoadingLayer : null}</calcite-scrim>`;
}
_renderBuffering() {
return this._isBuffering ? e`<calcite-progress type=indeterminate></calcite-progress>` : null;
}
_renderVideoSection() {
return e`<arcgis-video .layer=${this.layer} .map=${this.viewModel.view?.map} .operationalDataVisible=${this.operationalDataVisible} =${() => {
this._videoViewReady = !0, this.arcgisVideoReady.emit();
}} ${y(this._videoViewRef)}></arcgis-video>`;
}
_renderSlider() {
return this._isLive ? null : e`<arcgis-video-player-slider .buffered=${this._bufferedValue} .value=${this._currentValue * 100} .viewModel=${this.viewModel}></arcgis-video-player-slider>`;
}
_renderActionBar() {
return e`<arcgis-video-player-action-bar .currentTime=${this._currentTime} .duration=${this._duration} .messages=${this.messages} .toggleMetadata=${() => this._metadataVisible = !this._metadataVisible} .viewModel=${this.viewModel} .inline=${this.inline}></arcgis-video-player-action-bar>`;
}
_renderMetadataSection() {
return this._metadataVisible ? e`<arcgis-video-player-metadata .messages=${this.messages} .viewModel=${this.viewModel}></arcgis-video-player-metadata>` : null;
}
}
h("arcgis-video-player", T);
export {
T as ArcgisVideoPlayer
};