@arcgis/map-components
Version:
ArcGIS Map Components
2 lines • 4.5 kB
JavaScript
/* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
import{f as p}from"./AKBXFBDL.js";import"./LMBRORN7.js";import"./PBSJQPB2.js";import{O as d,U as h,b as c}from"./WUJCCZQC.js";import"./3TTFCHAA.js";export default $arcgis.t(([m,{watch:u}])=>{var w=["Auto"],k=[.25,.5,1,1.5,2],$=new m([255,127,0]);function s(n,t){return`${t.format(n)}x`}var o=class extends d{constructor(){super(...arguments),this._color=null,this._speed=1,this._quality="Auto",this._direction=p(),this._disabled=!1}static{this.properties={_disabled:16,_active:16,viewModel:0,messages:0}}loaded(){this.manager.onLifecycle(()=>[u(()=>this.viewModel.state,t=>{this._disabled=t==="not-ready"||t==="waiting"},{initial:!0})])}render(){let{viewModel:t,messages:e}=this,l=this._direction==="rtl"?"chevron-left":"chevron-right",a=new Intl.NumberFormat(this.messages._lang,{minimumFractionDigits:0,maximumFractionDigits:2}),v=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>${k.map(i=>c`<calcite-list-item .disabled=${t?.layer?.isLive&&i!==1} .label=${s(i,a)} @click=${()=>{this._speed=i,t.changePlaybackSpeed(i)}} .selected=${i===this._speed}></calcite-list-item>`)}</calcite-list></calcite-flow-item>`,g=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>${w.map(i=>c`<calcite-list-item .label=${i} @click=${()=>this._quality=i} .selected=${i===this._quality}></calcite-list-item>`)}</calcite-list></calcite-flow-item>`,_=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>`,b=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()??$.toHex()} @calciteColorPickerChange=${({currentTarget:i})=>{let r=i.value?.toString()??null;this._color=r?new m(r):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=${s(this._speed,a)} scale=s>${s(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()??$.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"?v:null}${this._active==="quality"?g:null}${this._active==="color"?b:null}${this._active==="loop"?_: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>`}};h("arcgis-video-player-settings",o);return o},"Color","core/reactiveUtils")