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.

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

Fix raw HTML in video descriptions #3946

Merged
merged 1 commit into from
Aug 28, 2023

Conversation

kommunarr
Copy link
Collaborator

@kommunarr kommunarr commented Aug 26, 2023

Fix raw HTML in video descriptions

Pull Request Type

  • Bugfix

Related issue

closes #3945

Description

Updates channel and video descriptions to use v-html instead of passing the text as-is, thus resolving issues with links, etc. being displayed as raw HTML.

Edit: As far as I can see, this currently only seems to apply to hashtag links in video descriptions in the History section, because YT itself does not display any HTML in its video descriptions on its main site. That said, this should also futureproof us if/when they send more links or data in descriptions in HTML form.

Screenshots

Before:
Screenshot_20230825_231837

After:
Screenshot_20230825_231926

Testing

Replication steps (thank you to @PikachuEXE):

  1. Change Video View Type to List (to show description)
  2. View https://youtu.be/pBk4NYhWNMM (cannot use mark as watched)
  3. Visit History page
  4. Confirm description shown contains link for hash tag #BarbieTheMovie

Desktop

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

@FreeTubeBot FreeTubeBot enabled auto-merge (squash) August 26, 2023 04:36
@github-actions github-actions bot added the PR: waiting for review For PRs that are complete, tested, and ready for review label Aug 26, 2023
@absidue
Copy link
Member

absidue commented Aug 26, 2023

Where in FreeTube did you find those hashtags parsed to links? I tried both the search results and on the channel page, with both the local and Invidious API (restarting in between, so it didn't use the search results cache), they all just have pure text hashtags (no raw html or links). I checked that I'm definitely on this branch because the source code uses v-html instead of the escaped syntax.

search
search-devtools

@kommunarr
Copy link
Collaborator Author

kommunarr commented Aug 26, 2023

@absidue I'm glad you brought this up, because it seems like it's Occam's razor saving the day: weirdly enough, YT just doesn't HTML-ify hashtag links on those screens, so ours don't either. I'm not aware on the top of my head how Invidious and our local API grab data for the History section, but that apparently does pass the HTML-ified links, and this change fixes the bug in both cases. You can test with this video. So, needless to say, this fixes the issue of when we do get that information, but YouTube is just simply not treating most things as links in descriptions. Additionally, the only links YouTube cares to HTML-ify at the moment are hashtag links, so I'll add that clarification.

Screenshot_20230826_102023
Screenshot_20230826_101354

@absidue
Copy link
Member

absidue commented Aug 26, 2023

The history page only uses cached data, so if the video is marked watched from the watch page, it uses the watch page description which contains links and formatting, however if you marked it as watched from a video list, it only uses the short description snippet that YouTube provides in its search/channel/trending/other API response, which doesn't contain any links.

(I have watch history disabled, not for privacy reasons, it's just an annoyance to me, so this is an issue I would never have noticed without you mentioning it 🙈).

@kommunarr
Copy link
Collaborator Author

kommunarr commented Aug 26, 2023

Thanks for the info! Yeah, I don't end up using it much, but it seems like grid vs list view and the history section keep coming up in usability testing. Is there anything that should be altered in this PR before moving forward?

@absidue
Copy link
Member

absidue commented Aug 27, 2023

Haven't tested it yet but the code looks good, please don't let my review hold back anyone else's.

@PikachuEXE
Copy link
Collaborator

@jasonhenriquez
Please add testing section next time :S

My steps:

  • Change Video View Type to List (to show description)
  • View https://youtu.be/pBk4NYhWNMM (cannot use mark as watched)
  • Visit History page
  • Confirm description shown contains link for hash tag #BarbieTheMovie

image

@kommunarr
Copy link
Collaborator Author

@jasonhenriquez Please add testing section next time 🈂️

I'm so sorry for that, thank you for the call-out! I will make sure to put replication steps for these types of issues going forward.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@FreeTubeBot FreeTubeBot merged commit c5be5e5 into FreeTubeApp:development Aug 28, 2023
5 checks passed
@github-actions github-actions bot removed the PR: waiting for review For PRs that are complete, tested, and ready for review label Aug 28, 2023
PikachuEXE added a commit to PikachuEXE/FreeTube that referenced this pull request Aug 29, 2023
* development: (65 commits)
  Make constants imported from @fortawesome/free-solid-svg-icons ordered by name again (FreeTubeApp#3958)
  Replace labeler workflow with GH labeler (FreeTubeApp#3966)
  Fix HTML styling (e.g., hashtag links) showing up as raw HTML in descriptions (FreeTubeApp#3946)
  Make certain controls non-selectable / non-draggable - Part II (FreeTubeApp#3957)
  Translated using Weblate (German)
  Show video list buttons on hover or focus (FreeTubeApp#3954)
  Bump @babel/eslint-parser from 7.22.10 to 7.22.11 (FreeTubeApp#3962)
  Bump youtubei.js from 6.0.0 to 6.1.0 (FreeTubeApp#3965)
  Bump eslint-plugin-n from 16.0.1 to 16.0.2 (FreeTubeApp#3964)
  Bump eslint from 8.47.0 to 8.48.0 (FreeTubeApp#3963)
  Bump marked from 7.0.4 to 7.0.5 (FreeTubeApp#3961)
  Bump @babel/core from 7.22.10 to 7.22.11 (FreeTubeApp#3959)
  Make certain controls non-selectable / non-draggable (FreeTubeApp#3947)
  Add updated video resolution to auto selector (FreeTubeApp#3935)
  Fix Save icon blocking issue (FreeTubeApp#3951)
  * Update URL parser to recognize youtube.com/live/xxxxxxx (FreeTubeApp#3930)
  Translated using Weblate (Czech)
  Translated using Weblate (Portuguese)
  Translated using Weblate (Polish)
  Translated using Weblate (Arabic)
  ...

# Conflicts:
#	src/renderer/main.js
#	src/renderer/scss-partials/_ft-list-item.scss
PikachuEXE added a commit to PikachuEXE/FreeTube that referenced this pull request Aug 29, 2023
* feature/playlist-2023-05: (77 commits)
  * Update add to playlist prompt to add sort options
  ! Fix user playlist view incorrectly sorted playlists by latest updated first when filtered
  ! Fix add to play prompt max width
  * Update sorting options labels
  Make constants imported from @fortawesome/free-solid-svg-icons ordered by name again (FreeTubeApp#3958)
  Replace labeler workflow with GH labeler (FreeTubeApp#3966)
  ! Fix unable to visit previous video when playing first video in a playlist
  * Update upcoming video to allow saving in playlist
  * Show filtering input & sorting element when no. of playlist > 1
  Fix HTML styling (e.g., hashtag links) showing up as raw HTML in descriptions (FreeTubeApp#3946)
  Make certain controls non-selectable / non-draggable - Part II (FreeTubeApp#3957)
  Translated using Weblate (German)
  Show video list buttons on hover or focus (FreeTubeApp#3954)
  Bump @babel/eslint-parser from 7.22.10 to 7.22.11 (FreeTubeApp#3962)
  Bump youtubei.js from 6.0.0 to 6.1.0 (FreeTubeApp#3965)
  Bump eslint-plugin-n from 16.0.1 to 16.0.2 (FreeTubeApp#3964)
  Bump eslint from 8.47.0 to 8.48.0 (FreeTubeApp#3963)
  Bump marked from 7.0.4 to 7.0.5 (FreeTubeApp#3961)
  Bump @babel/core from 7.22.10 to 7.22.11 (FreeTubeApp#3959)
  Make certain controls non-selectable / non-draggable (FreeTubeApp#3947)
  ...
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Bug]: Raw HTML showing in channel & video descriptions
5 participants