Youtube Player perf

Optimizes animation calls for lower GPU/CPU consumption

You will need to install an extension such as Tampermonkey, Greasemonkey or Violentmonkey to install this script.

You will need to install an extension such as Tampermonkey or Violentmonkey to install this script.

You will need to install an extension such as Tampermonkey or Violentmonkey to install this script.

You will need to install an extension such as Tampermonkey or Userscripts to install this script.

You will need to install an extension such as Tampermonkey to install this script.

You will need to install a user script manager extension to install this script.

(I already have a user script manager, let me install it!)

You will need to install an extension such as Stylus to install this style.

You will need to install an extension such as Stylus to install this style.

You will need to install an extension such as Stylus to install this style.

You will need to install a user style manager extension to install this style.

You will need to install a user style manager extension to install this style.

You will need to install a user style manager extension to install this style.

(I already have a user style manager, let me install it!)


    // ==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

*/