819 lines
50 KiB
JavaScript
819 lines
50 KiB
JavaScript
import{k as t,a as e,f as i,$ as a,G as o,r,n as s,a4 as n,e as d,t as c,P as l,Q as p,m as h,j as m,dT as u,i as g,o as b,A as _,c8 as f,aV as v,dU as y,q as x,E as k,aM as w,dV as $,dW as I,h as z,I as O}from"./main-f3e781b1.js";import{c as C}from"./c.0a038163.js";import"./c.fb46b4a0.js";import"./c.c2b18de6.js";import"./c.7ae69098.js";import{d as S}from"./c.74dbf101.js";import{t as j,c as D,M as T,B as H,b as E,g as A,d as P}from"./c.928461f0.js";import{a as R}from"./c.ecc9713e.js";import{b as L,e as W}from"./c.c9bcea67.js";import"./c.f1b17fae.js";import"./c.0083326c.js";import"./c.6f86bede.js";import{a as U}from"./c.9a62bd84.js";function M(e){return t({descriptor:t=>({get(){var t,i;return null!==(i=null===(t=this.renderRoot)||void 0===t?void 0:t.querySelectorAll(e))&&void 0!==i?i:[]},enumerable:!0,configurable:!0})})}e([s("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 a`<header class="mdc-top-app-bar">
|
|
<div class="mdc-top-app-bar__row">
|
|
<section
|
|
class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start"
|
|
id="navigation"
|
|
>
|
|
<slot name="navigationIcon"></slot>
|
|
<span class="mdc-top-app-bar__title">
|
|
<slot name="title"></slot>
|
|
</span>
|
|
</section>
|
|
<section
|
|
class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end"
|
|
id="actions"
|
|
role="toolbar"
|
|
>
|
|
<slot name="actionItems"></slot>
|
|
</section>
|
|
</div>
|
|
</header>`}},{kind:"get",static:!0,key:"styles",value:function(){return[o("/**\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*/"),r`
|
|
.mdc-top-app-bar {
|
|
position: static;
|
|
color: var(--mdc-theme-on-primary, #fff);
|
|
}
|
|
`]}}]}}),i);const V=(t,e)=>t.callWS({type:"media_source/browse_media",media_content_id:e}),F=t=>t.startsWith("media-source://media_source"),N=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 image is too large");if(200!==o.status)throw new Error("Unknown error");return o.json()},B=async(t,e)=>t.callWS({type:"media_source/local_source/remove",media_content_id:e});class q{constructor(t=!0){n(this,"_storage",{}),n(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{window.localStorage.setItem(t,JSON.stringify(e))}catch(t){}}}const G=new q,J=(t,e,i=!0,a)=>o=>{const r=i?G:new q(!1),s=String(o.key);t=t||String(o.key);const n=o.initializer?o.initializer():void 0;r.addFromStorage(t);const d=()=>r.hasKey(t)?r.getValue(t):n;return{kind:"method",placement:"prototype",key:o.key,descriptor:{set(i){((i,a)=>{let s;e&&(s=d()),r.setValue(t,a),e&&i.requestUpdate(o.key,s)})(this,i)},get:()=>d(),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${s}`]=(i=this,r.subscribeChanges(t,(t=>{i.requestUpdate(o.key,t)})))},n.prototype.disconnectedCallback=function(){i.call(this),this[`__unbsubLocalStorage${s}`]()}}e&&n.createProperty(o.key,{noAccessor:!0,...a})}}},K=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 j.translations)t=j.translations[a].nativeName;else{const[e,i]=a.split("-");e in j.translations&&(t=`${j.translations[e].nativeName}`,e.toLowerCase()!==i.toLowerCase()&&(t+=` (${i})`))}e.push([a,t])}return e.sort(((t,e)=>D(t[1],e[1])))},Q=(t,e,i)=>{const a=[];if(!e)return a;for(const[o,r]of e.languages)o===t&&a.push([r,i(`ui.panel.media-browser.tts.gender_${r}`)||i(`ui.panel.config.cloud.account.tts.${r}`)||r]);return a.sort(((t,e)=>D(t[1],e[1])))};e([s("ha-browse-media-tts")],(function(t,e){class i extends e{constructor(...e){super(...e),t(this)}}return{F:i,d:[{kind:"field",decorators:[d()],key:"hass",value:void 0},{kind:"field",decorators:[d()],key:"item",value:void 0},{kind:"field",decorators:[d()],key:"action",value:void 0},{kind:"field",decorators:[c()],key:"_cloudDefaultOptions",value:void 0},{kind:"field",decorators:[c()],key:"_cloudOptions",value:void 0},{kind:"field",decorators:[c()],key:"_cloudTTSInfo",value:void 0},{kind:"field",decorators:[J("cloudTtsTryMessage",!0,!1)],key:"_message",value:void 0},{kind:"method",key:"render",value:function(){var t;return a`<ha-card>
|
|
<div class="card-content">
|
|
<ha-textarea
|
|
autogrow
|
|
.label=${this.hass.localize("ui.components.media-browser.tts.message")}
|
|
.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)||""})}
|
|
>
|
|
</ha-textarea>
|
|
${this._cloudDefaultOptions?this._renderCloudOptions():""}
|
|
</div>
|
|
<div class="card-actions">
|
|
${!this._cloudDefaultOptions||this._cloudDefaultOptions[0]===this._cloudOptions[0]&&this._cloudDefaultOptions[1]===this._cloudOptions[1]?a`<span></span>`:a`
|
|
<button class="link" @click=${this._storeDefaults}>
|
|
${this.hass.localize("ui.components.media-browser.tts.set_as_default")}
|
|
</button>
|
|
`}
|
|
|
|
<mwc-button @click=${this._ttsClicked}>
|
|
${this.hass.localize(`ui.components.media-browser.tts.action_${this.action}`)}
|
|
</mwc-button>
|
|
</div>
|
|
</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 a`
|
|
<div class="cloud-options">
|
|
<ha-select
|
|
fixedMenuPosition
|
|
naturalMenuWidth
|
|
.label=${this.hass.localize("ui.components.media-browser.tts.language")}
|
|
.value=${e[0]}
|
|
@selected=${this._handleLanguageChange}
|
|
@closed=${U}
|
|
>
|
|
${t.map((([t,e])=>a`<mwc-list-item .value=${t}>${e}</mwc-list-item>`))}
|
|
</ha-select>
|
|
|
|
<ha-select
|
|
fixedMenuPosition
|
|
naturalMenuWidth
|
|
.label=${this.hass.localize("ui.components.media-browser.tts.gender")}
|
|
.value=${e[1]}
|
|
@selected=${this._handleGenderChange}
|
|
@closed=${U}
|
|
>
|
|
${i.map((([t,e])=>a`<mwc-list-item .value=${t}>${e}</mwc-list-item>`))}
|
|
</ha-select>
|
|
</div>
|
|
`}},{kind:"method",key:"willUpdate",value:function(t){var e,a;if(l(p(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 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:()=>h(K)},{kind:"field",key:"getSupportedGenders",value:()=>h(Q)},{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,m(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,R(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:()=>[u,r`
|
|
:host {
|
|
margin: 16px auto;
|
|
padding: 0 8px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
max-width: 400px;
|
|
}
|
|
.cloud-options {
|
|
margin-top: 16px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
.cloud-options ha-select {
|
|
width: 48%;
|
|
}
|
|
ha-textarea {
|
|
width: 100%;
|
|
}
|
|
button.link {
|
|
color: var(--primary-color);
|
|
}
|
|
.card-actions {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
`]}]}}),i),e([s("ha-media-player-browse")],(function(t,e){class i extends e{constructor(...e){super(...e),t(this)}}return{F:i,d:[{kind:"field",decorators:[d({attribute:!1})],key:"hass",value:void 0},{kind:"field",decorators:[d()],key:"entityId",value:void 0},{kind:"field",decorators:[d()],key:"action",value:()=>"play"},{kind:"field",decorators:[d({type:Boolean})],key:"dialog",value:()=>!1},{kind:"field",decorators:[d()],key:"navigateIds",value:void 0},{kind:"field",decorators:[d({type:Boolean,attribute:"narrow",reflect:!0})],key:"_narrow",value:()=>!1},{kind:"field",decorators:[d({type:Boolean,attribute:"scroll",reflect:!0})],key:"_scrolled",value:()=>!1},{kind:"field",decorators:[c()],key:"_error",value:void 0},{kind:"field",decorators:[c()],key:"_parentItem",value:void 0},{kind:"field",decorators:[c()],key:"_currentItem",value:void 0},{kind:"field",decorators:[g(".header")],key:"_header",value:void 0},{kind:"field",decorators:[g(".content")],key:"_content",value:void 0},{kind:"field",decorators:[M(".lazythumbnail")],key:"_thumbnails",value:void 0},{kind:"field",key:"_headerOffsetHeight",value:()=>0},{kind:"field",key:"_resizeObserver",value:void 0},{kind:"field",key:"_intersectionObserver",value:void 0},{kind:"method",key:"connectedCallback",value:function(){l(p(i.prototype),"connectedCallback",this).call(this),this.updateComplete.then((()=>this._attachResizeObserver()))}},{kind:"method",key:"disconnectedCallback",value:function(){this._resizeObserver&&this._resizeObserver.disconnect(),this._intersectionObserver&&this._intersectionObserver.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),m(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:"render",value:function(){if(this._error)return a`
|
|
<div class="container">${this._renderError(this._error)}</div>
|
|
`;if(!this._currentItem)return a`<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||[],o=T[t.media_class],r=t.children_media_class?T[t.children_media_class]:T.directory;return a`
|
|
${t.can_play?a` <div
|
|
class="header ${b({"no-img":!t.thumbnail,"no-dialog":!this.dialog})}"
|
|
@transitionend=${this._setHeaderHeight}
|
|
>
|
|
<div class="header-content">
|
|
${t.thumbnail?a`
|
|
<div
|
|
class="img"
|
|
style=${_({backgroundImage:t.thumbnail?`url(${t.thumbnail})`:"none"})}
|
|
>
|
|
${this._narrow&&null!=t&&t.can_play?a`
|
|
<ha-fab
|
|
mini
|
|
.item=${t}
|
|
@click=${this._actionClicked}
|
|
>
|
|
<ha-svg-icon
|
|
slot="icon"
|
|
.label=${this.hass.localize(`ui.components.media-browser.${this.action}-media`)}
|
|
.path=${"play"===this.action?f:v}
|
|
></ha-svg-icon>
|
|
${this.hass.localize(`ui.components.media-browser.${this.action}`)}
|
|
</ha-fab>
|
|
`:""}
|
|
</div>
|
|
`:a``}
|
|
<div class="header-info">
|
|
<div class="breadcrumb">
|
|
<h1 class="title">${t.title}</h1>
|
|
${e?a` <h2 class="subtitle">${e}</h2> `:""}
|
|
</div>
|
|
${!t.can_play||t.thumbnail&&this._narrow?"":a`
|
|
<mwc-button
|
|
raised
|
|
.item=${t}
|
|
@click=${this._actionClicked}
|
|
>
|
|
<ha-svg-icon
|
|
.label=${this.hass.localize(`ui.components.media-browser.${this.action}-media`)}
|
|
.path=${"play"===this.action?f:v}
|
|
></ha-svg-icon>
|
|
${this.hass.localize(`ui.components.media-browser.${this.action}`)}
|
|
</mwc-button>
|
|
`}
|
|
</div>
|
|
</div>
|
|
</div>`:""}
|
|
<div
|
|
class="content"
|
|
@scroll=${this._scroll}
|
|
@touchmove=${this._scroll}
|
|
>
|
|
${this._error?a`
|
|
<div class="container">
|
|
${this._renderError(this._error)}
|
|
</div>
|
|
`:(s=t.media_content_id,s.startsWith("media-source://tts/")?a`
|
|
<ha-browse-media-tts
|
|
.item=${t}
|
|
.hass=${this.hass}
|
|
.action=${this.action}
|
|
@tts-picked=${this._ttsPicked}
|
|
></ha-browse-media-tts>
|
|
`:i.length||t.not_shown?"grid"===r.layout?a`
|
|
<div
|
|
class="children ${b({portrait:"portrait"===r.thumbnail_ratio})}"
|
|
>
|
|
${i.map((t=>a`
|
|
<div
|
|
class="child"
|
|
.item=${t}
|
|
@click=${this._childClicked}
|
|
>
|
|
<ha-card outlined>
|
|
<div class="thumbnail">
|
|
${t.thumbnail?a`
|
|
<div
|
|
class="${["app","directory"].includes(t.media_class)?"centered-image":""} image lazythumbnail"
|
|
data-src=${t.thumbnail}
|
|
></div>
|
|
`:a`
|
|
<div class="icon-holder image">
|
|
<ha-svg-icon
|
|
class="folder"
|
|
.path=${T["directory"===t.media_class&&t.children_media_class||t.media_class].icon}
|
|
></ha-svg-icon>
|
|
</div>
|
|
`}
|
|
${t.can_play?a`
|
|
<ha-icon-button
|
|
class="play ${b({can_expand:t.can_expand})}"
|
|
.item=${t}
|
|
.label=${this.hass.localize(`ui.components.media-browser.${this.action}-media`)}
|
|
.path=${"play"===this.action?f:v}
|
|
@click=${this._actionClicked}
|
|
></ha-icon-button>
|
|
`:""}
|
|
</div>
|
|
<div class="title">
|
|
${t.title}
|
|
<paper-tooltip
|
|
fitToVisibleBounds
|
|
position="top"
|
|
offset="4"
|
|
>${t.title}</paper-tooltip
|
|
>
|
|
</div>
|
|
</ha-card>
|
|
</div>
|
|
`))}
|
|
${t.not_shown?a`
|
|
<div class="grid not-shown">
|
|
<div class="title">
|
|
${this.hass.localize("ui.components.media-browser.not_shown",{count:t.not_shown})}
|
|
</div>
|
|
</div>
|
|
`:""}
|
|
</div>
|
|
`:a`
|
|
<mwc-list>
|
|
${i.map((t=>a`
|
|
<mwc-list-item
|
|
@click=${this._childClicked}
|
|
.item=${t}
|
|
.graphic=${o.show_list_images?"medium":"avatar"}
|
|
dir=${C(this.hass)}
|
|
>
|
|
<div
|
|
class=${b({graphic:!0,lazythumbnail:!0===o.show_list_images})}
|
|
data-src=${x(o.show_list_images&&t.thumbnail?t.thumbnail:void 0)}
|
|
slot="graphic"
|
|
>
|
|
<ha-icon-button
|
|
class="play ${b({show:!o.show_list_images||!t.thumbnail})}"
|
|
.item=${t}
|
|
.label=${this.hass.localize(`ui.components.media-browser.${this.action}-media`)}
|
|
.path=${"play"===this.action?f:v}
|
|
@click=${this._actionClicked}
|
|
></ha-icon-button>
|
|
</div>
|
|
<span class="title">${t.title}</span>
|
|
</mwc-list-item>
|
|
<li divider role="separator"></li>
|
|
`))}
|
|
${t.not_shown?a`
|
|
<mwc-list-item
|
|
noninteractive
|
|
class="not-shown"
|
|
.graphic=${o.show_list_images?"medium":"avatar"}
|
|
dir=${C(this.hass)}
|
|
>
|
|
<span class="title">
|
|
${this.hass.localize("ui.components.media-browser.not_shown",{count:t.not_shown})}
|
|
</span>
|
|
</mwc-list-item>
|
|
`:""}
|
|
</mwc-list>
|
|
`:a`
|
|
<div class="container no-items">
|
|
${"media-source://media_source/local/."===t.media_content_id?a`
|
|
<div class="highlight-add-button">
|
|
<span>
|
|
<ha-svg-icon
|
|
.path=${y}
|
|
></ha-svg-icon>
|
|
</span>
|
|
<span>
|
|
${this.hass.localize("ui.components.media-browser.file_management.highlight_button")}
|
|
</span>
|
|
</div>
|
|
`:this.hass.localize("ui.components.media-browser.no_items")}
|
|
</div>
|
|
`)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;var s}},{kind:"method",key:"firstUpdated",value:function(){this._measureCard(),this._attachResizeObserver()}},{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:"willUpdate",value:function(t){var e;if(l(p(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"),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],d=o.length>1?o[o.length-2]:void 0;let c,h;t.has("entityId")||(a&&o.length===a.length+1&&a.every(((t,e)=>{const i=o[e];return i.media_content_id===t.media_content_id&&i.media_content_type===t.media_content_type}))?h=Promise.resolve(r):a&&o.length===a.length-1&&o.every(((t,e)=>{const i=a[e];return t.media_content_id===i.media_content_id&&t.media_content_type===i.media_content_type}))&&(c=Promise.resolve(s))),c||(c=this._fetchData(this.entityId,n.media_content_id,n.media_content_type)),c.then((t=>{this._currentItem=t,m(this,"media-browsed",{ids:o,current:t})}),(e=>{a&&t.has("entityId")&&o.length===a.length&&a.every(((t,e)=>o[e].media_content_id===t.media_content_id&&o[e].media_content_type===t.media_content_type))?m(this,"media-browsed",{ids:[{media_content_id:void 0,media_content_type:void 0}],replace:!0}):this._setError(e)})),h||void 0===d||(h=this._fetchData(this.entityId,d.media_content_id,d.media_content_type)),h&&h.then((t=>{this._parentItem=t}))}},{kind:"method",key:"updated",value:function(t){l(p(i.prototype),"updated",this).call(this,t),t.has("_scrolled")?this._animateHeaderHeight():t.has("_currentItem")&&(this._setHeaderHeight(),this._attachIntersectionObserver())}},{kind:"method",key:"_actionClicked",value:function(t){t.stopPropagation();const e=t.currentTarget.item;this._runAction(e)}},{kind:"method",key:"_runAction",value:function(t){m(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),m(this,"media-picked",{...t.detail,navigateIds:e})}},{kind:"method",key:"_childClicked",value:async function(t){const e=t.currentTarget.item;e&&(e.can_expand?m(this,"media-browsed",{ids:[...this.navigateIds,e]}):this._runAction(e))}},{kind:"method",key:"_fetchData",value:async function(t,e,i){return t!==H?E(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(async()=>{"function"!=typeof ResizeObserver&&(window.ResizeObserver=(await import("./c.aa8feaf8.js")).default)})(),this._resizeObserver=new ResizeObserver(S((()=>this._measureCard()),250,!1))),this._resizeObserver.observe(this)}},{kind:"method",key:"_attachIntersectionObserver",value:async function(){if(!("IntersectionObserver"in window)||!this._thumbnails)return;this._intersectionObserver||(this._intersectionObserver=new IntersectionObserver((async(t,e)=>{await Promise.all(t.map((async t=>{if(!t.isIntersecting)return;const i=t.target;let a=i.dataset.src;if(a){if(a.startsWith("/")){a=(await A(this.hass,a)).path}else if(a.startsWith("https://brands.home-assistant.io")){var o;a=L({domain:W(a),type:"icon",useFallback:!0,darkOptimized:null===(o=this.hass.themes)||void 0===o?void 0:o.darkMode})}i.style.backgroundImage=`url(${a})`,e.unobserve(i)}})))})));const t=this._intersectionObserver;for(const e of this._thumbnails)t.observe(e)}},{kind:"method",key:"_closeDialogAction",value:function(){m(this,"close-dialog")}},{kind:"method",key:"_setError",value:function(t){this.dialog?t&&(this._closeDialogAction(),R(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?a`
|
|
<h2>
|
|
${this.hass.localize("ui.components.media-browser.no_local_media_found")}
|
|
</h2>
|
|
<p>
|
|
${this.hass.localize("ui.components.media-browser.no_media_folder")}
|
|
<br />
|
|
${this.hass.localize("ui.components.media-browser.setup_local_help","documentation",a`<a
|
|
href=${P(this.hass,"/more-info/local-media/setup-media")}
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
>${this.hass.localize("ui.components.media-browser.documentation")}</a
|
|
>`)}
|
|
<br />
|
|
${this.hass.localize("ui.components.media-browser.local_media_files")}
|
|
</p>
|
|
`:a`<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:[k({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[w,r`
|
|
:host {
|
|
display: flex;
|
|
flex-direction: column;
|
|
position: relative;
|
|
}
|
|
|
|
ha-circular-progress {
|
|
--mdc-theme-primary: var(--primary-color);
|
|
display: flex;
|
|
justify-content: center;
|
|
margin: 40px;
|
|
}
|
|
|
|
.container {
|
|
padding: 16px;
|
|
}
|
|
|
|
.no-items {
|
|
padding-left: 32px;
|
|
}
|
|
|
|
.highlight-add-button {
|
|
display: flex;
|
|
flex-direction: row-reverse;
|
|
margin-right: 48px;
|
|
}
|
|
|
|
.highlight-add-button ha-svg-icon {
|
|
position: relative;
|
|
top: -0.5em;
|
|
margin-left: 8px;
|
|
}
|
|
|
|
.content {
|
|
overflow-y: auto;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
/* HEADER */
|
|
|
|
.header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
border-bottom: 1px solid var(--divider-color);
|
|
background-color: var(--card-background-color);
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
left: 0;
|
|
z-index: 5;
|
|
padding: 16px;
|
|
}
|
|
.header_button {
|
|
position: relative;
|
|
right: -8px;
|
|
}
|
|
.header-content {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
flex-grow: 1;
|
|
align-items: flex-start;
|
|
}
|
|
.header-content .img {
|
|
height: 175px;
|
|
width: 175px;
|
|
margin-right: 16px;
|
|
background-size: cover;
|
|
border-radius: 2px;
|
|
transition: width 0.4s, height 0.4s;
|
|
}
|
|
.header-info {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
align-self: stretch;
|
|
min-width: 0;
|
|
flex: 1;
|
|
}
|
|
.header-info mwc-button {
|
|
display: block;
|
|
--mdc-theme-primary: var(--primary-color);
|
|
padding-bottom: 16px;
|
|
}
|
|
.breadcrumb {
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
flex-grow: 1;
|
|
padding-top: 16px;
|
|
}
|
|
.breadcrumb .title {
|
|
font-size: 32px;
|
|
line-height: 1.2;
|
|
font-weight: bold;
|
|
margin: 0;
|
|
overflow: hidden;
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 2;
|
|
padding-right: 8px;
|
|
}
|
|
.breadcrumb .previous-title {
|
|
font-size: 14px;
|
|
padding-bottom: 8px;
|
|
color: var(--secondary-text-color);
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
cursor: pointer;
|
|
--mdc-icon-size: 14px;
|
|
}
|
|
.breadcrumb .subtitle {
|
|
font-size: 16px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
margin-bottom: 0;
|
|
transition: height 0.5s, margin 0.5s;
|
|
}
|
|
|
|
.not-shown {
|
|
font-style: italic;
|
|
color: var(--secondary-text-color);
|
|
}
|
|
|
|
.grid.not-shown {
|
|
display: flex;
|
|
align-items: center;
|
|
text-align: center;
|
|
}
|
|
|
|
/* ============= CHILDREN ============= */
|
|
|
|
mwc-list {
|
|
--mdc-list-vertical-padding: 0;
|
|
--mdc-list-item-graphic-margin: 0;
|
|
--mdc-theme-text-icon-on-background: var(--secondary-text-color);
|
|
margin-top: 10px;
|
|
}
|
|
|
|
mwc-list li:last-child {
|
|
display: none;
|
|
}
|
|
|
|
mwc-list li[divider] {
|
|
border-bottom-color: var(--divider-color);
|
|
}
|
|
|
|
.children {
|
|
display: grid;
|
|
grid-template-columns: repeat(
|
|
auto-fit,
|
|
minmax(var(--media-browse-item-size, 175px), 0.1fr)
|
|
);
|
|
grid-gap: 16px;
|
|
padding: 16px;
|
|
}
|
|
|
|
:host([dialog]) .children {
|
|
grid-template-columns: repeat(
|
|
auto-fit,
|
|
minmax(var(--media-browse-item-size, 175px), 0.33fr)
|
|
);
|
|
}
|
|
|
|
.child {
|
|
display: flex;
|
|
flex-direction: column;
|
|
cursor: pointer;
|
|
}
|
|
|
|
ha-card {
|
|
position: relative;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.children ha-card .thumbnail {
|
|
width: 100%;
|
|
position: relative;
|
|
box-sizing: border-box;
|
|
transition: padding-bottom 0.1s ease-out;
|
|
padding-bottom: 100%;
|
|
}
|
|
|
|
.portrait.children ha-card .thumbnail {
|
|
padding-bottom: 150%;
|
|
}
|
|
|
|
ha-card .image {
|
|
border-radius: 3px 3px 0 0;
|
|
}
|
|
|
|
.image {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
left: 0;
|
|
bottom: 0;
|
|
background-size: cover;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
}
|
|
|
|
.centered-image {
|
|
margin: 0 8px;
|
|
background-size: contain;
|
|
}
|
|
|
|
.children ha-card .icon-holder {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.child .folder {
|
|
color: var(--secondary-text-color);
|
|
--mdc-icon-size: calc(var(--media-browse-item-size, 175px) * 0.4);
|
|
}
|
|
|
|
.child .play {
|
|
position: absolute;
|
|
transition: color 0.5s;
|
|
border-radius: 50%;
|
|
top: calc(50% - 50px);
|
|
right: calc(50% - 35px);
|
|
opacity: 0;
|
|
transition: opacity 0.1s ease-out;
|
|
}
|
|
|
|
.child .play:not(.can_expand) {
|
|
--mdc-icon-button-size: 70px;
|
|
--mdc-icon-size: 48px;
|
|
}
|
|
|
|
ha-card:hover .play {
|
|
opacity: 1;
|
|
}
|
|
|
|
ha-card:hover .play:not(.can_expand) {
|
|
color: var(--primary-color);
|
|
}
|
|
|
|
ha-card:hover .play.can_expand {
|
|
bottom: 8px;
|
|
}
|
|
|
|
.child .play.can_expand {
|
|
background-color: rgba(var(--rgb-card-background-color), 0.5);
|
|
top: auto;
|
|
bottom: 0px;
|
|
right: 8px;
|
|
transition: bottom 0.1s ease-out, opacity 0.1s ease-out;
|
|
}
|
|
|
|
.child .play:hover {
|
|
color: var(--primary-color);
|
|
}
|
|
|
|
ha-card:hover .lazythumbnail {
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.child .title {
|
|
font-size: 16px;
|
|
padding-top: 16px;
|
|
padding-left: 2px;
|
|
overflow: hidden;
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 1;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.child ha-card .title {
|
|
margin-bottom: 16px;
|
|
padding-left: 16px;
|
|
}
|
|
|
|
mwc-list-item .graphic {
|
|
background-size: contain;
|
|
border-radius: 2px;
|
|
display: flex;
|
|
align-content: center;
|
|
align-items: center;
|
|
line-height: initial;
|
|
}
|
|
|
|
mwc-list-item .graphic .play {
|
|
opacity: 0;
|
|
transition: all 0.5s;
|
|
background-color: rgba(var(--rgb-card-background-color), 0.5);
|
|
border-radius: 50%;
|
|
--mdc-icon-button-size: 40px;
|
|
}
|
|
|
|
mwc-list-item:hover .graphic .play {
|
|
opacity: 1;
|
|
color: var(--primary-text-color);
|
|
}
|
|
|
|
mwc-list-item .graphic .play.show {
|
|
opacity: 1;
|
|
background-color: transparent;
|
|
}
|
|
|
|
mwc-list-item .title {
|
|
margin-left: 16px;
|
|
}
|
|
mwc-list-item[dir="rtl"] .title {
|
|
margin-right: 16px;
|
|
margin-left: 0;
|
|
}
|
|
|
|
/* ============= Narrow ============= */
|
|
|
|
:host([narrow]) {
|
|
padding: 0;
|
|
}
|
|
|
|
:host([narrow]) .media-source {
|
|
padding: 0 24px;
|
|
}
|
|
|
|
:host([narrow]) .children {
|
|
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
|
|
}
|
|
|
|
:host([narrow]) .breadcrumb .title {
|
|
font-size: 24px;
|
|
}
|
|
:host([narrow]) .header {
|
|
padding: 0;
|
|
}
|
|
:host([narrow]) .header.no-dialog {
|
|
display: block;
|
|
}
|
|
:host([narrow]) .header_button {
|
|
position: absolute;
|
|
top: 14px;
|
|
right: 8px;
|
|
}
|
|
:host([narrow]) .header-content {
|
|
flex-direction: column;
|
|
flex-wrap: nowrap;
|
|
}
|
|
:host([narrow]) .header-content .img {
|
|
height: auto;
|
|
width: 100%;
|
|
margin-right: 0;
|
|
padding-bottom: 50%;
|
|
margin-bottom: 8px;
|
|
position: relative;
|
|
background-position: center;
|
|
border-radius: 0;
|
|
transition: width 0.4s, height 0.4s, padding-bottom 0.4s;
|
|
}
|
|
ha-fab {
|
|
position: absolute;
|
|
--mdc-theme-secondary: var(--primary-color);
|
|
bottom: -20px;
|
|
right: 20px;
|
|
}
|
|
:host([narrow]) .header-info mwc-button {
|
|
margin-top: 16px;
|
|
margin-bottom: 8px;
|
|
}
|
|
:host([narrow]) .header-info {
|
|
padding: 0 16px 8px;
|
|
}
|
|
|
|
/* ============= Scroll ============= */
|
|
:host([scroll]) .breadcrumb .subtitle {
|
|
height: 0;
|
|
margin: 0;
|
|
}
|
|
:host([scroll]) .breadcrumb .title {
|
|
-webkit-line-clamp: 1;
|
|
}
|
|
:host(:not([narrow])[scroll]) .header:not(.no-img) ha-icon-button {
|
|
align-self: center;
|
|
}
|
|
:host([scroll]) .header-info mwc-button,
|
|
.no-img .header-info mwc-button {
|
|
padding-right: 4px;
|
|
}
|
|
:host([scroll][narrow]) .no-img .header-info mwc-button {
|
|
padding-right: 16px;
|
|
}
|
|
:host([scroll]) .header-info {
|
|
flex-direction: row;
|
|
}
|
|
:host([scroll]) .header-info mwc-button {
|
|
align-self: center;
|
|
margin-top: 0;
|
|
margin-bottom: 0;
|
|
padding-bottom: 0;
|
|
}
|
|
:host([scroll][narrow]) .no-img .header-info {
|
|
flex-direction: row-reverse;
|
|
}
|
|
:host([scroll][narrow]) .header-info {
|
|
padding: 20px 24px 10px 24px;
|
|
align-items: center;
|
|
}
|
|
:host([scroll]) .header-content {
|
|
align-items: flex-end;
|
|
flex-direction: row;
|
|
}
|
|
:host([scroll]) .header-content .img {
|
|
height: 75px;
|
|
width: 75px;
|
|
}
|
|
:host([scroll]) .breadcrumb {
|
|
padding-top: 0;
|
|
align-self: center;
|
|
}
|
|
:host([scroll][narrow]) .header-content .img {
|
|
height: 100px;
|
|
width: 100px;
|
|
padding-bottom: initial;
|
|
margin-bottom: 0;
|
|
}
|
|
:host([scroll]) ha-fab {
|
|
bottom: 0px;
|
|
right: -24px;
|
|
--mdc-fab-box-shadow: none;
|
|
--mdc-theme-secondary: rgba(var(--rgb-primary-color), 0.5);
|
|
}
|
|
`]}}]}}),i);e([s("ha-media-manage-button")],(function(t,e){return{F:class extends e{constructor(...e){super(...e),t(this)}},d:[{kind:"field",decorators:[d({attribute:!1})],key:"hass",value:void 0},{kind:"field",decorators:[d()],key:"currentItem",value:void 0},{kind:"field",decorators:[c()],key:"_uploading",value:()=>0},{kind:"method",key:"render",value:function(){return this.currentItem&&F(this.currentItem.media_content_id||"")?a`
|
|
<mwc-button
|
|
.label=${this.hass.localize("ui.components.media-browser.file_management.manage")}
|
|
@click=${this._manage}
|
|
>
|
|
<ha-svg-icon .path=${$} slot="icon"></ha-svg-icon>
|
|
</mwc-button>
|
|
`:a``}},{kind:"method",key:"_manage",value:function(){var t,e;t=this,e={currentItem:this.currentItem,onClose:()=>m(this,"media-refresh")},m(t,"show-dialog",{dialogTag:"dialog-media-manage",dialogImport:()=>import("./c.ecfeb892.js"),dialogParams:e})}},{kind:"field",static:!0,key:"styles",value:()=>r`
|
|
mwc-button {
|
|
/* We use icon + text to show disabled state */
|
|
--mdc-button-disabled-ink-color: --mdc-theme-primary;
|
|
}
|
|
|
|
ha-svg-icon[slot="icon"],
|
|
ha-circular-progress[slot="icon"] {
|
|
vertical-align: middle;
|
|
}
|
|
`}]}}),i),e([s("dialog-media-player-browse")],(function(t,e){return{F:class extends e{constructor(...e){super(...e),t(this)}},d:[{kind:"field",decorators:[d({attribute:!1})],key:"hass",value:void 0},{kind:"field",decorators:[c()],key:"_currentItem",value:void 0},{kind:"field",decorators:[c()],key:"_navigateIds",value:void 0},{kind:"field",decorators:[c()],key:"_params",value:void 0},{kind:"field",decorators:[g("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,m(this,"dialog-closed",{dialog:this.localName})}},{kind:"method",key:"render",value:function(){return this._params&&this._navigateIds?a`
|
|
<ha-dialog
|
|
open
|
|
scrimClickAction
|
|
escapeKeyAction
|
|
hideActions
|
|
flexContent
|
|
.heading=${this._currentItem?this._currentItem.title:this.hass.localize("ui.components.media-browser.media-player-browser")}
|
|
@closed=${this.closeDialog}
|
|
>
|
|
<ha-header-bar slot="heading">
|
|
${this._navigateIds.length>1?a`
|
|
<ha-icon-button
|
|
slot="navigationIcon"
|
|
.path=${I}
|
|
@click=${this._goBack}
|
|
></ha-icon-button>
|
|
`:""}
|
|
<span slot="title">
|
|
${this._currentItem?this._currentItem.title:this.hass.localize("ui.components.media-browser.media-player-browser")}
|
|
</span>
|
|
|
|
<ha-media-manage-button
|
|
slot="actionItems"
|
|
.hass=${this.hass}
|
|
.currentItem=${this._currentItem}
|
|
@media-refresh=${this._refreshMedia}
|
|
></ha-media-manage-button>
|
|
<ha-icon-button
|
|
.label=${this.hass.localize("ui.dialogs.generic.close")}
|
|
.path=${z}
|
|
dialogAction="close"
|
|
slot="actionItems"
|
|
class="header_button"
|
|
dir=${C(this.hass)}
|
|
></ha-icon-button>
|
|
</ha-header-bar>
|
|
<ha-media-player-browse
|
|
dialog
|
|
.hass=${this.hass}
|
|
.entityId=${this._params.entityId}
|
|
.navigateIds=${this._navigateIds}
|
|
.action=${this._action}
|
|
@close-dialog=${this.closeDialog}
|
|
@media-picked=${this._mediaPicked}
|
|
@media-browsed=${this._mediaBrowsed}
|
|
></ha-media-player-browse>
|
|
</ha-dialog>
|
|
`:a``}},{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,r`
|
|
ha-dialog {
|
|
--dialog-z-index: 8;
|
|
--dialog-content-padding: 0;
|
|
}
|
|
|
|
ha-media-player-browse {
|
|
--media-browser-max-height: calc(100vh - 65px);
|
|
}
|
|
|
|
@media (min-width: 800px) {
|
|
ha-dialog {
|
|
--mdc-dialog-max-width: 800px;
|
|
--dialog-surface-position: fixed;
|
|
--dialog-surface-top: 40px;
|
|
--mdc-dialog-max-height: calc(100vh - 72px);
|
|
}
|
|
ha-media-player-browse {
|
|
position: initial;
|
|
--media-browser-max-height: 100vh - 137px;
|
|
width: 700px;
|
|
}
|
|
}
|
|
|
|
ha-header-bar {
|
|
--mdc-theme-on-primary: var(--primary-text-color);
|
|
--mdc-theme-primary: var(--mdc-theme-surface);
|
|
flex-shrink: 0;
|
|
border-bottom: 1px solid var(--divider-color, rgba(0, 0, 0, 0.12));
|
|
}
|
|
|
|
ha-media-manage-button {
|
|
--mdc-theme-primary: var(--mdc-theme-on-primary);
|
|
}
|
|
`]}}]}}),i);var X=Object.freeze({__proto__:null});export{V as b,X as d,F as i,B as r,N as u};
|