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 e09ef82 commit 489f3a1
Show file tree
Hide file tree
Showing 4 changed files with 42 additions and 2 deletions.
23 changes: 23 additions & 0 deletions MMM-Sonos.css
Original file line number Diff line number Diff line change
Expand Up @@ -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%); }
}
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){

Check failure on line 77 in MMM-Sonos.js

View workflow job for this annotation

GitHub Actions / ESLint

Expected space(s) after "if"

Check failure on line 77 in MMM-Sonos.js

View workflow job for this annotation

GitHub Actions / ESLint

Missing space before opening brace
if(artist.length > maxTextLength)

Check failure on line 78 in MMM-Sonos.js

View workflow job for this annotation

GitHub Actions / ESLint

Expected space(s) after "if"
artist = `${artist.substring(0, maxTextLength)}...`

Check failure on line 79 in MMM-Sonos.js

View workflow job for this annotation

GitHub Actions / ESLint

Expected { after 'if' condition
if(track.length > maxTextLength)

Check failure on line 80 in MMM-Sonos.js

View workflow job for this annotation

GitHub Actions / ESLint

Expected space(s) after "if"
Expand Down Expand Up @@ -106,6 +107,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 489f3a1

Please sign in to comment.