README.md

@@ -7,7 +7,6 @@
 Transparent Twitch Chat is a user script that improves your PogChamp experience in the **Theater mode**.
 
 * Chat width, location, and opacity are customizable
-  * Click the current chat width value to set a custom value
 * Chat filters (comma-separated list of words, see [the guide](https://github.com/chylex/Transparent-Twitch-Chat/wiki/Chat-Filters))
 * Toggle between default purple theme and gray theme
 * Individual or all badges can be hidden for less clutter

dist/TransparentTwitchChat.user.js

@@ -1,7 +1,7 @@
 // ==UserScript==
 // @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!
-// @version      1.5.0
+// @version      1.4.9
 // @namespace    https://chylex.com
 // @homepageURL  https://github.com/chylex/Transparent-Twitch-Chat
 // @supportURL   https://github.com/chylex/Transparent-Twitch-Chat/issues
@@ -100,19 +100,20 @@ ${rcol} .video-chat__message-list-wrapper:not(.video-chat__message-list-wrapper-
 ` : ``}
 
 ${isTheatre} .video-player video {object-position:${settings.playerPosition == "#opposite-chat" ? (isChatLeft ? "center right" : "center left") : settings.playerPosition}!important}
-${rcol}${wa}, ${rcol} .channel-root__right-column${wa} {width:${settings.chatWidth}px!important}
+${rcol}${wa}, ${rcol} .channel-root__right-column${wa} {width:${settings.chatWidth - 10}px!important}
 ${rcol} .chat-shell__expanded {min-width:0!important}
 ${rcol} .video-chat {flex-basis:auto!important}
 ${rcol} .video-chat__header {display:none!important}
-${rcol} .room-picker {width:${settings.chatWidth}px}
+${rcol} .room-picker {width:${settings.chatWidth - 10}px}
 ${rcol} .hidden {display:none}
-${rcol} .video-chat__sync-button {width:${Math.max(0, settings.chatWidth - 40)}px;z-index:10;background-color:#b8b5c0!important}
+${rcol} .video-chat__sync-button {width:${settings.chatWidth - 50}px;z-index:10;background-color:#b8b5c0!important}
 
 #root[data-a-page-loaded-name="VideoWatchPage"] ${rcolBlur}:not(.right-column--collapsed) .right-column__toggle-visibility {
 display: none !important;
 }
 ${settings.hideTimestamps ? `
-${rcol} .vod-message__header div[class*="ScAttachedTooltipWrapper-"] {display:none!important}
+${rcol} .vod-message--timestamp .tw-tooltip-wrapper,${rcol} .vod-message div[data-test-selector="message-timestamp"] {display:none!important}
+${rcol} .vod-message--timestamp {padding-left:0.5rem}
 ` : ``}
 ${settings.hideHeader ? `
 ${rcolBlur} .stream-chat-header {display:none!important}
@@ -126,8 +127,8 @@ ${settings.hidePinnedCheer ? `
 ` : ``}
 ${settings.transparentChat ? `
 body:not(${fullScreen}) .persistent-player--theatre {width:100%!important}
-body:not(${fullWidth}):not(${fullScreen}) .persistent-player--theatre .top-bar,body:not(${fullWidth}):not(${fullScreen}) .persistent-player--theatre div[data-a-target="player-controls"] {padding-right:${settings.chatWidth}px}
+body:not(${fullWidth}):not(${fullScreen}) .persistent-player--theatre .top-bar,body:not(${fullWidth}):not(${fullScreen}) .persistent-player--theatre div[data-a-target="player-controls"] {padding-right:${settings.chatWidth - 10}px}
-body:not(${fullWidth}):not(${fullScreen}) .persistent-player--theatre .player-overlay-background > div {right:${settings.chatWidth}px!important}
+body:not(${fullWidth}):not(${fullScreen}) .persistent-player--theatre .player-overlay-background > div {right:${settings.chatWidth - 10}px!important}
 ${rcolBlur} .channel-root__right-column${wa} {background:rgba(14, 12, 19, ${settings.backgroundOpacity * 0.01})!important}
 ${rcolBlur} .channel-root__right-column${wa} > div, ${rcol} .chat-room {background:transparent!important}
 ${rcolBlur} .chylex-ttc-chat-container {color:#ece8f3!important}
@@ -139,21 +140,21 @@ ${rcolBlur} .user-notice-line {background-color:rgba(31, 31, 35, 0.45)!important
 ${rcolBlur} .user-notice-line--highlighted {border-left-color:transparent!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)}}
 ` : `
-body:not(${fullWidth}):not(${fullScreen}) .persistent-player--theatre {width:calc(100% - ${settings.chatWidth}px)!important}
+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}
 `}
 .whispers--theatre-mode.whispers--right-column-expanded-beside {
-right: ${settings.chatWidth}px !important;
+right: ${settings.chatWidth - 10}px !important;
 }
 ${settings.hideConversations ? `
 .whispers--theatre-mode${wa} {display:none!important}
 .video-player__container--theatre-whispers, .highwind-video-player__container--theatre-whispers {bottom:1px!important; // allows hiding player controls in fullscreen by moving cursor all the way down}` : ``}
 ${isChatLeft ? `
 ${rcol}${wa}, ${rcol} .chat-list__lines .simplebar-track.vertical {left:0!important;right:auto!important}
-${rcol} .channel-root__right-column${wa} > div {border-left:none!important;border-right:var(--border-width-default) solid var(--color-border-base)!important}
+${rcol} .channel-root__right-column${wa} {border-left:none!important;border-right:var(--border-width-default) solid var(--color-border-base)!important}
-body:not(${fullWidth}):not(${fullScreen}) .persistent-player--theatre .top-bar {padding-left:${settings.chatWidth + 10}px;padding-right:0}
+body:not(${fullWidth}):not(${fullScreen}) .persistent-player--theatre .top-bar {padding-left:${settings.chatWidth}px;padding-right:0}
-body:not(${fullWidth}):not(${fullScreen}) .persistent-player--theatre div[data-a-target="player-controls"] {padding-left:${settings.chatWidth}px;padding-right:0}
+body:not(${fullWidth}):not(${fullScreen}) .persistent-player--theatre div[data-a-target="player-controls"] {padding-left:${settings.chatWidth - 10}px;padding-right:0}
-body:not(${fullWidth}):not(${fullScreen}) .persistent-player--theatre .player-overlay-background > div {left:${settings.chatWidth}px!important;right:0!important}
+body:not(${fullWidth}):not(${fullScreen}) .persistent-player--theatre .player-overlay-background > div {left:${settings.chatWidth - 10}px!important;right:0!important}
 .whispers--theatre-mode.whispers--right-column-expanded-beside {right:0px!important}
 ${rcol} .right-column__toggle-visibility {transform:rotate(180deg)!important}
 ${rcol}.right-column--collapsed .right-column__toggle-visibility {left:0.5rem}
@@ -188,7 +189,7 @@ ${settings.hideBadgeLeader ? `
 ${rcol} .chat-badge[alt*="Bits Leader"], ${rcol} .chat-badge[alt*="Gifter Leader"] {display:none}
 ` : ``}
 
-#chylex-ttc-settings-btn {margin-left:${settings.chatWidth - 50}px}
+#chylex-ttc-settings-btn {margin-left:${settings.chatWidth - 60}px}
 `;
   
   document.head.appendChild(style);
@@ -208,9 +209,8 @@ function generateSettingsCSS(){
 #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:890px;height:296px;margin-left:-445px;margin-top:-148px;z-index:10000;background-color:rgba(17,17,17,0.796875)}
-#chylex-ttc-settings-modal-header {display:flex;justify-content:center;gap:12px;padding:14px 0 13px;background-color:rgba(0,0,0,0.59765625)}
+#chylex-ttc-settings-modal #ttc-opt-global-wrapper {position:absolute;margin:5px 0 0 -69px;display:inline-block}
-#chylex-ttc-settings-modal-header input {flex:0 0 auto}
+#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-header h2 {flex:0 0 auto;color:rgba(255,255,255,0.9296875);font-size:24px;margin:0}
 #chylex-ttc-settings-modal .ttc-flex-container {display:flex;flex-direction:row;justify-content:space-between;padding:8px 4px}
 #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}
@@ -227,8 +227,9 @@ function generateSettingsCSS(){
 #chylex-ttc-settings-modal input[type="text"] {width:100%;padding:1px 4px}
 #chylex-ttc-settings-modal input[type="range"] {width:100%}
 #chylex-ttc-settings-modal select {width:100%;padding:1px 0}
-#chylex-ttc-settings-modal output {color:rgba(255,255,255,0.796875);display:inline-block;flex:0 0 auto;padding-left:5px;text-align:right}
+#chylex-ttc-settings-modal output {color:rgba(255,255,255,0.796875);display:inline-block;flex:1 1 42px;padding-left:6px;text-align:left}
-#chylex-ttc-settings-modal .editable:hover {cursor:pointer;text-decoration:underline}
+#chylex-ttc-settings-modal .tw-toggle__button {width:4rem}
+#chylex-ttc-settings-modal .tw-toggle__button, #chylex-ttc-settings-modal .tw-toggle__button::after {border-radius:0}
 `;
   
   document.head.appendChild(style);
@@ -401,9 +402,9 @@ function createSettingsModal(){
     });
     
     return generateOptionBase(title, `
-<div>
+<div class="tw-toggle">
-  <input id="ttc-opt-${option}" value="${settings[option] ? "on" : "off"}" type="checkbox"${settings[option] ? " checked" : ""}>
+  <input class="tw-toggle__input" id="ttc-opt-${option}" value="${settings[option] ? "on" : "off"}" type="checkbox"${settings[option] ? " checked" : ""}>
-  <label for="ttc-opt-${option}"></label>
+  <label for="ttc-opt-${option}" class="tw-toggle__button"></label>
 </div>`, floatLeft ? { floatLeft: true } : {});
   };
   
@@ -429,47 +430,19 @@ function createSettingsModal(){
   };
   
   const generateSlider = function(title, option, cfg){
-    prepareOptionEvent(option, function(ele) {
+    prepareOptionEvent(option, function(ele){
       const regenerate = debounce(onSettingsUpdated, cfg.wait);
-  
+      
-      function setSliderValue(value) {
+      ele.addEventListener("input", function(){
-        settings[option] = value;
+        settings[option] = parseInt(ele.value, 10);
-        document.getElementById("ttc-optval-" + option).value = value + cfg.text;
+        document.getElementById("ttc-optval-" + option).value = ele.value + cfg.text;
         regenerate();
-      }
-  
-      ele.addEventListener("input", function() {
-        setSliderValue(ele.value, parseInt(ele.value, 10));
       });
-  
-      if (cfg.editable) {
-        ele.nextElementSibling.classList.add("editable");
-        ele.nextElementSibling.addEventListener("click", function() {
-          let customValue = prompt("Set custom value:", settings[option]);
-          if (customValue === null) {
-            return;
-          }
-      
-          customValue = customValue.trim();
-      
-          if (customValue.endsWith(cfg.text)) {
-            customValue = customValue.slice(0, -cfg.text.length).trim();
-          }
-      
-          if (/^\d+$/.test(customValue) === false) {
-            alert("Invalid value.");
-            return;
-          }
-      
-          setSliderValue(parseInt(customValue, 10));
-          ele.value = customValue;
-        });
-      }
     });
     
     return generateOptionBase(title, `
   <input id="ttc-opt-${option}" type="range" min="${cfg.min}" max="${cfg.max}" step="${cfg.step}" value="${settings[option]}">
-  <output id="ttc-optval-${option}" for="ttc-opt-${option}" style="min-width:${cfg.width}px;">${settings[option]}${cfg.text}</option>
+  <output id="ttc-optval-${option}" for="ttc-opt-${option}">${settings[option]}${cfg.text}</option>
 `, { itemClasses: "ttc-setting-small-margin" });
   };
   
@@ -478,15 +451,19 @@ function createSettingsModal(){
   const modal = document.createElement("div");
   modal.id = "chylex-ttc-settings-modal";
   modal.innerHTML = `
-<div id="chylex-ttc-settings-modal-header">
+<h2>
-  <input id="ttc-opt-global" value="${settings.globalSwitch ? "on" : "off"}" type="checkbox"${settings.globalSwitch ? " checked" : ""}>
+  <div id="ttc-opt-global-wrapper" class="tw-toggle">
-  <h2>Transparent Twitch Chat</h2>
+    <input class="tw-toggle__input" id="ttc-opt-global" value="${settings.globalSwitch ? "on" : "off"}" type="checkbox"${settings.globalSwitch ? " checked" : ""}>
-</div>
+    <label for="ttc-opt-global" class="tw-toggle__button"></label>
+  </div>
+
+  <span>Transparent Twitch Chat</span>
+</h2>
 
 <div class="ttc-flex-container">
   <div style="flex: 0 0 25%">
     <p>General</p>
-    ${generateSlider("Chat Width", "chatWidth", { min: 250, max: 800, step: 25, wait: 500, width: 48, text: "px", editable: true })}
+    ${generateSlider("Chat Width", "chatWidth", { min: 250, max: 600, step: 25, wait: 500, text: "px" })}
     ${generateTxtbox("Chat Filters", "chatFilters", { wait: 500, placeholder: "Example: kappa, *abc*" })}
     ${generateSelect("Player Position", "playerPosition", {
       "#opposite-chat": "Opposite of Chat",
@@ -509,7 +486,7 @@ function createSettingsModal(){
     ${generateToggle("Transparent Chat", "transparentChat")}
     ${generateToggle("Smooth Text Shadow", "smoothTextShadow")}
     ${generateToggle("Chat on Left Side", "chatLeftSide")}
-    ${generateSlider("Background Opacity", "backgroundOpacity", { min: 0, max: 100, step: 5, wait: 100, width: 42, text: "%" })}
+    ${generateSlider("Background Opacity", "backgroundOpacity", { min: 0, max: 100, step: 5, wait: 100, text: "%" })}
   </div>
 
   <div style="flex: 0 0 16%">
@@ -533,7 +510,7 @@ function createSettingsModal(){
     ${generateToggle("Hide Sub Gift Badge", "hideBadgeSubGift")}
     ${generateToggle("Hide Bit Cheer Badge", "hideBadgeBitCheer")}
     ${generateToggle("Hide Gift/Bit Leader Badge", "hideBadgeLeader")}
-    ${generateSlider("Badge Opacity", "badgeOpacity", { min: 0, max: 100, step: 5, wait: 100, width: 42, text: "%" })}
+    ${generateSlider("Badge Opacity", "badgeOpacity", { min: 0, max: 100, step: 5, wait: 100, text: "%" })}
   </div>
 </div>
 `;

src/main.js

@@ -126,7 +126,7 @@ ${isTheatre} .video-player video {
 // general chat styles
 
 ${rcol}${wa}, ${rcol} .channel-root__right-column${wa} {
-  width: ${settings.chatWidth}px !important;
+  width: ${settings.chatWidth - 10}px !important;
 }
 
 ${rcol} .chat-shell__expanded {
@@ -142,7 +142,7 @@ ${rcol} .video-chat__header {
 }
 
 ${rcol} .room-picker {
-  width: ${settings.chatWidth}px;
+  width: ${settings.chatWidth - 10}px;
 }
 
 ${rcol} .hidden {
@@ -150,7 +150,7 @@ ${rcol} .hidden {
 }
 
 ${rcol} .video-chat__sync-button {
-  width: ${Math.max(0, settings.chatWidth - 40)}px;
+  width: ${settings.chatWidth - 50}px;
   z-index: 10;
   background-color: #b8b5c0 !important;
 }
@@ -199,11 +199,11 @@ ${settings.transparentChat ? `@#css{{
 
   body:not(${fullWidth}):not(${fullScreen}) .persistent-player--theatre .top-bar,
   body:not(${fullWidth}):not(${fullScreen}) .persistent-player--theatre div[data-a-target="player-controls"] {
-    padding-right: ${settings.chatWidth}px;
+    padding-right: ${settings.chatWidth - 10}px;
   }
 
   body:not(${fullWidth}):not(${fullScreen}) .persistent-player--theatre .player-overlay-background > div {
-    right: ${settings.chatWidth}px !important;
+    right: ${settings.chatWidth - 10}px !important;
   }
 
   // chat container transparency
@@ -272,7 +272,7 @@ ${settings.transparentChat ? `@#css{{
   // adapt player size with disabled transparency
 
   body:not(${fullWidth}):not(${fullScreen}) .persistent-player--theatre {
-    width: calc(100% - ${settings.chatWidth}px) !important;
+    width: calc(100% - ${settings.chatWidth - 10}px) !important;
   }
 
   body:not(${fullScreen}) .persistent-player--theatre .player-streamstatus {
@@ -283,7 +283,7 @@ ${settings.transparentChat ? `@#css{{
 // conversation menu and bottom margin
 
 .whispers--theatre-mode.whispers--right-column-expanded-beside {
-  right: ${settings.chatWidth}px !important;
+  right: ${settings.chatWidth - 10}px !important;
 }
 
 ${settings.hideConversations ? `@#css{{
@@ -304,23 +304,23 @@ ${isChatLeft ? `@#css{{
     right: auto !important;
   }
 
-  ${rcol} .channel-root__right-column${wa} > div {
+  ${rcol} .channel-root__right-column${wa} {
     border-left: none !important;
     border-right: var(--border-width-default) solid var(--color-border-base) !important;
   }
 
   body:not(${fullWidth}):not(${fullScreen}) .persistent-player--theatre .top-bar {
-    padding-left: ${settings.chatWidth + 10}px;
-    padding-right: 0;
-  }
-
-  body:not(${fullWidth}):not(${fullScreen}) .persistent-player--theatre div[data-a-target="player-controls"] {
     padding-left: ${settings.chatWidth}px;
     padding-right: 0;
   }
 
+  body:not(${fullWidth}):not(${fullScreen}) .persistent-player--theatre div[data-a-target="player-controls"] {
+    padding-left: ${settings.chatWidth - 10}px;
+    padding-right: 0;
+  }
+
   body:not(${fullWidth}):not(${fullScreen}) .persistent-player--theatre .player-overlay-background > div {
-    left: ${settings.chatWidth}px !important;
+    left: ${settings.chatWidth - 10}px !important;
     right: 0 !important;
   }
 
@@ -418,7 +418,7 @@ ${settings.hideBadgeLeader ? `@#css{{
 // dynamic styles for settings, replaces default style
 
 #chylex-ttc-settings-btn {
-  margin-left: ${settings.chatWidth - 50}px;
+  margin-left: ${settings.chatWidth - 60}px;
 }
 
 @#css}}
@@ -481,23 +481,19 @@ function generateSettingsCSS(){
   background-color: @#hex(111c);
 }
 
-#chylex-ttc-settings-modal-header {
+#chylex-ttc-settings-modal #ttc-opt-global-wrapper {
-  display: flex;
+  position: absolute;
-  justify-content: center;
+  margin: 5px 0 0 -69px;
-  gap: 12px;
+  display: inline-block;
-  padding: 14px 0 13px;
-  background-color: @#hex(0009);
 }
 
-#chylex-ttc-settings-modal-header input {
+#chylex-ttc-settings-modal h2 {
-  flex: 0 0 auto;
-}
-
-#chylex-ttc-settings-modal-header h2 {
-  flex: 0 0 auto;
   color: @#hex(fffe);
   font-size: 24px;
+  text-align: center;
   margin: 0;
+  padding: 14px 0 13px;
+  background-color: @#hex(0009);
 }
 
 #chylex-ttc-settings-modal .ttc-flex-container {
@@ -589,9 +585,12 @@ function generateSettingsCSS(){
   text-align: right;
 }
 
-#chylex-ttc-settings-modal .editable:hover {
+#chylex-ttc-settings-modal .tw-toggle__button {
-  cursor: pointer;
+  width: 4rem;
-  text-decoration: underline;
+}
+
+#chylex-ttc-settings-modal .tw-toggle__button, #chylex-ttc-settings-modal .tw-toggle__button::after {
+  border-radius: 0;
 }
 @#css}}@#rem}}`;
   
@@ -765,9 +764,9 @@ function createSettingsModal(){
     });
     
     return generateOptionBase(title, `
-<div>
+<div class="tw-toggle">
-  <input id="ttc-opt-${option}" value="${settings[option] ? "on" : "off"}" type="checkbox"${settings[option] ? " checked" : ""}>
+  <input class="tw-toggle__input" id="ttc-opt-${option}" value="${settings[option] ? "on" : "off"}" type="checkbox"${settings[option] ? " checked" : ""}>
-  <label for="ttc-opt-${option}"></label>
+  <label for="ttc-opt-${option}" class="tw-toggle__button"></label>
 </div>`, floatLeft ? { floatLeft: true } : {});
   };
   
@@ -793,42 +792,14 @@ function createSettingsModal(){
   };
   
   const generateSlider = function(title, option, cfg){
-    prepareOptionEvent(option, function(ele) {
+    prepareOptionEvent(option, function(ele){
       const regenerate = debounce(onSettingsUpdated, cfg.wait);
-  
+      
-      function setSliderValue(value) {
+      ele.addEventListener("input", function(){
-        settings[option] = value;
+        settings[option] = parseInt(ele.value, 10);
-        document.getElementById("ttc-optval-" + option).value = value + cfg.text;
+        document.getElementById("ttc-optval-" + option).value = ele.value + cfg.text;
         regenerate();
-      }
-  
-      ele.addEventListener("input", function() {
-        setSliderValue(ele.value, parseInt(ele.value, 10));
       });
-  
-      if (cfg.editable) {
-        ele.nextElementSibling.classList.add("editable");
-        ele.nextElementSibling.addEventListener("click", function() {
-          let customValue = prompt("Set custom value:", settings[option]);
-          if (customValue === null) {
-            return;
-          }
-      
-          customValue = customValue.trim();
-      
-          if (customValue.endsWith(cfg.text)) {
-            customValue = customValue.slice(0, -cfg.text.length).trim();
-          }
-      
-          if (/^\d+$/.test(customValue) === false) {
-            alert("Invalid value.");
-            return;
-          }
-      
-          setSliderValue(parseInt(customValue, 10));
-          ele.value = customValue;
-        });
-      }
     });
     
     return generateOptionBase(title, `
@@ -842,15 +813,19 @@ function createSettingsModal(){
   const modal = document.createElement("div");
   modal.id = "chylex-ttc-settings-modal";
   modal.innerHTML = `
-<div id="chylex-ttc-settings-modal-header">
+<h2>
-  <input id="ttc-opt-global" value="${settings.globalSwitch ? "on" : "off"}" type="checkbox"${settings.globalSwitch ? " checked" : ""}>
+  <div id="ttc-opt-global-wrapper" class="tw-toggle">
-  <h2>Transparent Twitch Chat</h2>
+    <input class="tw-toggle__input" id="ttc-opt-global" value="${settings.globalSwitch ? "on" : "off"}" type="checkbox"${settings.globalSwitch ? " checked" : ""}>
-</div>
+    <label for="ttc-opt-global" class="tw-toggle__button"></label>
+  </div>
+
+  <span>Transparent Twitch Chat</span>
+</h2>
 
 <div class="ttc-flex-container">
   <div style="flex: 0 0 25%">
     <p>General</p>
-    ${generateSlider("Chat Width", "chatWidth", { min: 250, max: 800, step: 25, wait: 500, width: 48, text: "px", editable: true })}
+    ${generateSlider("Chat Width", "chatWidth", { min: 250, max: 800, step: 25, wait: 500, width: 48, text: "px" })}
     ${generateTxtbox("Chat Filters", "chatFilters", { wait: 500, placeholder: "Example: kappa, *abc*" })}
     ${generateSelect("Player Position", "playerPosition", {
       "#opposite-chat": "Opposite of Chat",