diff --git a/README.md b/README.md index d845849c..c1925b6e 100644 --- a/README.md +++ b/README.md @@ -81,7 +81,7 @@ sections: # see explanation further up - player widthPercentage: 75 # default is 100. Use this to change the width of the card. heightPercentage: 75 # default is 100. Use this to change the height of the card. -entityId: media_player.sonos_bedroom # Forces this player to be the selected one on loading the card (overrides url param etc). Also supports Jinja2 template. +entityId: media_player.sonos_bedroom # Forces this player to be the selected one on loading the card (overrides url param etc) entityNameRegexToReplace: 'SONOS ' # Regex pattern to replace parts of the entity names entityNameReplacement: '' entities: # Entities are automatically discovered if you don't supply this setting diff --git a/src/card.ts b/src/card.ts index c992b9f3..a718a5b0 100644 --- a/src/card.ts +++ b/src/card.ts @@ -16,8 +16,6 @@ import { import { when } from 'lit/directives/when.js'; import { styleMap } from 'lit-html/directives/style-map.js'; import { getHeight, getWidth } from './utils/utils'; -import HassService from './services/hass-service'; -import { until } from 'lit-html/directives/until.js'; const { GROUPING, GROUPS, MEDIA_BROWSER, PLAYER, VOLUMES } = Section; const TITLE_HEIGHT = 2; @@ -33,30 +31,24 @@ export class Card extends LitElement { @state() cancelLoader!: boolean; @state() activePlayerId!: string; render() { + this.createStore(); let height = getHeight(this.config); const sections = this.config.sections; const showFooter = !sections || sections.length > 1; const contentHeight = showFooter ? height - FOOTER_HEIGHT : height; const title = this.config.title; height = title ? height + TITLE_HEIGHT : height; - return html` ${until( - this.createStore().then(() => this.renderWithStore(height, title, contentHeight, showFooter)), - html``, - )}`; - } - - private renderWithStore(height: number, title: string | undefined, contentHeight: number, showFooter: boolean) { return html`
- ${title ? html`
${title}
` : html``} + ${title ? html`
${title}
` : html``}
${choose(this.section, [ [PLAYER, () => html` `], [GROUPS, () => html` `], - [GROUPING, () => html` `], + [GROUPING, () => html``], [MEDIA_BROWSER, () => html` `], [VOLUMES, () => html` `], ])} @@ -64,28 +56,20 @@ export class Card extends LitElement { ${when( showFooter, () => - html` + html` `, )} `; } - - private async createStore() { - let entityId = this.config.entityId; - const hassService = new HassService(this.hass, this.section); - if (entityId && entityId.indexOf('{{') > -1) { - entityId = await hassService.renderTemplate(entityId); - } - this.config = { ...this.config, entityId }; + private createStore() { if (this.activePlayerId) { - this.store = new Store(this.hass, this.config, hassService, this.activePlayerId); + this.store = new Store(this.hass, this.config, this.activePlayerId); } else { - this.store = new Store(this.hass, this.config, hassService); + this.store = new Store(this.hass, this.config); this.activePlayerId = this.store.activePlayer.id; } } - getCardSize() { return 3; } diff --git a/src/model/store.ts b/src/model/store.ts index a64ffcff..75e9c77f 100644 --- a/src/model/store.ts +++ b/src/model/store.ts @@ -24,7 +24,7 @@ export default class Store { public allMediaPlayers: MediaPlayer[]; public predefinedGroups: PredefinedGroup[]; - constructor(hass: HomeAssistant, config: CardConfig, hassService?: HassService, activePlayerId?: string) { + constructor(hass: HomeAssistant, config: CardConfig, activePlayerId?: string) { this.hass = hass; this.config = config; const mediaPlayerHassEntities = this.getMediaPlayerHassEntities(this.hass); @@ -37,7 +37,7 @@ export default class Store { .sort((a, b) => a.name.localeCompare(b.name)); this.activePlayer = this.determineActivePlayer(activePlayerId); const section = this.config.sections?.[0]; - this.hassService = hassService ?? new HassService(this.hass, section); + this.hassService = new HassService(this.hass, section); this.mediaControlService = new MediaControlService(this.hassService); this.mediaBrowseService = new MediaBrowseService(this.hassService); this.predefinedGroups = this.createPredefinedGroups(); diff --git a/src/services/hass-service.ts b/src/services/hass-service.ts index 523f120a..fb12c58f 100644 --- a/src/services/hass-service.ts +++ b/src/services/hass-service.ts @@ -8,7 +8,6 @@ import { HassEntity } from 'home-assistant-js-websocket'; export default class HassService { private readonly hass: HomeAssistant; private readonly sectionOnCreate?: Section; - private templateCache: { [key: string]: unknown } = {}; constructor(hass: HomeAssistant, section?: Section) { this.hass = hass; @@ -46,34 +45,22 @@ export default class HassService { } async getRelatedSwitchEntities(player: MediaPlayer) { - return (await this.renderTemplate("{{ device_entities(device_id('" + player.id + "')) }}")) - .filter((item: string) => item.indexOf('switch') > -1) - .map((item) => this.hass.states[item]); - } - - async renderTemplate(template: string) { - const cachedRender = this.templateCache[template] as T; - if (cachedRender) { - return cachedRender; - } - const result = await new Promise(async (resolve, reject) => { + return new Promise(async (resolve, reject) => { + const subscribeMessage = { + type: 'render_template', + template: "{{ device_entities(device_id('" + player.id + "')) }}", + }; try { - const unsubscribe = await this.hass.connection.subscribeMessage>( - (response) => { - unsubscribe(); - resolve(response.result); - }, - { - type: 'render_template', - template, - }, - ); + const unsubscribe = await this.hass.connection.subscribeMessage((response) => { + unsubscribe(); + resolve( + response.result.filter((item: string) => item.indexOf('switch') > -1).map((item) => this.hass.states[item]), + ); + }, subscribeMessage); } catch (e) { reject(e); } }); - this.templateCache[template] = result; - return result; } async toggle(entity: HassEntity) { diff --git a/src/types.ts b/src/types.ts index 21d5d2e1..cb627312 100644 --- a/src/types.ts +++ b/src/types.ts @@ -19,7 +19,6 @@ export enum Section { export type ConfigPredefinedGroupPlayer = PredefinedGroupPlayer; export type ConfigPredefinedGroup = PredefinedGroup; export interface CardConfig extends LovelaceCardConfig { - entityId?: string; sections?: Section[]; showVolumeUpAndDownButtons: boolean; entities?: string[]; @@ -92,6 +91,6 @@ export interface PredefinedGroupPlayer { player: T; volume?: number; } -export interface TemplateResult { - result: T; +export interface TemplateResult { + result: string[]; }