feature: show audio input format

always show in volumes section and optionally in player section
punxaphil · Jan 2, 2024 · 154877a · 154877a
1 parent baeefa9
commit 154877a
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 4 deletions.
diff --git 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`
             <div class="icons">
+              <div class="flex-1"></div>
               <ha-icon-button hide=${noUpDown} @click="${this.volDown}" .path=${mdiVolumeMinus}></ha-icon-button>
               <sonos-ha-player .store=${this.store} .features=${[SHUFFLE_SET, PREVIOUS_TRACK]}></sonos-ha-player>
               <sonos-ha-player .store=${this.store} .features=${[PLAY, PAUSE]} class="big-icon"></sonos-ha-player>
               <sonos-ha-player .store=${this.store} .features=${[NEXT_TRACK, REPEAT_SET]}></sonos-ha-player>
               <ha-icon-button hide=${noUpDown} @click="${this.volUp}" .path=${mdiVolumePlus}></ha-icon-button>
+              <div class="audio-input-format">
+                <div show="${this.config.showAudioInputFormat || nothing}">${until(this.getAudioInputFormat())}</div>
+              </div>
             </div>
           `,
         )}
@@ -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
@@ -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
@@ -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
@@ -37,7 +37,7 @@ export default class HassService {
     return mediaPlayerItem;
   }
 
-  async getRelatedEntities(player: MediaPlayer) {
+  async getRelatedEntities(player: MediaPlayer, ...entityTypes: string[]) {
     return new Promise<HassEntity[]>(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
@@ -44,6 +44,7 @@ export interface CardConfig extends LovelaceCardConfig {
   topFavorites?: string[];
   numberOfFavoritesToShow?: number;
   hideBrowseMediaButton?: boolean;
+  showAudioInputFormat?: boolean;
 }
 
 export interface MediaArtworkOverride {