search

swingmx / swingmusic

Swing Music is a beautiful, self-hosted music player for your local audio files. Like a cooler Spotify ... but bring your own music.
https://swingmx.com
MIT License
666 stars 41 forks source link

Small css change request #206

Closed Simonh2o closed 2 months ago

Simonh2o commented 3 months ago

Could you change the background color of the div 'now-playing-track-indicator' to #fefefe from #ffffffde? Currently it doesn't have the same color as the now-playing-indicator gif and looks clipped into place. Screenshot 2024-04-08 041826

cwilvx commented 3 months ago

@Simonh2o

Thanks for the heads up. I'll fix that.

Thank you v much.

Simonh2o commented 3 months ago

The gif and background seem to have the same color when the song is paused, to light grey instead of white. image

Simonh2o commented 3 months ago

It would also be nice if the song you're currently listening to was in the page title, instead of showing the current page you're on? image I see an argument for both, maybe it could be changed by a toggle in settings.

Simonh2o commented 2 months ago

Some additional changes/improvements (in my opinion):

  1. Change div '.b-bar .center .time span' to prevent bg(the div) from moving when the numbers change, also padding for improved spacing: font-variant-numeric: tabular-nums; padding: 1px 4px; old: image new: image

  2. Tooltip on timeline hover with exact time: image

  3. More compact volume area with exact volume level tooltip: 'dialog rounded-sm pad-sm' bottom: 50px; padding: 0 12px; height: 34px; image Vertical sketch:
    image

  4. Maybe increase the flex gap between cover and text a bit more (for more breathing room), from 8px to 10px or even 12px? image

  5. Move the main buttons higher up and away from the bottom of the page? old: image new:
    image

I also find the scrollbar to be quite small and sometimes hard to grab (would be cool if the webkit scrollbars were only changed for windows/chrome (I feel like it impacts scroll performance on android/mac on chrome). image Thoughts on this one? https://codepen.io/Spemer/pen/baoKPK

cwilvx commented 2 months ago

Hi @Simonh2o

Thanks for the good suggestions. Please keep them coming! We appreciate your contributions and we'll use them to improve your experience in future releases.

The codepen looks great. I think it would be a great replacement for the current webkit scrollbar.

PS: If you'd like to implement the suggestions here or others, feel free to open a PR on the webclient repo or drop me a message on Telegram if you have any questions or just wanna chat. I reply swiftly. Thank you.

Simonh2o commented 2 months ago

Sadly don't use telegram at all, and it's not feasible to sign up with a temp number. I tried cloning the webclient repo before but couldn't get it started (lots of errors), assuming you also require the backend? I will try again.

Simonh2o commented 2 months ago

It's starting up without issues now, but stuck at selecting directory path, so not getting anywhere. image image

cwilvx commented 2 months ago

Hi @Simonh2o

I've seen the root dir problem on my local build, looks like a problem with the backend. I'll fix that and get back to you.

How do you feel about Discord? I can setup a room there if you are ok with it

cwilvx commented 2 months ago

@Simonh2o

The root dir problem has been fixed by the latest commit on the web client repo. Just git pull that repo and rerun yarn dev

Simonh2o commented 2 months ago

That's great, will have a look. Discord is fine.

Simonh2o commented 2 months ago

Still broken on windows btw, can't browse to local folder (different drive)

cwilvx commented 2 months ago

@Simonh2o

https://discord.com/invite/CV7zYqmY