LB-1702: Added Volume Control Slider to BrainzPlayer

[Suvid-Singhal]

Problem

Earlier, ListenBrainz used to play music in max volume by default. This feature aims to let users control the volume of music in ListenBrainz itself.
The feature request ticket was LB-1702.

Solution

I created an input range component. Also added some hooks and states. The UI is basic as of now and can be improved further I believe.
The demo is attached below:

simplescreenrecorder-2024-12-27_17.45.19.mp4

Action

I tested the new feature for YouTube and Spotify but couldn't test it for SoundCloud and Apple Music. I couldn't test it for SoundCloud as they are not accepting new application requests right now so couldn't get the API key. Couldn't test it for Apple Music as I don't have Apple Music premium 😅

If anyone could test it for these two platforms it would be great. Also, please suggest UI changes, if any.

P.S. It's my biggest open-source contribution till date. Thanks @anshg1214 for guiding and supporting me :)

[anshg1214]

Thank you for taking up this ticket. The functionality works as expected. But there are some improvements which can be done here.

[MonkeyDo]

UI looks good, thanks.
I took another look at the code and have a bit more feedback, sorry for trickling the feedback bit by bit!

[MonkeyDo]

You found a good way to do volume setting in componentDidUpdate, albeit with a small prop check required. Nice work on that front!

However I think the UI needs some more work.

The input on the player bar does not look very good on desktop sizes. It is very wide for no reason, and its placement leaves to be desired. Not sure if you looked at it in desktop size, but it's massive and bright colored, it makes it look like a progress bar...

Usually, what I expect from this type of media player is one of two things:

• a volume button, which on hover or click will show a vertical range input above it
  
• a small horizontal range input like what you see on youtube, spotify, apple music in their respective player controls
  
  
  

Considering we already show the player queue by sliding it up (click the stacked horizontal bars in the player), maybe the first solution makes the most sense in this case. It would also work for smaller screen sizes more easily, as we would only need space for one extra volume icon in the player bar:

Do let me know if you have questions or if you are unsure about anything, better to talk first to figure things out before implementing :)

[Suvid-Singhal]

Made all the required changes. It now looks like this:

2025-01-16.13-34-22.mp4

[MonkeyDo]

OK, I have a bunch more small suggestions, don't hate me :p
I think after this batch we'll be good, solid and consistent.

Here's where i ended up at:

Thanks for your patience!

[Suvid-Singhal]

Implemented all the changes :)
Thanks a lot for such detailed feedbacks on every commit. I learnt a lot by implementing this feature. Still have to read about that cool rtl CSS trick :)
Thanks a lot @MonkeyDo and @anshg1214 for for your patience and helping me out.

Hovever, I feel there is a slight problem:

The volume bar is visible like this after the changes on my browser (firefox). Some part of the volume bar goes below into the brainzplayer. So, if I have to mute the song then I have to slide it into brainzplayer and it doesn't look good. I tried increasing margin-bottom but it didn't work. Any suggestions for fixing it.
Other than this, I feel it looks really good now and feels like an integral part of brainzplayer.

[MonkeyDo]

OK, I see what I forgot to copy over from my experimentations :)

In the .volume css class, remove the height declaration entirely>
Should be left with a good looking input:

[Suvid-Singhal]

Was having this issue after removing height declaration. But I fixed it by changing bottom: -100px; to bottom: -12em;

Now I feel that it looks perfect on testing. 😅

[MonkeyDo]

Thanks for the good work!
Everything looking fine now 🚀