Player screen design ideas

[M00NJ]

I think the player screen could look a lot nicer so here's a mock-up with my ideas:

Theme I	Theme II

What's changed:

1. Used individual buttons instead of a toolbar
   (Looks more modern imo)
2. Removed the pop-up button
   (Because of the background playback issue you have to use audio mode, if you want to close the app and have the playback continue. That means having PiP disabled doesn't do anything since the playback will stop when you leave the app. So I suggest making PiP default and removing the pop-up button, to free up space in the player and settings screen.)
3. Replaced the comment expand button with the pinned comment
   (The space made available by replacing the toolbar can now be used to display important information, like the pinned comment. Clicking on it should still open the comment section.)
4. Increased the thumbnail size of the recommended videos
   (The new default video layout reduces the thumbnail size, which results in the titles being cramped or cut off oftentimes. Slightly increasing the thumbnail size and removing less important info like the upload date from the recommended section could fix this.)
5. Changes to button shapes, color mappings and padding

Screenshot	Mock-up

I used the same accent color in the comparison!

[Bnyro]

I really like these ideas:
I will implement 1, 2, 4 and 5 with the next release.
3. is unfortunately not really possible because loading the first comment would require an additional API request, which is not really a good idea in my opinion.

However, since we have a landscape layout for that page too now, we'll need to see how we change that to look good as well, or if we keep the current design there. That's because there is much more vertical free space because the related streams are placed somewhere else, which would cause a huge gap by removing the toolbar menu.

Apart from that I don't agree with the like/dislike icon design changes, the filled ones fit better imo.

[M00NJ]

Amazing news!

Some info on the color mapping:
For the buttons I used surface-container-low for the background and primary for the text and icon (These are the same values as the elevated button but without the drop-shadow). The "subscribe button" is a default button. The background color I used is surface because imo the background in a streaming app should be darker. surface-dim is an option too, it keeps it's relative brightness. That means instead of being the brightest thing an screen in light mode, it will be a bit dimmer.

I think commenting on the padding for the buttons won't be useful, because it'll probably have to relative to the screen size.
I can have a look at the landscape layout and see how we can apply this design language there as well.
Here's a updated mock-up without the the pinned comment and filled thumb icons:

[Bnyro]

I have already starting with implementing the new layout for the portrait mode (see #5301), you can already test the CI builds here. It's only a beginning and still needs some adjustments before the release, but it's already implementing the "major thing" so that only some smaller adjustments should be needed for the portrait mode now. Please feel free to test this already when you have time and give feedback about the differences you'd still like to see.

PS: I still want to decrease the size of the action buttons (like download, save, share, ...), but currently I can't seem to find a good way for that while using the builtin Android MaterialButton. Maybe we should use an elevated card instead in worst case.

[M00NJ]

I finally got around to testing it. This looks quite a bit nicer already :)
Here are some things apart from the smaller buttons, that would make it closer to the mock-up:

• Apply primary color to the comment button text and icon as well
• Choose a darker background color for the buttons (surfaceContainerLow /surfaceColorAtElevation(1.dp))
• Choose a darker background color (surface or does it already use that by default? Looks so much darker in the muck-up...)

[Bnyro]

This should all be applied now.

Concerning the background color of the buttons: it somehow looks way darker when choosing a theme in the settings which is not "Material You", so I think we have to go with the current one and can't make it any darker.

[Bnyro]

The landscape layout is still completely missing though

[RafaelsRamos]

Hey @M00NJ 👋 I hope I'm not bothering you with this tag!

Would it be possible for you to give your input into the discussion on this PR #5366? Given that you provided the layouts in the first place, your opinion would be highly appreciated 💪

Thanks in advance!

[M00NJ]

Since we can't change the width of the buttons in the row under the video I think we should discuss other options. I really like the new look and darker colors, but the cut off audio button looks a bit odd. Also I switch between audio mode a lot and always having to swipe left to click the button is kinda annoying. Further I do get the bug mentioned in #5618 sometimes where the Pip doesn't open automatically (I don't know whats causing it). So I did a quick draft trying to combine the new look with the old layout to avoid these two issues.

Current	Proposal

Also a very small thing: the expand icon on the comments button should have the primary color as well (like in the subscription tab). I circled it red in the mock-up.

I anyone else has an idea on how to solve this feel free to suggest it and I will create a mock-up for it so we can compare the different options.

[begin-theadventure]

Looks great and the pop-up button is back in your proposal, cool! Although I would not change the position of the save button.

[Bnyro]

The PiP/pop-up button has been re-added anyways.

I'm personally not really a fan of these buttons in the design proposal - they just don't feel right next to the other UI conponents we use there. I think that the current (0.21.1) layout for the player actions is pretty good and well enough to survive the future :)

I agree that we should fix the comments expand icon color though.

[M00NJ]

Sorry for not being able to let this go. But I think with the buttons added back, the situation is arguably worse. I use the audio button a lot, which is cut off on the right. But now when I scroll to the right, it's cut off again on the left.

Left	Right

So it requires a really precise, light scroll to be accessible which is bad from a UX perspective. I just find myself getting annoyed by this a lot, especially when I'm on the go or on the subway and just quickly want to switch modes. This is completely up to you of course, but imo for the UX to improve all buttons need to be on screen. No scrolling, just click and go. I like the look of the new buttons as well, that's why I proposed it after all, but if you ask me it's not worth sacrificing a good user experience for. It probably seems like a minor inconvenience, but as someone who uses the audio button like 30 times a day (because I use LibreTube for videos at home and music on the go and don't want to open the settings to switch modes all the time), I've really come to dislike this new layout and I'm starting to regret ever suggesting it 😑 😅. So I quickly put together some other UI options, maybe one of them strikes a good balance. I think number 2 looks pretty clean.

Option 1	Option 2	Option 3

Option 1 (labels)	Option 2 (labels)	Option 3 (labels)

[Ehab-d]

First of all, as users, we thank you for your great work. But I am not a fan of these new changes. The first redesign was actually better (thank you for designing it, and thanks to the developer for adopting it)

Changing the user interface every now and then is not a good thing, and the new designs are great, but the current one is even better.

Better accessibility, seems logical and users are accustomed to it on official YouTube app.

I would suggest that Bnyro to make the captions for “Expternal Player” and “Picture-in-picture” buttons shorter.