chylex/Transparent-Twitch-Chat
1
0
Fork 0
mirror of https://github.com/chylex/Transparent-Twitch-Chat.git synced 2025-05-08 04:34:03 +02:00
Code

Release 1.3

Browse Source
This commit is contained in:
chylex 2018-08-03 20:18:29 +02:00
parent 3b9638a41d
commit c557d5a776
2 changed files with 191 additions and 382 deletions

2
BUILD.py
View File

@ -36,8 +36,6 @@ else:
if not new_version: if not new_version:
new_version = current_version new_version = current_version
# Utilities
# Build # Build
with open(SRC_FILE, 'r') as src: with open(SRC_FILE, 'r') as src:

571
dist/TransparentTwitchChat.user.js vendored
View File

@ -1,7 +1,7 @@
// ==UserScript== // ==UserScript==
// @name Transparent Twitch Chat // @name Transparent Twitch Chat
// @description Why decide between missing a PogChamp or sacrificing precious screen space, when you can have the best of both worlds! // @description Why decide between missing a PogChamp or sacrificing precious screen space, when you can have the best of both worlds!
// @version 1.2.0.1 // @version 1.3
// @namespace https://chylex.com // @namespace https://chylex.com
// @homepageURL https://github.com/chylex/Transparent-Twitch-Chat // @homepageURL https://github.com/chylex/Transparent-Twitch-Chat
// @supportURL https://github.com/chylex/Transparent-Twitch-Chat/issues // @supportURL https://github.com/chylex/Transparent-Twitch-Chat/issues
@ -19,7 +19,6 @@ const settings = {
chatWidth: 350, chatWidth: 350,
chatFilters: "", chatFilters: "",
grayTheme: false, grayTheme: false,
hideTimestamps: false,
hideHeader: true, hideHeader: true,
hideChatInput: false, hideChatInput: false,
@ -70,10 +69,11 @@ function generateCustomCSS(){
return; return;
} }
let wa = ":not(.ttcwa)"; // selector priority workaround const wa = ":not(.ttcwa)"; // selector priority workaround
let rcol = ".right-column--theatre"; const rcol = ".right-column--theatre";
let rcolBlur = ".right-column--theatre:not(:hover)"; const rcolBlur = ".right-column--theatre:not(:hover)";
let fullWidth = "[style*='width: 100%']"; const fullWidth = ".ttc-rcol-collapsed";
const fullScreen = ".ttc-player-fullscreen";
let style = document.getElementById("chylex-ttc-style-custom"); let style = document.getElementById("chylex-ttc-style-custom");
@ -82,255 +82,98 @@ function generateCustomCSS(){
style.id = "chylex-ttc-style-custom"; style.id = "chylex-ttc-style-custom";
} }
style.innerHTML = `${rcolBlur} .chat-list__lines .simplebar-track.vertical { style.innerHTML = `
visibility: hidden !important; ${rcolBlur} .chat-list__lines .simplebar-track.vertical {visibility:hidden!important}
}
${isFirefox ? ` ${isFirefox ? `
${rcol} .video-chat__message-list-wrapper:not(.video-chat__message-list-wrapper--unsynced) { ${rcol} .video-chat__message-list-wrapper:not(.video-chat__message-list-wrapper--unsynced) {overflow-y:hidden!important}
overflow-y: hidden !important; ` : ``}
}
${rcol} .video-watch-page__right-column${wa}, ${rcol} .channel-page__right-column${wa} {background:none!important;width:${settings.chatWidth - 10}px}
${rcol} .video-chat {flex-basis:auto!important}
${rcol} .video-chat__header {display:none!important}
${rcol} .room-selector__header${wa} {border-right:none!important}
${rcol} .room-picker {width:${settings.chatWidth - 10}px}
${rcol} .hidden {display:none}
${rcol} .video-chat__sync-button {width:${settings.chatWidth - 50}px;z-index:10;background-color:#b8b5c0!important}
${settings.chatWidth < 350 ? `
${rcol} .video-chat__settings, ${rcol} .chat-settings {width:${settings.chatWidth - 50}px}
` : ``} ` : ``}
${rcol} .video-watch-page__right-column${wa}, ${rcol} .channel-page__right-column${wa} {
background: none !important;
width: ${settings.chatWidth - 10}px;
}
${rcol} .video-chat {
flex-basis: auto !important;
}
${rcol} .video-chat__header {
display: none !important;
}
${rcol} .room-selector__header${wa} {
border-right: none !important;
}
${rcol} .room-picker {
width: ${settings.chatWidth - 10}px;
}
${rcol} .hidden {
display: none;
}
${settings.hideHeader ? ` ${settings.hideHeader ? `
${rcolBlur} .room-selector__header { ${rcolBlur} .room-selector__header {display:none!important}
display: none !important;
}
` : ``} ` : ``}
${settings.hideChatInput ? ` ${settings.hideChatInput ? `
${rcolBlur} .chat-input, ${rcolBlur} .video-chat__input { ${rcolBlur} .chat-input, ${rcolBlur} .video-chat__input {display:none!important}
display: none;
}
` : ``} ` : ``}
${settings.hidePinnedCheer ? ` ${settings.hidePinnedCheer ? `
.pinned-cheer, .pinned-cheer-v2 { .pinned-cheer, .pinned-cheer-v2 {display:none}
display: none;
}
` : ``}
${rcol} .video-chat__sync-button {
width: ${settings.chatWidth - 50}px;
z-index: 10;
background-color: #b8b5c0 !important;
}
${settings.chatWidth < 350 ? `
${rcol} .video-chat__settings, ${rcol} .chat-settings {
width: ${settings.chatWidth - 50}px;
}
` : ``} ` : ``}
${settings.transparentChat ? ` ${settings.transparentChat ? `
.persistent-player--theatre { body:not(${fullScreen}) .persistent-player--theatre {width:100%!important}
width: 100% !important; body:not(${fullWidth}):not(${fullScreen}) .persistent-player--theatre .hover-display > div {padding-right:${settings.chatWidth - 10}px}
} body:not(${fullScreen}) .persistent-player--theatre .player-streamstatus {margin-right:${settings.chatWidth + 10}px!important;padding-right:1.5em!important}
.persistent-player--theatre:not(${fullWidth}) .hover-display > div { body${fullWidth}:not(${fullScreen}) .persistent-player--theatre .player-streamstatus {margin-right:20px!important}
padding-right: ${settings.chatWidth - 10}px; ${rcol} .tw-border-l.tw-c-background-alt-2${wa} {border-left:none!important}
} ${rcolBlur} .video-chat__header {background-color:rgba(23,20,31,0.3984375)!important;box-shadow:none!important}
.persistent-player--theatre .player-streamstatus { ${rcolBlur} .video-chat__input {background:transparent!important;box-shadow:none!important}
margin-right: ${settings.chatWidth + 10}px !important; ${rcolBlur} .chylex-ttc-chat-container {background:rgba(14, 12, 19, ${settings.backgroundOpacity * 0.01})!important;color:#ece8f3!important}
padding-right: 1.5em !important; ${rcol} .room-selector__header {border-left:none!important}
} ${rcolBlur} .room-selector__header {background:rgba(14, 12, 19, ${settings.backgroundOpacity * 0.01})!important;border-bottom-color:rgba(44, 37, 65, ${settings.backgroundOpacity * 0.01})!important}
.persistent-player--theatre${fullWidth} .player-streamstatus { ${rcolBlur} .room-selector__header > p, ${rcolBlur} .room-selector__header .tw-button__text > div {color:#dad8de!important;text-shadow:-1px 0 0 rgba(0,0,0,0.6640625), 0 -1px 0 rgba(0,0,0,0.6640625), 1px 0 0 rgba(0,0,0,0.6640625), 0 1px 0 rgba(0,0,0,0.6640625)}
margin-right: 20px !important; ${rcolBlur} .chat-input, ${rcolBlur} .video-chat__input {opacity:0.6}
} ${rcolBlur} .chylex-ttc-chat-container {${settings.smoothTextShadow ? `text-shadow:0 0 2px rgba(0,0,0,0.86328125), -1px 0 1px rgba(0,0,0,0.3984375), 0 -1px 1px rgba(0,0,0,0.3984375), 1px 0 1px rgba(0,0,0,0.3984375), 0 1px 1px rgba(0,0,0,0.3984375);` : `text-shadow:-1px 0 0 rgba(0,0,0,0.6640625), 0 -1px 0 rgba(0,0,0,0.6640625), 1px 0 0 rgba(0,0,0,0.6640625), 0 1px 0 rgba(0,0,0,0.6640625);`}}${rcolBlur} .chat-author__display-name, ${rcolBlur} .vod-message__timestamp {${settings.smoothTextShadow ? `text-shadow:-1px 0 1px rgba(0,0,0,0.3984375), 0 -1px 1px rgba(0,0,0,0.3984375), 1px 0 1px rgba(0,0,0,0.3984375), 0 1px 1px rgba(0,0,0,0.3984375);` : `text-shadow:-1px 0 0 rgba(0,0,0,0.53125), 0 -1px 0 rgba(0,0,0,0.53125), 1px 0 0 rgba(0,0,0,0.53125), 0 1px 0 rgba(0,0,0,0.53125);`}}${rcolBlur} .chat-line__message--mention-recipient {text-shadow:none}
${rcol} .tw-border-l.tw-c-background-alt-2${wa} { ${rcolBlur} .vod-message__timestamp {color:#b7b5ba!important}
border-left: none !important; ${rcolBlur} .chat-line__message a {color:#cdb9f5!important}
} .whispers--theatre-mode .whispers-threads-box__container:not(.whispers-threads-box__container--open):not(:hover) {opacity:${Math.max(0.1, settings.backgroundOpacity * 0.01)}}
${rcolBlur} .video-chat__header {
background-color: rgba(23,20,31,0.3984375) !important;
box-shadow: none !important;
}
${rcolBlur} .video-chat__input {
background: transparent !important;
box-shadow: none !important;
}
${rcolBlur} .chylex-ttc-chat-container {
background: rgba(14, 12, 19, ${settings.backgroundOpacity * 0.01}) !important;
color: #ece8f3 !important;
}
${rcol} .room-selector__header {
border-left: none !important;
}
${rcolBlur} .room-selector__header {
background: rgba(14, 12, 19, ${settings.backgroundOpacity * 0.01}) !important;
border-bottom-color: rgba(44, 37, 65, ${settings.backgroundOpacity * 0.01}) !important;
}
${rcolBlur} .room-selector__header > p, ${rcolBlur} .room-selector__header .tw-button__text > div {
color: #dad8de !important;
text-shadow: -1px 0 0 rgba(0,0,0,0.6640625), 0 -1px 0 rgba(0,0,0,0.6640625), 1px 0 0 rgba(0,0,0,0.6640625), 0 1px 0 rgba(0,0,0,0.6640625);
}
${rcolBlur} .chat-input, ${rcolBlur} .video-chat__input {
opacity: 0.6;
}
${rcolBlur} .chylex-ttc-chat-container {
${settings.smoothTextShadow ? `
text-shadow: 0 0 2px rgba(0,0,0,0.86328125), -1px 0 1px rgba(0,0,0,0.3984375), 0 -1px 1px rgba(0,0,0,0.3984375), 1px 0 1px rgba(0,0,0,0.3984375), 0 1px 1px rgba(0,0,0,0.3984375);
` : ` ` : `
text-shadow: -1px 0 0 rgba(0,0,0,0.6640625), 0 -1px 0 rgba(0,0,0,0.6640625), 1px 0 0 rgba(0,0,0,0.6640625), 0 1px 0 rgba(0,0,0,0.6640625); body:not(${fullWidth}):not(${fullScreen}) .persistent-player--theatre {width:calc(100% - ${settings.chatWidth - 10}px)!important}
`} body:not(${fullScreen}) .persistent-player--theatre .player-streamstatus {margin-right:20px!important}
}
${rcolBlur} .chat-author__display-name, ${rcolBlur} .vod-message__timestamp {
${settings.smoothTextShadow ? `
text-shadow: -1px 0 1px rgba(0,0,0,0.3984375), 0 -1px 1px rgba(0,0,0,0.3984375), 1px 0 1px rgba(0,0,0,0.3984375), 0 1px 1px rgba(0,0,0,0.3984375);
` : `
text-shadow: -1px 0 0 rgba(0,0,0,0.53125), 0 -1px 0 rgba(0,0,0,0.53125), 1px 0 0 rgba(0,0,0,0.53125), 0 1px 0 rgba(0,0,0,0.53125);
`}
}
${rcolBlur} .chat-line__message--mention-recipient {
text-shadow: none;
}
${rcolBlur} .vod-message__timestamp {
color: #b7b5ba !important;
}
${rcolBlur} .chat-line__message a {
color: #cdb9f5 !important;
}
.whispers--theatre-mode .whispers-threads-box__container:not(.whispers-threads-box__container--open):not(:hover) {
opacity: ${Math.max(0.1, settings.backgroundOpacity * 0.01)};
}
` : `
.persistent-player--theatre:not(${fullWidth}) {
width: calc(100% - ${settings.chatWidth - 10}px) !important;
}
.persistent-player--theatre .player-streamstatus {
margin-right: 20px !important;
}
`} `}
.whispers--theatre-mode.whispers--right-column-expanded { .whispers--theatre-mode.whispers--right-column-expanded {
right: ${settings.chatWidth - 10}px !important; right: ${settings.chatWidth - 10}px !important;
} }
${settings.hideConversations ? ` ${settings.hideConversations ? `
.whispers--theatre-mode { .whispers--theatre-mode {display:none}
display: none; .video-player--theatre .video-player__container {bottom:0!important}
}
.video-player--theatre .video-player__container {
bottom: 0 !important;
}
` : ``}
${settings.hideTimestamps ? `
${rcol} .vod-message__timestamp {
visibility: hidden;
width: 0 !important;
}
` : ``} ` : ``}
${settings.chatLeftSide && settings.transparentChat ? ` ${settings.chatLeftSide && settings.transparentChat ? `
${rcol}${wa}, ${rcol} .chat-list__lines .simplebar-track.vertical { ${rcol}${wa}, ${rcol} .chat-list__lines .simplebar-track.vertical {left:0!important;right:auto!important}
left: 0 !important; body:not(${fullWidth}):not(${fullScreen}) .persistent-player--theatre .hover-display > div {padding-left:${settings.chatWidth - 10}px;padding-right:0}
right: auto !important; body:not(${fullWidth}):not(${fullScreen}) .persistent-player--theatre .player-streaminfo {margin-left:40px}
} body${fullWidth}:not(${fullScreen}) .persistent-player--theatre .player-streaminfo {margin-left:25px}
.persistent-player--theatre:not(${fullWidth}) .hover-display > div { body:not(${fullScreen}) .persistent-player--theatre .player-streamstatus${wa} {margin-right:0px!important;padding-right:1.5em!important}
padding-left: ${settings.chatWidth - 10}px; .whispers--theatre-mode${wa} {right:0px!important}
padding-right: 0; ${rcol} .right-column__toggle-visibility {left:5px;right:auto;margin-left:${settings.chatWidth - 10}px;transform:rotate(180deg)!important}
} ${rcol}.right-column--collapsed .right-column__toggle-visibility {margin-left:0}
.persistent-player--theatre:not(${fullWidth}) .player-streaminfo {
margin-left: 40px;
}
.persistent-player--theatre${fullWidth} .player-streaminfo {
margin-left: 25px;
}
.persistent-player--theatre .player-streamstatus${wa} {
margin-right: 0px !important;
padding-right: 1.5em !important;
}
.whispers--theatre-mode${wa} {
right: 0px !important;
}
${rcol} .right-column__toggle-visibility {
left: 5px;
right: auto;
margin-left: ${settings.chatWidth - 10}px;
transform: rotate(90deg) !important;
}
${rcol}.right-column--collapsed .right-column__toggle-visibility {
margin-left: 0;
transform: rotate(-90deg) !important;
}
` : ``} ` : ``}
${settings.grayTheme ? ` ${settings.grayTheme ? `
${rcol} .tw-border-l.tw-c-background-alt-2 { ${rcol} .tw-border-l.tw-c-background-alt-2 {border-left-color:#2b2b2b!important}
border-left-color: #2b2b2b !important; ${rcol} .chylex-ttc-chat-container${wa} {background:#0e0e0e!important}
} ${rcolBlur} .chylex-ttc-chat-container${wa} {background:rgba(14, 14, 14, ${settings.transparentChat ? (settings.backgroundOpacity * 0.01) : 1})!important}
${rcol} .chylex-ttc-chat-container${wa} { ${rcolBlur} .room-selector__header${wa} {background:rgba(14, 14, 14, ${settings.transparentChat ? (settings.backgroundOpacity * 0.01) : 1})!important;border-bottom-color:rgba(42, 42, 42, ${settings.transparentChat ? (settings.backgroundOpacity * 0.01) : 1})!important}
background: #0e0e0e !important; ${rcol} .room-selector__header${wa} {background:#0e0e0e!important;border-bottom-color:#2b2b2b!important;${settings.transparentChat ? "" : "border-left-color:#2b2b2b!important;"}}${rcol} .video-chat__input {box-shadow:inset 0 1px 0 0 #2b2b2b!important}
} ${rcol} [data-a-target="video-chat-input"], ${rcol} [data-a-target="chat-input"] {background-color:#0e0e0e!important;border-color:#2b2b2b!important}
${rcolBlur} .chylex-ttc-chat-container${wa} { ${rcol} [data-a-target="video-chat-input"]:focus, ${rcol} [data-a-target="chat-input"]:focus {border-color:#787878!important;box-shadow:0 0 6px -2px #787878!important}
background: rgba(14, 14, 14, ${settings.transparentChat ? (settings.backgroundOpacity * 0.01) : 1}) !important; ${rcol} [data-a-target="chat-send-button"], ${rcol} [data-a-target="video-chat-submit-button"] {background-color:#2b2b2b!important;border:1px solid #000000!important}
} ${rcol} [data-a-target="chat-send-button"]:active, ${rcol} [data-a-target="chat-send-button"]:focus,${rcol} [data-a-target="video-chat-submit-button"]:active, ${rcol} [data-a-target="video-chat-submit-button"]:focus {box-shadow:0 0 6px 0 #787878!important}
${rcolBlur} .room-selector__header${wa} { .whispers--theatre-mode .whispers-threads-box__container:not(.whispers-threads-box__container--open) {border-top-color:#2b2b2b!important;border-right-color:#2b2b2b!important;border-bottom-color:#2b2b2b!important;border-left-color:#2b2b2b!important}
background: rgba(14, 14, 14, ${settings.transparentChat ? (settings.backgroundOpacity * 0.01) : 1}) !important; .whispers--theatre-mode .whispers-threads-box__open-close${wa} {background-color:#0e0e0e!important}
border-bottom-color: rgba(42, 42, 42, ${settings.transparentChat ? (settings.backgroundOpacity * 0.01) : 1}) !important;
}
${rcol} .room-selector__header${wa} {
background: #0e0e0e !important;
border-bottom-color: #2b2b2b !important;
${settings.transparentChat ? "" : "border-left-color: #2b2b2b !important;"}
}
${rcol} .video-chat__input {
box-shadow: inset 0 1px 0 0 #2b2b2b !important;
}
${rcol} [data-a-target="video-chat-input"], ${rcol} [data-a-target="chat-input"] {
background-color: #0e0e0e !important;
border-color: #2b2b2b !important;
}
${rcol} [data-a-target="video-chat-input"]:focus, ${rcol} [data-a-target="chat-input"]:focus {
border-color: #787878 !important;
box-shadow: 0 0 6px -2px #787878 !important;
}
${rcol} [data-a-target="chat-send-button"], ${rcol} [data-a-target="video-chat-submit-button"] {
background-color: #2b2b2b !important;
border: 1px solid #000000 !important;
}
${rcol} [data-a-target="chat-send-button"]:active, ${rcol} [data-a-target="chat-send-button"]:focus,
${rcol} [data-a-target="video-chat-submit-button"]:active, ${rcol} [data-a-target="video-chat-submit-button"]:focus {
box-shadow: 0 0 6px 0 #787878 !important;
}
.whispers--theatre-mode .whispers-threads-box__container:not(.whispers-threads-box__container--open) {
border-top-color: #2b2b2b !important;
border-right-color: #2b2b2b !important;
border-bottom-color: #2b2b2b !important;
border-left-color: #2b2b2b !important;
}
.whispers--theatre-mode .whispers-threads-box__open-close${wa} {
background-color: #0e0e0e !important;
}
` : ``} ` : ``}
${rcolBlur} div[data-a-target="chat-badge"] {
opacity: ${settings.badgeOpacity / 100}; ${rcolBlur} div[data-a-target="chat-badge"] {opacity:${settings.badgeOpacity / 100};${settings.badgeOpacity === 0 ? `display:none!important;` : ``}}
${settings.badgeOpacity === 0 ? `display: none !important;` : ``}
}
${settings.hideBadgeTurbo ? ` ${settings.hideBadgeTurbo ? `
${rcol} .chat-badge[alt="Turbo"] { ${rcol} .chat-badge[alt="Turbo"] {display:none}
display: none;
}
` : ``} ` : ``}
${settings.hideBadgePrime ? ` ${settings.hideBadgePrime ? `
${rcol} .chat-badge[alt$="Prime"] { ${rcol} .chat-badge[alt$="Prime"] {display:none}
display: none;
}
` : ``} ` : ``}
${settings.hideBadgeSubscriber ? ` ${settings.hideBadgeSubscriber ? `
${rcol} .chat-badge[alt~="Subscriber"] { ${rcol} .chat-badge[alt~="Subscriber"] {display:none}
display: none;
}
` : ``} ` : ``}
#chylex-ttc-settings-btn {
margin-left: ${settings.chatWidth - 58}px; #chylex-ttc-settings-btn {margin-left:${settings.chatWidth - 58}px}
}`; `;
document.head.appendChild(style); document.head.appendChild(style);
} }
@ -340,126 +183,34 @@ function generateSettingsCSS(){
return; return;
} }
let style = document.createElement("style"); const style = document.createElement("style");
style.id = "chylex-ttc-style-settings"; style.id = "chylex-ttc-style-settings";
style.innerHTML = `#chylex-ttc-settings-btn { style.innerHTML = `
display: none; #chylex-ttc-settings-btn {display:none;width:3em;height:3em;position:absolute;bottom:130px;margin-left:292px;z-index:9;cursor:pointer;fill:rgba(255,255,255,0.6640625)}
width: 3em; .video-chat #chylex-ttc-settings-btn {bottom:120px}
height: 3em; #chylex-ttc-settings-btn:hover .player-tip {display:inline-block;width:auto;left:50%;top:0.5em;margin-left:-13.75em;z-index:8}
position: absolute; #chylex-ttc-settings-btn svg {width:100%;height:100%}
bottom: 130px; #chylex-ttc-settings-btn:hover {fill:#fff}
margin-left: 292px; .right-column--theatre:hover #chylex-ttc-settings-btn {display:block}
z-index: 9; #chylex-ttc-settings-modal {position:absolute;left:50%;top:50%;width:630px;height:292px;margin-left:-315px;margin-top:-146px;z-index:10000;background-color:rgba(17,17,17,0.796875)}
cursor: pointer; #chylex-ttc-settings-modal #ttc-opt-global-wrapper {position:absolute;margin:5px 0 0 -69px;display:inline-block}
fill: rgba(255,255,255,0.6640625); #chylex-ttc-settings-modal h2 {color:rgba(255,255,255,0.9296875);font-size:24px;text-align:center;margin:0;padding:14px 0 13px;background-color:rgba(0,0,0,0.59765625)}
} #chylex-ttc-settings-modal .ttc-flex-container {display:flex;flex-direction:row;justify-content:space-between;padding:8px 4px}
.video-chat #chylex-ttc-settings-btn { #chylex-ttc-settings-modal .ttc-flex-column {flex:0 0 calc(100% / 4)}
bottom: 120px; #chylex-ttc-settings-modal p {color:rgba(255,255,255,0.86328125);font-size:14px;margin-top:8px;padding:0 9px}
} #chylex-ttc-settings-modal p:first-of-type {margin:0 0 4px}
#chylex-ttc-settings-btn:hover .player-tip { #chylex-ttc-settings-modal .player-menu__section {padding:0 12px 2px}
display: inline-block; #chylex-ttc-settings-modal .player-menu__header {margin-bottom:0;color:rgba(255,255,255,0.6640625)}
width: auto; #chylex-ttc-settings-modal .player-menu__item {align-items:center;margin:2px 0 9px;padding-left:1px}
left: 50%; #chylex-ttc-settings-modal .switch {font-size:10px;height:17px;line-height:17px}
top: 0.5em; #chylex-ttc-settings-modal .switch span {width:27px}
margin-left: -13.75em; #chylex-ttc-settings-modal .switch.active span {left:25px}
z-index: 8; #chylex-ttc-settings-modal .switch::before, #chylex-ttc-settings-modal .switch::after {width:26px;box-sizing:border-box}
} #chylex-ttc-settings-modal .switch::before {text-align:left;padding-left:5px}
#chylex-ttc-settings-btn svg { #chylex-ttc-settings-modal .switch::after {text-align:right;padding-right:3px}
width: 100%; #chylex-ttc-settings-modal input[type="range"] {width:auto}
height: 100%; #chylex-ttc-settings-modal output {color:rgba(255,255,255,0.796875);width:46px;padding-left:4px;text-align:right}
} `;
#chylex-ttc-settings-btn:hover {
fill: #fff;
}
.right-column--theatre:hover #chylex-ttc-settings-btn {
display: block;
}
#chylex-ttc-settings-modal {
position: absolute;
left: 50%;
top: 50%;
width: 630px;
height: 292px;
margin-left: -315px;
margin-top: -146px;
z-index: 10000;
background-color: rgba(17,17,17,0.796875);
}
#chylex-ttc-settings-modal #ttc-opt-global-wrapper {
position: absolute;
margin: 5px 0 0 -69px;
display: inline-block;
}
#chylex-ttc-settings-modal h2 {
color: rgba(255,255,255,0.9296875);
font-size: 24px;
text-align: center;
margin: 0;
padding: 14px 0 13px;
background-color: rgba(0,0,0,0.59765625);
}
#chylex-ttc-settings-modal .ttc-flex-container {
display: flex;
flex-direction: row;
justify-content: space-between;
padding: 8px 4px;
}
#chylex-ttc-settings-modal .ttc-flex-column {
flex: 0 0 calc(100% / 4);
}
#chylex-ttc-settings-modal p {
color: rgba(255,255,255,0.86328125);
font-size: 14px;
margin-top: 8px;
padding: 0 9px;
}
#chylex-ttc-settings-modal p:first-of-type {
margin: 0 0 4px;
}
#chylex-ttc-settings-modal .player-menu__section {
padding: 0 12px 2px;
}
#chylex-ttc-settings-modal .player-menu__header {
margin-bottom: 0;
color: rgba(255,255,255,0.6640625);
}
#chylex-ttc-settings-modal .player-menu__item {
align-items: center;
margin: 2px 0 9px;
padding-left: 1px;
}
#chylex-ttc-settings-modal .switch {
font-size: 10px;
height: 17px;
line-height: 17px;
}
#chylex-ttc-settings-modal .switch span {
width: 27px;
}
#chylex-ttc-settings-modal .switch.active span {
left: 25px;
}
#chylex-ttc-settings-modal .switch::before, #chylex-ttc-settings-modal .switch::after {
width: 26px;
box-sizing: border-box;
}
#chylex-ttc-settings-modal .switch::before {
text-align: left;
padding-left: 5px;
}
#chylex-ttc-settings-modal .switch::after {
text-align: right;
padding-right: 3px;
}
#chylex-ttc-settings-modal input[type="range"] {
width: auto;
}
#chylex-ttc-settings-modal output {
color: rgba(255,255,255,0.796875);
width: 46px;
padding-left: 4px;
text-align: right;
}`;
document.head.appendChild(style); document.head.appendChild(style);
} }
@ -495,11 +246,11 @@ var filtersObserver = new MutationObserver(function(mutations){
for(let mutation of mutations){ for(let mutation of mutations){
for(let added of mutation.addedNodes){ for(let added of mutation.addedNodes){
let text; let text;
let classes = added.classList; const classes = added.classList;
if (classes.contains("chat-line__message")){ if (classes.contains("chat-line__message")){
let nodes = Array.from(added.childNodes); const nodes = Array.from(added.childNodes);
let colon = nodes.findIndex(node => node.tagName === "SPAN" && node.innerText === ": "); const colon = nodes.findIndex(node => node.tagName === "SPAN" && node.innerText === ": ");
text = nodes.slice(colon+1).map(getNodeText).join(""); text = nodes.slice(colon+1).map(getNodeText).join("");
} }
else{ else{
@ -514,26 +265,66 @@ var filtersObserver = new MutationObserver(function(mutations){
}); });
function refreshChatFilters(){ function refreshChatFilters(){
let filters = (settings.chatFilters || "").split(",").map(entry => entry.trim()).filter(entry => !!entry); const chat = document.querySelector(".chat-list__lines .simplebar-content > div, .video-chat__message-list-wrapper ul");
if (!chat){
return false;
}
const filters = (settings.chatFilters || "").split(",").map(entry => entry.trim()).filter(entry => !!entry);
if (filters.length === 0){ if (filters.length === 0){
filtersRegex = null; filtersRegex = null;
} }
else{ else{
let options = filters.map(entry => entry.replace(/[.+?^${}()|[\]\\]/g, "\\$&").replace(/\*/g, "(?:\\S*)").replace(/\s+/g, "\\s+")).join("|"); const options = filters.map(entry => entry.replace(/[.+?^${}()|[\]\\]/g, "\\$&").replace(/\*/g, "(?:\\S*)").replace(/\s+/g, "\\s+")).join("|");
filtersRegex = new RegExp("(?:^|[^a-z0-9])(?:"+options+")(?:$|[^a-z0-9])", "i"); filtersRegex = new RegExp("(?:^|[^a-z0-9])(?:"+options+")(?:$|[^a-z0-9])", "i");
} }
const chat = document.querySelector(".chat-list__lines .simplebar-content > div, .video-chat__message-list-wrapper ul"); if (filtersRegex && settings.globalSwitch){
filtersObserver.observe(chat, { childList: true });
}
else{
filtersObserver.disconnect();
}
if (chat){ return true;
if (filtersRegex && settings.globalSwitch){ }
filtersObserver.observe(chat, { childList: true });
// Helpers
var classObserverCallback = function(mutations){
for(let mutation of mutations){
const classes = mutation.target.classList;
if (classes.contains("right-column")){
document.body.classList.toggle("ttc-rcol-collapsed", classes.contains("right-column--collapsed"));
} }
else{ else if (classes.contains("video-player")){
filtersObserver.disconnect(); document.body.classList.toggle("ttc-player-fullscreen", classes.contains("video-player--fullscreen"));
} }
} }
};
var classObserver = new MutationObserver(classObserverCallback);
function setupClassHelpers(){
const col = document.querySelector(".right-column");
const player = document.querySelector(".video-player");
if (!col || !player){
return false;
}
classObserver.observe(col, { attributes: true, attributeFilter: [ "class" ] });
classObserver.observe(player, { attributes: true, attributeFilter: [ "class" ] });
classObserverCallback([
{ target: col },
{ target: player }
]);
return true;
} }
// Settings // Settings
@ -546,13 +337,13 @@ function debounce(func, wait){
timeout = window.setTimeout(func, wait); timeout = window.setTimeout(func, wait);
}; };
} }
function createSettingsModal(){ function createSettingsModal(){
tryRemoveElement(document.getElementById("chylex-ttc-settings-modal")); tryRemoveElement(document.getElementById("chylex-ttc-settings-modal"));
let generateToggle = function(title, option){ const generateToggle = function(title, option){
window.setTimeout(function(){ window.setTimeout(function(){
let toggle = document.getElementById("ttc-opt-"+option); const toggle = document.getElementById("ttc-opt-"+option);
toggle.addEventListener("click", function(){ toggle.addEventListener("click", function(){
settings[option] = toggle.checked; settings[option] = toggle.checked;
@ -574,9 +365,9 @@ function createSettingsModal(){
</div>`; </div>`;
}; };
let generateTxtbox = function(title, option, cfg){ const generateTxtbox = function(title, option, cfg){
window.setTimeout(function(){ window.setTimeout(function(){
let input = document.getElementById("ttc-opt-"+option); const input = document.getElementById("ttc-opt-"+option);
input.addEventListener("input", debounce(function(){ input.addEventListener("input", debounce(function(){
settings[option] = input.value; settings[option] = input.value;
@ -595,10 +386,10 @@ function createSettingsModal(){
</div>`; </div>`;
}; };
let generateSlider = function(title, option, cfg){ const generateSlider = function(title, option, cfg){
window.setTimeout(function(){ window.setTimeout(function(){
let slider = document.getElementById("ttc-opt-"+option); const slider = document.getElementById("ttc-opt-"+option);
let regenerate = debounce(onSettingsUpdated, cfg.wait); const regenerate = debounce(onSettingsUpdated, cfg.wait);
slider.addEventListener("input", function(){ slider.addEventListener("input", function(){
settings[option] = parseInt(slider.value, 10); settings[option] = parseInt(slider.value, 10);
@ -619,7 +410,7 @@ function createSettingsModal(){
</div>`; </div>`;
}; };
let modal = document.createElement("div"); const modal = document.createElement("div");
modal.id = "chylex-ttc-settings-modal"; modal.id = "chylex-ttc-settings-modal";
modal.innerHTML = ` modal.innerHTML = `
<h2> <h2>
@ -637,7 +428,6 @@ function createSettingsModal(){
${generateSlider("Chat Width", "chatWidth", { min: 250, max: 600, step: 25, wait: 500, text: "px" })} ${generateSlider("Chat Width", "chatWidth", { min: 250, max: 600, step: 25, wait: 500, text: "px" })}
${generateTxtbox("Chat Filters", "chatFilters", { wait: 500, placeholder: "Example: kappa, *abc*" })} ${generateTxtbox("Chat Filters", "chatFilters", { wait: 500, placeholder: "Example: kappa, *abc*" })}
${generateToggle("Gray Theme", "grayTheme")} ${generateToggle("Gray Theme", "grayTheme")}
${generateToggle("Hide Timestamps", "hideTimestamps")}
</div> </div>
<div class="ttc-flex-column"> <div class="ttc-flex-column">
@ -679,10 +469,10 @@ function createSettingsModal(){
} }
function insertSettingsButton(){ function insertSettingsButton(){
const container = document.querySelector("[data-test-selector='chat-room-component-layout'] > div,.video-chat"); const container = document.querySelector("[data-test-selector='chat-room-component-layout'] > div, .video-chat");
if (!container){ if (!container){
return; return false;
} }
container.classList.add("chylex-ttc-chat-container"); container.classList.add("chylex-ttc-chat-container");
@ -702,8 +492,6 @@ function insertSettingsButton(){
} }
}); });
refreshChatFilters();
if (isFirefox && container.classList.contains("video-chat")){ if (isFirefox && container.classList.contains("video-chat")){
const wrapper = document.querySelector(".video-chat__message-list-wrapper"); const wrapper = document.querySelector(".video-chat__message-list-wrapper");
const unsynced = "video-chat__message-list-wrapper--unsynced"; const unsynced = "video-chat__message-list-wrapper--unsynced";
@ -720,22 +508,45 @@ function insertSettingsButton(){
} }
}); });
} }
return true;
} }
// Setup // Setup
var prevAddress = null;
var rehookInterval = null;
window.setInterval(function(){ window.setInterval(function(){
if (!document.getElementById("chylex-ttc-settings-btn")){ if (location.href != prevAddress){
insertSettingsButton(); prevAddress = location.href;
var hooks = [
refreshChatFilters,
setupClassHelpers,
insertSettingsButton
];
window.clearInterval(rehookInterval);
rehookInterval = window.setInterval(function(){
for(let index = hooks.length - 1; index >= 0; index--){
if (hooks[index]()){
hooks.splice(index, 1);
}
}
if (hooks.length === 0){
window.clearInterval(rehookInterval);
rehookInterval = null;
}
}, 250);
} }
}, 2000); }, 1000);
document.body.addEventListener("click", function(){ document.body.addEventListener("click", function(){
tryRemoveElement(document.getElementById("chylex-ttc-settings-modal")); tryRemoveElement(document.getElementById("chylex-ttc-settings-modal"));
}); });
generateSettingsCSS(); generateSettingsCSS();
generateCustomCSS();
if (settings.globalSwitch){
generateCustomCSS();
}