diff --git a/MMM-Sonos.css b/MMM-Sonos.css index fa1e9f9..3c0991a 100644 --- a/MMM-Sonos.css +++ b/MMM-Sonos.css @@ -12,7 +12,6 @@ .metadata { display: inline-flex; } - .metadata > span { display: flex; justify-items: center; @@ -20,6 +19,9 @@ .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 index e591c0b..2b05155 100644 --- 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 @@ -23,7 +24,6 @@ Module.register('MMM-Sonos', { socketNotificationReceived: function (id, payload) { Log.log(`Notification received: ${id}`, payload); - let currentItem; switch (id) { case 'SET_SONOS_GROUPS': @@ -31,40 +31,44 @@ Module.register('MMM-Sonos', { this.updateDom(this.config.animationSpeed); break; case 'SET_SONOS_CURRENT_TRACK': - currentItem = this.items.hasOwnProperty(payload.group.ID) ? this.items[payload.group.ID] : {}; - this.items[payload.group.ID] = { - ...currentItem, - group: payload.group, - track: payload.track, - }; - this.updateDom(this.config.animationSpeed); + if (this.items.hasOwnProperty(payload.group.ID)) { + this.items[payload.group.ID] = { + ...this.items[payload.group.ID], + group: payload.group, + track: payload.track, + }; + this.updateDom(this.config.animationSpeed); + } break; case 'SET_SONOS_VOLUME': - currentItem = this.items.hasOwnProperty(payload.group.ID) ? this.items[payload.group.ID] : {}; - this.items[payload.group.ID] = { - ...currentItem, - group: payload.group, - volume: payload.volume - }; - this.updateDom(); + if (this.items.hasOwnProperty(payload.group.ID)) { + this.items[payload.group.ID] = { + ...this.items[payload.group.ID], + group: payload.group, + volume: payload.volume + }; + this.updateDom(); + } break; case 'SET_SONOS_MUTE': - currentItem = this.items.hasOwnProperty(payload.group.ID) ? this.items[payload.group.ID] : {}; - this.items[payload.group.ID] = { - ...currentItem, - group: payload.group, - isMuted: payload.isMuted - }; - this.updateDom(); + if (this.items.hasOwnProperty(payload.group.ID)) { + this.items[payload.group.ID] = { + ...this.items[payload.group.ID], + group: payload.group, + isMuted: payload.isMuted + }; + this.updateDom(); + } break; case 'SET_SONOS_PLAY_STATE': - currentItem = this.items.hasOwnProperty(payload.group.ID) ? this.items[payload.group.ID] : {}; - this.items[payload.group.ID] = { - ...currentItem, - group: payload.group, - state: payload.state - }; - this.updateDom(this.config.animationSpeed); + if (this.items.hasOwnProperty(payload.group.ID)) { + this.items[payload.group.ID] = { + ...this.items[payload.group.ID], + group: payload.group, + state: payload.state + }; + this.updateDom(this.config.animationSpeed); + } break; default: Log.info(`Notification with ID "${id}" unsupported. Ignoring...`); @@ -117,10 +121,14 @@ Module.register('MMM-Sonos', { volume = `${this.getIcon(item.volume < 50 ? 'volume-1' : 'volume-2', 'dimmed')} ${item.volume}`; } + 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 = - `${this.getIcon('speaker', 'dimmed')} ${item.group.Name}` + + `${this.getIcon('speaker', 'dimmed')} ${groupName}` + ' ' + `${volume}` + ' ' + diff --git a/README.md b/README.md index 2272b35..a748de8 100644 --- a/README.md +++ b/README.md @@ -35,6 +35,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 @@ -49,6 +50,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 ` +`, 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 | diff --git a/node_helper.js b/node_helper.js index cb63e7d..38f18ed 100644 --- a/node_helper.js +++ b/node_helper.js @@ -68,7 +68,7 @@ module.exports = NodeHelper.create({ setGroups(groups) { Promise.all(groups.map(group => { - const sonos = new Sonos(group.host); + const sonos = group.CoordinatorDevice(); return Promise.all([ sonos.currentTrack(), sonos.getCurrentState(), @@ -98,7 +98,7 @@ module.exports = NodeHelper.create({ groups.forEach(group => { console.log(`Registering listeners for group "${group.Name}" (host "${group.host}")`); - const sonos = new Sonos(group.host); + const sonos = group.CoordinatorDevice(); sonos.on('Mute', isMuted => { console.log('This speaker is %s.', isMuted ? 'muted' : 'unmuted')