Skip to content

Add PlayerNameLabel component and redesign footer track info layout#1687

Draft
apophisnow wants to merge 4 commits into
music-assistant:mainfrom
apophisnow:feature/player-name-label
Draft

Add PlayerNameLabel component and redesign footer track info layout#1687
apophisnow wants to merge 4 commits into
music-assistant:mainfrom
apophisnow:feature/player-name-label

Conversation

@apophisnow

Copy link
Copy Markdown
Contributor

Preliminary PR for reworking the player label and icons.
Screenshot 2026-04-08 at 1 30 46 AM
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

Screenshot 2026-04-08 at 2 14 43 AM Screenshot 2026-04-08 at 2 14 25 AM

apophisnow and others added 4 commits April 8, 2026 01:41
- 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>
@OzGav

OzGav commented Apr 9, 2026

Copy link
Copy Markdown
Contributor

Out of interest what does the speaker icon animation look like?

@marcelveldt

Copy link
Copy Markdown
Member

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.
My first response is that this looks clunky/messy and I'd rather see another approach. We could consider a chip object in the primary color (which is blue by default, so it stands out) with the player name. No icon please. I think if we do this, you make it very clear what the active player is, and we can drop the (rather annoying) popout about the active player.

2) Playercards in Playerselect
One of the tasks on the backlog is refactoring the whole PlayerSelect and I think we need to discuss that first before doing this change. One of the things we discussed is simplifying the playerselect and always show the actual PlayerIcon instead of the coverart - with good user selectable / customizable player icons it will help a whole lot.

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

@Erioldoesdesign

Copy link
Copy Markdown

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 :)

@apophisnow

Copy link
Copy Markdown
Contributor Author

Out of interest what does the speaker icon animation look like?

https://discord.com/channels/753947050995089438/1098879369792983071/1491169336889704630

@apophisnow

Copy link
Copy Markdown
Contributor Author

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. My first response is that this looks clunky/messy and I'd rather see another approach. We could consider a chip object in the primary color (which is blue by default, so it stands out) with the player name. No icon please. I think if we do this, you make it very clear what the active player is, and we can drop the (rather annoying) popout about the active player.

2) Playercards in Playerselect One of the tasks on the backlog is refactoring the whole PlayerSelect and I think we need to discuss that first before doing this change. One of the things we discussed is simplifying the playerselect and always show the actual PlayerIcon instead of the coverart - with good user selectable / customizable player icons it will help a whole lot.

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

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?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants