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

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

/*
All material copyright ESRI, All Rights Reserved, unless otherwise specified.
See https://js.arcgis.com/4.33/esri/copyright.txt for details.
*/
import e from"../../../Color.js";import{loadCalciteComponents as t}from"../../support/componentsUtils.js";import"../../support/widgetUtils.js";import{tsx as c}from"../../support/jsxFactory.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 s=null;const a=()=>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:a}){const{state:n}=t,r="not-ready"===n||"waiting"===n,p=["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}],d=c("calcite-flow-item",{heading:a.playbackSpeed,key:"playback-speed",selected:"speed"===o.active,onCalciteFlowItemBack:()=>{o.active=null}},c("calcite-list",{label:a.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}))))),u=c("calcite-flow-item",{heading:a.quality,key:`Quality (${o.quality})`,selected:"quality"===o.active,onCalciteFlowItemBack:()=>{o.active=null}},c("calcite-list",{label:a.quality,selectionMode:"single-persist"},p.map((e=>c("calcite-list-item",{key:e,label:e,onclick:()=>{o.quality=e},selected:e===o.quality}))))),g=c("calcite-flow-item",{heading:a.graphics,key:`Graphics (${o.color})`,selected:"color"===o.active,onCalciteFlowItemBack:()=>{o.active=null}},c("calcite-block",{expanded:!0,heading:a.color},c("calcite-color-picker",{channelsDisabled:!0,format:"hex",savedDisabled:!0,scale:"s",value:o.color?.toHex()??i.toHex(),onCalciteColorPickerChange:c=>{s=c.currentTarget.value?.toString(),o.color=s?new e(s):null,o.color&&t.changeGraphicsColor(o.color)}})));return c("div",{class:l.settings},c("calcite-popover",{autoClose:!0,label:a.settings,overlayPositioning:"fixed",placement:"top-end",pointerDisabled:!0,referenceElement:"settings-action",scale:"s"},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:a.settings},c("calcite-list-item",{key:`Speed (${o.speed})`,label:a.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:a.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:a.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?d:null,"quality"===o.active?u:null,"color"===o.active?g:null)),c("calcite-action",{alignment:"center",bind:t,disabled:r,icon:"sliders",id:"settings-action",key:"settings",scale:"s",slot:"trigger",text:a.settings}))}export{n as SettingsButton,o as defaultSettings,a as loadSettingsButtonComponents};