Greasy Fork is available in English.

YouTube Sticky LiveChat

Pin the latest message written by live owner or moderator to the top

2020-05-05 يوللانغان نەشرى. ئەڭ يېڭى نەشرىنى كۆرۈش.

// ==UserScript==
// @name         YouTube Sticky LiveChat
// @name:ja      YouTube Sticky LiveChat
// @namespace    https://i544c.github.io
// @version      0.3.4
// @description  Pin the latest message written by live owner or moderator to the top
// @description:ja  生放送主とモデレータの最新のコメントを上に固定するユーザスクリプト
// @author       i544c
// @match        https://www.youtube.com/*
// @grant        none
// @license      MIT
// ==/UserScript==

(() => {
  const main = e => {
    console.log('Found LiveChat frame');
    const chatframe = e.target.contentDocument;
    const style = document.createElement('style');
    style.textContent = `
      yt-live-chat-app {
        /* Global variables */
        --line-length: 3;
        --message-height: calc(1em * var(--line-length) + 4px);
      }

      #item-offset {
        overflow: visible !important;
      }

      #items {
        transform: none !important;
      }

      yt-live-chat-text-message-renderer[author-type="owner"],
      yt-live-chat-text-message-renderer[author-type="moderator"] {
        background: var(--yt-spec-general-background-b);
        position: sticky;
        top: -1px;
        z-index: 1;
        height: var(--message-height);
        min-height: var(--message-height);
      }

      yt-live-chat-text-message-renderer[author-type="owner"]:hover,
      yt-live-chat-text-message-renderer[author-type="moderator"]:hover {
        height: 100% !important;
      }

      yt-live-chat-text-message-renderer[author-type="owner"] #content,
      yt-live-chat-text-message-renderer[author-type="moderator"] #content {
        align-self: normal;
        /* String truncate */
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: var(--line-length);
        overflow: hidden;
      }

      yt-live-chat-text-message-renderer[author-type="owner"] #content:hover,
      yt-live-chat-text-message-renderer[author-type="moderator"] #content:hover {
        -webkit-box-orient: inline-axis;
      }
    `;
    chatframe.body.appendChild(style);
  };


  const titleChange = new MutationObserver(() => {
    const findInterval = window.setInterval(() => {
      const chatframe = document.querySelector('#chatframe');
      if (chatframe) {
        chatframe.addEventListener('load', main);
        window.clearInterval(findInterval);
      }
    }, 1000);
  });

  titleChange.observe(document.head.querySelector('title'), { childList: true });
})();