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