feature: show source in player

.gitignore

@@ -3,4 +3,5 @@ dist/
 .DS_Store
 node_modules/
 coverage/
-.vs/
+.vs/
+lcov-report/

README.md

@@ -171,6 +171,7 @@ entitiesToIgnoreVolumeLevelFor: # default is empty. Use this if you want to igno
 artworkMinHeight: 10 # default is 5. Use this to change the minimum height of the artwork in the player section. Unit is in rem.
 artworkAsBackground: true # default is false. Will show the artwork as background for the player section.
 playerVolumeEntityId: media_player.bedroom # default is empty. Use this to control the volume of another player in the player section. Entity ID must the selected player or part of the selected player's group, otherwise it will not be controlled.
+showSourceInPlayer: true # default is false. Will show the source (if available) in the player section.
 
 # media browser specific
 mediaBrowserItemsPerRow: 1 # default is 4. Use this to show items as list.

src/components/player-header.ts

@@ -17,6 +17,9 @@ class PlayerHeader extends LitElement {
     const speakerList = getSpeakerList(this.activePlayer, this.store.predefinedGroups);
     let song = this.activePlayer.getCurrentTrack();
     song = song || this.config.labelWhenNoMediaIsSelected || 'No media selected';
+    if (this.config.showSourceInPlayer && this.activePlayer.attributes.source) {
+      song = `${song} (${this.activePlayer.attributes.source})`;
+    }
     return html` <div class="info">
       <div class="entity">${speakerList}</div>
       <div class="song">${song}</div>

src/editor/advanced-editor.ts

@@ -105,6 +105,10 @@ export const ADVANCED_SCHEMA = [
     name: 'dontSwitchPlayerWhenGrouping',
     selector: { boolean: {} },
   },
+  {
+    name: 'showSourceInPlayer',
+    selector: { boolean: {} },
+  },
   {
     type: 'string',
     help: 'Override default fallback artwork image if artwork is missing for the currently selected media',

src/sections/grouping.ts

@@ -7,7 +7,7 @@ import { dispatchActivePlayerId } from '../utils/utils';
 import { listStyle } from '../constants';
 import { MediaPlayer } from '../model/media-player';
 import '../components/grouping-button';
-import { PredefinedGroup, PredefinedGroupPlayer } from '../types';
+import { CardConfig, PredefinedGroup, PredefinedGroupPlayer } from '../types';
 
 export class Grouping extends LitElement {
   @property({ attribute: false }) store!: Store;
@@ -18,8 +18,10 @@ export class Grouping extends LitElement {
   private notJoinedPlayers!: string[];
   private joinedPlayers!: string[];
   @state() modifiedItems: string[] = [];
+  private config!: CardConfig;
 
   render() {
+    this.config = this.store.config;
     this.activePlayer = this.store.activePlayer;
     this.mediaControlService = this.store.mediaControlService;
     this.mediaPlayerIds = this.store.allMediaPlayers.map((player) => player.id);
@@ -188,6 +190,10 @@ export class Grouping extends LitElement {
       main = !!this.store.config.dontSwitchPlayerWhenGrouping ? this.activePlayer.id : isSelected[0].player.id;
       dispatchActivePlayerId(main, this.store.config, this);
     }
+    if (this.config.entityId && unJoin.includes(this.config.entityId) && this.config.dontSwitchPlayerWhenGrouping) {
+      dispatchActivePlayerId(this.config.entityId, this.config, this);
+    }
+
     this.modifiedItems = [];
   }
 

src/types.ts

@@ -67,6 +67,7 @@ export interface CardConfig extends LovelaceCardConfig {
   artworkAsBackground?: boolean;
   playerVolumeEntityId?: string;
   dontSwitchPlayerWhenGrouping?: boolean;
+  showSourceInPlayer?: boolean;
 }
 
 export interface MediaArtworkOverride {