Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix: Video description collapsible and no longer hijacks page scroll #5665

Merged
merged 21 commits into from
Dec 9, 2024
Merged

Fix: Video description collapsible and no longer hijacks page scroll #5665

merged 21 commits into from
Dec 9, 2024

Conversation

sabs21
Copy link
Contributor

@sabs21 sabs21 commented Sep 8, 2024

Fix: Video description collapsible and no longer hijacks page scroll

Pull Request Type

  • Bugfix
  • Feature Implementation
  • Documentation
  • Other

Related issue

closes #4821

Description

Long video descriptions will now have their overflow hidden to prevent hijacking the scroll of the page. To see the full description and reintroduce the scrollbar, the user must click 'Click to View Description' shown at the bottom of the description. The 'Click to View Description' button is only shown for descriptions with a computed CSS height greater than or equal to 300 pixels.

Screenshots

CURRENT:
image

CHANGE (Description not expanded):
image

CHANGE (Description expanded):
image

Testing

I tested this change on a video with a long description (description exceeds CSS height of 300px) and a video with a short description. I verified:

  • Clicking 'Click to View Description' makes the description scrollable and that the button removes itself.
  • Short descriptions do not show the 'Click to View Description' button.

Desktop

  • OS: Windows 10
  • OS Version: 22H2, Build 19045.4842
  • FreeTube version: v0.21.3 Beta

Additional context

@sabs21
fix: description no longer hijacks scroll focus
671fe01 
introduced a button in video descriptions shwon as 'Click to View Description'
which allows the user to see the full description and scroll within
the description card.
@sabs21
fix: 'Click to View Description' button only shown for long descriptions
8bba22f 
description length is based on computed css height of description
container
@FreeTubeBot FreeTubeBot enabled auto-merge (squash) September 8, 2024 01:31
@github-actions github-actions bot added the PR: waiting for review For PRs that are complete, tested, and ready for review label Sep 8, 2024
@efb4f5ff-1298-471a-8973-3d47447115dc
Copy link
Member

Could you explain why you chose for 300px? Is the behavior the same as YT? If not why is this better?

@sabs21
Copy link
Contributor Author

sabs21 commented Sep 9, 2024

Could you explain why you chose for 300px? Is the behavior the same as YT? If not why is this better?

I chose 300px because that's the height/max-block-size the description was already set to (look at .videoDescription in WatchVideoDescription.css).

@kommunarr
Copy link
Collaborator

kommunarr commented Sep 16, 2024 •
edited
Loading

My (purely visual, untested) feedback: I like YT's UI for this better, particularly that the click area is the full description box so it's easier to click, the "more" button is casual, placed inside the flow of the description, and not too strongly competing for visual attention with an underline (and at least for En-US users, in lower case), and the corresponding "less". Also like that it does so by fully unraveling it rather than just making the div scrollable.

@sabs21
Copy link
Contributor Author

sabs21 commented Sep 16, 2024

My (purely visual, untested) feedback: I like YT's UI for this better, particularly that the click area is the full description box so it's easier to click, the "more" button is casual, placed inside the flow of the description, and not too strongly competing for visual attention with an underline (and at least for En-US users, in lower case), and the corresponding "less". Also like that it does so by fully unraveling it rather than just making the div scrollable.

Agreed. I went ahead and implemented your feedback in another branch. Here are screenshots of what I did. If this looks like its on a better track, I'll merge my new branch into this one.

The only piece here that I didn't do is make the description fully unravel. The reason is that for very long descriptions, the description becomes longer than the recommended videos component on the right. This causes the page to auto load recommended videos which makes the page longer, causing the description to partially scroll back up and makes scrolling to the bottom of the description difficult.

On load:
image

Hovering over the description (entire description is clickable while collapsed):
image

Clicked description:
image

Show less:
image

@github-actions github-actions bot added PR: merge conflicts / rebase needed and removed PR: waiting for review For PRs that are complete, tested, and ready for review labels Sep 23, 2024
@github-actions GitHub Actions
Copy link
Contributor

This pull request has conflicts, please resolve those before we can evaluate the pull request.

@github-actions GitHub Actions
Copy link
Contributor

Conflicts have been resolved. A maintainer will review the pull request shortly.

@efb4f5ff-1298-471a-8973-3d47447115dc
Copy link
Member

@kommunarr any additional thought on the way its implemented now?

@efb4f5ff-1298-471a-8973-3d47447115dc efb4f5ff-1298-471a-8973-3d47447115dc added the PR: waiting for review For PRs that are complete, tested, and ready for review label Sep 28, 2024
@kommunarr
Copy link
Collaborator

Sorry for the delay, that looks great @sabs21! Please merge that in.

auto-merge was automatically disabled October 4, 2024 00:07

Head branch was pushed to by a user without write access

@FreeTubeBot FreeTubeBot enabled auto-merge (squash) October 4, 2024 00:07
@kommunarr kommunarr added the PR: waiting for review For PRs that are complete, tested, and ready for review label Nov 23, 2024
@PikachuEXE
Copy link
Collaborator

PikachuEXE commented Nov 24, 2024 •
edited
Loading

Anyone got a video with short description for testing?

Update 1: The one in one of the comments is removed

@PikachuEXE
Copy link
Collaborator

Just got error when trying to find a video with short description
https://youtu.be/ASeJV9KGAOc

image

@efb4f5ff-1298-471a-8973-3d47447115dc efb4f5ff-1298-471a-8973-3d47447115dc added PR: changes requested and removed PR: waiting for review For PRs that are complete, tested, and ready for review labels Nov 25, 2024
auto-merge was automatically disabled December 1, 2024 21:14

Head branch was pushed to by a user without write access

@FreeTubeBot FreeTubeBot enabled auto-merge (squash) December 1, 2024 21:14
@efb4f5ff-1298-471a-8973-3d47447115dc
Copy link
Member

Show Less is now seen in the top of the description box but i expected it to be shown. Was this an intentional change?

@sabs21
Copy link
Contributor Author

sabs21 commented Dec 7, 2024

Show Less is now seen in the top of the description box but i expected it to be shown. Was this an intentional change?

No I didn't expect that to happen, I'll work on fixing that now

auto-merge was automatically disabled December 7, 2024 04:14

Head branch was pushed to by a user without write access

@FreeTubeBot FreeTubeBot enabled auto-merge (squash) December 7, 2024 04:14
@sabs21
Copy link
Contributor Author

sabs21 commented Dec 7, 2024

Just fixed that, my guess is that when I merged the latest development, there was some css that caused the show less button to appear at the top.

@efb4f5ff-1298-471a-8973-3d47447115dc
Copy link
Member

I cant remember ...more to be this far to the right. Did this also break?

image

@sabs21
Copy link
Contributor Author

sabs21 commented Dec 8, 2024

I cant remember ...more to be this far to the right. Did this also break?

image

No, that hasn't changed. You can see this same padding in a screenshot within my September 16th post #5665 (comment)

@efb4f5ff-1298-471a-8973-3d47447115dc efb4f5ff-1298-471a-8973-3d47447115dc added PR: waiting for review For PRs that are complete, tested, and ready for review and removed PR: changes requested labels Dec 8, 2024
@FreeTubeBot FreeTubeBot merged commit e3e2e77 into FreeTubeApp:development Dec 9, 2024
6 checks passed
@github-actions github-actions bot removed the PR: waiting for review For PRs that are complete, tested, and ready for review label Dec 9, 2024
@efb4f5ff-1298-471a-8973-3d47447115dc
Copy link
Member

efb4f5ff-1298-471a-8973-3d47447115dc commented Dec 9, 2024 •
edited
Loading

@sabs21 sorry that this was caught after merger. Would it be possible for you to create a followup PR to address the following issues.

When expanding the description it scrolls all the way to the bottom instead of starting at top

9775XGq8GD.mp4

Noticed a difference on FT vs YT

YT you can highlight text and open the link in the preview

firefox_QCVCIbGSag.mp4

This isnt possible within FT. I can only highlight all the text within the collapsed container

W23TM1Suvm.mp4

Not able to highlight text is minor but maybe the url is?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@kommunarr kommunarr kommunarr approved these changes

@efb4f5ff-1298-471a-8973-3d47447115dc efb4f5ff-1298-471a-8973-3d47447115dc efb4f5ff-1298-471a-8973-3d47447115dc approved these changes

@PikachuEXE PikachuEXE PikachuEXE approved these changes

@absidue absidue Awaiting requested review from absidue

@ChunkyProgrammer ChunkyProgrammer Awaiting requested review from ChunkyProgrammer

@MarmadileManteater MarmadileManteater Awaiting requested review from MarmadileManteater

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

[Feature Request]: Make the description box collapsible
6 participants
@sabs21 @efb4f5ff-1298-471a-8973-3d47447115dc @kommunarr @PikachuEXE @ChunkyProgrammer @FreeTubeBot