RFC: UI Redesign

[jannuary]

The UI is pretty visually heavy for a video player, as well as kinda old-school looking, so I feel a redesign that brings Celluloid visually more in line with Tobias's mockup, Clapper and IINA would be great.

[jannuary]

Bit of a mockup for this vision:

(Photo by masahiro miyagi)

The controls would recede when not in use and appear on hover, and the window would be draggable anywhere, while clicking on it would pause the video.

[gnome-mpv]

@jannuary
Thanks for the mockup. This is a major change so I want to hear from others as well. I'll leave this open for a while so they have a chance to comment.

[TingPing]

Trying out Clapper and I'm a big fan of the UI.

It doesn't do floating video controls when windowed and has them docked under like Celluloid. I think always floating controls would be a nice UI but maybe they tried it out and didn't like it.

[ugly95]

I think an important thing to consider if looking at a UI redesign is how well it displays on a TV.

When using a video player on a regular computer monitor, you're usually sitting up close. Smaller text and icons are fine in that scenario.

If the video player is on a HTPC, people are usually sitting farther away from the TV. Small text and icons becomes more difficult to see and interact with.

For example, the default OSC in mpv itself, while not pretty, is actually quite usable on a TV. Celluloid''s UI is a bit on the small side.

[r-a-cristian-93]

I think an important thing to consider if looking at a UI redesign is how well it displays on a TV.

When using a video player on a regular computer monitor, you're usually sitting up close. Smaller text and icons are fine in that scenario.

If the video player is on a HTPC, people are usually sitting farther away from the TV. Small text and icons becomes more difficult to see and interact with.

For example, the default OSC in mpv itself, while not pretty, is actually quite usable on a TV. Celluloid''s UI is a bit on the small side.

The UI could be scalable and the user should be able to adjust as needed.

[jannuary]

The UI could be scalable and the user should be able to adjust as needed.

It somewhat seems like overcomplicating and overcompensating for a use case that's likely not gonna be in great demand and for which that problem could be solved with system-wide tools.

Although I'm not opposed to boosting UI controls size somewhat for sake of a11y - they're already larger than the status quo in the tentative design.

[moshiur-raj]

If you decide to redesign the UI then can you please add buttons for changing the audio track and subtitle as well? Clapper and mpv does this and it makes things super convenient.
Chapter indicators would be nice too.

[jannuary]

If you decide to redesign the UI then can you please add buttons for changing the audio track and subtitle as well? Clapper and mpv does this and it makes things super convenient.
Chapter indicators would be nice too.

The mockup features a prominent subtitle button, about audio track - I'm not so sure if that needs to be front and center tbh.

Chapters is something that's bit out of scope for this specific issue - you should file another ticket.

[moshiur-raj]

@jannuary What do you think about moving the progress bar at the top and having other options at the bottom? Most of the time I use the UI just to see the progression (how much time has passed, how much is left, etc) or to seek. So having the progress bar at the top makes most sense to me as having it at the top will give it more focus.
And regarding the chapter indicator's there's already an issue #578, I was just mentioning it here.

[jannuary]

We'd rather not break the established convention :)

[moshiur-raj]

@jannuary vlc, mpc-hc, mpv-android, kmp player all have progress bar at the top though. Even the videos app in windows.

[jannuary]

vlc, mpc-hc, mpv-android, kmp player all have progress bar at the top though. Even the videos app in windows.

Do they? Either way, it's very much debatable whether top seekbar is better, and I'm not particularly interested in changing it now, sorry.

Besides, this issue was initially about making the OSD more visually lightweight, not fundamental rethinking of Celluloid, so let's keep it on topic.

[moshiur-raj]

![image](https://user-images.githubusercontent.com/36466700/1361492

08-61d540d3-b905-462e-8bb1-e9430acab41c.png)

@jannuary Here are some screenshots. As far as I've seen having the progress bar at the top is the norm and is more convenient. It would be really weird having a progress bar at the bottom. Please reconsider.

[jannuary]

Oh oops, pardon me, I've misread that - I thought you meant putting the seek bar where the header bar would've been. Yeah, I could definitely look at that later

[smithfred]

Please don't forget touch-based interaction with any redesign (e.g. don't make things hover-only). Thanks!

[jannuary]

Please don't forget touch-based interaction with any redesign (e.g. don't make things hover-only). Thanks!

Hovering to see controls would just translate to a tap.

[moshiur-raj]

@jannuary I liked the UI with smaller width for controls more. The expanded one looks empty. Maybe there can be an option / button for expanding the controls?

[jannuary]

@jannuary I liked the UI with smaller width for controls more. The expanded one looks empty. Maybe there can be an option / button for expanding the controls?

Honestly, wide bar seems like bit of a failed experiment, so one that expands to a certain width, then stays in the center is probably the way to go.

I don't really want to introduce more preferences - I'd rather cut down on existing ones, but that's for the other time.

[jannuary]

@gnome-mpv Anything that blocks this or still needs to be talked over from your POV?

[TingPing]

One thing that GNOME folks immediately pointed out when discussing this, is Celluloid doesn't have a nice default state, e.g. https://developer.gnome.org/hig/patterns/feedback/placeholders.html

[gnome-mpv]

@jannuary
I think the current mockup is good overall although I think there's a bit too much space between the buttons under the seek bar. It might be better to use the 2-row layout only if the window is taller than it is wide, and put all widgets in a single row otherwise.

Also, I think it would be better to keep using the double triangle icons for forward/backward. The seek amount is user-configurable, so the number 10 in the icon could become inconsistent with the actual behavior.

It would be good to improve the default state as well. I attempted to work on it a long time ago, but I ran into a problem when using X11 window embedding. The mpv window goes on top of everything else so all the images/text get hidden underneath.

[jannuary]

It might be better to use the 2-row layout only if the window is taller than it is wide, and put all widgets in a single row otherwise.

Hm, I'm inclined to disagree - putting them as is in a single row would be quite awkward, and while you could put some in a submenu (similar to how status quo already does) would hide away important features.

Also, I think it would be better to keep using the double triangle icons for forward/backward. The seek amount is user-configurable, so the number 10 in the icon could become inconsistent with the actual behavior.

⏩ means fast forward, not seek, so making that seek icon generic is probably a good bet.

For the initial state, I think a simple "Welcome; Press Open or drag your video here" using AdwStatusPage would be nice.

[TheOPtimal]

It might be better to use the 2-row layout only if the window is taller than it is wide, and put all widgets in a single row otherwise.

Hm, I'm inclined to disagree - putting them as is in a single row would be quite awkward, and while you could put some in a submenu (similar to how status quo already does) would hide away important features.

Also, I think it would be better to keep using the double triangle icons for forward/backward. The seek amount is user-configurable, so the number 10 in the icon could become inconsistent with the actual behavior.

fast_forward means fast forward, not seek, so making that seek icon generic is probably a good bet.

For the initial state, I think a simple "Welcome; Press Open or drag your video here" using AdwStatusPage would be nice.

I think a clapperboard icon with the text "Press Open or Drag and Drop a video here" would be a good placeholder.

[johnfactotum]

Personally, I prefer Tobias's mockup:

• The bottom bar only takes a single row on desktop. This makes it look less heavy.

• All playback related settings (volume, speed, subtitles, etc.) in a single popover.

  The thing about this design is that those settings would require no more clicks to access than they do in the status quo, and this again reduces clutter.

  Another thing to consider is that maybe instead of a popover, this can be a flap similar to the one in gnome-text-editor. That would give you even more space to work with, and you can potentially add more advanced controls such as contrast or brightness sliders, etc. I think IINA has a similar design.

• The "Open" menu is combined with the primary menu. This makes the top look cleaner.

  IMO, the "Open" menu doesn't deserve it's own button, as most of the time you're opening files directly and not through the menu. In fact, I would go one step further and put all open actions in a submenu. Then, in the initial state, the AdwStatusPage can house a separate "Open" button. This means the options are only presented prominently when you need them the most, i.e. when you're not opening files from file manager, which is exactly when you'd see the initial state page.

One further thing I'd change is to put the fullscreen and floating mode buttons (which Celluloid doesn't have yet, but it might get it in the future) either inside the primary menu, or maybe on the bottom bar, because

• These actions can and are commonly performed with keyboard shortcuts (or in the case of fullscreen, also double click);
• Those actions are sort of "long term commitments"; i.e., you would usually perform those actions once then stick with it for an extended period of time, rather than switching back and forth in quick successions.

So there isn't a dire need to put them on the header. Moving them elsewhere would greatly reduce the number of those circular buttons on the top, which IMO there are just too many of them, and they can be extremely distracting.

[moshiur-raj]

If you guys do go with the single row design then can you please make the seekbar be right at the middle? You can do this by putting some of the commonly used options like volume, subtitles on the right side. Not having the seekbar at the middle will trigger my OCD for sure.
Clapper does this. Here's a preview:

[jannuary]

Another thing to consider is that maybe instead of a popover, this can be a flap similar to the one in gnome-text-editor. That would give you even more space to work with, and you can potentially add more advanced controls such as contrast or brightness sliders, etc. I think IINA has a similar design.

This seems pretty interesting. I don't think we necessarily need stuff like contrast or brightness, but chapters/playlist items could go there. Though, such design would also cover a big part of the video while the sidebar is open, so not entirely sure whether it's the greatest move.

I disagree with putting open/fullscreen/pip into the hamburger – open is already in itself a popover, and I feel going in and out of fulscreen is an important enough action to have its own button.

[johnfactotum]

chapters/playlist items could go there.

I think maybe playlist should have it's own flap. When the screen is narrow, instead of folding it, the playlist could instead be docked underneath the video (like #439).

I disagree with putting open/fullscreen/pip into the hamburger – open is already in itself a popover, and I feel going in and out of fulscreen is an important enough action to have its own button.

Normally I would agree, but—maybe it's just my own preference—I find that, when the buttons are directly overlaid, they become much more distracting than if there's a permanent headerbar above the video. Their circular appearance and generous spacing don't help, either. So it'd be nice if one could reduce the number of overlaid elements.

I do understand that one would like to keep those buttons in their most natural positions, but for the sake of making the UI as minimal and as light as possible, what about something like this? (Please forgive my poor "mockup")

_______________________________________________
|                                         [x] |
|                                             |
|                                             |
|                                             |
|                                             |
|                                             |
|      [⏪️▶️⏩️ ======o----------- ⛶ ☰ ]       |
|                                             |
|______________________________________________

Where

• ⛶ is the fullscreen button
• ☰ is the primary menu

And the primary menu popover could house all other controls:

🔊 =========o---------
-----------------------
    Video Track      >
    Audio Track      >
    Subtitle Track   >
-----------------------
[ ] Show Playlist
[ ] Loop
[ ] Shuffle
-----------------------
    Open             >
-----------------------
    Preferences
    Keyboard Shortcuts
    About Celluloid

"Mockups" for playlist/chapters:

_________________________________________________________________________
|                                             | Playlist | Chapters [x] |
|                                             |-------------------------|
|                                             |                         |
|                                             |                         |
|                                             |                         |
|                                             |                         |
|                                             |                         |
|      [⏪️▶️⏩️ ======o----------- ⛶ ☰ ]       |-------------------------|
|                                             | + -                     |
_________________________________________________________________________

Narrow/mobile:

________________________________________
|                                  [x] |
|                                      |
|                                      |
|                                      |
|                                      |
|        [       ⏪️▶️⏩️   ⛶ ☰ ]        |
|        [ ======o----------- ]        |
|                                      |
|--------------------------------------|
|      Playlist     |     Chapters     |
|--------------------------------------|
|                                      |
|                                      |
|                                      |
|                                      |
|--------------------------------------|
| + -                                  |
________________________________________

[moshiur-raj]

@johnfactotum How about a drop down menu on the upper right corner for displaying the playlist? It would be scrollable of course. I don't think displaying playlist underneath the video is a good idea for a video player.

[johnfactotum]

@moshiur-raj I'm not sure what you mean by "drop down menu on the upper right corner". Playlist underneath video is pretty common, isn't it? It's used by, for example, YouTube.

[moshiur-raj]

I meant having a button on the upper left corner (I mistakenly said 'upper right corner' the first time). When you click on it all the videos on your playlist is shown as an ordered list. It's somewhat similar to the list of options you get when clicking the hamburger menu in nautilus.
Sorry, I though you meant having playlists at the bottom even when the video is in fullscreen. My bad. In narrow mode it makes a lot of sense.

[jhaye]

One thing I'd like to add, is that the displayed timestamps should at least for the digits be monospaced. Right now Celluloid simply renders the hh:mm:ss timestamp with the default serif font and as a result the digits always jump around slightly when transitioning between seconds. I think it would look much better if the digit placement remained fixed.

[jannuary]

One thing I'd like to add, is that the displayed timestamps should at least for the digits be monospaced. Right now Celluloid simply renders the hh:mm:ss timestamp with the default serif font and as a result the digits always jump around slightly when transitioning between seconds. I think it would look much better if the digit placement remained fixed.

Doesn't really need a redesign, just a .numeric style class ;)

[jannuary]

Another try at this:

[moshiur-raj]

@jannuary you should replace those seek buttons with previous / next track as seeking with arrow keys is much easier (you don't have to move the mouse and place it on a button and click it). Also can you please add another button on the right side? Then the progress bar will be right in the middle! Maybe you can move the fullscreen button and place it on the right-most side?
And I don't think there's any need for that hamburger menu at the top right side since there's already a button for more options in the seekbar. You should remove it and make the close button bigger, I think it'll look good.
Anyway, the new design looks awesome. I definitely prefer this over the previous one. Thanks!

[jannuary]

And I don't think there's any need for that hamburger menu at the top right side since there's already a button for more options in the seekbar. You should remove it and make the close button bigger, I think it'll look good.

The hamburger button is a matter of semantics - the three dot menu is for playback options relating to the current video(volume, speed, subtitles, etc.), while the hamburger is for options relating to the app (preferences, about, etc.)

[johnfactotum]

@jannuary I still think that the "Open" menu and the hamburger menu should be merged. Since playback options now have their own menu, the hamburger menu has more than enough space to directly accommodate all the items in "Open". Not to mention that one of the items, "New Window", should have been put in the hamburger menu to begin with.

[moshiur-raj]

@jannuary It seems currently there's no easy way to see which file is playing. Filename is not displayed anywhere. You can replace the open button with something that displays the filename if you decide to move open button to the hamburger menu. Like how clapper does it.

[JJRcop]

Make sure this cleanly handles mpv playing an audio stream without a video track.

[nekohayo]

Just as a note for your consideration while y'all're thinking of the new UI: see issue #750 for my user story / usecase scenario to have the ability for perma toolbars in windowed mode.

[ranomier]

i don't like that there is a sandwich- and a three dot-button. And the fullscreen button should be left of the open menu.

[ArtyIF]

i don't like that there is a sandwich- and a three dot-button. And the fullscreen button should be left of the open menu.

Agreed. What's the point of a sandwich button if it can all be placed in the three-dot button menu? Fullscreen button should be on the bottom right, similar to most video hosting websites and other player apps.

But I do like the idea of the title buttons being floaty instead of being on a header bar, windowed or not. I wish more GNOME apps would do that, it's very aesthetically pleasing, and I don't think it would get much in the way of UX. Just as long as it's obvious where you can drag the window and as long as it can fit the minimize and maximize buttons when they're on in Tweaks.

[Baraccc]

All comments here are on video player side of celluloid, i would like to request to consider also Music player side of celluloid (its not mostly used for that) and in this particular case, it would be amazing to celluloid use blur background using colors from album cover. Much like amberol does.

[suwermave]

All comments here are on video player side of celluloid, i would like to request to consider also Music player side of celluloid (its not mostly used for that) and in this particular case, it would be amazing to celluloid use blur background using colors from album cover. Much like amberol does.

Well why not just use Amberol instead?

[JJRcop]

Well why not just use Amberol instead?

Celluloid uses mpv for the backend and Amberol uses GStreamer. If there is any reason that you want to specifically use mpv as the backend, you can't use Amberol.

[CaptainMorgan12]

Its missing two buttons to skip to next or previous video if other videos exist in the same folder as currently playing video and/or if a folder was opened containing many video files.

While touch controls and visual elements that allow seeking, scrolling or electing are great the button contolls still should exist or be configurable to show (for accessibility support)

Proposal would be to keep showing the fast forward and backwards buttons, the pause play stop button, and add the skip video buttons somewhat related to #750 .

Also again for accessibility the volume icon should not be hidden in a menue and be prominently displayed for easy reach single select with finger or mouse resulting in some sortof overlay slider popup. (i have also seen touchscreen based apps allow volume control up down with two fingers in the right half of the screen for example, while two fingers left and right result in skip or skrub)

Also side note but for touch screen devices volume slider up and down is easier and more accessible than left and right since your not having to slide over existing controls and or cover too much of the playing video with your fingers while adjusting volume.

[AbrarSL]

Going forward with this redesign would mean that the option to disable CSD in Celluloid (a lot of preferences in general) is removed yes? The redesign might also be a chance to migrate Celluloid over to using UI files (XML or Blueprint) too.

[gnome-mpv]

Going forward with this redesign would mean that the option to disable CSD in Celluloid (a lot of preferences in general) is removed yes?

I plan to keep the option as long as possible. I've seen a lot of people using it.

[AbrarSL]

Perhaps an intermediate redesign that moves stuff around can be implemented until there's enough devpower to implement a full on redesign? I managed to tweak celluloid a bit to get this,

There are some issues around handling CSD/Non-CSD but I think pursuing something like this as a midstep might be worth it?

[gnome-mpv]

Perhaps an intermediate redesign that moves stuff around can be implemented until there's enough devpower to implement a full on redesign?

Yes, I think that's a good idea. It's probably good to start with the popover menu or the playlist since they don't change between CSD/Non-CSD mode.

[rtgiskard]

Perhaps an intermediate redesign that moves stuff around can be implemented until there's enough devpower to implement a full on redesign? I managed to tweak celluloid a bit to get this,

There are some issues around handling CSD/Non-CSD but I think pursuing something like this as a midstep might be worth it?

This looks pretty good, add a bit of transparency to both the top/bottom panel, and make the panel only visible on hover or click (for touch-only style) would be better as I think

[AbrarSL]

Perhaps an intermediate redesign that moves stuff around can be implemented until there's enough devpower to implement a full on redesign? I managed to tweak celluloid a bit to get this,

There are some issues around handling CSD/Non-CSD but I think pursuing something like this as a midstep might be worth it?

This looks pretty good, add a bit of transparency to both the top/bottom panel, and make the panel only visible on hover or click (for touch-only style) would be better as I think

I originally tried this with the .osd class that's available in libadwaita. I didn't like how it looked. It was also kinda difficult to use the controls with transparency. If GNOME supported blurred components like MacOS it could be made to work but at the moment it just gives bad contrast.

[rtgiskard]

Perhaps an intermediate redesign that moves stuff around can be implemented until there's enough devpower to implement a full on redesign? I managed to tweak celluloid a bit to get this,

There are some issues around handling CSD/Non-CSD but I think pursuing something like this as a midstep might be worth it?

This looks pretty good, add a bit of transparency to both the top/bottom panel, and make the panel only visible on hover or click (for touch-only style) would be better as I think

I originally tried this with the .osd class that's available in libadwaita. I didn't like how it looked. It was also kinda difficult to use the controls with transparency. If GNOME supported blurred components like MacOS it could be made to work but at the moment it just gives bad contrast.

With transparency of about 0.8/0.9, it should be ok, just like the default opacity for celluloid's current control panel:

The panel will not be so obtrusive with some transparency, of course, blur effect would be the best, just waited too long for it to come.