Make seekbar and player controls appear at bottom of video and take full width

[ChunkyProgrammer]

Make seekbar and player controls appear at bottom of video and take full width

Pull Request Type

• Other - subjective ui change

Description

A subjective design change to move the seekbar lower and make the controls take the full width of the video on larger screens. This removes padding and increases width of player controls.

Screenshots

Testing

• go to a video and make sure everything is behaving like it's supposed to (no element is overflowing, etc.)

Desktop

• OS: Linux Mint
• OS Version: 22
• FreeTube version: 0.22.0

[absidue]

On mobile it's probably best to leave it as it was before, because buttons burried right at the edge of the screen and in corners was a big problem with the previous player because they are really difficult to tap. Whereas with shaka-player's default layout that is not a problem, because they are far away from the edge.

[ChunkyProgrammer]

On mobile it's probably best to leave it as it was before, because buttons burried right at the edge of the screen and in corners was a big problem with the previous player because they are really difficult to tap. Whereas with shaka-player's default layout that is not a problem, because they are far away from the edge.

It should be resetting itself back to normal here on mobile:

FreeTube/src/renderer/components/ft-shaka-video-player/ft-shaka-video-player.css

Lines 215 to 229 in 0482dd1

	@media only screen and (width <=1000px) {
	:deep(.playerFullscreenTitleOverlay) {
	font-size: large;
	}
	:deep(.shaka-bottom-controls) {
	padding-bottom: 2.5%;
	width: 96%;
	}
	:deep(.shaka-controls-container[shown='true']~.shaka-text-container) {
	bottom: 15%;
	}
	}

I will update it for better clarity though

[kommunarr]

Thanks for looking at this! This looks nice, although two subtle things still seem off to me.

1. The padding around the icons is so small that the size differences in the svgs is especially noticeable.

2. The top and bottom padding of the icons appears uneven due to the Shaka seek bar having its bottom edge defined by the seeker, not the bar itself. This was already the case, but the low padding makes that especially noticeable as well now.

I hate to defer to the other app so much, but I think their solution can shine light on how to mitigate these problems. They have a 48px height for the controls section, and their seek bar is directly on top of the icons, not a half-seeker's distance away.

[ChunkyProgrammer]

I hate to defer to the other app so much, but I think their solution can shine light on how to mitigate these problems. They have a 48px height for the controls section, and their seek bar is directly on top of the icons, not a half-seeker's distance away.

Not sure what you mean by half-seeker's distance away.

This is what it looks like when I set the height to 48px:

And this is what it looks like without that height set:

[kommunarr]

I'm referring to the visible seek bar being vertically displaced a bit by having the seek pointer not intersect with the controls container:

The easiest way to fix this, I'd imagine, is to add a negative vertical margin such that the visible bar is touching the bottom of the allocated container size.

This is what it looks like when I set the height to 48px:

This looks a bit better, although I'd like to see the icons sized at 48x48 as well, as now the horizontal padding is noticeably smaller

[absidue]

We probably shouldn't move the controls and seek bar too close together otherwise it increases the chance of misclicks, YouTube's seek bar has a much bigger target area and they also expand the seek bar when you hover over it, which is why it is okay for them to put them so close together.

Additionally just want to reiterate again that none of these changes in this pull request should affect touch screens and mobile users as fingers are a lot bigger than a mouse pointer.

[ChunkyProgrammer]

This looks a bit better, although I'd like to see the icons sized at 48x48 as well, as now the horizontal padding is noticeably smaller

This is what it looks like when setting the font size to 48px (some of the icons look too big and the fullscreen icon looks a bit off imo):

This is what it looks like if we only increase the size of the play button:

[kommunarr]

To clarify, my suggestion was to make each icon element 48x48, not to increase the icon size. Am fine with not modifying the seek bar here since increasing the vertical padding should also make the discrepancy less noticeable.

[efb4f5ff-1298-471a-8973-3d47447115dc]

What would be the pro's and cons of this implementation versus current implementation?

[absidue]

Pros:

• Users stop complaning constantly about the controls overlapping over the video too much, which is good for the team's mental health.

Cons:

• Different UIs on desktop and mobile
• More custom CSS