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 length.
If both artist- and track-info is to long, they will scrolle together.

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%); }
+}

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:

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>

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