iobroker.lovelace
Version:
With this adapter you can build visualization for ioBroker with Home Assistant Lovelace UI
2 lines • 27.9 kB
JavaScript
export const __webpack_ids__=["79931"];export const __webpack_modules__={74564:function(e,t,i){i.d(t,{Z:()=>s});const a=e=>{const t=parseFloat(e);if(isNaN(t))throw new Error(`${e} is not a number`);return t};function s(e){if(!e)return null;try{if(e.endsWith("%"))return{w:100,h:a(e.substr(0,e.length-1))};const t=e.replace(":","x").split("x");return 0===t.length?null:1===t.length?{w:a(t[0]),h:1}:{w:a(t[0]),h:a(t[1])}}catch(e){}return null}},68424:function(e,t,i){var a=i(44249),s=i(72621),n=i(57243),o=i(15093),r=i(91583),d=i(27486),l=i(47194),h=i(75278),c=i(99650),u=(i(96e3),i(92745),i(9359),i(31526),i(20552)),_=i(36522);i(99426);(0,a.Z)([(0,o.Mo)("ha-web-rtc-player")],(function(e,t){class i extends t{constructor(...t){super(...t),e(this)}}return{F:i,d:[{kind:"field",decorators:[(0,o.Cb)({attribute:!1})],key:"hass",value:void 0},{kind:"field",decorators:[(0,o.Cb)()],key:"entityid",value:void 0},{kind:"field",decorators:[(0,o.Cb)({type:Boolean,attribute:"controls"})],key:"controls",value:()=>!1},{kind:"field",decorators:[(0,o.Cb)({type:Boolean,attribute:"muted"})],key:"muted",value:()=>!1},{kind:"field",decorators:[(0,o.Cb)({type:Boolean,attribute:"autoplay"})],key:"autoPlay",value:()=>!1},{kind:"field",decorators:[(0,o.Cb)({type:Boolean,attribute:"playsinline"})],key:"playsInline",value:()=>!1},{kind:"field",decorators:[(0,o.Cb)({attribute:"poster-url"})],key:"posterUrl",value:void 0},{kind:"field",decorators:[(0,o.SB)()],key:"_error",value:void 0},{kind:"field",decorators:[(0,o.IO)("#remote-stream")],key:"_videoEl",value:void 0},{kind:"field",key:"_clientConfig",value:void 0},{kind:"field",key:"_peerConnection",value:void 0},{kind:"field",key:"_remoteStream",value:void 0},{kind:"field",key:"_unsub",value:void 0},{kind:"field",key:"_sessionId",value:void 0},{kind:"field",key:"_candidatesList",value:()=>[]},{kind:"method",key:"render",value:function(){return this._error?n.dy`<ha-alert alert-type="error">${this._error}</ha-alert>`:n.dy` <video id="remote-stream" ?autoplay="${this.autoPlay}" .muted="${this.muted}" ?playsinline="${this.playsInline}" ?controls="${this.controls}" poster="${(0,u.o)(this.posterUrl)}" ="${this._loadedData}"></video> `}},{kind:"method",key:"connectedCallback",value:function(){(0,s.Z)(i,"connectedCallback",this,3)([]),this.hasUpdated&&this.entityid&&this._startWebRtc()}},{kind:"method",key:"disconnectedCallback",value:function(){(0,s.Z)(i,"disconnectedCallback",this,3)([]),this._cleanUp()}},{kind:"method",key:"willUpdate",value:function(e){(0,s.Z)(i,"willUpdate",this,3)([e]),e.has("entityid")&&this._startWebRtc()}},{kind:"method",key:"_startWebRtc",value:async function(){if(this._cleanUp(),"undefined"==typeof RTCPeerConnection)return this._error="WebRTC is not supported in this browser",void(0,_.B)(this,"streams",{hasAudio:!1,hasVideo:!1});this.hass&&this.entityid&&(this._error=void 0,this._startTimer(),this._logEvent("start clientConfig"),this._clientConfig=await(0,c.z9)(this.hass,this.entityid),this._logEvent("end clientConfig",this._clientConfig),this._peerConnection=new RTCPeerConnection(this._clientConfig.configuration),this._clientConfig.dataChannel&&this._peerConnection.createDataChannel(this._clientConfig.dataChannel),this._peerConnection.onnegotiationneeded=this._startNegotiation,this._peerConnection.onicecandidate=this._handleIceCandidate,this._peerConnection.oniceconnectionstatechange=this._iceConnectionStateChanged,this._peerConnection.onsignalingstatechange=e=>{if("stable"===e.target.signalingState)this._logEvent("ICE negotiation complete");else this._logEvent("Signaling state changed",e.target.signalingState)},this._remoteStream=new MediaStream,this._peerConnection.ontrack=this._addTrack,this._peerConnection.addTransceiver("audio",{direction:"recvonly"}),this._peerConnection.addTransceiver("video",{direction:"recvonly"}))}},{kind:"field",key:"_startNegotiation",value(){return async()=>{if(!this._peerConnection)return;const e={offerToReceiveAudio:!0,offerToReceiveVideo:!0};this._logEvent("start createOffer",e);const t=await this._peerConnection.createOffer(e);if(!this._peerConnection)return;if(this._logEvent("end createOffer",t),this._logEvent("start setLocalDescription"),await this._peerConnection.setLocalDescription(t),!this._peerConnection||!this.entityid)return;this._logEvent("end setLocalDescription");let i="";if(this._clientConfig?.getCandidatesUpfront&&(await new Promise((e=>{this._peerConnection.onicegatheringstatechange=t=>{const i=t.target.iceGatheringState;"complete"===i&&(this._peerConnection.onicegatheringstatechange=null,e()),this._logEvent("Ice gathering state changed",i)}})),!this._peerConnection||!this.entityid))return;for(;this._candidatesList.length;){const e=this._candidatesList.pop();e&&(i+=`a=${e}\r\n`)}const a=t.sdp+i;this._logEvent("start webRtcOffer",a);try{this._unsub=(0,c.T9)(this.hass,this.entityid,a,(e=>this._handleOfferEvent(e)))}catch(e){this._error="Failed to start WebRTC stream: "+e.message,this._cleanUp()}}}},{kind:"field",key:"_iceConnectionStateChanged",value(){return()=>{this._logEvent("ice connection state change",this._peerConnection?.iceConnectionState),"failed"===this._peerConnection?.iceConnectionState&&this._peerConnection.restartIce()}}},{kind:"method",key:"_handleOfferEvent",value:async function(e){if(this.entityid){if("session"===e.type&&(this._sessionId=e.session_id,this._candidatesList.forEach((t=>(0,c.r)(this.hass,this.entityid,e.session_id,t.toJSON()))),this._candidatesList=[]),"answer"===e.type&&(this._logEvent("answer",e.answer),this._handleAnswer(e)),"candidate"===e.type){this._logEvent("remote ice candidate",e.candidate);try{const t=e.candidate.sdpMid||null!=e.candidate.sdpMLineIndex?new RTCIceCandidate(e.candidate):new RTCIceCandidate({candidate:e.candidate.candidate,sdpMid:"0"});await(this._peerConnection?.addIceCandidate(t))}catch(e){console.error(e)}}"error"===e.type&&(this._error="Failed to start WebRTC stream: "+e.message,this._cleanUp())}}},{kind:"field",key:"_handleIceCandidate",value(){return e=>{this.entityid&&e.candidate?.candidate&&(this._logEvent("local ice candidate",e.candidate?.candidate,e.candidate?.sdpMLineIndex),this._sessionId?(0,c.r)(this.hass,this.entityid,this._sessionId,e.candidate.toJSON()):this._candidatesList.push(e.candidate))}}},{kind:"field",key:"_addTrack",value(){return async e=>{this._remoteStream&&(this._remoteStream.addTrack(e.track),this.hasUpdated||await this.updateComplete,this._videoEl.srcObject=this._remoteStream)}}},{kind:"method",key:"_handleAnswer",value:async function(e){if(!this._peerConnection?.signalingState||["stable","closed"].includes(this._peerConnection.signalingState))return;const t=new RTCSessionDescription({type:"answer",sdp:e.answer});try{this._logEvent("start setRemoteDescription",t),await this._peerConnection.setRemoteDescription(t)}catch(e){this._error="Failed to connect WebRTC stream: "+e.message,this._cleanUp()}this._logEvent("end setRemoteDescription")}},{kind:"method",key:"_cleanUp",value:function(){this._remoteStream&&(this._remoteStream.getTracks().forEach((e=>{e.stop()})),this._remoteStream=void 0);const e=this._videoEl;e&&(e.removeAttribute("src"),e.load()),this._peerConnection&&(this._peerConnection.close(),this._peerConnection.onnegotiationneeded=null,this._peerConnection.onicecandidate=null,this._peerConnection.oniceconnectionstatechange=null,this._peerConnection.onicegatheringstatechange=null,this._peerConnection.ontrack=null,this._peerConnection.onsignalingstatechange=null,this._peerConnection=void 0,this._logEvent("stopped"),this._stopTimer()),this._unsub?.then((e=>e())),this._unsub=void 0,this._sessionId=void 0,this._candidatesList=[]}},{kind:"method",key:"_loadedData",value:function(){const e=this._videoEl.srcObject,t={hasAudio:Boolean(e?.getAudioTracks().length),hasVideo:Boolean(e?.getVideoTracks().length)};(0,_.B)(this,"load"),(0,_.B)(this,"streams",t),this._logEvent("loadedData",t),this._stopTimer()}},{kind:"method",key:"_startTimer",value:function(){}},{kind:"method",key:"_stopTimer",value:function(){}},{kind:"method",key:"_logEvent",value:function(e,...t){}},{kind:"field",static:!0,key:"styles",value:()=>n.iv`:host,video{display:block}video{width:100%;max-height:var(--video-max-height,calc(100vh - 97px))}`}]}}),n.oi);const v="mjpeg";(0,a.Z)([(0,o.Mo)("ha-camera-stream")],(function(e,t){class i extends t{constructor(...t){super(...t),e(this)}}return{F:i,d:[{kind:"field",decorators:[(0,o.Cb)({attribute:!1})],key:"hass",value:void 0},{kind:"field",decorators:[(0,o.Cb)({attribute:!1})],key:"stateObj",value:void 0},{kind:"field",decorators:[(0,o.Cb)({type:Boolean,attribute:"controls"})],key:"controls",value:()=>!1},{kind:"field",decorators:[(0,o.Cb)({type:Boolean,attribute:"muted"})],key:"muted",value:()=>!1},{kind:"field",decorators:[(0,o.Cb)({type:Boolean,attribute:"allow-exoplayer"})],key:"allowExoPlayer",value:()=>!1},{kind:"field",decorators:[(0,o.SB)()],key:"_posterUrl",value:void 0},{kind:"field",decorators:[(0,o.SB)()],key:"_connected",value:()=>!1},{kind:"field",decorators:[(0,o.SB)()],key:"_capabilities",value:void 0},{kind:"field",decorators:[(0,o.SB)()],key:"_hlsStreams",value:void 0},{kind:"field",decorators:[(0,o.SB)()],key:"_webRtcStreams",value:void 0},{kind:"method",key:"willUpdate",value:function(e){e.has("stateObj")&&this.stateObj&&e.get("stateObj")?.entity_id!==this.stateObj.entity_id&&(this._getCapabilities(),this._getPosterUrl())}},{kind:"method",key:"connectedCallback",value:function(){(0,s.Z)(i,"connectedCallback",this,3)([]),this._connected=!0}},{kind:"method",key:"disconnectedCallback",value:function(){(0,s.Z)(i,"disconnectedCallback",this,3)([]),this._connected=!1}},{kind:"method",key:"render",value:function(){if(!this.stateObj)return n.Ld;const e=this._streams(this._capabilities?.frontend_stream_types,this._hlsStreams,this._webRtcStreams);return n.dy`${(0,r.r)(e,(e=>e.type+this.stateObj.entity_id),(e=>this._renderStream(e)))}`}},{kind:"method",key:"_renderStream",value:function(e){return this.stateObj?e.type===v?n.dy`<img .src="${this._connected?(0,c.nk)(this.stateObj):this._posterUrl||""}" alt="${`Preview of the ${(0,l.C)(this.stateObj)} camera.`}">`:e.type===c.kU?n.dy`<ha-hls-player autoplay playsinline .allowExoPlayer="${this.allowExoPlayer}" .muted="${this.muted}" .controls="${this.controls}" .hass="${this.hass}" .entityid="${this.stateObj.entity_id}" .posterUrl="${this._posterUrl}" ="${this._handleHlsStreams}" class="${e.visible?"":"hidden"}"></ha-hls-player>`:e.type===c.jU?n.dy`<ha-web-rtc-player autoplay playsinline .muted="${this.muted}" .controls="${this.controls}" .hass="${this.hass}" .entityid="${this.stateObj.entity_id}" .posterUrl="${this._posterUrl}" ="${this._handleWebRtcStreams}" class="${e.visible?"":"hidden"}"></ha-web-rtc-player>`:n.Ld:n.Ld}},{kind:"method",key:"_getCapabilities",value:async function(){this._capabilities=void 0,this._hlsStreams=void 0,this._webRtcStreams=void 0,(0,h.e)(this.stateObj,c.qW)?this._capabilities=await(0,c.ou)(this.hass,this.stateObj.entity_id):this._capabilities={frontend_stream_types:[]}}},{kind:"method",key:"_getPosterUrl",value:async function(){try{this._posterUrl=await(0,c.i4)(this.hass,this.stateObj.entity_id,this.clientWidth,this.clientHeight)}catch(e){this._posterUrl=void 0}}},{kind:"method",key:"_handleHlsStreams",value:function(e){this._hlsStreams=e.detail}},{kind:"method",key:"_handleWebRtcStreams",value:function(e){this._webRtcStreams=e.detail}},{kind:"field",key:"_streams",value:()=>(0,d.Z)(((e,t,i)=>{if(!e)return[];if(0===e.length)return[{type:v,visible:!0}];if(1===e.length)return e[0]===c.kU&&!1===t?.hasVideo||e[0]===c.jU&&!1===i?.hasVideo?[{type:v,visible:!0}]:[{type:e[0],visible:!0}];if(t&&i)return t.hasVideo&&t.hasAudio&&!i.hasAudio?[{type:c.kU,visible:!0}]:i.hasVideo?[{type:c.jU,visible:!0}]:[{type:v,visible:!0}];if(t?.hasVideo!==i?.hasVideo){if(t?.hasVideo)return[{type:c.kU,visible:!0},{type:c.jU,visible:!1}];if(!1===t?.hasVideo)return[{type:c.jU,visible:!0}];if(i?.hasVideo)return[{type:c.jU,visible:!0},{type:c.kU,visible:!1}];if(!1===i?.hasVideo)return[{type:c.kU,visible:!0}]}return[{type:c.kU,visible:!0},{type:c.jU,visible:!1}]}))},{kind:"field",static:!0,key:"styles",value:()=>n.iv`:host,img{display:block}img{width:100%}.hidden{display:none}`}]}}),n.oi)},96e3:function(e,t,i){var a=i(44249),s=i(72621),n=(i(75656),i(50100),i(18084),i(57243)),o=i(15093),r=i(36522),d=i(76320),l=(i(99426),i(99650)),h=i(72344);(0,a.Z)([(0,o.Mo)("ha-hls-player")],(function(e,t){class a extends t{constructor(...t){super(...t),e(this)}}return{F:a,d:[{kind:"field",decorators:[(0,o.Cb)({attribute:!1})],key:"hass",value:void 0},{kind:"field",decorators:[(0,o.Cb)()],key:"entityid",value:void 0},{kind:"field",decorators:[(0,o.Cb)()],key:"url",value:void 0},{kind:"field",decorators:[(0,o.Cb)({attribute:"poster-url"})],key:"posterUrl",value:void 0},{kind:"field",decorators:[(0,o.Cb)({type:Boolean,attribute:"controls"})],key:"controls",value:()=>!1},{kind:"field",decorators:[(0,o.Cb)({type:Boolean,attribute:"muted"})],key:"muted",value:()=>!1},{kind:"field",decorators:[(0,o.Cb)({type:Boolean,attribute:"autoplay"})],key:"autoPlay",value:()=>!1},{kind:"field",decorators:[(0,o.Cb)({type:Boolean,attribute:"playsinline"})],key:"playsInline",value:()=>!1},{kind:"field",decorators:[(0,o.Cb)({type:Boolean,attribute:"allow-exoplayer"})],key:"allowExoPlayer",value:()=>!1},{kind:"field",decorators:[(0,o.IO)("video")],key:"_videoEl",value:void 0},{kind:"field",decorators:[(0,o.SB)()],key:"_error",value:void 0},{kind:"field",decorators:[(0,o.SB)()],key:"_errorIsFatal",value:()=>!1},{kind:"field",decorators:[(0,o.SB)()],key:"_url",value:void 0},{kind:"field",key:"_hlsPolyfillInstance",value:void 0},{kind:"field",key:"_exoPlayer",value:()=>!1},{kind:"field",static:!0,key:"streamCount",value:()=>0},{kind:"method",key:"connectedCallback",value:function(){(0,s.Z)(a,"connectedCallback",this,3)([]),a.streamCount+=1,this.hasUpdated&&(this._resetError(),this._startHls())}},{kind:"method",key:"disconnectedCallback",value:function(){(0,s.Z)(a,"disconnectedCallback",this,3)([]),a.streamCount-=1,this._cleanUp()}},{kind:"method",key:"render",value:function(){return n.dy` ${this._error?n.dy`<ha-alert alert-type="error" class="${this._errorIsFatal?"fatal":"retry"}"> ${this._error} </ha-alert>`:""} ${this._errorIsFatal?"":n.dy`<video .poster="${this.posterUrl}" ?autoplay="${this.autoPlay}" .muted="${this.muted}" ?playsinline="${this.playsInline}" ?controls="${this.controls}" ="${this._loadedData}"></video>`} `}},{kind:"method",key:"updated",value:function(e){(0,s.Z)(a,"updated",this,3)([e]);const t=e.has("entityid"),i=e.has("url");t?this._getStreamUrlFromEntityId():i&&this.url&&(this._cleanUp(),this._resetError(),this._url=this.url,this._startHls())}},{kind:"method",key:"_getStreamUrlFromEntityId",value:async function(){if(this._cleanUp(),this._resetError(),(0,h.p)(this.hass,"stream")){if(this.entityid)try{const{url:e}=await(0,l.Lr)(this.hass,this.entityid);this._url=this.hass.hassUrl(e),this._cleanUp(),this._resetError(),this._startHls()}catch(e){console.error(e),(0,r.B)(this,"streams",{hasAudio:!1,hasVideo:!1})}}else this._setFatalError("Streaming component is not loaded.")}},{kind:"method",key:"_startHls",value:async function(){const e=fetch(this._url),t=(await Promise.all([i.e("83895"),i.e("66095")]).then(i.bind(i,17231))).default;if(!this.isConnected)return;let a=t.isSupported();if(a||(a=""!==this._videoEl.canPlayType("application/vnd.apple.mpegurl")),!a)return void this._setFatalError(this.hass.localize("ui.components.media-browser.video_not_supported"));const s=this.allowExoPlayer&&this.hass.auth.external?.config.hasExoPlayer,n=await(await e).text();if(!this.isConnected)return;const o=/#EXT-X-STREAM-INF:.*?(?:CODECS=".*?([^.]*)?\..*?,([^.]*)?\..*?".*?)?(?:\n|\r\n)(.+)/g,r=o.exec(n),d=o.exec(n);let l;l=null!==r&&null===d?new URL(r[3],this._url).href:this._url;const h=r?`${r[1]},${r[2]}`:void 0;this._reportStreams(h),s&&(h?.includes("hevc")||h?.includes("hev1"))?this._renderHLSExoPlayer(l):t.isSupported()?this._renderHLSPolyfill(this._videoEl,t,l):this._renderHLSNative(this._videoEl,l)}},{kind:"method",key:"_renderHLSExoPlayer",value:async function(e){this._exoPlayer=!0,window.addEventListener("resize",this._resizeExoPlayer),this.updateComplete.then((()=>(0,d.y)())).then(this._resizeExoPlayer),this._videoEl.style.visibility="hidden",await this.hass.auth.external.fireMessage({type:"exoplayer/play_hls",payload:{url:e,muted:this.muted}})}},{kind:"field",key:"_resizeExoPlayer",value(){return()=>{if(!this._videoEl)return;const e=this._videoEl.getBoundingClientRect();this.hass.auth.external.fireMessage({type:"exoplayer/resize",payload:{left:e.left,top:e.top,right:e.right,bottom:e.bottom}})}}},{kind:"method",key:"_isLLHLSSupported",value:function(){if(a.streamCount<=2)return!0;if(!("performance"in window)||0===performance.getEntriesByType("resource").length)return!1;const e=performance.getEntriesByType("resource")[0];return"nextHopProtocol"in e&&"h2"===e.nextHopProtocol}},{kind:"method",key:"_renderHLSPolyfill",value:async function(e,t,i){const a=new t({backBufferLength:60,fragLoadingTimeOut:3e4,manifestLoadingTimeOut:3e4,levelLoadingTimeOut:3e4,maxLiveSyncPlaybackRate:2,lowLatencyMode:this._isLLHLSSupported()});this._hlsPolyfillInstance=a,a.attachMedia(e),a.on(t.Events.MEDIA_ATTACHED,(()=>{this._resetError(),a.loadSource(i)})),a.on(t.Events.FRAG_LOADED,((e,t)=>{this._resetError()})),a.on(t.Events.ERROR,((e,i)=>{if(i.fatal)if(i.type===t.ErrorTypes.NETWORK_ERROR){switch(i.details){case t.ErrorDetails.MANIFEST_LOAD_ERROR:{let e="Error starting stream, see logs for details";void 0!==i.response&&void 0!==i.response.code&&(i.response.code>=500?e+=" (Server failure)":i.response.code>=400?e+=" (Stream never started)":e+=" ("+i.response.code+")"),this._setRetryableError(e);break}case t.ErrorDetails.MANIFEST_LOAD_TIMEOUT:this._setRetryableError("Timeout while starting stream");break;default:this._setRetryableError("Stream network error")}a.startLoad()}else i.type===t.ErrorTypes.MEDIA_ERROR?(this._setRetryableError("Error with media stream contents"),a.recoverMediaError()):this._setFatalError("Error playing stream")}))}},{kind:"method",key:"_renderHLSNative",value:async function(e,t){e.src=t,e.addEventListener("loadedmetadata",(()=>{e.play()}))}},{kind:"method",key:"_cleanUp",value:function(){this._hlsPolyfillInstance&&(this._hlsPolyfillInstance.destroy(),this._hlsPolyfillInstance=void 0),this._exoPlayer&&(window.removeEventListener("resize",this._resizeExoPlayer),this.hass.auth.external.fireMessage({type:"exoplayer/stop"}),this._exoPlayer=!1),this._videoEl&&(this._videoEl.removeAttribute("src"),this._videoEl.load())}},{kind:"method",key:"_resetError",value:function(){this._error=void 0,this._errorIsFatal=!1}},{kind:"method",key:"_setFatalError",value:function(e){this._error=e,this._errorIsFatal=!0,(0,r.B)(this,"streams",{hasAudio:!1,hasVideo:!1})}},{kind:"method",key:"_setRetryableError",value:function(e){this._error=e,this._errorIsFatal=!1,(0,r.B)(this,"streams",{hasAudio:!1,hasVideo:!1})}},{kind:"method",key:"_reportStreams",value:function(e){const t=e?.split(",");(0,r.B)(this,"streams",{hasAudio:t?.includes("mp4a")??!1,hasVideo:t?.includes("mp4a")?t?.length>1:Boolean(t?.length)})}},{kind:"method",key:"_loadedData",value:function(){(0,r.B)(this,"load")}},{kind:"field",static:!0,key:"styles",value:()=>n.iv`:host,video{display:block}video{width:100%;max-height:var(--video-max-height,calc(100vh - 97px))}.fatal{display:block;padding:100px 16px}.retry{display:block}`}]}}),n.oi)},72099:function(e,t,i){i.d(t,{U:()=>a});const a=e=>`/api/image_proxy/${e.entity_id}?token=${e.attributes.access_token}&state=${e.state}`},63848:function(e,t,i){i.a(e,(async function(e,t){try{var a=i(44249),s=i(72621),n=(i(9359),i(56475),i(57243)),o=i(15093),r=i(35359),d=i(69634),l=i(73358),h=i(73850),c=i(74564),u=(i(68424),i(17170)),_=i(99650),v=i(96194),y=i(72099),k=e([u]);u=(k.then?(await k)():k)[0];const p=1e4,f="grayscale(100%)",g=640,b=9/16;var m=function(e){return e[e.Loading=1]="Loading",e[e.Loaded=2]="Loaded",e[e.Error=3]="Error",e}(m||{});(0,a.Z)([(0,o.Mo)("hui-image")],(function(e,t){class i extends t{constructor(...t){super(...t),e(this)}}return{F:i,d:[{kind:"field",decorators:[(0,o.Cb)({attribute:!1})],key:"hass",value:void 0},{kind:"field",decorators:[(0,o.Cb)()],key:"entity",value:void 0},{kind:"field",decorators:[(0,o.Cb)()],key:"image",value:void 0},{kind:"field",decorators:[(0,o.Cb)({attribute:!1})],key:"stateImage",value:void 0},{kind:"field",decorators:[(0,o.Cb)({attribute:!1})],key:"cameraImage",value:void 0},{kind:"field",decorators:[(0,o.Cb)({attribute:!1})],key:"cameraView",value:void 0},{kind:"field",decorators:[(0,o.Cb)({attribute:!1})],key:"aspectRatio",value:void 0},{kind:"field",decorators:[(0,o.Cb)()],key:"filter",value:void 0},{kind:"field",decorators:[(0,o.Cb)({attribute:!1})],key:"stateFilter",value:void 0},{kind:"field",decorators:[(0,o.Cb)({attribute:!1})],key:"darkModeImage",value:void 0},{kind:"field",decorators:[(0,o.Cb)({attribute:!1})],key:"darkModeFilter",value:void 0},{kind:"field",decorators:[(0,o.Cb)({attribute:!1})],key:"fitMode",value:void 0},{kind:"field",decorators:[(0,o.SB)()],key:"_imageVisible",value:()=>!1},{kind:"field",decorators:[(0,o.SB)()],key:"_loadState",value:void 0},{kind:"field",decorators:[(0,o.SB)()],key:"_cameraImageSrc",value:void 0},{kind:"field",decorators:[(0,o.SB)()],key:"_loadedImageSrc",value:void 0},{kind:"field",decorators:[(0,o.SB)()],key:"_lastImageHeight",value:void 0},{kind:"field",key:"_intersectionObserver",value:void 0},{kind:"field",key:"_cameraUpdater",value:void 0},{kind:"field",key:"_ratio",value:()=>null},{kind:"method",key:"connectedCallback",value:function(){(0,s.Z)(i,"connectedCallback",this,3)([]),void 0===this._loadState&&(this._loadState=m.Loading),this.cameraImage&&"live"!==this.cameraView&&this._startIntersectionObserverOrUpdates()}},{kind:"method",key:"disconnectedCallback",value:function(){(0,s.Z)(i,"disconnectedCallback",this,3)([]),this._stopUpdateCameraInterval(),this._stopIntersectionObserver(),this._imageVisible=void 0}},{kind:"method",key:"handleIntersectionCallback",value:function(e){this._imageVisible=e[0].isIntersecting}},{kind:"method",key:"willUpdate",value:function(e){if(e.has("hass")){const t=e.get("hass");this._shouldStartCameraUpdates(t)?this._startIntersectionObserverOrUpdates():this.hass.connected||(this._stopUpdateCameraInterval(),this._stopIntersectionObserver(),this._loadState=m.Loading,this._cameraImageSrc=void 0,this._loadedImageSrc=void 0)}e.has("_imageVisible")&&(this._imageVisible?this._shouldStartCameraUpdates()&&this._startUpdateCameraInterval():this._stopUpdateCameraInterval()),e.has("aspectRatio")&&(this._ratio=this.aspectRatio?(0,c.Z)(this.aspectRatio):null),this._loadState!==m.Loading||this.cameraImage||(this._loadState=m.Loaded)}},{kind:"method",key:"render",value:function(){if(!this.hass)return n.Ld;const e=Boolean(this._ratio&&this._ratio.w>0&&this._ratio.h>0),t=this.entity?this.hass.states[this.entity]:void 0,i=t?t.state:v.nZ;let a,s,o=!this.stateImage;if(this.cameraImage)"live"===this.cameraView?s=this.hass.states[this.cameraImage]:a=this._cameraImageSrc;else if(this.stateImage){const e=this.stateImage[i];e?a=e:(a=this.image,o=!0)}else a=this.darkModeImage&&this.hass.themes.darkMode?this.darkModeImage:t&&"image"===(0,h.M)(t.entity_id)?(0,y.U)(t):this.image;a&&(a=this.hass.hassUrl(a));let c=this.filter||"";if(this.hass.themes.darkMode&&this.darkModeFilter&&(c+=this.darkModeFilter),this.stateFilter&&this.stateFilter[i]&&(c+=this.stateFilter[i]),!c&&this.entity){c=(!t||l.tj.includes(i))&&o?f:""}return n.dy` <div style="${(0,d.V)({paddingBottom:e?`${(100*this._ratio.h/this._ratio.w).toFixed(2)}%`:void 0===this._lastImageHeight?"56.25%":void 0,backgroundImage:e&&this._loadedImageSrc?`url("${this._loadedImageSrc}")`:void 0,filter:this._loadState===m.Loaded||"live"===this.cameraView?c:void 0})}" class="container ${(0,r.$)({ratio:e||void 0===this._lastImageHeight,contain:"contain"===this.fitMode,fill:"fill"===this.fitMode})}"> ${this.cameraImage&&"live"===this.cameraView?n.dy` <ha-camera-stream muted .hass="${this.hass}" .stateObj="${s}" ="${this._onVideoLoad}"></ha-camera-stream> `:void 0===a?n.Ld:n.dy` <img id="image" src="${a}" alt="${this.entity||""}" ="${this._onImageError}" ="${this._onImageLoad}" style="${(0,d.V)({display:e||this._loadState===m.Loaded?"block":"none"})}"> `} ${this._loadState===m.Error?n.dy`<div id="brokenImage" style="${(0,d.V)({height:e?void 0:`${this._lastImageHeight}px`||"100%"})}"></div>`:"live"===this.cameraView||void 0!==a&&this._loadState!==m.Loading?"":n.dy`<div class="progress-container" style="${(0,d.V)({height:e?void 0:`${this._lastImageHeight}px`||"100%"})}"> <ha-spinner class="render-spinner" size="small"></ha-spinner> </div>`} </div> `}},{kind:"method",key:"_shouldStartCameraUpdates",value:function(e){return!(e&&e.connected===this.hass.connected||!this.hass.connected||"live"===this.cameraView)}},{kind:"method",key:"_startIntersectionObserverOrUpdates",value:function(){"IntersectionObserver"in window?(this._intersectionObserver||(this._intersectionObserver=new IntersectionObserver(this.handleIntersectionCallback.bind(this))),this._intersectionObserver.observe(this)):(this._imageVisible=!0,this._startUpdateCameraInterval())}},{kind:"method",key:"_stopIntersectionObserver",value:function(){this._intersectionObserver&&this._intersectionObserver.disconnect()}},{kind:"method",key:"_startUpdateCameraInterval",value:function(){this._stopUpdateCameraInterval(),this._updateCameraImageSrc(),this.cameraImage&&this.isConnected&&(this._cameraUpdater=window.setInterval((()=>this._updateCameraImageSrcAtInterval()),p))}},{kind:"method",key:"_stopUpdateCameraInterval",value:function(){this._cameraUpdater&&(clearInterval(this._cameraUpdater),this._cameraUpdater=void 0)}},{kind:"method",key:"_onImageError",value:function(){this._loadState=m.Error}},{kind:"method",key:"_onImageLoad",value:async function(e){this._loadState=m.Loaded;const t=e.target;this._ratio&&this._ratio.w>0&&this._ratio.h>0&&(this._loadedImageSrc=t.src),await this.updateComplete,this._lastImageHeight=t.offsetHeight}},{kind:"method",key:"_onVideoLoad",value:async function(e){this._loadState=m.Loaded;const t=e.currentTarget;await this.updateComplete,this._lastImageHeight=t.offsetHeight}},{kind:"method",key:"_updateCameraImageSrcAtInterval",value:async function(){return this._loadState===m.Loading&&this._onImageError(),this._updateCameraImageSrc()}},{kind:"method",key:"_updateCameraImageSrc",value:async function(){if(!this.hass||!this.cameraImage)return;if(!this.hass.states[this.cameraImage])return void this._onImageError();const e=this.clientWidth||g;let t,i=Math.ceil(e*devicePixelRatio);this._lastImageHeight?t=Math.ceil(this._lastImageHeight*devicePixelRatio):this._ratio&&this._ratio.w>0&&this._ratio.h>0?t=Math.ceil(i*(this._ratio.h/this._ratio.w)):(i*=2,t=Math.ceil(i*b)),this._cameraImageSrc=await(0,_.i4)(this.hass,this.cameraImage,i,t),void 0===this._cameraImageSrc&&this._onImageError()}},{kind:"field",static:!0,key:"styles",value:()=>n.iv`:host{display:block}.container{transition:filter .2s linear;height:100%}img{display:block;height:100%;width:100%;object-fit:cover}.progress-container{display:flex;justify-content:center;align-items:center}.ratio{position:relative;width:100%;height:0;background-position:center;background-size:cover}.ratio.fill{background-size:100% 100%}.ratio.contain{background-size:contain;background-repeat:no-repeat}.fill img{object-fit:fill}.contain img{object-fit:contain}.ratio div,.ratio img{position:absolute;top:0;left:0;width:100%;height:100%}.ratio img{visibility:hidden}#brokenImage{background:grey url("/static/images/image-broken.svg") center/36px no-repeat}`}]}}),n.oi);t()}catch(e){t(e)}}))}};
//# sourceMappingURL=79931.77d46fe77fd89e65.js.map