diff --git a/MMM-Sonos.css b/MMM-Sonos.css index 0a61d91..74c61d1 100644 --- a/MMM-Sonos.css +++ b/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%); } +} \ No newline at end of file diff --git a/MMM-Sonos.js b/MMM-Sonos.js index f91df3d..5de26b8 100755 --- a/MMM-Sonos.js +++ b/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, diff --git a/MMM-Sonos.njk b/MMM-Sonos.njk index a48db90..00e82c0 100644 --- a/MMM-Sonos.njk +++ b/MMM-Sonos.njk @@ -1,3 +1,9 @@ + +
{% if loaded %}