Add ratio preview to videos

.github/FUNDING.yml

@@ -0,0 +1,2 @@
+patreon: returnyoutubedislike
+custom: "https://returnyoutubedislike.com/donate"

Docs/Guide__Troubleshooting.md

@@ -27,8 +27,8 @@ Troubleshooting Guide
 1. Make sure you have the latest version of the extension installed. ([Click Here to check](https://chrome.google.com/webstore/detail/return-youtube-dislike/gebbhagfogifgggkldgodflihgfeippi#:~:text=Report%20abuse-,Version,-2.0.0.3))
 2. Close all the tabs & restart your browser
 3. Reinstall the extension.
-4. [Check API status]
-5. [Check service worker] (only for chromium based browsers)
+4. [Check API status](#check-api-status)
+5. [Check Cloudflare status](https://www.cloudflarestatus.com/)
 6. [If you are on Windows 7 read this](#install-certificates)
 
 <br>

Extensions/combined/_locales/en/messages.json

@@ -36,7 +36,7 @@
     "message": "Stops counting your likes and dislikes."
   },
   "textTempUnavailable": {
-    "message": "temporarily unavailable"
+    "message": "temp n/a"
   },
   "textUpdate": {
     "message": "update to"

Extensions/combined/popup.css

@@ -202,3 +202,12 @@ input:checked + .slider:before {
   flex-direction: column;
   align-items: center;
 }
+
+.custom-select select {
+  outline: none;
+  border: none;
+  padding: 5px;
+  color: var(--white);
+  background-color: var(--secondary);
+  border-radius: 0.25rem;
+}

Extensions/combined/popup.html

@@ -166,6 +166,15 @@ <h1 style="margin-bottom: 0.75rem" title="__MSG_extensionName__">
     >&nbsp;</span
     >
   </div>
+  <br>
+  <div class="custom-select">
+    <label for="ratio_preview">Ratio preview:</label>
+    <select name="ratio_preview" id="ratio_preview">
+      <option value="always" id="ratio_preview_always">Always</option>
+      <option value="hover" id="ratio_preview_hover">On hover</option>
+      <option value="never" id="ratio_preview_never">Never</option>
+    </select>
+  </div>
 </fieldset>
 </body>
 <script src="popup.js"></script>

Extensions/combined/popup.js

@@ -7,7 +7,8 @@ const config = {
   colorTheme: "classic",
   numberDisplayFormat: "compactShort",
   numberDisplayRoundDown: true,
-  numberDisplayReformatLikes: false, 
+  numberDisplayReformatLikes: false,
+  ratioPreview: "hover",
   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:
@@ -90,6 +91,10 @@ document.getElementById("number_reformat_likes").addEventListener("click", (ev)
   chrome.storage.sync.set({ numberDisplayReformatLikes: ev.target.checked });
 });
 
+document.getElementById("ratio_preview").addEventListener("click", (ev) => {
+  chrome.storage.sync.set({ ratioPreview: ev.target.value });
+});
+
 /*   Advanced Toggle   */
 const advancedToggle = document.getElementById("advancedToggle");
 advancedToggle.addEventListener("click", () => {
@@ -120,6 +125,7 @@ function initConfig() {
   initializeNumberDisplayFormat();
   initializeNumberDisplayRoundDown();
   initializeNumberDisplayReformatLikes();
+  initializeRatioPreview();
 }
 
 function initializeVersionNumber() {
@@ -218,6 +224,12 @@ function initializeNumberDisplayReformatLikes() {
   });
 }
 
+function initializeRatioPreview() {
+  chrome.storage.sync.get(["ratioPreview"], (res) => {
+    handleRatioPreviewChangeEvent(res.ratioPreview);
+  });
+}
+
 chrome.storage.onChanged.addListener(storageChangeHandler);
 
 function storageChangeHandler(changes, area) {
@@ -246,6 +258,9 @@ function storageChangeHandler(changes, area) {
   if (changes.numberDisplayReformatLikes !== undefined) {
     handleNumberDisplayReformatLikesChangeEvent(changes.numberDisplayReformatLikes.newValue);
   }
+  if (changes.ratioPreview !== undefined) {
+    handleRatioPreviewChangeEvent(changes.ratioPreview.newValue);
+  }
 }
 
 function handleDisableVoteSubmissionChangeEvent(value) {
@@ -298,6 +313,16 @@ function handleNumberDisplayReformatLikesChangeEvent(value) {
   document.getElementById("number_reformat_likes").checked = value;
 }
 
+function handleRatioPreviewChangeEvent(value) {
+  if (!value) {
+    value = "hover";
+  }
+  config.ratioPreview = value;
+  document
+  .getElementById("ratio_preview")
+  .querySelector('option[value="' + value + '"]').selected = true;
+}
+
 function getNumberFormatter(optionSelect) {
   let formatterNotation;
   let formatterCompactDisplay;

Extensions/combined/ryd.background.js

@@ -12,6 +12,7 @@ let extConfig = {
   numberDisplayFormat: "compactShort", // compactShort, compactLong, standard
   numberDisplayRoundDown: true, // locale 'de' shows exact numbers by default
   numberDisplayReformatLikes: false, // use existing (native) likes number
+  ratioPreview: "hover", // always, hover, never
 };
 
 if (isChrome()) api = chrome;

Extensions/combined/ryd.content-script.js

@@ -40,12 +40,18 @@ import {
   addLikeDislikeEventListener,
   storageChangeHandler,
 } from "./src/events";
+import {
+  showRatioPreviews,
+  resetVideoList,
+} from "./src/preview";
 
 initExtConfig();
 
 let jsInitChecktimer = null;
 
 function setEventListeners(evt) {
+  // Reset ratio preview video list on tab change 
+  resetVideoList();
   function checkForJS_Finish() {
     if (isShorts() || (getButtons()?.offsetParent && isVideoLoaded())) {
       addLikeDislikeEventListener();
@@ -66,3 +72,7 @@ document.addEventListener("yt-navigate-finish", function (event) {
   window.returnDislikeButtonlistenersSet = false;
   setEventListeners();
 });
+
+setInterval(function () {
+  showRatioPreviews();
+}, 3000);

Extensions/combined/src/events.js

@@ -107,6 +107,10 @@ function storageChangeHandler(changes, area) {
   if (changes.numberDisplayReformatLikes !== undefined) {
     handleNumberDisplayReformatLikesChangeEvent(changes.numberDisplayReformatLikes.newValue);
   }
+
+  if (changes.ratioDisplay !== undefined) {
+    handleRatioDisplayChangeEvent(changes.ratioDisplay.newValue);
+  }
 }
 
 function handleDisableVoteSubmissionChangeEvent(value) {
@@ -138,6 +142,11 @@ function handleNumberDisplayReformatLikesChangeEvent(value) {
   extConfig.numberDisplayReformatLikes = value;
 }
 
+function handleRatioDisplayChangeEvent(value) {
+  if (!value) value = "hover";
+  extConfig.ratioDisplay = value;
+}
+
 export {
   sendVote,
   likeClicked,

Extensions/combined/src/preview.js

@@ -0,0 +1,157 @@
+import { getVideoId } from "./utils";
+import { getApiData, extConfig } from "./state";
+
+let videos = [];
+let listeneningForHover = [];
+
+let cache = {};
+let cacheDuration = 60 * 10; // 10 minutes
+
+let currentUrl; // Current URL to detect URL change
+
+
+async function showRatioPreviews() {
+  // Select all videos
+  let currentVideos = [].slice.call(document.getElementsByTagName("ytd-rich-grid-media"));
+  // Video recommendations while watching a video
+  currentVideos = currentVideos.concat([].slice.call(document.getElementsByTagName("ytd-compact-video-renderer")));
+  // Search results
+  currentVideos = currentVideos.concat([].slice.call(document.getElementsByTagName("ytd-video-renderer")));
+  // Channel overview videos
+  currentVideos = currentVideos.concat([].slice.call(document.getElementsByTagName("ytd-grid-video-renderer")));
+  // Get videos that are not already show the ratio
+  currentVideos = currentVideos.filter(element => !videos.includes(element));
+
+  // Show ratio preview for each video if state is set to "always"
+  if (extConfig.ratioPreview === "always") {
+    for (let video of currentVideos) {  // Iterate through all videos
+      showRatioPreview(video);
+    }
+  }
+  // Add hover listener for each video if state is set to "hover"
+  if (extConfig.ratioPreview === "hover") {
+    for (let video of currentVideos) {  // Iterate through all videos
+      if (!listeneningForHover.includes(video)) { // Check if video already has hover listener
+        video.addEventListener("mouseenter", () => showRatioPreview(video));
+        video.addEventListener("mouseleave", () => removeRatioPreview(video));
+        listeneningForHover.push(video);
+      }
+    }
+  }
+}
+
+async function showRatioPreview(video) {
+  // Check if video already has expired ratio preview
+  if (video.querySelector("#ratio-display")) {
+    video.querySelector("#ratio-display").remove();
+  }
+
+  // Get video data
+  let videoLink = video.querySelector("a").href;
+  let videoId = getVideoId(videoLink);
+  let data = await getData(videoId);
+
+  // Check if data was fetched
+  if (!data) {
+    return false;
+  }
+
+  // Calculate like-dislike ratio
+  let likes = data["likes"]; // Need to take data from ryd-API to prevent additional request to official YouTube API
+  let dislikes = data["dislikes"];
+
+  // Calculate ratio
+  let ratio;
+  if (isNaN(likes) || isNaN(dislikes)) {
+    return 0;
+  } else {
+    ratio = Math.round(likes / (likes + dislikes) * 100) || 0;
+  }
+
+  // Set color depending on ratio
+  let color = (ratio >= 90 ? "#2ab92a" : ratio >= 70 ? "#ffca00" : "#d73131");
+
+  // Add percentage to video
+  video.querySelector("#metadata-line").innerHTML += `<span id="ratio-display" class="inline-metadata-item style-scope ytd-video-meta-block"><span style="color: ${color};"><i>${ratio}%</i></span></span>`;
+
+  // Add video to list of videos already shown
+  videos.push(video);
+}
+
+function removeRatioPreview(video) {
+  function remove() {
+    if (video.querySelector("#ratio-display")) {
+      video.querySelector("#ratio-display").remove();
+      return true;
+    }
+    return false;
+  }
+  // Try to remove ratio preview continously for 3 seconds (in case ratio preview is not yet shown)
+  if (remove()) {
+    return;
+  } else {
+    let tries = 0;
+    let interval = setInterval(() => {
+      if (remove() || tries > 30) {
+        clearInterval(interval);
+      }
+      tries++;
+      if (tries >= 30) {
+        clearInterval(interval);
+      }
+    }, 10);
+  }
+}
+
+function isNewUrl() {
+  // Returns if URL has changed
+  let newUrl = window.location.href !== currentUrl;
+  currentUrl = window.location.href;
+  return newUrl;
+}
+
+function cacheCleanup() {
+  // Remove expired cache entries
+  const now = new Date().getTime();
+  let removed = 0;
+  for (let key in cache) {
+    if (now - cache[key]["fetchTime"] > cacheDuration) {
+      delete cache[key];
+      removed++;
+    } else {
+      break;
+    }
+  }
+}
+
+async function getData(videoId) {
+  const now = new Date().getTime();
+
+  if (isNewUrl()) {
+    cacheCleanup();
+  }
+
+  // Check if video is in cache
+  if (videoId in cache) {
+    return cache[videoId];
+  }
+
+  // If not, fetch data from API
+  let apiResponse = await getApiData(videoId);
+
+  // Check if request was successful
+  if (!apiResponse.likes) {
+    return false;
+  }
+
+  cache[videoId] = apiResponse;
+  cache[videoId]["fetchTime"] = now;
+
+  return cache[videoId];
+}
+
+function resetVideoList() {
+  videos = [];
+}
+
+export { showRatioPreviews, resetVideoList };