From 06fb0bb56187ced67f4fa4f418628d92b999b93d Mon Sep 17 00:00:00 2001
From: Magnus <34011212+MagMar94@users.noreply.github.com>
Date: Tue, 7 Mar 2023 06:43:28 +0100
Subject: [PATCH] Made it possible to render the album art on the left side of
 the text. (#50)

Co-authored-by: Magnus Marthinsen <magmar@online.no>
Co-authored-by: Christopher Fenner <9592452+CFenner@users.noreply.github.com>
---
 MMM-Sonos.js  | 6 +++++-
 MMM-Sonos.njk | 7 ++++++-
 README.md     | 1 +
 3 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/MMM-Sonos.js b/MMM-Sonos.js
index e372488..04e8013 100755
--- a/MMM-Sonos.js
+++ b/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,
diff --git a/MMM-Sonos.njk b/MMM-Sonos.njk
index a48db90..8e1d857 100644
--- a/MMM-Sonos.njk
+++ b/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>
diff --git a/README.md b/README.md
index a1971a8..6eb63e5 100644
--- a/README.md
+++ b/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