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

could you make scrollbar on the right hidden as it's a bit distracting when watching videos and a video web page is not that long to need it. [youtube classic] #106

Open
mhwgoo opened this issue Oct 25, 2024 · 59 comments

Comments

@mhwgoo
Copy link

mhwgoo commented Oct 25, 2024

My browser has this feature, but this script overrides it, thanks!

@mhwgoo mhwgoo changed the title could you make scrollbar on the right hidden as it's a bit distracting when watching videos and a video web page is not that long to need it. could you make scrollbar on the right hidden as it's a bit distracting when watching videos and a video web page is not that long to need it. [youtube classic] Oct 25, 2024
@adamlui
Copy link
Owner

adamlui commented Oct 26, 2024

Can you disable the script, then screenshot what you mean?

@mhwgoo
Copy link
Author

mhwgoo commented Oct 26, 2024

Sorry I may have misjudged yesterday. It is my browser's little quirk, not your userscript. The scenario is that when the youtube webpage is refreshed, all prior configs and this youtube classic userscript got lost. Like this:

  • before refreshment:
    Screenshot 2024-10-26 at 10 52 42

  • after refreshment:
    Screenshot 2024-10-26 at 10 53 09

@adamlui adamlui added bug and removed enhancement labels Oct 27, 2024
@adamlui
Copy link
Owner

adamlui commented Oct 27, 2024

Hey @mhwgoo when I refresh it stays square, what browser and userscript manager are you using?

Also do you think it should hide Shorts?

@mhwgoo
Copy link
Author

mhwgoo commented Oct 27, 2024

I've been using qutebrowser recently, and I put your script under $HOME//.qutebrowser/greasemonkey folder as the official docs indicate.

I dont' know about others, but I never watch Shorts, and I'd like it to be hidden.

BTW, it'd be great if ad nodes could be deleted and not rendered (instead of hidden). I wrote a little something:

window.addEventListener('animationstart', function() {
    'use strict';

    var ads = document.getElementsByTagName("ytd-ad-slot-renderer");
    for (var i = 0; i < ads.length; i++) {
        ads[i].parentNode.parentNode.remove();
    }
});

It sometimes works, sometimes doesn't. I don't know why. Could you add this kind of feature? I'm not familiar with javascript and the workings of youtube. Thanks!

adamlui added a commit to adamlui/youtube-classic that referenced this issue Oct 28, 2024
@mhwgoo
Copy link
Author

mhwgoo commented Oct 28, 2024

It looks like it works when there is this css style:

ytd-ad-slot-renderer {
  display: none;
}

@adamlui
Copy link
Owner

adamlui commented Oct 28, 2024

Thanks for the info @mhwgoo I updated userscript so Shorts sections are now hidden

Re: qutebrowser refresh bug, I downloaded the Windows installer from https://github.com/qutebrowser/qutebrowser/releases but BitDefender alerted me to malware...

image

...so I'm not comfortable testing it unfortunately

It looks like it works when there is this css style:

ytd-ad-slot-renderer {
  display: none;
}

Do you wanna be a contributor by adding it to the CSS? (or I could do it for you if too lazy)

@mhwgoo
Copy link
Author

mhwgoo commented Oct 28, 2024

ytd-ad-slot-renderer {
  display: none;
}

This only hides the node with a black block still there. But with this portion of css, the following javascript achieves my intention of making ads disappear:

window.addEventListener('animationstart', function() {
    'use strict';

    var ads = document.getElementsByTagName("ytd-ad-slot-renderer");
    for (var i = 0; i < ads.length; i++) {
        ads[i].parentNode.parentNode.remove();
    }
});

I'm not sure it's the right way from your expert opinion, afterall I never write javascript and css projects before. I mean, I think the above code is a bit weird, it trys to delete nodes, why does it need the support of the node being display: none;?

@adamlui
Copy link
Owner

adamlui commented Oct 28, 2024

Ok I understand now, for the removal the shortest command is:

document.querySelectorAll('ytd-ad-slot-renderer').forEach(ad => ad.parentNode.parentNode.remove())

... and are you saying, when you added the remover using event listener, sometimes it removed, sometimes it did not, but when you also add teh CSS, it always removed? (if so that is quite strange since CSS does not affect whether listener timing was correct so would still show the black boxes)

@adamlui
Copy link
Owner

adamlui commented Oct 28, 2024

NVM I understand what you're saying, "with this portion of css" you meant the selector in the remover, but still it doesn't always remove. Let me figure out the best way brb

@mhwgoo
Copy link
Author

mhwgoo commented Oct 28, 2024

Yeah, you got what I meant. Together "with this portion of css", the above javascript makes the whole youtube web page appear about right (deleted the ad nodes and thus not displaying them). Maybe because the eventlistener's chosen trigger type is animationstart? I've tested other types including load, not even close. Super weird. Thanks for your help:)

adamlui added a commit to adamlui/youtube-classic that referenced this issue Oct 28, 2024
@adamlui
Copy link
Owner

adamlui commented Oct 28, 2024

Ok I figured it out, it kept re-adding so a mutation observer is the best solution, can you update to the latest version 2024.10.28.3 and test it out in qutebrowser

@adamlui
Copy link
Owner

adamlui commented Oct 28, 2024

One thing I noticed, now when scrolling and lazy loading finishes, new ads are re-added but instantly removed, so the grid of videos compresses to fill in blank space and all the thumbnails move.

Before when hiding only, this phenomenon does not occur, but there are ugly gaps. Which way is worse? Also what do you think about an option to hide or remove so user picks their poison?

@adamlui
Copy link
Owner

adamlui commented Oct 28, 2024

Actually I just tested without the script, YouTube already jars the user by scrolling up instead of staying in place, so I think they will be used to this disorientation already and your ad removal idea is best

@adamlui
Copy link
Owner

adamlui commented Oct 28, 2024

Also check this out

image

Removal results in ugly gaps at ends of some rows for me

@adamlui
Copy link
Owner

adamlui commented Oct 28, 2024

NVM jsut fixed it also the grid no longer rearranges either

@mhwgoo
Copy link
Author

mhwgoo commented Oct 28, 2024

After my last comment, I found youtube is so gross that it keeps refreshes itself with new ads. Just when I was figuring it out, your message came. Just in time. I will test it and think about your question after dinner. Thanks!

@adamlui
Copy link
Owner

adamlui commented Oct 28, 2024

Btw Google employees closely follow my git activity, and recently YouTube notoriously warns accounts for running ad blocker, also Chrome team just stirred great controversy by banning popular AdBlock extension, so out activity here might draw scrutiny towards this script (but they dont control my publishing so no fear of Chrome Store punishment, just they could add code to block this script in the future)

@mhwgoo
Copy link
Author

mhwgoo commented Oct 28, 2024

Hi @adamlui, I tested the latest version, and it seemed that the page didn't appear as intended. It had this same appearance as soon as the page was first rendered, scrolled down and scrolled back up. Youtube's patterned ad spots were still there. (In fact I had thought about deleting nodes according to this pattern but given up this way as pattern could easily vary in the future)
Screenshot 2024-10-28 at 22 05 32

@mhwgoo
Copy link
Author

mhwgoo commented Oct 28, 2024

I did a little thought experiment after I found yt's refreshment activity with the probably non-idiomatic ugly repetitive js code below in a standalone userscript together with a global stylesheet.css, just to offer some immature ideas here. The page appeared a lot cleaner when first loaded, scrolled down and back up (with occasional transient display:none blocks though).

var ads = document.getElementsByTagName("ytd-ad-slot-renderer");

window.addEventListener('animationstart', function() {
    if (ads) {
        for (var i = 0; i < ads.length; i++ ) {
            ads[i].parentNode.parentNode.remove();
        }
    }
    ads = document.getElementsByTagName("ytd-ad-slot-renderer");
});

window.addEventListener('animationend', function() {
    if (ads) {
        for (var i = 0; i < ads.length; i++ ) {
            ads[i].parentNode.parentNode.remove();
        }
    }
    ads = document.getElementsByTagName("ytd-ad-slot-renderer");
});

window.addEventListener('load', function() {
    if (ads) {
        for (var i = 0; i < ads.length; i++ ) {
            ads[i].parentNode.parentNode.remove();
        }
    }
    ads = document.getElementsByTagName("ytd-ad-slot-renderer");
});

@mhwgoo
Copy link
Author

mhwgoo commented Oct 28, 2024

In fact I had been using Brave browser for several years until a few days ago. Brave did some awesome special treatments with yt, making it look like there were no ad at all in all pages as well as within each video. Don't know how Brave achieves that. So I couldn't imagine yt has become like this. If it wanted to counter ad blocks, it'd better take on some big players like Brave Browser first.

@adamlui
Copy link
Owner

adamlui commented Oct 28, 2024

Actually Google triggered a ton of users to switch to Brave after the banning alert. But I will fix it to work in qutebrowser but tomorrow because I was up all night doing something so I have to sleep all day now

@adamlui
Copy link
Owner

adamlui commented Oct 28, 2024

Ironically Brave originally lured users using crypto as reward for their push ads (and it still spams you but the pay is pennies compared to the golden days)

@mhwgoo
Copy link
Author

mhwgoo commented Oct 29, 2024

China right now.
imageimage

@mhwgoo
Copy link
Author

mhwgoo commented Oct 29, 2024

Seemed even worse now after adding async, await code
Screenshot 2024-10-29 at 18 58 03

@adamlui
Copy link
Owner

adamlui commented Oct 30, 2024

ok can you reset by replacing script with the latest version, and then Ctrl+F for document-start and replace w/ document-end and does the observer error still occur

@mhwgoo
Copy link
Author

mhwgoo commented Oct 30, 2024

Everything looked just perfect (no observer error, no blank boxes), until a new tab was opened and go to youtube.com.

Tab one:
Screenshot 2024-10-30 at 13 42 52

Tab two:
Screenshot 2024-10-30 at 13 43 15

adamlui pushed a commit that referenced this issue Oct 30, 2024
@adamlui
Copy link
Owner

adamlui commented Oct 30, 2024

ok can you install the latest version is there still observer error

@adamlui
Copy link
Owner

adamlui commented Oct 30, 2024

Tab two doesn't show the custom logo so script didn't load for some reason (custom logo is indicator of script looad now since i replaced .innerHTML which qutebrowser doesn't like) so the blank boxes are result from ad blocker you're using I think

@mhwgoo
Copy link
Author

mhwgoo commented Oct 30, 2024

I got (with the custom logo shown):

YouTube™ Classic 📺 — (Remove rounded design + Return YouTube dislikes) called unimplemented GM_registerMenuCommand
userscript:GM-https://github.com/adamlui/YouTube%E2%84%A2 Classic %F0%9F%93%BA %E2%80%94 (Remove rounded design + Return YouTube dislikes):1692 Uncaught TypeError: Cannot read properties of null (reading 'appendChild')
    at userscript:GM-https://github.com/adamlui/YouTube%E2%84%A2 Classic %F0%9F%93%BA %E2%80%94 (/Remove rounded design + Return YouTube dislikes):1692:24
    at userscript:GM-https://github.com/adamlui/YouTube%E2%84%A2 Classic %F0%9F%93%BA %E2%80%94 (/Remove rounded design + Return YouTube dislikes):1693:7
    at userscript:GM-https://github.com/adamlui/YouTube%E2%84%A2 Classic %F0%9F%93%BA %E2%80%94 (/Remove rounded design + Return YouTube dislikes):2208:3
    at userscript:GM-https://github.com/adamlui/YouTube%E2%84%A2 Classic %F0%9F%93%BA %E2%80%94 (/Remove rounded design + Return YouTube dislikes):2213:3
(anonymous) @ userscript:GM-https://github.com/adamlui/YouTube%E2%84%A2 Classic %F0%9F%93%BA %E2%80%94 (Remove rounded design + Return YouTube dislikes):1692
(anonymous) @ userscript:GM-https://github.com/adamlui/YouTube%E2%84%A2 Classic %F0%9F%93%BA %E2%80%94 (Remove rounded design + Return YouTube dislikes):1693
(anonymous) @ userscript:GM-https://github.com/adamlui/YouTube%E2%84%A2 Classic %F0%9F%93%BA %E2%80%94 (Remove rounded design + Return YouTube dislikes):2208
(anonymous) @ userscript:GM-https://github.com/adamlui/YouTube%E2%84%A2 Classic %F0%9F%93%BA %E2%80%94 (Remove rounded design + Return YouTube dislikes):2213
userscript:GM-https://github.com/adamlui/YouTube%E2%84%A2 Classic %F0%9F%93%BA %E2%80%94 (Remove rounded design + Return YouTube dislikes):449 Uncaught (in promise) TypeError: Failed to execute 'observe' on 'MutationObserver': parameter 1 is not of type 'Node'.
    at userscript:GM-https://github.com/adamlui/YouTube%E2%84%A2 Classic %F0%9F%93%BA %E2%80%94 (/Remove rounded design + Return YouTube dislikes):449:16
    at new Promise (<anonymous>)
    at waitForElem (userscript:GM-https://github.com/adamlui/YouTube%E2%84%A2 Classic %F0%9F%93%BA %E2%80%94 (/Remove rounded design + Return YouTube dislikes):445:16)
    at userscript:GM-https://github.com/adamlui/YouTube%E2%84%A2 Classic %F0%9F%93%BA %E2%80%94 (/Remove rounded design + Return YouTube dislikes):477:5
    at userscript:GM-https://github.com/adamlui/YouTube%E2%84%A2 Classic %F0%9F%93%BA %E2%80%94 (/Remove rounded design + Return YouTube dislikes):2208:3
    at userscript:GM-https://github.com/adamlui/YouTube%E2%84%A2 Classic %F0%9F%93%BA %E2%80%94 (/Remove rounded design + Return YouTube dislikes):2213:3
(anonymous) @ userscript:GM-https://github.com/adamlui/YouTube%E2%84%A2 Classic %F0%9F%93%BA %E2%80%94 (Remove rounded design + Return YouTube dislikes):449
waitForElem @ userscript:GM-https://github.com/adamlui/YouTube%E2%84%A2 Classic %F0%9F%93%BA %E2%80%94 (Remove rounded design + Return YouTube dislikes):445
(anonymous) @ userscript:GM-https://github.com/adamlui/YouTube%E2%84%A2 Classic %F0%9F%93%BA %E2%80%94 (Remove rounded design + Return YouTube dislikes):477
(anonymous) @ userscript:GM-https://github.com/adamlui/YouTube%E2%84%A2 Classic %F0%9F%93%BA %E2%80%94 (Remove rounded design + Return YouTube dislikes):2208
(anonymous) @ userscript:GM-https://github.com/adamlui/YouTube%E2%84%A2 Classic %F0%9F%93%BA %E2%80%94 (Remove rounded design + Return YouTube dislikes):2213
Promise.then (async)
(anonymous) @ userscript:GM-https://github.com/adamlui/YouTube%E2%84%A2 Classic %F0%9F%93%BA %E2%80%94 (Remove rounded design + Return YouTube dislikes):477
(anonymous) @ userscript:GM-https://github.com/adamlui/YouTube%E2%84%A2 Classic %F0%9F%93%BA %E2%80%94 (Remove rounded design + Return YouTube dislikes):2208
(anonymous) @ userscript:GM-https://github.com/adamlui/YouTube%E2%84%A2 Classic %F0%9F%93%BA %E2%80%94 (Remove rounded design + Return YouTube dislikes):2213
userscript:GM-https://github.com/adamlui/YouTube%E2%84%A2 Classic %F0%9F%93%BA %E2%80%94 (Remove rounded design + Return YouTube dislikes):449 Uncaught (in promise) TypeError: Failed to execute 'observe' on 'MutationObserver': parameter 1 is not of type 'Node'.
    at userscript:GM-https://github.com/adamlui/YouTube%E2%84%A2 Classic %F0%9F%93%BA %E2%80%94 (/Remove rounded design + Return YouTube dislikes):449:16
    at new Promise (<anonymous>)
    at waitForElem (userscript:GM-https://github.com/adamlui/YouTube%E2%84%A2 Classic %F0%9F%93%BA %E2%80%94 (/Remove rounded design + Return YouTube dislikes):445:16)
    at userscript:GM-https://github.com/adamlui/YouTube%E2%84%A2 Classic %F0%9F%93%BA %E2%80%94 (/Remove rounded design + Return YouTube dislikes):478:5
    at userscript:GM-https://github.com/adamlui/YouTube%E2%84%A2 Classic %F0%9F%93%BA %E2%80%94 (/Remove rounded design + Return YouTube dislikes):2208:3
    at userscript:GM-https://github.com/adamlui/YouTube%E2%84%A2 Classic %F0%9F%93%BA %E2%80%94 (/Remove rounded design + Return YouTube dislikes):2213:3
(anonymous) @ userscript:GM-https://github.com/adamlui/YouTube%E2%84%A2 Classic %F0%9F%93%BA %E2%80%94 (Remove rounded design + Return YouTube dislikes):449
waitForElem @ userscript:GM-https://github.com/adamlui/YouTube%E2%84%A2 Classic %F0%9F%93%BA %E2%80%94 (Remove rounded design + Return YouTube dislikes):445
(anonymous) @ userscript:GM-https://github.com/adamlui/YouTube%E2%84%A2 Classic %F0%9F%93%BA %E2%80%94 (Remove rounded design + Return YouTube dislikes):478
(anonymous) @ userscript:GM-https://github.com/adamlui/YouTube%E2%84%A2 Classic %F0%9F%93%BA %E2%80%94 (Remove rounded design + Return YouTube dislikes):2208
(anonymous) @ userscript:GM-https://github.com/adamlui/YouTube%E2%84%A2 Classic %F0%9F%93%BA %E2%80%94 (Remove rounded design + Return YouTube dislikes):2213
Promise.then (async)
(anonymous) @ userscript:GM-https://github.com/adamlui/YouTube%E2%84%A2 Classic %F0%9F%93%BA %E2%80%94 (Remove rounded design + Return YouTube dislikes):478
(anonymous) @ userscript:GM-https://github.com/adamlui/YouTube%E2%84%A2 Classic %F0%9F%93%BA %E2%80%94 (Remove rounded design + Return YouTube dislikes):2208
(anonymous) @ userscript:GM-https://github.com/adamlui/YouTube%E2%84%A2 Classic %F0%9F%93%BA %E2%80%94 (Remove rounded design + Return YouTube dislikes):2213
userscript:GM-https://github.com/adamlui/YouTube%E2%84%A2 Classic %F0%9F%93%BA %E2%80%94 (Remove rounded design + Return YouTube dislikes):449 Uncaught (in promise) TypeError: Failed to execute 'observe' on 'MutationObserver': parameter 1 is not of type 'Node'.
    at userscript:GM-https://github.com/adamlui/YouTube%E2%84%A2 Classic %F0%9F%93%BA %E2%80%94 (/Remove rounded design + Return YouTube dislikes):449:16
    at new Promise (<anonymous>)
    at waitForElem (userscript:GM-https://github.com/adamlui/YouTube%E2%84%A2 Classic %F0%9F%93%BA %E2%80%94 (/Remove rounded design + Return YouTube dislikes):445:16)
    at userscript:GM-https://github.com/adamlui/YouTube%E2%84%A2 Classic %F0%9F%93%BA %E2%80%94 (/Remove rounded design + Return YouTube dislikes):1677:5
    at userscript:GM-https://github.com/adamlui/YouTube%E2%84%A2 Classic %F0%9F%93%BA %E2%80%94 (/Remove rounded design + Return YouTube dislikes):2208:3
    at userscript:GM-https://github.com/adamlui/YouTube%E2%84%A2 Classic %F0%9F%93%BA %E2%80%94 (/Remove rounded design + Return YouTube dislikes):2213:3
(anonymous) @ userscript:GM-https://github.com/adamlui/YouTube%E2%84%A2 Classic %F0%9F%93%BA %E2%80%94 (Remove rounded design + Return YouTube dislikes):449
waitForElem @ userscript:GM-https://github.com/adamlui/YouTube%E2%84%A2 Classic %F0%9F%93%BA %E2%80%94 (Remove rounded design + Return YouTube dislikes):445
(anonymous) @ userscript:GM-https://github.com/adamlui/YouTube%E2%84%A2 Classic %F0%9F%93%BA %E2%80%94 (Remove rounded design + Return YouTube dislikes):1677
(anonymous) @ userscript:GM-https://github.com/adamlui/YouTube%E2%84%A2 Classic %F0%9F%93%BA %E2%80%94 (Remove rounded design + Return YouTube dislikes):2208
(anonymous) @ userscript:GM-https://github.com/adamlui/YouTube%E2%84%A2 Classic %F0%9F%93%BA %E2%80%94 (Remove rounded design + Return YouTube dislikes):2213
Promise.then (async)
(anonymous) @ userscript:GM-https://github.com/adamlui/YouTube%E2%84%A2 Classic %F0%9F%93%BA %E2%80%94 (Remove rounded design + Return YouTube dislikes):1677
(anonymous) @ userscript:GM-https://github.com/adamlui/YouTube%E2%84%A2 Classic %F0%9F%93%BA %E2%80%94 (Remove rounded design + Return YouTube dislikes):2208
(anonymous) @ userscript:GM-https://github.com/adamlui/YouTube%E2%84%A2 Classic %F0%9F%93%BA %E2%80%94 (Remove rounded design + Return YouTube dislikes):2213

@adamlui
Copy link
Owner

adamlui commented Oct 30, 2024

Actually screenshot is more readable, but can you change the latest version document-start to document-end again, and if new tab doesn't load logo screenshot console

@mhwgoo
Copy link
Author

mhwgoo commented Oct 30, 2024

Changed back to document-end, on second tab, it seemed the userscript did not get called. First tab was all good.

Screenshot 2024-10-30 at 20 39 11

@adamlui
Copy link
Owner

adamlui commented Oct 30, 2024

What about when you refresh second tab? Also you could try installing another userscript, then open new tab and see if phenomenon occurs (if so this is qutebrowser bug worthy of reporting to him) because second console shows no user.js errors

@adamlui
Copy link
Owner

adamlui commented Oct 30, 2024

You could create a userscript that matches YouTube, then see if second tab your script loads

@mhwgoo
Copy link
Author

mhwgoo commented Oct 30, 2024

My code:

console.log("this is kate")

var ads = document.getElementsByTagName("ytd-ad-slot-renderer");

window.addEventListener('animationstart', function() {
    if (ads) {
        for (var i = 0; i < ads.length; i++ ) {
            ads[i].parentNode.parentNode.remove();
        }
    }

    console.log("animationstart done")
    ads = document.getElementsByTagName("ytd-ad-slot-renderer");
});

window.addEventListener('animationend', function() {
    if (ads) {
        for (var i = 0; i < ads.length; i++ ) {
            ads[i].parentNode.parentNode.remove();
        }
    }

    console.log("animationend done")
    ads = document.getElementsByTagName("ytd-ad-slot-renderer");
});

window.addEventListener('load', function() {
    if (ads) {
        for (var i = 0; i < ads.length; i++ ) {
            ads[i].parentNode.parentNode.remove();
        }
    }

    console.log("load done")
    ads = document.getElementsByTagName("ytd-ad-slot-renderer");
});

Screenshot, the script was called and log message printed, on second tab (see the right bottom):
Screenshot 2024-10-30 at 21 52 29

@adamlui
Copy link
Owner

adamlui commented Oct 30, 2024

Does it happen with document-end vs. document-start

@mhwgoo
Copy link
Author

mhwgoo commented Oct 30, 2024

I reused your greasemonkey starting syntax, and changed to document-start:

// ==UserScript==
// @name          YouTube™ Classic 📺 — (Remove rounded design + Return YouTube dislikes)
// @version       2024.10.30.3
// @author        Adam Lui, Magma_Craft, Anarios, JRWR, Fuim & hoothin
// @namespace     https://github.com/adamlui
// @description   Reverts YouTube to its classic design (before all the rounded corners & hidden dislikes) + redirects YouTube Shorts
// @license       MIT
// @icon          https://media.ytclassic.com/images/icon48.png
// @icon64        https://media.ytclassic.com/images/icon64.png
// @compatible    chrome
// @compatible    firefox
// @compatible    opera
// @compatible    safari
// @compatible    edge
// @match         *://*.youtube.com/*
// @grant         GM_registerMenuCommand
// @grant         GM_unregisterMenuCommand
// @grant         GM_getValue
// @grant         GM_setValue
// @run-at        document-start
// @downloadURL   https://update.greasyfork.org/scripts/456132/youtube-classic.user.js
// @updateURL     https://update.greasyfork.org/scripts/456132/youtube-classic.meta.js
// @homepageURL   https://www.ytclassic.com
// @supportURL    https://support.ytclassic.com
// ==/UserScript==

console.log("this is kate")

var ads = document.getElementsByTagName("ytd-ad-slot-renderer");

window.addEventListener('animationstart', function() {
    if (ads) {
        for (var i = 0; i < ads.length; i++ ) {
            ads[i].parentNode.parentNode.remove();
        }
    }

    console.log("animationstart done")
    ads = document.getElementsByTagName("ytd-ad-slot-renderer");
});

window.addEventListener('animationend', function() {
    if (ads) {
        for (var i = 0; i < ads.length; i++ ) {
            ads[i].parentNode.parentNode.remove();
        }
    }

    console.log("animationend done")
    ads = document.getElementsByTagName("ytd-ad-slot-renderer");
});

window.addEventListener('load', function() {
    if (ads) {
        for (var i = 0; i < ads.length; i++ ) {
            ads[i].parentNode.parentNode.remove();
        }
    }

    console.log("load done")
    ads = document.getElementsByTagName("ytd-ad-slot-renderer");
});

@adamlui
Copy link
Owner

adamlui commented Oct 30, 2024

And what happened? Also you should test every possible value from https://wiki.greasespot.net/Metadata_Block#@run-at for both our scripts, also without @run-at and then see which one makes both scripts work in 2nd tab

@adamlui
Copy link
Owner

adamlui commented Oct 30, 2024

...and the ones that cause script to not load in 2nd tab, you should report to qutebrowser

@mhwgoo
Copy link
Author

mhwgoo commented Oct 30, 2024

I had moved your userscript out before I tested this one to avoid collisions. It worked all good except occasional transient blank boxes for 1-2 seconds as I mentioned this code two days ago.

@mhwgoo
Copy link
Author

mhwgoo commented Oct 30, 2024

I think I may stay with this little script for a while. After I get acquainted with js, I may utilize it or contribute on your project, thanks a lot for your time and big support.

@adamlui
Copy link
Owner

adamlui commented Oct 30, 2024

Yes please learn js it is the best language used in so many things. Chatgpt made me very powerful at it in really short time. Also by little script you mean the one you pasted so ads go away but not round corners works in 2nd tab?

@mhwgoo
Copy link
Author

mhwgoo commented Oct 30, 2024

Yeah that little script only does the job of cleaning ads on the fly, works on second tab, without all of your awesome features, though. It makes do, after all it's only a few lines of code.

@mhwgoo
Copy link
Author

mhwgoo commented Oct 30, 2024

Javascript is powerful, but I have to say I don't like it:) It makes doing creepy and evil activities extremely easy for people without good intentions, websites not as good as before. I think that may be one reason you call your project "youtube classic", and revert to the good old appearance.

@mhwgoo
Copy link
Author

mhwgoo commented Oct 30, 2024

But from chatting with you, I got to learn that js actually has an observe() method, attached to 3 observer classes. Really good to know.

@adamlui
Copy link
Owner

adamlui commented Oct 30, 2024

When I first made the script I just cobbled together code from co-authors listed in the meta because I was not superpowerful at it as now. But thousands of users started growing, and the CSS needs constant maintaining to keep up with the UI changes. But I have COVID so am hesitant to clean up the script using my new powers, because then it will become a beast I am obligated to feed. But if you learn js you could co-maintain it especially if you use YouTube a lot so can keep up with the changes

@mhwgoo
Copy link
Author

mhwgoo commented Oct 30, 2024

I might only learn the amount enough to tweak a script to solve a specific problem I face in satisfying some needs. No more. I wouldn't like to put too much time in js, not a big fan of it, or hate it, to exaggerate a bit, because to some extent it is js that makes my web surfing experience a lot bitter.

@adamlui
Copy link
Owner

adamlui commented Oct 30, 2024

But it is js that can fix it

@mhwgoo
Copy link
Author

mhwgoo commented Oct 30, 2024

One might know how to solve a problem from universal programming mindset, the rest is just copying some syntax. No need to especially learn this language which has already gone in the weirder and weirder direction, in my opinion.

@adamlui
Copy link
Owner

adamlui commented Oct 30, 2024

Ok understood

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants