yt-anti-anti-adblock.user.js

// ==UserScript==
// @name           YouTube Anti-Anti-Adblock
// @name:de        YouTube Anti-Anti-Adblock
// @namespace      yt-anti-anti-adblock
// @version        1.4.3
// @description    Removes all the "ad blockers are not allowed on youtube" popups.
// @description:de Entfernt alle "Werbeblocker sind auf YouTube nicht erlaubt" popups.
// @author         NullDev
// @copyright      2023+, NullDev
// @license        MIT
// @match          *://*.youtube.com/*
// @homepageURL    https://github.com/NullDev/YT-Anti-Anti-Adblock
// @supportURL     https://github.com/NullDev/YT-Anti-Anti-Adblock/issues/new/choose
// @icon           https://raw.githubusercontent.com/NullDev/YT-Anti-Anti-Adblock/master/icon.png
// @updateURL      https://raw.githubusercontent.com/NullDev/YT-Anti-Anti-Adblock/master/yt-anti-anti-adblock.user.js
// @downloadURL    https://raw.githubusercontent.com/NullDev/YT-Anti-Anti-Adblock/master/yt-anti-anti-adblock.user.js
// @grant          none
// @run-at         document-idle
// ==/UserScript==

"use strict";

// ========================= //
// = Copyright (c) NullDev = //
// ========================= //

// @ts-ignore
window.google_ad_status = 1;

const playerID = Math.random().toString(36).substring(7);
window[playerID] = null;

// @ts-ignore
// eslint-disable-next-line camelcase
const prodMode = !!GM_info.script.updateURL;
const runningInIframe = (window.location !== window.parent.location);

/**
 * Log a yt-anti-anti-adblock message and format it.
 *
 * @param {any} msg
 */
const log = function(msg, forceShow = false){
    // @ts-ignore
    // eslint-disable-next-line camelcase
    if (prodMode && !forceShow) return;
    console.log(`%cyt-anti-anti-adblock: %c${msg}`, "color:#66A1FF;font-weight:bold;", "color:#63B06B;font-weight:bold;");
};

/**
 * Probe an array of popup parents (depending on which one youtube decides to show).
 *
 * @param {Element} probe
 * @param {string[]} parents
 */
const parentProber = function(probe, parents){
    for (const parent of parents){
        const parentProbe = probe.closest(parent);
        if (parentProbe) parentProbe.remove();
    }
};

/**
 * Check if the video URL contains a timestamp and seek to it.
 *
 * @param {string|null} [ts=null]
 */
const checkAndSeekTimestamp = function(ts = null){
    const timestamp = ts ?? (new URLSearchParams(window.location.search)).get("t");
    if (!timestamp) return;

    // @ts-ignore
    const [ time, unit ] = timestamp.match(/\d+|\D+/g);
    const seconds = (unit === "s") ? time : time * 60;

    window[playerID].seekTo(seconds, true);

    log("Seeked to timestamp.");
};

/**
 * Generate a random Client Playback Nonce
 *
 * @return {string}
 */
const generateCPN = function(){
    const CPN_ALPHABET = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789-_";
    const cpn = Array.from({ length: 16 }, () => CPN_ALPHABET[Math.floor(Math.random() * 256) & 63]).join("");
    return cpn;
};

/**
 * Mark the video as watched.
 *
 * @return {void}
 */
const markVideoAsWatched = function(){
    const currentVideoId = (new URLSearchParams(window.location.search)).get("v");
    if (!currentVideoId) return;

    const scripts = document.querySelectorAll("body script");
    for (const script of scripts){
        if (!script.innerHTML.includes("var ytInitialPlayerResponse = {")) continue;

        try {
            const json = JSON.parse(script.innerHTML.split("var ytInitialPlayerResponse = ")[1].split(";var meta")[0]);
            // videostatsPlaybackUrl -> baseUrl -> String
            // videostatsDelayplayUrl -> baseUrl -> String
            // videostatsWatchtimeUrl -> baseUrl -> String
            // ptrackingUrl -> baseUrl -> String
            // qoeUrl -> baseUrl -> String
            // atrUrl ->
            //    baseUrl -> String
            //    elapsedMediaTimeSeconds -> Number
            // videostatsScheduledFlushWalltimeSeconds -> []
            // videostatsDefaultFlushIntervalSeconds -> Number
            const tracking = json.playbackTracking;
            // @TODO: Also use watchtime to show the videos progress.
            // see: https://github.com/Airkek/Youtube-Viewers/issues/128
            const url = new URL(tracking.videostatsPlaybackUrl.baseUrl);

            url.searchParams.set("ver", "2");
            url.searchParams.set("cpn", generateCPN());

            fetch(url.toString(), {
                method: "GET",
                mode: "no-cors",
                credentials: "omit",
                headers: {
                    "User-Agent": navigator.userAgent,
                },
            });
        }
        catch (e){
            log("Failed to parse ytInitialPlayerResponse. Exiting...");
            return;
        }
    }

    log("Marked video as watched.");
};

/**
 * Toggle theater mode.
 *
 * @return {void}
 */
const toggleTheaterMode = function(){
    const playerWrap = /** @type {HTMLDivElement} */ (
        (runningInIframe ? window.parent : window).document.querySelector("ytd-watch-flexy")
    );

    const isTheater = playerWrap.hasAttribute("theater");
    if (!isTheater){
        playerWrap.setAttribute("theater", "");
        playerWrap.setAttribute("theater-requested_", "");
        playerWrap.setAttribute("full-bleed-player", "");
        playerWrap.removeAttribute("default-layout");

        playerWrap.style.cssText = `
            --ytd-watch-flexy-panel-max-height: 460px;
            --ytd-watch-flexy-chat-max-height: 460px;
            --ytd-watch-flexy-structured-description-max-height: 460px;
            --ytd-watch-flexy-comments-panel-max-height: 460px;
            --ytd-comments-engagement-panel-content-height: 460px;
        `;

        const playerParent = /** @type {HTMLDivElement} */ (
            (runningInIframe ? window.parent : window).document.querySelector("#columns > #primary > #primary-inner > #player")
        );
        playerParent.style.cssText = `
            display: block !important;
            width: 100% !important;
            position: absolute !important;
            top: 55px !important;
            left: 0 !important;
            overflow-x: clip !important;
        `;

        const theaterModeButton = document.querySelector("button.ytp-size-button.ytp-button");
        if (theaterModeButton){
            theaterModeButton.innerHTML = `
                <svg height="100%" version="1.1" viewBox="0 0 36 36" width="100%">
                    <use class="ytp-svg-shadow" xlink:href="#ytp-id-122"></use>
                    <path d="m 26,13 0,10 -16,0 0,-10 z m -14,2 12,0 0,6 -12,0 0,-6 z" fill="#fff" fill-rule="evenodd" id="ytp-id-122"></path>
                </svg>
            `;
        }
    }

    else {
        playerWrap.removeAttribute("theater");
        playerWrap.removeAttribute("theater-requested_");
        playerWrap.removeAttribute("full-bleed-player");
        playerWrap.setAttribute("default-layout", "");

        playerWrap.style.cssText = `
            --ytd-watch-flexy-panel-max-height: 707px;
            --ytd-watch-flexy-chat-max-height: 707px;
            --ytd-watch-flexy-structured-description-max-height: 707px;
            --ytd-watch-flexy-comments-panel-max-height: 707px;
            --ytd-comments-engagement-panel-content-height: 707px;
        `;

        const playerParent = /** @type {HTMLDivElement} */ (
            (runningInIframe ? window.parent : window).document.querySelector("#columns > #primary > #primary-inner > #player")
        );
        playerParent.style.cssText = "";

        const theaterModeButton = document.querySelector("button.ytp-size-button.ytp-button");
        if (theaterModeButton){
            theaterModeButton.innerHTML = `
                <svg height="100%" version="1.1" viewBox="0 0 36 36" width="100%">
                    <use class="ytp-svg-shadow" xlink:href="#ytp-id-58"></use>
                    <path d="m 28,11 0,14 -20,0 0,-14 z m -18,2 16,0 0,10 -16,0 0,-10 z" fill="#fff" fill-rule="evenodd" id="ytp-id-58"></path>
                </svg>
            `;
        }
    }

    log("Toggled theater mode.");
};

/**
 * Add the picture-in-picture and theater mode buttons to the player.
 */
const addPlayerControls = function(){
    const pictureInPictureButton = document.querySelector("button.ytp-pip-button.ytp-button");
    const theaterModeButton = document.querySelector("button.ytp-size-button.ytp-button");

    pictureInPictureButton?.removeAttribute("style");
    log("Added picture-in-picture button.");

    if (theaterModeButton){
        theaterModeButton.outerHTML = `
        <button class="ytp-size-button ytp-button" aria-keyshortcuts="t" data-priority="7" data-title-no-tooltip="Theater mode" 
            aria-label="Theater mode keyboard shortcut t" title="Theater mode (t)">
            <svg height="100%" version="1.1" viewBox="0 0 36 36" width="100%">
                <use class="ytp-svg-shadow" xlink:href="#ytp-id-58"></use>
                <path d="m 28,11 0,14 -20,0 0,-14 z m -18,2 16,0 0,10 -16,0 0,-10 z" fill="#fff" fill-rule="evenodd" id="ytp-id-58"></path>
            </svg>
        </button>
        `;

        log("Added theater mode button.");
    }
};

/**
 * Add a next button to the player.
 *
 * @return {void}
 */
const addNextButton = function(attempt = 0){
    const nextButton = /** @type {HTMLLinkElement} */ (document.querySelector("a.ytp-next-button.ytp-button"));
    if (!nextButton || nextButton.getAttribute("aria-disabled") === "false") return;

    const nextVideoElementA = window.parent.document.querySelector("ytd-compact-video-renderer a");
    if (!nextVideoElementA) return;

    const href = nextVideoElementA.getAttribute("href") ?? "";
    const title = nextVideoElementA.closest("#dismissible")?.querySelector("#video-title")?.getAttribute("title") ?? "";
    const thumbnail = nextVideoElementA.querySelector("img")?.getAttribute("src") ?? "";

    nextButton.setAttribute("aria-disabled", "false");
    nextButton.setAttribute("data-preview", thumbnail);
    nextButton.setAttribute("data-tooltip-text", title);
    nextButton.setAttribute("href", href);
    nextButton.setAttribute("title", "Next - " + title);
    nextButton.setAttribute("data-title-no-tooltip", "Next");
    nextButton.removeAttribute("style");
    nextButton.addEventListener("click", event => {
        event.preventDefault();
        event.stopPropagation();

        window.parent.history.replaceState(null, "", "https://www.youtube.com" + String(href));
        window.parent.location.reload();
    });

    setTimeout(() => {
        if (attempt >= 10){
            log("Next button not added. Giving up...");
            return;
        }
        else if (nextButton.getAttribute("aria-disabled") === "true"){
            log("Next button not added. Retrying...");
            addNextButton(attempt + 1);
        }
        else log("Next button added.");
    }, 500);
};

/**
 * Load the YouTube API and create a new player.
 *
 * @return {void}
 */
const loadVideo = function(){
    log("Loading video...");

    const t = document.createElement("script");
    t.src = "https://www.youtube.com/iframe_api";

    const firstScr = document.getElementsByTagName("script")[0];
    firstScr.parentNode?.insertBefore(t, firstScr);

    t.onload = function(){ // @ts-ignore
        const { YT } = window;

        const playerVars = {
            autoplay: 1,
            controls: 1,
            disablekb: 0,
            enablejsapi: 1,
        };

        if ((new URLSearchParams(window.location.search)).has("list")){
            playerVars.listType = "playlist";
            playerVars.list = (new URLSearchParams(window.location.search)).get("list");
        }

        !!YT && YT.ready(function(){
            log("YouTube API ready.");
            window[playerID] = new YT.Player(playerID, {
                videoId: (new URLSearchParams(window.location.search).get("v") || ""),
                playerVars,
                events: {
                    onReady(){
                        document.body.focus();
                        checkAndSeekTimestamp();
                        markVideoAsWatched();
                    },
                    onStateChange(event){
                        if (event.data === YT.PlayerState.PLAYING && (new URLSearchParams(window.location.search)).has("list")){
                            const videoId = event.target.getVideoData().video_id;

                            const url = new URL(window.location.href);
                            url.searchParams.set("v", videoId);

                            const parentUrl = new URL(window.parent.location.href);
                            if (parentUrl.searchParams.get("v") !== videoId){
                                window.history.replaceState(null, "", String(url));
                                // @TODO: This is VERY heavy to reload the ENTIRE page.
                                //        We should find a way to only reload the parent player and UI.
                                window.parent.location.reload();
                            }
                        }
                    },
                },
            });
        });
    };
};

/**
 * Disable auto play to stop funky behaviour.
 */
const disableAutoPlay = function(){
    if (!(new URLSearchParams(window.location.search)).has("list")) return;

    const [ manager ] = document.getElementsByTagName("yt-playlist-manager"); // @ts-ignore
    manager.canAutoAdvance_ = false; // @ts-ignore
    manager.autoplayData = null;

    log("Disabled auto play.");
};

/**
 * Handle navigation to a new page.
 *
 * @return {void}
 */
const handleNavigation = function(){
    if (window.location.pathname !== "/watch") return;

    disableAutoPlay();
    if (!!document.getElementById(playerID)) return;

    const f = document.createElement("div");
    f.setAttribute("id", playerID);
    f.className = "video-stream html5-main-video";
    document.querySelector("div.yt-playability-error-supported-renderers")?.appendChild(f);

    // eslint-disable-next-line no-use-before-define
    cleanUp();
};

/**
 * Handle key codes for the video player.
 *
 * @param {KeyboardEvent} event
 */
const handleKeyCodes = function(event){
    const { key } = event;

    if (
        document.activeElement?.tagName === "INPUT"
        || document.activeElement?.tagName === "TEXTAREA"
        || document.activeElement?.id === "search"
        || document.activeElement?.id === "contenteditable-root"
        || (
            document.activeElement?.tagName === "DIV"
            && (
                document.activeElement?.getAttribute("contenteditable") === "true"
                || document.activeElement?.id.includes("contenteditable")
            )
        )
    ) return;

    if (key === " "){
        (window[playerID].getPlayerState() === 1)
            ? window[playerID].pauseVideo()
            : window[playerID].playVideo();

        event.preventDefault();
    }

    else if (key === "ArrowLeft" || key === "ArrowRight"){
        const currentTime = window[playerID].getCurrentTime();
        window[playerID].seekTo(currentTime + (key === "ArrowLeft" ? -5 : 5), true);
    }

    else if (key === "f"){ // @ts-ignore
        ((document.fullscreenElement || document.webkitFullscreenElement) !== null)
            ? document.exitFullscreen()
            : window[playerID].getIframe().requestFullscreen();
    }

    else if (key === "t"){
        toggleTheaterMode();
    }
};

/**
 * Initialize the event listener for the video player and for navigation.
 */
const listeners = function(){
    document.addEventListener("keydown", handleKeyCodes);
    window.addEventListener("popstate", handleNavigation);
};

/**
 * Clean up the page and restore the video player.
 * Needs to be hoisted.
 *
 * @return {void}
 */
function cleanUp(){
    if (window.location.pathname !== "/watch") return;

    const f = document.createElement("div");
    f.setAttribute("id", playerID);
    f.className = "video-stream html5-main-video";

    const video = document.querySelector("video");
    if (video && video.src){
        // old non-strike popup
        const type1 = document.querySelector("#header.style-scope.ytd-enforcement-message-view-model");
        if (!type1) return;

        parentProber(type1, ["ytd-popup-container", "#error-screen"]);

        log("Cleaned up popup. Found the video element. Starting video...");
        video.play();

        return;
    }

    const type2 = document.querySelector("ytd-enforcement-message-view-model.style-scope");
    if (type2){
        type2.closest("yt-playability-error-supported-renderers")?.replaceWith(f);

        const hotkeyManager = document.querySelector("yt-hotkey-manager");
        if (hotkeyManager) hotkeyManager.remove();

        log("Cleaned up violation message");

        listeners();
        disableAutoPlay();
        loadVideo();
    }
}

/**
 * Push our style overrides to the page.
 */
const pushStyles = function(){
    const style = document.createElement("style");
    style.setAttribute("type", "text/css");
    style.setAttribute("data-id", "yt-anti-anti-adblock-overrides-" + playerID);
    style.innerHTML = `
    .ytp-pause-overlay-container,
    a.ytp-youtube-button.ytp-button.yt-uix-sessionlink {
        display: none !important;
    }
    `;
    document.head.appendChild(style);
    log("Pushed styles.");
};

/**
 * Override some functions to fix some issues.
 */
const customOverrides = function(){
    // global override for .appendChild
    const { appendChild } = Element.prototype; // @ts-ignore
    Element.prototype.appendChild = function(){
        if (this.classList.contains("ytp-endscreen-content")){
            const links = this.querySelectorAll("a");
            for (const link of links){
                link.removeAttribute("target");

                const clone = link.cloneNode(true);
                link.parentNode?.replaceChild(clone, link);

                clone.addEventListener("click", function(event){
                    event.preventDefault();
                    event.stopPropagation();

                    window.parent.location.href = this.href;
                });
            }
            log("Fixed endcart links.");
        }

        appendChild.apply(this, arguments);
    };
};

/**
 * Watch for comment timestamp clicks and seek to them.
 *
 * @param {Event} event
 * @return {void}
 */
const commentTimeStampWatcher = function(event){
    const el = /** @type {HTMLLinkElement} */ (event.target);
    if (el.tagName !== "A" || !el.classList.contains("yt-simple-endpoint")) return;

    event.preventDefault();

    window.scrollTo({
        top: 0,
        behavior: "smooth",
    });

    const timestamp = el.getAttribute("href")?.split("&t=")[1];
    if (!timestamp) return;

    checkAndSeekTimestamp(timestamp);

    const url = new URL(window.location.href);
    url.searchParams.set("t", timestamp);
    window.history.replaceState(null, "", String(url));
};

/**
 * Callback for the page change observer.
 *
 * @return {void}
 */
const prober = function(){
    if (window.location.pathname === "/watch"){
        cleanUp();
        return;
    }

    const prevPlayer = document.getElementById(playerID);
    if (prevPlayer) prevPlayer.remove();
};

/**
 * Push everything that needs to be loaded quickly.
 */
const initLoad = function(){
    document.querySelector("button.ytp-size-button.ytp-button")?.addEventListener("click", () => toggleTheaterMode());

    document.addEventListener("mousedown", event => {
        commentTimeStampWatcher(event);
    });

    prober();
};

(() => {
    log("Initialized.", true);
    log("By NullDev - https://nulldev.org - Code: https://github.com/NullDev/YT-Anti-Anti-Adblock", true);
    log("Running in " + (prodMode ? "PRODUCTION" : "DEVELOPMENT") + " mode.", true);
    log("Running in " + (runningInIframe ? "IFRAME" : "PARENT") + " window.", true);

    if (runningInIframe){
        // afaik this is the only other iframe youtube natively uses.
        // we don't have to check other domains.
        if (window.location.href.includes("accounts.youtube.com")){
            log("Running on wrong iframe. Exiting...");
            return;
        }

        customOverrides();
        addNextButton();
        addPlayerControls();
        pushStyles();
    }

    const observer = new MutationObserver(prober);
    observer.observe(document.body, { childList: true, subtree: true });

    const {pushState} = history;
    const {replaceState} = history;
    history.pushState = function(){
        pushState.apply(history, arguments);
        handleNavigation();
    };

    history.replaceState = function(){
        replaceState.apply(history, arguments);
        handleNavigation();
    };

    window.addEventListener("load", initLoad);
})();