UI: Add main toolbar to top of window

[cg2121]

Description

This moves the controls from the controls dock to a toolbar at the top of the window. This also adds tool buttons for common tasks that are found in the context menus.

Icons:

• undo, redo: https://useiconic.com/open
• copy: https://feathericons.com/
• paste, studio mode, broadcast button icon, virtual camera icon: https://icons.getbootstrap.com/

Motivation and Context

OBS has been wanting to update the UI for a long time now.

How Has This Been Tested?

Clicked all the buttons to make sure everything worked.

Types of changes

• New feature (non-breaking change which adds functionality)
• 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.

[cg2121]

Where do all the icon SVGs originate from?

Overall, I like the direction of this. I'll add more thoughts after I think about it some more.

Updated the description to say where the icons came from.

[MatuaDoc]

This looks great and it was something I was toying with, but you beat me to it!

Thoughts:

• For users with narrow monitors (esp portrait orientation), the controls being on the right will get hidden when the window isn't wide enough to show them. QToolBar doesn't have permanent items to my knowledge
  • Solution 1: move the record/stream/etc controls to the left so that they're always visible
  • Solution 2: move them to the existing subclass of QStatusBar instead, added as permanent widgets

The benefit of solution 2 is also that the recording/streaming duration labels can be integrated with the buttons as you have already done. It does rather leave the Office-style quick actions orphaned — could they move to the source toolbar?

[cg2121]

Updated to change to replay buffer and virtual camera buttons to just icons.

[cg2121]

• Solution 1: move the record/stream/etc controls to the left so that they're always visible

This is a custom widget that is put in the toolbar, so the buttons are not hidden when resizing.

It does rather leave the Office-style quick actions orphaned — could they move to the source toolbar?

The source context bar is supposed to meant for sources, while this PR applies to actions that affect entire program.

[ghost]

I love this new change, but I feel the "compact" change for virtual cam and relay buffer are only going to hide those feature more. Having just the icons don't really make is clear what any of those buttons do. Even knowing that the replay buffer buttons were there, it took me several minutes to even realize that wasn't "restart recording" and "download recording"(I don't really know.)...

There's already a decent subset of users who don't know about virtual cam or replay buffer, so having their buttons pushed up into a corner with tiny undefined icons are only going to increase that group of users... I feel

[MattyFresh68]

While this does have a cleaner, more modern design, icons alone are going to confuse numerous users and result in unnecessary support influx IMHO. Just look at the change to how stingers are added. Support requests still occur from users not knowing where it was moved to.

[tiberium-v]

Because of the space, i don't like the suggesting self... but give the categories headlines over them. So it would be more clear, what icon/icon pair stands for?

[prgmitchell]

My suggestion would be to add "start/stop" text next to replay buffer as well to mirror how the record function works in the status bar.

[cg2121]

All of the buttons have tool tips, so I don't think it would be problem for users when they use the buttons with just icons.

[lindenkron]

I'm also personally a bit concerned with the UX of this, in terms of recognition. Perhaps have an option for this as "compact" layout? Personally I wouldn't change 'Settings' to 'Manage Broadcast' (assuming that's what that does and not the cogwheel?). (being told this is a youtube thing). Again, some of these things aren't immediately as apparently as I would prefer.

There is large chance of confusion between "Live" and "Record" in this setup. Perhaps a 'REC' symbol/text instead. Overall I think the right side, while aesthetically being more pleasing, would decrease the UX for a lot of people.

The left side however looks like something that should be in OBS already. Am a fan of most things there since they're fairly intuitive. 👍

[gxalpha]

Some first impressions here:

All of the buttons have tool tips, so I don't think it would be problem for users when they use the buttons with just icons.

I am 100% sure that it will be an issue. We already sometimes get users who struggle with finding things, and this will make the situation much worse. For example, a camera icon isn't enough to indicate what the button does. Looking at it, as a new user I'd assume that it adds my camera to the stream (aka a camera source). Same applies to the icon used for the replay buffer, I'd have no idea what it does, it could very well be an undo button.

Speaking of which, personally I don't like the idea of having explicit buttons for undo/redo. Undo/Redo is something associated with the Edit menu in every app, and I can only think of very few examples of other apps having those buttons. To some extent, the same applies to the copy/paste buttons.

The space gained from removing those buttons could be used to add text descriptions to the preview related buttons (visibility, lock/unlock, studio mode) of which I am a fan, they really needed to exist. The screenshot button I'm personally unsure about, besides lacking a description (same thing as the vcam button) it somehow feels off, I can't quantify this though.

[cg2121]

I've updated the virtual camera and replay buffer icons.

Inactive:

Active:

[tiberium-v]

In general i like personal the direction. But i don't think Replay Buffer und VirtualCam are easy to replace only with icons. Also Studio Mode was not clear on the first sight for me.

Categories names over the icons would increase the clutter and increase the height of the panel. So i self have unfortunate not a good proposal for a solution. :thinking:

[unknowndomain]

If you add a toolbar, you ought to think about adding a way to customise it with different arrangements.

Also on macOS the title bar and toolbar have become ever more combined because it's not got a file menu on the window, might there be a way to consider this when undertaking this project, currently the title bar is bastardised as a status display for the selected profile and scene groups, but this could be in the toolbar also, and then the toolbar could be merged into the titlebar?

Generally, I like this improvement, but I also like the older suggestion to improve the control bar to make it pluggable, with buttons for other streams if/when that is implemented, NDI, and others...

What would this toolbar look like with multiple outgoing feeds on different protocols, might it make sense to plan for this now, i.e. a button with a webcam and if theres more than 1 of each 'type' of source it could put an incremental badged number in the lower right.

[feetstv]

Also on macOS the title bar and toolbar have become ever more combined because it's not got a file menu on the window, might there be a way to consider this when undertaking this project, currently the title bar is bastardised as a status display for the selected profile and scene groups, but this could be in the toolbar also, and then the toolbar could be merged into the titlebar?

Merging the toolbar and title bar in a meaningful way that works across multiple platforms, especially with Qt, is probably more trouble than it's worth.

[MisutaaAsriel]

Could this possibly be spun into a plugin or optional dockable widget, possibly? That way it doesn't rely on being merged into main itself, and can be optional to the user. Then, later down if OBS decides to include it it can be incorporated as an included plugin.

As a dockable widget it could also be popped out into its own window or placed elsewhere in the UI such as the bottom of the display or underneath other widgets, depending on layout.

[cg2121]

Updated to remove the control buttons from the toolbar.

[Warchamp7]

This needs a lot more planning and discussion if/when we finally decide to tackle this idea, with a design-first approach and all of the controls decided beforehand.

Closing this PR for now, it can be reopened if it makes sense once that process happens.