c.8654f580.js 54 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851
  1. import{_ as t,j as e,y as i,a2 as a,d as o,n as r,e as s,t as n,E as d,G as c,a5 as l,J as p,eJ as h,i as m,k as u,aU as g,aB as _,eK as b,C as f,a4 as v,aC as y,eL as x,eM as w,I as k,a8 as $}from"./main-ec7846c8.js";import{b as z}from"./c.eea05cf6.js";import"./c.d3381c6c.js";import{L as I}from"./c.840a95b4.js";import{B as S,d as O,a as j}from"./c.10b44dbb.js";import"./c.27e9c060.js";import{c as C}from"./c.417318ff.js";import{s as M,d as D}from"./c.0e3055bd.js";import{M as T,g as E,B as H,b as R}from"./c.fb45139f.js";import{U as L}from"./c.811f664e.js";import{a as P}from"./c.cb96fbc8.js";import{i as A}from"./c.b0145069.js";import{i as W,b as U,e as B}from"./c.07e395f8.js";import{d as G}from"./c.4f015773.js";import"./c.2f01b935.js";import"./c.541a83df.js";import"./c.23dcece3.js";import"./c.fbbe4b73.js";import{c as F}from"./c.874c8cfd.js";import{t as N}from"./c.a0946910.js";import"./c.0a3ec415.js";function q(t){return"horizontal"===t?"row":"column"}t([r("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 i`<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[a("/**\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*/"),o`
  21. .mdc-top-app-bar {
  22. position: static;
  23. color: var(--mdc-theme-on-primary, #fff);
  24. }
  25. `]}}]}}),e);class J extends S{constructor(){super(...arguments),this._itemSize={},this._gaps={},this._padding={}}get _defaultConfig(){return Object.assign({},super._defaultConfig,{itemSize:{width:"300px",height:"300px"},gap:"8px",padding:"match-gap"})}get _gap(){return this._gaps.row}get _idealSize(){return this._itemSize[O(this.direction)]}get _idealSize1(){return this._itemSize[O(this.direction)]}get _idealSize2(){return this._itemSize[j(this.direction)]}get _gap1(){return this._gaps[(t=this.direction,"horizontal"===t?"column":"row")];var t}get _gap2(){return this._gaps[q(this.direction)]}get _padding1(){const t=this._padding,[e,i]="horizontal"===this.direction?["left","right"]:["top","bottom"];return[t[e],t[i]]}get _padding2(){const t=this._padding,[e,i]="horizontal"===this.direction?["top","bottom"]:["left","right"];return[t[e],t[i]]}set itemSize(t){const e=this._itemSize,i=parseInt(t.width),a=parseInt(t.height);i!==e.width&&(e.width=i,this._triggerReflow()),a!==e.height&&(e.height=a,this._triggerReflow())}_setGap(t){const e=t.split(" ").map((t=>function(t){return"auto"===t?1/0:parseInt(t)}(t))),i=this._gaps;e[0]!==i.row&&(i.row=e[0],this._triggerReflow()),void 0===e[1]?e[0]!==i.column&&(i.column=e[0],this._triggerReflow()):e[1]!==i.column&&(i.column=e[1],this._triggerReflow())}set padding(t){const e=this._padding,i=t.split(" ").map((t=>function(t){return"match-gap"===t?1/0:parseInt(t)}(t)));1===i.length?e.top=e.right=e.bottom=e.left=i[0]:2===i.length?(e.top=e.bottom=i[0],e.right=e.left=i[1]):3===i.length?(e.top=i[0],e.right=e.left=i[1],e.bottom=i[2]):4===i.length&&["top","right","bottom","left"].forEach(((t,a)=>e[t]=i[a]))}}class K extends J{constructor(){super(...arguments),this._metrics=null,this.flex=null,this.justify=null}get _defaultConfig(){return Object.assign({},super._defaultConfig,{flex:!1,justify:"start"})}set gap(t){this._setGap(t)}_updateLayout(){const t=this.justify,[e,i]=this._padding1,[a,o]=this._padding2;["_gap1","_gap2"].forEach((e=>{const i=this[e];if(i===1/0&&!["space-between","space-around","space-evenly"].includes(t))throw new Error("grid layout: gap can only be set to 'auto' when justify is set to 'space-between', 'space-around' or 'space-evenly'");if(i===1/0&&"_gap2"===e)throw new Error(`grid layout: ${q(this.direction)}-gap cannot be set to 'auto' when direction is set to ${this.direction}`)}));const r={rolumns:-1,itemSize1:-1,itemSize2:-1,gap1:this._gap1===1/0?-1:this._gap1,gap2:this._gap2,padding1:{start:e===1/0?this._gap1:e,end:i===1/0?this._gap1:i},padding2:{start:a===1/0?this._gap2:a,end:o===1/0?this._gap2:o},positions:[]};let s=this._viewDim2;this.flex||["start","center","end"].includes(t)?(s-=r.padding2.start,s-=r.padding2.end):"space-between"===t?s+=r.gap2:"space-evenly"===t&&(s-=r.gap2);const n=s/(this._idealSize2+r.gap2);if(this.flex){r.rolumns=Math.round(n),r.itemSize2=Math.round((s-r.gap2*(r.rolumns-1))/r.rolumns);switch(!0===this.flex?"area":this.flex.preserve){case"aspect-ratio":r.itemSize1=Math.round(this._idealSize1/this._idealSize2*r.itemSize2);break;case O(this.direction):r.itemSize1=Math.round(this._idealSize1);break;default:r.itemSize1=Math.round(this._idealSize1*this._idealSize2/r.itemSize2)}}else r.itemSize1=this._idealSize1,r.itemSize2=this._idealSize2,r.rolumns=Math.floor(n);let d,c;if(this.flex||["start","center","end"].includes(t)){const e=r.rolumns*r.itemSize2+(r.rolumns-1)*r.gap2;d=this.flex||"start"===t?r.padding2.start:"end"===t?this._viewDim2-r.padding2.end-e:Math.round(this._viewDim2/2-e/2),c=r.gap2}else{const a=s-r.rolumns*r.itemSize2;"space-between"===t?(c=Math.round(a/(r.rolumns-1)),d=0):"space-around"===t?(c=Math.round(a/r.rolumns),d=Math.round(c/2)):(c=Math.round(a/(r.rolumns+1)),d=c),this._gap1===1/0&&(r.gap1=c,e===1/0&&(r.padding1.start=d),i===1/0&&(r.padding1.end=d))}for(let t=0;t<r.rolumns;t++)r.positions.push(d),d+=r.itemSize2+c;this._metrics=r}get _delta(){return this._metrics.itemSize1+this._metrics.gap1}_getItemSize(t){return{[this._sizeDim]:this._metrics.itemSize1,[this._secondarySizeDim]:this._metrics.itemSize2}}_getActiveItems(){const{padding1:t}=this._metrics,e=Math.max(0,this._scrollPosition-this._overhang),i=Math.min(this._scrollSize,this._scrollPosition+this._viewDim1+this._overhang),a=Math.max(0,Math.floor((e-t.start)/this._delta)),o=Math.max(0,Math.ceil((i-t.start)/this._delta));this._first=a*this._metrics.rolumns,this._last=Math.min(o*this._metrics.rolumns-1,this._totalItems-1),this._physicalMin=t.start+this._delta*a,this._physicalMax=t.start+this._delta*o}_getItemPosition(t){const{rolumns:e,padding1:i,positions:a,itemSize1:o,itemSize2:r}=this._metrics;return{[this._positionDim]:i.start+Math.floor(t/e)*this._delta,[this._secondaryPositionDim]:a[t%e],[O(this.direction)]:o,[j(this.direction)]:r}}_updateScrollSize(){this._scrollSize=Math.max(1,Math.ceil(this._totalItems/this._metrics.rolumns)*this._delta+this._gap)}}const V=(t,e)=>t.callWS({type:"media_source/browse_media",media_content_id:e}),Q=t=>t.startsWith("media-source://media_source"),X=async(t,e,i)=>{const a=new FormData;a.append("media_content_id",e),a.append("file",i);const o=await t.fetchWithAuth("/api/media_source/local_source/upload",{method:"POST",body:a});if(413===o.status)throw new Error(`Uploaded file is too large (${i.name})`);if(200!==o.status)throw new Error("Unknown error");return o.json()},Y=async(t,e)=>t.callWS({type:"media_source/local_source/remove",media_content_id:e}),Z=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 N.translations)t=N.translations[a].nativeName;else{const[e,i]=a.split("-");e in N.translations&&(t=`${N.translations[e].nativeName}`,e.toLowerCase()!==i.toLowerCase()&&(t+=` (${i})`))}e.push([a,t])}return e.sort(((t,e)=>F(t[1],e[1])))},tt=(t,e,i)=>{const a=[];if(!e)return a;for(const[o,r]of e.languages)o===t&&a.push([r,"male"===r||"female"===r?i(`ui.panel.config.cloud.account.tts.${r}`):r]);return a.sort(((t,e)=>F(t[1],e[1])))};t([r("ha-browse-media-tts")],(function(t,e){class a extends e{constructor(...e){super(...e),t(this)}}return{F:a,d:[{kind:"field",decorators:[s()],key:"hass",value:void 0},{kind:"field",decorators:[s()],key:"item",value:void 0},{kind:"field",decorators:[s()],key:"action",value:void 0},{kind:"field",decorators:[n()],key:"_cloudDefaultOptions",value:void 0},{kind:"field",decorators:[n()],key:"_cloudOptions",value:void 0},{kind:"field",decorators:[n()],key:"_cloudTTSInfo",value:void 0},{kind:"field",decorators:[I("cloudTtsTryMessage",!0,!1)],key:"_message",value:void 0},{kind:"method",key:"render",value:function(){var t;return i`<ha-card>
  26. <div class="card-content">
  27. <ha-textarea
  28. autogrow
  29. .label=${this.hass.localize("ui.components.media-browser.tts.message")}
  30. .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)||""})}
  31. >
  32. </ha-textarea>
  33. ${this._cloudDefaultOptions?this._renderCloudOptions():""}
  34. </div>
  35. <div class="card-actions">
  36. ${!this._cloudDefaultOptions||this._cloudDefaultOptions[0]===this._cloudOptions[0]&&this._cloudDefaultOptions[1]===this._cloudOptions[1]?i`<span></span>`:i`
  37. <button class="link" @click=${this._storeDefaults}>
  38. ${this.hass.localize("ui.components.media-browser.tts.set_as_default")}
  39. </button>
  40. `}
  41. <mwc-button @click=${this._ttsClicked}>
  42. ${this.hass.localize(`ui.components.media-browser.tts.action_${this.action}`)}
  43. </mwc-button>
  44. </div>
  45. </ha-card> `}},{kind:"method",key:"_renderCloudOptions",value:function(){if(!this._cloudTTSInfo||!this._cloudOptions)return"";const t=this.getLanguages(this._cloudTTSInfo),e=this._cloudOptions,a=this.getSupportedGenders(e[0],this._cloudTTSInfo,this.hass.localize);return i`
  46. <div class="cloud-options">
  47. <ha-select
  48. fixedMenuPosition
  49. naturalMenuWidth
  50. .label=${this.hass.localize("ui.components.media-browser.tts.language")}
  51. .value=${e[0]}
  52. @selected=${this._handleLanguageChange}
  53. @closed=${M}
  54. >
  55. ${t.map((([t,e])=>i`<mwc-list-item .value=${t}>${e}</mwc-list-item>`))}
  56. </ha-select>
  57. <ha-select
  58. fixedMenuPosition
  59. naturalMenuWidth
  60. .label=${this.hass.localize("ui.components.media-browser.tts.gender")}
  61. .value=${e[1]}
  62. @selected=${this._handleGenderChange}
  63. @closed=${M}
  64. >
  65. ${a.map((([t,e])=>i`<mwc-list-item .value=${t}>${e}</mwc-list-item>`))}
  66. </ha-select>
  67. </div>
  68. `}},{kind:"method",key:"willUpdate",value:function(t){var e,i;if(d(c(a.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&&((i=this.hass,i.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 o=null===(e=this.shadowRoot.querySelector("ha-textarea"))||void 0===e?void 0:e.value;void 0!==o&&o!==this._message&&(this._message=o)}},{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:()=>l(Z)},{kind:"field",key:"getSupportedGenders",value:()=>l(tt)},{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,p(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,P(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:()=>[h,o`
  69. :host {
  70. margin: 16px auto;
  71. padding: 0 8px;
  72. display: flex;
  73. flex-direction: column;
  74. max-width: 400px;
  75. }
  76. .cloud-options {
  77. margin-top: 16px;
  78. display: flex;
  79. justify-content: space-between;
  80. }
  81. .cloud-options ha-select {
  82. width: 48%;
  83. }
  84. ha-textarea {
  85. width: 100%;
  86. }
  87. button.link {
  88. color: var(--primary-color);
  89. }
  90. .card-actions {
  91. display: flex;
  92. justify-content: space-between;
  93. }
  94. `]}]}}),e),t([r("ha-media-player-browse")],(function(t,e){class a extends e{constructor(...e){super(...e),t(this)}}return{F:a,d:[{kind:"field",decorators:[s({attribute:!1})],key:"hass",value:void 0},{kind:"field",decorators:[s()],key:"entityId",value:void 0},{kind:"field",decorators:[s()],key:"action",value:()=>"play"},{kind:"field",decorators:[s({type:Boolean})],key:"dialog",value:()=>!1},{kind:"field",decorators:[s()],key:"navigateIds",value:void 0},{kind:"field",decorators:[s({type:Boolean,attribute:"narrow",reflect:!0})],key:"_narrow",value:()=>!1},{kind:"field",decorators:[s({type:Boolean,attribute:"scroll",reflect:!0})],key:"_scrolled",value:()=>!1},{kind:"field",decorators:[n()],key:"_error",value:void 0},{kind:"field",decorators:[n()],key:"_parentItem",value:void 0},{kind:"field",decorators:[n()],key:"_currentItem",value:void 0},{kind:"field",decorators:[m(".header")],key:"_header",value:void 0},{kind:"field",decorators:[m(".content")],key:"_content",value:void 0},{kind:"field",decorators:[m("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(){d(c(a.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),p(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(d(c(a.prototype),"willUpdate",this).call(this,t),t.has("entityId"))this._setError(void 0);else if(!t.has("navigateIds"))return;this._setError(void 0);const i=t.get("navigateIds"),o=this.navigateIds;null===(e=this._content)||void 0===e||e.scrollTo(0,0),this._scrolled=!1;const r=this._currentItem,s=this._parentItem;this._currentItem=void 0,this._parentItem=void 0;const n=o[o.length-1],l=o.length>1?o[o.length-2]:void 0;let h,m;t.has("entityId")||(i&&o.length===i.length+1&&i.every(((t,e)=>{const i=o[e];return i.media_content_id===t.media_content_id&&i.media_content_type===t.media_content_type}))?m=Promise.resolve(r):i&&o.length===i.length-1&&o.every(((t,e)=>{const a=i[e];return t.media_content_id===a.media_content_id&&t.media_content_type===a.media_content_type}))&&(h=Promise.resolve(s))),h||(h=this._fetchData(this.entityId,n.media_content_id,n.media_content_type)),h.then((t=>{this._currentItem=t,p(this,"media-browsed",{ids:o,current:t})}),(e=>{var a;i&&t.has("entityId")&&o.length===i.length&&i.every(((t,e)=>o[e].media_content_id===t.media_content_id&&o[e].media_content_type===t.media_content_type))?p(this,"media-browsed",{ids:[{media_content_id:void 0,media_content_type:void 0}],replace:!0}):"entity_not_found"===e.code&&L.includes(null===(a=this.hass.states[this.entityId])||void 0===a?void 0:a.state)?this._setError({message:this.hass.localize("ui.components.media-browser.media_player_unavailable"),code:"entity_not_found"}):this._setError(e)})),m||void 0===l||(m=this._fetchData(this.entityId,l.media_content_id,l.media_content_type)),m&&m.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(d(c(a.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 i`
  95. <div class="container">
  96. <ha-alert alert-type="error">
  97. ${this._renderError(this._error)}
  98. </ha-alert>
  99. </div>
  100. `;if(!this._currentItem)return i`<ha-circular-progress active></ha-circular-progress>`;const t=this._currentItem,e=this.hass.localize(`ui.components.media-browser.class.${t.media_class}`),a=t.children||[],o=T[t.media_class],r=t.children_media_class?T[t.children_media_class]:T.directory,s=t.thumbnail?this._getSignedThumbnail(t.thumbnail).then((t=>`url(${t})`)):"none";return i`
  101. ${t.can_play?i`
  102. <div
  103. class="header ${u({"no-img":!t.thumbnail,"no-dialog":!this.dialog})}"
  104. @transitionend=${this._setHeaderHeight}
  105. >
  106. <div class="header-content">
  107. ${t.thumbnail?i`
  108. <div
  109. class="img"
  110. style="background-image: ${C(s,"")}"
  111. >
  112. ${this._narrow&&null!=t&&t.can_play?i`
  113. <ha-fab
  114. mini
  115. .item=${t}
  116. @click=${this._actionClicked}
  117. >
  118. <ha-svg-icon
  119. slot="icon"
  120. .label=${this.hass.localize(`ui.components.media-browser.${this.action}-media`)}
  121. .path=${"play"===this.action?g:_}
  122. ></ha-svg-icon>
  123. ${this.hass.localize(`ui.components.media-browser.${this.action}`)}
  124. </ha-fab>
  125. `:""}
  126. </div>
  127. `:i``}
  128. <div class="header-info">
  129. <div class="breadcrumb">
  130. <h1 class="title">${t.title}</h1>
  131. ${e?i` <h2 class="subtitle">${e}</h2> `:""}
  132. </div>
  133. ${!t.can_play||t.thumbnail&&this._narrow?"":i`
  134. <mwc-button
  135. raised
  136. .item=${t}
  137. @click=${this._actionClicked}
  138. >
  139. <ha-svg-icon
  140. .label=${this.hass.localize(`ui.components.media-browser.${this.action}-media`)}
  141. .path=${"play"===this.action?g:_}
  142. ></ha-svg-icon>
  143. ${this.hass.localize(`ui.components.media-browser.${this.action}`)}
  144. </mwc-button>
  145. `}
  146. </div>
  147. </div>
  148. </div>
  149. `:""}
  150. <div
  151. class="content"
  152. @scroll=${this._scroll}
  153. @touchmove=${this._scroll}
  154. >
  155. ${this._error?i`
  156. <div class="container">
  157. <ha-alert alert-type="error">
  158. ${this._renderError(this._error)}
  159. </ha-alert>
  160. </div>
  161. `:(d=t.media_content_id,d.startsWith("media-source://tts/")?i`
  162. <ha-browse-media-tts
  163. .item=${t}
  164. .hass=${this.hass}
  165. .action=${this.action}
  166. @tts-picked=${this._ttsPicked}
  167. ></ha-browse-media-tts>
  168. `:a.length||t.not_shown?"grid"===r.layout?i`
  169. <lit-virtualizer
  170. scroller
  171. .layout=${n={itemSize:{width:"175px",height:"portrait"===r.thumbnail_ratio?"312px":"225px"},gap:"16px",flex:{preserve:"aspect-ratio"},justify:"space-evenly",direction:"vertical"},Object.assign({type:K},n)}
  172. .items=${a}
  173. .renderItem=${this._renderGridItem}
  174. class="children ${u({portrait:"portrait"===r.thumbnail_ratio,not_shown:!!t.not_shown})}"
  175. ></lit-virtualizer>
  176. ${t.not_shown?i`
  177. <div class="grid not-shown">
  178. <div class="title">
  179. ${this.hass.localize("ui.components.media-browser.not_shown",{count:t.not_shown})}
  180. </div>
  181. </div>
  182. `:""}
  183. `:i`
  184. <mwc-list>
  185. <lit-virtualizer
  186. scroller
  187. .items=${a}
  188. style=${f({height:72*a.length+26+"px"})}
  189. .renderItem=${this._renderListItem}
  190. ></lit-virtualizer>
  191. ${t.not_shown?i`
  192. <mwc-list-item
  193. noninteractive
  194. class="not-shown"
  195. .graphic=${o.show_list_images?"medium":"avatar"}
  196. dir=${z(this.hass)}
  197. >
  198. <span class="title">
  199. ${this.hass.localize("ui.components.media-browser.not_shown",{count:t.not_shown})}
  200. </span>
  201. </mwc-list-item>
  202. `:""}
  203. </mwc-list>
  204. `:i`
  205. <div class="container no-items">
  206. ${"media-source://media_source/local/."===t.media_content_id?i`
  207. <div class="highlight-add-button">
  208. <span>
  209. <ha-svg-icon
  210. .path=${b}
  211. ></ha-svg-icon>
  212. </span>
  213. <span>
  214. ${this.hass.localize("ui.components.media-browser.file_management.highlight_button")}
  215. </span>
  216. </div>
  217. `:this.hass.localize("ui.components.media-browser.no_items")}
  218. </div>
  219. `)}
  220. </div>
  221. </div>
  222. </div>
  223. `;var n,d}},{kind:"field",key:"_renderGridItem",value(){return t=>{const e=t.thumbnail?this._getSignedThumbnail(t.thumbnail).then((t=>`url(${t})`)):"none";return i`
  224. <div class="child" .item=${t} @click=${this._childClicked}>
  225. <ha-card outlined>
  226. <div class="thumbnail">
  227. ${t.thumbnail?i`
  228. <div
  229. class="${["app","directory"].includes(t.media_class)?"centered-image":""} ${W(t.thumbnail)?"brand-image":""} image"
  230. style="background-image: ${C(e,"")}"
  231. ></div>
  232. `:i`
  233. <div class="icon-holder image">
  234. <ha-svg-icon
  235. class="folder"
  236. .path=${T["directory"===t.media_class&&t.children_media_class||t.media_class].icon}
  237. ></ha-svg-icon>
  238. </div>
  239. `}
  240. ${t.can_play?i`
  241. <ha-icon-button
  242. class="play ${u({can_expand:t.can_expand})}"
  243. .item=${t}
  244. .label=${this.hass.localize(`ui.components.media-browser.${this.action}-media`)}
  245. .path=${"play"===this.action?g:_}
  246. @click=${this._actionClicked}
  247. ></ha-icon-button>
  248. `:""}
  249. </div>
  250. <div class="title">
  251. ${t.title}
  252. <paper-tooltip fitToVisibleBounds position="top" offset="4"
  253. >${t.title}</paper-tooltip
  254. >
  255. </div>
  256. </ha-card>
  257. </div>
  258. `}}},{kind:"field",key:"_renderListItem",value(){return t=>{const e=this._currentItem,a=T[e.media_class],o=a.show_list_images&&t.thumbnail?this._getSignedThumbnail(t.thumbnail).then((t=>`url(${t})`)):"none";return i`
  259. <mwc-list-item
  260. @click=${this._childClicked}
  261. .item=${t}
  262. .graphic=${a.show_list_images?"medium":"avatar"}
  263. dir=${z(this.hass)}
  264. >
  265. <div
  266. class=${u({graphic:!0,thumbnail:!0===a.show_list_images})}
  267. style="background-image: ${C(o,"")}"
  268. slot="graphic"
  269. >
  270. <ha-icon-button
  271. class="play ${u({show:!a.show_list_images||!t.thumbnail})}"
  272. .item=${t}
  273. .label=${this.hass.localize(`ui.components.media-browser.${this.action}-media`)}
  274. .path=${"play"===this.action?g:_}
  275. @click=${this._actionClicked}
  276. ></ha-icon-button>
  277. </div>
  278. <span class="title">${t.title}</span>
  279. </mwc-list-item>
  280. `}}},{kind:"method",key:"_getSignedThumbnail",value:async function(t){if(!t)return"";if(t.startsWith("/"))return(await E(this.hass,t)).path;var e;W(t)&&(t=U({domain:B(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){p(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),p(this,"media-picked",{...t.detail,navigateIds:e})}},{kind:"field",key:"_childClicked",value(){return async t=>{const e=t.currentTarget.item;e&&(e.can_expand?p(this,"media-browsed",{ids:[...this.navigateIds,e]}):this._runAction(e))}}},{kind:"method",key:"_fetchData",value:async function(t,e,i){return t!==H?R(this.hass,t,e,i):V(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 A(),this._resizeObserver=new ResizeObserver(D((()=>this._measureCard()),250,!1))),this._resizeObserver.observe(this)}},{kind:"method",key:"_closeDialogAction",value:function(){p(this,"close-dialog")}},{kind:"method",key:"_setError",value:function(t){this.dialog?t&&(this._closeDialogAction(),P(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?i`
  281. <h2>
  282. ${this.hass.localize("ui.components.media-browser.no_local_media_found")}
  283. </h2>
  284. <p>
  285. ${this.hass.localize("ui.components.media-browser.no_media_folder")}
  286. <br />
  287. ${this.hass.localize("ui.components.media-browser.setup_local_help","documentation",i`<a
  288. href=${G(this.hass,"/more-info/local-media/setup-media")}
  289. target="_blank"
  290. rel="noreferrer"
  291. >${this.hass.localize("ui.components.media-browser.documentation")}</a
  292. >`)}
  293. <br />
  294. ${this.hass.localize("ui.components.media-browser.local_media_files")}
  295. </p>
  296. `:i`<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:[v({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[y,o`
  297. :host {
  298. display: flex;
  299. flex-direction: column;
  300. position: relative;
  301. }
  302. ha-circular-progress {
  303. --mdc-theme-primary: var(--primary-color);
  304. display: flex;
  305. justify-content: center;
  306. margin: 40px;
  307. }
  308. .container {
  309. padding: 16px;
  310. }
  311. .no-items {
  312. padding-left: 32px;
  313. }
  314. .highlight-add-button {
  315. display: flex;
  316. flex-direction: row-reverse;
  317. margin-right: 48px;
  318. }
  319. .highlight-add-button ha-svg-icon {
  320. position: relative;
  321. top: -0.5em;
  322. margin-left: 8px;
  323. }
  324. .content {
  325. overflow-y: auto;
  326. box-sizing: border-box;
  327. height: 100%;
  328. }
  329. /* HEADER */
  330. .header {
  331. display: flex;
  332. justify-content: space-between;
  333. border-bottom: 1px solid var(--divider-color);
  334. background-color: var(--card-background-color);
  335. position: absolute;
  336. top: 0;
  337. right: 0;
  338. left: 0;
  339. z-index: 5;
  340. padding: 16px;
  341. }
  342. .header_button {
  343. position: relative;
  344. right: -8px;
  345. }
  346. .header-content {
  347. display: flex;
  348. flex-wrap: wrap;
  349. flex-grow: 1;
  350. align-items: flex-start;
  351. }
  352. .header-content .img {
  353. height: 175px;
  354. width: 175px;
  355. margin-right: 16px;
  356. background-size: cover;
  357. border-radius: 2px;
  358. transition: width 0.4s, height 0.4s;
  359. }
  360. .header-info {
  361. display: flex;
  362. flex-direction: column;
  363. justify-content: space-between;
  364. align-self: stretch;
  365. min-width: 0;
  366. flex: 1;
  367. }
  368. .header-info mwc-button {
  369. display: block;
  370. --mdc-theme-primary: var(--primary-color);
  371. padding-bottom: 16px;
  372. }
  373. .breadcrumb {
  374. display: flex;
  375. flex-direction: column;
  376. overflow: hidden;
  377. flex-grow: 1;
  378. padding-top: 16px;
  379. }
  380. .breadcrumb .title {
  381. font-size: 32px;
  382. line-height: 1.2;
  383. font-weight: bold;
  384. margin: 0;
  385. overflow: hidden;
  386. display: -webkit-box;
  387. -webkit-box-orient: vertical;
  388. -webkit-line-clamp: 2;
  389. padding-right: 8px;
  390. }
  391. .breadcrumb .previous-title {
  392. font-size: 14px;
  393. padding-bottom: 8px;
  394. color: var(--secondary-text-color);
  395. overflow: hidden;
  396. text-overflow: ellipsis;
  397. cursor: pointer;
  398. --mdc-icon-size: 14px;
  399. }
  400. .breadcrumb .subtitle {
  401. font-size: 16px;
  402. overflow: hidden;
  403. text-overflow: ellipsis;
  404. margin-bottom: 0;
  405. transition: height 0.5s, margin 0.5s;
  406. }
  407. .not-shown {
  408. font-style: italic;
  409. color: var(--secondary-text-color);
  410. padding: 8px 16px 8px;
  411. }
  412. .grid.not-shown {
  413. display: flex;
  414. align-items: center;
  415. text-align: center;
  416. }
  417. /* ============= CHILDREN ============= */
  418. mwc-list {
  419. --mdc-list-vertical-padding: 0;
  420. --mdc-list-item-graphic-margin: 0;
  421. --mdc-theme-text-icon-on-background: var(--secondary-text-color);
  422. margin-top: 10px;
  423. }
  424. mwc-list li:last-child {
  425. display: none;
  426. }
  427. mwc-list li[divider] {
  428. border-bottom-color: var(--divider-color);
  429. }
  430. mwc-list-item {
  431. width: 100%;
  432. }
  433. div.children {
  434. display: grid;
  435. grid-template-columns: repeat(
  436. auto-fit,
  437. minmax(var(--media-browse-item-size, 175px), 0.1fr)
  438. );
  439. grid-gap: 16px;
  440. padding: 16px;
  441. }
  442. :host([dialog]) .children {
  443. grid-template-columns: repeat(
  444. auto-fit,
  445. minmax(var(--media-browse-item-size, 175px), 0.33fr)
  446. );
  447. }
  448. .child {
  449. display: flex;
  450. flex-direction: column;
  451. cursor: pointer;
  452. }
  453. ha-card {
  454. position: relative;
  455. width: 100%;
  456. box-sizing: border-box;
  457. }
  458. .children ha-card .thumbnail {
  459. width: 100%;
  460. position: relative;
  461. box-sizing: border-box;
  462. transition: padding-bottom 0.1s ease-out;
  463. padding-bottom: 100%;
  464. }
  465. .portrait ha-card .thumbnail {
  466. padding-bottom: 150%;
  467. }
  468. ha-card .image {
  469. border-radius: 3px 3px 0 0;
  470. }
  471. .image {
  472. position: absolute;
  473. top: 0;
  474. right: 0;
  475. left: 0;
  476. bottom: 0;
  477. background-size: cover;
  478. background-repeat: no-repeat;
  479. background-position: center;
  480. }
  481. .centered-image {
  482. margin: 0 8px;
  483. background-size: contain;
  484. }
  485. .brand-image {
  486. background-size: 40%;
  487. }
  488. .children ha-card .icon-holder {
  489. display: flex;
  490. justify-content: center;
  491. align-items: center;
  492. }
  493. .child .folder {
  494. color: var(--secondary-text-color);
  495. --mdc-icon-size: calc(var(--media-browse-item-size, 175px) * 0.4);
  496. }
  497. .child .play {
  498. position: absolute;
  499. transition: color 0.5s;
  500. border-radius: 50%;
  501. top: calc(50% - 50px);
  502. right: calc(50% - 35px);
  503. opacity: 0;
  504. transition: opacity 0.1s ease-out;
  505. }
  506. .child .play:not(.can_expand) {
  507. --mdc-icon-button-size: 70px;
  508. --mdc-icon-size: 48px;
  509. }
  510. ha-card:hover .play {
  511. opacity: 1;
  512. }
  513. ha-card:hover .play:not(.can_expand) {
  514. color: var(--primary-color);
  515. }
  516. ha-card:hover .play.can_expand {
  517. bottom: 8px;
  518. }
  519. .child .play.can_expand {
  520. background-color: rgba(var(--rgb-card-background-color), 0.5);
  521. top: auto;
  522. bottom: 0px;
  523. right: 8px;
  524. transition: bottom 0.1s ease-out, opacity 0.1s ease-out;
  525. }
  526. .child .play:hover {
  527. color: var(--primary-color);
  528. }
  529. .child .title {
  530. font-size: 16px;
  531. padding-top: 16px;
  532. padding-left: 2px;
  533. overflow: hidden;
  534. display: -webkit-box;
  535. -webkit-box-orient: vertical;
  536. -webkit-line-clamp: 1;
  537. text-overflow: ellipsis;
  538. }
  539. .child ha-card .title {
  540. margin-bottom: 16px;
  541. padding-left: 16px;
  542. }
  543. mwc-list-item .graphic {
  544. background-size: contain;
  545. border-radius: 2px;
  546. display: flex;
  547. align-content: center;
  548. align-items: center;
  549. line-height: initial;
  550. }
  551. mwc-list-item .graphic .play {
  552. opacity: 0;
  553. transition: all 0.5s;
  554. background-color: rgba(var(--rgb-card-background-color), 0.5);
  555. border-radius: 50%;
  556. --mdc-icon-button-size: 40px;
  557. }
  558. mwc-list-item:hover .graphic .play {
  559. opacity: 1;
  560. color: var(--primary-text-color);
  561. }
  562. mwc-list-item .graphic .play.show {
  563. opacity: 1;
  564. background-color: transparent;
  565. }
  566. mwc-list-item .title {
  567. margin-left: 16px;
  568. }
  569. mwc-list-item[dir="rtl"] .title {
  570. margin-right: 16px;
  571. margin-left: 0;
  572. }
  573. /* ============= Narrow ============= */
  574. :host([narrow]) {
  575. padding: 0;
  576. }
  577. :host([narrow]) .media-source {
  578. padding: 0 24px;
  579. }
  580. :host([narrow]) div.children {
  581. grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  582. }
  583. :host([narrow]) .breadcrumb .title {
  584. font-size: 24px;
  585. }
  586. :host([narrow]) .header {
  587. padding: 0;
  588. }
  589. :host([narrow]) .header.no-dialog {
  590. display: block;
  591. }
  592. :host([narrow]) .header_button {
  593. position: absolute;
  594. top: 14px;
  595. right: 8px;
  596. }
  597. :host([narrow]) .header-content {
  598. flex-direction: column;
  599. flex-wrap: nowrap;
  600. }
  601. :host([narrow]) .header-content .img {
  602. height: auto;
  603. width: 100%;
  604. margin-right: 0;
  605. padding-bottom: 50%;
  606. margin-bottom: 8px;
  607. position: relative;
  608. background-position: center;
  609. border-radius: 0;
  610. transition: width 0.4s, height 0.4s, padding-bottom 0.4s;
  611. }
  612. ha-fab {
  613. position: absolute;
  614. --mdc-theme-secondary: var(--primary-color);
  615. bottom: -20px;
  616. right: 20px;
  617. }
  618. :host([narrow]) .header-info mwc-button {
  619. margin-top: 16px;
  620. margin-bottom: 8px;
  621. }
  622. :host([narrow]) .header-info {
  623. padding: 0 16px 8px;
  624. }
  625. /* ============= Scroll ============= */
  626. :host([scroll]) .breadcrumb .subtitle {
  627. height: 0;
  628. margin: 0;
  629. }
  630. :host([scroll]) .breadcrumb .title {
  631. -webkit-line-clamp: 1;
  632. }
  633. :host(:not([narrow])[scroll]) .header:not(.no-img) ha-icon-button {
  634. align-self: center;
  635. }
  636. :host([scroll]) .header-info mwc-button,
  637. .no-img .header-info mwc-button {
  638. padding-right: 4px;
  639. }
  640. :host([scroll][narrow]) .no-img .header-info mwc-button {
  641. padding-right: 16px;
  642. }
  643. :host([scroll]) .header-info {
  644. flex-direction: row;
  645. }
  646. :host([scroll]) .header-info mwc-button {
  647. align-self: center;
  648. margin-top: 0;
  649. margin-bottom: 0;
  650. padding-bottom: 0;
  651. }
  652. :host([scroll][narrow]) .no-img .header-info {
  653. flex-direction: row-reverse;
  654. }
  655. :host([scroll][narrow]) .header-info {
  656. padding: 20px 24px 10px 24px;
  657. align-items: center;
  658. }
  659. :host([scroll]) .header-content {
  660. align-items: flex-end;
  661. flex-direction: row;
  662. }
  663. :host([scroll]) .header-content .img {
  664. height: 75px;
  665. width: 75px;
  666. }
  667. :host([scroll]) .breadcrumb {
  668. padding-top: 0;
  669. align-self: center;
  670. }
  671. :host([scroll][narrow]) .header-content .img {
  672. height: 100px;
  673. width: 100px;
  674. padding-bottom: initial;
  675. margin-bottom: 0;
  676. }
  677. :host([scroll]) ha-fab {
  678. bottom: 0px;
  679. right: -24px;
  680. --mdc-fab-box-shadow: none;
  681. --mdc-theme-secondary: rgba(var(--rgb-primary-color), 0.5);
  682. }
  683. lit-virtualizer {
  684. height: 100%;
  685. overflow: overlay !important;
  686. contain: size layout !important;
  687. }
  688. lit-virtualizer.not_shown {
  689. height: calc(100% - 36px);
  690. }
  691. `]}}]}}),e);t([r("ha-media-manage-button")],(function(t,e){return{F:class extends e{constructor(...e){super(...e),t(this)}},d:[{kind:"field",decorators:[s({attribute:!1})],key:"hass",value:void 0},{kind:"field",decorators:[s()],key:"currentItem",value:void 0},{kind:"field",decorators:[n()],key:"_uploading",value:()=>0},{kind:"method",key:"render",value:function(){return this.currentItem&&Q(this.currentItem.media_content_id||"")?i`
  692. <mwc-button
  693. .label=${this.hass.localize("ui.components.media-browser.file_management.manage")}
  694. @click=${this._manage}
  695. >
  696. <ha-svg-icon .path=${x} slot="icon"></ha-svg-icon>
  697. </mwc-button>
  698. `:i``}},{kind:"method",key:"_manage",value:function(){var t,e;t=this,e={currentItem:this.currentItem,onClose:()=>p(this,"media-refresh")},p(t,"show-dialog",{dialogTag:"dialog-media-manage",dialogImport:()=>import("./c.d4cf120a.js"),dialogParams:e})}},{kind:"field",static:!0,key:"styles",value:()=>o`
  699. mwc-button {
  700. /* We use icon + text to show disabled state */
  701. --mdc-button-disabled-ink-color: --mdc-theme-primary;
  702. }
  703. ha-svg-icon[slot="icon"],
  704. ha-circular-progress[slot="icon"] {
  705. vertical-align: middle;
  706. }
  707. ha-svg-icon[slot="icon"] {
  708. margin-inline-start: 0px;
  709. margin-inline-end: 8px;
  710. direction: var(--direction);
  711. }
  712. `}]}}),e),t([r("dialog-media-player-browse")],(function(t,e){return{F:class extends e{constructor(...e){super(...e),t(this)}},d:[{kind:"field",decorators:[s({attribute:!1})],key:"hass",value:void 0},{kind:"field",decorators:[n()],key:"_currentItem",value:void 0},{kind:"field",decorators:[n()],key:"_navigateIds",value:void 0},{kind:"field",decorators:[n()],key:"_params",value:void 0},{kind:"field",decorators:[m("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,p(this,"dialog-closed",{dialog:this.localName})}},{kind:"method",key:"render",value:function(){return this._params&&this._navigateIds?i`
  713. <ha-dialog
  714. open
  715. scrimClickAction
  716. escapeKeyAction
  717. hideActions
  718. flexContent
  719. .heading=${this._currentItem?this._currentItem.title:this.hass.localize("ui.components.media-browser.media-player-browser")}
  720. @closed=${this.closeDialog}
  721. >
  722. <ha-header-bar slot="heading">
  723. ${this._navigateIds.length>1?i`
  724. <ha-icon-button
  725. slot="navigationIcon"
  726. .path=${w}
  727. @click=${this._goBack}
  728. ></ha-icon-button>
  729. `:""}
  730. <span slot="title">
  731. ${this._currentItem?this._currentItem.title:this.hass.localize("ui.components.media-browser.media-player-browser")}
  732. </span>
  733. <ha-media-manage-button
  734. slot="actionItems"
  735. .hass=${this.hass}
  736. .currentItem=${this._currentItem}
  737. @media-refresh=${this._refreshMedia}
  738. ></ha-media-manage-button>
  739. <ha-icon-button
  740. .label=${this.hass.localize("ui.dialogs.generic.close")}
  741. .path=${k}
  742. dialogAction="close"
  743. slot="actionItems"
  744. class="header_button"
  745. dir=${z(this.hass)}
  746. ></ha-icon-button>
  747. </ha-header-bar>
  748. <ha-media-player-browse
  749. dialog
  750. .hass=${this.hass}
  751. .entityId=${this._params.entityId}
  752. .navigateIds=${this._navigateIds}
  753. .action=${this._action}
  754. @close-dialog=${this.closeDialog}
  755. @media-picked=${this._mediaPicked}
  756. @media-browsed=${this._mediaBrowsed}
  757. ></ha-media-player-browse>
  758. </ha-dialog>
  759. `:i``}},{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[$,o`
  760. ha-dialog {
  761. --dialog-z-index: 8;
  762. --dialog-content-padding: 0;
  763. }
  764. ha-media-player-browse {
  765. --media-browser-max-height: calc(100vh - 65px);
  766. height: calc(100vh - 65px);
  767. direction: ltr;
  768. }
  769. @media (min-width: 800px) {
  770. ha-dialog {
  771. --mdc-dialog-max-width: 800px;
  772. --dialog-surface-position: fixed;
  773. --dialog-surface-top: 40px;
  774. --mdc-dialog-max-height: calc(100vh - 72px);
  775. }
  776. ha-media-player-browse {
  777. position: initial;
  778. --media-browser-max-height: 100vh - 137px;
  779. height: 100vh - 137px;
  780. width: 700px;
  781. }
  782. }
  783. ha-header-bar {
  784. --mdc-theme-on-primary: var(--primary-text-color);
  785. --mdc-theme-primary: var(--mdc-theme-surface);
  786. flex-shrink: 0;
  787. border-bottom: 1px solid var(--divider-color, rgba(0, 0, 0, 0.12));
  788. }
  789. ha-media-manage-button {
  790. --mdc-theme-primary: var(--mdc-theme-on-primary);
  791. }
  792. `]}}]}}),e);var et=Object.freeze({__proto__:null});export{V as b,et as d,Q as i,Y as r,X as u};