iobroker.lovelace/hass_frontend/frontend_latest/59105.e99716e7785accfa.js

With this adapter you can build visualization for ioBroker with Home Assistant Lovelace UI

export const __webpack_ids__=["59105"];export const __webpack_modules__={14001:function(t,e,i){i.d(e,{b:()=>r});i(9359),i(31526);var o=i(76822),a=i(37723);const n=!1;o.O._pipeline.generator.register("default",(t=>{t.sort(((t,e)=>e.population-t.population));const e=t[0];let i;const o=new Map,r=(t,i)=>(o.has(t)||o.set(t,(0,a.$o)(e.rgb,i)),o.get(t)>4.5);for(let e=1;e<t.length&&void 0===i;e++){if(r(t[e].hex,t[e].rgb)){n,i=t[e].rgb;break}const o=t[e];n;for(let a=e+1;a<t.length;a++){const e=t[a],s=Math.abs(o.rgb[0]-e.rgb[0])+Math.abs(o.rgb[1]-e.rgb[1])+Math.abs(o.rgb[2]-e.rgb[2]);if(!(s>150)&&r(e.hex,e.rgb)){n,i=e.rgb;break}}}return void 0===i&&(i=e.getYiq()<200?[255,255,255]:[0,0,0]),{foreground:new e.constructor(i,0),background:e}}));const r=(t,e=16)=>new o.O(t,{colorCount:e}).getPalette().then((({foreground:t,background:e})=>({background:e,foreground:t})))},40944:function(t,e,i){i.d(e,{B:()=>a});var o=i(36522);const a=(t,e)=>{(0,o.B)(t,"show-dialog",{dialogTag:"dialog-media-player-browse",dialogImport:()=>Promise.all([i.e("46379"),i.e("66031"),i.e("72206"),i.e("91552"),i.e("97983"),i.e("78456"),i.e("24199"),i.e("41258"),i.e("56898"),i.e("27506"),i.e("35671"),i.e("99287"),i.e("41103"),i.e("58640"),i.e("83775"),i.e("18865"),i.e("27090"),i.e("88975"),i.e("3049"),i.e("91310"),i.e("74427")]).then(i.bind(i,84961)),dialogParams:e})}},78793:function(t,e,i){i.a(t,(async function(t,o){try{i.r(e),i.d(e,{HuiMediaControlCard:()=>B});var a=i(44249),n=i(72621),r=(i(9359),i(70104),i(24427),i(57243)),s=i(15093),d=i(35359),c=i(69634),l=i(82393),h=i(36522),u=i(47194),g=i(75278),p=i(14001),m=i(5839),_=i(22381),v=(i(54977),i(23334),i(51223)),f=i(40944),b=i(96194),k=i(89890),y=i(69223),w=i(93331),x=(i(1490),i(62577)),$=t([v]);v=($.then?(await $)():$)[0];const C="M12,16A2,2 0 0,1 14,18A2,2 0 0,1 12,20A2,2 0 0,1 10,18A2,2 0 0,1 12,16M12,10A2,2 0 0,1 14,12A2,2 0 0,1 12,14A2,2 0 0,1 10,12A2,2 0 0,1 12,10M12,4A2,2 0 0,1 14,6A2,2 0 0,1 12,8A2,2 0 0,1 10,6A2,2 0 0,1 12,4Z",O="M4,6H2V20A2,2 0 0,0 4,22H18V20H4V6M20,2H8A2,2 0 0,0 6,4V16A2,2 0 0,0 8,18H20A2,2 0 0,0 22,16V4A2,2 0 0,0 20,2M12,14.5V5.5L18,10L12,14.5Z";let B=(0,a.Z)([(0,s.Mo)("hui-media-control-card")],(function(t,e){class o extends e{constructor(...e){super(...e),t(this)}}return{F:o,d:[{kind:"method",static:!0,key:"getConfigElement",value:async function(){return await Promise.all([i.e("46379"),i.e("24199"),i.e("41258"),i.e("27506"),i.e("27090"),i.e("3049"),i.e("77071")]).then(i.bind(i,87251)),document.createElement("hui-media-control-card-editor")}},{kind:"method",static:!0,key:"getStubConfig",value:function(t,e,i){return{type:"media-control",entity:(0,y.j)(t,1,e,i,["media_player"])[0]||""}}},{kind:"field",decorators:[(0,s.Cb)({attribute:!1})],key:"hass",value:void 0},{kind:"field",decorators:[(0,s.SB)()],key:"_config",value:void 0},{kind:"field",decorators:[(0,s.SB)()],key:"_foregroundColor",value:void 0},{kind:"field",decorators:[(0,s.SB)()],key:"_backgroundColor",value:void 0},{kind:"field",decorators:[(0,s.SB)()],key:"_narrow",value:()=>!1},{kind:"field",decorators:[(0,s.SB)()],key:"_veryNarrow",value:()=>!1},{kind:"field",decorators:[(0,s.SB)()],key:"_cardHeight",value:()=>0},{kind:"field",decorators:[(0,s.IO)("mwc-linear-progress")],key:"_progressBar",value:void 0},{kind:"field",decorators:[(0,s.SB)()],key:"_marqueeActive",value:()=>!1},{kind:"field",key:"_progressInterval",value:void 0},{kind:"field",key:"_resizeObserver",value:void 0},{kind:"method",key:"getCardSize",value:function(){return 3}},{kind:"method",key:"setConfig",value:function(t){if(!t.entity||"media_player"!==t.entity.split(".")[0])throw new Error("Specify an entity from within the media_player domain");this._config=t,this.updateComplete.then((()=>this._measureCard()))}},{kind:"method",key:"connectedCallback",value:function(){if((0,n.Z)(o,"connectedCallback",this,3)([]),this.updateComplete.then((()=>this._attachObserver())),!this.hass||!this._config)return;const t=this._stateObj;t&&!this._progressInterval&&this._showProgressBar&&"playing"===t.state&&(this._progressInterval=window.setInterval((()=>this._updateProgressBar()),1e3))}},{kind:"method",key:"disconnectedCallback",value:function(){(0,n.Z)(o,"disconnectedCallback",this,3)([]),this._progressInterval&&(clearInterval(this._progressInterval),this._progressInterval=void 0),this._resizeObserver&&this._resizeObserver.disconnect()}},{kind:"method",key:"render",value:function(){if(!this.hass||!this._config)return r.Ld;const t=this._stateObj;if(!t)return r.dy` <hui-warning> ${(0,x.i)(this.hass,this._config.entity)} </hui-warning> `;const e={"background-image":this._image?`url(${this.hass.hassUrl(this._image)})`:"none",width:`${this._cardHeight}px`,"background-color":this._backgroundColor||""},i={"background-image":`linear-gradient(to right, ${this._backgroundColor}, ${this._backgroundColor+"00"})`,width:`${this._cardHeight}px`},o=t.state,a=!(0,m.v)(t)&&!(0,b.rk)(o),n=(0,b.rk)(o)||a&&!(0,g.e)(t,k.yZ.TURN_ON),s=!this._image,l=(0,k.xt)(t,!1),h=l&&(!this._veryNarrow||a||"idle"===o||"on"===o),p=(0,k.Mj)(t),_=(0,k.WL)(t.attributes.media_title);return r.dy` <ha-card> <div class="background ${(0,d.$)({"no-image":s,off:a||n,unavailable:n})}"> <div class="color-block" style="${(0,c.V)({"background-color":this._backgroundColor||""})}"></div> <div class="no-img" style="${(0,c.V)({"background-color":this._backgroundColor||""})}"></div> <div class="image" style="${(0,c.V)(e)}"></div> ${s?"":r.dy` <div class="color-gradient" style="${(0,c.V)(i)}"></div> `} </div> <div class="player ${(0,d.$)({"no-image":s,narrow:this._narrow&&!this._veryNarrow,off:a||n,"no-progress":this._veryNarrow||!this._showProgressBar,"no-controls":!h})}" style="${(0,c.V)({color:this._foregroundColor||""})}"> <div class="top-info"> <div class="icon-name"> <ha-state-icon class="icon" .stateObj="${t}" .hass="${this.hass}"></ha-state-icon> <div> ${this._config.name||(0,u.C)(this.hass.states[this._config.entity])} </div> </div> <div> <ha-icon-button .path="${C}" .label="${this.hass.localize("ui.panel.lovelace.cards.show_more_info")}" class="more-info" @click="${this._handleMoreInfo}"></ha-icon-button> </div> </div> ${!n&&(p||_||h)?r.dy` <div> <div class="title-controls"> ${p||_?r.dy` <div class="media-info"> <hui-marquee .text="${_||p}" .active="${this._marqueeActive}" @mouseover="${this._marqueeMouseOver}" @mouseleave="${this._marqueeMouseLeave}"></hui-marquee> ${_?p:""} </div> `:""} ${h?r.dy` <div class="controls"> ${l.map((t=>r.dy` <ha-icon-button .label="${this.hass.localize(`ui.card.media_player.${t.action}`)}" .path="${t.icon}" action="${t.action}" @click="${this._handleClick}"> </ha-icon-button> `))} ${(0,g.e)(t,k.yZ.BROWSE_MEDIA)?r.dy` <ha-icon-button class="browse-media" .label="${this.hass.localize("ui.card.media_player.browse_media")}" .path="${O}" @click="${this._handleBrowseMedia}"></ha-icon-button> `:""} </div> `:""} </div> ${this._showProgressBar?r.dy` <mwc-linear-progress determinate style="${(0,c.V)({"--mdc-theme-primary":this._foregroundColor||"var(--accent-color)",cursor:(0,g.e)(t,k.yZ.SEEK)?"pointer":"initial"})}" @click="${this._handleSeek}"> </mwc-linear-progress> `:""} </div> `:""} </div> </ha-card> `}},{kind:"method",key:"shouldUpdate",value:function(t){return(0,w.G2)(this,t)||t.size>1||!t.has("hass")}},{kind:"method",key:"firstUpdated",value:function(){this._attachObserver(),this._measureCard()}},{kind:"method",key:"willUpdate",value:function(t){if((0,n.Z)(o,"willUpdate",this,3)([t]),!this._config||!this.hass||!t.has("_config")&&!t.has("hass"))return;if(!this._stateObj)return this._progressInterval&&(clearInterval(this._progressInterval),this._progressInterval=void 0),this._foregroundColor=void 0,void(this._backgroundColor=void 0);const e=t.get("hass"),i=e?.states[this._config.entity]?.attributes.entity_picture_local||e?.states[this._config.entity]?.attributes.entity_picture;if(!this._image)return this._foregroundColor=void 0,void(this._backgroundColor=void 0);this._image!==i&&this._setColors()}},{kind:"method",key:"updated",value:function(t){if(!this._config||!this.hass||!this._stateObj||!t.has("_config")&&!t.has("hass"))return;const e=this._stateObj,i=t.get("hass"),o=t.get("_config");i&&o&&i.themes===this.hass.themes&&o.theme===this._config.theme||(0,l.R)(this,this.hass.themes,this._config.theme),this._updateProgressBar(),!this._progressInterval&&this._showProgressBar&&"playing"===e.state?this._progressInterval=window.setInterval((()=>this._updateProgressBar()),1e3):!this._progressInterval||this._showProgressBar&&"playing"===e.state||(clearInterval(this._progressInterval),this._progressInterval=void 0)}},{kind:"get",key:"_image",value:function(){if(!this.hass||!this._config)return;const t=this._stateObj;return t?t.attributes.entity_picture_local||t.attributes.entity_picture:void 0}},{kind:"get",key:"_showProgressBar",value:function(){if(!this.hass||!this._config||this._narrow)return!1;const t=this._stateObj;return!!t&&(("playing"===t.state||"paused"===t.state)&&"media_duration"in t.attributes&&"media_position"in t.attributes)}},{kind:"method",key:"_measureCard",value:function(){const t=this.shadowRoot.querySelector("ha-card");t&&(this._narrow=t.offsetWidth<350,this._veryNarrow=t.offsetWidth<300,this._cardHeight=t.offsetHeight)}},{kind:"method",key:"_attachObserver",value:async function(){this._resizeObserver||(this._resizeObserver=new ResizeObserver((0,_.D)((()=>this._measureCard()),250,!1)));const t=this.shadowRoot.querySelector("ha-card");t&&this._resizeObserver.observe(t)}},{kind:"method",key:"_handleMoreInfo",value:function(){(0,h.B)(this,"hass-more-info",{entityId:this._config.entity})}},{kind:"method",key:"_handleBrowseMedia",value:function(){(0,f.B)(this,{action:"play",entityId:this._config.entity,mediaPickedCallback:t=>(0,k.qV)(this.hass,this._config.entity,t.item.media_content_id,t.item.media_content_type)})}},{kind:"method",key:"_handleClick",value:function(t){(0,k.kr)(this.hass,this._stateObj,t.currentTarget.getAttribute("action"))}},{kind:"method",key:"_updateProgressBar",value:function(){this._progressBar&&this._stateObj?.attributes.media_duration&&(this._progressBar.progress=(0,k.rs)(this._stateObj)/this._stateObj.attributes.media_duration)}},{kind:"get",key:"_stateObj",value:function(){return this.hass.states[this._config.entity]}},{kind:"method",key:"_handleSeek",value:function(t){const e=this._stateObj;if(!(0,g.e)(e,k.yZ.SEEK))return;const i=this._progressBar.offsetWidth,o=t.offsetX/i,a=this._stateObj.attributes.media_duration*o;this.hass.callService("media_player","media_seek",{entity_id:this._config.entity,seek_position:a})}},{kind:"method",key:"_setColors",value:async function(){if(this._image)try{const{foreground:t,background:e}=await(0,p.b)(this.hass.hassUrl(this._image));this._backgroundColor=e.hex,this._foregroundColor=t.hex}catch(t){console.error("Error getting Image Colors",t),this._foregroundColor=void 0,this._backgroundColor=void 0}}},{kind:"method",key:"_marqueeMouseOver",value:function(){this._marqueeActive||(this._marqueeActive=!0)}},{kind:"method",key:"_marqueeMouseLeave",value:function(){this._marqueeActive&&(this._marqueeActive=!1)}},{kind:"field",static:!0,key:"styles",value:()=>r.iv`ha-card{overflow:hidden;height:100%}.background{display:flex;position:absolute;top:0;left:0;height:100%;width:100%;transition:filter .8s}.color-block{background-color:var(--primary-color);transition:background-color .8s;width:100%}.color-gradient{position:absolute;background-image:linear-gradient(to right,var(--primary-color),transparent);height:100%;right:0;opacity:1;transition:width .8s,opacity .8s linear .8s}.image{background-color:var(--primary-color);background-position:center;background-size:cover;background-repeat:no-repeat;position:absolute;right:0;height:100%;opacity:1;transition:width .8s,background-image .8s,background-color .8s,background-size .8s,opacity .8s linear .8s}.no-image .image{opacity:0}.no-img{background-color:var(--primary-color);background-size:initial;background-repeat:no-repeat;background-position:center center;padding-bottom:0;position:absolute;right:0;height:100%;background-image:url("/static/images/card_media_player_bg.png");width:50%;transition:opacity .8s,background-color .8s}.off .color-gradient,.off .image{opacity:0;transition:opacity 0s,width .8s;width:0}.background:not(.off):not(.no-image) .no-img,.unavailable .no-img{opacity:0}.player{position:relative;padding:16px;height:100%;box-sizing:border-box;display:flex;flex-direction:column;justify-content:space-between;color:var(--text-primary-color);transition-property:color,padding;transition-duration:.4s}.controls{padding:8px 8px 8px 0;display:flex;justify-content:flex-start;align-items:center;transition:padding,color;transition-duration:.4s;margin-left:-12px;margin-inline-start:-12px;margin-inline-end:initial;padding-inline-start:0;padding-inline-end:8px;direction:ltr}.controls>div{display:flex;align-items:center}.controls ha-icon-button{--mdc-icon-button-size:44px;--mdc-icon-size:30px}ha-icon-button[action=media_pause],ha-icon-button[action=media_play],ha-icon-button[action=media_play_pause],ha-icon-button[action=media_stop],ha-icon-button[action=turn_off],ha-icon-button[action=turn_on]{--mdc-icon-button-size:56px;--mdc-icon-size:40px}ha-icon-button.browse-media{position:absolute;right:4px;--mdc-icon-size:24px;inset-inline-end:4px;inset-inline-start:initial}.top-info{display:flex;justify-content:space-between}.icon-name{display:flex;height:fit-content;align-items:center}.icon-name ha-state-icon{padding-right:8px;padding-inline-start:initial;padding-inline-end:8px;direction:var(--direction)}.more-info{position:absolute;top:4px;right:4px;inset-inline-start:initial;inset-inline-end:4px;direction:var(--direction)}.media-info{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}hui-marquee{font-size:1.2em;margin:0px 0 4px}.title-controls{padding-top:16px}mwc-linear-progress{width:100%;margin-top:4px;--mdc-linear-progress-buffer-color:rgba(200, 200, 200, 0.5)}.no-image .controls{padding:0}.off.background{filter:grayscale(1)}.narrow .controls,.no-progress .controls{padding-bottom:0}.narrow ha-icon-button{--mdc-icon-button-size:40px;--mdc-icon-size:28px}.narrow ha-icon-button[action=media_pause],.narrow ha-icon-button[action=media_play],.narrow ha-icon-button[action=media_play_pause],.narrow ha-icon-button[action=turn_on]{--mdc-icon-button-size:50px;--mdc-icon-size:36px}.narrow ha-icon-button.browse-media{--mdc-icon-size:24px}.no-progress.player:not(.no-controls){padding-bottom:0px}`}]}}),r.oi);o()}catch(t){o(t)}}))},1490:function(t,e,i){var o=i(44249),a=i(72621),n=i(57243),r=i(15093);(0,o.Z)([(0,r.Mo)("hui-marquee")],(function(t,e){class i extends e{constructor(...e){super(...e),t(this)}}return{F:i,d:[{kind:"field",decorators:[(0,r.Cb)()],key:"text",value:void 0},{kind:"field",decorators:[(0,r.Cb)({type:Boolean})],key:"active",value:()=>!1},{kind:"field",decorators:[(0,r.Cb)({reflect:!0,type:Boolean})],key:"animating",value:()=>!1},{kind:"method",key:"firstUpdated",value:function(t){(0,a.Z)(i,"firstUpdated",this,3)([t]),this.addEventListener("mouseover",(()=>this.classList.add("hovering")),{capture:!0}),this.addEventListener("mouseout",(()=>this.classList.remove("hovering")))}},{kind:"method",key:"updated",value:function(t){(0,a.Z)(i,"updated",this,3)([t]),t.has("text")&&this.animating&&(this.animating=!1),t.has("active")&&this.active&&this.offsetWidth<this.scrollWidth&&(this.animating=!0)}},{kind:"method",key:"render",value:function(){return this.text?n.dy` <div class="marquee-inner" @animationiteration="${this._onIteration}"> <span>${this.text}</span> ${this.animating?n.dy` <span>${this.text}</span> `:""} </div> `:n.Ld}},{kind:"method",key:"_onIteration",value:function(){this.active||(this.animating=!1)}},{kind:"field",static:!0,key:"styles",value:()=>n.iv`:host{display:flex;position:relative;align-items:center;height:1.2em;contain:strict}.marquee-inner{position:absolute;left:0;right:0;text-overflow:ellipsis;overflow:hidden}:host(.hovering) .marquee-inner{text-overflow:initial;overflow:initial}:host([animating]) .marquee-inner{left:initial;right:initial;animation:marquee 10s linear infinite}:host([animating]) .marquee-inner span{padding-right:16px;padding-inline-end:16px;padding-inline-start:initial}@keyframes marquee{0%{transform:translateX(0%)}100%{transform:translateX(-50%)}}`}]}}),n.oi)}};
//# sourceMappingURL=59105.e99716e7785accfa.js.map