Youtube Player perf

Optimizes animation calls for lower GPU/CPU consumption

Voor het installeren van scripts heb je een extensie nodig, zoals Tampermonkey, Greasemonkey of Violentmonkey.

Voor het installeren van scripts heb je een extensie nodig, zoals Tampermonkey of Violentmonkey.

Voor het installeren van scripts heb je een extensie nodig, zoals Tampermonkey of Violentmonkey.

Voor het installeren van scripts heb je een extensie nodig, zoals Tampermonkey of Userscripts.

Voor het installeren van scripts heb je een extensie nodig, zoals {tampermonkey_link:Tampermonkey}.

Voor het installeren van scripts heb je een gebruikersscriptbeheerder nodig.

(Ik heb al een user script manager, laat me het downloaden!)

Voor het installeren van gebruikersstijlen heb je een extensie nodig, zoals {stylus_link:Stylus}.

Voor het installeren van gebruikersstijlen heb je een extensie nodig, zoals {stylus_link:Stylus}.

Voor het installeren van gebruikersstijlen heb je een extensie nodig, zoals {stylus_link:Stylus}.

Voor het installeren van gebruikersstijlen heb je een gebruikersstijlbeheerder nodig.

Voor het installeren van gebruikersstijlen heb je een gebruikersstijlbeheerder nodig.

Voor het installeren van gebruikersstijlen heb je een gebruikersstijlbeheerder nodig.

(Ik heb al een beheerder - laat me doorgaan met de installatie!)


    // ==UserScript==
    // @name         Youtube Player perf
    // @version      0.7
    // @description  Optimizes animation calls for lower GPU/CPU consumption
    // @namespace    nopeless.github.io
    // @author       nopeless
    // @match        https://www.youtube.com/*
    // @icon         https://www.google.com/s2/favicons?sz=64&domain=youtube.com
    // @grant        none
    // @run-at       document-start
    // @license      MIT
    // ==/UserScript==

    /* global _yt_player */

    (() => {
        "use strict";

        const scaleX0 = Symbol("scaleX(0)");
        const scaleX1 = Symbol("scaleX(1)");

        const PLAYER_CONSTRUCTOR = "sV";
        const ATTR_UPDATE = "yo";
        const UPDATE_INTERNAL = "v";

        function scaleX(el) {
            el.style.transform = "scaleX(0)";
            el[scaleX0] = true;
            el[scaleX1] = false;
        }

        function checks(ytp) {
            // .u
            // updating method
            return ytp[UPDATE_INTERNAL] && ytp[PLAYER_CONSTRUCTOR] && ytp[ATTR_UPDATE];
        }

        function modifyBase() {
            console.log("Overriding _yt_player methods");

            if (!window._yt_player) return console.error("YT player not avaliable, load order is wrong");

            if (!checks(window._yt_player)) alert("YouTube Player Perf will not work in this version of youtube. Disable it. Leave a kind comment on https://greasyfork.org/en/scripts/471489-youtube-player-perf");

            const PlayerConstructor = _yt_player[PLAYER_CONSTRUCTOR];

            // save the original prototype
            const PlayerConstructorPrototype = _yt_player[PLAYER_CONSTRUCTOR].prototype;

            let dirty = false;

            let chapterCount = 0;

            function update(a) {
                // 2023-08-02
                // .u -> .v
                for (var b = _yt_player[UPDATE_INTERNAL](Object.keys(a)), c = b.next(); !c.done; c = b.next()) {
                    c = c.value;

                    if (this.__updateCache.get(c) !== a[c]) {
                        // console.log("updating", c, a[c]);
                        this.updateValue(c, a[c]);
                        dirty = true;
                        this.__updateCache.set(c, a[c]);
                    }
                }
            }

            // use ToolTip for checking
            let ytpToolTip = null;
            let ytpToolTipPreviousValue = null;

            _yt_player[PLAYER_CONSTRUCTOR] = function (...args) {
                // debugger;
                // YouTube base.js update approx 2023-07-28
                // this -> args[0]
                // const a = args[0];
                // This was reverted approx 2023-08-02

                PlayerConstructor.call(this, ...args);

                this.__updateCache = new Map();

                // console.log(this.update);

                // override update
                // debugger;
                this.update = update;
            };

            _yt_player[PLAYER_CONSTRUCTOR].prototype = Object.create(PlayerConstructorPrototype);
            _yt_player[PLAYER_CONSTRUCTOR].prototype.constructor = _yt_player[PLAYER_CONSTRUCTOR];

            const attributeUpdate = _yt_player[ATTR_UPDATE];
            let headUpdateElement = null;
            let loopLatch = false;

            // YouTube base.js update approx 2023-07-28
            // Nn => Un

            // if ('string' === typeof b)
            _yt_player[ATTR_UPDATE] = (a, b, c) => {
                // don't do excessive progress bar updates
                if (b === "transform") {
                    let ih;

                    if (dirty || (ih = (ytpToolTip ??= document.querySelector("span.ytp-tooltip-text"))?.innerHTML) !== ytpToolTipPreviousValue) {
                        // first call after dirty
                        headUpdateElement = a;

                        dirty = false;
                        loopLatch = true;

                        ytpToolTipPreviousValue = ih;
                    } else if (a === headUpdateElement) {
                        headUpdateElement = null;
                        loopLatch = false;
                        return;
                    } else if (!loopLatch) return;

                    // scalex(0) is almost useless after initial load
                    if (c === "scalex(0)") {
                        if (a[scaleX0]) return;
                        a[scaleX0] = true;
                        a[scaleX1] = false;
                    } else if (c === "scalex(1)") {
                        if (a[scaleX1]) return;
                        a[scaleX0] = false;
                        a[scaleX1] = true;
                    } else {
                        a[scaleX0] = false;
                        a[scaleX1] = false;
                    }
                }
                attributeUpdate(a, b, c);
            };
        }

        window.__modifyBase = modifyBase;

        const ob = new MutationObserver(mrs => {
            const l = mrs.map(mr => mr.addedNodes[0]).find(node => node && node.nodeName === "SCRIPT" && node.src && node.src.match(/\/base\.js$/));

            if (!l) return;

            l.setAttribute("onload", "__modifyBase()");

            ob.disconnect();
        });

        console.log("watching for script changes");
        ob.observe(document, { attributes: false, childList: true, subtree: true });
    })();

/* For internal use. Not relevant to script

2023-08-05

61267
    sRa = function (a) {
      return a.N(
        'embeds_web_enable_video_data_refactoring_offline_and_progress_bar'
      )
    };
    g.NV = function (a, b) {
      g.XQ.call(
        this,
        {
          G: 'div',
          S: 'ytp-progress-bar-container',
          Y: {
            'aria-disabled': 'true'
          },

12653
    co = function (a, b) {
      return a == b ? !0 : a &&
      b ? a.left == b.left &&
      a.width == b.width &&
      a.top == b.top &&
      a.height == b.height : !1
    };
    g.ro = function (a, b, c) {
      if ('string' === typeof b) (b = qo(a, b)) &&
      (a.style[b] = c);
       else for (var d in b) {
        c = a;
        var e = b[d],
        f = qo(c, d);

g.v should be found from call stack

*/