YouTube Live Cpu Tamer

It reduces the high CPU usage on Super Chats with nothing to lose.

Versione datata 12/04/2020. Vedi la nuova versione l'ultima versione.

Dovrai installare un'estensione come Tampermonkey, Greasemonkey o Violentmonkey per installare questo script.

Dovrai installare un'estensione come Tampermonkey o Violentmonkey per installare questo script.

Dovrai installare un'estensione come Tampermonkey o Violentmonkey per installare questo script.

Dovrai installare un'estensione come Tampermonkey o Userscripts per installare questo script.

Dovrai installare un'estensione come ad esempio Tampermonkey per installare questo script.

Dovrai installare un gestore di script utente per installare questo script.

(Ho già un gestore di script utente, lasciamelo installare!)

Dovrai installare un'estensione come ad esempio Stylus per installare questo stile.

Dovrai installare un'estensione come ad esempio Stylus per installare questo stile.

Dovrai installare un'estensione come ad esempio Stylus per installare questo stile.

Dovrai installare un'estensione per la gestione degli stili utente per installare questo stile.

Dovrai installare un'estensione per la gestione degli stili utente per installare questo stile.

Dovrai installare un'estensione per la gestione degli stili utente per installare questo stile.

(Ho già un gestore di stile utente, lasciamelo installare!)

// ==UserScript==
// @name        YouTube Live Cpu Tamer
// @name:ja     YouTube Live Cpu Tamer
// @name:zh-CN  YouTube Live Cpu Tamer
// @description It reduces the high CPU usage on Super Chats with nothing to lose.
// @description:ja スーパーチャットによる高いCPU使用率を削減します。見た目は何も変わりません。
// @description:zh-CN 降低超级聊天的高CPU利用率。外观完全没有变化。
// @namespace   knoa.jp
// @include     https://www.youtube.com/live_chat*
// @include     https://www.youtube.com/live_chat_replay*
// @version     1.1.1
// @grant       none
// ==/UserScript==

/*
[update] 1.1.1
minor fix.
*/
(function(){
  const THROTTLE = 1000;
  let site = {
    get: {
      items: () => document.querySelector('yt-live-chat-ticker-renderer #items'),
      containers: (items) => items.querySelectorAll('#container'),
      container: (node) => node.querySelector('#container'),
    },
  };
  let core = {
    initialize: function(){
      let items = site.get.items();
      if(items === null) return setTimeout(core.initialize, 1000);
      let containers = site.get.containers(items);
      Array.from(containers).forEach(container => {
        core.observeContainer(container);
      });
      observe(items, function(records){
        records.forEach(r => r.addedNodes.forEach(node => {
          let container = site.get.container(node);
          core.observeContainer(container);
        }));
      });
      core.addStyle();
    },
    observeContainer: function(container){
      container.parentNode.style.background = container.style.background;
      let lastUpdated = Date.now();
      observe(container, function(records){
        let now = Date.now();
        if(now - lastUpdated < THROTTLE) return;
        lastUpdated = now;
        container.parentNode.style.background = container.style.background;
      }, {attributes: true, attributeFilter: ['style']});
    },
    addStyle: function(name = 'style'){
      if(core.html[name] === undefined) return;
      let style = createElement(core.html[name]());
      document.head.appendChild(style);
    },
    html: {
      style: () => `
        <style type="text/css">
          yt-live-chat-ticker-renderer #items > *{
            border-radius: 999px;
          }
          yt-live-chat-ticker-renderer #items > * > #container{
            background: none !important;
          }
        </style>
      `,
    },
  };
  const createElement = function(html = '<span></span>'){
    let outer = document.createElement('div');
    outer.innerHTML = html;
    return outer.firstElementChild;
  };
  const observe = function(element, callback, options = {childList: true, attributes: false, characterData: false, subtree: false}){
    let observer = new MutationObserver(callback.bind(element));
    observer.observe(element, options);
    return observer;
  };
  core.initialize();
})();