☰

YouTube Sticky Live Chat

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

当前为 2020-05-11 提交的版本，查看 最新版本。

// ==UserScript==
// @name         YouTube Sticky Live Chat
// @name:ja      YouTube Sticky Live Chat
// @namespace    https://i544c.github.io
// @version      0.3.5
// @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 */
        --ysl-line-length: 3;
        --ysl-message-height: calc(1em * var(--ysl-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-live-chat-message-highlight-background-color);
        position: sticky;
        top: -1px;
        z-index: 1;
        height: var(--ysl-message-height);
        min-height: var(--ysl-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(--ysl-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 findFrame = () => {
    const findInterval = window.setInterval(() => {
      const chatframe = document.querySelector('#chatframe');
      if (chatframe) {
        chatframe.addEventListener('load', main);
        window.clearInterval(findInterval);
      }
    }, 1000);
  };

  findFrame();
  document.addEventListener('yt-navigate-finish', findFrame);
})();