From f3c3a48f703f7a7513fe9291800477cde800644f Mon Sep 17 00:00:00 2001
From: Magnus Marthinsen <magmar@online.no>
Date: Sun, 13 Nov 2022 19:20:37 +0100
Subject: [PATCH 1/2] Possibility to trim long text.

---
 MMM-Sonos.js | 11 +++++++++++
 README.md    |  1 +
 2 files changed, 12 insertions(+)

diff --git a/MMM-Sonos.js b/MMM-Sonos.js
index 04e8013..bca0a6d 100755
--- a/MMM-Sonos.js
+++ b/MMM-Sonos.js
@@ -10,6 +10,7 @@ Module.register('MMM-Sonos', {
     showAlbumArt: true,
     albumArtLocation: 'right',
     showRoomName: true,
+    maxTextLength: undefined,
     animationSpeed: 1000,
     updateInterval: 0.5, // every 0.5 minutes
     apiBase: 'http://localhost',
@@ -51,6 +52,7 @@ Module.register('MMM-Sonos', {
   },
   updateRoomList: function (data) {
     const roomList = []
+    const maxTextLength = this.config.maxTextLength
     data.forEach(function (item) {
       const roomName = this.getRoomName(item)
       if (roomName !== '') {
@@ -71,6 +73,15 @@ Module.register('MMM-Sonos', {
           track = ''
         }
 
+        if (maxTextLength) {
+          if (artist.length > maxTextLength) {
+            artist = `${artist.substring(0, maxTextLength)}...`
+          }
+          if (track.length > maxTextLength) {
+            track = `${track.substring(0, maxTextLength)}...`
+          }
+        }
+
         roomList.push({
           name: roomName,
           state: this.isInTVMode(artist, track, cover) ? 'TV' : item.coordinator.state.playbackState,
diff --git a/README.md b/README.md
index 516e2f5..5df5a90 100644
--- a/README.md
+++ b/README.md
@@ -58,6 +58,7 @@ You also can set some options to hide different parts of the module.
 |`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`|
+|`maxTextLength`|The maximum length of the displayed text.|`undefined`|
 
 ### Known Issues
 

From 47b077f950da0594fe1d53e407eaf2e2fddda3dd Mon Sep 17 00:00:00 2001
From: Magnus Marthinsen <magmar@online.no>
Date: Sun, 7 Jan 2024 13:41:24 +0100
Subject: [PATCH 2/2] Added support for scrolling text if the text is longer
 than the max value.

It will scroll only the information that is above the specified length.
If both artist- and track-info is to long, they will scrolle together.
---
 MMM-Sonos.css | 20 ++++++++++++++++++++
 MMM-Sonos.js  |  5 ++++-
 MMM-Sonos.njk | 16 +++++++++++++++-
 README.md     |  1 +
 4 files changed, 40 insertions(+), 2 deletions(-)

diff --git a/MMM-Sonos.css b/MMM-Sonos.css
index 0a61d91..3bb7d6a 100644
--- a/MMM-Sonos.css
+++ b/MMM-Sonos.css
@@ -20,3 +20,23 @@
 .sonos ul.flip {
   direction: rtl;
 }
+.iso-marquee {
+  overflow: hidden;
+}
+.iso-marquee span {
+  display: inline-block;
+  white-space: nowrap;
+  width: var(--tw);
+  text-shadow: var(--tw) 0 currentcolor,
+                 calc(var(--tw) * 2) 0 currentcolor,
+                 calc(var(--tw) * 3) 0 currentcolor,
+                 calc(var(--tw) * 4) 0 currentcolor;
+  will-change: transform;
+  animation: iso-marquee var(--ad) linear infinite;
+  animation-play-state: play;
+}
+
+@keyframes iso-marquee {
+  0% { transform: translateX(0); }
+  100% { transform: translateX(-100%); }
+}
\ No newline at end of file
diff --git a/MMM-Sonos.js b/MMM-Sonos.js
index bca0a6d..8ce091c 100755
--- a/MMM-Sonos.js
+++ b/MMM-Sonos.js
@@ -11,6 +11,7 @@ Module.register('MMM-Sonos', {
     albumArtLocation: 'right',
     showRoomName: true,
     maxTextLength: undefined,
+    scrollSpeed: 0,
     animationSpeed: 1000,
     updateInterval: 0.5, // every 0.5 minutes
     apiBase: 'http://localhost',
@@ -73,7 +74,7 @@ Module.register('MMM-Sonos', {
           track = ''
         }
 
-        if (maxTextLength) {
+        if (maxTextLength && this.config.scrollSpeed <= 0) {
           if (artist.length > maxTextLength) {
             artist = `${artist.substring(0, maxTextLength)}...`
           }
@@ -108,6 +109,8 @@ Module.register('MMM-Sonos', {
     return {
       flip: this.data.position.startsWith('left'),
       loaded: this.loaded,
+      maxTextLength: this.config.maxTextLength,
+      scrollSpeed: this.config.scrollSpeed,
       showAlbumArtRight:
         this.config.showAlbumArt && this.config.albumArtLocation !== 'left',
       showAlbumArtLeft:
diff --git a/MMM-Sonos.njk b/MMM-Sonos.njk
index 8e1d857..9a4d692 100644
--- a/MMM-Sonos.njk
+++ b/MMM-Sonos.njk
@@ -1,3 +1,9 @@
+<style>
+.iso-marquee {
+  max-width: {{ maxTextLength }}em;
+}
+</style>
+
 <div class="sonos">
   {% if loaded %}
     <ul class={{ "flip" if flip else "" }}>
@@ -10,7 +16,15 @@
                   <img src="{{ room.albumArt }}"/>
                 </div>
               {% endif %}
-              <div class="name normal medium">
+              {% if scrollSpeed > 0 and room.artist.length > maxTextLength and room.track.length > maxTextLength %}
+                {% if room.artist.length > room.track.length %}
+                  <div class="name normal medium iso-marquee" style="--tw:{{ room.artist.length * 1.1 }}ch; --ad:{{scrollSpeed}}s;">
+                {% else %}
+                   <div class="name normal medium iso-marquee" style="--tw:{{ room.track.length * 1.1 }}ch; --ad:{{scrollSpeed}}s;">
+                {% endif %}
+              {% else %}
+                <div class="name normal medium">
+              {% endif %}
                 <div>{{ room.artist }}</div>
                 <div>{{ room.track }}</div>
               </div>
diff --git a/README.md b/README.md
index 5df5a90..2f6e0fc 100644
--- a/README.md
+++ b/README.md
@@ -59,6 +59,7 @@ You also can set some options to hide different parts of the module.
 |`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`|
 |`maxTextLength`|The maximum length of the displayed text.|`undefined`|
+|`scrollSpeed`|If `maxTextLength` and `scrollSpeed` is set to a value above 0, the text will not be truncated but scroll in the allocated space instead. A recommended start value is `30`, and then you can tune this value up or down according to your preferences.|`0`|
 
 ### Known Issues