ToDo: toolbar improvements

[clsid2]

• Remove separators between buttons? They don't look good with certain toolbars.
• Maybe replace default toolbar with this one
• Apply toolbar size option also to external SVG toolbar
• Add advanced option to hide the speed buttons and framestep button

[exuvo]

Please don't fuck with the default toolbar, the one you linked is less readable than the current default due to the hollow centers with thin lines. At least leave a setting so i can restore it to the current look.

[techfisha]

Fluent UI toolbar is good and remove separators between buttons is reasonable.

I personally think the main problem that affects the visual perception is seek bar and volume bar, They are both outdated with the Fluent style toolbar in the light theme. Are there any future plans for it? After all, we can easily change the style of the toolbar through external files.

[butterw]

• I still mostly use legacy toolbar + default light theme. It has a nice classic look and on 1080p display it allows for smaller icons.

• Neither legacy or new built-in toolbar looks good in dark mode. For the svg toolbar, part of the problem is that it is displayed in white255 which is too bright (this is also a problem more generally for all text displayed in the mpc-hc interface in dark mode, for comparison github dark mode barely goes above grey200. Mpc-be using grey185 with the dark-menu option does much better).

In dark mode the fluent-UI toolbar_dark.svg looks much better IMO. I don't think it's meant to be used in light mode ?

• The minimum toolbar in the interface is 16, I think it should be possible to go lower with fluent-UI.
• An option to hide non essential buttons and the separation bars would be nice. While modifying an external png toolbar is straightforward using common tools, svg seems less accessible.

[adipose]

I have some ideas for the toolbar. I haven't gotten around to implementing any, yet, but I wanted dynamic options (we discussed having buttons 1, 2, 3 to assign to any action). What I would like to see ideally is:

1. All (or most) buttons can be hidden.
2. Additional custom buttons can be added.
3. Existing toolbars themes supported for the "known" buttons.
4. Additional buttons supported by either a windows button style, or (if supported in theme) additional toolbar art.
5. Text labeled buttons via font rendering (maximum flexibility)

The toolbar+ files could contain any number of icons that could be selected by the user for each custom button. If the button is missing when switching themes, the button could either disappear or just show a generic "missing" icon.

I don't know if any or all of this will ever be done, but that's what I had thought of so far.

[clsid2]

If would not mind of the old bmp/png toolbar support would be dropped to simplify things, and replaced with just new SVG toolbars. I am sure people could make a few good looking ones for us.

[MadokaAyukawa]

I am excited to see that additional custom buttons may be supported. I have always wanted to add audio and subtitle buttons to more easily select these tracks.

[clsid2]

You can also already easily toggle tracks by pressing A and S.

[MadokaAyukawa]

Yes, that's what I do now. But toggling through subtitle tracks is not that efficient if the file has a lot of them. If I want to go from Traditional Chinese back to Simplified Chinese, toggling is not my preferred option.

Video: MPEG4 Video (H264) 960x540 29.97fps [V: h264 high L3.1, yuv420p, 960x540 [default]]
Audio: DD+ 48000Hz stereo 128kbps [A: Korean [kor] (eac3, 48000 Hz, stereo, 128 kb/s)]
Subtitle: UTF-8 [S: English [eng] (subrip)]
Subtitle: UTF-8 [S: Arabic [ara] (subrip)]
Subtitle: UTF-8 [S: Chinese Simplified [chi] (subrip)]
Subtitle: UTF-8 [S: Chinese Traditional [chi] (subrip)]
Subtitle: UTF-8 [S: Croatian [hrv] (subrip)]
Subtitle: UTF-8 [S: Czech [cze] (subrip)]
Subtitle: UTF-8 [S: Danish [dan] (subrip)]
Subtitle: UTF-8 [S: Dutch [dut] (subrip)]
Subtitle: UTF-8 [S: Finnish [fin] (subrip)]
Subtitle: UTF-8 [S: French [fre] (subrip)]
Subtitle: UTF-8 [S: German [ger] (subrip)]
Subtitle: UTF-8 [S: Greek [gre] (subrip)]
Subtitle: UTF-8 [S: Hebrew [heb] (subrip)]
Subtitle: UTF-8 [S: Hungarian [hun] (subrip)]
Subtitle: UTF-8 [S: Indonesian [ind] (subrip)]
Subtitle: UTF-8 [S: Italian [ita] (subrip)]
Subtitle: UTF-8 [S: Japanese [jpn] (subrip)]
Subtitle: UTF-8 [S: Malay [may] (subrip)]
Subtitle: UTF-8 [S: Norwegian Bokmal [nob] (subrip)]
Subtitle: UTF-8 [S: Polish [pol] (subrip)]
Subtitle: UTF-8 [S: Portuguese [por] (subrip)]
Subtitle: UTF-8 [S: Brazilian Portuguese [por] (subrip)]
Subtitle: UTF-8 [S: Romanian [rum] (subrip)]
Subtitle: UTF-8 [S: Russian [rus] (subrip)]
Subtitle: UTF-8 [S: Spanish [spa] (subrip)]
Subtitle: UTF-8 [S: European Spanish [spa] (subrip)]
Subtitle: UTF-8 [S: Swedish [swe] (subrip)]
Subtitle: UTF-8 [S: Thai [tha] (subrip)]
Subtitle: UTF-8 [S: Turkish [tur] (subrip)]
Subtitle: UTF-8 [S: Vietnamese [vie] (subrip)]
Subtitle: UTF-8 [S: No subtitles]

[clsid2]

Buttons would do exactly the same. If you want a menu, right-click on the video.

[MadokaAyukawa]

My mistake then, as I was imagining the buttons giving direct access to the audio/subtitle selection menus.

[mselmanyildirim]

Option to select different toolbar size for windowed and full-screen modes would be useful, IMHO. Or ability to use different sets of pngs/bmps for two modes, if they exist in the main folder..

[adipose]

Option to select different toolbar size for windowed and full-screen modes would be useful, IMHO. Or ability to use different sets of pngs/bmps for two modes, if they exist in the main folder..

The toolbars could scale between a few sizes depending on the size of the window. Especially if SVG that might be easy to support.

[gordonfreeman01]

Having a more dynamic toolbar (e.g. SVG-based icons) could open the door to users adding the buttons they want as well (seems that was already implied earlier, just adding that I need that feature). Would love to have a repeat, show playlist and subtitle toggle buttons in the toolbar for example!

[ale5000-git]

Personally the only things that don't like are the volume slider and the position slider. Is there a possibility to change these (without dark theme)?

[clsid2]

A light color version of the dark theme might be added in the future.

[ale5000-git]

I noticed that when the Dark Theme is enabled the external toolbar image isn't loaded, is there an option to enable this?

[clsid2]

Change filename to "toolbar_dark"

[adipose]

https://github.com/clsid2/mpc-hc/pull/1002

[Soberia]

This is modified version of Simple MPC-HC Toolbar by MadAkella and I think it's time for more modern default toolbar.

That would be great if only one file used for toolbar and not separate toolbar.svg and toolbar_dark.svg files for different themes. Currently all colors are overwritten by white color for toolbar_dark.svg! Toolbar designer should use compatible colors that looks good on both light and dark themes or provide optional styles which then should be selected dynamically.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640">
  <style>
    .light {stroke: black; fill: black}
    .dark {stroke: white; fill: white}
  </style>
  <circle class="light" cx="320" cy="320" r="100"/>
</svg>

toolbar.svg

[bibsp]

Writing some ideas + some fixes needed.

Ideas: 1. Good idea to remove separators & framestep button. 2. Remove speaker icon from statusbar.

Fixes: 1. All toolbar buttons are misplaced vertically. They are not at the middle. a) From play to mute/unmute buttons are placed one step up from mid point. b) Volume slider is placed two steps up from mid point. 2. Volume slider horizontal position does not match the same logic as the left side. Look at Play Button and Playing [H/W]. They are at same line. So the volume slider end should be at same line with the speaker icon or video lenght text (if speaker icon is removed). 3. [Light theme only] Here when clicking on all toolbar buttons, they are moving, means they are giving clicking effect. Remove that effect from light theme.

After all these, implement everything similar in light theme. Means both the themes will be exact similar but with different colour theme I will provide RGB values of those colours if you need. Or use different colour if you have better colour ideas in your mind.

[adipose]

This is modified version of Simple MPC-HC Toolbar by MadAkella and I think it's time for more modern default toolbar.

That would be great if only one file used for toolbar and not separate toolbar.svg and toolbar_dark.svg files for different themes. Currently all colors are overwritten by white color for toolbar_dark.svg! Toolbar designer should use compatible colors that looks good on both light and dark themes or provide optional styles which then should be selected dynamically.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640">

  <style>

    .light {stroke: black; fill: black}

    .dark {stroke: white; fill: white}

  </style>

  <circle class="light" cx="320" cy="320" r="100"/>

</svg>

toolbar.svg

You can avoid the dark theme overwriting the colors with white, depending on how you name the file. But the new design will get rid off auto recoloring.

[adipose]

3. [Light theme only] Here when clicking on all toolbar buttons, they are moving, means they are giving clicking effect. Remove that effect from light theme.

When I designed the original "dark" themed draw for the toolbar, I disabled the offset button press. However, it was always part of the classic theme. It's a "feature," you might say, of CToolBar to make it appear that 3d buttons are actually moving "into" the screen. Since there is no 3d border, etc., I didn't like it and went for the flat highlighted look.

My general rule was to leave classic theme alone. Depending on the toolbar art, that style might look better. Although, with the blue square, probably not.

Anyway, if the toolbars are all to look uniform across themes it has to be looked at. I went ahead and committed that change. It does make me think, though, about that code. One of the things I'm doing in the drawing is making "dark" themed buttons instead of using the windows blue highlighting. But if we want toolbars to look similar across themes, maybe we should throw out the classic behavior entirely, for the toolbar. Then both would follow an identical codepath.

@clsid2, maybe you want to weigh in here. But there is a deeper issue with volume, seekbar, etc., that they are pretty dated and even if you prefer the classic theme, maybe the "modern" elements might be allowed at least in the player toolbar, volume control, seekbar, etc.

It wouldn't be that hard to support a "light" modern theme, either. I just never got around to it. Basically someone has to define the colors and we have to make it a selectable option--and the code needs updating to not use constant color refs. I'm not sure dialogs really need any change--they are basically just native windows widgets and they look normal. Even if the "light" theme was different from classic windows in the player, the dialogs could "pass" as they are still light. If we wanted it all to be fully colorizable, it's a bit more work, but only because certain widgets like checkboxes and radios have some pre-rendered assets.

[bibsp]

When I designed the original "dark" themed draw for the toolbar, I disabled the offset button press.

I understand that. That was a good idea. My idea is to make the themes identical.

I feel it's better to mention all these in a same place now, so that you guys can work on those when you touch this topic. Do whatever you think best for this, just maintain consistency. Thanks.

[clsid2]

@adipose Using a modern seekbar/toolbar/volume in classic theme would be fine with me.

Would it be possible to query the colors for those elements based on the active Windows theme? So we can keep being compatible with custom Windows themes and the special high contrast color themes that Windows offers.

Offering multiple modern themes would of course also be good idea. Have a Themes subfolder, where users can provide the necessary data through: theme.ini toolbar.svg logo.png Toolbar/logo could be optional. The theme.ini should have a value to choose between either Light or Dark as basis/fallback for those images and all the other small images used in the GUI.

Dark and Light themes (and eventually maybe more) would be internally defined themes.

What did you think of my idea that I posted a while ago to use two SVG images (empty+full) to combine for rendering the volume slider?

[adipose]

The two space volume slider is a good idea. Once that is done, it will be consistent across themes.

[IsaacHub]

Please consider adding a Quit icon at the right most corner on the toolbar, because other players like vlc has the quit icon/button on the toolbar.

It would be handy to use only mouse, of course I have mapped the Esc on the keyboard to quit the player, but what if I was already fiddling around with the mouse, so that I can click on quit button on toolbar rather than using other hand to reach out or right clicking and clicking again on Exit context-menu.

"Adding Quit button on the toolbar" is the most requested feature in original MPC where they used to track all the tickets on a different website something called "trac". Why is it a big deal to add a quit button? Is it too much to ask ?

Usability and Accessibility are important for any project.

[clsid2]

The player window has a close button. You can also close it with the standard Windows shortcut Alt+F4. There also is an exit entry in the right-click menu.

Adding it to toolbar does not make any sense and is not going to happen. I am not debating it. Any attempt to do that will result in a ban.

VLC does not have a close button in its toolbar. So you might be confused with the titlebar. If that is somehow hidden for you for MPC-HC, then press 3 to reset to normal view.

[IsaacHub]

(English is not my first language, sorry If my comment hurt you in anyway, I'm not good at english phrases and sentence making) Everyone knows player window has a close button.

I'm talking about Fullscreen mode. (no titlebar in fullscreen) and VLC has the option to add/remove whatever buttons we want in fullscreen, just FYI.

I know right-click menu has Exit entry (two clicks), we can save one extra unnecessary click by having an exit button on the toolbar. That's all.

I'm not into any confusion or debate or to hurt anyone by pointing issues. I respect your opinion, you are the owner, and this is a free player so I won't ask anything, just suggested. My intention was to make the MPC better for all users. No need to be angry on me.

This comment is only for making my previous comment clear, I'M NOT DEBATING. I respect everyone.

Thanks for this awesome media player. It's been a great journey with this MPC player.

[adipose]

@clsid2

https://github.com/clsid2/mpc-hc/pull/1002

I've added code to support a custom volume draw. Seems to work ok. I've started removing legacy/modern codeblocks as it's getting too confusing maintaining:

Classic volume Dark (themed) volume "Modern" volume. Toolbar based volume draw*

In particular the calculations for how to draw everything including the thumb scroller is getting convoluted so I've changed it to only support the last type of volume control.

[clsid2]

Can you make a test build?

[adipose]

https://mega.nz/file/0YxRhTYb#MhAQ4bN4EXi2VYlTen2m1bJFSN-cSW81sgH-Y6wQUZs

[bibsp]

Facing this bug, plus Volume slider edges are pixelated. It should be smooth line. Why are you adding triangular volume slider? 😥 Rectangular volume slider gives more mordern look, also it is not pixelated, coz it is rectangular.

[clsid2]

I noticed the same issues.

Maybe this helps for SVG line smoothness: https://stackoverflow.com/questions/22161624/how-to-render-svg-elements-with-crisp-edges-while-still-keeping-anti-aliasing

It might perhaps also be a good idea to round the height (after DPI scaling) of the toolbar stuff to nearest multiple of 4 (or maybe even 8). That could help reduce scaling quality issues, since Windows also allows uncommon scaling values.

Custom toolbar designs could use a rectangle, different colors, etc.

[adipose]

Facing this bug, plus

Volume slider edges are pixelated. It should be smooth line.

Why are you adding triangular volume slider? 😥

Rectangular volume slider gives more mordern look, also it not pixelated, coz it is rectangular.

It's simply a proof of concept. This is loaded from the svg so a rectangular volume wouldn't really properly test it.

The color issues must be due to rounding at certain resolutions. It worked well for me @4k.

The rough edge might be an issue. It is initially rendered with nanosvg just like the toolbar. But alpha blending maybe doesn't work properly. Maybe it's just more obvious with the non 45 angle used on buttons.

[adipose]

https://mega.nz/file/JVpxSaxa#m5sKWFu_yXTTIrvEXkoidqAMhPJcxOgpcom7CpJKxu4

This seems to fix at least one redraw issue. What I observed is that the invalidated region of the volctrl is insufficient for the larger draw area, when it's changed without using the mouse (using the mouse triggers some thumb revalidation, etc., so that was working). Shortcuts or mousewheel caused funny redraw in there. For now if there's any change I'm redrawing the whole thing.

[adipose]

https://mega.nz/file/oVhh0aIJ#EJm_1JyQgHUW4R9KcLR_dzUpuqOan-qkfqQ9rSXJz74

Alpha blending is working now. That should make it smooth.

[adipose]

This build removed the debug code, in case it caused any issues for testing.

https://mega.nz/file/hch0kD4D#InLfLP5QeAomuoiihXHoF_n8CRBLfWNXcc5osuSAan4

[rubenalamina]

Kind of a feature request regarding the customization. I'd like to see it change it to the middle of the screen, this is useful in ultrawide screens where you have them all the way to the left in a windowed video and also looks more aesthaetically pleasing.

Having indicators about the file being played would be awesome too. Like how we can see H/W is we're using hardware decoding. Inficators for codec (H264, H265, AV1) and type (8-bit, 10-bit, HDR, etc) would be nice to have. The H/W status could also be placed in this section and maybe offer an option to highlight the word and use it as a button to disable or enable hw acceleration. This part can also host buttons for the most used features on video files like others suggested above: subtitle and audio tracks..

Havintg this bottom panel be more useful and not just host playback buttons on one side and volume on the other with lots of empty space that can be used for more functionality or ease of use would be good. I'm not a programmer but if it's not that hard to implement in SVG I will definitely be willing to make buttons, indicators, etc and post them here for everyone to benefit.

[clsid2]

There already is an option for showing codec in status bar.

[rubenalamina]

There already is an option for showing codec in status bar.

I missed that in advanced options, thanks. That's one example of information that could be implemented to show in the bottom toolbar instead of the status bar, or to replace it as mentioned in my previous comment. I'll keep an eye on this repo now that I'm using MPC-HC full time again.

[clsid2]

Putting information in toolbar is not going to happen.

[mkruer]

Feature Request: On both the Modern and Classic Seekbar can you add an option to specify a color? This is to help up the contrast when viewing the progress the video at a distance. The default light grey (classic) and blue (modern dark) are very difficult to see when viewing at a distance and using a 4K display.

[adipose]

Feature Request: On both the Modern and Classic Seekbar can you add an option to specify a color? This is to help up the contrast when viewing the progress the video at a distance. The default light grey (classic) and blue (modern dark) are very difficult to see when viewing at a distance and using a 4K display.

It sounds like an option worth adding, but maybe put it in as a separate issue.

I've been very busy lately but I still monitor this project.

[dizzyMongoose]

Ah, there's already a ticket about this. I was going to also open a ticket to suggest that there be an option to hide the speed buttons, which I tend to hit by accident instead of the skip buttons since they look so similar, plus they're right next to each other.

Other suggestions that might help without adding an option:

• Group the speed buttons in their own section (or with the step button) and move them after the step button so they're separate from the skip buttons.
• Change the icons for the speed buttons; have the triangles overlap , or use double chevrons instead of triangles.
• Change the icons for the skip buttons; the single triangle and bar rather than the double triangle and bar is a commonly used alternative.

[Kayot]

I came to add that I'd like to remove the speed buttons. It's just so weird to have that function as dedicated buttons directly on the toolbar. Do people use those that often? I just use hot keys when doing chapter work, so it seems like those would be hot keys as well.

I would like jump to next/previous file as buttons. Right now I use the Pageup/Pagedown hot keys, but sometimes I'm just in a mouse mood.

[clsid2]

Jump to next/previous file buttons are literally already next to the speed buttons for two decades. If there are chapters, it jumps to chapters. But you can right-click to always jump file. Similarly you need to use Shift+PageDown in case chapters are present.

[6Fv]

The speed buttons look identical to the skip buttons. I constantly click the wrong button, making the toolbar useless for me. The toolbar should be customizable; buttons should be able to be removed or grouped differently.

To make this player usable for me, here's my workaround:

1. Hide the toolbar to prevent yourself from clicking the wrong button
   • CTRL + 1
   • OR: Right-click player > View > Deselect "Controls")
2. Use keyboard shortcuts instead
   • Skip: Page Up/Down
   • Pause/Play: Space
   • Volume: Scroll Up/Down