Make video info section more concise #4338

kommunarr · 2023-11-15T15:52:55Z

Make video info section more concise

Pull Request Type

Bugfix
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

simplescreenrecorder-2023-09-20_19.22.02-2023-11-15_09.45.57.mp4

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

absidue · 2023-11-15T16:59:13Z

src/renderer/components/watch-video-info/watch-video-info.scss

-  }
-}
+.videoMetrics {
+  font-size: 12px;


Please choose a larger font size, 16px is considered the minimum that is readable, especially as the items, that are now on that row, used to be 16px and 15px before (stylelint used to complain about that but afaik you disabled everything, including that check, when you did you block and inline size rules).

16px is considered the minimum that is readable

Is it okay if I ask what your source is for this claim? The closest I can find is this article recommending 16 pixels as optimal for mobile, which ends up being fine here as well, as device manufacturers use the reference px size to set the actual rasterizing size based on intended distance of viewing. Not to uphold YouTube as a superior example of things, but they themselves use 12px font for the "1.46M subscribers" text in the image below. For the # of views and likes, they use 14px font. From my research, 12px seems to be the consistent minimum recommended font size (16px should generally be used as the minimum for body text, and 12px is acceptable for supplementary information). If we had a stylelint rule that disallowed font sizes below 16px (which seemingly wasn't being enforced, as I see dozens of instances of 12px and even 11px font-sizes in our codebase), I personally think that's unnecessarily stringent. It's useful in places like here for demarcating levels of importance of information and guiding the eye to salient focal points.

I did increase it to 14px to incorporate your feedback, though, because I think you can achieve that effect here even at that size. I do appreciate the feedback (I'm not a bikeshedder!). I just think 16px or higher for this text draws a jarring level of attention to it compared to the surrounding text, which is why I see the other platforms opting to make this text 14px or smaller.

The stylint checks were optional for so long because we had many different violations in the codebase. Anyway here is the markdown document associated with that accessibility rule:

https://github.com/double-great/stylelint-a11y/tree/main/src/rules/font-size-is-readable

The articles cited there in the justification for the rule are the MDN article for font-size (which doesn't seem to broach the topic of recommended minimum size) and this article talking about body text. When we add this rule back, we should definitely consider adding it as a warning, as there are quite a few exceptions to that rule.

efb4f5ff-1298-471a-8973-3d47447115dc

LGTM

PikachuEXE · 2023-11-24T00:55:41Z

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 · 2023-11-24T02:14:27Z

@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 · 2023-11-24T03:19:10Z

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

github-actions · 2023-12-23T01:43:58Z

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 · 2024-01-23T01:47:04Z

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 · 2024-01-30T01:44:43Z

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

kommunarr · 2024-01-30T13:50:12Z

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

PikachuEXE · 2024-01-30T23:04:02Z

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

kommunarr · 2024-01-30T23:24:33Z

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 · 2024-01-31T00:23:22Z

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 · 2024-01-31T00:33:36Z

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 · 2024-01-31T01:19:40Z

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

…o metrics font size

kommunarr · 2024-01-31T02:11:51Z

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 · 2024-01-31T02:15:58Z

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

…on wrapping

kommunarr · 2024-01-31T02:24:26Z

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

PikachuEXE · 2024-01-31T03:09:17Z

community-post updated too?

…en widths

kommunarr · 2024-01-31T03:17:09Z

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

Look good at 105x px

PikachuEXE · 2024-01-31T03:31:04Z

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

kommunarr · 2024-01-31T04:11:33Z

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 · 2024-01-31T05:38:49Z

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:

* development: Make video info section more concise (FreeTubeApp#4338)

* development: (92 commits) Make video info section more concise (FreeTubeApp#4338) Playlist performance improvements (FreeTubeApp#4597) ! Fix playlist type not passed when playing next/prev item in a user playlist (FreeTubeApp#4623) Properly localize playlist view and video counts (FreeTubeApp#4620) Translated using Weblate (Croatian) Translated using Weblate (German) Translated using Weblate (Croatian) Fix search bar handling of Invidious channel URLs (FreeTubeApp#4568) Local API: List related games in featured channels section (FreeTubeApp#4562) Workaround community post slider dependency incorrectly calculating its size (FreeTubeApp#4598) Add support for viewing movie trailers with local api (FreeTubeApp#4391) Bump the eslint group with 2 updates (FreeTubeApp#4616) Translated using Weblate (French) Translated using Weblate (Finnish) Bump electron from 28.1.4 to 28.2.0 (FreeTubeApp#4611) Translated using Weblate (French) Bump the eslint group with 4 updates (FreeTubeApp#4581) Bump lefthook from 1.6.0 to 1.6.1 (FreeTubeApp#4608) Bump marked from 11.1.1 to 11.2.0 (FreeTubeApp#4612) Bump webpack from 5.89.0 to 5.90.0 (FreeTubeApp#4610) ...

github-actions bot added the PR: waiting for review For PRs that are complete, tested, and ready for review label Nov 15, 2023

FreeTubeBot enabled auto-merge (squash) November 15, 2023 15:53

absidue reviewed Nov 15, 2023

View reviewed changes

kommunarr requested a review from absidue November 15, 2023 23:01

kommunarr force-pushed the feat/more-concise-video-info branch from 09986e6 to 17e826b Compare November 15, 2023 23:03

kommunarr mentioned this pull request Nov 18, 2023

Add back 3 Stylelint configs #4350

Merged

1 task

efb4f5ff-1298-471a-8973-3d47447115dc previously approved these changes Nov 23, 2023

View reviewed changes

github-actions bot added the PR: stale label Dec 23, 2023

efb4f5ff-1298-471a-8973-3d47447115dc removed the PR: stale label Dec 23, 2023

github-actions bot added the PR: stale label Jan 23, 2024

efb4f5ff-1298-471a-8973-3d47447115dc removed the PR: stale label Jan 23, 2024

efb4f5ff-1298-471a-8973-3d47447115dc requested review from PikachuEXE, ChunkyProgrammer and MarmadileManteater January 30, 2024 01:26

kommunarr added 3 commits January 30, 2024 19:55

Implement proposed formatting changes

d828b1f

Increase font-size of video metrics to 14px

d8c9848

More closely colocate title and channel to compensate for larger vide…

756367f

…o metrics font size

kommunarr dismissed efb4f5ff-1298-471a-8973-3d47447115dc’s stale review via 84afad6 January 31, 2024 02:10

kommunarr force-pushed the feat/more-concise-video-info branch from 17e826b to 84afad6 Compare January 31, 2024 02:10

Update breakpoint for single column template to 1000px to minimize ic…

e7605ef

…on wrapping

kommunarr force-pushed the feat/more-concise-video-info branch from 84afad6 to 6f8d1cc Compare January 31, 2024 02:23

Fix like icon being on a different line from the text on smaller scre…

45c135b

…en widths

kommunarr force-pushed the feat/more-concise-video-info branch from 6f8d1cc to 45c135b Compare January 31, 2024 03:15

PikachuEXE previously approved these changes Jan 31, 2024

View reviewed changes

Update all Watch breakpoints to 1050px from 900px

1088bb5

kommunarr dismissed PikachuEXE’s stale review via 1088bb5 January 31, 2024 14:20

efb4f5ff-1298-471a-8973-3d47447115dc requested a review from PikachuEXE February 1, 2024 00:40

PikachuEXE approved these changes Feb 1, 2024

View reviewed changes

efb4f5ff-1298-471a-8973-3d47447115dc approved these changes Feb 1, 2024

View reviewed changes

ChunkyProgrammer approved these changes Feb 1, 2024

View reviewed changes

FreeTubeBot merged commit ad9cabd into FreeTubeApp:development Feb 1, 2024
5 checks passed

github-actions bot removed the PR: waiting for review For PRs that are complete, tested, and ready for review label Feb 1, 2024

PikachuEXE added a commit to PikachuEXE/FreeTube that referenced this pull request Feb 2, 2024

Merge branch 'development' into custom-builds/current

e372f51

* development: Make video info section more concise (FreeTubeApp#4338)

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Make video info section more concise #4338

Make video info section more concise #4338

kommunarr commented Nov 15, 2023 •

edited

Loading

absidue Nov 15, 2023

kommunarr Nov 15, 2023

kommunarr Nov 15, 2023

absidue Nov 15, 2023

kommunarr Nov 15, 2023

efb4f5ff-1298-471a-8973-3d47447115dc left a comment

PikachuEXE commented Nov 24, 2023 •

edited

Loading

kommunarr commented Nov 24, 2023

PikachuEXE commented Nov 24, 2023

github-actions bot commented Dec 23, 2023

github-actions bot commented Jan 23, 2024

PikachuEXE commented Jan 30, 2024

kommunarr commented Jan 30, 2024

PikachuEXE commented Jan 30, 2024

kommunarr commented Jan 30, 2024 •

edited

Loading

PikachuEXE commented Jan 31, 2024

kommunarr commented Jan 31, 2024 •

edited

Loading

PikachuEXE commented Jan 31, 2024

kommunarr commented Jan 31, 2024

PikachuEXE commented Jan 31, 2024

kommunarr commented Jan 31, 2024

PikachuEXE commented Jan 31, 2024

kommunarr commented Jan 31, 2024

PikachuEXE left a comment

PikachuEXE commented Jan 31, 2024

kommunarr commented Jan 31, 2024

PikachuEXE commented Jan 31, 2024

Make video info section more concise #4338

Make video info section more concise #4338

Conversation

kommunarr commented Nov 15, 2023 • edited Loading

Make video info section more concise

Pull Request Type

Related issue

Description

Video

Testing

Desktop

Additional context

absidue Nov 15, 2023

Choose a reason for hiding this comment

kommunarr Nov 15, 2023

Choose a reason for hiding this comment

kommunarr Nov 15, 2023

Choose a reason for hiding this comment

absidue Nov 15, 2023

Choose a reason for hiding this comment

kommunarr Nov 15, 2023

Choose a reason for hiding this comment

efb4f5ff-1298-471a-8973-3d47447115dc left a comment

Choose a reason for hiding this comment

PikachuEXE commented Nov 24, 2023 • edited Loading

kommunarr commented Nov 24, 2023

PikachuEXE commented Nov 24, 2023

github-actions bot commented Dec 23, 2023

github-actions bot commented Jan 23, 2024

PikachuEXE commented Jan 30, 2024

kommunarr commented Jan 30, 2024

PikachuEXE commented Jan 30, 2024

kommunarr commented Jan 30, 2024 • edited Loading

PikachuEXE commented Jan 31, 2024

kommunarr commented Jan 31, 2024 • edited Loading

PikachuEXE commented Jan 31, 2024

kommunarr commented Jan 31, 2024

PikachuEXE commented Jan 31, 2024

kommunarr commented Jan 31, 2024

PikachuEXE commented Jan 31, 2024

kommunarr commented Jan 31, 2024

PikachuEXE left a comment

Choose a reason for hiding this comment

PikachuEXE commented Jan 31, 2024

kommunarr commented Jan 31, 2024

PikachuEXE commented Jan 31, 2024

kommunarr commented Nov 15, 2023 •

edited

Loading

PikachuEXE commented Nov 24, 2023 •

edited

Loading

kommunarr commented Jan 30, 2024 •

edited

Loading

kommunarr commented Jan 31, 2024 •

edited

Loading