Disable YouTube Live Chat Container CSS

To Disable YouTube Live Chat Container CSS
目前为 2023-07-01 提交的版本。查看最新版本。
换行
// ==UserScript==
// @name        Disable YouTube Live Chat Container CSS
// @namespace   UserScript
// @match       https://www.youtube.com/live_chat*
// @grant       none
// @version     0.0.8
// @license     MIT
// @author      CY Fung
// @description To Disable YouTube Live Chat Container CSS
// @run-at      document-start
// ==/UserScript==

((__CONTEXT__) => {
  /* bug: tabview - https://www.youtube.com/live_chat?continuation= ... */
  const addCss = () => document.head.appendChild(document.createElement('style')).textContent = `
    @supports (contain: layout paint style) {


/* optional */
      #item-offset.style-scope.yt-live-chat-item-list-renderer {
        height: auto !important;
        min-height: unset !important;
      }

      #items.style-scope.yt-live-chat-item-list-renderer {
        transform: translateY(0px) !important;
        /*padding-bottom: 0 !important;
        padding-top: 0 !important;*/
      }

/* optional */

      yt-icon[icon="down_arrow"] > *,
      yt-icon-button#show-more > * {
        pointer-events: none !important;
      }

      #item-list.style-scope.yt-live-chat-renderer[class],
      #item-list.style-scope.yt-live-chat-renderer[class] *,
      yt-live-chat-item-list-renderer.style-scope.yt-live-chat-renderer[class],
      yt-live-chat-item-list-renderer.style-scope.yt-live-chat-renderer[class] *
      #item-list.style-scope.yt-live-chat-renderer[class] [class],
      yt-live-chat-item-list-renderer.style-scope.yt-live-chat-renderer[class] [class] {
        will-change: unset !important;
      }

      [wSr93="hidden"]:nth-last-child(n+8) {
          content-visibility: auto;
          contain-intrinsic-size: auto var(--wsr94);
      }

      yt-live-chat-author-chip #chat-badges.yt-live-chat-author-chip,
      yt-live-chat-author-chip #chat-badges.yt-live-chat-author-chip yt-live-chat-author-badge-renderer,
      yt-live-chat-author-chip #chat-badges.yt-live-chat-author-chip yt-live-chat-author-badge-renderer #image,
      yt-live-chat-author-chip #chat-badges.yt-live-chat-author-chip yt-live-chat-author-badge-renderer #image img {
        contain: layout style;
        display: inline-flex;
        vertical-align: middle;
      }

      #items yt-live-chat-text-message-renderer {
        contain: layout style;
      }

      yt-live-chat-item-list-renderer:not([allow-scroll]) #item-scroller.yt-live-chat-item-list-renderer {
        overflow-y: scroll;
        padding-right: 0;
      }

      body yt-live-chat-app {
        contain: size layout paint style;
        overflow: hidden;
      }

      #items.style-scope.yt-live-chat-item-list-renderer {
        contain: layout paint style;
      }

      #item-offset.style-scope.yt-live-chat-item-list-renderer {
        contain: style;
      }

      #item-scroller.style-scope.yt-live-chat-item-list-renderer {
        contain: size style;
      }

      #contents.style-scope.yt-live-chat-item-list-renderer,
      #chat.style-scope.yt-live-chat-renderer,
      img.style-scope.yt-img-shadow[width][height] {
        contain: size layout paint style;
      }

      .style-scope.yt-live-chat-ticker-renderer[role="button"][aria-label],
      .style-scope.yt-live-chat-ticker-renderer[role="button"][aria-label] > #container {
        contain: layout paint style;
      }

      yt-live-chat-text-message-renderer.style-scope.yt-live-chat-item-list-renderer,
      yt-live-chat-membership-item-renderer.style-scope.yt-live-chat-item-list-renderer,
      yt-live-chat-paid-message-renderer.style-scope.yt-live-chat-item-list-renderer,
      yt-live-chat-banner-manager.style-scope.yt-live-chat-item-list-renderer {
        contain: layout style;
      }

      tp-yt-paper-tooltip[style*="inset"][role="tooltip"] {
        contain: layout paint style;
      }

      #item-offset.style-scope.yt-live-chat-item-list-renderer {
        position: relative !important;
        height: auto !important;
      }

      #item-offset.style-scope.yt-live-chat-item-list-renderer > #items.style-scope.yt-live-chat-item-list-renderer {
        position: static !important;
      }



    }

  `;

  const { Promise, requestAnimationFrame } = __CONTEXT__;

  let done = 0;
  let main = async () => {

    if (done) return;
    let m1, m2;

    let maxN = 8;

    while (!m1 || !m2) {
      if (--maxN < 0) return;
      m1 = document.querySelector('#item-offset.style-scope.yt-live-chat-item-list-renderer');
      m2 = document.querySelector('#items.style-scope.yt-live-chat-item-list-renderer');
      if (m1 && m2) break;
      await new Promise(resolve => requestAnimationFrame(resolve));
    }
    done = 1;

    addCss();

    const dummy = {
      transform: '',
      height: '',
      maxHeight: '',
      paddingBottom: '',
      paddingTop: ''
    };

    Object.defineProperty(m1, 'style', { get() { return dummy }, set() { }, });
    Object.defineProperty(m2, 'style', { get() { return dummy }, set() { }, });
    m1.setAttribute("style", "");
    m2.setAttribute("style", "");

    let p1 = 0;
    document.addEventListener('click', (evt) => {
      if (!evt.isTrusted) return;
      const target = ((evt || 0).target || 0)
      if (target.id === 'show-more') {
        if (target.nodeName.toLowerCase() !== 'yt-icon-button') return;

        if (Date.now() - p1 < 80) return;
        requestAnimationFrame(() => {
          p1 = Date.now();
          target.click();
        })
      }

    })

    const items = m2;

    const visObserver = new IntersectionObserver((entries)=>{

      for(const entry of entries){

        const target = entry.target;
        if(!target) continue;
        if ( entry.isIntersecting === true ){
           target.style.setProperty('--wsr94',  entry.boundingClientRect.height+'px');
           target.setAttribute('wSr93', 'visible');

        }
        else if(target.getAttribute('wSr93')=== 'visible') {
           target.style.setProperty('--wsr94',  entry.boundingClientRect.height+'px');
          target.setAttribute('wSr93', 'hidden');
        }

      }



    }, {
      /*
  root: items,
  rootMargin: "0px",
  threshold: 1.0,
  */
});

    const mutObserver = new MutationObserver((mutations)=>{
      let node = items.lastElementChild;
      for(;node !== null; node = node.previousElementSibling){
        if( node.hasAttribute('wSr93') )break;
        node.setAttribute('wSr93','');
        visObserver.observe(node);
      }

    });
    mutObserver.observe(m2, {
      childList: true,
      subtree: false
    });



  };

  main();



  function onReady() {

    main();
  }



  if (document.readyState != 'loading') {
    onReady();
  } else {
    window.addEventListener("DOMContentLoaded", onReady, false);
  }


})({ Promise, requestAnimationFrame });
欢迎访问Greasy Fork镜像
