-
-
Notifications
You must be signed in to change notification settings - Fork 30
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Add Marquee to Make Long Text Readable #767
Add Marquee to Make Long Text Readable #767
Conversation
bd3e688
to
83d6d26
Compare
I appreciate the PR and I think this addition will be liked by many. I think for the full list of queue tracks we should only scroll the currently active item, and not the entire list. |
Thanks for the feedback. I will make the scrolling slower (maybe half of the current speed). I will look into how SONOS handles it later, but this PR already pauses for 2 seconds at the end of the text before resetting. How about extending that to 4 seconds? As for the Queue, I absolutely agree with you about the busyness (I mainly added the marquee to absolutely everything to see what works). As an alternative solution, I can propose: adjusting the 3-dot menu on a queue item to show the title/artist name in full with wrapping. Keeping scrolling on for the currently active queue item sounds good. Then we can synchronize scrolling between the left and right side of the full-screen player (first video; currently, it was syncing separately due to different text lengths). This should further reduce busyness a bit. Let me know what you think of this. I will try to adjust this PR in the coming week. |
Yeah sounds good on all points. |
Required for MarqueeText to not be pushed onto a new line
Previously a fixed width was used, which made MarqueeText not scroll to the end on some screen sized. Now a flexbox is used to ensure the title fits into the header.
This component allows the containing content to be automatically scrolled. The key differentiator from other Marquee components is the syncing capability for increased readability.
51781de
to
0d35907
Compare
Just updated this PR as discussed. You can see the updated screen recordings above. I also looked into how the SONOS app handles the marquee: As for revealing the full title in the context menu, I can add that in a separate PR later. |
0d35907
to
269f889
Compare
Perfect! |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Nice work @maximmaxim345 !
Current Situation
Currently, Music Assistant on mobile devices cuts off long titles, albums, and artist names, making it impossible to read them completely.
This is especially problematic with Classical Music, where titles often include the composer, composition name, and movement.
Overview
To address this issue, this PR adds a
MarqueeText
component, which automatically scrolls text that doesn't fit on screen.To improve readability,
MarqueeText
includes the following features for use in Music Assistant:MarqueeText
can be synchronized withMarqueeTextSync
for coordinated scrollingMarqueeTextSync
When a
MarqueeTextSync
object is passed through thesync
prop ofMarqueeText
, the reset animation will be synchronized across all instances using the sameMarqueeTextSync
object.Additional delay is added at the start of the animation, so waiting widgets will pause with the text at the beginning.
This provides the following advantages:
Only visible
MarqueeText
widgets will be animated, ensuring animations won't be slowed down by off-screenMarqueeText
components with very long text.Use of MarqueeText in this PR
In this PR, MarqueeText is added in the following places:
MarqueeTextSync
than the Queue)Scrolling is done using CSS, while CPU usage seems to be minimal (tested using Firefox Profiler).
Screen Recordings of this PR in Action
Marquee.Fullscreen.Player.Phone.mp4
Marquee.Fullscreen.Player.Tablet.mp4
Marquee.Minimized.Player.and.Album.Info.mp4