Made it possible to render the album art on the left side of the text. (

#50)

Co-authored-by: Magnus Marthinsen <[email protected]>
Co-authored-by: Christopher Fenner <[email protected]>

MMM-Sonos.js

@@ -8,6 +8,7 @@ Module.register('MMM-Sonos', {
   defaults: {
     showStoppedRoom: true,
     showAlbumArt: true,
+    albumArtLocation: 'right',
     showRoomName: true,
     animationSpeed: 1000,
     updateInterval: 0.5, // every 0.5 minutes
@@ -96,7 +97,10 @@ Module.register('MMM-Sonos', {
     return {
       flip: this.data.position.startsWith('left'),
       loaded: this.loaded,
-      showAlbumArt: this.config.showAlbumArt,
+      showAlbumArtRight:
+        this.config.showAlbumArt && this.config.albumArtLocation !== 'left',
+      showAlbumArtLeft:
+        this.config.showAlbumArt && this.config.albumArtLocation === 'left',
       showRoomName: this.config.showRoomName,
       showStoppedRoom: this.config.showStoppedRoom,
       roomList: this.roomList,

MMM-Sonos.njk

@@ -5,11 +5,16 @@
         {% if room.state == 'PLAYING' or showStoppedRoom %}
           <li>
             <div>
+             {% if showAlbumArtLeft %}
+                <div class="art">
+                  <img src="{{ room.albumArt }}"/>
+                </div>
+              {% endif %}
               <div class="name normal medium">
                 <div>{{ room.artist }}</div>
                 <div>{{ room.track }}</div>
               </div>
-              {% if showAlbumArt %}
+              {% if showAlbumArtRight %}
                 <div class="art">
                   <img src="{{ room.albumArt }}"/>
                 </div>

README.md

@@ -55,6 +55,7 @@ You also can set some options to hide different parts of the module.
 |---|---|---|
 |`showStoppedRoom`|Trigger the visualization of stopped rooms.|`true`|
 |`showAlbumArt`|Trigger the visualization of the album art.|`true`|
+|`albumArtLocation`|Specifies on which side of the text the album art is rendered. Possible values: `left`, `right`.|`right`|
 |`showRoomName`|Trigger the visualization of the room name.|`true`|
 
 ### Known Issues