UI: Update volume meter appearance
Description
Adjusts the layout and appearance of the audio mixer volume controls. Removes minor ticks, dims the decibel indication text, widens the meters for lower channel counts, and adds 10db ticks to the slider.
Before:
After:
Depends on #10602, or at least will prefer to merge that first so that this can be rebased against it.
Motivation and Context
Better use of space, less visual noise.
How Has This Been Tested?
Messed with audio sources and the audio sliders
Types of changes
- Tweak (non-breaking change to improve existing functionality)
- Code cleanup (non-breaking change which makes code smaller or more readable)
Checklist:
- [x] My code has been run through clang-format.
- [X] I have read the contributing document.
- [X] My code is not on the master branch.
- [X] The code has been tested.
- [X] All commit messages are properly formatted and commits squashed where appropriate.
- [X] I have included updates to all appropriate documentation.
I'm not a huge fan of the larger bars and handles, it feels a bit cheap and Fisher Pricey but maybe I need to get used it. The new UI seems a bit cramped with everything so close together. I feel like the icons for properties and mute should also be the same size if they are going next to each other.
After hearing some responses from broadcast folks, I would suggest adding minor ticks back between -25dBFS and -5dBFS.
I'm not a huge fan of the larger bars and handles, it feels a bit cheap and Fisher Pricey but maybe I need to get used it. The new UI seems a bit cramped with everything so close together. I feel like the icons for properties and mute should also be the same size if they are going next to each other.
I think you'd be hard pressed to find another audio application that has the meters as thin as we used to have them.
The icons are intended to be the same size. There is an open PR to address that inconsistency
After hearing some responses from broadcast folks, I would suggest adding minor ticks back between -25dBFS and -5dBFS.
I'll try to play around with this
dB font should have a higher contrast maybe give it the same colour as the volume slider? since they're connected?
I'll have to defer to everyone else for discussion about all the details but I feel like colorblind people will definitely appreciate this PR. I also like how it adds the volume level lines to the slider.
Thoughts on aligning the 3 vertical dots on these red vertical lines instead? Otherwise, looks good!
Rebased this PR. Hopefully I got the changes correct.
After rebasing, I seem to have encountered this odd behavior:
After rebasing, I seem to have encountered this odd behavior:
I've fixed this issue
Overall I like some of the improvements, but man do the kebab and speaker buttons stick out like a sore thumb, particularly in the horizontal one.
I'd prefer if the speaker remained without the button frame, not sure what your motivation was for adding that, but it looks "wrong" to me. We don't really do that with other symbolic buttons like the visibility or lock icons either, so it feels inconsistent with the sources dock.
Overall I like some of the improvements, but man do the kebab and speaker buttons stick out like a sore thumb, particularly in the horizontal one.
I'd prefer if the speaker remained without the button frame, not sure what your motivation was for adding that, but it looks "wrong" to me. We don't really do that with other symbolic buttons like the visibility or lock icons either, so it feels inconsistent with the sources dock.
In the case of things like the Sources list or filters lists those symbolic buttons are inline elements. I want to make sure buttons have a clear visual appearance everywhere else.
I agree that the mute icon should not look like a button (its behavior is more akin to a checkbox).
Noting the above feedback and not discounting it by merging, but going to see what the sentiment is during the beta cycle.
If it's a common point of feedback I'll revert the styling changes as a fix.
I use the vertical format for the Audio Mixer. Do the thicker audio meters make everything less compact? I feel like my audio sources don't fit neatly in my layout anymore. I always felt that the old design was still spacious, so I'm sad to see it get thicker. Streamers will often have many audio sources and the UI should prioritize fitting as many of them in the smallest amount of space as possible.
I had to downgrade versions because of this UI change. I would love an option to make the audio mixer even more compact and space-efficient than before.
...the UI should prioritize fitting as many of them in the smallest amount of space as possible.
I disagree. Giving UI elements the space they need to breathe is very important when it comes to UI/UX design. Things in OBS have been cramped for a while. While we're aware a few select cases where people are just upset that the change has caused them to have to adjust things, we feel that "I don't like it" isn't really a valid justification for immediate change, though it's still valid feedback and we're taking all reports in to account as we continue to iterate.
In any event, this PR addresses a unintended functional change, which is a specific edge case where the changes did result in the meters taking up more space. In most cases, they will take up the same, or even less, despite appearances.
Removes minor ticks, dims the decibel indication text, widens the meters for lower channel counts, and adds 10db ticks to the slider.
I genuinely hate this change. Please revert it---or at least please give us the option to choose between the 2 appearances. (The way it was was already perfect.) I actively used the markers to get my audio just how I want it.
TY.
Things in OBS have been cramped for a while.
