Skip to content

Commit

Permalink
Added support for scrolling text if the text is longer than the max v…
Browse files Browse the repository at this point in the history
…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.
  • Loading branch information
Magnus Marthinsen committed Jan 7, 2024
1 parent f3c3a48 commit 08ae3e3
Show file tree
Hide file tree
Showing 4 changed files with 39 additions and 2 deletions.
20 changes: 20 additions & 0 deletions MMM-Sonos.css
Original file line number Diff line number Diff line change
Expand Up @@ -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%); }
}
4 changes: 3 additions & 1 deletion MMM-Sonos.js
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down Expand Up @@ -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)}...`
}
Expand Down Expand Up @@ -108,6 +109,7 @@ Module.register('MMM-Sonos', {
return {
flip: this.data.position.startsWith('left'),
loaded: this.loaded,
maxTextLength: this.config.maxTextLength,
showAlbumArtRight:
this.config.showAlbumArt && this.config.albumArtLocation !== 'left',
showAlbumArtLeft:
Expand Down
16 changes: 15 additions & 1 deletion MMM-Sonos.njk
Original file line number Diff line number Diff line change
@@ -1,3 +1,9 @@
<style>
.iso-marquee {
max-width: {{ maxTextLength }}em;
}
</style>
<div class="sonos">
{% if loaded %}
<ul class={{ "flip" if flip else "" }}>
Expand All @@ -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>
Expand Down
1 change: 1 addition & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down

0 comments on commit 08ae3e3

Please sign in to comment.