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

ArcGIS Map Components

import { c as d } from "../../chunks/runtime.js";
import { html as i } from "lit-html";
import a from "@arcgis/core/Color.js";
import { watch as h } from "@arcgis/core/core/reactiveUtils.js";
import { LitElement as p } from "@arcgis/lumina";
import { css as m } 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 v = m`.arcgis-video-player__settings-flow{min-width:var(--calcite-size-160)}`, $ = ["Auto"], g = [
  { label: "0.25x", value: 0.25 },
  { label: "0.5x", value: 0.5 },
  { label: "1x", value: 1 },
  { label: "1.5x", value: 1.5 },
  { label: "2x", value: 2 }
], s = new a([255, 127, 0]);
class _ extends p {
  constructor() {
    super(...arguments), this._color = null, this._speed = "1x", this._quality = "Auto", this._disabled = !1;
  }
  static {
    this.properties = { _disabled: 16, _active: 16, viewModel: 0, messages: 0 };
  }
  static {
    this.styles = v;
  }
  loaded() {
    this.manager.onLifecycle(() => [
      h(() => this.viewModel.state, (c) => {
        this._disabled = c === "not-ready" || c === "waiting";
      }, { initial: !0 })
    ]);
  }
  render() {
    const { viewModel: c, messages: e } = this, o = i`<calcite-flow-item .heading=${e.playbackSpeed} .selected=${this._active === "speed"} @calciteFlowItemBack=${() => this._active = void 0}><calcite-list .label=${e.playbackSpeed} selection-mode=single-persist>${g.map(({ label: t, value: l }) => i`<calcite-list-item .label=${t} @click=${() => {
      this._speed = t, c.changePlaybackSpeed(l);
    }} .selected=${t === this._speed}></calcite-list-item>`)}</calcite-list></calcite-flow-item>`, n = i`<calcite-flow-item .heading=${e.quality} .selected=${this._active === "quality"} @calciteFlowItemBack=${() => this._active = void 0}><calcite-list .label=${e.quality} selection-mode=single-persist>${$.map((t) => i`<calcite-list-item .label=${t} @click=${() => this._quality = t} .selected=${t === this._quality}></calcite-list-item>`)}</calcite-list></calcite-flow-item>`, r = i`<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() ?? s.toHex()} @calciteColorPickerChange=${({ currentTarget: t }) => {
      const l = t.value?.toString() ?? null;
      this._color = l ? new a(l) : null, this._color && c.changeGraphicsColor(this._color);
    }}></calcite-color-picker></calcite-block></calcite-flow-item>`;
    return i`<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 class=arcgis-video-player__settings-flow><calcite-flow-item heading=Settings .selected=${!this._active}><calcite-list .label=${e.settings}><calcite-list-item .label=${e.speed} @click=${() => this._active = "speed"}><div slot=content-end><calcite-chip .label=${this._speed} scale=s>${this._speed}</calcite-chip></div><calcite-icon icon=chevron-right 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=chevron-right 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() ?? s.toString()} scale=s slot=content-end></calcite-color-picker-swatch><calcite-icon icon=chevron-right scale=s slot=content-end></calcite-icon></calcite-list-item></calcite-list></calcite-flow-item>${this._active === "speed" ? o : null}${this._active === "quality" ? n : null}${this._active === "color" ? r : 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>`;
  }
}
d("arcgis-video-player-settings", _);
export {
  _ as VideoPlayerSettings
};