c.aa05d073.js 67 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853
  1. import{S as t,T as e,Q as i,V as a,a as s,h as o,$ as r,J as n,r as l,n as d,x as c,e as h,a5 as p,t as m,L as u,N as _,m as g,A as b,eK as f,i as v,o as y,cm as w,aK as x,eL as k,I as $,w as z,aD as C,eM as I,eN as O,z as S,P as E}from"./main-ad130be7.js";import{a as T}from"./c.4a97632a.js";import"./c.710a50fc.js";import{r as L,t as M}from"./c.3f859915.js";import{c as R,t as A,a as j,U as D,M as P,g as V,B as N,b as H,i as U,d as B}from"./c.d2e52e5a.js";import{grid as F}from"@lit-labs/virtualizer/layouts/grid";import"./c.82eccc94.js";import"./c.4feb0cb8.js";import{d as W}from"./c.d262aab0.js";import{a as q}from"./c.4266acdb.js";import{i as G,b as K,e as Y}from"./c.0a1cf8d0.js";import"./c.f1291e50.js";import"./c.0ca5587f.js";import"./c.2d5ed670.js";import"./c.97b7c4b0.js";import{a as J}from"./c.42d6aebd.js";const Q=(t,e)=>{var i,a;const s=t._$AN;if(void 0===s)return!1;for(const t of s)null===(a=(i=t)._$AO)||void 0===a||a.call(i,e,!1),Q(t,e);return!0},X=t=>{let e,i;do{if(void 0===(e=t._$AM))break;i=e._$AN,i.delete(t),t=e}while(0===(null==i?void 0:i.size))},Z=t=>{for(let e;e=t._$AM;t=e){let i=e._$AN;if(void 0===i)e._$AN=i=new Set;else if(i.has(t))break;i.add(t),it(e)}};function tt(t){void 0!==this._$AN?(X(this),this._$AM=t,Z(this)):this._$AM=t}function et(t,e=!1,i=0){const a=this._$AH,s=this._$AN;if(void 0!==s&&0!==s.size)if(e)if(Array.isArray(a))for(let t=i;t<a.length;t++)Q(a[t],!1),X(a[t]);else null!=a&&(Q(a,!1),X(a));else Q(this,t)}const it=t=>{var i,a,s,o;t.type==e.CHILD&&(null!==(i=(s=t)._$AP)&&void 0!==i||(s._$AP=et),null!==(a=(o=t)._$AQ)&&void 0!==a||(o._$AQ=tt))};class at extends t{constructor(){super(...arguments),this._$AN=void 0}_$AT(t,e,i){super._$AT(t,e,i),Z(this),this.isConnected=t._$AU}_$AO(t,e=!0){var i,a;t!==this.isConnected&&(this.isConnected=t,t?null===(i=this.reconnected)||void 0===i||i.call(this):null===(a=this.disconnected)||void 0===a||a.call(this)),e&&(Q(this,t),X(this))}setValue(t){if(L(this._$Ct))this._$Ct._$AI(t,this);else{const e=[...this._$Ct._$AH];e[this._$Ci]=t,this._$Ct._$AI(e,this,0)}}disconnected(){}reconnected(){}}class st{constructor(t){this.U=t}disconnect(){this.U=void 0}reconnect(t){this.U=t}deref(){return this.U}}class ot{constructor(){this.Y=void 0,this.q=void 0}get(){return this.Y}pause(){var t;null!==(t=this.Y)&&void 0!==t||(this.Y=new Promise((t=>this.q=t)))}resume(){var t;null===(t=this.q)||void 0===t||t.call(this),this.Y=this.q=void 0}}const rt=t=>!M(t)&&"function"==typeof t.then;const nt=i(class extends at{constructor(){super(...arguments),this._$Cft=1073741823,this._$Cwt=[],this._$CG=new st(this),this._$CK=new ot}render(...t){var e;return null!==(e=t.find((t=>!rt(t))))&&void 0!==e?e:a}update(t,e){const i=this._$Cwt;let s=i.length;this._$Cwt=e;const o=this._$CG,r=this._$CK;this.isConnected||this.disconnected();for(let t=0;t<e.length&&!(t>this._$Cft);t++){const a=e[t];if(!rt(a))return this._$Cft=t,a;t<s&&a===i[t]||(this._$Cft=1073741823,s=0,Promise.resolve(a).then((async t=>{for(;r.get();)await r.get();const e=o.deref();if(void 0!==e){const i=e._$Cwt.indexOf(a);i>-1&&i<e._$Cft&&(e._$Cft=i,e.setValue(t))}})))}return a}disconnected(){this._$CG.disconnect(),this._$CK.pause()}reconnected(){this._$CG.reconnect(this),this._$CK.resume()}});let lt,dt;async function ct(){return dt||async function(){if(lt)return(await lt).default;lt=window.ResizeObserver;try{new lt((function(){}))}catch(t){lt=import("./c.24bd2446.js"),lt=(await lt).default}return dt=lt}()}s([d("ha-header-bar")],(function(t,e){return{F:class extends e{constructor(...e){super(...e),t(this)}},d:[{kind:"method",key:"render",value:function(){return r`<header class="mdc-top-app-bar">
  2. <div class="mdc-top-app-bar__row">
  3. <section
  4. class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start"
  5. id="navigation"
  6. >
  7. <slot name="navigationIcon"></slot>
  8. <span class="mdc-top-app-bar__title">
  9. <slot name="title"></slot>
  10. </span>
  11. </section>
  12. <section
  13. class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end"
  14. id="actions"
  15. role="toolbar"
  16. >
  17. <slot name="actionItems"></slot>
  18. </section>
  19. </div>
  20. </header>`}},{kind:"get",static:!0,key:"styles",value:function(){return[n("/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/material-components/material-components-web/blob/master/LICENSE\n */\n.mdc-top-app-bar{background-color:#6200ee;background-color:var(--mdc-theme-primary, #6200ee);color:white;display:flex;position:fixed;flex-direction:column;justify-content:space-between;box-sizing:border-box;width:100%;z-index:4}.mdc-top-app-bar .mdc-top-app-bar__action-item,.mdc-top-app-bar .mdc-top-app-bar__navigation-icon{color:#fff;color:var(--mdc-theme-on-primary, #fff)}.mdc-top-app-bar .mdc-top-app-bar__action-item::before,.mdc-top-app-bar .mdc-top-app-bar__action-item::after,.mdc-top-app-bar .mdc-top-app-bar__navigation-icon::before,.mdc-top-app-bar .mdc-top-app-bar__navigation-icon::after{background-color:#fff;background-color:var(--mdc-ripple-color, var(--mdc-theme-on-primary, #fff))}.mdc-top-app-bar .mdc-top-app-bar__action-item:hover::before,.mdc-top-app-bar .mdc-top-app-bar__action-item.mdc-ripple-surface--hover::before,.mdc-top-app-bar .mdc-top-app-bar__navigation-icon:hover::before,.mdc-top-app-bar .mdc-top-app-bar__navigation-icon.mdc-ripple-surface--hover::before{opacity:0.08;opacity:var(--mdc-ripple-hover-opacity, 0.08)}.mdc-top-app-bar .mdc-top-app-bar__action-item.mdc-ripple-upgraded--background-focused::before,.mdc-top-app-bar .mdc-top-app-bar__action-item:not(.mdc-ripple-upgraded):focus::before,.mdc-top-app-bar .mdc-top-app-bar__navigation-icon.mdc-ripple-upgraded--background-focused::before,.mdc-top-app-bar .mdc-top-app-bar__navigation-icon:not(.mdc-ripple-upgraded):focus::before{transition-duration:75ms;opacity:0.24;opacity:var(--mdc-ripple-focus-opacity, 0.24)}.mdc-top-app-bar .mdc-top-app-bar__action-item:not(.mdc-ripple-upgraded)::after,.mdc-top-app-bar .mdc-top-app-bar__navigation-icon:not(.mdc-ripple-upgraded)::after{transition:opacity 150ms linear}.mdc-top-app-bar .mdc-top-app-bar__action-item:not(.mdc-ripple-upgraded):active::after,.mdc-top-app-bar .mdc-top-app-bar__navigation-icon:not(.mdc-ripple-upgraded):active::after{transition-duration:75ms;opacity:0.24;opacity:var(--mdc-ripple-press-opacity, 0.24)}.mdc-top-app-bar .mdc-top-app-bar__action-item.mdc-ripple-upgraded,.mdc-top-app-bar .mdc-top-app-bar__navigation-icon.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.24)}.mdc-top-app-bar__row{display:flex;position:relative;box-sizing:border-box;width:100%;height:64px}.mdc-top-app-bar__section{display:inline-flex;flex:1 1 auto;align-items:center;min-width:0;padding:8px 12px;z-index:1}.mdc-top-app-bar__section--align-start{justify-content:flex-start;order:-1}.mdc-top-app-bar__section--align-end{justify-content:flex-end;order:1}.mdc-top-app-bar__title{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto, sans-serif;font-family:var(--mdc-typography-headline6-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:1.25rem;font-size:var(--mdc-typography-headline6-font-size, 1.25rem);line-height:2rem;line-height:var(--mdc-typography-headline6-line-height, 2rem);font-weight:500;font-weight:var(--mdc-typography-headline6-font-weight, 500);letter-spacing:0.0125em;letter-spacing:var(--mdc-typography-headline6-letter-spacing, 0.0125em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-headline6-text-decoration, inherit);text-decoration:var(--mdc-typography-headline6-text-decoration, inherit);text-transform:inherit;text-transform:var(--mdc-typography-headline6-text-transform, inherit);padding-left:20px;padding-right:0;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;z-index:1}[dir=rtl] .mdc-top-app-bar__title,.mdc-top-app-bar__title[dir=rtl]{padding-left:0;padding-right:20px}.mdc-top-app-bar--short-collapsed{border-top-left-radius:0;border-top-right-radius:0;border-bottom-right-radius:24px;border-bottom-left-radius:0}[dir=rtl] .mdc-top-app-bar--short-collapsed,.mdc-top-app-bar--short-collapsed[dir=rtl]{border-top-left-radius:0;border-top-right-radius:0;border-bottom-right-radius:0;border-bottom-left-radius:24px}.mdc-top-app-bar--short{top:0;right:auto;left:0;width:100%;transition:width 250ms cubic-bezier(0.4, 0, 0.2, 1)}[dir=rtl] .mdc-top-app-bar--short,.mdc-top-app-bar--short[dir=rtl]{right:0;left:auto}.mdc-top-app-bar--short .mdc-top-app-bar__row{height:56px}.mdc-top-app-bar--short .mdc-top-app-bar__section{padding:4px}.mdc-top-app-bar--short .mdc-top-app-bar__title{transition:opacity 200ms cubic-bezier(0.4, 0, 0.2, 1);opacity:1}.mdc-top-app-bar--short-collapsed{box-shadow:0px 2px 4px -1px rgba(0, 0, 0, 0.2),0px 4px 5px 0px rgba(0, 0, 0, 0.14),0px 1px 10px 0px rgba(0,0,0,.12);width:56px;transition:width 300ms cubic-bezier(0.4, 0, 0.2, 1)}.mdc-top-app-bar--short-collapsed .mdc-top-app-bar__title{display:none}.mdc-top-app-bar--short-collapsed .mdc-top-app-bar__action-item{transition:padding 150ms cubic-bezier(0.4, 0, 0.2, 1)}.mdc-top-app-bar--short-collapsed.mdc-top-app-bar--short-has-action-item{width:112px}.mdc-top-app-bar--short-collapsed.mdc-top-app-bar--short-has-action-item .mdc-top-app-bar__section--align-end{padding-left:0;padding-right:12px}[dir=rtl] .mdc-top-app-bar--short-collapsed.mdc-top-app-bar--short-has-action-item .mdc-top-app-bar__section--align-end,.mdc-top-app-bar--short-collapsed.mdc-top-app-bar--short-has-action-item .mdc-top-app-bar__section--align-end[dir=rtl]{padding-left:12px;padding-right:0}.mdc-top-app-bar--dense .mdc-top-app-bar__row{height:48px}.mdc-top-app-bar--dense .mdc-top-app-bar__section{padding:0 4px}.mdc-top-app-bar--dense .mdc-top-app-bar__title{padding-left:12px;padding-right:0}[dir=rtl] .mdc-top-app-bar--dense .mdc-top-app-bar__title,.mdc-top-app-bar--dense .mdc-top-app-bar__title[dir=rtl]{padding-left:0;padding-right:12px}.mdc-top-app-bar--prominent .mdc-top-app-bar__row{height:128px}.mdc-top-app-bar--prominent .mdc-top-app-bar__title{align-self:flex-end;padding-bottom:2px}.mdc-top-app-bar--prominent .mdc-top-app-bar__action-item,.mdc-top-app-bar--prominent .mdc-top-app-bar__navigation-icon{align-self:flex-start}.mdc-top-app-bar--fixed{transition:box-shadow 200ms linear}.mdc-top-app-bar--fixed-scrolled{box-shadow:0px 2px 4px -1px rgba(0, 0, 0, 0.2),0px 4px 5px 0px rgba(0, 0, 0, 0.14),0px 1px 10px 0px rgba(0,0,0,.12);transition:box-shadow 200ms linear}.mdc-top-app-bar--dense.mdc-top-app-bar--prominent .mdc-top-app-bar__row{height:96px}.mdc-top-app-bar--dense.mdc-top-app-bar--prominent .mdc-top-app-bar__section{padding:0 12px}.mdc-top-app-bar--dense.mdc-top-app-bar--prominent .mdc-top-app-bar__title{padding-left:20px;padding-right:0;padding-bottom:9px}[dir=rtl] .mdc-top-app-bar--dense.mdc-top-app-bar--prominent .mdc-top-app-bar__title,.mdc-top-app-bar--dense.mdc-top-app-bar--prominent .mdc-top-app-bar__title[dir=rtl]{padding-left:0;padding-right:20px}.mdc-top-app-bar--fixed-adjust{padding-top:64px}.mdc-top-app-bar--dense-fixed-adjust{padding-top:48px}.mdc-top-app-bar--short-fixed-adjust{padding-top:56px}.mdc-top-app-bar--prominent-fixed-adjust{padding-top:128px}.mdc-top-app-bar--dense-prominent-fixed-adjust{padding-top:96px}@media(max-width: 599px){.mdc-top-app-bar__row{height:56px}.mdc-top-app-bar__section{padding:4px}.mdc-top-app-bar--short{transition:width 200ms cubic-bezier(0.4, 0, 0.2, 1)}.mdc-top-app-bar--short-collapsed{transition:width 250ms cubic-bezier(0.4, 0, 0.2, 1)}.mdc-top-app-bar--short-collapsed .mdc-top-app-bar__section--align-end{padding-left:0;padding-right:12px}[dir=rtl] .mdc-top-app-bar--short-collapsed .mdc-top-app-bar__section--align-end,.mdc-top-app-bar--short-collapsed .mdc-top-app-bar__section--align-end[dir=rtl]{padding-left:12px;padding-right:0}.mdc-top-app-bar--prominent .mdc-top-app-bar__title{padding-bottom:6px}.mdc-top-app-bar--fixed-adjust{padding-top:56px}}\n\n/*# sourceMappingURL=mdc.top-app-bar.min.css.map*/"),l`
  21. .mdc-top-app-bar {
  22. position: static;
  23. color: var(--mdc-theme-on-primary, #fff);
  24. }
  25. `]}}]}}),o);const ht=Symbol("scrollerRef");let pt="attachShadow"in Element.prototype&&(!("ShadyDOM"in window)||!window.ShadyDOM.inUse);let mt=null;function ut(t,e){return`\n ${t} {\n display: block;\n position: relative;\n contain: strict;\n height: 150px;\n overflow: auto;\n }\n ${e} {\n box-sizing: border-box;\n }`}class _t{constructor(t){this._benchmarkStart=null,this._layout=null,this._scrollTarget=null,this._sizer=null,this._scrollSize=null,this._scrollErr=null,this._childrenPos=null,this._childMeasurements=null,this._toBeMeasured=new Map,this._rangeChanged=!0,this._itemsChanged=!0,this._visibilityChanged=!0,this._container=null,this._containerElement=null,this._containerInlineStyle=null,this._containerStylesheet=null,this._containerSize=null,this._containerRO=null,this._childrenRO=null,this._mutationObserver=null,this._mutationPromise=null,this._mutationPromiseResolver=null,this._mutationsObserved=!1,this._loadListener=this._childLoaded.bind(this),this._scrollToIndex=null,this._items=[],this._totalItems=null,this._first=0,this._last=0,this._scheduled=new WeakSet,this._measureCallback=null,this._measureChildOverride=null,this._first=-1,this._last=-1,t&&Object.assign(this,t)}set items(t){t!==this._items&&(this._itemsChanged=!0,this._items=t,this._schedule(this._updateLayout))}get totalItems(){return null===this._totalItems?this._items.length:this._totalItems}set totalItems(t){if("number"!=typeof t&&null!==t)throw new Error("New value must be a number.");t!==this._totalItems&&(this._totalItems=t,this._schedule(this._updateLayout))}get container(){return this._container}set container(t){t!==this._container&&(this._container&&this._children.forEach((t=>t.parentNode.removeChild(t))),this._container=t,this._schedule(this._updateLayout),this._initResizeObservers().then((()=>{const e=this._containerElement,i=t&&t.nodeType===Node.DOCUMENT_FRAGMENT_NODE?t.host:t;e!==i&&(this._containerRO.disconnect(),this._containerSize=null,e?(this._containerInlineStyle?e.setAttribute("style",this._containerInlineStyle):e.removeAttribute("style"),this._containerInlineStyle=null,e===this._scrollTarget&&(e.removeEventListener("scroll",this,{passive:!0}),this._sizer&&this._sizer.remove()),e.removeEventListener("load",this._loadListener,!0),this._mutationObserver.disconnect()):addEventListener("scroll",this,{passive:!0}),this._containerElement=i,i&&(this._containerInlineStyle=i.getAttribute("style")||null,this._applyContainerStyles(),i===this._scrollTarget&&(this._sizer=this._sizer||this._createContainerSizer(),this._container.insertBefore(this._sizer,this._container.firstChild)),this._schedule(this._updateLayout),this._containerRO.observe(i),this._mutationObserver.observe(i,{childList:!0}),this._mutationPromise=new Promise((t=>this._mutationPromiseResolver=t)),this._layout&&this._layout.listenForChildLoadEvents&&i.addEventListener("load",this._loadListener,!0)))})))}get layout(){return this._layout}set layout(t){if(this._layout===t)return;let e,i;if("object"==typeof t?(void 0!==t.type&&(e=t.type,delete t.type),i=t):e=t,"function"==typeof e){if(this._layout instanceof e)return void(i&&(this._layout.config=i));e=new e(i)}this._layout&&(this._measureCallback=null,this._measureChildOverride=null,this._layout.removeEventListener("scrollsizechange",this),this._layout.removeEventListener("scrollerrorchange",this),this._layout.removeEventListener("itempositionchange",this),this._layout.removeEventListener("rangechange",this),delete this.container[ht],this.container.removeEventListener("load",this._loadListener,!0),this._containerElement&&this._sizeContainer(void 0)),this._layout=e,this._layout&&(this._layout.measureChildren&&"function"==typeof this._layout.updateItemSizes&&("function"==typeof this._layout.measureChildren&&(this._measureChildOverride=this._layout.measureChildren),this._measureCallback=this._layout.updateItemSizes.bind(this._layout)),this._layout.addEventListener("scrollsizechange",this),this._layout.addEventListener("scrollerrorchange",this),this._layout.addEventListener("itempositionchange",this),this._layout.addEventListener("rangechange",this),this._container[ht]=this,this._layout.listenForChildLoadEvents&&this._container.addEventListener("load",this._loadListener,!0),this._schedule(this._updateLayout))}startBenchmarking(){null===this._benchmarkStart&&(this._benchmarkStart=window.performance.now())}stopBenchmarking(){if(null!==this._benchmarkStart){const t=window.performance.now(),e=t-this._benchmarkStart,i=performance.getEntriesByName("uv-virtualizing","measure").filter((e=>e.startTime>=this._benchmarkStart&&e.startTime<t)).reduce(((t,e)=>t+e.duration),0);return this._benchmarkStart=null,{timeElapsed:e,virtualizationTime:i}}return null}_measureChildren(){const t={},e=this._children,i=this._measureChildOverride||this._measureChild;for(let a=0;a<e.length;a++){const s=e[a],o=this._first+a;(this._itemsChanged||this._toBeMeasured.has(s))&&(t[o]=i.call(this,s,this._items[o]))}this._childMeasurements=t,this._schedule(this._updateLayout),this._toBeMeasured.clear()}_measureChild(t){const{width:e,height:i}=t.getBoundingClientRect();return Object.assign({width:e,height:i},function(t){const e=window.getComputedStyle(t);return{marginTop:gt(e.marginTop),marginRight:gt(e.marginRight),marginBottom:gt(e.marginBottom),marginLeft:gt(e.marginLeft)}}(t))}get scrollTarget(){return this._scrollTarget}set scrollTarget(t){t===window&&(t=null),this._scrollTarget!==t&&(this._sizeContainer(void 0),this._scrollTarget&&(this._scrollTarget.removeEventListener("scroll",this,{passive:!0}),this._sizer&&this._scrollTarget===this._containerElement&&this._sizer.remove()),this._scrollTarget=t,t&&(t.addEventListener("scroll",this,{passive:!0}),t===this._containerElement&&(this._sizer=this._sizer||this._createContainerSizer(),this._container.insertBefore(this._sizer,this._container.firstChild))))}set scrollToIndex(t){this._scrollToIndex=t,this._schedule(this._updateLayout)}async _schedule(t){this._scheduled.has(t)||(this._scheduled.add(t),await Promise.resolve(),this._scheduled.delete(t),t.call(this))}async _updateDOM(){const{_rangeChanged:t,_itemsChanged:e}=this;this._visibilityChanged&&(this._notifyVisibility(),this._visibilityChanged=!1),(t||e)&&(this._notifyRange(),this._rangeChanged=!1,this._itemsChanged=!1,await this._mutationPromise),this._layout.measureChildren&&this._children.forEach((t=>this._childrenRO.observe(t))),this._positionChildren(this._childrenPos),this._sizeContainer(this._scrollSize),this._scrollErr&&(this._correctScrollError(this._scrollErr),this._scrollErr=null),this._benchmarkStart&&"mark"in window.performance&&window.performance.mark("uv-end")}_updateLayout(){this._layout.totalItems=this._totalItems,null!==this._scrollToIndex&&(this._layout.scrollToIndex(this._scrollToIndex.index,this._scrollToIndex.position),this._scrollToIndex=null),this._updateView(),null!==this._childMeasurements&&(this._measureCallback&&this._measureCallback(this._childMeasurements),this._childMeasurements=null),this._layout.reflowIfNeeded(this._itemsChanged),this._benchmarkStart&&"mark"in window.performance&&window.performance.mark("uv-end")}_handleScrollEvent(){if(this._benchmarkStart&&"mark"in window.performance){try{window.performance.measure("uv-virtualizing","uv-start","uv-end")}catch(t){}window.performance.mark("uv-start")}this._schedule(this._updateLayout)}handleEvent(t){switch(t.type){case"scroll":this._scrollTarget&&t.target!==this._scrollTarget||this._handleScrollEvent();break;case"scrollsizechange":this._scrollSize=t.detail,this._schedule(this._updateDOM);break;case"scrollerrorchange":this._scrollErr=t.detail,this._schedule(this._updateDOM);break;case"itempositionchange":this._childrenPos=t.detail,this._schedule(this._updateDOM);break;case"rangechange":this._adjustRange(t.detail),this._schedule(this._updateDOM);break;default:console.warn("event not handled",t)}}async _initResizeObservers(){if(null===this._containerRO){const t=await ct();this._containerRO=new t((t=>this._containerSizeChanged(t[0].contentRect))),this._childrenRO=new t(this._childrenSizeChanged.bind(this)),this._mutationObserver=new MutationObserver(this._observeMutations.bind(this))}}_applyContainerStyles(){if(pt){if(null===this._containerStylesheet){(this._containerStylesheet=document.createElement("style")).textContent=ut(":host","::slotted(*)")}const t=this._containerElement.shadowRoot||this._containerElement.attachShadow({mode:"open"}),e=t.querySelector("slot:not([name])");t.appendChild(this._containerStylesheet),e||t.appendChild(document.createElement("slot"))}else mt||(mt=document.createElement("style"),mt.textContent=ut(".uni-virtualizer-host",".uni-virtualizer-host > *"),document.head.appendChild(mt)),this._containerElement&&this._containerElement.classList.add("uni-virtualizer-host")}_createContainerSizer(){const t=document.createElement("div");return Object.assign(t.style,{position:"absolute",margin:"-2px 0 0 0",padding:0,visibility:"hidden",fontSize:"2px"}),t.innerHTML="&nbsp;",t.id="uni-virtualizer-spacer",t}get _children(){const t=[];let e=this.container.firstElementChild;for(;e;)"uni-virtualizer-spacer"!==e.id&&t.push(e),e=e.nextElementSibling;return t}_updateView(){if(!this.container||!this._containerElement||!this._layout)return;let t,e,i,a;if(this._scrollTarget===this._containerElement&&null!==this._containerSize)t=this._containerSize.width,e=this._containerSize.height,a=this._containerElement.scrollLeft,i=this._containerElement.scrollTop;else{const s=this._containerElement.getBoundingClientRect(),o=this._scrollTarget?this._scrollTarget.getBoundingClientRect():{top:s.top+window.pageYOffset,left:s.left+window.pageXOffset,width:innerWidth,height:innerHeight},r=o.width,n=o.height,l=Math.max(0,Math.min(r,s.left-o.left)),d=Math.max(0,Math.min(n,s.top-o.top));t=("vertical"===this._layout.direction?Math.max(0,Math.min(r,s.right-o.left)):r)-l,e=("vertical"===this._layout.direction?n:Math.max(0,Math.min(n,s.bottom-o.top)))-d,a=Math.max(0,-(s.left-o.left)),i=Math.max(0,-(s.top-o.top))}this._layout.viewportSize={width:t,height:e},this._layout.viewportScroll={top:i,left:a}}_sizeContainer(t){if(this._scrollTarget===this._containerElement){const e=t&&t.width?t.width-1:0,i=t&&t.height?t.height-1:0;this._sizer&&(this._sizer.style.transform=`translate(${e}px, ${i}px)`)}else if(this._containerElement){const e=this._containerElement.style;e.minWidth=t&&t.width?t.width+"px":null,e.minHeight=t&&t.height?t.height+"px":null}}_positionChildren(t){if(t){const e=this._children;Object.keys(t).forEach((i=>{const a=i-this._first,s=e[a];if(s){const{top:e,left:a,width:o,height:r}=t[i];s.style.position="absolute",s.style.transform=`translate(${a}px, ${e}px)`,void 0!==o&&(s.style.width=o+"px"),void 0!==r&&(s.style.height=r+"px")}}))}}async _adjustRange(t){const{_first:e,_last:i,_firstVisible:a,_lastVisible:s}=this;this._first=t.first,this._last=t.last,this._firstVisible=t.firstVisible,this._lastVisible=t.lastVisible,this._rangeChanged=this._rangeChanged||this._first!==e||this._last!==i,this._visibilityChanged=this._visibilityChanged||this._firstVisible!==a||this._lastVisible!==s}_correctScrollError(t){this._scrollTarget?(this._scrollTarget.scrollTop-=t.top,this._scrollTarget.scrollLeft-=t.left):window.scroll(window.pageXOffset-t.left,window.pageYOffset-t.top)}_notifyRange(){this._container.dispatchEvent(new CustomEvent("rangeChanged",{detail:{first:this._first,last:this._last,firstVisible:this._firstVisible,lastVisible:this._lastVisible}}))}_notifyVisibility(){this._container.dispatchEvent(new CustomEvent("visibilityChanged",{detail:{first:this._first,last:this._last,firstVisible:this._firstVisible,lastVisible:this._lastVisible}}))}_containerSizeChanged(t){const{width:e,height:i}=t;this._containerSize={width:e,height:i},this._schedule(this._updateLayout)}async _observeMutations(){this._mutationsObserved||(this._mutationsObserved=!0,this._mutationPromiseResolver(),this._mutationPromise=new Promise((t=>this._mutationPromiseResolver=t)),this._mutationsObserved=!1)}_childLoaded(){}_childrenSizeChanged(t){for(let e of t)this._toBeMeasured.set(e.target,e.contentRect);this._measureChildren(),this._schedule(this._updateLayout)}}function gt(t){const e=t?parseFloat(t):NaN;return Number.isNaN(e)?0:e}const bt=t=>t;const ft=i(class extends at{constructor(t){if(super(t),this.first=0,this.last=-1,t.type!==e.CHILD)throw new Error("The scroll directive can only be used in child expressions")}render(t){t&&(this.renderItem=t.renderItem,this.keyFunction=t.keyFunction);const e=[];if(this.first>=0&&this.last>=this.first)for(let t=this.first;t<this.last+1;t++)e.push(this.items[t]);return R(e,this.keyFunction||bt,this.renderItem)}update(t,[e]){var i;if(this.scroller||this._initialize(t,e)){const{scroller:t}=this;return this.items=t.items=e.items,t.totalItems=e.totalItems||(null===(i=e.items)||void 0===i?void 0:i.length)||0,t.layout=e.layout,t.scrollTarget=e.scrollTarget||this.container,e.scrollToIndex&&(t.scrollToIndex=e.scrollToIndex),this.render(e)}return c}_initialize(t,e){const i=this.container=t.parentNode;return i&&1===i.nodeType?(this.scroller=new _t({container:i}),i.addEventListener("rangeChanged",(t=>{this.first=t.detail.first,this.last=t.detail.last,this.setValue(this.render())})),!0):(Promise.resolve().then((()=>this.update(t,[e]))),!1)}});function vt(t,e,i,a){var s,o=arguments.length,r=o<3?e:null===a?a=Object.getOwnPropertyDescriptor(e,i):a;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(t,e,i,a);else for(var n=t.length-1;n>=0;n--)(s=t[n])&&(r=(o<3?s(r):o>3?s(e,i,r):s(e,i))||r);return o>3&&r&&Object.defineProperty(e,i,r),r}let yt=class extends o{constructor(){super(...arguments),this.scrollTarget=this}createRenderRoot(){return this}set layout(t){this._layout=t,this.requestUpdate()}get layout(){return this[ht].layout}async scrollToIndex(t,e="start"){this._scrollToIndex={index:t,position:e},this.requestUpdate(),await this.updateComplete,this._scrollToIndex=null}render(){const{items:t,renderItem:e,keyFunction:i,scrollTarget:a}=this,s=this._layout;return r`
  26. ${ft({items:t,renderItem:e,layout:s,keyFunction:i,scrollTarget:a,scrollToIndex:this._scrollToIndex})}
  27. `}};vt([h()],yt.prototype,"renderItem",void 0),vt([h({attribute:!1})],yt.prototype,"items",void 0),vt([h({attribute:!1})],yt.prototype,"scrollTarget",void 0),vt([h()],yt.prototype,"keyFunction",void 0),vt([h({attribute:!1})],yt.prototype,"layout",null),yt=vt([d("lit-virtualizer")],yt);const wt=(t,e)=>t.callWS({type:"media_source/browse_media",media_content_id:e}),xt=t=>t.startsWith("media-source://media_source"),kt=async(t,e,i)=>{const a=new FormData;a.append("media_content_id",e),a.append("file",i);const s=await t.fetchWithAuth("/api/media_source/local_source/upload",{method:"POST",body:a});if(413===s.status)throw new Error(`Uploaded file is too large (${i.name})`);if(200!==s.status)throw new Error("Unknown error");return s.json()},$t=async(t,e)=>t.callWS({type:"media_source/local_source/remove",media_content_id:e});class zt{constructor(t=!0){p(this,"_storage",{}),p(this,"_listeners",{}),t&&window.addEventListener("storage",(t=>{t.key&&this.hasKey(t.key)&&(this._storage[t.key]=t.newValue?JSON.parse(t.newValue):t.newValue,this._listeners[t.key]&&this._listeners[t.key].forEach((e=>e(t.oldValue?JSON.parse(t.oldValue):t.oldValue,this._storage[t.key]))))}))}addFromStorage(t){if(!this._storage[t]){const e=window.localStorage.getItem(t);e&&(this._storage[t]=JSON.parse(e))}}subscribeChanges(t,e){return this._listeners[t]?this._listeners[t].push(e):this._listeners[t]=[e],()=>{this.unsubscribeChanges(t,e)}}unsubscribeChanges(t,e){if(!(t in this._listeners))return;const i=this._listeners[t].indexOf(e);-1!==i&&this._listeners[t].splice(i,1)}hasKey(t){return t in this._storage}getValue(t){return this._storage[t]}setValue(t,e){this._storage[t]=e;try{void 0===e?window.localStorage.removeItem(t):window.localStorage.setItem(t,JSON.stringify(e))}catch(t){}}}const Ct=new zt,It=(t,e,i=!0,a)=>s=>{const o=i?Ct:new zt(!1),r=String(s.key);t=t||String(s.key);const n=s.initializer?s.initializer():void 0;o.addFromStorage(t);const l=()=>o.hasKey(t)?o.getValue(t):n;return{kind:"method",placement:"prototype",key:s.key,descriptor:{set(i){((i,a)=>{let r;e&&(r=l()),o.setValue(t,a),e&&i.requestUpdate(s.key,r)})(this,i)},get:()=>l(),enumerable:!0,configurable:!0},finisher(n){if(e&&i){const e=n.prototype.connectedCallback,i=n.prototype.disconnectedCallback;n.prototype.connectedCallback=function(){var i;e.call(this),this[`__unbsubLocalStorage${r}`]=(i=this,o.subscribeChanges(t,(t=>{i.requestUpdate(s.key,t)})))},n.prototype.disconnectedCallback=function(){i.call(this),this[`__unbsubLocalStorage${r}`]()}}e&&n.createProperty(s.key,{noAccessor:!0,...a})}}},Ot=t=>{const e=[];if(!t)return e;const i=new Set;for(const[a]of t.languages){if(i.has(a))continue;i.add(a);let t=a;if(a in A.translations)t=A.translations[a].nativeName;else{const[e,i]=a.split("-");e in A.translations&&(t=`${A.translations[e].nativeName}`,e.toLowerCase()!==i.toLowerCase()&&(t+=` (${i})`))}e.push([a,t])}return e.sort(((t,e)=>j(t[1],e[1])))},St=(t,e,i)=>{const a=[];if(!e)return a;for(const[s,o]of e.languages)s===t&&a.push([o,"male"===o||"female"===o?i(`ui.panel.config.cloud.account.tts.${o}`):o]);return a.sort(((t,e)=>j(t[1],e[1])))};s([d("ha-browse-media-tts")],(function(t,e){class i extends e{constructor(...e){super(...e),t(this)}}return{F:i,d:[{kind:"field",decorators:[h()],key:"hass",value:void 0},{kind:"field",decorators:[h()],key:"item",value:void 0},{kind:"field",decorators:[h()],key:"action",value:void 0},{kind:"field",decorators:[m()],key:"_cloudDefaultOptions",value:void 0},{kind:"field",decorators:[m()],key:"_cloudOptions",value:void 0},{kind:"field",decorators:[m()],key:"_cloudTTSInfo",value:void 0},{kind:"field",decorators:[It("cloudTtsTryMessage",!0,!1)],key:"_message",value:void 0},{kind:"method",key:"render",value:function(){var t;return r`<ha-card>
  28. <div class="card-content">
  29. <ha-textarea
  30. autogrow
  31. .label=${this.hass.localize("ui.components.media-browser.tts.message")}
  32. .value=${this._message||this.hass.localize("ui.components.media-browser.tts.example_message",{name:(null===(t=this.hass.user)||void 0===t?void 0:t.name)||""})}
  33. >
  34. </ha-textarea>
  35. ${this._cloudDefaultOptions?this._renderCloudOptions():""}
  36. </div>
  37. <div class="card-actions">
  38. ${!this._cloudDefaultOptions||this._cloudDefaultOptions[0]===this._cloudOptions[0]&&this._cloudDefaultOptions[1]===this._cloudOptions[1]?r`<span></span>`:r`
  39. <button class="link" @click=${this._storeDefaults}>
  40. ${this.hass.localize("ui.components.media-browser.tts.set_as_default")}
  41. </button>
  42. `}
  43. <mwc-button @click=${this._ttsClicked}>
  44. ${this.hass.localize(`ui.components.media-browser.tts.action_${this.action}`)}
  45. </mwc-button>
  46. </div>
  47. </ha-card> `}},{kind:"method",key:"_renderCloudOptions",value:function(){if(!this._cloudTTSInfo||!this._cloudOptions)return"";const t=this.getLanguages(this._cloudTTSInfo),e=this._cloudOptions,i=this.getSupportedGenders(e[0],this._cloudTTSInfo,this.hass.localize);return r`
  48. <div class="cloud-options">
  49. <ha-select
  50. fixedMenuPosition
  51. naturalMenuWidth
  52. .label=${this.hass.localize("ui.components.media-browser.tts.language")}
  53. .value=${e[0]}
  54. @selected=${this._handleLanguageChange}
  55. @closed=${J}
  56. >
  57. ${t.map((([t,e])=>r`<mwc-list-item .value=${t}>${e}</mwc-list-item>`))}
  58. </ha-select>
  59. <ha-select
  60. fixedMenuPosition
  61. naturalMenuWidth
  62. .label=${this.hass.localize("ui.components.media-browser.tts.gender")}
  63. .value=${e[1]}
  64. @selected=${this._handleGenderChange}
  65. @closed=${J}
  66. >
  67. ${i.map((([t,e])=>r`<mwc-list-item .value=${t}>${e}</mwc-list-item>`))}
  68. </ha-select>
  69. </div>
  70. `}},{kind:"method",key:"willUpdate",value:function(t){var e,a;if(u(_(i.prototype),"willUpdate",this).call(this,t),t.has("item")){if(this.item.media_content_id){const t=new URLSearchParams(this.item.media_content_id.split("?")[1]),e=t.get("message"),i=t.get("language"),a=t.get("gender");e&&(this._message=e),i&&a&&(this._cloudOptions=[i,a])}this.isCloudItem&&!this._cloudTTSInfo&&((a=this.hass,a.callWS({type:"cloud/tts/info"})).then((t=>{this._cloudTTSInfo=t})),(t=>t.callWS({type:"cloud/status"}))(this.hass).then((t=>{t.logged_in&&(this._cloudDefaultOptions=t.prefs.tts_default_voice,this._cloudOptions||(this._cloudOptions={...this._cloudDefaultOptions}))})))}if(t.has("message"))return;const s=null===(e=this.shadowRoot.querySelector("ha-textarea"))||void 0===e?void 0:e.value;void 0!==s&&s!==this._message&&(this._message=s)}},{kind:"method",key:"_handleLanguageChange",value:async function(t){t.target.value!==this._cloudOptions[0]&&(this._cloudOptions=[t.target.value,this._cloudOptions[1]])}},{kind:"method",key:"_handleGenderChange",value:async function(t){t.target.value!==this._cloudOptions[1]&&(this._cloudOptions=[this._cloudOptions[0],t.target.value])}},{kind:"field",key:"getLanguages",value:()=>g(Ot)},{kind:"field",key:"getSupportedGenders",value:()=>g(St)},{kind:"get",key:"isCloudItem",value:function(){return this.item.media_content_id.startsWith("media-source://tts/cloud")}},{kind:"method",key:"_ttsClicked",value:async function(){const t=this.shadowRoot.querySelector("ha-textarea").value;this._message=t;const e={...this.item},i=new URLSearchParams;i.append("message",t),this._cloudOptions&&(i.append("language",this._cloudOptions[0]),i.append("gender",this._cloudOptions[1])),e.media_content_id=`${e.media_content_id.split("?")[0]}?${i.toString()}`,e.can_play=!0,e.title=t,b(this,"tts-picked",{item:e})}},{kind:"method",key:"_storeDefaults",value:async function(){const t=this._cloudDefaultOptions;this._cloudDefaultOptions=[...this._cloudOptions];try{await(e=this.hass,i={tts_default_voice:this._cloudDefaultOptions},e.callWS({type:"cloud/update_prefs",...i}))}catch(e){this._cloudDefaultOptions=t,q(this,{text:this.hass.localize("ui.components.media-browser.tts.faild_to_store_defaults",{error:e.message||e})})}var e,i}},{kind:"field",static:!0,key:"styles",value:()=>[f,l`
  71. :host {
  72. margin: 16px auto;
  73. padding: 0 8px;
  74. display: flex;
  75. flex-direction: column;
  76. max-width: 400px;
  77. }
  78. .cloud-options {
  79. margin-top: 16px;
  80. display: flex;
  81. justify-content: space-between;
  82. }
  83. .cloud-options ha-select {
  84. width: 48%;
  85. }
  86. ha-textarea {
  87. width: 100%;
  88. }
  89. button.link {
  90. color: var(--primary-color);
  91. }
  92. .card-actions {
  93. display: flex;
  94. justify-content: space-between;
  95. }
  96. `]}]}}),o),s([d("ha-media-player-browse")],(function(t,e){class i extends e{constructor(...e){super(...e),t(this)}}return{F:i,d:[{kind:"field",decorators:[h({attribute:!1})],key:"hass",value:void 0},{kind:"field",decorators:[h()],key:"entityId",value:void 0},{kind:"field",decorators:[h()],key:"action",value:()=>"play"},{kind:"field",decorators:[h({type:Boolean})],key:"dialog",value:()=>!1},{kind:"field",decorators:[h()],key:"navigateIds",value:void 0},{kind:"field",decorators:[h({type:Boolean,attribute:"narrow",reflect:!0})],key:"_narrow",value:()=>!1},{kind:"field",decorators:[h({type:Boolean,attribute:"scroll",reflect:!0})],key:"_scrolled",value:()=>!1},{kind:"field",decorators:[m()],key:"_error",value:void 0},{kind:"field",decorators:[m()],key:"_parentItem",value:void 0},{kind:"field",decorators:[m()],key:"_currentItem",value:void 0},{kind:"field",decorators:[v(".header")],key:"_header",value:void 0},{kind:"field",decorators:[v(".content")],key:"_content",value:void 0},{kind:"field",decorators:[v("lit-virtualizer")],key:"_virtualizer",value:void 0},{kind:"field",key:"_observed",value:()=>!1},{kind:"field",key:"_headerOffsetHeight",value:()=>0},{kind:"field",key:"_resizeObserver",value:void 0},{kind:"method",key:"connectedCallback",value:function(){u(_(i.prototype),"connectedCallback",this).call(this),this.updateComplete.then((()=>this._attachResizeObserver()))}},{kind:"method",key:"disconnectedCallback",value:function(){this._resizeObserver&&this._resizeObserver.disconnect()}},{kind:"method",key:"refresh",value:async function(){const t=this.navigateIds[this.navigateIds.length-1];try{this._currentItem=await this._fetchData(this.entityId,t.media_content_id,t.media_content_type),b(this,"media-browsed",{ids:this.navigateIds,current:this._currentItem})}catch(t){this._setError(t)}}},{kind:"method",key:"play",value:function(){var t;null!==(t=this._currentItem)&&void 0!==t&&t.can_play&&this._runAction(this._currentItem)}},{kind:"method",key:"willUpdate",value:function(t){var e;if(u(_(i.prototype),"willUpdate",this).call(this,t),t.has("entityId"))this._setError(void 0);else if(!t.has("navigateIds"))return;this._setError(void 0);const a=t.get("navigateIds"),s=this.navigateIds;null===(e=this._content)||void 0===e||e.scrollTo(0,0),this._scrolled=!1;const o=this._currentItem,r=this._parentItem;this._currentItem=void 0,this._parentItem=void 0;const n=s[s.length-1],l=s.length>1?s[s.length-2]:void 0;let d,c;t.has("entityId")||(a&&s.length===a.length+1&&a.every(((t,e)=>{const i=s[e];return i.media_content_id===t.media_content_id&&i.media_content_type===t.media_content_type}))?c=Promise.resolve(o):a&&s.length===a.length-1&&s.every(((t,e)=>{const i=a[e];return t.media_content_id===i.media_content_id&&t.media_content_type===i.media_content_type}))&&(d=Promise.resolve(r))),d||(d=this._fetchData(this.entityId,n.media_content_id,n.media_content_type)),d.then((t=>{this._currentItem=t,b(this,"media-browsed",{ids:s,current:t})}),(e=>{var i;a&&t.has("entityId")&&s.length===a.length&&a.every(((t,e)=>s[e].media_content_id===t.media_content_id&&s[e].media_content_type===t.media_content_type))?b(this,"media-browsed",{ids:[{media_content_id:void 0,media_content_type:void 0}],replace:!0}):"entity_not_found"===e.code&&D.includes(null===(i=this.hass.states[this.entityId])||void 0===i?void 0:i.state)?this._setError({message:this.hass.localize("ui.components.media-browser.media_player_unavailable"),code:"entity_not_found"}):this._setError(e)})),c||void 0===l||(c=this._fetchData(this.entityId,l.media_content_id,l.media_content_type)),c&&c.then((t=>{this._parentItem=t}))}},{kind:"method",key:"shouldUpdate",value:function(t){if(t.size>1||!t.has("hass"))return!0;const e=t.get("hass");return void 0===e||e.localize!==this.hass.localize}},{kind:"method",key:"firstUpdated",value:function(){this._measureCard(),this._attachResizeObserver()}},{kind:"method",key:"updated",value:function(t){if(u(_(i.prototype),"updated",this).call(this,t),t.has("_scrolled"))this._animateHeaderHeight();else if(t.has("_currentItem")){var e;if(this._setHeaderHeight(),this._observed)return;const t=null===(e=this._virtualizer)||void 0===e?void 0:e._virtualizer;t&&(this._observed=!0,setTimeout((()=>t._observeMutations()),0))}}},{kind:"method",key:"render",value:function(){if(this._error)return r`
  97. <div class="container">
  98. <ha-alert alert-type="error">
  99. ${this._renderError(this._error)}
  100. </ha-alert>
  101. </div>
  102. `;if(!this._currentItem)return r`<ha-circular-progress active></ha-circular-progress>`;const t=this._currentItem,e=this.hass.localize(`ui.components.media-browser.class.${t.media_class}`),i=t.children||[],a=P[t.media_class],s=t.children_media_class?P[t.children_media_class]:P.directory,o=t.thumbnail?this._getSignedThumbnail(t.thumbnail).then((t=>`url(${t})`)):"none";return r`
  103. ${t.can_play?r`
  104. <div
  105. class="header ${y({"no-img":!t.thumbnail,"no-dialog":!this.dialog})}"
  106. @transitionend=${this._setHeaderHeight}
  107. >
  108. <div class="header-content">
  109. ${t.thumbnail?r`
  110. <div
  111. class="img"
  112. style="background-image: ${nt(o,"")}"
  113. >
  114. ${this._narrow&&null!=t&&t.can_play?r`
  115. <ha-fab
  116. mini
  117. .item=${t}
  118. @click=${this._actionClicked}
  119. >
  120. <ha-svg-icon
  121. slot="icon"
  122. .label=${this.hass.localize(`ui.components.media-browser.${this.action}-media`)}
  123. .path=${"play"===this.action?w:x}
  124. ></ha-svg-icon>
  125. ${this.hass.localize(`ui.components.media-browser.${this.action}`)}
  126. </ha-fab>
  127. `:""}
  128. </div>
  129. `:r``}
  130. <div class="header-info">
  131. <div class="breadcrumb">
  132. <h1 class="title">${t.title}</h1>
  133. ${e?r` <h2 class="subtitle">${e}</h2> `:""}
  134. </div>
  135. ${!t.can_play||t.thumbnail&&this._narrow?"":r`
  136. <mwc-button
  137. raised
  138. .item=${t}
  139. @click=${this._actionClicked}
  140. >
  141. <ha-svg-icon
  142. .label=${this.hass.localize(`ui.components.media-browser.${this.action}-media`)}
  143. .path=${"play"===this.action?w:x}
  144. ></ha-svg-icon>
  145. ${this.hass.localize(`ui.components.media-browser.${this.action}`)}
  146. </mwc-button>
  147. `}
  148. </div>
  149. </div>
  150. </div>
  151. `:""}
  152. <div
  153. class="content"
  154. @scroll=${this._scroll}
  155. @touchmove=${this._scroll}
  156. >
  157. ${this._error?r`
  158. <div class="container">
  159. <ha-alert alert-type="error">
  160. ${this._renderError(this._error)}
  161. </ha-alert>
  162. </div>
  163. `:(n=t.media_content_id,n.startsWith("media-source://tts/")?r`
  164. <ha-browse-media-tts
  165. .item=${t}
  166. .hass=${this.hass}
  167. .action=${this.action}
  168. @tts-picked=${this._ttsPicked}
  169. ></ha-browse-media-tts>
  170. `:i.length||t.not_shown?"grid"===s.layout?r`
  171. <lit-virtualizer
  172. scroller
  173. .layout=${F({itemSize:{width:"175px",height:"portrait"===s.thumbnail_ratio?"312px":"225px"},gap:"16px",flex:{preserve:"aspect-ratio"},justify:"space-evenly",direction:"vertical"})}
  174. .items=${i}
  175. .renderItem=${this._renderGridItem}
  176. class="children ${y({portrait:"portrait"===s.thumbnail_ratio,not_shown:!!t.not_shown})}"
  177. ></lit-virtualizer>
  178. ${t.not_shown?r`
  179. <div class="grid not-shown">
  180. <div class="title">
  181. ${this.hass.localize("ui.components.media-browser.not_shown",{count:t.not_shown})}
  182. </div>
  183. </div>
  184. `:""}
  185. `:r`
  186. <mwc-list>
  187. <lit-virtualizer
  188. scroller
  189. .items=${i}
  190. style=${$({height:72*i.length+26+"px"})}
  191. .renderItem=${this._renderListItem}
  192. ></lit-virtualizer>
  193. ${t.not_shown?r`
  194. <mwc-list-item
  195. noninteractive
  196. class="not-shown"
  197. .graphic=${a.show_list_images?"medium":"avatar"}
  198. dir=${T(this.hass)}
  199. >
  200. <span class="title">
  201. ${this.hass.localize("ui.components.media-browser.not_shown",{count:t.not_shown})}
  202. </span>
  203. </mwc-list-item>
  204. `:""}
  205. </mwc-list>
  206. `:r`
  207. <div class="container no-items">
  208. ${"media-source://media_source/local/."===t.media_content_id?r`
  209. <div class="highlight-add-button">
  210. <span>
  211. <ha-svg-icon
  212. .path=${k}
  213. ></ha-svg-icon>
  214. </span>
  215. <span>
  216. ${this.hass.localize("ui.components.media-browser.file_management.highlight_button")}
  217. </span>
  218. </div>
  219. `:this.hass.localize("ui.components.media-browser.no_items")}
  220. </div>
  221. `)}
  222. </div>
  223. </div>
  224. </div>
  225. `;var n}},{kind:"field",key:"_renderGridItem",value(){return t=>{const e=t.thumbnail?this._getSignedThumbnail(t.thumbnail).then((t=>`url(${t})`)):"none";return r`
  226. <div class="child" .item=${t} @click=${this._childClicked}>
  227. <ha-card outlined>
  228. <div class="thumbnail">
  229. ${t.thumbnail?r`
  230. <div
  231. class="${["app","directory"].includes(t.media_class)?"centered-image":""} ${G(t.thumbnail)?"brand-image":""} image"
  232. style="background-image: ${nt(e,"")}"
  233. ></div>
  234. `:r`
  235. <div class="icon-holder image">
  236. <ha-svg-icon
  237. class="folder"
  238. .path=${P["directory"===t.media_class&&t.children_media_class||t.media_class].icon}
  239. ></ha-svg-icon>
  240. </div>
  241. `}
  242. ${t.can_play?r`
  243. <ha-icon-button
  244. class="play ${y({can_expand:t.can_expand})}"
  245. .item=${t}
  246. .label=${this.hass.localize(`ui.components.media-browser.${this.action}-media`)}
  247. .path=${"play"===this.action?w:x}
  248. @click=${this._actionClicked}
  249. ></ha-icon-button>
  250. `:""}
  251. </div>
  252. <div class="title">
  253. ${t.title}
  254. <paper-tooltip fitToVisibleBounds position="top" offset="4"
  255. >${t.title}</paper-tooltip
  256. >
  257. </div>
  258. </ha-card>
  259. </div>
  260. `}}},{kind:"field",key:"_renderListItem",value(){return t=>{const e=this._currentItem,i=P[e.media_class],a=i.show_list_images&&t.thumbnail?this._getSignedThumbnail(t.thumbnail).then((t=>`url(${t})`)):"none";return r`
  261. <mwc-list-item
  262. @click=${this._childClicked}
  263. .item=${t}
  264. .graphic=${i.show_list_images?"medium":"avatar"}
  265. dir=${T(this.hass)}
  266. >
  267. <div
  268. class=${y({graphic:!0,thumbnail:!0===i.show_list_images})}
  269. style="background-image: ${nt(a,"")}"
  270. slot="graphic"
  271. >
  272. <ha-icon-button
  273. class="play ${y({show:!i.show_list_images||!t.thumbnail})}"
  274. .item=${t}
  275. .label=${this.hass.localize(`ui.components.media-browser.${this.action}-media`)}
  276. .path=${"play"===this.action?w:x}
  277. @click=${this._actionClicked}
  278. ></ha-icon-button>
  279. </div>
  280. <span class="title">${t.title}</span>
  281. </mwc-list-item>
  282. `}}},{kind:"method",key:"_getSignedThumbnail",value:async function(t){if(!t)return"";if(t.startsWith("/"))return(await V(this.hass,t)).path;var e;G(t)&&(t=K({domain:Y(t),type:"icon",useFallback:!0,darkOptimized:null===(e=this.hass.themes)||void 0===e?void 0:e.darkMode}));return t}},{kind:"field",key:"_actionClicked",value(){return t=>{t.stopPropagation();const e=t.currentTarget.item;this._runAction(e)}}},{kind:"method",key:"_runAction",value:function(t){b(this,"media-picked",{item:t,navigateIds:this.navigateIds})}},{kind:"method",key:"_ttsPicked",value:function(t){t.stopPropagation();const e=this.navigateIds.slice(0,-1);e.push(t.detail.item),b(this,"media-picked",{...t.detail,navigateIds:e})}},{kind:"field",key:"_childClicked",value(){return async t=>{const e=t.currentTarget.item;e&&(e.can_expand?b(this,"media-browsed",{ids:[...this.navigateIds,e]}):this._runAction(e))}}},{kind:"method",key:"_fetchData",value:async function(t,e,i){return t!==N?H(this.hass,t,e,i):wt(this.hass,e)}},{kind:"method",key:"_measureCard",value:function(){this._narrow=(this.dialog?window.innerWidth:this.offsetWidth)<450}},{kind:"method",key:"_attachResizeObserver",value:async function(){this._resizeObserver||(await U(),this._resizeObserver=new ResizeObserver(W((()=>this._measureCard()),250,!1))),this._resizeObserver.observe(this)}},{kind:"method",key:"_closeDialogAction",value:function(){b(this,"close-dialog")}},{kind:"method",key:"_setError",value:function(t){this.dialog?t&&(this._closeDialogAction(),q(this,{title:this.hass.localize("ui.components.media-browser.media_browsing_error"),text:this._renderError(t)})):this._error=t}},{kind:"method",key:"_renderError",value:function(t){return"Media directory does not exist."===t.message?r`
  283. <h2>
  284. ${this.hass.localize("ui.components.media-browser.no_local_media_found")}
  285. </h2>
  286. <p>
  287. ${this.hass.localize("ui.components.media-browser.no_media_folder")}
  288. <br />
  289. ${this.hass.localize("ui.components.media-browser.setup_local_help","documentation",r`<a
  290. href=${B(this.hass,"/more-info/local-media/setup-media")}
  291. target="_blank"
  292. rel="noreferrer"
  293. >${this.hass.localize("ui.components.media-browser.documentation")}</a
  294. >`)}
  295. <br />
  296. ${this.hass.localize("ui.components.media-browser.local_media_files")}
  297. </p>
  298. `:r`<span class="error">${t.message}</span>`}},{kind:"method",key:"_setHeaderHeight",value:async function(){await this.updateComplete;const t=this._header,e=this._content;t&&e&&(this._headerOffsetHeight=t.offsetHeight,e.style.marginTop=`${this._headerOffsetHeight}px`,e.style.maxHeight=`calc(var(--media-browser-max-height, 100%) - ${this._headerOffsetHeight}px)`)}},{kind:"method",key:"_animateHeaderHeight",value:function(){let t;const e=i=>{void 0===t&&(t=i);const a=i-t;this._setHeaderHeight(),a<400&&requestAnimationFrame(e)};requestAnimationFrame(e)}},{kind:"method",decorators:[z({passive:!0})],key:"_scroll",value:function(t){const e=t.currentTarget;!this._scrolled&&e.scrollTop>this._headerOffsetHeight?this._scrolled=!0:this._scrolled&&e.scrollTop<this._headerOffsetHeight&&(this._scrolled=!1)}},{kind:"get",static:!0,key:"styles",value:function(){return[C,l`
  299. :host {
  300. display: flex;
  301. flex-direction: column;
  302. position: relative;
  303. }
  304. ha-circular-progress {
  305. --mdc-theme-primary: var(--primary-color);
  306. display: flex;
  307. justify-content: center;
  308. margin: 40px;
  309. }
  310. .container {
  311. padding: 16px;
  312. }
  313. .no-items {
  314. padding-left: 32px;
  315. }
  316. .highlight-add-button {
  317. display: flex;
  318. flex-direction: row-reverse;
  319. margin-right: 48px;
  320. }
  321. .highlight-add-button ha-svg-icon {
  322. position: relative;
  323. top: -0.5em;
  324. margin-left: 8px;
  325. }
  326. .content {
  327. overflow-y: auto;
  328. box-sizing: border-box;
  329. height: 100%;
  330. }
  331. /* HEADER */
  332. .header {
  333. display: flex;
  334. justify-content: space-between;
  335. border-bottom: 1px solid var(--divider-color);
  336. background-color: var(--card-background-color);
  337. position: absolute;
  338. top: 0;
  339. right: 0;
  340. left: 0;
  341. z-index: 5;
  342. padding: 16px;
  343. }
  344. .header_button {
  345. position: relative;
  346. right: -8px;
  347. }
  348. .header-content {
  349. display: flex;
  350. flex-wrap: wrap;
  351. flex-grow: 1;
  352. align-items: flex-start;
  353. }
  354. .header-content .img {
  355. height: 175px;
  356. width: 175px;
  357. margin-right: 16px;
  358. background-size: cover;
  359. border-radius: 2px;
  360. transition: width 0.4s, height 0.4s;
  361. }
  362. .header-info {
  363. display: flex;
  364. flex-direction: column;
  365. justify-content: space-between;
  366. align-self: stretch;
  367. min-width: 0;
  368. flex: 1;
  369. }
  370. .header-info mwc-button {
  371. display: block;
  372. --mdc-theme-primary: var(--primary-color);
  373. padding-bottom: 16px;
  374. }
  375. .breadcrumb {
  376. display: flex;
  377. flex-direction: column;
  378. overflow: hidden;
  379. flex-grow: 1;
  380. padding-top: 16px;
  381. }
  382. .breadcrumb .title {
  383. font-size: 32px;
  384. line-height: 1.2;
  385. font-weight: bold;
  386. margin: 0;
  387. overflow: hidden;
  388. display: -webkit-box;
  389. -webkit-box-orient: vertical;
  390. -webkit-line-clamp: 2;
  391. padding-right: 8px;
  392. }
  393. .breadcrumb .previous-title {
  394. font-size: 14px;
  395. padding-bottom: 8px;
  396. color: var(--secondary-text-color);
  397. overflow: hidden;
  398. text-overflow: ellipsis;
  399. cursor: pointer;
  400. --mdc-icon-size: 14px;
  401. }
  402. .breadcrumb .subtitle {
  403. font-size: 16px;
  404. overflow: hidden;
  405. text-overflow: ellipsis;
  406. margin-bottom: 0;
  407. transition: height 0.5s, margin 0.5s;
  408. }
  409. .not-shown {
  410. font-style: italic;
  411. color: var(--secondary-text-color);
  412. padding: 8px 16px 8px;
  413. }
  414. .grid.not-shown {
  415. display: flex;
  416. align-items: center;
  417. text-align: center;
  418. }
  419. /* ============= CHILDREN ============= */
  420. mwc-list {
  421. --mdc-list-vertical-padding: 0;
  422. --mdc-list-item-graphic-margin: 0;
  423. --mdc-theme-text-icon-on-background: var(--secondary-text-color);
  424. margin-top: 10px;
  425. }
  426. mwc-list li:last-child {
  427. display: none;
  428. }
  429. mwc-list li[divider] {
  430. border-bottom-color: var(--divider-color);
  431. }
  432. mwc-list-item {
  433. width: 100%;
  434. }
  435. div.children {
  436. display: grid;
  437. grid-template-columns: repeat(
  438. auto-fit,
  439. minmax(var(--media-browse-item-size, 175px), 0.1fr)
  440. );
  441. grid-gap: 16px;
  442. padding: 16px;
  443. }
  444. :host([dialog]) .children {
  445. grid-template-columns: repeat(
  446. auto-fit,
  447. minmax(var(--media-browse-item-size, 175px), 0.33fr)
  448. );
  449. }
  450. .child {
  451. display: flex;
  452. flex-direction: column;
  453. cursor: pointer;
  454. }
  455. ha-card {
  456. position: relative;
  457. width: 100%;
  458. box-sizing: border-box;
  459. }
  460. .children ha-card .thumbnail {
  461. width: 100%;
  462. position: relative;
  463. box-sizing: border-box;
  464. transition: padding-bottom 0.1s ease-out;
  465. padding-bottom: 100%;
  466. }
  467. .portrait ha-card .thumbnail {
  468. padding-bottom: 150%;
  469. }
  470. ha-card .image {
  471. border-radius: 3px 3px 0 0;
  472. }
  473. .image {
  474. position: absolute;
  475. top: 0;
  476. right: 0;
  477. left: 0;
  478. bottom: 0;
  479. background-size: cover;
  480. background-repeat: no-repeat;
  481. background-position: center;
  482. }
  483. .centered-image {
  484. margin: 0 8px;
  485. background-size: contain;
  486. }
  487. .brand-image {
  488. background-size: 40%;
  489. }
  490. .children ha-card .icon-holder {
  491. display: flex;
  492. justify-content: center;
  493. align-items: center;
  494. }
  495. .child .folder {
  496. color: var(--secondary-text-color);
  497. --mdc-icon-size: calc(var(--media-browse-item-size, 175px) * 0.4);
  498. }
  499. .child .play {
  500. position: absolute;
  501. transition: color 0.5s;
  502. border-radius: 50%;
  503. top: calc(50% - 50px);
  504. right: calc(50% - 35px);
  505. opacity: 0;
  506. transition: opacity 0.1s ease-out;
  507. }
  508. .child .play:not(.can_expand) {
  509. --mdc-icon-button-size: 70px;
  510. --mdc-icon-size: 48px;
  511. }
  512. ha-card:hover .play {
  513. opacity: 1;
  514. }
  515. ha-card:hover .play:not(.can_expand) {
  516. color: var(--primary-color);
  517. }
  518. ha-card:hover .play.can_expand {
  519. bottom: 8px;
  520. }
  521. .child .play.can_expand {
  522. background-color: rgba(var(--rgb-card-background-color), 0.5);
  523. top: auto;
  524. bottom: 0px;
  525. right: 8px;
  526. transition: bottom 0.1s ease-out, opacity 0.1s ease-out;
  527. }
  528. .child .play:hover {
  529. color: var(--primary-color);
  530. }
  531. .child .title {
  532. font-size: 16px;
  533. padding-top: 16px;
  534. padding-left: 2px;
  535. overflow: hidden;
  536. display: -webkit-box;
  537. -webkit-box-orient: vertical;
  538. -webkit-line-clamp: 1;
  539. text-overflow: ellipsis;
  540. }
  541. .child ha-card .title {
  542. margin-bottom: 16px;
  543. padding-left: 16px;
  544. }
  545. mwc-list-item .graphic {
  546. background-size: contain;
  547. border-radius: 2px;
  548. display: flex;
  549. align-content: center;
  550. align-items: center;
  551. line-height: initial;
  552. }
  553. mwc-list-item .graphic .play {
  554. opacity: 0;
  555. transition: all 0.5s;
  556. background-color: rgba(var(--rgb-card-background-color), 0.5);
  557. border-radius: 50%;
  558. --mdc-icon-button-size: 40px;
  559. }
  560. mwc-list-item:hover .graphic .play {
  561. opacity: 1;
  562. color: var(--primary-text-color);
  563. }
  564. mwc-list-item .graphic .play.show {
  565. opacity: 1;
  566. background-color: transparent;
  567. }
  568. mwc-list-item .title {
  569. margin-left: 16px;
  570. }
  571. mwc-list-item[dir="rtl"] .title {
  572. margin-right: 16px;
  573. margin-left: 0;
  574. }
  575. /* ============= Narrow ============= */
  576. :host([narrow]) {
  577. padding: 0;
  578. }
  579. :host([narrow]) .media-source {
  580. padding: 0 24px;
  581. }
  582. :host([narrow]) div.children {
  583. grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  584. }
  585. :host([narrow]) .breadcrumb .title {
  586. font-size: 24px;
  587. }
  588. :host([narrow]) .header {
  589. padding: 0;
  590. }
  591. :host([narrow]) .header.no-dialog {
  592. display: block;
  593. }
  594. :host([narrow]) .header_button {
  595. position: absolute;
  596. top: 14px;
  597. right: 8px;
  598. }
  599. :host([narrow]) .header-content {
  600. flex-direction: column;
  601. flex-wrap: nowrap;
  602. }
  603. :host([narrow]) .header-content .img {
  604. height: auto;
  605. width: 100%;
  606. margin-right: 0;
  607. padding-bottom: 50%;
  608. margin-bottom: 8px;
  609. position: relative;
  610. background-position: center;
  611. border-radius: 0;
  612. transition: width 0.4s, height 0.4s, padding-bottom 0.4s;
  613. }
  614. ha-fab {
  615. position: absolute;
  616. --mdc-theme-secondary: var(--primary-color);
  617. bottom: -20px;
  618. right: 20px;
  619. }
  620. :host([narrow]) .header-info mwc-button {
  621. margin-top: 16px;
  622. margin-bottom: 8px;
  623. }
  624. :host([narrow]) .header-info {
  625. padding: 0 16px 8px;
  626. }
  627. /* ============= Scroll ============= */
  628. :host([scroll]) .breadcrumb .subtitle {
  629. height: 0;
  630. margin: 0;
  631. }
  632. :host([scroll]) .breadcrumb .title {
  633. -webkit-line-clamp: 1;
  634. }
  635. :host(:not([narrow])[scroll]) .header:not(.no-img) ha-icon-button {
  636. align-self: center;
  637. }
  638. :host([scroll]) .header-info mwc-button,
  639. .no-img .header-info mwc-button {
  640. padding-right: 4px;
  641. }
  642. :host([scroll][narrow]) .no-img .header-info mwc-button {
  643. padding-right: 16px;
  644. }
  645. :host([scroll]) .header-info {
  646. flex-direction: row;
  647. }
  648. :host([scroll]) .header-info mwc-button {
  649. align-self: center;
  650. margin-top: 0;
  651. margin-bottom: 0;
  652. padding-bottom: 0;
  653. }
  654. :host([scroll][narrow]) .no-img .header-info {
  655. flex-direction: row-reverse;
  656. }
  657. :host([scroll][narrow]) .header-info {
  658. padding: 20px 24px 10px 24px;
  659. align-items: center;
  660. }
  661. :host([scroll]) .header-content {
  662. align-items: flex-end;
  663. flex-direction: row;
  664. }
  665. :host([scroll]) .header-content .img {
  666. height: 75px;
  667. width: 75px;
  668. }
  669. :host([scroll]) .breadcrumb {
  670. padding-top: 0;
  671. align-self: center;
  672. }
  673. :host([scroll][narrow]) .header-content .img {
  674. height: 100px;
  675. width: 100px;
  676. padding-bottom: initial;
  677. margin-bottom: 0;
  678. }
  679. :host([scroll]) ha-fab {
  680. bottom: 0px;
  681. right: -24px;
  682. --mdc-fab-box-shadow: none;
  683. --mdc-theme-secondary: rgba(var(--rgb-primary-color), 0.5);
  684. }
  685. lit-virtualizer {
  686. height: 100%;
  687. overflow: overlay !important;
  688. contain: size layout !important;
  689. }
  690. lit-virtualizer.not_shown {
  691. height: calc(100% - 36px);
  692. }
  693. `]}}]}}),o);s([d("ha-media-manage-button")],(function(t,e){return{F:class extends e{constructor(...e){super(...e),t(this)}},d:[{kind:"field",decorators:[h({attribute:!1})],key:"hass",value:void 0},{kind:"field",decorators:[h()],key:"currentItem",value:void 0},{kind:"field",decorators:[m()],key:"_uploading",value:()=>0},{kind:"method",key:"render",value:function(){return this.currentItem&&xt(this.currentItem.media_content_id||"")?r`
  694. <mwc-button
  695. .label=${this.hass.localize("ui.components.media-browser.file_management.manage")}
  696. @click=${this._manage}
  697. >
  698. <ha-svg-icon .path=${I} slot="icon"></ha-svg-icon>
  699. </mwc-button>
  700. `:r``}},{kind:"method",key:"_manage",value:function(){var t,e;t=this,e={currentItem:this.currentItem,onClose:()=>b(this,"media-refresh")},b(t,"show-dialog",{dialogTag:"dialog-media-manage",dialogImport:()=>import("./c.f940f080.js"),dialogParams:e})}},{kind:"field",static:!0,key:"styles",value:()=>l`
  701. mwc-button {
  702. /* We use icon + text to show disabled state */
  703. --mdc-button-disabled-ink-color: --mdc-theme-primary;
  704. }
  705. ha-svg-icon[slot="icon"],
  706. ha-circular-progress[slot="icon"] {
  707. vertical-align: middle;
  708. }
  709. ha-svg-icon[slot="icon"] {
  710. margin-inline-start: 0px;
  711. margin-inline-end: 8px;
  712. direction: var(--direction);
  713. }
  714. `}]}}),o),s([d("dialog-media-player-browse")],(function(t,e){return{F:class extends e{constructor(...e){super(...e),t(this)}},d:[{kind:"field",decorators:[h({attribute:!1})],key:"hass",value:void 0},{kind:"field",decorators:[m()],key:"_currentItem",value:void 0},{kind:"field",decorators:[m()],key:"_navigateIds",value:void 0},{kind:"field",decorators:[m()],key:"_params",value:void 0},{kind:"field",decorators:[v("ha-media-player-browse")],key:"_browser",value:void 0},{kind:"method",key:"showDialog",value:function(t){this._params=t,this._navigateIds=t.navigateIds||[{media_content_id:void 0,media_content_type:void 0}]}},{kind:"method",key:"closeDialog",value:function(){this._params=void 0,this._navigateIds=void 0,this._currentItem=void 0,b(this,"dialog-closed",{dialog:this.localName})}},{kind:"method",key:"render",value:function(){return this._params&&this._navigateIds?r`
  715. <ha-dialog
  716. open
  717. scrimClickAction
  718. escapeKeyAction
  719. hideActions
  720. flexContent
  721. .heading=${this._currentItem?this._currentItem.title:this.hass.localize("ui.components.media-browser.media-player-browser")}
  722. @closed=${this.closeDialog}
  723. >
  724. <ha-header-bar slot="heading">
  725. ${this._navigateIds.length>1?r`
  726. <ha-icon-button
  727. slot="navigationIcon"
  728. .path=${O}
  729. @click=${this._goBack}
  730. ></ha-icon-button>
  731. `:""}
  732. <span slot="title">
  733. ${this._currentItem?this._currentItem.title:this.hass.localize("ui.components.media-browser.media-player-browser")}
  734. </span>
  735. <ha-media-manage-button
  736. slot="actionItems"
  737. .hass=${this.hass}
  738. .currentItem=${this._currentItem}
  739. @media-refresh=${this._refreshMedia}
  740. ></ha-media-manage-button>
  741. <ha-icon-button
  742. .label=${this.hass.localize("ui.dialogs.generic.close")}
  743. .path=${S}
  744. dialogAction="close"
  745. slot="actionItems"
  746. class="header_button"
  747. dir=${T(this.hass)}
  748. ></ha-icon-button>
  749. </ha-header-bar>
  750. <ha-media-player-browse
  751. dialog
  752. .hass=${this.hass}
  753. .entityId=${this._params.entityId}
  754. .navigateIds=${this._navigateIds}
  755. .action=${this._action}
  756. @close-dialog=${this.closeDialog}
  757. @media-picked=${this._mediaPicked}
  758. @media-browsed=${this._mediaBrowsed}
  759. ></ha-media-player-browse>
  760. </ha-dialog>
  761. `:r``}},{kind:"method",key:"_goBack",value:function(){var t;this._navigateIds=null===(t=this._navigateIds)||void 0===t?void 0:t.slice(0,-1),this._currentItem=void 0}},{kind:"method",key:"_mediaBrowsed",value:function(t){this._navigateIds=t.detail.ids,this._currentItem=t.detail.current}},{kind:"method",key:"_mediaPicked",value:function(t){this._params.mediaPickedCallback(t.detail),"play"!==this._action&&this.closeDialog()}},{kind:"get",key:"_action",value:function(){return this._params.action||"play"}},{kind:"method",key:"_refreshMedia",value:function(){this._browser.refresh()}},{kind:"get",static:!0,key:"styles",value:function(){return[E,l`
  762. ha-dialog {
  763. --dialog-z-index: 8;
  764. --dialog-content-padding: 0;
  765. }
  766. ha-media-player-browse {
  767. --media-browser-max-height: calc(100vh - 65px);
  768. height: calc(100vh - 65px);
  769. direction: ltr;
  770. }
  771. @media (min-width: 800px) {
  772. ha-dialog {
  773. --mdc-dialog-max-width: 800px;
  774. --dialog-surface-position: fixed;
  775. --dialog-surface-top: 40px;
  776. --mdc-dialog-max-height: calc(100vh - 72px);
  777. }
  778. ha-media-player-browse {
  779. position: initial;
  780. --media-browser-max-height: 100vh - 137px;
  781. height: 100vh - 137px;
  782. width: 700px;
  783. }
  784. }
  785. ha-header-bar {
  786. --mdc-theme-on-primary: var(--primary-text-color);
  787. --mdc-theme-primary: var(--mdc-theme-surface);
  788. flex-shrink: 0;
  789. border-bottom: 1px solid var(--divider-color, rgba(0, 0, 0, 0.12));
  790. }
  791. ha-media-manage-button {
  792. --mdc-theme-primary: var(--mdc-theme-on-primary);
  793. }
  794. `]}}]}}),o);var Et=Object.freeze({__proto__:null});export{Et as a,wt as b,at as d,xt as i,$t as r,kt as u};