YouTube Live Cpu Tamer

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

اعتبارا من 17-02-2020. شاهد أحدث إصدار.

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.

ستحتاج إلى تثبيت إضافة مثل Stylus لتثبيت هذا النمط.

ستحتاج إلى تثبيت إضافة لإدارة أنماط المستخدم لتتمكن من تثبيت هذا النمط.

ستحتاج إلى تثبيت إضافة لإدارة أنماط المستخدم لتثبيت هذا النمط.

ستحتاج إلى تثبيت إضافة لإدارة أنماط المستخدم لتثبيت هذا النمط.

(لدي بالفعل مثبت أنماط للمستخدم، دعني أقم بتثبيته!)

// ==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
// @grant       none
// ==/UserScript==

(function(){
  const THROTTLE = 1000;
  let items = document.querySelector('yt-live-chat-ticker-renderer #items');
  let site = {
    get: {
      container: (node) => node.querySelector('#container'),
    },
  };
  let core = {
    initialize: function(){
      if(items === null) return setTimeout(core.initialize, 1000);
      observe(items, function(records){
        records.forEach(r => r.addedNodes.forEach(node => {
          let container = site.get.container(node);
          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, attributeOldValue: true, attributeFilter: ['style']});
        }));
      });
      core.addStyle();
    },
    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-paid-message-item-renderer{
            border-radius: 999px;
          }
          yt-live-chat-ticker-paid-message-item-renderer #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();
})();