[ Player Controls ] Proposed Stream Player Style Change - Remove icon backgrounds and rounded corners

[tonyzeoli]

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

I feel that the rounded corners of the player controls are causing the icons and play/pause button to not be as pronounced. The background padding is is not ideal with the rounded edges.

I went through a couple of competitor sticky player bars, and a few popular ones had no backgrounds on player controls while others had sqauare backgrounds.

It's difficult having the light gray backgrounds anyway, because the user may have a light gray or white full player background color and the grey color would get washed out. It's very limiting. There are no controls to change the background colors, but if there were, it's probably too much anyway

I just feel like that grey backgorund color makes them all look muddy and fuzzy and not sharp and distinct.

Describe the solution you'd like
A clear and concise description of what you want to happen.

I'd like the icons to be sharper and crisper - stand on their own without backgrounds and rounded corners. Each icon and the volume control can have a rollover color and active state color set in the Settings area.

Here's an example from https://sonaar.io/mp3-audio-player-pro/?ref=164

Here's another from SoundCloud.

Here's another from MixCloud

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

I'm considering keeping the backgrounds of the icons but making them square and adding slightly more padding to make sure the icon does not look pressed against the sides of the box they are in.

Additional context
Add any other context or screenshots about the feature request here.

[majick777]

@tonyzeoli Just want to clarify as I think when you say "background color" for the icon you are meaning the 50% transparent edges? The intention of these is to show through the player state color on playing, but also to blend with the background of the element (bar or page) otherwise.

As there is already an option for square or rounded or circular buttons, when you say sharper and crisper I think the easiest solution would be to add an option for turning the transparent edges on or off. That way it becomes a style choice between the solid or blended option. (In the solid option the player state will still show through the fully transparent center.)

[tonyzeoli]

That sounds like a plan. I just think a lot of modern players are very simple stylistically and, at first glance, I didn’t realize they were transparent at all. It’s not obvious, even when the background is dark. I also feel that it woukd get lost over white or light grey player backgrounds but haven’t tested what that looks like yet. I’ll do that during my working time tonight. Sent from Gmail Mobile

…

On Tue, Apr 22, 2025 at 7:55 PM majick777 ***@***.***> wrote: @tonyzeoli <https://github.com/tonyzeoli> Just want to clarify as I think when you say "background color" for the icon you are meaning the 50% transparent edges? The intention of these is to show through the player state color on playing, but also to blend with the background of the element (bar or page) otherwise. As there is already an option for square or rounded or circular buttons, when you say sharper and crisper I think the easiest solution would be to add an option for turning the transparent edges on or off. That way it becomes a style choice between the solid or blended option. (In the solid option the player state will still show through the fully transparent center.) — Reply to this email directly, view it on GitHub <#17 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AA65WOZJY4CQYKQONJXTABD223JIPAVCNFSM6AAAAAB3UQOLXKVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDQMRSG4ZTONBTGQ> . You are receiving this because you were mentioned.Message ID: ***@***.***> *majick777* left a comment (netmix/stream-player#17) <#17 (comment)> @tonyzeoli <https://github.com/tonyzeoli> Just want to clarify as I think when you say "background color" for the icon you are meaning the 50% transparent edges? The intention of these is to show through the player state color on playing, but also to blend with the background of the element (bar or page) otherwise. As there is already an option for square or rounded or circular buttons, when you say sharper and crisper I think the easiest solution would be to add an option for turning the transparent edges on or off. That way it becomes a style choice between the solid or blended option. (In the solid option the player state will still show through the fully transparent center.) — Reply to this email directly, view it on GitHub <#17 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AA65WOZJY4CQYKQONJXTABD223JIPAVCNFSM6AAAAAB3UQOLXKVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDQMRSG4ZTONBTGQ> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[majick777]

I definitely think it would be good to adding more styling options like this, just need to determine what they are and what else we could target. Lots of fancy things can be done with CSS of course, including animations, but we should make sure we have all the basic options like this covered.

It's probably also possible to remove the 50% transparency from the images themselves and set it as an intermediary background instead... that way it could be changed from the 50% value via CSS as another option, which can't be done with just an icon image. Because for example 25% or 75% might work better depending on foreground icon color and bar background color and dark vs light, and we can just keep 50% as the default to not affect existing sites.

[tonyzeoli]

@majick777 Sounds like a good plan. Thanks for thinking it through. Just want to make sure it’s simple to advanced snd not advanced with no way to go back to simple. It is useful to review how others are handling these issues. Check the Fusebox player too. That’s another example but I couldn’t get their website to display the demo for some reqsin. Sent from Gmail Mobile

…

On Tue, Apr 22, 2025 at 8:46 PM majick777 ***@***.***> wrote: I definitely think it would be good to adding more styling options like this, just need to determine what they are and what else we could target. Lots of fancy things can be done with CSS of course, including animations, but we should make sure we have all the basic options like this covered. It's probably also possible to remove the 50% transparency from the images themselves and set it as an intermediary background instead... that way it could be changed from the 50% value via CSS as another option, which can't be done with just an icon image. Because for example 25% or 75% might work better depending on foreground icon color and bar background color and dark vs light, and we can just keep 50% as the default to not affect existing sites. — Reply to this email directly, view it on GitHub <#17 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AA65WO6VIVKM6E5E4KPQMBL223PGNAVCNFSM6AAAAAB3UQOLXKVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDQMRSG44TEMBTG4> . You are receiving this because you were mentioned.Message ID: ***@***.***> *majick777* left a comment (netmix/stream-player#17) <#17 (comment)> I definitely think it would be good to adding more styling options like this, just need to determine what they are and what else we could target. Lots of fancy things can be done with CSS of course, including animations, but we should make sure we have all the basic options like this covered. It's probably also possible to remove the 50% transparency from the images themselves and set it as an intermediary background instead... that way it could be changed from the 50% value via CSS as another option, which can't be done with just an icon image. Because for example 25% or 75% might work better depending on foreground icon color and bar background color and dark vs light, and we can just keep 50% as the default to not affect existing sites. — Reply to this email directly, view it on GitHub <#17 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AA65WO6VIVKM6E5E4KPQMBL223PGNAVCNFSM6AAAAAB3UQOLXKVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDQMRSG44TEMBTG4> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[tonyzeoli]

@majick777 Here are some screenshots of the player when the background is grey. You can see on load that all items are similar gray until you activate the play button control, but only that one turns red to correspond with the setting.

I think other control icons need slightly more padding all around because, for example, the mute icon is bumped right up against the left edge of its background. It's these tiny details that will make our player stand out. Someone can use the Sonaar Player for $49 a month, but I don't think that offers a live stream. The Sonaar player is pretty nice.

We also talked about the SQUARE option instead of the rounded corner, so that would be cool to see.

[tonyzeoli]

@majick777 circling back on my last post.