iobroker.lovelace
Version:
With this adapter you can build visualization for ioBroker with Home Assistant Lovelace UI
1 lines • 16 kB
JavaScript
export const __rspack_esm_id=37136;export const __rspack_esm_ids=[37136];export const __webpack_modules__={41758(t,i,e){e.d(i,{o:()=>s});e(18111),e(7588),e(45367),e(92731);var a=e(10020),o=e(79622);a.j._pipeline.generator.register("default",t=>{t.sort((t,i)=>i.population-t.population);const i=t[0];let e;const a=new Map,s=(t,e)=>(a.has(t)||a.set(t,(0,o.$W)(i.rgb,e)),a.get(t)>4.5);for(let i=1;i<t.length&&void 0===e;i++){if(s(t[i].hex,t[i].rgb)){0,e=t[i].rgb;break}const a=t[i];0;for(let o=i+1;o<t.length;o++){const i=t[o];if(!(Math.abs(a.rgb[0]-i.rgb[0])+Math.abs(a.rgb[1]-i.rgb[1])+Math.abs(a.rgb[2]-i.rgb[2])>150)&&s(i.hex,i.rgb)){0,e=i.rgb;break}}}return void 0===e&&(e=i.getYiq()<200?[255,255,255]:[0,0,0]),{foreground:new i.constructor(e,0),background:i}});const s=(t,i=16)=>new a.j(t,{colorCount:i}).getPalette().then(({foreground:t,background:i})=>({background:i,foreground:t}))},36358(t,i,e){e.d(i,{g:()=>o});var a=e(1087);const o=(t,i)=>{(0,a.r)(t,"show-dialog",{dialogTag:"dialog-join-media-players",dialogImport:()=>e.e(59671).then(e.bind(e,93725)),dialogParams:i})}},95287(t,i,e){e.d(i,{O:()=>o});var a=e(1087);const o=(t,i)=>{(0,a.r)(t,"show-dialog",{dialogTag:"dialog-media-player-browse",dialogImport:()=>Promise.all([e.e(39763),e.e(32450),e.e(46095),e.e(7305),e.e(92769),e.e(34995),e.e(3283),e.e(80131),e.e(70183),e.e(99812),e.e(78198),e.e(26092),e.e(8851),e.e(91845),e.e(8283),e.e(71486)]).then(e.bind(e,93565)),dialogParams:i})}},92723(t,i,e){e.a(t,async function(t,a){try{e.r(i),e.d(i,{HuiMediaControlCard:()=>j});e(18111),e(61701);var o=e(62826),s=e(5124),r=e(22441),n=e(6412),h=e(89784),c=e(42372),d=e(1087),l=e(47129),g=e(82286),p=e(41758),u=e(9899),_=(e(76776),e(26300)),m=e(70759),b=e(93367),v=e(36358),f=e(95287),y=e(22675),w=e(53072),k=e(13632),x=e(784),$=(e(12895),e(85979)),C=t([_,m,b,$]);[_,m,b,$]=C.then?(await C)():C;const A="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",q="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",M="M14,10A3,3 0 0,0 11,13A3,3 0 0,0 14,16A3,3 0 0,0 17,13A3,3 0 0,0 14,10M14,18A5,5 0 0,1 9,13A5,5 0 0,1 14,8A5,5 0 0,1 19,13A5,5 0 0,1 14,18M14,2A2,2 0 0,1 16,4A2,2 0 0,1 14,6A2,2 0 0,1 12,4A2,2 0 0,1 14,2M19,0H9A2,2 0 0,0 7,2V18A2,2 0 0,0 9,20H19A2,2 0 0,0 21,18V2A2,2 0 0,0 19,0M5,22H17V24H5A2,2 0 0,1 3,22V4H5";class j extends s.WF{static async getConfigElement(){return await e.e(49597).then(e.bind(e,92620)),document.createElement("hui-media-control-card-editor")}static getStubConfig(t,i,e){return{type:"media-control",entity:(0,k.B)(t,1,i,e,["media_player"])[0]||""}}getCardSize(){return 3}setConfig(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())}connectedCallback(){if(super.connectedCallback(),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))}disconnectedCallback(){super.disconnectedCallback(),this._progressInterval&&(clearInterval(this._progressInterval),this._progressInterval=void 0),this._resizeObserver&&this._resizeObserver.disconnect()}render(){if(!this.hass||!this._config)return s.s6;const t=this._stateObj;if(!t)return s.qy` <hui-warning .hass="${this.hass}"> ${(0,$.j)(this.hass,this._config.entity)} </hui-warning> `;const i={"background-image":this._image?`url(${this.hass.hassUrl(this._image)})`:"none",width:`${this._cardHeight}px`,"background-color":this._backgroundColor||""},e={"background-image":`linear-gradient(to right, ${this._backgroundColor}, ${this._backgroundColor+"00"})`,width:`${this._cardHeight}px`},a=t.state,o=!(0,l.a)(t)&&a!==y.Hh&&a!==y.HV,r=a===y.Hh||a===y.HV||o&&!(0,g.$)(t,w.vj.TURN_ON),c=!this._image,d=(0,w.Un)(t,!1),p=d&&(!this._veryNarrow||o||"idle"===a||"on"===a),u=(0,w.mm)(t),_=(0,w.HN)(t.attributes.media_title),m=t.attributes.group_members?.length;return s.qy` <ha-card> <div class="background ${(0,n.H)({"no-image":c,off:o||r,unavailable:r})}"> <div class="color-block" style="${(0,h.W)({"background-color":this._backgroundColor||""})}"></div> <div class="no-img" style="${(0,h.W)({"background-color":this._backgroundColor||""})}"></div> <div class="image" style="${(0,h.W)(i)}"></div> ${c?"":s.qy` <div class="color-gradient" style="${(0,h.W)(e)}"></div> `} </div> <div class="player ${(0,n.H)({"no-image":c,narrow:this._narrow&&!this._veryNarrow,off:o||r,"no-progress":this._veryNarrow||!this._showProgressBar,"no-controls":!p})}" style="${(0,h.W)({color:this._foregroundColor||""})}"> <div class="top-info"> <div class="icon-name"> <ha-state-icon class="icon" .stateObj="${t}"></ha-state-icon> <div> ${this.hass.formatEntityName(this.hass.states[this._config.entity],this._config.name)} </div> </div> <div> <ha-icon-button .path="${A}" .label="${this.hass.localize("ui.panel.lovelace.cards.show_more_info")}" class="more-info" ="${this._handleMoreInfo}"></ha-icon-button> </div> </div> ${!r&&(u||_||p)?s.qy` <div> <div class="title-controls"> ${u||_?s.qy` <div class="media-info"> <hui-marquee .text="${_||u}" .active="${this._marqueeActive}" ="${this._marqueeMouseOver}" ="${this._marqueeMouseLeave}"></hui-marquee> ${_?u:""} </div> `:""} ${p?s.qy` <div class="controls"> <div class="start"> ${d.map(t=>s.qy` <ha-icon-button .label="${this.hass.localize(`ui.card.media_player.${t.action}`)}" .path="${t.icon}" action="${t.action}" ="${this._handleClick}"> </ha-icon-button> `)} </div> <div class="end"> ${(0,g.$)(t,w.vj.BROWSE_MEDIA)?s.qy` <ha-icon-button class="browse-media" .label="${this.hass.localize("ui.card.media_player.browse_media")}" .path="${q}" ="${this._handleBrowseMedia}"></ha-icon-button> `:""} ${(0,g.$)(t,w.vj.GROUPING)?s.qy` <ha-icon-button class="join-media" .label="${this.hass.localize("ui.card.media_player.join")}" ="${this._handleJoinMediaPlayers}"> <ha-svg-icon .path="${M}"></ha-svg-icon> ${m&&m>1?s.qy`<span class="badge"> ${t.attributes.group_members?.length} </span>`:s.s6} </ha-icon-button> `:""} </div> </div> `:""} </div> ${this._showProgressBar?s.qy` <ha-slider style="${(0,h.W)({"--ha-slider-indicator-color":this._foregroundColor||"var(--accent-color)",cursor:(0,g.$)(t,w.vj.SEEK)?"pointer":"initial"})}" ="${this._handleSeek}"> </ha-slider> `:""} </div> `:""} </div> </ha-card> `}shouldUpdate(t){return(0,x.LX)(this,t)||t.size>1||!t.has("hass")}firstUpdated(){this._attachObserver(),this._measureCard()}willUpdate(t){if(super.willUpdate(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 i=t.get("hass"),e=i?.states[this._config.entity]?.attributes.entity_picture_local||i?.states[this._config.entity]?.attributes.entity_picture;if(!this._image)return this._foregroundColor=void 0,void(this._backgroundColor=void 0);this._image!==e&&this._setColors()}updated(t){if(!this._config||!this.hass||!this._stateObj||!t.has("_config")&&!t.has("hass"))return;const i=this._stateObj,e=t.get("hass"),a=t.get("_config");e&&a&&e.themes===this.hass.themes&&a.theme===this._config.theme||(0,c.Q)(this,this.hass.themes,this._config.theme),this._updateProgressBar(),!this._progressInterval&&this._showProgressBar&&"playing"===i.state?this._progressInterval=window.setInterval(()=>this._updateProgressBar(),1e3):!this._progressInterval||this._showProgressBar&&"playing"===i.state||(clearInterval(this._progressInterval),this._progressInterval=void 0)}get _image(){if(!this.hass||!this._config)return;const t=this._stateObj;return t?t.attributes.entity_picture_local||t.attributes.entity_picture:void 0}get _showProgressBar(){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)}_measureCard(){const t=this.shadowRoot.querySelector("ha-card");t&&(this._narrow=t.offsetWidth<350,this._veryNarrow=t.offsetWidth<300,this._cardHeight=t.offsetHeight)}async _attachObserver(){this._resizeObserver||(this._resizeObserver=new ResizeObserver((0,u.s)(()=>this._measureCard(),250,!1)));const t=this.shadowRoot.querySelector("ha-card");t&&this._resizeObserver.observe(t)}_handleMoreInfo(){(0,d.r)(this,"hass-more-info",{entityId:this._config.entity})}_handleBrowseMedia(){(0,f.O)(this,{action:"play",entityId:this._config.entity,mediaPickedCallback:t=>(0,w.ie)(this.hass,this._config.entity,t.item.media_content_id,t.item.media_content_type)})}_handleJoinMediaPlayers(){(0,v.g)(this,{entityId:this._config.entity})}_handleClick(t){(0,w.ce)(this.hass,this._stateObj,t.currentTarget.getAttribute("action"))}_updateProgressBar(){this._progressBar&&this._stateObj?.attributes.media_duration&&(this._progressBar.value=(0,w.$6)(this._stateObj)/this._stateObj.attributes.media_duration*100)}get _stateObj(){return this.hass.states[this._config.entity]}_handleSeek(){const t=this._stateObj;if(!(0,g.$)(t,w.vj.SEEK))return;const i=this._progressBar?.value??0,e=i?i/100:0,a=this._stateObj.attributes.media_duration*e;this.hass.callService("media_player","media_seek",{entity_id:this._config.entity,seek_position:a})}async _setColors(){if(this._image)try{const{foreground:t,background:i}=await(0,p.o)(this.hass.hassUrl(this._image));this._backgroundColor=i.hex,this._foregroundColor=t.hex}catch(t){console.error("Error getting Image Colors",t),this._foregroundColor=void 0,this._backgroundColor=void 0}}_marqueeMouseOver(){this._marqueeActive||(this._marqueeActive=!0)}_marqueeMouseLeave(){this._marqueeActive&&(this._marqueeActive=!1)}constructor(...t){super(...t),this._narrow=!1,this._veryNarrow=!1,this._cardHeight=0,this._marqueeActive=!1}}j.styles=s.AH`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>.start{flex-grow:1}.controls ha-icon-button{--ha-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-size:56px;--mdc-icon-size:40px}ha-icon-button.browse-media{--mdc-icon-size:24px;inset-inline-end:4px;inset-inline-start:initial}ha-icon-button.join-media{--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}ha-slider{--track-size:8px;width:100%;--ha-slider-track-color:rgba(200, 200, 200, 0.5)}ha-slider::part(thumb){display:none}.no-image .controls{padding:0}.off.background{filter:grayscale(1)}.narrow .controls,.no-progress .controls{padding-bottom:0}.narrow ha-icon-button{--ha-icon-button-size:40px;--mdc-icon-size:28px}.narrow ha-icon-button[action=media_pause] .narrow ha-icon-button[action=media_stop],.narrow ha-icon-button[action=media_play],.narrow ha-icon-button[action=media_play_pause]{--ha-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}.badge{position:absolute;top:0;right:0;width:auto;height:auto;display:flex;justify-content:center;align-items:center;min-width:8px;min-height:16px;border-radius:10px;font-weight:var(--ha-font-weight-normal);font-size:var(--ha-font-size-xs);background-color:var(--accent-color);padding:0 4px;color:var(--text-accent-color,var(--text-primary-color))}`,(0,o.Cg)([(0,r.MZ)({attribute:!1})],j.prototype,"hass",void 0),(0,o.Cg)([(0,r.wk)()],j.prototype,"_config",void 0),(0,o.Cg)([(0,r.wk)()],j.prototype,"_foregroundColor",void 0),(0,o.Cg)([(0,r.wk)()],j.prototype,"_backgroundColor",void 0),(0,o.Cg)([(0,r.wk)()],j.prototype,"_narrow",void 0),(0,o.Cg)([(0,r.wk)()],j.prototype,"_veryNarrow",void 0),(0,o.Cg)([(0,r.wk)()],j.prototype,"_cardHeight",void 0),(0,o.Cg)([(0,r.P)("ha-slider")],j.prototype,"_progressBar",void 0),(0,o.Cg)([(0,r.wk)()],j.prototype,"_marqueeActive",void 0),j=(0,o.Cg)([(0,r.EM)("hui-media-control-card")],j),a()}catch(t){a(t)}})},12895(t,i,e){var a=e(62826),o=e(5124),s=e(22441);class r extends o.WF{firstUpdated(t){super.firstUpdated(t),this.addEventListener("mouseover",()=>this.classList.add("hovering"),{capture:!0}),this.addEventListener("mouseout",()=>this.classList.remove("hovering"))}updated(t){super.updated(t),t.has("text")&&this.animating&&(this.animating=!1),t.has("active")&&this.active&&this.offsetWidth<this.scrollWidth&&(this.animating=!0)}render(){return this.text?o.qy` <div class="marquee-inner" ="${this._onIteration}"> <span>${this.text}</span> ${this.animating?o.qy` <span>${this.text}</span> `:""} </div> `:o.s6}_onIteration(){this.active||(this.animating=!1)}constructor(...t){super(...t),this.active=!1,this.animating=!1}}r.styles=o.AH`: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} marquee{0%{transform:translateX(0%)}100%{transform:translateX(-50%)}}`,(0,a.Cg)([(0,s.MZ)()],r.prototype,"text",void 0),(0,a.Cg)([(0,s.MZ)({type:Boolean})],r.prototype,"active",void 0),(0,a.Cg)([(0,s.MZ)({reflect:!0,type:Boolean})],r.prototype,"animating",void 0),r=(0,a.Cg)([(0,s.EM)("hui-marquee")],r)}};