Shorts fix, logging fix

Extensions/combined/popup.js

@@ -1,5 +1,3 @@
-import { cLog } from "./src/utils";
-
 /*   Config   */
 const config = {
   advanced: false,
@@ -62,14 +60,12 @@ function createLink(url, id) {
   });
 }
 
-document
-  .getElementById("disable_vote_submission")
-  .addEventListener("click", (ev) => {
-    chrome.storage.sync.set({ disableVoteSubmission: ev.target.checked });
-  });
+document.getElementById("disable_vote_submission").addEventListener("click", (ev) => {
+  chrome.storage.sync.set({ disableVoteSubmission: ev.target.checked });
+});
 
 document.getElementById("disable_logging").addEventListener("click", (ev) => {
-  chrome.storage.sync.set({ disableLogging:ev.target.checked })
+  chrome.storage.sync.set({ disableLogging: ev.target.checked });
 });
 
 document.getElementById("colored_thumbs").addEventListener("click", (ev) => {
@@ -88,23 +84,17 @@ 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("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("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 });
-  });
+document.getElementById("number_reformat_likes").addEventListener("click", (ev) => {
+  chrome.storage.sync.set({ numberDisplayReformatLikes: ev.target.checked });
+});
 
 /*   Advanced Toggle   */
 const advancedToggle = document.getElementById("advancedToggle");
@@ -149,8 +139,7 @@ function initializeVersionNumber() {
     .then((response) => response.json())
     .then((json) => {
       if (compareVersions(json.version, version)) {
-        document.getElementById("ext-update").innerHTML =
-          chrome.i18n.getMessage("textUpdate") + " v" + json.version;
+        document.getElementById("ext-update").innerHTML = chrome.i18n.getMessage("textUpdate") + " v" + json.version;
         document.getElementById("ext-update").style.padding = ".25rem .5rem";
       }
     });
@@ -183,8 +172,8 @@ function initializeDisableVoteSubmission() {
   });
 }
 
-function initializeDisableLogging(){
-  chrome.storage.sync.get(['disableLogging'], (res) => {
+function initializeDisableLogging() {
+  chrome.storage.sync.get(["disableLogging"], (res) => {
     handleDisableLoggingChangeEvent(res.disableLogging);
   });
 }
@@ -230,10 +219,8 @@ function updateNumberDisplayFormatContent() {
   let testValue = 123456;
   document.getElementById("number_format_compactShort").innerHTML =
     getNumberFormatter("compactShort").format(testValue);
-  document.getElementById("number_format_compactLong").innerHTML =
-    getNumberFormatter("compactLong").format(testValue);
-  document.getElementById("number_format_standard").innerHTML =
-    getNumberFormatter("standard").format(testValue);
+  document.getElementById("number_format_compactLong").innerHTML = getNumberFormatter("compactLong").format(testValue);
+  document.getElementById("number_format_standard").innerHTML = getNumberFormatter("standard").format(testValue);
 }
 
 function initializeNumberDisplayReformatLikes() {
@@ -246,9 +233,7 @@ chrome.storage.onChanged.addListener(storageChangeHandler);
 
 function storageChangeHandler(changes, area) {
   if (changes.disableVoteSubmission !== undefined) {
-    handleDisableVoteSubmissionChangeEvent(
-      changes.disableVoteSubmission.newValue,
-    );
+    handleDisableVoteSubmissionChangeEvent(changes.disableVoteSubmission.newValue);
   }
   if (changes.disableLogging !== undefined) {
     handleDisableLoggingChangeEvent(changes.disableLogging.newValue);
@@ -266,14 +251,10 @@ function storageChangeHandler(changes, area) {
     handleNumberDisplayFormatChangeEvent(changes.numberDisplayFormat.newValue);
   }
   if (changes.showTooltipPercentage !== undefined) {
-    handleShowTooltipPercentageChangeEvent(
-      changes.showTooltipPercentage.newValue,
-    );
+    handleShowTooltipPercentageChangeEvent(changes.showTooltipPercentage.newValue);
   }
   if (changes.numberDisplayReformatLikes !== undefined) {
-    handleNumberDisplayReformatLikesChangeEvent(
-      changes.numberDisplayReformatLikes.newValue,
-    );
+    handleNumberDisplayReformatLikesChangeEvent(changes.numberDisplayReformatLikes.newValue);
   }
 }
 
@@ -302,24 +283,18 @@ function handleColorThemeChangeEvent(value) {
     value = "classic";
   }
   config.colorTheme = value;
-  document
-    .getElementById("color_theme")
-    .querySelector('option[value="' + value + '"]').selected = true;
+  document.getElementById("color_theme").querySelector('option[value="' + value + '"]').selected = true;
   updateColorThemePreviewContent(value);
 }
 
 function updateColorThemePreviewContent(themeName) {
-  document.getElementById("color_theme_example_like").style.backgroundColor =
-    getColorFromTheme(themeName, true);
-  document.getElementById("color_theme_example_dislike").style.backgroundColor =
-    getColorFromTheme(themeName, false);
+  document.getElementById("color_theme_example_like").style.backgroundColor = getColorFromTheme(themeName, true);
+  document.getElementById("color_theme_example_dislike").style.backgroundColor = getColorFromTheme(themeName, false);
 }
 
 function handleNumberDisplayFormatChangeEvent(value) {
   config.numberDisplayFormat = value;
-  document
-    .getElementById("number_format")
-    .querySelector('option[value="' + value + '"]').selected = true;
+  document.getElementById("number_format").querySelector('option[value="' + value + '"]').selected = true;
 }
 
 function handleShowTooltipPercentageChangeEvent(value) {
@@ -333,9 +308,7 @@ function handleTooltipPercentageModeChangeEvent(value) {
   }
   config.tooltipPercentageMode = value;
 
-  document
-    .getElementById("tooltip_percentage_mode")
-    .querySelector('option[value="' + value + '"]').selected = true;
+  document.getElementById("tooltip_percentage_mode").querySelector('option[value="' + value + '"]').selected = true;
 }
 
 function handleNumberDisplayReformatLikesChangeEvent(value) {
@@ -369,22 +342,17 @@ function getNumberFormatter(optionSelect) {
       formatterNotation = "compact";
       formatterCompactDisplay = "short";
   }
-  const formatter = Intl.NumberFormat(
-    document.documentElement.lang || userLocales || navigator.language,
-    {
-      notation: formatterNotation,
-      compactDisplay: formatterCompactDisplay,
-    },
-  );
+  const formatter = Intl.NumberFormat(document.documentElement.lang || userLocales || navigator.language, {
+    notation: formatterNotation,
+    compactDisplay: formatterCompactDisplay,
+  });
   return formatter;
 }
 
 (async function getStatus() {
   let status = document.getElementById("status");
   let serverStatus = document.getElementById("server-status");
-  let resp = await fetch(
-    "https://returnyoutubedislikeapi.com/votes?videoId=YbJOTdZBX1g",
-  );
+  let resp = await fetch("https://returnyoutubedislikeapi.com/votes?videoId=YbJOTdZBX1g");
   let result = await resp.status;
   if (result === 200) {
     status.innerText = "Online";

Extensions/combined/ryd.content-script.js

@@ -1,11 +1,6 @@
-//---   Import Button Functions   ---//
 import { getButtons } from "./src/buttons";
-
-//---   Import State Functions   ---//
 import { isShorts, setInitialState, initExtConfig } from "./src/state";
-
-//---   Import Video & Browser Functions   ---//
-import { getBrowser, isVideoLoaded, cLog } from "./src/utils";
+import { getBrowser, isVideoLoaded } from "./src/utils";
 import { addLikeDislikeEventListener, createSmartimationObserver, storageChangeHandler } from "./src/events";
 
 await initExtConfig();
@@ -27,7 +22,7 @@ async function setEventListeners(evt) {
       }
     } catch (exception) {
       if (!isSetInitialStateDone) {
-        cLog("error");
+        console.log("error");
         await setInitialState();
       }
     }
@@ -49,5 +44,5 @@ s.src = chrome.runtime.getURL("menu-fixer.js");
 s.onload = function () {
   this.remove();
 };
-// see also "Dynamic values in the injected code" section in this answer
+
 (document.head || document.documentElement).appendChild(s);

Extensions/combined/src/bar.js

@@ -7,7 +7,7 @@ import {
   isRoundedDesign,
   isShorts,
 } from "./state";
-import { cLog, getColorFromTheme, isInViewport } from "./utils";
+import { getColorFromTheme, isInViewport } from "./utils";
 
 function createRateBar(likes, dislikes) {
   let rateBar = document.getElementById("ryd-bar-container");
@@ -117,7 +117,7 @@ function createRateBar(likes, dislikes) {
       }
     }
   } else {
-    cLog("removing bar");
+    console.log("removing bar");
     if (rateBar) {
       rateBar.parentNode.removeChild(rateBar);
     }

Extensions/combined/src/events.js

@@ -2,7 +2,6 @@ import {
   getBrowser,
   getVideoId,
   numberFormat,
-  cLog,
   createObserver,
 } from "./utils";
 import {
@@ -128,7 +127,7 @@ function createSmartimationObserver() {
     smartimationContainer &&
     smartimationObserver.container != smartimationContainer
   ) {
-    cLog("Initializing smartimation mutation observer");
+    console.log("Initializing smartimation mutation observer");
     smartimationObserver.disconnect();
     smartimationObserver.observe(smartimationContainer);
     smartimationObserver.container = smartimationContainer;

Extensions/combined/src/starRating.js

@@ -1,4 +1,3 @@
-import { cLog } from "./utils";
 
 function createStarRating(rating, isMobile) {
   let starRating = document.createElement("label");
@@ -33,7 +32,7 @@ function createStarRating(rating, isMobile) {
     let YTBar = document.querySelector("#ryd-bar-container");
     YTBar.setAttribute("style", "width: 190%; height: 2px;");
   } catch (err) {
-    cLog("RateBar Not Present");
+    console.log("RateBar Not Present");
   }
 
   let style = `<style>

Extensions/combined/src/state.js

@@ -3,7 +3,7 @@ import { createRateBar } from "./bar";
 import {
   getBrowser,
   getVideoId,
-  cLog,
+  initializeLogging,
   numberFormat,
   getColorFromTheme,
   querySelector,
@@ -81,7 +81,7 @@ function isRoundedDesign() {
 let shortsObserver = null;
 
 if (isShorts() && !shortsObserver) {
-  cLog("Initializing shorts mutation observer");
+  console.log("Initializing shorts mutation observer");
   shortsObserver = createObserver(
     {
       attributes: true,
@@ -93,7 +93,7 @@ if (isShorts() && !shortsObserver) {
           mutation.target.nodeName === "TP-YT-PAPER-BUTTON" &&
           mutation.target.id === "button"
         ) {
-          // cLog('Short thumb button status changed');
+          // console.log('Short thumb button status changed');
           if (mutation.target.getAttribute("aria-pressed") === "true") {
             mutation.target.style.color =
               mutation.target.parentElement.parentElement.id === "like-button"
@@ -104,7 +104,7 @@ if (isShorts() && !shortsObserver) {
           }
           return;
         }
-        cLog("Unexpected mutation observer event: " + mutation.target + mutation.type);
+        console.log("Unexpected mutation observer event: " + mutation.target + mutation.type);
       });
     },
   );
@@ -150,17 +150,17 @@ function getState(storedData) {
 
 //---   Sets The Likes And Dislikes Values   ---//
 function setLikes(likesCount) {
-  cLog(`SET likes ${likesCount}`);
+  console.log(`SET likes ${likesCount}`);
   getLikeTextContainer().innerText = likesCount;
 }
 
 function setDislikes(dislikesCount) {
-  cLog(`SET dislikes ${dislikesCount}`);
+  console.log(`SET dislikes ${dislikesCount}`);
 
   const _container = getDislikeTextContainer();
   _container?.removeAttribute("is-empty");
 
-  let _dislikeText
+  let _dislikeText;
   if (!isLikesDisabled()) {
     if (isMobile()) {
       getButtons().children[1].querySelector(".button-renderer-text").innerText = dislikesCount;
@@ -168,7 +168,7 @@ function setDislikes(dislikesCount) {
     }
     _dislikeText = dislikesCount;
   } else {
-    cLog("likes count disabled by creator");
+    console.log("likes count disabled by creator");
     if (isMobile()) {
       getButtons().children[1].querySelector(".button-renderer-text").innerText = localize("TextLikesDisabled");
       return;
@@ -241,7 +241,7 @@ function displayError(error) {
 async function setState(storedData) {
   storedData.previousState = isVideoDisliked() ? DISLIKED_STATE : isVideoLiked() ? LIKED_STATE : NEUTRAL_STATE;
   let statsSet = false;
-  cLog("Video is loaded. Adding buttons...");
+  console.log("Video is loaded. Adding buttons...");
 
   let videoId = getVideoId(window.location.href);
   let likeCount = getLikeCountFromButton() || null;
@@ -258,8 +258,8 @@ async function setState(storedData) {
     })
     .then((response) => response.json())
     .catch(displayError);
-  cLog("response from api:");
-  cLog(JSON.stringify(response));
+  console.log("response from api:");
+  console.log(JSON.stringify(response));
   if (response !== undefined && !("traceId" in response) && !statsSet) {
     processResponse(response, storedData);
   }
@@ -283,7 +283,6 @@ async function initExtConfig() {
 }
 
 async function initializeSelectors() {
-  console.log("initializing selectors");
   let result = await fetch(`${apiUrl}/configs/selectors`, {
     method: "GET",
     headers: {
@@ -310,9 +309,12 @@ function initializeDisableLogging() {
   getBrowser().storage.sync.get(["disableLogging"], (res) => {
     if (res.disableLogging === undefined) {
       getBrowser().storage.sync.set({ disableLogging: true });
+      extConfig.disableLogging = true;
     } else {
       extConfig.disableLogging = res.disableLogging;
     }
+    // Initialize console methods based on logging config
+    initializeLogging();
   });
 }
 

Extensions/combined/src/utils.js

@@ -18,7 +18,7 @@ function getNumberFormatter(optionSelect) {
           ?.getAttribute("href"),
       )?.searchParams?.get("locale");
     } catch {
-      cLog("Cannot find browser locale. Use en as default for number formatting.");
+      console.log("Cannot find browser locale. Use en as default for number formatting.");
       userLocales = "en";
     }
   }
@@ -40,11 +40,10 @@ function getNumberFormatter(optionSelect) {
       formatterCompactDisplay = "short";
   }
 
-  const formatter = Intl.NumberFormat(userLocales, {
+  return Intl.NumberFormat(userLocales, {
     notation: formatterNotation,
     compactDisplay: formatterCompactDisplay,
   });
-  return formatter;
 }
 
 function localize(localeString) {
@@ -143,14 +142,21 @@ function isVideoLoaded() {
   );
 }
 
-function cLog(message, writer) {
-  if (!extConfig.disableLogging) {
-    message = `[return youtube dislike]: ${message}`;
-    if (writer) {
-      writer(message);
-    } else {
-      console.log(message);
-    }
+const originalConsole = {
+  log: console.log.bind(console),
+  debug: console.debug.bind(console),
+  info: console.info.bind(console),
+  warn: console.warn.bind(console),
+  error: console.error.bind(console),
+};
+
+function initializeLogging() {
+  if (extConfig.disableLogging) {
+    console.log = () => {};
+    console.debug = () => {};
+  } else {
+    console.log = originalConsole.log;
+    console.debug = originalConsole.debug;
   }
 }
 
@@ -223,7 +229,7 @@ export {
   getVideoId,
   isInViewport,
   isVideoLoaded,
-  cLog,
+  initializeLogging,
   getColorFromTheme,
   localize,
   querySelector,

Extensions/combined/src/utils.spec.js

@@ -11,7 +11,6 @@ import {
   getVideoId,
   isInViewport,
   isVideoLoaded,
-  cLog,
   getColorFromTheme,
 } from "./utils";
 import { extConfig } from "./state";

webpack.config.js

@@ -119,5 +119,5 @@ module.exports = {
   experiments: {
     topLevelAwait: true,
   },
-  // devtool: 'inline-source-map',
+  devtool: 'inline-source-map',
 };