Layout Improvements

[Dumeng]

A batch of layout and UI improvements:

• Add a tooltip indictor for Volume bar (#407)

• Add line number for song list (#698)

• Use grid to replace flex layout for playlist list view

• Add default placeholder playlist cover

• Update player controller bar to flex layout (#643)

• Minor optimize player main info component (#745)

• Add platform label back for the search results

• Add Toggle Button component for settings

• Add blur effect to lyrics (#617)

• Refactor code structure of the settings page

• Make the settings page responsive

• Dynamically import static assets
  

• Improve responsive design

• Layout cleanup

[listen1]

Thanks for so much work delicated to project. By the way, one pr for one feature is recommended. Easier to merge and modify.

• Add a tooltip indictor for Volume bar (调节音量时显示百分比 #407)

Good to go.

• Add line number for song list (feat:建议给歌单目录歌曲前边加上编号 #698)

Suggstion: Keep same align style for now playing playlist and common playlist.

• Use grid to replace flex layout for playlist list view

Good to go. More elegant way to responsive design👍

• Add default placeholder playlist cover

Question: I notice inline background image uses inline style base64. Will that be performance issue for many images?

• Update player controller bar to flex layout ([建议] 优化下响应式布局，例如将页面缩小后的布局 #643)

This optimaze is necessary. And it's also complicated for design especially in really narrow width screen. I think the layout in narrow screen can be better designed. Or we can limit a min width.

Bug: adjust width of screen, play, next, prev button is not clickable.

• Minor optimize player main info component (is:issue is:open 播放进度条、声音拖动条 点击范围太小，经常点击不到，感谢作者！ #745)

I'm not sure increase playerbar height is for this requirement. It seems too high in my test environment (compare to height of sidebar entries).

• Add platform label back for the search results

Bug: Seems not working.

• Add Toggle Button component for settings

Necessary improvement. I think underline style seems a little strange because seldom design use that besides tab bar.

Style suggestion: change underline style to radio button or use iOS style (different background for highlight)

Style suggestion: change checkbox to button group is harder for users to understand. I recommend to use checkbox and we can change icons to more common checkbox icon as they used in netease/qq application.

• Add blur effect to lyrics (歌词在滚动的时候的渐淡消失的效果 #617)

Blur area seems too large. Maybe we can refer to netease/qq effect to adjust parameter

• Refactor code structure of the settings page

Good to go

• Make the settings page responsive

Good to go

• Dynamically import static assets

Good to go

BTW: I'm not good at design, so these design suggestions are not professional. I think what I can do is find out some style many music player applications are using and try to follow them. It's really hard for me to judge a pretty new style is good for users to understand and use.

[Dumeng]

Suggstion: Keep same align style for now playing playlist and common playlist.

Fixed

Bug: adjust width of screen, play, next, prev button is not clickable.

Fixed

Question: I notice inline background image uses inline style base64. Will that be performance issue for many images? Refer to (Vite docs for static asset)[https://vitejs.dev/config/#build-assetsinlinelimit]

This may makes final html structure a little messy, but I didn't see performance issue for now.

Style suggestion: change underline style to radio button or use iOS style (different background for highlight)

Updated

I'm not sure increase playerbar height is for this requirement. It seems too high in my test environment (compare to height of sidebar entries).

Looks fine for me. Do you have any screenshot can share?

Style suggestion: change checkbox to button group is harder for users to understand. I recommend to use checkbox and we can change icons to more common checkbox icon as they used in netease/qq application.

I attempt makes the style being more unified. I suggest we can use a standalone toggle button style from android design.

Blur area seems too large. Maybe we can refer to netease/qq effect to adjust parameter

The -webkit-mask-image feature is still experimental. Actually, I blur the lyric line by line. What means 'blur area too large'?

[mikelxk]

It seem that the setting page will break if I set zoom level to 150%. The bug only occur when I set auto switch source to true.

The -webkit-mask-image feature is still experimental. Actually, I blur the lyric line by line. What means 'blur area too large'?

I believe it means the blur radius is set too high. Also, I think the lyric should not be blurred when they are selected or scrolled.

[listen1]

About blur effect explain

Image 1. Blur effect from netease(mac) music player

Image 2. Blur effect from PR

There're some differences.

1. Blur area. netease only blur top/bottom small area
2. Blur effect netease only have very strong blur effect on top/bottom

[mikelxk]

Setting Layout still look broken on 150% zoom level for me. Also, when I enable comment, The page is also broken. I've also attached apple music dealing of lyric blur, as I see, the best implementation so far.

[Dumeng]

Setting Layout still look broken on 150% zoom level for me.

This is expected. You screenshot is looks like an ultra-wide window view, so the flex flow is extend horizontal. Refer to this link

And I also implement the blur with the experimental CSS masks feature. I didn't find a better way to implement this gradient effect. Refer to this link.

[mikelxk]

Could you extend the view window for lyric That's the current window size, it seems that I can only see 5 lines of clear text in my current setting, medium font weight and 20px. Also, the highlighted lyric is a little bit under the center of cover art, it would be very great if you could align to the center or above the center since the there's more lyric under.

[listen1]

Sorry for merge delay. This pr is too big to be merged for one time, especially many modification made and features included. It's beyond my ability to ensure all the things go well after merge.

Please submit pr for one feature, or UI adjust, or code refactor. It's easier to test and make further commit.

Thank you for your understanding.

[Dumeng]

I will try to do cherry-picks. But many reviews and modifications are made, I'm not sure this will work well.