Merge pull request #560 from ErykDarnowski/main

Implemented option to show like/dislike percentage instead of full like/dislike count

Extensions/UserScript/Return Youtube Dislike.user.js

@@ -33,6 +33,7 @@ const extConfig = {
   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)
+  tooltipPercentageMode: "none", // [none*, dash_like, dash_dislike, both, only_like, only_dislike] Mode of showing percentage in like/dislike bar tooltip.
   numberDisplayReformatLikes: false, // [true, false*] Re-format like numbers (Make likes and dislikes format consistent)
 // END USER OPTIONS
 };
@@ -262,6 +263,32 @@ function createRateBar(likes, dislikes) {
   const widthPercent =
     likes + dislikes > 0 ? (likes / (likes + dislikes)) * 100 : 50;
 
+  var likePercentage = parseFloat(widthPercent.toFixed(1));
+  const dislikePercentage = (100 - likePercentage).toLocaleString();
+  likePercentage = likePercentage.toLocaleString();
+
+  var tooltipInnerHTML;
+  switch (extConfig.tooltipPercentageMode) {
+    case "dash_like":
+      tooltipInnerHTML = `${likes.toLocaleString()} / ${dislikes.toLocaleString()}  -  ${likePercentage}%`
+    break;
+    case "dash_dislike":
+      tooltipInnerHTML = `${likes.toLocaleString()} / ${dislikes.toLocaleString()}  -  ${dislikePercentage}%`
+    break;
+    case "both":
+      tooltipInnerHTML = `${likePercentage}% / ${dislikePercentage}%`
+      break;
+    case "only_like":
+      tooltipInnerHTML = `${likePercentage}%`
+      break;
+    case "only_dislike":
+      tooltipInnerHTML = `${dislikePercentage}%`
+      break;
+    default:
+      tooltipInnerHTML = `${likes.toLocaleString()} / ${dislikes.toLocaleString()}`
+  }
+
+
   if (!rateBar && !isMobile) {
     let colorLikeStyle = "";
     let colorDislikeStyle = "";
@@ -269,7 +296,7 @@ function createRateBar(likes, dislikes) {
       colorLikeStyle = "; background-color: " + getColorFromTheme(true);
       colorDislikeStyle = "; background-color: " + getColorFromTheme(false);
     }
-    
+
     document.getElementById("menu-container").insertAdjacentHTML(
       "beforeend",
       `
@@ -286,7 +313,7 @@ function createRateBar(likes, dislikes) {
            </div>
         </div>
         <tp-yt-paper-tooltip position="top" id="ryd-dislike-tooltip" class="style-scope ytd-sentiment-bar-renderer" role="tooltip" tabindex="-1">
-           <!--css-build:shady-->${likes.toLocaleString()}&nbsp;/&nbsp;${dislikes.toLocaleString()}
+           <!--css-build:shady-->${tooltipInnerHTML}
         </tp-yt-paper-tooltip>
         </div>
 `
@@ -300,8 +327,8 @@ function createRateBar(likes, dislikes) {
 
     document.querySelector(
       "#ryd-dislike-tooltip > #tooltip"
-    ).innerHTML = `${likes.toLocaleString()}&nbsp;/&nbsp;${dislikes.toLocaleString()}`;
-    
+    ).innerHTML = tooltipInnerHTML;
+
     if (extConfig.coloredBar) {
       document.getElementById("return-youtube-dislike-bar-container").style.backgroundColor =
         getColorFromTheme(false);

Extensions/combined/popup.css

@@ -15,7 +15,8 @@ html,
 body {
   background-color: var(--background);
   color: var(--white);
-  min-width: 300px;
+  min-width: 310px;
+  min-height: 350px;
   padding: 0.5em;
   font-family: "Roboto", Arial, Helvetica, sans-serif;
   font-size: 14px;

Extensions/combined/popup.html

@@ -166,6 +166,22 @@
     >&nbsp;</span
     >
   </div>
+  <br/>
+  <label class="switch" data-hover="Display percentage in like/dislike bar tooltip.">
+    <input type="checkbox" id="show_tooltip_percentage"/>
+    <span class="slider"/>
+    <span class="switchLabel">Percentage in like/dislike bar tooltip.</span>
+  </label>
+  <div class="custom-select">
+    <label for="tooltip_percentage_mode" data-hover="Use custom percentage display on hover.">Percent mode:</label>
+    <select name="tooltip_percentage_mode" id="tooltip_percentage_mode">
+      <option value="dash_like" id="tooltip_percentage_mode_dash_like">190&nbsp;/&nbsp;10&nbsp;&nbsp;-&nbsp;&nbsp;95%</option>
+      <option value="dash_dislike" id="tooltip_percentage_mode_dash_dislike">190&nbsp;/&nbsp;10&nbsp;&nbsp;-&nbsp;&nbsp;5%</option>
+      <option value="both" id="tooltip_percentage_mode_both">95%&nbsp;/&nbsp;5%</option>
+      <option value="only_like" id="tooltip_percentage_mode_only_like">95%</option>
+      <option value="only_dislike" id="tooltip_percentage_mode_only_dislike">5%</option>
+    </select>
+  </div>
 </fieldset>
 </body>
 <script src="popup.js"></script>

Extensions/combined/popup.js

@@ -1,3 +1,5 @@
+import { cLog } from "./src/utils";
+
 /*   Config   */
 const config = {
   advanced: false,
@@ -7,7 +9,9 @@ const config = {
   colorTheme: "classic",
   numberDisplayFormat: "compactShort",
   numberDisplayRoundDown: true,
-  numberDisplayReformatLikes: false, 
+  showTooltipPercentage: false,
+  tooltipPercentageMode: "dash_like",
+  numberDisplayReformatLikes: false,
   showAdvancedMessage:
     '<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor"><rect fill="none" height="24" width="24"/><path d="M19.5,12c0-0.23-0.01-0.45-0.03-0.68l1.86-1.41c0.4-0.3,0.51-0.86,0.26-1.3l-1.87-3.23c-0.25-0.44-0.79-0.62-1.25-0.42 l-2.15,0.91c-0.37-0.26-0.76-0.49-1.17-0.68l-0.29-2.31C14.8,2.38,14.37,2,13.87,2h-3.73C9.63,2,9.2,2.38,9.14,2.88L8.85,5.19 c-0.41,0.19-0.8,0.42-1.17,0.68L5.53,4.96c-0.46-0.2-1-0.02-1.25,0.42L2.41,8.62c-0.25,0.44-0.14,0.99,0.26,1.3l1.86,1.41 C4.51,11.55,4.5,11.77,4.5,12s0.01,0.45,0.03,0.68l-1.86,1.41c-0.4,0.3-0.51,0.86-0.26,1.3l1.87,3.23c0.25,0.44,0.79,0.62,1.25,0.42 l2.15-0.91c0.37,0.26,0.76,0.49,1.17,0.68l0.29,2.31C9.2,21.62,9.63,22,10.13,22h3.73c0.5,0,0.93-0.38,0.99-0.88l0.29-2.31 c0.41-0.19,0.8-0.42,1.17-0.68l2.15,0.91c0.46,0.2,1,0.02,1.25-0.42l1.87-3.23c0.25-0.44,0.14-0.99-0.26-1.3l-1.86-1.41 C19.49,12.45,19.5,12.23,19.5,12z M12.04,15.5c-1.93,0-3.5-1.57-3.5-3.5s1.57-3.5,3.5-3.5s3.5,1.57,3.5,3.5S13.97,15.5,12.04,15.5z"/></svg>',
   hideAdvancedMessage:
@@ -86,6 +90,14 @@ document.getElementById("number_format").addEventListener("change", (ev) => {
   chrome.storage.sync.set({ numberDisplayFormat: ev.target.value });
 });
 
+document.getElementById("show_tooltip_percentage").addEventListener("click", (ev) => {
+  chrome.storage.sync.set({ showTooltipPercentage: ev.target.checked });
+});
+
+document.getElementById("tooltip_percentage_mode").addEventListener("change", (ev) => {
+  chrome.storage.sync.set({ tooltipPercentageMode: ev.target.value });
+});
+
 document.getElementById("number_reformat_likes").addEventListener("click", (ev) => {
   chrome.storage.sync.set({ numberDisplayReformatLikes: ev.target.checked });
 });
@@ -119,6 +131,8 @@ function initConfig() {
   initializeColorTheme();
   initializeNumberDisplayFormat();
   initializeNumberDisplayRoundDown();
+  initializeTooltipPercentage();
+  initializeTooltipPercentageMode();
   initializeNumberDisplayReformatLikes();
 }
 
@@ -190,6 +204,18 @@ function initializeNumberDisplayRoundDown() {
   });
 }
 
+function initializeTooltipPercentage(){
+  chrome.storage.sync.get(["showTooltipPercentage"], (res) => {
+    handleShowTooltipPercentageChangeEvent(res.showTooltipPercentage);
+  });
+};
+
+function initializeTooltipPercentageMode() {
+  chrome.storage.sync.get(["tooltipPercentageMode"], (res) => {
+    handleTooltipPercentageModeChangeEvent(res.tooltipPercentageMode);
+  });
+};
+
 function initializeNumberDisplayFormat() {
   chrome.storage.sync.get(["numberDisplayFormat"], (res) => {
     handleNumberDisplayFormatChangeEvent(res.numberDisplayFormat);
@@ -243,6 +269,9 @@ function storageChangeHandler(changes, area) {
   if (changes.numberDisplayFormat !== undefined) {
     handleNumberDisplayFormatChangeEvent(changes.numberDisplayFormat.newValue);
   }
+  if (changes.showTooltipPercentage !== undefined) {
+    handleShowTooltipPercentageChangeEvent(changes.showTooltipPercentage.newValue);
+  }
   if (changes.numberDisplayReformatLikes !== undefined) {
     handleNumberDisplayReformatLikesChangeEvent(changes.numberDisplayReformatLikes.newValue);
   }
@@ -293,6 +322,22 @@ function handleNumberDisplayFormatChangeEvent(value) {
     .querySelector('option[value="' + value + '"]').selected = true;
 }
 
+function handleShowTooltipPercentageChangeEvent(value) {
+  config.showTooltipPercentage = value;
+  document.getElementById("show_tooltip_percentage").checked = value;
+};
+
+function handleTooltipPercentageModeChangeEvent(value) {
+  if (!value) {
+    value = "dash_like";
+  }
+  config.tooltipPercentageMode = value;
+
+  document
+    .getElementById("tooltip_percentage_mode")
+    .querySelector('option[value="' + value + '"]').selected = true;
+};
+
 function handleNumberDisplayReformatLikesChangeEvent(value) {
   config.numberDisplayReformatLikes = value;
   document.getElementById("number_reformat_likes").checked = value;

Extensions/combined/ryd.background.js

@@ -279,6 +279,12 @@ function storageChangeHandler(changes, area) {
       changes.numberDisplayReformatLikes.newValue
     );
   }
+  if (changes.showTooltipPercentage !== undefined) {
+    handleShowTooltipPercentageChangeEvent(changes.showTooltipPercentage.newValue);
+  }
+  if (changes.numberDisplayReformatLikes !== undefined) {
+    handleNumberDisplayReformatLikesChangeEvent(changes.numberDisplayReformatLikes.newValue);
+  }
 }
 
 function handleDisableVoteSubmissionChangeEvent(value) {
@@ -294,6 +300,17 @@ function handleNumberDisplayFormatChangeEvent(value) {
   extConfig.numberDisplayFormat = value;
 }
 
+function handleShowTooltipPercentageChangeEvent(value) {
+  extConfig.showTooltipPercentage = value;
+};
+
+function handleTooltipPercentageModeChangeEvent(value) {
+  if (!value) {
+    value = "dash_like";
+  }
+  extConfig.tooltipPercentageMode = value;
+};
+
 function handleNumberDisplayRoundDownChangeEvent(value) {
   extConfig.numberDisplayRoundDown = value;
 }
@@ -335,6 +352,8 @@ function initExtConfig() {
   initializeNumberDisplayFormat();
   initializeNumberDisplayRoundDown();
   initializeNumberDisplayReformatLikes();
+  initializeTooltipPercentage();
+  initializeTooltipPercentageMode();
 }
 
 function initializeDisableVoteSubmission() {
@@ -398,6 +417,26 @@ function initializeNumberDisplayFormat() {
   });
 }
 
+function initializeTooltipPercentage() {
+  api.storage.sync.get(["showTooltipPercentage"], (res) => {
+    if (res.showTooltipPercentage === undefined) {
+      api.storage.sync.set({ showTooltipPercentage: false });
+    } else {
+      extConfig.showTooltipPercentage = res.showTooltipPercentage;
+    }
+  });
+}
+
+function initializeTooltipPercentageMode() {
+  api.storage.sync.get(["tooltipPercentageMode"], (res) => {
+    if (res.tooltipPercentageMode === undefined) {
+      api.storage.sync.set({ tooltipPercentageMode: "dash_like" });
+    } else {
+      extConfig.tooltipPercentageMode = res.tooltipPercentageMode;
+    }
+  });
+}
+
 function initializeNumberDisplayReformatLikes() {
   api.storage.sync.get(["numberDisplayReformatLikes"], (res) => {
     if (res.numberDisplayReformatLikes === undefined) {

Extensions/combined/src/bar.js

@@ -1,5 +1,5 @@
 import { getButtons } from "./buttons";
-import { extConfig, isMobile, isLikesDisabled } from "./state";
+import { extConfig, isMobile, isLikesDisabled, isShorts } from "./state";
 import { cLog, getColorFromTheme } from "./utils";
 
 function createRateBar(likes, dislikes) {
@@ -14,49 +14,78 @@ function createRateBar(likes, dislikes) {
     const widthPercent =
       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);
-      }
+    var likePercentage = parseFloat(widthPercent.toFixed(1));
+    const dislikePercentage = (100 - likePercentage).toLocaleString();
+    likePercentage = likePercentage.toLocaleString();
 
-      (
-        document.getElementById("menu-container") ||
-        document.querySelector("ytm-slim-video-action-bar-renderer")
-      ).insertAdjacentHTML(
-        "beforeend",
-        `
-            <div class="ryd-tooltip" style="width: ${widthPx}px">
-            <div class="ryd-tooltip-bar-container">
-               <div
-                  id="ryd-bar-container"
-                  style="width: 100%; height: 2px;${colorDislikeStyle}"
-                  >
-                  <div
-                     id="ryd-bar"
-                     style="width: ${widthPercent}%; height: 100%${colorLikeStyle}"
-                     ></div>
-               </div>
-            </div>
-            <tp-yt-paper-tooltip position="top" id="ryd-dislike-tooltip" class="style-scope ytd-sentiment-bar-renderer" role="tooltip" tabindex="-1">
-               <!--css-build:shady-->${likes.toLocaleString()}&nbsp;/&nbsp;${dislikes.toLocaleString()}
-            </tp-yt-paper-tooltip>
-            </div>
-    `
-      );
+    if (extConfig.showTooltipPercentage) {
+      var tooltipInnerHTML;
+      switch (extConfig.tooltipPercentageMode) {        
+        case "dash_dislike":
+          tooltipInnerHTML = `${likes.toLocaleString()}&nbsp;/&nbsp;${dislikes.toLocaleString()}&nbsp;&nbsp;-&nbsp;&nbsp;${dislikePercentage}%`
+        break;
+        case "both":
+          tooltipInnerHTML = `${likePercentage}%&nbsp;/&nbsp;${dislikePercentage}%`
+          break;
+        case "only_like":
+          tooltipInnerHTML = `${likePercentage}%`
+          break;
+        case "only_dislike":
+          tooltipInnerHTML = `${dislikePercentage}%`
+          break;
+        default: // dash_like
+          tooltipInnerHTML = `${likes.toLocaleString()}&nbsp;/&nbsp;${dislikes.toLocaleString()}&nbsp;&nbsp;-&nbsp;&nbsp;${likePercentage}%`
+      }
     } else {
-      document.getElementById("ryd-bar-container").style.width = widthPx + "px";
-      document.getElementById("ryd-bar").style.width = widthPercent + "%";
-      document.querySelector(
-        "#ryd-dislike-tooltip > #tooltip"
-      ).innerHTML = `${likes.toLocaleString()}&nbsp;/&nbsp;${dislikes.toLocaleString()}`;
-      if (extConfig.coloredBar) {
-        document.getElementById("ryd-bar-container").style.backgroundColor =
-          getColorFromTheme(false);
-        document.getElementById("ryd-bar").style.backgroundColor =
-          getColorFromTheme(true);
+      tooltipInnerHTML = `${likes.toLocaleString()}&nbsp;/&nbsp;${dislikes.toLocaleString()}`
+    }
+    
+    
+    if (!isShorts()) {
+      if (!rateBar && !isMobile()) {
+        let colorLikeStyle = "";
+        let colorDislikeStyle = "";
+        if (extConfig.coloredBar) {
+          colorLikeStyle = "; background-color: " + getColorFromTheme(true);
+          colorDislikeStyle = "; background-color: " + getColorFromTheme(false);
+        }
+
+        (
+          document.getElementById("menu-container") ||
+          document.querySelector("ytm-slim-video-action-bar-renderer")
+        ).insertAdjacentHTML(
+          "beforeend",
+          `
+              <div class="ryd-tooltip" style="width: ${widthPx}px">
+              <div class="ryd-tooltip-bar-container">
+                <div
+                    id="ryd-bar-container"
+                    style="width: 100%; height: 2px;${colorDislikeStyle}"
+                    >
+                    <div
+                      id="ryd-bar"
+                      style="width: ${widthPercent}%; height: 100%${colorLikeStyle}"
+                      ></div>
+                </div>
+              </div>
+              <tp-yt-paper-tooltip position="top" id="ryd-dislike-tooltip" class="style-scope ytd-sentiment-bar-renderer" role="tooltip" tabindex="-1">
+                <!--css-build:shady-->${tooltipInnerHTML}
+              </tp-yt-paper-tooltip>
+              </div>
+      `
+        );
+      } else {
+        document.getElementById("ryd-bar-container").style.width = widthPx + "px";
+        document.getElementById("ryd-bar").style.width = widthPercent + "%";
+        document.querySelector(
+          "#ryd-dislike-tooltip > #tooltip"
+        ).innerHTML = tooltipInnerHTML;
+        if (extConfig.coloredBar) {
+          document.getElementById("ryd-bar-container").style.backgroundColor =
+            getColorFromTheme(false);
+          document.getElementById("ryd-bar").style.backgroundColor =
+            getColorFromTheme(true);
+        }
       }
     }
   } else {

Extensions/combined/src/state.js

@@ -23,6 +23,8 @@ let extConfig = {
   colorTheme: "classic",
   numberDisplayFormat: "compactShort",
   numberDisplayRoundDown: true,
+  showTooltipPercentage: false,
+  tooltipPercentageMode: "dash_like",
   numberDisplayReformatLikes: false,
 };
 
@@ -254,6 +256,8 @@ function initExtConfig() {
   initializeColorTheme();
   initializeNumberDisplayFormat();
   initializeNumberDisplayRoundDown();
+  initializeTooltipPercentage();
+  initializeTooltipPercentageMode();
   initializeNumberDisplayReformatLikes();
 }
 
@@ -317,6 +321,26 @@ function initializeNumberDisplayFormat() {
   });
 }
 
+function initializeTooltipPercentage() {
+  getBrowser().storage.sync.get(["showTooltipPercentage"], (res) => {
+    if (res.showTooltipPercentage === undefined) {
+      getBrowser().storage.sync.set({ showTooltipPercentage: false });
+    } else {
+      extConfig.showTooltipPercentage = res.showTooltipPercentage;
+    }
+  });
+}
+
+function initializeTooltipPercentageMode() {
+  getBrowser().storage.sync.get(["tooltipPercentageMode"], (res) => {
+    if (res.tooltipPercentageMode === undefined) {
+      getBrowser().storage.sync.set({ tooltipPercentageMode: "dash_like" });
+    } else {
+      extConfig.tooltipPercentageMode = res.tooltipPercentageMode;
+    }
+  });
+}
+
 function initializeNumberDisplayReformatLikes() {
   getBrowser().storage.sync.get(["numberDisplayReformatLikes"], (res) => {
     if (res.numberDisplayReformatLikes === undefined) {