cherry pick Anarios#540

Userscript custom colors using user options Anarios#539 Userscript user options introduce user options to userscript. Using existing options available in extension for now, plus showing update popup. Part of Anarios#539 userscript custom number formats using user options Anarios#539 resolves Anarios#520
cyrildtm · Apr 20, 2022 · 068ada3 · 068ada3
1 parent 09b29d7
commit 068ada3
Showing 1 changed file with 95 additions and 4 deletions.
diff --git a/Extensions/UserScript/Return Youtube Dislike.user.js b/Extensions/UserScript/Return Youtube Dislike.user.js
@@ -22,6 +22,20 @@
 // @grant        GM_addStyle
 // @run-at       document-end
 // ==/UserScript==
+
+const extConfig = {
+// BEGIN USER OPTIONS
+// You may change the following variables to allowed values listed in the corresponding brackets (* means default). Keep the style and keywords intact. 
+  showUpdatePopup: false, // [true, false*] Show a popup tab after extension update (See what's new)
+  disableVoteSubmission: false, // [true, false*] Disable like/dislike submission (Stops counting your likes and dislikes)
+  coloredThumbs: false, // [true, false*] Colorize thumbs (Use custom colors for thumb icons)
+  coloredBar: false, // [true, false*] Colorize ratio bar (Use custom colors for ratio bar)
+  colorTheme: "classic", // [classic*, accessible, neon] Color theme (red/green, blue/yellow, pink/cyan)
+  numberDisplayFormat: "compactShort", // [compactShort*, compactLong, standard] Number format (For non-English locale users, you may be able to improve appearance with a different option. Please file a feature request if your locale is not covered)
+  numberDisplayRoundDown: true, // [true*, false] Round down numbers (Show rounded down numbers)
+// END USER OPTIONS
+};
+
 const LIKED_STATE = "LIKED_STATE";
 const DISLIKED_STATE = "DISLIKED_STATE";
 const NEUTRAL_STATE = "NEUTRAL_STATE";
@@ -205,18 +219,25 @@ function createRateBar(likes, dislikes) {
     likes + dislikes > 0 ? (likes / (likes + dislikes)) * 100 : 50;
 
   if (!rateBar && !isMobile) {
+    let colorLikeStyle = "";
+    let colorDislikeStyle = "";
+    if (extConfig.coloredBar) {
+      colorLikeStyle = "; background-color: " + getColorFromTheme(true);
+      colorDislikeStyle = "; background-color: " + getColorFromTheme(false);
+    }
+
     document.getElementById("menu-container").insertAdjacentHTML(
       "beforeend",
       `
         <div class="ryd-tooltip" style="width: ${widthPx}px">
         <div class="ryd-tooltip-bar-container">
            <div
               id="return-youtube-dislike-bar-container"
-              style="width: 100%; height: 2px;"
+              style="width: 100%; height: 2px;${colorDislikeStyle}"
               >
               <div
                  id="return-youtube-dislike-bar"
-                 style="width: ${widthPercent}%; height: 100%"
+                 style="width: ${widthPercent}%; height: 100%${colorDislikeStyle}"
                  ></div>
            </div>
         </div>
@@ -236,6 +257,13 @@ function createRateBar(likes, dislikes) {
     document.querySelector(
       "#ryd-dislike-tooltip > #tooltip"
     ).innerHTML = `${likes.toLocaleString()}&nbsp;/&nbsp;${dislikes.toLocaleString()}`;
+
+    if (extConfig.coloredBar) {
+      document.getElementById("return-youtube-dislike-bar-container").style.backgroundColor =
+        getColorFromTheme(false);
+      document.getElementById("return-youtube-dislike-bar").style.backgroundColor =
+        getColorFromTheme(true);
+    }
   }
 }
 
@@ -254,6 +282,10 @@ function setState() {
         dislikesvalue = dislikes;
         setDislikes(numberFormat(dislikes));
         createRateBar(likes, dislikes);
+        if (extConfig.coloredThumbs === true) {
+          getLikeButton().style.color = getColorFromTheme(true);
+          getDislikeButton().style.color = getColorFromTheme(false);
+        }
       }
     });
   });
@@ -347,14 +379,73 @@ function numberFormat(numberState) {
         ?.getAttribute("href")
     )?.searchParams?.get("locale");
   } catch {}
+
+  let numberDisplay;
+  if (extConfig.numberDisplayRoundDown === false) {
+    numberDisplay = numberState;
+  } else {
+    numberDisplay = roundDown(numberState);
+  }
+  return getNumberFormatter(extConfig.numberDisplayFormat).format(
+    numberDisplay
+  );
+}
+
+function getNumberFormatter(optionSelect) {
+  let formatterNotation;
+  let formatterCompactDisplay;
+
+  switch (optionSelect) {
+    case "compactLong":
+      formatterNotation = "compact";
+      formatterCompactDisplay = "long";
+      break;
+    case "standard":
+      formatterNotation = "standard";
+      formatterCompactDisplay = "short";
+      break;
+    case "compactShort":
+    default:
+      formatterNotation = "compact";
+      formatterCompactDisplay = "short";
+  }
+
   const formatter = Intl.NumberFormat(
     document.documentElement.lang || userLocales || navigator.language,
     {
-      notation: "compact",
+      notation: formatterNotation,
+      compactDisplay: formatterCompactDisplay,
     }
   );
+  return formatter;
+}
 
-  return formatter.format(roundDown(numberState));
+function getColorFromTheme(voteIsLike) {
+  let colorString;
+  switch (extConfig.colorTheme) {
+    case "accessible":
+      if (voteIsLike === true) {
+        colorString = "dodgerblue";
+      } else {
+        colorString = "gold";
+      }
+      break;
+    case "neon":
+      if (voteIsLike === true) {
+        colorString = "aqua";
+      } else {
+        colorString = "magenta";
+      }
+      break;
+    case "classic":
+    default:
+      if (voteIsLike === true) {
+        colorString = "lime";
+      } else {
+        colorString = "red";
+      }
+  }
+  return colorString;
 }
 
 function setEventListeners(evt) {