celluloid
celluloid copied to clipboard
celluloid-player
RFC: UI Redesign
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.
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.
@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.
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.
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.
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.
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.
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.
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.
@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 vlc, mpc-hc, mpv-android, kmp player all have progress bar at the top though. Even the videos app in windows.
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.
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.
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
Please don't forget touch-based interaction with any redesign (e.g. don't make things hover-only). Thanks!
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.
@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 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.
@gnome-mpv Anything that blocks this or still needs to be talked over from your POV?
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
@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.
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.
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.
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.
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:
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.
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 https://github.com/celluloid-player/celluloid/issues/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 |
|--------------------------------------|
| |
| |
| |
| |
|--------------------------------------|
| + - |
________________________________________
@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.
@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.
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.