iobroker.lovelace
Version:
With this adapter you can build visualization for ioBroker with Home Assistant Lovelace UI
1 lines • 26.8 kB
JavaScript
export const __rspack_esm_id=99143;export const __rspack_esm_ids=[99143];export const __webpack_modules__={13062(t,e,i){i.a(t,async function(t,e){try{var s=i(62826),a=i(5124),r=i(22441),o=i(75751),n=i(89784),h=i(58888),d=i(22786),l=i(28978),c=i(82286),p=i(10897),_=i(92639),g=i(71608),m=t([_,g]);[_,g]=m.then?(await m)():m;const y="mjpeg";class v extends a.WF{willUpdate(t){const e=t.has("stateObj")&&this.stateObj&&t.get("stateObj")?.entity_id!==this.stateObj.entity_id,i=t.get("hass"),s=t.has("hass")&&this.hass&&this.stateObj&&i&&this.hass.config.state===h.St&&i.config?.state!==h.St;(e||s)&&(this._getCapabilities(),this._getPosterUrl())}connectedCallback(){super.connectedCallback(),this._connected=!0}disconnectedCallback(){super.disconnectedCallback(),this._connected=!1}render(){if(!this.stateObj)return a.s6;const t=this._streams(this._capabilities?.frontend_stream_types,this._hlsStreams,this._webRtcStreams,this.muted);return a.qy`${(0,o.u)(t,t=>t.type+this.stateObj.entity_id,t=>this._renderStream(t))}`}_renderStream(t){if(!this.stateObj)return a.s6;if(t.type===y){const t=this._connected?(0,p.CK)(this.stateObj):this._posterUrl;return t?a.qy`<img .src="${t}" style="${(0,n.W)({aspectRatio:this.aspectRatio,objectFit:this.fitMode})}" alt="${`Preview of the ${(0,l.u)(this.stateObj)} camera.`}">`:a.s6}return"hls"===t.type?a.qy`<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="${t.visible?"":"hidden"}" .aspectRatio="${this.aspectRatio}" .fitMode="${this.fitMode}"></ha-hls-player>`:t.type===p.zS?a.qy`<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="${t.visible?"":"hidden"}" .aspectRatio="${this.aspectRatio}" .fitMode="${this.fitMode}"></ha-web-rtc-player>`:a.s6}async _getCapabilities(){this._capabilities=void 0,this._hlsStreams=void 0,this._webRtcStreams=void 0,(0,c.$)(this.stateObj,2)?this._capabilities=await(0,p._Z)(this.hass,this.stateObj.entity_id):this._capabilities={frontend_stream_types:[]}}async _getPosterUrl(){try{this._posterUrl=await(0,p.C4)(this.hass,this.stateObj.entity_id,this.clientWidth,this.clientHeight)}catch(t){this._posterUrl=void 0}}_handleHlsStreams(t){this._hlsStreams=t.detail}_handleWebRtcStreams(t){this._webRtcStreams=t.detail}constructor(...t){super(...t),this.controls=!1,this.muted=!1,this.allowExoPlayer=!1,this._connected=!1,this._streams=(0,d.A)((t,e,i,s)=>{if(!t)return[];if(0===t.length)return[{type:y,visible:!0}];if(1===t.length)return"hls"===t[0]&&!1===e?.hasVideo||t[0]===p.zS&&!1===i?.hasVideo?[{type:y,visible:!0}]:[{type:t[0],visible:!0}];if(e&&i)return e.hasVideo&&e.hasAudio&&!i.hasAudio&&!s?[{type:"hls",visible:!0}]:i.hasVideo?[{type:p.zS,visible:!0}]:[{type:y,visible:!0}];if(e?.hasVideo!==i?.hasVideo){if(e?.hasVideo)return[{type:"hls",visible:!0},{type:p.zS,visible:!1}];if(!1===e?.hasVideo)return[{type:p.zS,visible:!0}];if(i?.hasVideo)return[{type:p.zS,visible:!0},{type:"hls",visible:!1}];if(!1===i?.hasVideo)return[{type:"hls",visible:!0}]}return[{type:"hls",visible:!0},{type:p.zS,visible:!1}]})}}v.styles=a.AH`:host,img{display:block}img{width:100%}ha-web-rtc-player{width:100%;height:100%}ha-hls-player{width:100%;height:100%}.hidden{display:none}`,(0,s.Cg)([(0,r.MZ)({attribute:!1})],v.prototype,"hass",void 0),(0,s.Cg)([(0,r.MZ)({attribute:!1})],v.prototype,"stateObj",void 0),(0,s.Cg)([(0,r.MZ)({attribute:!1})],v.prototype,"aspectRatio",void 0),(0,s.Cg)([(0,r.MZ)({attribute:!1})],v.prototype,"fitMode",void 0),(0,s.Cg)([(0,r.MZ)({type:Boolean,attribute:"controls"})],v.prototype,"controls",void 0),(0,s.Cg)([(0,r.MZ)({type:Boolean,attribute:"muted"})],v.prototype,"muted",void 0),(0,s.Cg)([(0,r.MZ)({type:Boolean,attribute:"allow-exoplayer"})],v.prototype,"allowExoPlayer",void 0),(0,s.Cg)([(0,r.wk)()],v.prototype,"_posterUrl",void 0),(0,s.Cg)([(0,r.wk)()],v.prototype,"_connected",void 0),(0,s.Cg)([(0,r.wk)()],v.prototype,"_capabilities",void 0),(0,s.Cg)([(0,r.wk)()],v.prototype,"_hlsStreams",void 0),(0,s.Cg)([(0,r.wk)()],v.prototype,"_webRtcStreams",void 0),v=(0,s.Cg)([(0,r.EM)("ha-camera-stream")],v),e()}catch(t){e(t)}})},92639(t,e,i){i.a(t,async function(t,e){try{i(74423),i(14603),i(47566),i(98721);var s=i(62826),a=i(5124),r=i(22441),o=i(89784),n=i(36312),h=i(1087),d=i(12587),l=i(10897),c=i(38962),p=t([c]);c=(p.then?(await p)():p)[0];class _ extends a.WF{connectedCallback(){super.connectedCallback(),_.streamCount+=1,this.hasUpdated&&(this._resetError(),this._startHls()),document.addEventListener("visibilitychange",this._handleVisibilityChange)}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("visibilitychange",this._handleVisibilityChange),_.streamCount-=1,this._cleanUp()}render(){return a.qy` ${this._error?a.qy`<ha-alert alert-type="error" class="${this._errorIsFatal?"fatal":"retry"}"> ${this._error} </ha-alert>`:""} ${this._errorIsFatal?"":a.qy`<video .poster="${this.posterUrl}" ?autoplay="${this.autoPlay}" .muted="${this.muted}" ?playsinline="${this.playsInline}" ?controls="${this.controls}" ="${this._loadedData}" style="${(0,o.W)({height:null==this.aspectRatio?"100%":"auto",aspectRatio:this.aspectRatio,objectFit:this.fitMode})}"></video>`} `}updated(t){super.updated(t);const e=t.has("entityid"),i=t.has("url");e?this._getStreamUrlFromEntityId():i&&this.url&&(this._cleanUp(),this._resetError(),this._url=this.url,this._startHls())}async _getStreamUrlFromEntityId(){if(this._cleanUp(),this._resetError(),(0,n.x)(this.hass.config,"stream")){if(this.entityid)try{const{url:t}=await(0,l.wv)(this.hass,this.entityid);this._url=this.hass.hassUrl(t),this._cleanUp(),this._resetError(),this._startHls()}catch(t){console.error(t),(0,h.r)(this,"streams",{hasAudio:!1,hasVideo:!1})}}else this._setFatalError("Streaming component is not loaded.")}async _startHls(){const t=fetch(this._url),e=(await i.e(29091).then(i.bind(i,10318))).default;if(!this.isConnected)return;let s=e.isSupported();if(s||(s=""!==this._videoEl.canPlayType("application/vnd.apple.mpegurl")),!s)return void this._setFatalError(this.hass.localize("ui.components.media-browser.video_not_supported"));const a=this.allowExoPlayer&&this.hass.auth.external?.config.hasExoPlayer,r=await(await t).text();if(!this.isConnected)return;const o=/#EXT-X-STREAM-INF:.*?(?:CODECS=".*?([^.]*)?\..*?,([^.]*)?\..*?".*?)?(?:\n|\r\n)(.+)/g,n=o.exec(r),h=o.exec(r);let d;d=null!==n&&null===h?new URL(n[3],this._url).href:this._url;const l=n?`${n[1]},${n[2]}`:void 0;this._reportStreams(l),a&&(l?.includes("hevc")||l?.includes("hev1"))?this._renderHLSExoPlayer(d):e.isSupported()?this._renderHLSPolyfill(this._videoEl,e,d):this._renderHLSNative(this._videoEl,d)}async _renderHLSExoPlayer(t){this._exoPlayer=!0,window.addEventListener("resize",this._resizeExoPlayer),this.updateComplete.then(()=>(0,d.E)()).then(this._resizeExoPlayer),this._videoEl.style.visibility="hidden",await this.hass.auth.external.fireMessage({type:"exoplayer/play_hls",payload:{url:t,muted:this.muted}})}_isLLHLSSupported(){if(_.streamCount<=2)return!0;if(!("performance"in window)||0===performance.getEntriesByType("resource").length)return!1;const t=performance.getEntriesByType("resource")[0];return"nextHopProtocol"in t&&"h2"===t.nextHopProtocol}async _renderHLSPolyfill(t,e,i){const s=new e({backBufferLength:60,fragLoadingTimeOut:3e4,manifestLoadingTimeOut:3e4,levelLoadingTimeOut:3e4,maxLiveSyncPlaybackRate:2,lowLatencyMode:this._isLLHLSSupported()});this._hlsPolyfillInstance=s,s.attachMedia(t),s.on(e.Events.MEDIA_ATTACHED,()=>{this._resetError(),s.loadSource(i)}),s.on(e.Events.FRAG_LOADED,(t,e)=>{this._resetError()}),s.on(e.Events.ERROR,(t,i)=>{if(i.fatal)if(i.type===e.ErrorTypes.NETWORK_ERROR){switch(i.details){case e.ErrorDetails.MANIFEST_LOAD_ERROR:{let t="Error starting stream, see logs for details";void 0!==i.response&&void 0!==i.response.code&&(i.response.code>=500?t+=" (Server failure)":i.response.code>=400?t+=" (Stream never started)":t+=` (${i.response.code})`),this._setRetryableError(t);break}case e.ErrorDetails.MANIFEST_LOAD_TIMEOUT:this._setRetryableError("Timeout while starting stream");break;default:this._setRetryableError("Stream network error")}s.startLoad()}else i.type===e.ErrorTypes.MEDIA_ERROR?(this._setRetryableError("Error with media stream contents"),s.recoverMediaError()):this._setFatalError("Error playing stream")})}async _renderHLSNative(t,e){t.src=e,t.addEventListener("loadedmetadata",()=>{t.play()})}_cleanUp(){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())}_resetError(){this._error=void 0,this._errorIsFatal=!1}_setFatalError(t){this._error=t,this._errorIsFatal=!0,(0,h.r)(this,"streams",{hasAudio:!1,hasVideo:!1})}_setRetryableError(t){this._error=t,this._errorIsFatal=!1,(0,h.r)(this,"streams",{hasAudio:!1,hasVideo:!1})}_reportStreams(t){const e=t?.split(",");(0,h.r)(this,"streams",{hasAudio:e?.includes("mp4a")??!1,hasVideo:e?.includes("mp4a")?e?.length>1:Boolean(e?.length)})}_loadedData(){(0,h.r)(this,"load")}constructor(...t){super(...t),this.controls=!1,this.muted=!1,this.autoPlay=!1,this.playsInline=!1,this.allowExoPlayer=!1,this._errorIsFatal=!1,this._exoPlayer=!1,this._handleVisibilityChange=()=>{document.pictureInPictureElement||(document.hidden?this._cleanUp():(this._resetError(),this._startHls()))},this._resizeExoPlayer=()=>{if(!this._videoEl)return;const t=this._videoEl.getBoundingClientRect();this.hass.auth.external.fireMessage({type:"exoplayer/resize",payload:{left:t.left,top:t.top,right:t.right,bottom:t.bottom}})}}}_.streamCount=0,_.styles=a.AH`: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}`,(0,s.Cg)([(0,r.MZ)({attribute:!1})],_.prototype,"hass",void 0),(0,s.Cg)([(0,r.MZ)()],_.prototype,"entityid",void 0),(0,s.Cg)([(0,r.MZ)()],_.prototype,"url",void 0),(0,s.Cg)([(0,r.MZ)({attribute:"poster-url"})],_.prototype,"posterUrl",void 0),(0,s.Cg)([(0,r.MZ)({attribute:!1})],_.prototype,"aspectRatio",void 0),(0,s.Cg)([(0,r.MZ)({attribute:!1})],_.prototype,"fitMode",void 0),(0,s.Cg)([(0,r.MZ)({type:Boolean,attribute:"controls"})],_.prototype,"controls",void 0),(0,s.Cg)([(0,r.MZ)({type:Boolean,attribute:"muted"})],_.prototype,"muted",void 0),(0,s.Cg)([(0,r.MZ)({type:Boolean,attribute:"autoplay"})],_.prototype,"autoPlay",void 0),(0,s.Cg)([(0,r.MZ)({type:Boolean,attribute:"playsinline"})],_.prototype,"playsInline",void 0),(0,s.Cg)([(0,r.MZ)({type:Boolean,attribute:"allow-exoplayer"})],_.prototype,"allowExoPlayer",void 0),(0,s.Cg)([(0,r.P)("video")],_.prototype,"_videoEl",void 0),(0,s.Cg)([(0,r.wk)()],_.prototype,"_error",void 0),(0,s.Cg)([(0,r.wk)()],_.prototype,"_errorIsFatal",void 0),(0,s.Cg)([(0,r.wk)()],_.prototype,"_url",void 0),_=(0,s.Cg)([(0,r.EM)("ha-hls-player")],_),e()}catch(t){e(t)}})},71608(t,e,i){i.a(t,async function(t,e){try{i(74423),i(44114),i(18111),i(7588);var s=i(62826),a=i(5124),r=i(22441),o=i(63672),n=i(89784),h=i(1087),d=i(10897),l=i(38962),c=t([l]);l=(c.then?(await c)():c)[0];class p extends a.WF{render(){return this._error?a.qy`<ha-alert alert-type="error">${this._error}</ha-alert>`:a.qy` <video id="remote-stream" ?autoplay="${this.autoPlay}" .muted="${this.muted}" ?playsinline="${this.playsInline}" ?controls="${this.controls}" poster="${(0,o.J)(this.posterUrl)}" ="${this._loadedData}" style="${(0,n.W)({height:null==this.aspectRatio?"100%":"auto",aspectRatio:this.aspectRatio,objectFit:this.fitMode})}"></video> `}connectedCallback(){super.connectedCallback(),this.hasUpdated&&this.entityid&&this._startWebRtc(),document.addEventListener("visibilitychange",this._handleVisibilityChange)}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("visibilitychange",this._handleVisibilityChange),this._cleanUp()}willUpdate(t){super.willUpdate(t),t.has("entityid")&&this._startWebRtc()}async _startWebRtc(){if(this._cleanUp(),"undefined"==typeof RTCPeerConnection)return this._error="WebRTC is not supported in this browser",void(0,h.r)(this,"streams",{hasAudio:!1,hasVideo:!1});this.hass&&this.entityid&&(this._error=void 0,this._startTimer(),this._logEvent("start clientConfig"),this._clientConfig=await(0,d.bT)(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=t=>{if("stable"===t.target.signalingState)this._logEvent("ICE negotiation complete");else this._logEvent("Signaling state changed",t.target.signalingState)},this._remoteStream=new MediaStream,this._peerConnection.ontrack=this._addTrack,this._peerConnection.addTransceiver("audio",{direction:"recvonly"}),this._peerConnection.addTransceiver("video",{direction:"recvonly"}))}async _handleOfferEvent(t){if(this.entityid){if("session"===t.type&&(this._sessionId=t.session_id,this._candidatesList.forEach(e=>(0,d.UC)(this.hass,this.entityid,t.session_id,e.toJSON())),this._candidatesList=[]),"answer"===t.type&&(this._logEvent("answer",t.answer),this._handleAnswer(t)),"candidate"===t.type){this._logEvent("remote ice candidate",t.candidate);try{const e=t.candidate.sdpMid||null!=t.candidate.sdpMLineIndex?new RTCIceCandidate(t.candidate):new RTCIceCandidate({candidate:t.candidate.candidate,sdpMid:"0"});await(this._peerConnection?.addIceCandidate(e))}catch(t){console.error(t)}}"error"===t.type&&(this._error="Failed to start WebRTC stream: "+t.message,this._cleanUp())}}async _handleAnswer(t){if(!this._peerConnection?.signalingState||["stable","closed"].includes(this._peerConnection.signalingState))return;const e=new RTCSessionDescription({type:"answer",sdp:t.answer});try{this._logEvent("start setRemoteDescription",e),await this._peerConnection.setRemoteDescription(e)}catch(t){this._error="Failed to connect WebRTC stream: "+t.message,this._cleanUp()}this._logEvent("end setRemoteDescription")}_cleanUp(){this._remoteStream&&(this._remoteStream.getTracks().forEach(t=>{t.stop()}),this._remoteStream=void 0);const t=this._videoEl;t&&(t.removeAttribute("src"),t.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(t=>t()),this._unsub=void 0,this._sessionId=void 0,this._candidatesList=[]}_loadedData(){const t=this._videoEl.srcObject,e={hasAudio:Boolean(t?.getAudioTracks().length),hasVideo:Boolean(t?.getVideoTracks().length)};(0,h.r)(this,"load"),(0,h.r)(this,"streams",e),this._logEvent("loadedData",e),this._stopTimer()}_startTimer(){}_stopTimer(){}_logEvent(t,...e){}constructor(...t){super(...t),this.controls=!1,this.muted=!1,this.autoPlay=!1,this.playsInline=!1,this._candidatesList=[],this._handleVisibilityChange=()=>{document.pictureInPictureElement||(document.hidden?this._cleanUp():this._startWebRtc())},this._startNegotiation=async()=>{if(!this._peerConnection)return;const t={offerToReceiveAudio:!0,offerToReceiveVideo:!0};this._logEvent("start createOffer",t);const e=await this._peerConnection.createOffer(t);if(!this._peerConnection)return;if(this._logEvent("end createOffer",e),this._logEvent("start setLocalDescription"),await this._peerConnection.setLocalDescription(e),!this._peerConnection||!this.entityid)return;this._logEvent("end setLocalDescription");let i="";for(;this._candidatesList.length;){const t=this._candidatesList.pop();t&&(i+=`a=${t}\r\n`)}const s=e.sdp+i;this._logEvent("start webRtcOffer",s);try{this._unsub=(0,d.w8)(this.hass,this.entityid,s,t=>this._handleOfferEvent(t))}catch(t){this._error="Failed to start WebRTC stream: "+t.message,this._cleanUp()}},this._iceConnectionStateChanged=()=>{this._logEvent("ice connection state change",this._peerConnection?.iceConnectionState),"failed"===this._peerConnection?.iceConnectionState&&this._peerConnection.restartIce()},this._handleIceCandidate=t=>{this.entityid&&t.candidate?.candidate&&(this._logEvent("local ice candidate",t.candidate?.candidate,t.candidate?.sdpMLineIndex),this._sessionId?(0,d.UC)(this.hass,this.entityid,this._sessionId,t.candidate.toJSON()):this._candidatesList.push(t.candidate))},this._addTrack=async t=>{this._remoteStream&&("audio"===t.track.kind&&this.muted||(this._remoteStream.addTrack(t.track),this.hasUpdated||await this.updateComplete,this._videoEl.srcObject=this._remoteStream))}}}p.styles=a.AH`:host,video{display:block}video{width:100%;max-height:var(--video-max-height,calc(100vh - 97px))}`,(0,s.Cg)([(0,r.MZ)({attribute:!1})],p.prototype,"hass",void 0),(0,s.Cg)([(0,r.MZ)()],p.prototype,"entityid",void 0),(0,s.Cg)([(0,r.MZ)({attribute:!1})],p.prototype,"aspectRatio",void 0),(0,s.Cg)([(0,r.MZ)({attribute:!1})],p.prototype,"fitMode",void 0),(0,s.Cg)([(0,r.MZ)({type:Boolean,attribute:"controls"})],p.prototype,"controls",void 0),(0,s.Cg)([(0,r.MZ)({type:Boolean,attribute:"muted"})],p.prototype,"muted",void 0),(0,s.Cg)([(0,r.MZ)({type:Boolean,attribute:"autoplay"})],p.prototype,"autoPlay",void 0),(0,s.Cg)([(0,r.MZ)({type:Boolean,attribute:"playsinline"})],p.prototype,"playsInline",void 0),(0,s.Cg)([(0,r.MZ)({attribute:"poster-url"})],p.prototype,"posterUrl",void 0),(0,s.Cg)([(0,r.wk)()],p.prototype,"_error",void 0),(0,s.Cg)([(0,r.P)("#remote-stream")],p.prototype,"_videoEl",void 0),p=(0,s.Cg)([(0,r.EM)("ha-web-rtc-player")],p),e()}catch(t){e(t)}})},67013(t,e,i){i.d(e,{e:()=>s});const s=t=>t.attributes.access_token?`/api/image_proxy/${t.entity_id}?token=${t.attributes.access_token}&state=${t.state}`:void 0},57914(t,e,i){i.a(t,async function(t,e){try{i(74423),i(18111),i(22489),i(7588);var s=i(62826),a=i(5124),r=i(22441),o=i(6412),n=i(89784),h=i(46190),d=i(71727),l=i(58548),c=i(13062),p=i(65829),_=i(10897),g=i(22675),m=i(67013),y=i(17022),v=t([c,p]);[c,p]=v.then?(await v)():v;const u=1e4,b="grayscale(100%)",C=640,f=9/16;class I extends a.WF{connectedCallback(){super.connectedCallback(),void 0===this._loadState&&(this._loadState=1),this.cameraImage&&"live"!==this.cameraView&&this._startIntersectionObserverOrUpdates()}disconnectedCallback(){super.disconnectedCallback(),this._stopUpdateCameraInterval(),this._stopIntersectionObserver(),this._imageVisible=void 0}handleIntersectionCallback(t){this._imageVisible=t[0].isIntersecting}willUpdate(t){if(t.has("hass")){const e=t.get("hass");this._shouldStartCameraUpdates(e)?this._startIntersectionObserverOrUpdates():this.hass.connected||(this._stopUpdateCameraInterval(),this._stopIntersectionObserver(),this._loadState=1,this._cameraImageSrc=void 0,this._loadedImageSrc=void 0)}t.has("_imageVisible")&&(this._imageVisible?this._shouldStartCameraUpdates()&&this._startUpdateCameraInterval():this._stopUpdateCameraInterval()),t.has("aspectRatio")&&(this._ratio=this.aspectRatio?(0,l.A)(this.aspectRatio):null),1!==this._loadState||this.cameraImage||(this._loadState=2);const e=t.has("hass")&&!t.get("hass");this.hass&&(t.has("image")||e)&&(this.image&&(0,y.St)(this.image)?(0,y.A1)(this.hass,this.image).then(t=>{this._resolvedImageSrc=t.url}):this._resolvedImageSrc=this.image),this.hass&&(t.has("darkModeImage")||e)&&(this.darkModeImage&&(0,y.St)(this.darkModeImage)?(0,y.A1)(this.hass,this.darkModeImage).then(t=>{this._resolvedDarkModeImageSrc=t.url}):this._resolvedDarkModeImageSrc=this.darkModeImage),(t.has("stateImage")||e)&&(this._resolvedStateImages={},Object.entries(this.stateImage||{}).forEach(t=>{const e=t[0],i=t[1],s="object"==typeof i&&i.media_content_id||i;(0,y.St)(s)?(0,y.A1)(this.hass,s).then(t=>{this._resolvedStateImages={...this._resolvedStateImages,[e]:t.url}}):this._resolvedStateImages[e]=s}))}render(){if(!this.hass)return a.s6;const t=Boolean(this._ratio&&this._ratio.w>0&&this._ratio.h>0),e=this.entity?this.hass.states[this.entity]:void 0,i=e?e.state:g.Hh;let s,r,l=!this.stateImage;if(this.cameraImage)"live"===this.cameraView?r=this.hass.states[this.cameraImage]:s=this._cameraImageSrc;else if(this.stateImage){const t=this._resolvedStateImages[i];t?s=t:(s=this._resolvedImageSrc,l=!0)}else s=this.darkModeImage&&this.hass.themes.darkMode?this._resolvedDarkModeImageSrc:e&&"image"===(0,d.m)(e.entity_id)?(0,m.e)(e):this._resolvedImageSrc;s&&(s=this.hass.hassUrl(s));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=(!e||h.jj.includes(i))&&l?b:""}return a.qy` <div style="${(0,n.W)({paddingBottom:t?`${(100*this._ratio.h/this._ratio.w).toFixed(2)}%`:void 0===this._lastImageHeight?"56.25%":void 0,backgroundImage:t&&this._loadedImageSrc?`url("${this._loadedImageSrc}")`:void 0,filter:2===this._loadState||"live"===this.cameraView?c:void 0})}" class="container ${(0,o.H)({ratio:t||void 0===this._lastImageHeight,contain:"contain"===this.fitMode,fill:"fill"===this.fitMode})}"> ${this.cameraImage&&"live"===this.cameraView?a.qy` <ha-camera-stream muted .hass="${this.hass}" .stateObj="${r}" .fitMode="${this.fitMode}" .aspectRatio="${this._ratio?this._ratio.w/this._ratio.h:void 0}" ="${this._onVideoLoad}"></ha-camera-stream> `:void 0===s?a.s6:a.qy` <img id="image" src="${s}" alt="${this.entity||""}" ="${this._onImageError}" ="${this._onImageLoad}" style="${(0,n.W)({display:t||2===this._loadState?"block":"none"})}"> `} ${3===this._loadState?a.qy`<div id="brokenImage" style="${(0,n.W)({height:t?void 0:this._lastImageHeight?`${this._lastImageHeight}px`:"100%"})}"></div>`:"live"===this.cameraView||void 0!==s&&1!==this._loadState?"":a.qy`<div class="progress-container" style="${(0,n.W)({height:t?void 0:this._lastImageHeight?`${this._lastImageHeight}px`:"100%"})}"> <ha-spinner class="render-spinner" size="small"></ha-spinner> </div>`} </div> `}_shouldStartCameraUpdates(t){return!(t&&t.connected===this.hass.connected||!this.hass.connected||"live"===this.cameraView)}_startIntersectionObserverOrUpdates(){"IntersectionObserver"in window?(this._intersectionObserver||(this._intersectionObserver=new IntersectionObserver(this.handleIntersectionCallback.bind(this))),this._intersectionObserver.observe(this)):(this._imageVisible=!0,this._startUpdateCameraInterval())}_stopIntersectionObserver(){this._intersectionObserver&&this._intersectionObserver.disconnect()}_startUpdateCameraInterval(){this._stopUpdateCameraInterval(),this._updateCameraImageSrc(),this.cameraImage&&this.isConnected&&(this._cameraUpdater=window.setInterval(()=>this._updateCameraImageSrcAtInterval(),u))}_stopUpdateCameraInterval(){this._cameraUpdater&&(clearInterval(this._cameraUpdater),this._cameraUpdater=void 0)}_onImageError(){this._loadState=3}async _onImageLoad(t){this._loadState=2;const e=t.target;this._ratio&&this._ratio.w>0&&this._ratio.h>0&&(this._loadedImageSrc=e.src),await this.updateComplete,this._lastImageHeight=e.offsetHeight}async _onVideoLoad(t){this._loadState=2;const e=t.currentTarget;await this.updateComplete,this._lastImageHeight=e.offsetHeight}async _updateCameraImageSrcAtInterval(){return 1===this._loadState&&this._onImageError(),this._updateCameraImageSrc()}async _updateCameraImageSrc(){if(!this.hass||!this.cameraImage)return;if(!this.hass.states[this.cameraImage])return void this._onImageError();const t=this.clientWidth||C;let e,i=Math.ceil(t*devicePixelRatio);this._lastImageHeight?e=Math.ceil(this._lastImageHeight*devicePixelRatio):this._ratio&&this._ratio.w>0&&this._ratio.h>0?e=Math.ceil(i*(this._ratio.h/this._ratio.w)):(i*=2,e=Math.ceil(i*f)),this._cameraImageSrc=await(0,_.C4)(this.hass,this.cameraImage,i,e),void 0===this._cameraImageSrc&&this._onImageError()}constructor(...t){super(...t),this._imageVisible=!1,this._resolvedStateImages={},this._ratio=null}}I.styles=a.AH`:host{display:block}.container{transition:filter .2s linear;height:100%}img{display:block;height:100%;width:100%;object-fit:cover}ha-camera-stream{display:block;height:100%;width:100%}.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}`,(0,s.Cg)([(0,r.MZ)({attribute:!1})],I.prototype,"hass",void 0),(0,s.Cg)([(0,r.MZ)()],I.prototype,"entity",void 0),(0,s.Cg)([(0,r.MZ)()],I.prototype,"image",void 0),(0,s.Cg)([(0,r.MZ)({attribute:!1})],I.prototype,"stateImage",void 0),(0,s.Cg)([(0,r.MZ)({attribute:!1})],I.prototype,"cameraImage",void 0),(0,s.Cg)([(0,r.MZ)({attribute:!1})],I.prototype,"cameraView",void 0),(0,s.Cg)([(0,r.MZ)({attribute:!1})],I.prototype,"aspectRatio",void 0),(0,s.Cg)([(0,r.MZ)()],I.prototype,"filter",void 0),(0,s.Cg)([(0,r.MZ)({attribute:!1})],I.prototype,"stateFilter",void 0),(0,s.Cg)([(0,r.MZ)({attribute:!1})],I.prototype,"darkModeImage",void 0),(0,s.Cg)([(0,r.MZ)({attribute:!1})],I.prototype,"darkModeFilter",void 0),(0,s.Cg)([(0,r.MZ)({attribute:"fit-mode",type:String})],I.prototype,"fitMode",void 0),(0,s.Cg)([(0,r.wk)()],I.prototype,"_imageVisible",void 0),(0,s.Cg)([(0,r.wk)()],I.prototype,"_loadState",void 0),(0,s.Cg)([(0,r.wk)()],I.prototype,"_cameraImageSrc",void 0),(0,s.Cg)([(0,r.wk)()],I.prototype,"_loadedImageSrc",void 0),(0,s.Cg)([(0,r.wk)()],I.prototype,"_resolvedImageSrc",void 0),(0,s.Cg)([(0,r.wk)()],I.prototype,"_resolvedDarkModeImageSrc",void 0),(0,s.Cg)([(0,r.wk)()],I.prototype,"_resolvedStateImages",void 0),(0,s.Cg)([(0,r.wk)()],I.prototype,"_lastImageHeight",void 0),I=(0,s.Cg)([(0,r.EM)("hui-image")],I),e()}catch(t){e(t)}})}};