@arcgis/core/widgets/VideoPlayer.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.32/esri/copyright.txt for details.
*/
import{_ as e}from"../chunks/tslib.es6.js";import{clone as i}from"../core/lang.js";import{watch as t,initial as o}from"../core/reactiveUtils.js";import{property as s}from"../core/accessorSupport/decorators/property.js";import"../core/has.js";import"../core/Logger.js";import{subclass as r}from"../core/accessorSupport/decorators/subclass.js";import{formatDate as n}from"../intl/date.js";import a from"../views/VideoView.js";import d from"./Slider.js";import l from"./Widget.js";import{loadCalciteComponents as c}from"./support/componentsUtils.js";import{globalCss as m}from"./support/globalCss.js";import"./support/widgetUtils.js";import{messageBundle as p}from"./support/decorators/messageBundle.js";import{tsx as u}from"./support/jsxFactory.js";import{css as h}from"./VideoPlayer/css.js";import v from"./VideoPlayer/VideoPlayerViewModel.js";import{loadMetadataSectionComponents as w,MetadataSection as g}from"./VideoPlayer/components/MetadataSection.js";import{loadPlayerActionsGroupComponents as f,PlayerActionsGroup as y}from"./VideoPlayer/components/PlayerActionsGroup.js";import{loadPlayerControlsGroupComponents as V,PlayerControlsGroup as b}from"./VideoPlayer/components/PlayerControlsGroup.js";import{defaultSettings as M}from"./VideoPlayer/components/SettingsButton.js";let j=class extends l{constructor(e,t){super(e,t),this._settings=i(M),this._metadataVisible=!1,this._slider=new d({visibleElements:{labels:!1,rangeLabels:!1},min:0,max:100,values:[0],thumbsConstrained:!1}),this.videoView=new a({container:document.createElement("div"),constraints:{rotationEnabled:!1},ui:{components:["zoom"]}}),this.viewModel=new v}initialize(){this.addHandles([t((()=>this.viewModel.layer),(()=>{this.videoView.layer=this.viewModel.layer}),o),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(),V(),w(),c({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")})])}get effect(){return this.videoView.effect}set effect(e){this.videoView.effect=e}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 this.videoView.navigation.mouseWheelZoomEnabled}set zoomEnabled(e){this.videoView.navigation.mouseWheelZoomEnabled=e,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(h.base,m.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}=this.viewModel,o=this.videoView.container;if(!o)return null;o.className=h.videoView;const s=e/(t||1),r=i/(t||1);return this._slider.values=[100*r],u("section",{afterCreate:P,bind:o},u("div",{class:h.sliderProgressContainer},u("progress",{class:h.progress,max:"1",value:`${s}`}),u("div",{class:h.slider},this._slider.render())))}_renderActionBar(){return u("div",{class:h.playerToolbar},u(y,{messages:this.messages,viewModel:this.viewModel}),u("div",{class:h.playerTimecode},_(this.viewModel.currentTime)," / ",_(this.viewModel.duration)),u(b,{messages:this.messages,settings:this._settings,toggleMetadata:()=>this._metadataVisible=!this._metadataVisible,viewModel:this.viewModel}))}_renderMetadataSection(){return this._metadataVisible?u(g,{messages:this.messages,viewModel:this.viewModel}):null}};function _(e){return n(1e3*Math.round(e),{minute:"2-digit",second:"2-digit"})}function P(e){const i=this;e.prepend(i)}e([s()],j.prototype,"_settings",void 0),e([s()],j.prototype,"effect",null),e([s()],j.prototype,"icon",null),e([s()],j.prototype,"layer",null),e([s(),p("esri/widgets/VideoPlayer/t9n/VideoPlayer")],j.prototype,"messages",void 0),e([s()],j.prototype,"rotationEnabled",null),e([s()],j.prototype,"videoView",void 0),e([s({type:v})],j.prototype,"viewModel",void 0),e([s()],j.prototype,"view",null),e([s()],j.prototype,"zoomEnabled",null),j=e([r("esri.widgets.VideoPlayer")],j);const E=j;export{E as default};