Possibility to handle long text

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

@@ -10,6 +10,8 @@ Module.register('MMM-Sonos', {
     showAlbumArt: true,
     albumArtLocation: 'right',
     showRoomName: true,
+    maxTextLength: undefined,
+    scrollSpeed: 0,
     animationSpeed: 1000,
     updateInterval: 0.5, // every 0.5 minutes
     apiBase: 'http://localhost',
@@ -51,6 +53,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 +74,15 @@ Module.register('MMM-Sonos', {
           track = ''
         }
 
+        if (maxTextLength && this.config.scrollSpeed <= 0) {
+          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,
@@ -97,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

@@ -58,6 +58,8 @@ 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`|
+|`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