Merge pull request #549 from cyrildtm/extOptionFormatLikes

Add user option to re-format likes

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)
+  numberDisplayReformatLikes: false, // [true, false*] Re-format like numbers (Make likes and dislikes format consistent)
 // END USER OPTIONS
 };
 
@@ -198,6 +199,19 @@ function setDislikes(dislikesCount) {
   getButtons().children[1].querySelector("#text").innerText = dislikesCount;
 }
 
+function getLikeCountFromButton() {
+  if (isShorts()) {
+    //Youtube Shorts don't work with this query. It's not nessecary; we can skip it and still see the results.
+    //It should be possible to fix this function, but it's not critical to showing the dislike count.
+    return 0;
+  }
+  let likesStr = getLikeButton()
+    .querySelector("button")
+    .getAttribute("aria-label")
+    .replace(/\D/g, "");
+  return likesStr.length > 0 ? parseInt(likesStr) : false;
+}
+
 (typeof GM_addStyle != "undefined"
   ? GM_addStyle
   : (styles) => {
@@ -311,6 +325,12 @@ function setState() {
         likesvalue = likes;
         dislikesvalue = dislikes;
         setDislikes(numberFormat(dislikes));
+        if (extConfig.numberDisplayReformatLikes === true) {
+          const nativeLikes = getLikeCountFromButton();
+          if (nativeLikes !== false) {
+            setLikes(numberFormat(nativeLikes));
+          }
+        }
         createRateBar(likes, dislikes);
         if (extConfig.coloredThumbs === true) {
           if (isShorts()) { // for shorts, leave deactived buttons in default color

Extensions/combined/popup.html

@@ -108,6 +108,12 @@ <h1 style="margin-bottom: 0.75rem" title="__MSG_extensionName__">
     <span class="switchLabel">Show rounded down numbers</span>
   </label>
   <br/>
+  <label class="switch" data-hover="Make likes and dislikes format consistent">
+    <input type="checkbox" id="number_reformat_likes"/>
+    <span class="slider"/>
+    <span class="switchLabel">Re-format like numbers</span>
+  </label>
+  <br/>
   <div class="custom-select">
     <label for="number_format">Number format:</label>
     <select name="number_format" id="number_format">

Extensions/combined/popup.js

@@ -7,6 +7,7 @@ const config = {
   colorTheme: "classic",
   numberDisplayFormat: "compactShort",
   numberDisplayRoundDown: true,
+  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:
@@ -85,6 +86,10 @@ document.getElementById("number_format").addEventListener("change", (ev) => {
   chrome.storage.sync.set({ numberDisplayFormat: ev.target.value });
 });
 
+document.getElementById("number_reformat_likes").addEventListener("click", (ev) => {
+  chrome.storage.sync.set({ numberDisplayReformatLikes: ev.target.checked });
+});
+
 /*   Advanced Toggle   */
 const advancedToggle = document.getElementById("advancedToggle");
 advancedToggle.addEventListener("click", () => {
@@ -114,6 +119,7 @@ function initConfig() {
   initializeColorTheme();
   initializeNumberDisplayFormat();
   initializeNumberDisplayRoundDown();
+  initializeNumberDisplayReformatLikes();
 }
 
 function initializeVersionNumber() {
@@ -206,6 +212,12 @@ function updateNumberDisplayFormatContent(roundDown) {
     getNumberFormatter("standard").format(testValue);
 }
 
+function initializeNumberDisplayReformatLikes() {
+  chrome.storage.sync.get(["numberDisplayReformatLikes"], (res) => {
+    handleNumberDisplayReformatLikesChangeEvent(res.numberDisplayReformatLikes);
+  });
+}
+
 chrome.storage.onChanged.addListener(storageChangeHandler);
 
 function storageChangeHandler(changes, area) {
@@ -231,6 +243,9 @@ function storageChangeHandler(changes, area) {
   if (changes.numberDisplayFormat !== undefined) {
     handleNumberDisplayFormatChangeEvent(changes.numberDisplayFormat.newValue);
   }
+  if (changes.numberDisplayReformatLikes !== undefined) {
+    handleNumberDisplayReformatLikesChangeEvent(changes.numberDisplayReformatLikes.newValue);
+  }
 }
 
 function handleDisableVoteSubmissionChangeEvent(value) {
@@ -278,6 +293,11 @@ function handleNumberDisplayFormatChangeEvent(value) {
     .querySelector('option[value="' + value + '"]').selected = true;
 }
 
+function handleNumberDisplayReformatLikesChangeEvent(value) {
+  config.numberDisplayReformatLikes = value;
+  document.getElementById("number_reformat_likes").checked = value;
+}
+
 function getNumberFormatter(optionSelect) {
   let formatterNotation;
   let formatterCompactDisplay;

Extensions/combined/ryd.background.js

@@ -9,10 +9,9 @@ let extConfig = {
   coloredThumbs: false,
   coloredBar: false,
   colorTheme: "classic", // classic, accessible, neon
-  // coloredThumbs: false,
-  // coloredBar: false,
   numberDisplayFormat: "compactShort", // compactShort, compactLong, standard
   numberDisplayRoundDown: true, // locale 'de' shows exact numbers by default
+  numberDisplayReformatLikes: false, // use existing (native) likes number
 };
 
 if (isChrome()) api = chrome;
@@ -74,16 +73,16 @@ api.runtime.onMessage.addListener((request, sender, sendResponse) => {
   }
 });
 
-  api.storage.sync.get(['lastShowChangelogVersion'], (details) => {
-    if (extConfig.showUpdatePopup === true &&
-      details.lastShowChangelogVersion !== chrome.runtime.getManifest().version
-      ) {
-      // keep it inside get to avoid race condition
-      api.storage.sync.set({'lastShowChangelogVersion ': chrome.runtime.getManifest().version});
-      // wait until async get runs & don't steal tab focus
-      api.tabs.create({url: api.runtime.getURL("/changelog/3/changelog_3.0.html"), active: false});
-    }
-  });
+api.storage.sync.get(['lastShowChangelogVersion'], (details) => {
+  if (extConfig.showUpdatePopup === true &&
+    details.lastShowChangelogVersion !== chrome.runtime.getManifest().version
+    ) {
+    // keep it inside get to avoid race condition
+    api.storage.sync.set({'lastShowChangelogVersion ': chrome.runtime.getManifest().version});
+    // wait until async get runs & don't steal tab focus
+    api.tabs.create({url: api.runtime.getURL("/changelog/3/changelog_3.0.html"), active: false});
+  }
+});
 
 async function sendVote(videoId, vote) {
   api.storage.sync.get(null, async (storageResult) => {
@@ -270,6 +269,9 @@ function storageChangeHandler(changes, area) {
   if (changes.numberDisplayFormat !== undefined) {
     handleNumberDisplayFormatChangeEvent(changes.numberDisplayFormat.newValue);
   }
+  if (changes.numberDisplayReformatLikes !== undefined) {
+    handleNumberDisplayReformatLikesChangeEvent(changes.numberDisplayReformatLikes.newValue);
+  }
 }
 
 function handleDisableVoteSubmissionChangeEvent(value) {
@@ -312,6 +314,10 @@ function handleColorThemeChangeEvent(value) {
   extConfig.colorTheme = value;
 }
 
+function handleNumberDisplayReformatLikesChangeEvent(value) {
+  extConfig.numberDisplayReformatLikes = value;
+}
+
 api.storage.onChanged.addListener(storageChangeHandler);
 
 function initExtConfig() {
@@ -321,6 +327,7 @@ function initExtConfig() {
   initializeColorTheme();
   initializeNumberDisplayFormat();
   initializeNumberDisplayRoundDown();
+  initializeNumberDisplayReformatLikes();
 }
 
 function initializeDisableVoteSubmission() {
@@ -384,6 +391,16 @@ function initializeNumberDisplayFormat() {
   });
 }
 
+function initializeNumberDisplayReformatLikes() {
+  api.storage.sync.get(["numberDisplayReformatLikes"], (res) => {
+    if (res.numberDisplayReformatLikes === undefined) {
+      api.storage.sync.set({ numberDisplayReformatLikes: false });
+    } else {
+      extConfig.numberDisplayReformatLikes = res.numberDisplayReformatLikes;
+    }
+  });
+}
+
 function isChrome() {
   return typeof chrome !== "undefined" && typeof chrome.runtime !== "undefined";
 }

Extensions/combined/src/events.js

@@ -130,6 +130,9 @@ function storageChangeHandler(changes, area) {
   if (changes.numberDisplayFormat !== undefined) {
     handleNumberDisplayFormatChangeEvent(changes.numberDisplayFormat.newValue);
   }
+  if (changes.numberDisplayReformatLikes !== undefined) {
+    handleNumberDisplayReformatLikesChangeEvent(changes.numberDisplayReformatLikes.newValue);
+  }
 }
 
 function handleDisableVoteSubmissionChangeEvent(value) {
@@ -157,6 +160,10 @@ function handleNumberDisplayRoundDownChangeEvent(value) {
   extConfig.numberDisplayRoundDown = value;
 }
 
+function handleNumberDisplayReformatLikesChangeEvent(value) {
+  extConfig.numberDisplayReformatLikes = value;
+}
+
 export {
   sendVote,
   sendVideoIds,

Extensions/combined/src/state.js

@@ -23,6 +23,7 @@ let extConfig = {
   colorTheme: "classic",
   numberDisplayFormat: "compactShort",
   numberDisplayRoundDown: true,
+  numberDisplayReformatLikes: false,
 };
 
 let storedData = {
@@ -153,6 +154,12 @@ function getLikeCountFromButton() {
 function processResponse(response, storedData) {
   const formattedDislike = numberFormat(response.dislikes);
   setDislikes(formattedDislike);
+  if (extConfig.numberDisplayReformatLikes === true) {
+    const nativeLikes = getLikeCountFromButton();
+    if (nativeLikes !== false) {
+      setLikes(numberFormat(nativeLikes));
+    }
+  }
   storedData.dislikes = parseInt(response.dislikes);
   storedData.likes = getLikeCountFromButton() || parseInt(response.likes);
   createRateBar(storedData.likes, storedData.dislikes);
@@ -229,6 +236,7 @@ function initExtConfig() {
   initializeColorTheme();
   initializeNumberDisplayFormat();
   initializeNumberDisplayRoundDown();
+  initializeNumberDisplayReformatLikes();
 }
 
 function initializeDisableVoteSubmission() {
@@ -291,6 +299,16 @@ function initializeNumberDisplayFormat() {
   });
 }
 
+function initializeNumberDisplayReformatLikes() {
+  getBrowser().storage.sync.get(["numberDisplayReformatLikes"], (res) => {
+    if (res.numberDisplayReformatLikes === undefined) {
+      getBrowser().storage.sync.set({ numberDisplayReformatLikes: false });
+    } else {
+      extConfig.numberDisplayReformatLikes = res.numberDisplayReformatLikes;
+    }
+  });
+}
+
 export {
   isMobile,
   isShorts,