@arcgis/core/widgets/VideoPlayer.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{__decorate as e}from"tslib";import{deprecateWidget as i}from"../core/deprecate.js";import{clone as t}from"../core/lang.js";import o from"../core/Logger.js";import{watch as s,initial as r}from"../core/reactiveUtils.js";import{property as n,subclass as a}from"../core/accessorSupport/decorators.js";import{formatDate as l}from"../intl/date.js";import d from"../views/VideoView.js";import c from"./Slider.js";import m from"./Widget.js";import{loadCalciteComponents as p}from"./support/componentsUtils.js";import{globalCss as v}from"./support/globalCss.js";import{messageBundle as h,tsx as u}from"./support/widget.js";import{css as w}from"./VideoPlayer/css.js";import g from"./VideoPlayer/VideoPlayerViewModel.js";import{loadMetadataSectionComponents as y,MetadataSection as V}from"./VideoPlayer/components/MetadataSection.js";import{loadPlayerActionsGroupComponents as f,PlayerActionsGroup as b}from"./VideoPlayer/components/PlayerActionsGroup.js";import{loadPlayerControlsGroupComponents as M,PlayerControlsGroup as _}from"./VideoPlayer/components/PlayerControlsGroup.js";import{defaultSettings as j}from"./VideoPlayer/components/SettingsButton.js";let P=class extends m{constructor(e,s){super(e,s),this._settings=t(j),this._metadataVisible=!1,this._slider=new c({suppressDeprecationWarning:!0,visibleElements:{labels:!1,rangeLabels:!1},min:0,max:100,values:[0],thumbsConstrained:!1}),this.videoView=new d({container:document.createElement("div"),constraints:{rotationEnabled:!1}}),this.viewModel=new g,i(o.getLogger(this),"Video Player","arcgis-video-player",{version:"4.33"})}initialize(){this.addHandles([s(()=>this.viewModel.layer,()=>{this.videoView.layer=this.viewModel.layer},r),s(()=>this.view?.map,()=>{this.videoView.map=this.view?.map},r),this._slider.on(["thumb-change","thumb-drag"],({value:e})=>{const i=e*this.viewModel.duration/100;this.viewModel.seekTo(i)})])}loadDependencies(){return Promise.all([f(),M(),y(),p({progress:()=>import("@esri/calcite-components/dist/components/calcite-progress"),panel:()=>import("@esri/calcite-components/dist/components/calcite-panel"),scrim:()=>import("@esri/calcite-components/dist/components/calcite-scrim"),icon:()=>import("@esri/calcite-components/dist/components/calcite-icon")})])}get icon(){return"video-web"}set icon(e){this._overrideIfSome("icon",e)}get layer(){return this.viewModel.layer}set layer(e){this.viewModel.layer=e}get rotationEnabled(){return this.videoView.constraints.rotationEnabled}set rotationEnabled(e){this.videoView.constraints.rotationEnabled=e,this.videoView.ui.components=e?[...this.videoView.ui.components,"compass"]:this.videoView.ui.components.filter(e=>"compass"!==e)}get view(){return this.viewModel.view}set view(e){this.viewModel.view=e}get zoomEnabled(){return"zoom"===this.videoView.navigation.actionMap.mouseWheel}set zoomEnabled(e){this.videoView.navigation.actionMap.mouseWheel=e?"zoom":"none",this.videoView.ui.components=e?[...this.videoView.ui.components,"zoom"]:this.videoView.ui.components.filter(e=>"zoom"!==e)}render(){return u("div",{class:this.classes(w.base,v.widget)},u("calcite-panel",{heading:this.layer?.title||"Video Player"},this._renderLoadingScrim(),this._renderBuffering(),this._renderVideoSection(),this._renderActionBar(),this._renderMetadataSection()))}_renderLoadingScrim(){const{state:e}=this.viewModel;return this.videoView.ready?null:u("calcite-scrim",{loading:"error"!==e},"error"===e?this.messages.errorLoadingLayer:null)}_renderBuffering(){const{currentTime:e,buffered:i,duration:t}=this.viewModel,o=i/(t||1),s=e/(t||1);return this.viewModel.ended||o>s?null:u("calcite-progress",{type:"indeterminate"})}_renderVideoSection(){const{buffered:e,currentTime:i,duration:t,layer:o}=this.viewModel,s=this.videoView.container,r=!!o?.isLive;if(!s)return null;s.className=w.videoView;const n=e/(t||1),a=i/(t||1);return this._slider.values=[100*a],u("section",{afterCreate:E,bind:s},r?null:u("div",{class:w.sliderProgressContainer},u("progress",{class:w.progress,max:"1",value:`${n}`}),u("div",{class:w.slider},this._slider.render())))}_renderActionBar(){const e=!!this.viewModel.layer?.isLive,i=e?w.playerToolbarTopPadding:void 0;return u("div",{class:this.classes(w.playerToolbar,i)},u("div",{class:w.playerActionsGroup},u(b,{messages:this.messages,viewModel:this.viewModel}),e?u("calcite-icon",{class:w.playerLiveIcon,icon:"beacon"}):null,u("div",{class:w.playerTimecode},L(this.viewModel.currentTime)," / ",L(this.viewModel.duration))),u(_,{messages:this.messages,settings:this._settings,toggleMetadata:()=>this._metadataVisible=!this._metadataVisible,topLayerDisabled:this.topLayerDisabled,viewModel:this.viewModel}))}_renderMetadataSection(){return this._metadataVisible?u(V,{messages:this.messages,viewModel:this.viewModel}):null}};function L(e){return isFinite(e)?l(1e3*Math.round(e),{minute:"2-digit",second:"2-digit"}):""}function E(e){const i=this;e.prepend(i)}e([n()],P.prototype,"_settings",void 0),e([n()],P.prototype,"icon",null),e([n()],P.prototype,"layer",null),e([n(),h("esri/widgets/VideoPlayer/t9n/VideoPlayer")],P.prototype,"messages",void 0),e([n()],P.prototype,"rotationEnabled",null),e([n()],P.prototype,"videoView",void 0),e([n({type:g})],P.prototype,"viewModel",void 0),e([n()],P.prototype,"view",null),e([n()],P.prototype,"zoomEnabled",null),P=e([a("esri.widgets.VideoPlayer")],P);const S=P;export{S as default};