UNPKG

@arcgis/map-components

Version:
2 lines 5.05 kB
/* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */ import k from"./G7KHJU6J.js";import j from"./KA7BM2DQ.js";import{a as f}from"./HZFVK34O.js";import{a as _}from"./54VXNFQ4.js";import i from"./LKOVDQTE.js";import b from"./OAWV35F7.js";import{h as v}from"./AKBXFBDL.js";import"./LMBRORN7.js";import a from"./5E6WEUZS.js";import{d as m}from"./PBSJQPB2.js";import{M as d,N as h,O as c,P as u,U as g,a as n,b as e,x as r}from"./WUJCCZQC.js";import"./3TTFCHAA.js";export default $arcgis.t(([{watch:t},b,,,,p,{b:s}])=>{var M=n`:host{--arcgis-internal-video-player-controls-spacing: 16px;width:531px;height:100%}:host([inline]){width:auto;height:auto}.root,.content{height:100%}.inline{display:flex;gap:var(--calcite-spacing-xs);background-color:var(--calcite-color-foreground-1);padding:var(--calcite-spacing-xxs)}.footer{flex:1}arcgis-video{display:flex;flex:1 1 auto;aspect-ratio:16 / 9;min-height:0}`,x=p(b),l=class extends c{constructor(){super(...arguments),this.messages=f({blocking:!0}),this.viewModel=x(this),this._videoViewRef=d(),this._metadataVisible=!1,this._duration=0,this._currentTime=0,this._bufferedValue=0,this._currentValue=0,this._isBuffering=!1,this._videoViewReady=!1,this._loopPlayback=!1,this.icon="video-web",this.state=this.viewModel.state,this.layer=this.viewModel.layer,this.autoDestroyDisabled=!1,this.inline=!1,this.showFullscreenToggle=!1,this.operationalDataVisible=!1,this.hideHeader=!1,this.view=this.viewModel.view,this.arcgisPropertyChange=v()("state","layer"),this.arcgisReady=r(),this.arcgisVideoReady=r()}static{this.properties={_metadataVisible:16,_duration:16,_currentTime:16,_bufferedValue:16,_currentValue:16,_isBuffering:16,_videoViewReady:16,_layerTitle:16,_isLive:16,_loopPlayback:16,referenceElement:1,icon:1,state:32,followingMode:1,layer:0,autoDestroyDisabled:5,messageOverrides:0,label:3,inline:7,showFullscreenToggle:5,operationalDataVisible:5,hideHeader:5,view:0}}static{this.styles=M}get followingMode(){return this.viewModel.followingMode}set followingMode(i){this.viewModel.followingMode=i}async destroy(){await this.manager.destroy()}loaded(){this.manager.onLifecycle(()=>[t(()=>[this.viewModel.currentTime,this.viewModel.duration,this.viewModel.buffered,this.viewModel.ended],()=>{let{buffered:i,currentTime:y,duration:w,ended:$}=this.viewModel,a=s(w),o=s(y),V=s(i);this._duration=a,this._currentTime=o,this._bufferedValue=V/(a||1),this._currentValue=o/(a||1),this._isBuffering=!$&&this._bufferedValue<this._currentValue}),t(()=>this.layer?.title,i=>{this._layerTitle=i??void 0},{initial:!0}),t(()=>this.layer?.isLive,i=>{this._isLive=i??void 0},{initial:!0}),t(()=>this.layer?.playbackRate,i=>{typeof i=="number"&&this.viewModel.changePlaybackSpeed(i)},{initial:!0}),t(()=>this.viewModel.view?.map,()=>this.requestUpdate())])}render(){return e`<div class=${u(m(this.inline?"inline":"root",_.widget))}><calcite-panel .heading=${this.hideHeader||this.inline?void 0:this._layerTitle??this.messages.videoPlayer}>${this.inline||this.hideHeader||!this.showFullscreenToggle?null:e`<calcite-action slot=header-actions-end icon=full-screen-exit text=minimize @click=${()=>this.inline=!this.inline}></calcite-action>`}${this.inline?e`<div class="inline">${this._renderActionBar()}${this._renderSlider()}${this.showFullscreenToggle?e`<calcite-action icon=full-screen text=maximize @click=${()=>this.inline=!this.inline}></calcite-action>`:null}</div>`:e`<div class="content">${this._renderLoadingScrim()}${this._renderBuffering()}${this._renderVideoSection()}</div>`}${this.inline?null:e`<div slot=footer class="footer">${this._renderSlider()}${this._renderActionBar()}${this._renderMetadataSection()}</div>`}</calcite-panel></div>`}_renderLoadingScrim(){return this._videoViewReady?null:e`<calcite-scrim .loading=${this.state!=="error"}>${this.state==="error"?this.messages.errorLoadingLayer:null}</calcite-scrim>`}_renderBuffering(){return this._isBuffering?e`<calcite-progress type=indeterminate></calcite-progress>`:null}_renderVideoSection(){return e`<arcgis-video .layer=${this.layer} .map=${this.viewModel.view?.map} .operationalDataVisible=${this.operationalDataVisible} @arcgisViewReadyChange=${()=>{this._videoViewReady=!0,this.arcgisVideoReady.emit()}} ${h(this._videoViewRef)}></arcgis-video>`}_renderSlider(){return this._isLive?null:e`<arcgis-video-player-slider .buffered=${this._bufferedValue} .value=${this._currentValue*100} .viewModel=${this.viewModel}></arcgis-video-player-slider>`}_renderActionBar(){return e`<arcgis-video-player-action-bar .currentTime=${this._currentTime} .duration=${this._duration} .messages=${this.messages} .toggleMetadata=${()=>this._metadataVisible=!this._metadataVisible} .viewModel=${this.viewModel} .inline=${this.inline}></arcgis-video-player-action-bar>`}_renderMetadataSection(){return this._metadataVisible?e`<arcgis-video-player-metadata .messages=${this.messages} .viewModel=${this.viewModel}></arcgis-video-player-metadata>`:null}};g("arcgis-video-player",l);return l},"core/reactiveUtils","widgets/VideoPlayer/VideoPlayerViewModel",a,b,i,j,k)