feature: show audio input format

always show in volumes section and optionally in player section

README.md

@@ -137,6 +137,7 @@ customSources: # Main use case is probably to set tv media player to play TV sou
       thumbnail: https://cdn-icons-png.flaticon.com/512/716/716429.png
 dynamicVolumeSlider: true # default is false. See more in section further down.
 artworkHostname: http://192.168.0.59:8123 #default is ''. Usually not needed, but depending on your setup your device might not be able to access the artwork on the default host. One example where it could be needed is if you cast the dashboard with Google Cast.
+showAudioInputFormat: true # default is false. Will show the audio input format (e.g. Dolby Digital) in the player section if available. By default, it will only show if the input format in the volumes section.
 
 # media browser specific
 mediaBrowserItemsPerRow: 4 # default is 1. Use this to show items as icons.

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">
+                ${this.config.showAudioInputFormat && until(this.getAudioInputFormat())}
+              </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'
+      ? html`<div>${audioInputFormat.state}</div>`
+      : '';
+  }
   static get styles() {
     return css`
       .main {
@@ -61,6 +73,30 @@ 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 {
+        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;
+      }
     `;
   }
 }

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 {

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() ?? '';

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);

src/types.ts

@@ -44,6 +44,7 @@ export interface CardConfig extends LovelaceCardConfig {
   topFavorites?: string[];
   numberOfFavoritesToShow?: number;
   hideBrowseMediaButton?: boolean;
+  showAudioInputFormat?: boolean;
 }
 
 export interface MediaArtworkOverride {