Sansan/MusicPlayer
1
0 Fork 0
Code Issues 1 Pull Requests 1 Actions Packages Projects Releases 7 Wiki Activity

Restyle the music player bar
Build / test (push) Successful in 1m11s
Details
Build / build (push) Successful in 1m20s
Details

Browse Source 
The bar is rounded and a little taller, with a round orange play button
and a restart button that lights up orange under the mouse. The icons sit
inside their buttons with room around them, and are one colour, cropped to
their shape. Progress fills in orange, the volume slider gets a speaker
icon, and the buttons say their shortcut keys in their tooltips.

Buttons grow a little under the mouse and shrink while held down, and the
play button pops when it switches between play and pause. ButtonBounce
holds these animations so other buttons can use them too.
This commit is contained in:
Sansan committed 2026-10-09 17:38:38 +02:00
1 parent 78e1facaf0
commit 4a934840f6
23 files changed
+1037 -247
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

tests/data/layout_baseline.json
+273 -210
View File
@@ -1056,71 +1056,80 @@
"Quiz/MusicPlayer": {
"rect": [
64.0,
992.0,
984.0,
1792.0,
71.0
42.0
],
"visible": true
},
"Quiz/MusicPlayer/PlayerBar": {
"rect": [
65.0,
992.0,
1791.0,
32.0
64.0,
984.0,
1792.0,
42.0
],
"visible": true
},
"Quiz/MusicPlayer/PlayerBar/MusicPlayerContainer": {
"rect": [
65.0,
992.0,
1791.0,
32.0
70.0,
988.0,
1772.0,
34.0
],
"visible": true
},
"Quiz/MusicPlayer/PlayerBar/MusicPlayerContainer/MusicPlayerSlider": {
"rect": [
137.0,
1000.0,
1532.0,
158.0,
997.0,
1402.0,
16.0
],
"visible": true
},
"Quiz/MusicPlayer/PlayerBar/MusicPlayerContainer/MusicTimeLabel": {
"rect": [
1673.0,
996.0,
79.0,
23.0
1570.0,
992.0,
120.0,
26.0
],
"visible": true
},
"Quiz/MusicPlayer/PlayerBar/MusicPlayerContainer/PlayTextureButton": {
"Quiz/MusicPlayer/PlayerBar/MusicPlayerContainer/PlayButton": {
"rect": [
65.0,
992.0,
32.0,
32.0
70.0,
988.0,
34.0,
34.0
],
"visible": true
},
"Quiz/MusicPlayer/PlayerBar/MusicPlayerContainer/RestartTextureButton": {
"Quiz/MusicPlayer/PlayerBar/MusicPlayerContainer/RestartButton": {
"rect": [
101.0,
992.0,
32.0,
32.0
114.0,
988.0,
34.0,
34.0
],
"visible": true
},
"Quiz/MusicPlayer/PlayerBar/MusicPlayerContainer/VolumeIcon": {
"rect": [
1700.0,
994.0,
22.0,
22.0
],
"visible": true
},
"Quiz/MusicPlayer/PlayerBar/MusicPlayerContainer/VolumeSlider": {
"rect": [
1756.0,
1000.0,
100.0,
1732.0,
997.0,
110.0,
16.0
],
"visible": true
@@ -4685,71 +4694,80 @@
"Quiz/MusicPlayer": {
"rect": [
64.0,
992.0,
984.0,
1792.0,
71.0
42.0
],
"visible": true
},
"Quiz/MusicPlayer/PlayerBar": {
"rect": [
65.0,
992.0,
1791.0,
32.0
64.0,
984.0,
1792.0,
42.0
],
"visible": true
},
"Quiz/MusicPlayer/PlayerBar/MusicPlayerContainer": {
"rect": [
65.0,
992.0,
1791.0,
32.0
70.0,
988.0,
1772.0,
34.0
],
"visible": true
},
"Quiz/MusicPlayer/PlayerBar/MusicPlayerContainer/MusicPlayerSlider": {
"rect": [
137.0,
1000.0,
1514.0,
158.0,
997.0,
1402.0,
16.0
],
"visible": true
},
"Quiz/MusicPlayer/PlayerBar/MusicPlayerContainer/MusicTimeLabel": {
"rect": [
1655.0,
996.0,
97.0,
23.0
1570.0,
992.0,
120.0,
26.0
],
"visible": true
},
"Quiz/MusicPlayer/PlayerBar/MusicPlayerContainer/PlayTextureButton": {
"Quiz/MusicPlayer/PlayerBar/MusicPlayerContainer/PlayButton": {
"rect": [
65.0,
992.0,
32.0,
32.0
70.0,
988.0,
34.0,
34.0
],
"visible": true
},
"Quiz/MusicPlayer/PlayerBar/MusicPlayerContainer/RestartTextureButton": {
"Quiz/MusicPlayer/PlayerBar/MusicPlayerContainer/RestartButton": {
"rect": [
101.0,
992.0,
32.0,
32.0
114.0,
988.0,
34.0,
34.0
],
"visible": true
},
"Quiz/MusicPlayer/PlayerBar/MusicPlayerContainer/VolumeIcon": {
"rect": [
1700.0,
994.0,
22.0,
22.0
],
"visible": true
},
"Quiz/MusicPlayer/PlayerBar/MusicPlayerContainer/VolumeSlider": {
"rect": [
1756.0,
1000.0,
100.0,
1732.0,
997.0,
110.0,
16.0
],
"visible": true
@@ -11482,71 +11500,80 @@
"Quiz/MusicPlayer": {
"rect": [
64.0,
992.0,
984.0,
1792.0,
71.0
42.0
],
"visible": true
},
"Quiz/MusicPlayer/PlayerBar": {
"rect": [
65.0,
992.0,
1791.0,
32.0
64.0,
984.0,
1792.0,
42.0
],
"visible": true
},
"Quiz/MusicPlayer/PlayerBar/MusicPlayerContainer": {
"rect": [
65.0,
992.0,
1791.0,
32.0
70.0,
988.0,
1772.0,
34.0
],
"visible": true
},
"Quiz/MusicPlayer/PlayerBar/MusicPlayerContainer/MusicPlayerSlider": {
"rect": [
137.0,
1000.0,
1532.0,
158.0,
997.0,
1402.0,
16.0
],
"visible": true
},
"Quiz/MusicPlayer/PlayerBar/MusicPlayerContainer/MusicTimeLabel": {
"rect": [
1673.0,
996.0,
79.0,
23.0
1570.0,
992.0,
120.0,
26.0
],
"visible": true
},
"Quiz/MusicPlayer/PlayerBar/MusicPlayerContainer/PlayTextureButton": {
"Quiz/MusicPlayer/PlayerBar/MusicPlayerContainer/PlayButton": {
"rect": [
65.0,
992.0,
32.0,
32.0
70.0,
988.0,
34.0,
34.0
],
"visible": true
},
"Quiz/MusicPlayer/PlayerBar/MusicPlayerContainer/RestartTextureButton": {
"Quiz/MusicPlayer/PlayerBar/MusicPlayerContainer/RestartButton": {
"rect": [
101.0,
992.0,
32.0,
32.0
114.0,
988.0,
34.0,
34.0
],
"visible": true
},
"Quiz/MusicPlayer/PlayerBar/MusicPlayerContainer/VolumeIcon": {
"rect": [
1700.0,
994.0,
22.0,
22.0
],
"visible": true
},
"Quiz/MusicPlayer/PlayerBar/MusicPlayerContainer/VolumeSlider": {
"rect": [
1756.0,
1000.0,
100.0,
1732.0,
997.0,
110.0,
16.0
],
"visible": true
@@ -15480,71 +15507,80 @@
"Quiz/MusicPlayer": {
"rect": [
64.0,
992.0,
984.0,
1792.0,
71.0
42.0
],
"visible": true
},
"Quiz/MusicPlayer/PlayerBar": {
"rect": [
65.0,
992.0,
1791.0,
32.0
64.0,
984.0,
1792.0,
42.0
],
"visible": true
},
"Quiz/MusicPlayer/PlayerBar/MusicPlayerContainer": {
"rect": [
65.0,
992.0,
1791.0,
32.0
70.0,
988.0,
1772.0,
34.0
],
"visible": true
},
"Quiz/MusicPlayer/PlayerBar/MusicPlayerContainer/MusicPlayerSlider": {
"rect": [
137.0,
1000.0,
1514.0,
158.0,
997.0,
1402.0,
16.0
],
"visible": true
},
"Quiz/MusicPlayer/PlayerBar/MusicPlayerContainer/MusicTimeLabel": {
"rect": [
1655.0,
996.0,
97.0,
23.0
1570.0,
992.0,
120.0,
26.0
],
"visible": true
},
"Quiz/MusicPlayer/PlayerBar/MusicPlayerContainer/PlayTextureButton": {
"Quiz/MusicPlayer/PlayerBar/MusicPlayerContainer/PlayButton": {
"rect": [
65.0,
992.0,
32.0,
32.0
70.0,
988.0,
34.0,
34.0
],
"visible": true
},
"Quiz/MusicPlayer/PlayerBar/MusicPlayerContainer/RestartTextureButton": {
"Quiz/MusicPlayer/PlayerBar/MusicPlayerContainer/RestartButton": {
"rect": [
101.0,
992.0,
32.0,
32.0
114.0,
988.0,
34.0,
34.0
],
"visible": true
},
"Quiz/MusicPlayer/PlayerBar/MusicPlayerContainer/VolumeIcon": {
"rect": [
1700.0,
994.0,
22.0,
22.0
],
"visible": true
},
"Quiz/MusicPlayer/PlayerBar/MusicPlayerContainer/VolumeSlider": {
"rect": [
1756.0,
1000.0,
100.0,
1732.0,
997.0,
110.0,
16.0
],
"visible": true
@@ -23540,71 +23576,80 @@
"Quiz/MusicPlayer": {
"rect": [
64.0,
992.0,
984.0,
1792.0,
71.0
42.0
],
"visible": true
},
"Quiz/MusicPlayer/PlayerBar": {
"rect": [
65.0,
992.0,
1791.0,
32.0
64.0,
984.0,
1792.0,
42.0
],
"visible": true
},
"Quiz/MusicPlayer/PlayerBar/MusicPlayerContainer": {
"rect": [
65.0,
992.0,
1791.0,
32.0
70.0,
988.0,
1772.0,
34.0
],
"visible": true
},
"Quiz/MusicPlayer/PlayerBar/MusicPlayerContainer/MusicPlayerSlider": {
"rect": [
137.0,
1000.0,
1532.0,
158.0,
997.0,
1402.0,
16.0
],
"visible": true
},
"Quiz/MusicPlayer/PlayerBar/MusicPlayerContainer/MusicTimeLabel": {
"rect": [
1673.0,
996.0,
79.0,
23.0
1570.0,
992.0,
120.0,
26.0
],
"visible": true
},
"Quiz/MusicPlayer/PlayerBar/MusicPlayerContainer/PlayTextureButton": {
"Quiz/MusicPlayer/PlayerBar/MusicPlayerContainer/PlayButton": {
"rect": [
65.0,
992.0,
32.0,
32.0
70.0,
988.0,
34.0,
34.0
],
"visible": true
},
"Quiz/MusicPlayer/PlayerBar/MusicPlayerContainer/RestartTextureButton": {
"Quiz/MusicPlayer/PlayerBar/MusicPlayerContainer/RestartButton": {
"rect": [
101.0,
992.0,
32.0,
32.0
114.0,
988.0,
34.0,
34.0
],
"visible": true
},
"Quiz/MusicPlayer/PlayerBar/MusicPlayerContainer/VolumeIcon": {
"rect": [
1700.0,
994.0,
22.0,
22.0
],
"visible": true
},
"Quiz/MusicPlayer/PlayerBar/MusicPlayerContainer/VolumeSlider": {
"rect": [
1756.0,
1000.0,
100.0,
1732.0,
997.0,
110.0,
16.0
],
"visible": true
@@ -36647,71 +36692,80 @@
"Quiz/MusicPlayer": {
"rect": [
64.0,
992.0,
984.0,
1792.0,
71.0
42.0
],
"visible": true
},
"Quiz/MusicPlayer/PlayerBar": {
"rect": [
65.0,
992.0,
1791.0,
32.0
64.0,
984.0,
1792.0,
42.0
],
"visible": true
},
"Quiz/MusicPlayer/PlayerBar/MusicPlayerContainer": {
"rect": [
65.0,
992.0,
1791.0,
32.0
70.0,
988.0,
1772.0,
34.0
],
"visible": true
},
"Quiz/MusicPlayer/PlayerBar/MusicPlayerContainer/MusicPlayerSlider": {
"rect": [
137.0,
1000.0,
1514.0,
158.0,
997.0,
1402.0,
16.0
],
"visible": true
},
"Quiz/MusicPlayer/PlayerBar/MusicPlayerContainer/MusicTimeLabel": {
"rect": [
1655.0,
996.0,
97.0,
23.0
1570.0,
992.0,
120.0,
26.0
],
"visible": true
},
"Quiz/MusicPlayer/PlayerBar/MusicPlayerContainer/PlayTextureButton": {
"Quiz/MusicPlayer/PlayerBar/MusicPlayerContainer/PlayButton": {
"rect": [
65.0,
992.0,
32.0,
32.0
70.0,
988.0,
34.0,
34.0
],
"visible": true
},
"Quiz/MusicPlayer/PlayerBar/MusicPlayerContainer/RestartTextureButton": {
"Quiz/MusicPlayer/PlayerBar/MusicPlayerContainer/RestartButton": {
"rect": [
101.0,
992.0,
32.0,
32.0
114.0,
988.0,
34.0,
34.0
],
"visible": true
},
"Quiz/MusicPlayer/PlayerBar/MusicPlayerContainer/VolumeIcon": {
"rect": [
1700.0,
994.0,
22.0,
22.0
],
"visible": true
},
"Quiz/MusicPlayer/PlayerBar/MusicPlayerContainer/VolumeSlider": {
"rect": [
1756.0,
1000.0,
100.0,
1732.0,
997.0,
110.0,
16.0
],
"visible": true
@@ -41243,71 +41297,80 @@
"Quiz/MusicPlayer": {
"rect": [
64.0,
992.0,
984.0,
1792.0,
71.0
42.0
],
"visible": true
},
"Quiz/MusicPlayer/PlayerBar": {
"rect": [
65.0,
992.0,
1791.0,
32.0
64.0,
984.0,
1792.0,
42.0
],
"visible": true
},
"Quiz/MusicPlayer/PlayerBar/MusicPlayerContainer": {
"rect": [
65.0,
992.0,
1791.0,
32.0
70.0,
988.0,
1772.0,
34.0
],
"visible": true
},
"Quiz/MusicPlayer/PlayerBar/MusicPlayerContainer/MusicPlayerSlider": {
"rect": [
137.0,
1000.0,
1514.0,
158.0,
997.0,
1402.0,
16.0
],
"visible": true
},
"Quiz/MusicPlayer/PlayerBar/MusicPlayerContainer/MusicTimeLabel": {
"rect": [
1655.0,
996.0,
97.0,
23.0
1570.0,
992.0,
120.0,
26.0
],
"visible": true
},
"Quiz/MusicPlayer/PlayerBar/MusicPlayerContainer/PlayTextureButton": {
"Quiz/MusicPlayer/PlayerBar/MusicPlayerContainer/PlayButton": {
"rect": [
65.0,
992.0,
32.0,
32.0
70.0,
988.0,
34.0,
34.0
],
"visible": true
},
"Quiz/MusicPlayer/PlayerBar/MusicPlayerContainer/RestartTextureButton": {
"Quiz/MusicPlayer/PlayerBar/MusicPlayerContainer/RestartButton": {
"rect": [
101.0,
992.0,
32.0,
32.0
114.0,
988.0,
34.0,
34.0
],
"visible": true
},
"Quiz/MusicPlayer/PlayerBar/MusicPlayerContainer/VolumeIcon": {
"rect": [
1700.0,
994.0,
22.0,
22.0
],
"visible": true
},
"Quiz/MusicPlayer/PlayerBar/MusicPlayerContainer/VolumeSlider": {
"rect": [
1756.0,
1000.0,
100.0,
1732.0,
997.0,
110.0,
16.0
],
"visible": true