Add PlayerNameLabel component and redesign footer track info layout#1687
Add PlayerNameLabel component and redesign footer track info layout#1687apophisnow wants to merge 4 commits into
Conversation
- Add reusable PlayerNameLabel component with speaker icon and player name, using Tailwind classes (text-sm font-medium). Clicking opens the speaker menu when clickable prop is enabled. - Add custom SpeakerIcon and SpeakerGroupIcon SVG components with ripple wave animations when playing (cone + tweeter ripples). - Move player name from track details title to extended controls area, right-aligned above the queue/volume buttons. - Track details title now shows track name directly, with artist and album on separate subtitle lines (removes showOnlyArtist prop). - Replace SpeakerBtn in fullscreen player with PlayerNameLabel. - Remove redundant SpeakerBtn and ActivePlayerPopover from extended controls. - Use SpeakerGroupIcon for group toggle button in PlayerCard, showing numbered badge only when group has more than one member. - Use PlayerNameLabel for player names in PlayerCard. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Cast ref values to their expected DOM types to fix type compatibility issues with ResizeObserver, MutationObserver, and IntersectionObserver. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
|
Out of interest what does the speaker icon animation look like? |
|
Let's focus on one thing at a time please so we can test the change in nightly/beta and collect feedback. 1) Playername on the playerbar. 2) Playercards in Playerselect I will write out my idea about PlayerSelect on the projectboard (based on some earlier discussions/feedback on discord) so people can give their opinions and then we can implement it as a single change which can be tested in nighty/beta For now, please remove this change from this PR |
|
Hey there @apophisnow firstly, i added this PR over here: https://discord.com/channels/753947050995089438/1463564508613312552 We'll be focusing on this topic in the roadmap work in the next two months: OpenHomeFoundation/ux-design#33 We also discussed this here a little: music-assistant/backlog#52 As for the design ideas in this PR, these are interesting ideas that i'll save/refer to as I look into teh UX and UI design of the player drawer in the next months. I'll also be opening up a discussion thread on the subject of animated icons/animations in music assistant generally because whil animation is cool and useful UI highlight, we should be careful not to use too much animation in an interface so we don't confuse users and distract them but also so we make sure they aren't heavy 'files'. Re. showing the player name in the player bar on the right, i think it's a step in a good directionbut not quite soving the problems we have for users in how they read information here. But thanks for the design ideas and please do chat in teh discord topics or in our design files if you want to continue to help build on this together :) |
https://discord.com/channels/753947050995089438/1098879369792983071/1491169336889704630 |
I'm not planning on trying to have this PR merged, it was just the easiest way for me to play around with and communicate some of the design ideas I had. Would you prefer I close the PR? |
Preliminary PR for reworking the player label and icons.

My concept here:
Left side = track info (now with more space so album gets it's own line)
Right side = Player related info and controls
Removes the need for the separate player/speaker button
Removes the need for EQ animation (speaker icon is animated)
New custom icon for speaker groups communicates purpose more clearly in player dialog
Shows group icon when current player is a group