@arcgis/core/widgets/VideoPlayer/components/SettingsButton.js

ArcGIS Maps SDK for JavaScript: A complete 2D and 3D mapping and data visualization API

/* COPYRIGHT Esri - https://js.arcgis.com/5.0.8/LICENSE.txt */
import e from"../../../Color.js";import{loadCalciteComponents as t}from"../../support/componentsUtils.js";import{tsx as c}from"../../support/widget.js";import{css as l}from"../css.js";const i=new e([255,127,0]),o={active:null,speed:"1x",quality:"Auto",color:i};let a=null;const s=()=>t({action:()=>import("@esri/calcite-components/dist/components/calcite-action"),flow:()=>import("@esri/calcite-components/dist/components/calcite-flow"),"flow-item":()=>import("@esri/calcite-components/dist/components/calcite-flow-item"),icon:()=>import("@esri/calcite-components/dist/components/calcite-icon"),list:()=>import("@esri/calcite-components/dist/components/calcite-list"),"list-item":()=>import("@esri/calcite-components/dist/components/calcite-list-item"),popover:()=>import("@esri/calcite-components/dist/components/calcite-popover"),block:()=>import("@esri/calcite-components/dist/components/calcite-block"),"color-picker":()=>import("@esri/calcite-components/dist/components/calcite-color-picker"),chip:()=>import("@esri/calcite-components/dist/components/calcite-chip"),"color-picker-swatch":()=>import("@esri/calcite-components/dist/components/calcite-color-picker-swatch")});function n({viewModel:t,settings:o,messages:s,topLayerDisabled:n}){const{state:r}=t,p="not-ready"===r||"waiting"===r,d=["Auto"],m=[{label:"0.25x",value:.25},{label:"0.5x",value:.5},{label:"1x",value:1},{label:"1.5x",value:1.5},{label:"2x",value:2}],u=c("calcite-flow-item",{heading:s.playbackSpeed,key:"playback-speed",selected:"speed"===o.active,onCalciteFlowItemBack:()=>{o.active=null}},c("calcite-list",{label:s.playbackSpeed,selectionMode:"single-persist"},m.map(({label:e,value:l})=>c("calcite-list-item",{key:e,label:e,onclick:()=>{o.speed=e,t.changePlaybackSpeed(l)},selected:e===o.speed})))),g=c("calcite-flow-item",{heading:s.quality,key:`Quality (${o.quality})`,selected:"quality"===o.active,onCalciteFlowItemBack:()=>{o.active=null}},c("calcite-list",{label:s.quality,selectionMode:"single-persist"},d.map(e=>c("calcite-list-item",{key:e,label:e,onclick:()=>{o.quality=e},selected:e===o.quality})))),v=c("calcite-flow-item",{heading:s.graphics,key:`Graphics (${o.color})`,selected:"color"===o.active,onCalciteFlowItemBack:()=>{o.active=null}},c("calcite-block",{expanded:!0,heading:s.color},c("calcite-color-picker",{channelsDisabled:!0,format:"hex",savedDisabled:!0,scale:"s",value:o.color?.toHex()??i.toHex(),onCalciteColorPickerChange:c=>{a=c.currentTarget.value?.toString(),o.color=a?new e(a):null,o.color&&t.changeGraphicsColor(o.color)}})));return c("div",{class:l.settings},c("calcite-popover",{autoClose:!0,label:s.settings,overlayPositioning:"fixed",placement:"top-end",pointerDisabled:!0,referenceElement:"settings-action",scale:"s",topLayerDisabled:n},c("calcite-flow",{class:l.settingsFlow,key:"root-flow"},c("calcite-flow-item",{closable:!1,heading:"Settings",key:"root-flow-item",selected:!o.active},c("calcite-list",{label:s.settings},c("calcite-list-item",{key:`Speed (${o.speed})`,label:s.speed,onclick:()=>{o.active="speed"}},c("div",{slot:"content-end"},c("calcite-chip",{label:o.speed,scale:"s"},o.speed)),c("calcite-icon",{icon:"chevron-right",scale:"s",slot:"content-end"})),c("calcite-list-item",{key:`Quality (${o.quality})`,label:s.quality,onclick:()=>{o.active="quality"}},c("div",{slot:"content-end"},c("calcite-chip",{label:o.quality,scale:"s"},o.quality)),c("calcite-icon",{icon:"chevron-right",scale:"s",slot:"content-end"})),c("calcite-list-item",{key:`Graphics (${o.color})`,label:s.graphics,onclick:()=>{o.active="color"}},c("calcite-color-picker-swatch",{color:o.color?.toString()??i.toString(),scale:"s",slot:"content-end"}),c("calcite-icon",{icon:"chevron-right",scale:"s",slot:"content-end"})))),"speed"===o.active?u:null,"quality"===o.active?g:null,"color"===o.active?v:null)),c("calcite-action",{alignment:"center",bind:t,disabled:p,icon:"sliders",id:"settings-action",key:"settings",scale:"s",slot:"trigger",text:s.settings}))}export{n as SettingsButton,o as defaultSettings,s as loadSettingsButtonComponents};