Added support for scrolling text if the text is longer than the max v…

…alue.

It will scroll only the information that is above the specified lenth.
If both artist- and track-info is to long, they will scrolle together.

MMM-Sonos.css

@@ -20,3 +20,26 @@
 .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%); }
+}

MMM-Sonos.js

@@ -10,6 +10,7 @@ Module.register('MMM-Sonos', {
     showAlbumArt: true,
     showRoomName: true,
     maxTextLength: undefined,
+    scrollSpeed: 0,
     animationSpeed: 1000,
     updateInterval: 0.5, // every 0.5 minutes
     apiBase: 'http://localhost',
@@ -72,7 +73,7 @@ Module.register('MMM-Sonos', {
           track = ''
         }
 
-        if(maxTextLength){
+        if(maxTextLength && this.config.scrollSpeed <= 0){
           if(artist.length > maxTextLength)
             artist = `${artist.substring(0, maxTextLength)}...`
           if(track.length > maxTextLength)
@@ -105,6 +106,8 @@ Module.register('MMM-Sonos', {
     return {
       flip: this.data.position.startsWith('left'),
       loaded: this.loaded,
+      maxTextLength: this.config.maxTextLength,
+      scrollSpeed: this.config.scrollSpeed,
       showAlbumArt: this.config.showAlbumArt,
       showRoomName: this.config.showRoomName,
       showStoppedRoom: this.config.showStoppedRoom,

MMM-Sonos.njk

@@ -1,10 +1,26 @@
+<style>
+.iso-marquee {
+  max-width: {{ maxTextLength }}em;
+}
+</style>
+
 <div class="sonos">
   {% if loaded %}
     <ul class={{ "flip" if flip else "" }}>
       {% for room in roomList %}
         {% if room.state == 'PLAYING' or showStoppedRoom %}
           <li>
             <div>
+              {% 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 class="name normal medium">
                 <div>{{ room.artist }}</div>
                 <div>{{ room.track }}</div>

README.md

@@ -57,6 +57,7 @@ You also can set some options to hide different parts of the module.
 |`showAlbumArt`|Trigger the visualization of the album art.|`true`|
 |`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