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

ArcGIS Map Components

/* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
import { c as v } from "../../chunks/runtime.js";
import { html as c } from "lit";
import d from "@arcgis/core/Color.js";
import { watch as g } from "@arcgis/core/core/reactiveUtils.js";
import { LitElement as _ } from "@arcgis/lumina";
import { useDirection as b } from "@arcgis/lumina/controllers";
const u = ["Auto"], w = [0.25, 0.5, 1, 1.5, 2], r = new d([255, 127, 0]);
function o(s, t) {
  return `${t.format(s)}x`;
}
class k extends _ {
  constructor() {
    super(...arguments), this._color = null, this._speed = 1, this._quality = "Auto", this._direction = b(), this._disabled = !1;
  }
  static {
    this.properties = { _disabled: 16, _active: 16, viewModel: 0, messages: 0 };
  }
  loaded() {
    this.manager.onLifecycle(() => [
      g(() => this.viewModel.state, (t) => {
        this._disabled = t === "not-ready" || t === "waiting";
      }, { initial: !0 })
    ]);
  }
  render() {
    const { viewModel: t, messages: e } = this, l = this._direction === "rtl" ? "chevron-left" : "chevron-right", a = new Intl.NumberFormat(this.messages._lang, {
      minimumFractionDigits: 0,
      maximumFractionDigits: 2
    }), h = c`<calcite-flow-item .heading=${e.playbackSpeed} .selected=${this._active === "speed"} @calciteFlowItemBack=${() => this._active = void 0}><calcite-list .label=${e.playbackSpeed} selection-mode=single-persist>${w.map((i) => c`<calcite-list-item .disabled=${t?.layer?.isLive && i !== 1} .label=${o(i, a)} @click=${() => {
      this._speed = i, t.changePlaybackSpeed(i);
    }} .selected=${i === this._speed}></calcite-list-item>`)}</calcite-list></calcite-flow-item>`, m = c`<calcite-flow-item .heading=${e.quality} .selected=${this._active === "quality"} @calciteFlowItemBack=${() => this._active = void 0}><calcite-list .label=${e.quality} selection-mode=single-persist>${u.map((i) => c`<calcite-list-item .label=${i} @click=${() => this._quality = i} .selected=${i === this._quality}></calcite-list-item>`)}</calcite-list></calcite-flow-item>`, p = c`<calcite-flow-item .heading=${e.loopPlayback} .selected=${this._active === "loop"} @calciteFlowItemBack=${() => this._active = void 0}><calcite-block .label=${e.loop} expanded><calcite-switch .disabled=${t?.layer?.isLive} .label=${e.loopPlayback} .checked=${t?.layer?.loop} .labelTextStart=${e.loop} @calciteSwitchChange=${() => {
      t.toggleLoopPlayback();
    }}></calcite-switch></calcite-block></calcite-flow-item>`, $ = c`<calcite-flow-item .heading=${e.graphics} .selected=${this._active === "color"} @calciteFlowItemBack=${() => this._active = void 0}><calcite-block .heading=${e.color} expanded><calcite-color-picker channels-disabled format=hex saved-disabled scale=s .value=${this._color?.toHex() ?? r.toHex()} @calciteColorPickerChange=${({ currentTarget: i }) => {
      const n = i.value?.toString() ?? null;
      this._color = n ? new d(n) : null, this._color && t.changeGraphicsColor(this._color);
    }}></calcite-color-picker></calcite-block></calcite-flow-item>`;
    return c`<div><calcite-popover auto-close .label=${e.settings} overlay-positioning=fixed placement=top-end pointer-disabled reference-element=settings-action scale=s @calcitePopoverClose=${() => this._active = void 0}><calcite-flow><calcite-flow-item .heading=${e.settings} .selected=${!this._active}><calcite-list .label=${e.settings}><calcite-list-item .label=${e.loop} @click=${() => this._active = "loop"}><div slot=content-end><calcite-chip .label=${e.loopPlayback} .icon=${this.viewModel.layer?.loop ? "recurrence" : "break-recurrence"}></calcite-chip></div><calcite-icon .icon=${l} scale=s slot=content-end></calcite-icon></calcite-list-item><calcite-list-item .label=${e.speed} @click=${() => this._active = "speed"}><div slot=content-end><calcite-chip .label=${o(this._speed, a)} scale=s>${o(this._speed, a)}</calcite-chip></div><calcite-icon .icon=${l} scale=s slot=content-end></calcite-icon></calcite-list-item><calcite-list-item .label=${e.quality} @click=${() => this._active = "quality"}><div slot=content-end><calcite-chip .label=${this._quality} scale=s>${this._quality}</calcite-chip></div><calcite-icon .icon=${l} scale=s slot=content-end></calcite-icon></calcite-list-item><calcite-list-item .label=${e.graphics} @click=${() => this._active = "color"}><calcite-color-picker-swatch .color=${this._color?.toString() ?? r.toString()} scale=s slot=content-end></calcite-color-picker-swatch><calcite-icon .icon=${l} scale=s slot=content-end></calcite-icon></calcite-list-item></calcite-list></calcite-flow-item>${this._active === "speed" ? h : null}${this._active === "quality" ? m : null}${this._active === "color" ? $ : null}${this._active === "loop" ? p : null}</calcite-flow></calcite-popover><calcite-action alignment=center .disabled=${this._disabled} icon=sliders id=settings-action scale=s slot=trigger .text=${e.settings}></calcite-action></div>`;
  }
}
v("arcgis-video-player-settings", k);
export {
  k as VideoPlayerSettings
};