feature: make it possible to specify which player's volume to control…

… in player section

README.md

@@ -152,7 +152,7 @@ entitiesToIgnoreVolumeLevelFor: # default is empty. Use this if you want to igno
   - media_player.my_sonos_port_device
 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.
-playerVolumeOnlyAffectsMainPlayer: true # default is false. Will only affect the main player when changing volume in 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.
 
 # media browser specific
 mediaBrowserItemsPerRow: 1 # default is 4. Use this to show items as list.

src/components/player-controls.ts

@@ -15,13 +15,15 @@ class PlayerControls extends LitElement {
   private config!: CardConfig;
   private activePlayer!: MediaPlayer;
   private mediaControlService!: MediaControlService;
+  private volumePlayer!: MediaPlayer;
 
   render() {
     this.config = this.store.config;
     this.activePlayer = this.store.activePlayer;
     this.mediaControlService = this.store.mediaControlService;
 
     const noUpDown = !!this.config.showVolumeUpAndDownButtons && nothing;
+    this.volumePlayer = this.activePlayer.getMember(this.config.playerVolumeEntityId) ?? this.activePlayer;
     return html`
       <div class="main" id="mediaControls">
         ${when(
@@ -40,18 +42,18 @@ class PlayerControls extends LitElement {
             </div>
             <sonos-volume
               .store=${this.store}
-              .player=${this.activePlayer}
-              .updateMembers=${!this.config.playerVolumeOnlyAffectsMainPlayer}
+              .player=${this.volumePlayer}
+              .updateMembers=${!this.config.playerVolumeEntityId}
             ></sonos-volume>
           `,
         )}
       </div>
     `;
   }
   private volDown = async () =>
-    await this.mediaControlService.volumeDown(this.activePlayer, !this.config.playerVolumeOnlyAffectsMainPlayer);
+    await this.mediaControlService.volumeDown(this.volumePlayer, !this.config.playerVolumeEntityId);
   private volUp = async () =>
-    await this.mediaControlService.volumeUp(this.activePlayer, !this.config.playerVolumeOnlyAffectsMainPlayer);
+    await this.mediaControlService.volumeUp(this.volumePlayer, !this.config.playerVolumeEntityId);
 
   private async getAudioInputFormat() {
     const sensors = await this.store.hassService.getRelatedEntities(this.activePlayer, 'sensor');

src/editor/advanced-editor.ts

@@ -89,8 +89,8 @@ export const ADVANCED_SCHEMA = [
     selector: { boolean: {} },
   },
   {
-    name: 'playerVolumeOnlyAffectsMainPlayer',
-    selector: { boolean: {} },
+    name: 'playerVolumeEntityId',
+    selector: { entity: { multiple: false, filter: { domain: 'media_player' } } },
   },
   {
     name: 'dontSwitchPlayerWhenGrouping',

src/model/media-player.ts

@@ -23,7 +23,7 @@ export class MediaPlayer {
     this.ignoreVolume = !!this.config.entitiesToIgnoreVolumeLevelFor?.includes(this.volumePlayer.id);
   }
 
-  getMember(playerId: string) {
+  getMember(playerId?: string) {
     return this.members.find((member) => member.id === playerId);
   }
 

src/types.ts

@@ -60,7 +60,7 @@ export interface CardConfig extends LovelaceCardConfig {
   dynamicVolumeSliderMax?: number;
   artworkMinHeight?: number;
   artworkAsBackground?: boolean;
-  playerVolumeOnlyAffectsMainPlayer?: boolean;
+  playerVolumeEntityId?: string;
   dontSwitchPlayerWhenGrouping?: boolean;
 }