☰

Greasy Fork is available in English.

YouTube Sticky Live Chat

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

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

(() => {
  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;
    }
  `;
  document.body.appendChild(style);
})();