@arcgis/map-components
Version:
ArcGIS Map Components
34 lines (33 loc) • 2.09 kB
JavaScript
/* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
import { c as o } from "../../chunks/runtime.js";
import { css as a, html as e } from "lit";
import { watch as l } from "@arcgis/core/core/reactiveUtils.js";
import { LitElement as r, safeClassMap as c } from "@arcgis/lumina";
import { classes as n } from "@arcgis/toolkit/dom";
import { f as t } from "../../chunks/video-utils.js";
const d = a`.toolbar{display:flex;align-items:center;background-color:var(--calcite-color-foreground-1);font-size:var(--calcite-font-size--2)}.timecode{color:var(--calcite-color-text-3);line-height:1.25rem}.controls-group{display:flex;flex:1 0 auto;justify-content:flex-end}.live-icon{color:var(--calcite-color-status-danger)}.controls-container{display:flex;align-items:center;gap:var(--calcite-spacing-md)}`;
class v extends r {
static {
this.properties = { _isLive: 16, viewModel: 0, messages: 0, currentTime: 9, duration: 9, toggleMetadata: 0, inline: 5 };
}
static {
this.styles = d;
}
loaded() {
this.manager.onLifecycle(() => [
l(() => this.viewModel.layer?.isLive, (i) => {
this._isLive = i ?? void 0;
}, { initial: !0 })
]);
}
render() {
const { messages: i } = this;
this._isLive === void 0 && (this._isLive = this.viewModel.layer?.isLive);
const s = this._isLive ? t(this.currentTime) : `${t(this.currentTime)} / ${t(this.duration)}`;
return e`<div class=${c(n("toolbar"))}><div class="controls-container"><arcgis-video-player-actions-group .inline=${this.inline} .messages=${i} .viewModel=${this.viewModel}></arcgis-video-player-actions-group>${this._isLive ? e`<calcite-icon class="live-icon" icon=beacon></calcite-icon>` : null}${!this.inline || this._isLive ? e`<div class="timecode">${s}</div>` : null}</div>${this.inline ? null : e`<arcgis-video-player-controls-group class="controls-group" .messages=${i} .toggleMetadata=${() => this.toggleMetadata()} .viewModel=${this.viewModel}></arcgis-video-player-controls-group>`}</div>`;
}
}
o("arcgis-video-player-action-bar", v);
export {
v as VideoPlayerActionBar
};