New toolbar design specification

[clsid2]

In near future we plan to replace the current toolbar layout with a new one that contains more buttons. There will also be options to customize which buttons are visible in the player GUI.

Below is a specification for graphics designers to create new toolbar designs.

Once we have a few good looking designs, we will start work on moving to the new layout.

Image format

SVG or PNG

SVG is preferred because that allows better scaling.

Size

You must create four versions of the toolbar image with buttons in four different sizes:
24x24 / 32x32 / 48x48 / 64x64

The reason for having multiple sizes is to give the end user a good looking toolbar regardless of their screen size and Windows DPI settings.
It also give you as designer more freedom to use more/less details in the button designs depending on the button size.

Image layout

Each toolbar image contains 4 rows of 26 buttons.
Row 1: buttons for light theme, enabled/active state
Row 2: buttons for light theme, disabled/inactive state
Row 3: buttons for dark theme, enabled/active state
Row 4: buttons for dark theme, disabled/inactive state

Button order

1. Play
2. Pause
3. Stop
4. Previous (file/chapter)
5. Next (file/chapter)
6. Audio (stream selection)
7. Subtitles (stream selection)
8. Decrease playback speed
9. Increase playback speed
10. Framestep
11. Open (file/url)
12. Options
13. Toggle fullscreen
14. Toggle playlist
15. Toggle shuffle
16. Toggle repeat
17. Seek backwards
18. Seek forwards
19. Information (will likely get used to open MediaInfo or file properties)
20. Close player
21. Generic button 1 (these buttons are reserved for future ability of assigning custom actions)
22. Generic button 2 (these buttons can have number 1-4, letters A-D, or just some other unique icon)
23. Generic button 3
24. Generic button 4
25. Sound enabled (active state) + Sound enabled (low volume) (inactive state)
26. Sound muted (active state) + Sound unavailable (inactive state)

As mentioned above, the first/third row of buttons is for when a button is active or when the option is enabled. Second/fourth row is when the button action is disabled/unavailable or when the corresponding option is disabled.

In case of toggle fullscreen the button should reflect the state it moves to when clicked. So if fullscreen is currently inactive, the button should mean "go to fullscreen" and vice versa.

Button discussion topic

Any discussions about buttons should be in the topic linked above.

The button discussion topic also already contains a few example designs.

[adipose]

Looks good. I may suggest that optional 128x128 or even arbitrary button sizes could be allowed.

For SVG I think a single size is fine?

[clsid2]

For SVG, having different sizes gives more freedom with the level of detail.

[adipose]

True. I suppose you could simply reuse the same SVG 4 times if you had simple shapes.

[clsid2]

I have no intention of making further changes to the toolbar in the future. Current specification should be enough to cover all common needs.

Any newly added functionality in future will simply have no button, or must be assigned to one of the generic buttons.

[adipose]

I have no intention of making further changes to the toolbar in the future. Current specification should be enough to cover all common needs.

Any newly added functionality in future will simply have no button, or must be assigned to one of the generic buttons.

Fair enough.

[adipose]

See

https://github.com/adipose/mpc-hc/blob/patch510/src/mpc-hc/res/buttons.svg

I think we may have one additional button available.

[TaxicabMessiah]

I could make a batch with this color scheme if people like that look. On the higher resolution versions Ill have the bevel on the edges like a remote.

[Marat-Tanalin]

Current specification should be enough to cover all common needs.

I suspect in “the same SVG 4 times”, “4” was related to “times” (“four times”) and not used as SVG version.

[adipose]

Yes. I meant that a single svg file could be copied 3 times to cover all required resolutions.

[adipose]

@clsid2

Should I assume that 16pixel toolbars are no longer valid, and the minimum button size is now 24 pixels?

[clsid2]

I do know that a few people might still use the ancient legacy toolbar. But that is probably more related to its design, rather than its tiny size. I don't mind if it gets removed. It might even force people to design a modern replacement.

Allowing size 16 in settings could be useful for those who use DPI scaling and want to keep buttons small. E.g. 16x200%=32 display size.

Is there a real need to disallow (render) sizes below 24? We don't have to guarantee that all buttons have good visual quality with default toolbar design (24 scaled to 16). I am sure that eventually there will be several good alternative designs to choose from for users that are simple enough to look decent at tiny size.

[adipose]

I can leave the minimum 16. My thought was that 16pixel at 100% would look bad.

The existing svg is designed for 16 pixels. I have extended it to work with the new buttons and it seems fine at 16 pixels.

We might also just say that the tb should have a 16 pixel version--but 16 is pretty hard to work with. I don't know how much we want to cater to those at 100% as high dpi is pretty standard now.