feat: add styles to hide 'Includes Paid Promotion' elements

[peterdanwan]

This pull request attempts to close #2634.

As discussed in #2634, certain videos include a clickable link on top of the video titled, Includes Paid Promotion as shown in the video below:

2024-11-18.20-09-28.mp4

With the changes made, the extension now hides the HTML elements related to the Includes Paid Promotion link:

2024-11-18.20-07-57.mp4

Please let me know if there's anything else I should change - I'm happy to learn and fix more issues!

[ImprovedTube]

hi! thanks @peterdanwan!

• button in our menu skeleton, so the feature isn't always activated.
• name in the locales (at least the english one)

structure is always increasing in relevance, especially for simple features (we are approaching 200.) Compare: #2251

(from #2676 (comment))

[peterdanwan]

Hi @ImprovedTube, thank you for the tips! I'll try and study the pull request you linked and upload my changes ASAP

[peterdanwan]

Hello @ImprovedTube, just wanted to give a progress update.

I was able to add a switch to the Player Menu, called Hide Includes Paid Promotion. However, it's not fully functional yet.

Currently, the CSS styling I added is applied regardless if I enable or disable the Hide Includes Paid Promotion switch. By chance, do you have any other tips?

Thanks again for your time!

[ImprovedTube]

hi and thank you again! @peterdanwan

• The name can be Hide: "includes paid promotion"
• We currently add all user settings to CSS. As attributes of the root this works already before the pages loaded.
  • So that is convenient as you can finish the the feature with out JS: CTRL+F =true in the later commit in the other PR
    • But it is a little better if you inject the css with JS also, first of all depending ImprovedTube.Storage.____ , because Unfortunately browsers might process CSS lines from right to left. Both is fast, but on a long term we ca go back to inject everything with JS, which guarantees it takes 0 cpu when off.
      • Yet we can keep our CSS condition even then, since it also serves another purpose, that it will automatically turn off when the user turns it off.
  • Later we can also support convenience, like uBlockOrigin rules,
    which, for example, makes this project efficient : https://github.com/gijsdev/ublock-hide-yt-shorts/blob/master/list.txt

[peterdanwan]

Hi @ImprovedTube, sorry for the late reply!

I was wondering if I could get some clarification on how the existing code works and if you could show me how I should modify the files below:

• _locales/en/messages.json:

  

  • is this the correct text that I should display on the switch?

• js&css/extension/www.youtube.com/appearance/player/player.css

  • should I focus solely on adding code here?
  • I tried to use the CSS attribute selectors that I saw in this file (e.g., data-page-type=video), but I actually wasn't too sure how the "it-hide-includes-paid-promotion" attribute is being set. Are the attributes that are prefaced by it- something that is set within the source code?

   html[data-page-type=video][it-hide-includes-paid-promotion=true] .ytp-paid-content-overlay,
   	.ytp-paid-content-overlay-link {
   	  display: none !important;
   	}

• menu/skeleton-parts/player.js

  • should I remove the changes made here?

[peterdanwan]

Hi @ImprovedTube, I think I got it to work! Can you let me know if this is good or which files I should change from here?

Hides the label when the data-page-type = video (i.e., on any video page)

2024-11-28.13-31-38.mp4

Hides the label when the data-page-type = other (e.g., on the subscriptions page)

2024-11-28.14-56-19.mp4

Hides the label when the data-page-type = home (i.e., on the home page)

2024-11-28.14-57-38.mp4

[peterdanwan]

Hello @ImprovedTube, I squashed my commits (resolving any merge conflicts), and rebased my branch's changes on top of master

[ImprovedTube]

hi and thank you again! @peterdanwan
sorry to answer late too

Are the attributes that are prefaced by it- something that is set within the source code?

yes. it is convenient, but not necessarily CPU-efficient as browser might process css rules from right to left. So on a long term, we can move the css to JS anyways (starting with the rarest features using the most lines of CSS)
https://github.com/code-charity/youtube/wiki/Contributing#adding-a-feature

should I remove the changes made here?

no, the menu entry is necessary. Currently we also have appearance : player, so i'm moving it (besides, it doesn't necessarily make sense to have two separate sections, so we could make them appear both in once too)