// ==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.0.1
// @grant       none
// @downloadURL 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-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();
})();