Player menu enhancements

[radiohe4d]

Summary

The aim with this PR is to reduce visual complexity and increase the readability of the player count badges.

Notes

• Improve readability of player count badge.
• Hide the player menu subtitle when 'off' or 'empty queue'.
• Remove space, height change and focus/hover colour change of the 'all players' panel.
• Only show power button when player is off.
  • Some players, like the CCA's, only have the power button when off. When they are on, the context menu should be sufficient if users want to manually turn off the player.

Photos

Empty Queues (before then after)

Music Queued (before then after)

[marcelveldt]

Can't we make the player count like a thin circle with the badge in it ? Now the count feels a bit detached somehow

[radiohe4d]

I did try it with the line but it then was slightly harder to read and makes the whole button look much bigger and unbalanced.

I'll mock it up again and show a side by side.

[radiohe4d]

Initially it looked odd without the circle, but after using it for a day, the no-circle version has felt more normal and comfortable to read, especially on larger screens.

Also the font never quite lines up correctly in the circle. You can see 4 looks off here.

[marcelveldt]

yeah, I think you're right - the circle looks a bit wobbly

[stvncode]

For me, having the circle background blue is a good solution. We need to see it. In black, you don't even see it (will be even worse in light mode i think) and same with a circle, it looks a bit weird imo.
@Erioldoesdesign, what is your take on this ?

[Erioldoesdesign]

Thanks for the ping @stvncode , I would have missed this!

In reference to this screen and it's changes:

1. I like the removal of the blue background for the numbers of players in a group. I think it looks too much like a notification UI and not a click/action. I think perhaps it needs to actually look like a button/expandable section which might mean, moving where the speaker group icon is placed so that there is more space. Possibly below the volume slider. I think the likely solution here is a large UI change/edit than the existing circle + number + background/no background.
2. I don't know if there's more value in removing the text 'No items in the queue'. Can you elaborate why you think this is essential? My main concern here is while i know Music Assistant isn't best set up for screen readers and accessibility, removing critical status text like this makes it even less accessible than before and I don't think removing accessibility text that indicates status to 'make a UI less cluttered/cleaner/less visual complexityetc.' is justified but i'm interested in hearing good middle ground options/suggestions.
   The above being said, i do recognise that when you have an empty gap here, it does becomes more immediately clear when you do have queued up music present in the space. I suppose I would not resist the changes for the empty space being merged but i still have some big accessibility concerns with removing 'No items in the queue' text.

[radiohe4d]

Hi @Erioldoesdesign good to meet you, and thanks for the feedback :)

For point 1:
Absolutely agree, the button opens the volume sliders below and it would be great to have it closer to the functionality. I've found when closing the sliders it feels a little unnatural to click that button again.
The blue badge looks nice, but it does give me that "its a notification, go and click it" reaction every time I see it.
We already have some players with the drop down arrow inline with the main volume, its possible that could be used and the number incorporated there.
Either way, I didn't want to change too much by moving it so hoped a middle ground of increasing the readability of the number (with the blue I cant read it on my phone or laptop at all) would be a small step forward.

For point 2:
That's a really great point, this does decrease the accessibility in favour of a small visual clear up.
My thought process is basically that whether there are no queued items, or the player is off, isn't really needed information. There's either music queued and ready, or there isn't. This menu has a lot of information, especially with lots of different players in different states. Making the "off/no queue" players as flat and simple as possible makes them easier to identify or to ignore.
What I could do is instead of hiding the div text element completely, is remove the text and put it into the aria attribute. That way screen readers will continue to work and better inform those that need it of the state of the player.

[Erioldoesdesign]

Hi @Erioldoesdesign good to meet you, and thanks for the feedback :)

For point 1: Absolutely agree, the button opens the volume sliders below and it would be great to have it closer to the functionality. I've found when closing the sliders it feels a little unnatural to click that button again. The blue badge looks nice, but it does give me that "its a notification, go and click it" reaction every time I see it. We already have some players with the drop down arrow inline with the main volume, its possible that could be used and the number incorporated there. Either way, I didn't want to change too much by moving it so hoped a middle ground of increasing the readability of the number (with the blue I cant read it on my phone or laptop at all) would be a small step forward.

For point 2: That's a really great point, this does decrease the accessibility in favour of a small visual clear up. My thought process is basically that whether there are no queued items, or the player is off, isn't really needed information. There's either music queued and ready, or there isn't. This menu has a lot of information, especially with lots of different players in different states. Making the "off/no queue" players as flat and simple as possible makes them easier to identify or to ignore. What I could do is instead of hiding the div text element completely, is remove the text and put it into the aria attribute. That way screen readers will continue to work and better inform those that need it of the state of the player.

Hi hii 👋 lovely to meet you

1. I totally understand and i think we agree on the difficulties re. the speaker icon + not-notification-but-looks-like-a-notification button and how it opens something contextually distant from it below. I do think what you've done is an improvement away from that but i also know that we've had conversations in the music assistant team that if we remove the blue that users might never click there to then 'discover' the grouped players UI. It's tricky problem that for sure needs some deep thought and experiementation.
2. Happy for the text to come up under the aria attribute for accessibility and to be remove for the visual UI :)))

Thank you for this PR and very important discussion re. the player group UI