feat: full music assistant support

Author: punxaphil

README.md

@@ -25,8 +25,8 @@ This card, Maxi Media Player, is a generalisation of the [Sonos Card](https://gi
 - Configurable styling
 - Dynamic volume level slider
 - Track progress bar
-- Show, play and rearrange tracks in play queue <!-- //#ONLY_SONOS_CARD -->
-- Set and clear sleep timer <!-- //#ONLY_SONOS_CARD -->
+- Show, play and rearrange tracks in play queue (Sonos and Music Assistant)
+- Set and clear sleep timer (Sonos)
 - Search for music via Music Assistant
 
 and more!
@@ -96,6 +96,8 @@ sections: # Choose which sections to show in the card. Available sections are:
   - grouping
   - media browser
   - player
+  - queue # Sonos or Music Assistant
+  - search # Music Assistant
 ```
 --> <!-- //#ONLY_SONOS_CARD -->
 
@@ -115,6 +117,7 @@ entities: # Required unless you specify entityPlatform
   - media_player.livingroom_player
 excludeItemsInEntitiesList: true # Will invert the selection in the `entities` list, so that all players that are not in the list will be used.
 entityPlatform: sonos # will select all entities for this platform. Will override the `entities` list if set.
+# In the visual editor, the "Use Music Assistant" toggle sets entityPlatform: music_assistant
 ```
 --> <!-- //#ONLY_SONOS_CARD -->
 <!-- //#ONLY_SONOS_CARD_START -->
@@ -166,6 +169,7 @@ dynamicVolumeSliderMax: 40 # default is 30. Use this to change the max value for
 dynamicVolumeSliderThreshold: 30 # default is 20. Use this to change the threshold for the dynamic volume slider.
 entitiesToIgnoreVolumeLevelFor: # default is empty. Use this if you want to ignore volume level for certain players in the player section. Useful if you have a main device with fixed volume.
   - media_player.my_sonos_port_device
+entityPlatform: music_assistant # default is empty. 
 predefinedGroups: # defaults to empty. More advanced features in separate section further down.
   - name: Inside
     volume: 15 # If you want to set the volume of all speakers when grouping
@@ -383,8 +387,6 @@ inverseGroupMuteState: true # default is false, which means that only if all pla
 volumeStepSize: 1 # Use this to change the step size when using volume up/down. Default is to use the step size of Home Assistant's media player integration.
 ```
 
-<!-- //#ONLY_SONOS_CARD_START -->
-
 ### Queue Configuration
 
 ```yaml
@@ -396,8 +398,6 @@ queue:
   selectedItemTextColor: '#000000' # Use this to set a custom text color for the currently playing queue item.
 ```
 
-<!-- //#ONLY_SONOS_CARD_END -->
-
 ### Search Configuration
 
 The Search section allows you to search for music using the [Music Assistant](https://music-assistant.io/) integration. You must have Music Assistant installed and configured in Home Assistant to use this feature.
@@ -409,9 +409,15 @@ search:
   defaultMediaType: track # default is none. Pre-select a media type (track, artist, album, playlist).
   searchLimit: 50 # default is 50. Maximum number of results to show per search.
   autoSearchMinChars: 3 # default is 3. Minimum characters before auto-search triggers.
-  autoSearchDebounceMs: 1000 # default is 1000. Delay in milliseconds before auto-search executes.
 ```
 
+Queue supports:
+- Sonos queue (native Sonos integration)
+- Music Assistant queue (requires `entityPlatform: music_assistant`)
+
+If you use Music Assistant queue, install [mass_queue](https://github.com/droans/mass_queue) from HACS.
+
+
 **Search Features:**
 - Search for tracks, artists, albums, or playlists
 - Auto-search as you type (configurable)

scripts/deploy.ts

@@ -42,7 +42,9 @@ function loadToken(env: EnvConfig): string | null {
   return env.HA_TOKEN?.trim() || null;
 }
 
-async function updateHacstag(): Promise<void> {
+const CARD_NAMES = ['custom-sonos-card', 'maxi-media-player'];
+
+async function updateHacstags(): Promise<void> {
   const env = loadEnv();
   const token = loadToken(env);
 
@@ -64,6 +66,8 @@ async function updateHacstag(): Promise<void> {
   return new Promise((resolve, reject) => {
     const ws = new WebSocket(wsUrl);
     let msgId = 1;
+    let pendingUpdates: { resourceId: number; currentUrl: string; newUrl: string; cardName: string }[] = [];
+    let completedUpdates = 0;
 
     ws.on('message', (data: WebSocket.Data) => {
       const msg: HaMessage = JSON.parse(data.toString());
@@ -78,9 +82,40 @@ async function updateHacstag(): Promise<void> {
         ws.close();
         reject(new Error('Auth failed'));
       } else if (msg.type === 'result' && msg.id === 1) {
-        handleResourcesResult(msg, ws, msgId++, resolve, reject);
-      } else if (msg.type === 'result' && msg.id === 2) {
-        handleUpdateResult(msg, ws, resolve, reject);
+        pendingUpdates = buildUpdates(msg, reject);
+        if (pendingUpdates.length === 0) {
+          ws.close();
+          reject(new Error('No resources found to update'));
+          return;
+        }
+        for (const update of pendingUpdates) {
+          const id = msgId++;
+          console.log(`\n[${update.cardName}]`);
+          console.log(`  Resource ID: ${update.resourceId}`);
+          console.log(`  Current: ${update.currentUrl}`);
+          console.log(`  New: ${update.newUrl}`);
+          ws.send(
+            JSON.stringify({
+              id,
+              type: 'lovelace/resources/update',
+              resource_id: update.resourceId,
+              url: update.newUrl,
+            }),
+          );
+        }
+      } else if (msg.type === 'result' && msg.id && msg.id >= 2) {
+        if (msg.success) {
+          completedUpdates++;
+          if (completedUpdates === pendingUpdates.length) {
+            console.log(`\n✅ All ${completedUpdates} hacstags updated successfully!`);
+            ws.close();
+            resolve();
+          }
+        } else {
+          console.error('Failed to update:', msg.error);
+          ws.close();
+          reject(new Error('Update failed'));
+        }
       }
     });
 
@@ -91,65 +126,40 @@ async function updateHacstag(): Promise<void> {
   });
 }
 
-function handleResourcesResult(
+function buildUpdates(
   msg: HaMessage,
-  ws: WebSocket,
-  msgId: number,
-  _resolve: () => void,
   reject: (err: Error) => void,
-): void {
+): { resourceId: number; currentUrl: string; newUrl: string; cardName: string }[] {
   const resources = msg.result ?? [];
-  const sonosResource = resources.find((r) => r.url?.includes('custom-sonos-card'));
+  const updates: { resourceId: number; currentUrl: string; newUrl: string; cardName: string }[] = [];
 
-  if (!sonosResource) {
-    console.error('Could not find custom-sonos-card resource!');
-    ws.close();
-    reject(new Error('Resource not found'));
-    return;
-  }
+  for (const cardName of CARD_NAMES) {
+    const resource = resources.find((r) => r.url?.includes(cardName));
 
-  const currentUrl = sonosResource.url;
-  const resourceId = sonosResource.id;
+    if (!resource) {
+      console.error(`Could not find ${cardName} resource!`);
+      reject(new Error(`Resource not found: ${cardName}`));
+      return [];
+    }
 
-  const match = currentUrl.match(/hacstag=(\d+)/);
-  if (!match) {
-    console.error(`No hacstag found in URL: ${currentUrl}`);
-    ws.close();
-    reject(new Error('No hacstag'));
-    return;
-  }
+    const match = resource.url.match(/hacstag=(\d+)/);
+    if (!match) {
+      console.error(`No hacstag found in URL: ${resource.url}`);
+      reject(new Error(`No hacstag for ${cardName}`));
+      return [];
+    }
 
-  const currentTag = parseInt(match[1], 10);
-  const newTag = currentTag + 1;
-  const newUrl = currentUrl.replace(`hacstag=${currentTag}`, `hacstag=${newTag}`);
-
-  console.log(`Resource ID: ${resourceId}`);
-  console.log(`Current: ${currentUrl}`);
-  console.log(`New: ${newUrl}`);
-
-  ws.send(
-    JSON.stringify({
-      id: msgId,
-      type: 'lovelace/resources/update',
-      resource_id: resourceId,
-      url: newUrl,
-    }),
-  );
-}
+    const currentTag = parseInt(match[1], 10);
+    const newTag = currentTag + 1;
+    const newUrl = resource.url.replace(`hacstag=${currentTag}`, `hacstag=${newTag}`);
 
-function handleUpdateResult(msg: HaMessage, ws: WebSocket, resolve: () => void, reject: (err: Error) => void): void {
-  if (msg.success) {
-    console.log('\n✅ Hacstag updated successfully!');
-    ws.close();
-    resolve();
-  } else {
-    console.error('Failed to update:', msg.error);
-    ws.close();
-    reject(new Error('Update failed'));
+    updates.push({ resourceId: resource.id, currentUrl: resource.url, newUrl, cardName });
   }
+
+  return updates;
 }
 
-updateHacstag().catch((err: Error) => {
+updateHacstags().catch((err: Error) => {
   console.error(err.message);
   process.exit(1);
 });

src/card.ts

@@ -12,7 +12,7 @@ import './components/source';
 import { ACTIVE_PLAYER_EVENT, CALL_MEDIA_DONE, CALL_MEDIA_STARTED } from './constants';
 import { when } from 'lit/directives/when.js';
 import { styleMap } from 'lit-html/directives/style-map.js';
-import { cardDoesNotContainAllSections, getHeight, getWidth, isSonosCard } from './utils/utils';
+import { cardDoesNotContainAllSections, getHeight, getWidth, isQueueSupported, isSonosCard } from './utils/utils';
 
 const { GROUPING, GROUPS, MEDIA_BROWSER, PLAYER, VOLUMES, QUEUE, SEARCH } = Section;
 const TITLE_HEIGHT = 2;
@@ -27,6 +27,7 @@ export class Card extends LitElement {
   @state() loaderTimestamp!: number;
   @state() cancelLoader!: boolean;
   @state() activePlayerId?: string;
+  @state() configError: string | null = null;
 
   render() {
     this.createStore();
@@ -47,6 +48,7 @@ export class Card extends LitElement {
         >
         </div>
         ${title ? html`<div class="title">${title}</div>` : html``}
+        ${this.configError ? html`<div class="no-players">${this.configError}</div>` : html``}
         <div class="content" style=${this.contentStyle(contentHeight)}>
           ${
             this.activePlayerId
@@ -251,8 +253,8 @@ export class Card extends LitElement {
         delete newConfig[key];
       }
     }
-    const sections =
-      newConfig.sections || Object.values(Section).filter((section) => isSonosCard(newConfig) || section !== QUEUE);
+    const showQueue = isQueueSupported(newConfig);
+    const sections = newConfig.sections || Object.values(Section).filter((section) => showQueue || section !== QUEUE);
     if (newConfig.startSection && sections.includes(newConfig.startSection)) {
       this.section = newConfig.startSection;
     } else if (sections) {
@@ -266,7 +268,7 @@ export class Card extends LitElement {
               ? GROUPING
               : sections.includes(SEARCH)
                 ? SEARCH
-                : sections.includes(QUEUE) && isSonosCard(newConfig)
+                : sections.includes(QUEUE) && showQueue
                   ? QUEUE
                   : VOLUMES;
     } else {
@@ -286,9 +288,22 @@ export class Card extends LitElement {
         newConfig.entityPlatform = undefined;
       }
     }
+    this.configError = this.getConfigError(newConfig);
     this.config = newConfig;
   }
 
+  private getConfigError(config: CardConfig): string | null {
+    const isMusicAssistant = config.entityPlatform === 'music_assistant';
+    const hasShowNonSonos = !!config.showNonSonosPlayers;
+    const hasOtherPlatform =
+      !!config.entityPlatform && config.entityPlatform !== 'music_assistant' && config.entityPlatform !== 'sonos';
+    const activeCount = [isMusicAssistant, hasShowNonSonos, hasOtherPlatform].filter(Boolean).length;
+    if (activeCount > 1) {
+      return 'Conflicting configuration: only one of useMusicAssistant, showNonSonosPlayers, or entityPlatform can be set at a time. Please fix your configuration.';
+    }
+    return null;
+  }
+
   static get styles() {
     return css`
       :host {

src/components/footer.ts

@@ -2,7 +2,7 @@ import { css, html, LitElement } from 'lit';
 import { property } from 'lit/decorators.js';
 import { CardConfig, Section } from '../types';
 import './section-button';
-import { isSonosCard } from '../utils/utils';
+import { isQueueSupported } from '../utils/utils';
 
 const { GROUPING, GROUPS, MEDIA_BROWSER, PLAYER, VOLUMES, QUEUE, SEARCH } = Section;
 
@@ -21,7 +21,7 @@ class Footer extends LitElement {
       [SEARCH, icons?.search ?? 'mdi:magnify'],
       [VOLUMES, icons?.volumes ?? 'mdi:tune'],
     ];
-    if (!isSonosCard(this.config)) {
+    if (!isQueueSupported(this.config)) {
       sections = sections.filter(([section]) => section !== QUEUE);
     }
     sections = sections.filter(([section]) => !this.config.sections || this.config.sections?.includes(section));