Display chat window on stream screen and apply custom stylesheet
当前为
// ==UserScript==
// @name Youtube live, Simple Chat Stylizer
// @name:ja Youtube live, シンプルチャットスタイル
// @description Display chat window on stream screen and apply custom stylesheet
// @description:ja チャットウィンドウを配信画面上に配置し、カスタムスタイルを適応する
// @version 1.0.3
// @author You
// @match https://www.youtube.com/*
// @grant none
// @nowrap
// @namespace http://tampermonkey.net/
// ==/UserScript==
(function() {
'use strict';
var floatStyleID = "yt-live-chat-float-on-screen-stylesheet";
var configAreaID = "simple-chat-stylizer-config";
var configKey = "simple-chat-stylizer";
var c = {};
loadConfig();
setTimeout(function () {
if (location.pathname.indexOf("/live_chat") == 0) {
addLiveChatStyle();
} else {
if (!document.querySelector("#" + configAreaID)) {
addConfigArea();
updateConfigFromForm();
}
addFloatWindowStyle();
}
}, 3000);
return;
function addConfigArea() {
console.log("addConfigArea()");
var $container = document.querySelector("#" + configAreaID) || document.createElement("div");
$container.innerHTML = `
<form id="simple-chat-stylizer-config">
<div style="text-align: center;">Simple chat stylizer config</div>
<input type="text" name="backgroundColor" value="#fff8">
<label>background color</label><br />
<input type="text" name="chatFontSize" value="13">
<label>font size</label><br />
<input type="checkbox" name="isEnableCharFrame">
<label>enable chat frame</label><br />
<input type="checkbox" name="isHideAuthorName" checked>
<label>hide author name</label><br />
<input type="checkbox" name="isAuthorNameRightSide" checked>
<label>author name is display to right side</label><br />
<input type="text" name="authorNameMaxWidth" value="100">
<label>author name max width</label><br />
<input type="checkbox" name="isHideThumbnail">
<label>hide user thumbnail</label><br />
<input type="checkbox" name="isHideBadge">
<label>hide badge icon</label><br />
<input type="checkbox" name="isHideFooter">
<label>hide footer panel (you can't chat)</label><br />
<input type="checkbox" name="isHideHeader" checked>
<label>hide header</label><br />
<input type="checkbox" name="isHideToggleButton">
<label>hide toggle button</label><br />
<input type="checkbox" name="isHideCommonEmotes" checked>
<label>hide common emotes</label><br />
<input type="checkbox" name="isFixModerator" checked>
<label>highlight moderator</label><br />
<input type="text" name="moderatorChatTimeout" value="20">
<label>time period that moderator chat is display</label><br />
<input type="text" name="windowWidth" value="430">
<label>window width</label><br />
<input type="text" name="windowHeight" value="720">
<label>window height</label><br />
<input type="checkbox" name="isFullHeightInFullscreen">
<label>full height in fullscreen</label><br />
<input type="text" name="windowTop" value="10">
<label>window position from top/bottom</label><br />
<input type="text" name="windowRight" value="10">
<label>window position from right/left</label><br />
<input type="text" name="windowOpacity" value="0.9">
<label>window opacity</label><br />
<input type="checkbox" name="windowIsFromBottom">
<label>window position is form bottom</label><br />
<input type="checkbox" name="windowIsFromLeft">
<label>window position is from left</label><br />
<input type="button" value="Save" style="width: unset;" id="simple-chat-stylizer-config-save" />
</form>
`;
document.querySelector("ytd-watch-flexy").insertBefore($container, document.querySelector("#columns"));
document.querySelector("#simple-chat-stylizer-config-save").onclick = saveButtonOnClick;
// apply config data
var $params = document.querySelectorAll("#" + configAreaID + " input");
for (var i = 0; i < $params.length; i++) {
var $p = $params[i];
var value = c[$p.name];
if (typeof value != "undefined") {
if ($p.type == "checkbox") {
$p.checked = !!value;
} else {
$p.value = value;
}
}
}
}
function loadConfig() {
c = JSON.parse(localStorage[configKey] || "{}");
console.log("config", c);
}
function updateConfigFromForm() {
var $params = document.querySelectorAll("#" + configAreaID + " input");
for (var i = 0; i < $params.length; i++) {
var $p = $params[i];
var value = c[$p.name];
if ($p.type == "checkbox") {
c[$p.name] = $p.checked;
} else {
c[$p.name] = $p.value;
}
}
localStorage[configKey] = JSON.stringify(c);
console.log("updated config", c);
}
function addLiveChatStyle() {
console.log("addLiveChatStyle() : ", location.href);
var stylesheet = "";
// bold, font-size
stylesheet += "#message.yt-live-chat-text-message-renderer { font-weight: bold; font-size: " + c.chatFontSize +"px; }";
stylesheet += "yt-live-chat-renderer, yt-live-chat-message-input-renderer, yt-live-chat-ticker-renderer { background: " + c.backgroundColor + " !important; }";
stylesheet += "#item-scroller { scrollbar-width: none; }";
if (c.isEnableCharFrame) {
stylesheet += `#message.yt-live-chat-text-message-renderer {
color: #ffffff; letter-spacing : 4px;
text-shadow : 2px 2px 1px #003366, -2px 2px 1px #003366, 2px -2px 1px #003366, -2px -2px 1px #003366,
2px 0px 1px #003366, 0px 2px 1px #003366, -2px 0px 1px #003366, 0px -2px 1px #003366;
}`;
}
if (c.isHideAuthorName) {
stylesheet += "#content #author-name.yt-live-chat-author-chip { display: none; }";
} else if (c.isAuthorNameRightSide) {
stylesheet += "#content #author-name.yt-live-chat-author-chip { position: absolute; right: 10px; top: 0px; opacity: 0.7; transform: scale(0.8); }";
} else {
stylesheet += "#content #author-name.yt-live-chat-author-chip { max-width: " + c.authorNameMaxWidth + "px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }";
}
if (c.isHideThumbnail) {
stylesheet += "#author-photo { display: none !important; }";
}
if (c.isHideBadge) {
stylesheet += "#chat-badges { display: none !important; }";
}
if (c.isHideFooter) {
stylesheet += "#panel-pages { display: none !important; }";
}
if (c.isHideHeader) {
stylesheet += "yt-live-chat-header-renderer { display: none !important; }";
}
if (c.isHideToggleButton) {
stylesheet += "#show-hide-button.ytd-live-chat-frame[aria-pressed='true'] { display: none !important; }";
}
if (c.isHideCommonEmotes) {
stylesheet += "yt-emoji-picker-renderer #category-buttons { display: none !important; }";
var emoteCategories = ["UCkszU2WH9gy1mb0dV-11UJg/CIW60IPp_dYCFcuqTgodEu4IlQ", "😀", "🐵", "🍇", "🌍", "🎃", "👓", "🏧"];
for (var i = 0; i < emoteCategories.length; i++) {
stylesheet += "[aria-activedescendant='" + emoteCategories[i] + "'] { display: none; }";
}
}
// your name
stylesheet += "#input-container yt-live-chat-author-chip { display: none; }";
// super chat background
stylesheet += "yt-live-chat-product-picker-renderer { background-color: #fffa; }";
// chat input field
stylesheet += "yt-live-chat-text-input-field-renderer { background-color: #fffa; font-weight: bold; }";
// moderator/owner chats is fixed to bottom in chat window
stylesheet += "#moderator-chat-container { position: absolute; bottom: 0; background: #fff; left: 0; right: 0; z-index: 10000; }";
// reload button
stylesheet += `yt-live-chat-app #chat-reload-button {
display: inline-block;
position: absolute; right: 0; bottom: 0;
color: #fff; background: #1E90FF; opacity: 0;
padding: 3px;
transition: opacity .2s linear; cursor: pointer;
z-index: 10001; }`;
stylesheet += "yt-live-chat-app:hover #chat-reload-button { opacity: 1; }";
// apply style
var $style = document.createElement("style");
$style.innerText = stylesheet;
document.body.appendChild($style);
// fix moderator chat
var $container = document.createElement("div");
$container.id = "moderator-chat-container";
document.querySelector("yt-live-chat-item-list-renderer #contents").appendChild($container);
// reload button
var $reload = document.createElement("div");
$reload.id = "chat-reload-button";
$reload.innerText = "Reload";
$reload.onclick = reloadButtonOnClick;
document.querySelector("yt-live-chat-app > #contents").appendChild($reload);
setInterval(observeModerator, 2000);
}
function reloadButtonOnClick() {
location.reload();
return false;
}
function saveButtonOnClick() {
updateConfigFromForm();
addFloatWindowStyle();
document.querySelector("#chatframe").contentWindow.location.reload();
return false;
}
function appendModeratorChat($chat) {
document.querySelector("#moderator-chat-container").appendChild($chat);
setTimeout(function () {
$chat.remove();
}, c.moderatorChatTimeout * 1000);
}
function observeModerator() {
var $chats;
if (c.isFixModerator) {
$chats = document.querySelectorAll("#items yt-live-chat-text-message-renderer[author-type='moderator'], #items yt-live-chat-text-message-renderer[author-type='owner']");
} else {
$chats = document.querySelectorAll("#items yt-live-chat-text-message-renderer[author-type='owner']");
}
for (var i = 0; i < $chats.length; i++) {
appendModeratorChat($chats[i]);
}
}
function addFloatWindowStyle() {
console.log("addFloatWindowStyle()", location.href);
var stylesheet = "";
stylesheet += "ytd-watch-flexy[theater] ytd-live-chat-frame { position: fixed; border: 0;"
+ (c.windowIsFromLeft ? "left" : "right") + ": " + c.windowRight + "px; "
+ "width: " + c.windowWidth + "px;"
+ "height: " + c.windowHeight + "px !important; }";
if (!c.windowIsFromBottom) {
stylesheet += "ytd-watch-flexy[theater] ytd-live-chat-frame { top: " + ( 60 + parseInt(c.windowTop) ) + "px; }";
}
if (c.isFullHeightInFullscreen) {
stylesheet += "ytd-watch-flexy[fullscreen] ytd-live-chat-frame { top: 10px; bottom: 40px; height: unset !important; }";
} else {
stylesheet += "ytd-watch-flexy[fullscreen] ytd-live-chat-frame { " + (c.windowIsFromBottom ? "bottom" : "top") + ": " + c.windowTop + "px; }";
}
// stylesheet += "#show-hide-button paper-button[aria-pressed='false'] { display: none !important; }";
stylesheet += "ytd-watch-flexy ytd-live-chat-frame[collapsed] { height: unset !important; }";
// show hide button background
stylesheet += "#show-hide-button.ytd-live-chat-frame > ytd-toggle-button-renderer.ytd-live-chat-frame { background: " + c.backgroundColor + "; transition: background .2s ease; }";
stylesheet += "#show-hide-button.ytd-live-chat-frame > ytd-toggle-button-renderer.ytd-live-chat-frame:hover { background: #fffc; }";
// config
stylesheet += "#simple-chat-stylizer-config { max-height: 12px; transition: max-height .25s ease-in; overflow: hidden; max-width: 1500px; margin: 0 auto; font-size: 12px; }";
stylesheet += "#simple-chat-stylizer-config:hover { max-height: 1000px; }";
stylesheet += "#simple-chat-stylizer-config input { width: 30px; text-align: center; margin-right: 8px; }";
var $old = document.querySelector("#" + floatStyleID);
if ($old) $old.remove();
var $style = document.createElement("style");
$style.id = floatStyleID;
$style.innerText = stylesheet;
document.querySelector("head").appendChild($style);
// console.log(stylesheet);
}
})();