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

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

LGTM but i will wait for @kommunarr blessing first

[kommunarr]

Sorry for the late response. You know, because of *gestures broadly*. I do still feel that the anemic icon bar height makes the icon height differences on the far right oddly visually dominant and off-putting. Here's my suggestion with making the .shaka-controls-button-panel > * height 40px instead of 32px.

Before	After

[ChunkyProgrammer]

@kommunarr I added a height of 40px and a line-height of 0.5

[kommunarr]

Thanks! I didn't see this before, but now I notice this makes the titles intersect with the seek bar now :(

[ChunkyProgrammer]

Thanks! I didn't see this before, but now I notice this makes the titles intersect with the seek bar now :(

This should be fixed now :)

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

Hmm if i go fullscreen the controls dont use allot of width space. They dont appear as big as in the video.js player.

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

Hmm if i go fullscreen the controls dont use allot of width space. They dont appear as big as in the video.js player.

Idk if this is an issue but i thought it was worth pointing out and collecting the thoughts of other members on this

[kommunarr]

Idk if this is an issue but i thought it was worth pointing out and collecting the thoughts of other members on this

I do think that's a fair concern from an accessibility & usability perspective. I have seen a good deal of user reports regarding issues with the target size. I haven't re-tested the PR in a bit and do not know if that has already been addressed.

[PikachuEXE]

Uploading new vs old coz I don't see one here...(not tested yet)
Not sure if mobile is changed, you should test

New

Old

[PikachuEXE]

Idk if this is an issue but i thought it was worth pointing out and collecting the thoughts of other members on this

I totally don't understand what you have said

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

Pika im talking about video.js icon size vs shaka

[PikachuEXE]

Oh, video.js, I read it as not as large as shaka player lol
I can't compare without screenshots~

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

Hmm on a second thought moving controls to the bottom didn't affect the icon size. If its an real issue than it could be addressed in a separate PR. But i doubt that this is an issue as users didn't report any issues with the size of the icons so im not going to look into it too much