From 154877aec2f173391779156152764e4e55aa22a2 Mon Sep 17 00:00:00 2001 From: Johan Frick Date: Tue, 2 Jan 2024 21:39:24 +0100 Subject: [PATCH] feature: show audio input format always show in volumes section and optionally in player section --- src/components/player-controls.ts | 42 ++++++++++++++++++++++++++++++- src/editor/advanced-editor.ts | 4 +++ src/sections/volumes.ts | 2 +- src/services/hass-service.ts | 4 +-- src/types.ts | 1 + 5 files changed, 49 insertions(+), 4 deletions(-) diff --git a/src/components/player-controls.ts b/src/components/player-controls.ts index 95c52ec1..4a4fb9ae 100755 --- a/src/components/player-controls.ts +++ b/src/components/player-controls.ts @@ -6,11 +6,12 @@ import { CardConfig, MediaPlayerEntityFeature } from '../types'; import { mdiVolumeMinus, mdiVolumePlus } from '@mdi/js'; import { MediaPlayer } from '../model/media-player'; import { when } from 'lit/directives/when.js'; +import { until } from 'lit-html/directives/until.js'; const { SHUFFLE_SET, REPEAT_SET, PLAY, PAUSE, NEXT_TRACK, PREVIOUS_TRACK } = MediaPlayerEntityFeature; class PlayerControls extends LitElement { - @property({attribute: false}) store!: Store; + @property({ attribute: false }) store!: Store; private config!: CardConfig; private activePlayer!: MediaPlayer; private mediaControlService!: MediaControlService; @@ -27,11 +28,15 @@ class PlayerControls extends LitElement { this.activePlayer.state !== 'idle', () => html`
+
+
+
${until(this.getAudioInputFormat())}
+
`, )} @@ -42,6 +47,13 @@ class PlayerControls extends LitElement { private volDown = async () => await this.mediaControlService.volumeDown(this.activePlayer); private volUp = async () => await this.mediaControlService.volumeUp(this.activePlayer); + private async getAudioInputFormat() { + const sensors = await this.store.hassService.getRelatedEntities(this.activePlayer, 'sensor'); + const audioInputFormat = sensors.find((sensor) => sensor.entity_id.includes('audio_input_format')); + return audioInputFormat && audioInputFormat.state && audioInputFormat.state !== 'No audio' + ? audioInputFormat.state + : ''; + } static get styles() { return css` .main { @@ -61,6 +73,34 @@ class PlayerControls extends LitElement { --mdc-icon-button-size: 5rem; --mdc-icon-size: 5rem; } + .audio-input-format { + flex: 1 0 0; + margin-bottom: 10px; + text-align: center; + align-self: stretch; + position: relative; + } + .audio-input-format > div { + display: none; + } + .audio-input-format > div[show] { + display: block; + color: var(--card-background-color); + background: var(--disabled-text-color); + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + position: absolute; + bottom: 0; + right: 0; + max-width: 100%; + font-size: smaller; + line-height: normal; + padding: 3px; + } + .flex-1 { + flex: 1; + } `; } } diff --git a/src/editor/advanced-editor.ts b/src/editor/advanced-editor.ts index 3ed7e9d0..e0edff25 100644 --- a/src/editor/advanced-editor.ts +++ b/src/editor/advanced-editor.ts @@ -40,6 +40,10 @@ export const ADVANCED_SCHEMA = [ name: 'numberOfFavoritesToShow', valueMin: 1, }, + { + name: 'showAudioInputFormat', + selector: { boolean: {} }, + }, ]; class AdvancedEditor extends BaseEditor { diff --git a/src/sections/volumes.ts b/src/sections/volumes.ts index 406824fe..e4ebf52a 100755 --- a/src/sections/volumes.ts +++ b/src/sections/volumes.ts @@ -74,7 +74,7 @@ class Volumes extends LitElement { if (hide) { return; } - const relatedEntities = await this.hassService.getRelatedEntities(player); + const relatedEntities = await this.hassService.getRelatedEntities(player, 'switch', 'number', 'sensor'); return relatedEntities.map((relatedEntity: HassEntity) => { relatedEntity.attributes.friendly_name = relatedEntity.attributes.friendly_name?.replaceAll(player.name, '')?.trim() ?? ''; diff --git a/src/services/hass-service.ts b/src/services/hass-service.ts index 5ac99249..ea935c55 100644 --- a/src/services/hass-service.ts +++ b/src/services/hass-service.ts @@ -37,7 +37,7 @@ export default class HassService { return mediaPlayerItem; } - async getRelatedEntities(player: MediaPlayer) { + async getRelatedEntities(player: MediaPlayer, ...entityTypes: string[]) { return new Promise(async (resolve, reject) => { const subscribeMessage = { type: 'render_template', @@ -48,7 +48,7 @@ export default class HassService { unsubscribe(); resolve( response.result - .filter((item: string) => item.includes('switch') || item.includes('number')) + .filter((item: string) => entityTypes.some((type) => item.includes(type))) .map((item) => this.hass.states[item]), ); }, subscribeMessage); diff --git a/src/types.ts b/src/types.ts index c341b711..8b9722d6 100644 --- a/src/types.ts +++ b/src/types.ts @@ -44,6 +44,7 @@ export interface CardConfig extends LovelaceCardConfig { topFavorites?: string[]; numberOfFavoritesToShow?: number; hideBrowseMediaButton?: boolean; + showAudioInputFormat?: boolean; } export interface MediaArtworkOverride {