Add support to display the full group name, i.e. all device names sep…

…arated with `+`
tbouron · Jan 25, 2020 · f736d8a · f736d8a
1 parent 3c175e5
commit f736d8a
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 5 deletions.
diff --git a/MMM-Sonos.css b/MMM-Sonos.css
@@ -12,14 +12,16 @@
 .metadata {
     display: inline-flex;
 }
-
 .metadata > span {
     display: flex;
     justify-items: center;
 }
 .metadata > span:not(:last-child) {
     margin-right: 0.5em;
 }
+.metadata .group-name {
+    max-width: 150px;
+}
 
 .feather {
     width: 1.2em;

diff --git a/MMM-Sonos.js b/MMM-Sonos.js
@@ -1,6 +1,7 @@
 Module.register('MMM-Sonos', {
     defaults: {
         animationSpeed: 1000,
+        showFullGroupName: false,
         showArtist: true,
         showAlbum: true,
         showMetadata: true
@@ -120,10 +121,14 @@ Module.register('MMM-Sonos', {
                         volume = `${this.getIcon(item.volume < 50 ? 'volume-1' : 'volume-2', 'dimmed')}&nbsp;<span>${item.volume}</span>`;
                     }
 
+                    const groupName = this.config.showFullGroupName
+                        ? item.group.ZoneGroupMember.map(member => member.ZoneName).join(' + ')
+                        : item.group.Name;
+
                     const metadata = document.createElement('div');
                     metadata.className = 'metadata small normal';
                     metadata.innerHTML =
-                        `<span>${this.getIcon('speaker', 'dimmed')}&nbsp;<span>${item.group.Name}</span></span>` +
+                        `<span>${this.getIcon('speaker', 'dimmed')}&nbsp;<span class="group-name ticker">${groupName}</span></span>` +
                         '&nbsp;' +
                         `<span>${volume}</span>` +
                         '&nbsp;' +

diff --git a/README.md b/README.md
@@ -34,6 +34,7 @@ then add the module to your MagicMirror's configuration. Here is an example:
             position: 'top_left',
             config: {
                 animationSpeed: Number,
+                showFullGroupName: Boolean,
                 showArtist: Boolean,
                 showAlbum: Boolean,
                 showMetadata: Boolean
@@ -48,6 +49,7 @@ then add the module to your MagicMirror's configuration. Here is an example:
 | Configuration key | Description | Default | Required |
 | --- | --- | --- | --- |
 | animationSpeed | Animation speed to display/hide the module when tracks change. This value is in _milliseconds_ | 1000 | No |
-| showArtist | Whether or not display the artist name | `true` | No |
-| showAlbum | Whether or not display the album name | `true` | No |
-| showMetadata | Whether or not display the track metadata, i.e. room where it's played, length, volume | `true` | No |
+| showFullGroupName | Whether or not to display all devices in the group. If false, the group name will be `<coordinator-name> +<number-other-devices>`, e.g. `Kitchen +2`. | `false` | No |
+| showArtist | Whether or not to display the artist name | `true` | No |
+| showAlbum | Whether or not to display the album name | `true` | No |
+| showMetadata | Whether or not to display the track metadata, i.e. room where it's played, length, volume | `true` | No |