☰

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.2
// @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
// ==/UserScript==

(() => {
    let chatframe = null;
    const main = () => {
        console.log('Found LiveChat frame');
        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.contentDocument.body.appendChild(style);
    };

    const findInterval = window.setInterval(() => {
        console.log('Search LiveChat frame');
        chatframe = document.querySelector('#chatframe');
        if (chatframe) {
            chatframe.onload = main;
            window.clearInterval(findInterval);
        }
    }, 1000);
})();