Make video info section more concise

[kommunarr]

Make video info section more concise

Pull Request Type

• [x] Bugfix
• [x] Feature Implementation

Related issue

closes #4336

Description

• Puts title on its own row
• Puts video info section on its own row
• Puts subscribe button & video buttons on their own row
• Fixes bug of videoOptions buttons overflowing the video info section that occurred on some viewport widths

Video

https://github.com/FreeTubeApp/FreeTube/assets/84899178/18ce83a6-c7e9-4001-9fe5-d6e6ea4a3711

Edit: modified the publish date, # of views, and likes to be 1.5 pts larger. Also narrowly reduced the margin between the subscription button and title.

Testing

• Ensure that appearance is great at all screen sizes
• Ensure that the video options buttons no longer extend past the container when resizing viewport

Desktop

• OS: OpenSUSE Tumbleweed
• OS Version: 2023xxxx
• FreeTube version: 0.19.1

Additional context

[PikachuEXE]

I find it weird to see like number+icon left alone on the right now Feels like it can be moved to video info row

[kommunarr]

@PikachuEXE Thank you, will consider it if others prefer as well - that is YouTube's approach that was considered for the main issue, but I don't really have a super strong preference

[PikachuEXE]

It's not blocking especially if it's following YT Just feel like it look strange now especially with wide window

[github-actions[bot]]

This PR is stale because it has been open 28 days with no activity. Remove stale label or comment or this will be closed in 14 days.

[github-actions[bot]]

This PR is stale because it has been open 28 days with no activity. Remove stale label or comment or this will be closed in 14 days.

[PikachuEXE]

Maybe the breakpoint can be set at a greater width? I see this with 901px width

[kommunarr]

@PikachuEXE The breakpoint at which "Up Next" is put on its own level?

[PikachuEXE]

Sorry for being unclear, it's the buttons now arranged (squeezed) into a square

[kommunarr]

Are you talking about setting it to wrap into a box earlier? If you mean the other way around, that is difficult to do without dynamically shrinking the button size, as this is just the flex behavior. What happens when it doesn't compress is this existing bug mentioned in the 4th bullet point in the description (taken from nightly):

[PikachuEXE]

Are you talking about setting it to wrap into a box earlier?

As I said Maybe the breakpoint can be set at a greater width? (e.g. 1000px)

[kommunarr]

Sorry, I'm having trouble parsing what you mean. It's flex, so it's just wrapping dynamically based off of the space available.

[PikachuEXE]

I mean the breakpoints for different panels in watch page (src/renderer/views/Watch/Watch.scss) (Probably replace all min-width: 901px w/ min-width: 1001px

1001px 999px

Also I think this should be rebased/merged with dev to be able to test probably due to new buttons

[kommunarr]

Ah, I am terrible at reading, it seems! Increased it to 1000px from 900px.

Also I think this should be rebased/merged with dev to be able to test probably due to new buttons

Did this as well now

[PikachuEXE]

A few more pixels would be great :) at 1005px:

[kommunarr]

Blerg, good callout. I just made it 1050px to compensate for other languages with a longer word for "Unsubscribe" or "Subscribe"

[PikachuEXE]

community-post updated too?

[kommunarr]

I modified the wrong likeCount from a different component & didn't realize it because I added the change in my local template. Not my brightest day...

[PikachuEXE]

Oh wait, I enabled theatre mode and the breakpoint is not updated for it... 977px:

[kommunarr]

And it's even narrower if the sidebar is fully expanded. I don't think we can fully prevent the button container from wrapping early under these scenarios without picking an excessively large breakpoint

[PikachuEXE]

I am saying that the breaking point for theatre mode should also be 1050px (since breakpoint for non theatre mode updated) (The one with &.useTheatreMode { & @include theatre-mode-template;) 1051px: 1047px: