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

ArcGIS Map Components

import { c as r } from "../../chunks/runtime.js";
import { html as t } from "lit-html";
import { watch as d } from "@arcgis/core/core/reactiveUtils.js";
import { LitElement as m, noShadowRoot as g } from "@arcgis/lumina";
/*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
See https://js.arcgis.com/4.33/esri/copyright.txt for details.
v4.33.16 */
function f(i) {
  return i.followingMode === "none" ? "circle-disallowed" : i.followingMode === "follow-sensor" ? "zoom-to-object" : i.followingMode === "follow-frame" ? "follow" : "video";
}
class p extends m {
  constructor() {
    super(...arguments), this._disabled = !1;
  }
  static {
    this.properties = { _disabled: 16, viewModel: 0, toggleMetadata: 0, messages: 0 };
  }
  static {
    this.shadowRootOptions = g;
  }
  loaded() {
    this.manager.onLifecycle(() => [
      d(() => this.viewModel.state, (e) => {
        this._disabled = e === "not-ready" || e === "waiting";
      }, { initial: !0 })
    ]);
  }
  render() {
    const { viewModel: e, messages: l, _disabled: o } = this, c = t`<div><calcite-popover auto-close .label=${l.layers} overlay-positioning=fixed placement=top-end pointer-disabled reference-element=layers-action scale=s><calcite-panel .heading=${l.layers}><calcite-list .label=${l.layers} selection-mode=multiple><calcite-list-item .label=${l.sensor} @click=${() => {
      e.toggleSensorDisplay();
    }} .selected=${!!e.layer?.telemetryDisplay?.sensorLocation}></calcite-list-item><calcite-list-item .label=${l.sightLine} @click=${() => {
      e.toggleSensorSightLineDisplay();
    }} .selected=${!!e.layer?.telemetryDisplay?.lineOfSight}></calcite-list-item><calcite-list-item .label=${l.sensorTrail} @click=${() => {
      e.toggleSensorTrailDisplay();
    }} .selected=${!!e.layer?.telemetryDisplay?.sensorTrail}></calcite-list-item><calcite-list-item .label=${l.frameCenter} @click=${() => {
      e.toggleFrameCenterDisplay();
    }} .selected=${!!e.layer?.telemetryDisplay?.frameCenter}></calcite-list-item><calcite-list-item .label=${l.frameOutline} @click=${() => {
      e.toggleFrameOutlineDisplay();
    }} .selected=${!!e.layer?.telemetryDisplay?.frameOutline}></calcite-list-item><calcite-list-item .label=${l.frame} @click=${() => {
      e.toggleFrameDisplay();
    }} .selected=${!!e.layer?.telemetryDisplay?.frame}></calcite-list-item></calcite-list></calcite-panel></calcite-popover><calcite-action alignment=center .disabled=${o} icon=layers id=layers-action scale=s slot=trigger .text=${l.layers}></calcite-action></div>`, a = t`<div><calcite-popover auto-close .label=${l.follow} overlay-positioning=fixed placement=top-end pointer-disabled reference-element=follow-action scale=s><calcite-panel .heading=${l.follow}><calcite-list .label=${l.follow} selection-mode=single><calcite-list-item .label=${l.none} @click=${() => {
      e.followingMode = "none";
    }} .selected=${e.followingMode === "none"}><calcite-icon icon=circle-disallowed scale=s slot=content-start></calcite-icon></calcite-list-item><calcite-list-item .label=${l.sensor} @click=${() => {
      e.followingMode = "follow-sensor";
    }} .selected=${e.followingMode === "follow-sensor"}><calcite-icon icon=zoom-to-object scale=s slot=content-start></calcite-icon></calcite-list-item><calcite-list-item .label=${l.frame} @click=${() => {
      e.followingMode = "follow-frame";
    }} .selected=${e.followingMode === "follow-frame"}><calcite-icon icon=follow scale=s slot=content-start></calcite-icon></calcite-list-item><calcite-list-item .label=${l.video} @click=${() => {
      e.followingMode = "follow-both";
    }} .selected=${e.followingMode === "follow-both"}><calcite-icon icon=video scale=s slot=content-start></calcite-icon></calcite-list-item></calcite-list></calcite-panel></calcite-popover><calcite-action alignment=center .disabled=${o} .icon=${f(e)} id=follow-action scale=s slot=trigger .text=${l.follow}></calcite-action></div>`, s = t`<arcgis-video-player-settings .messages=${l} .viewModel=${e}></arcgis-video-player-settings>`, n = t`<calcite-action alignment=center .disabled=${o} icon=feature-details @click=${() => this.toggleMetadata()} scale=s .text=${l.metadata}></calcite-action>`;
    return t`<calcite-action-bar expand-disabled layout=horizontal scale=s>${[c, a, s, n]}</calcite-action-bar>`;
  }
}
r("arcgis-video-player-controls-group", p);
export {
  p as VideoPlayerControlsGroup
};