Merge branch 'Anarios:main' into main

Extensions/UserScript/Return Youtube Dislike.user.js

@@ -4,8 +4,7 @@
 // @version      0.5
 // @description  Return of the YouTube Dislike, Based off https://www.returnyoutubedislike.com/
 // @author       Anarios & JRWR
-// @match        *://*.youtube.com/*
-// @include      *://*.youtube.com/*
+// @match      *://*.youtube.com/watch*
 // @compatible chrome
 // @compatible firefox
 // @compatible opera

Extensions/chrome/manifest.json

@@ -1,10 +1,10 @@
 {
   "name": "Return YouTube Dislike",
   "description": "Returns ability to see dislikes",
-  "version": "0.0.0.7",
+  "version": "0.0.0.9",
   "manifest_version": 3,
   "background": {
-    "service_worker": "background.js"
+    "service_worker": "return-youtube-dislike.background.js"
   },
   "icons": {
     "48": "icons/icon48.png",
@@ -21,7 +21,7 @@
   "content_scripts": [
     {
       "matches": ["*://*.youtube.com/*"],
-      "js": ["content-script.js"],
+      "js": ["return-youtube-dislike.content-script.js"],
       "run_at": "document_start",
       "css": ["content-style.css"]
     }
@@ -31,7 +31,7 @@
   },
   "web_accessible_resources": [
     {
-      "resources": ["script.js"],
+      "resources": ["return-youtube-dislike.script.js"],
       "matches": ["*://*.youtube.com/*"]
     }
   ]

Extensions/chrome/content-script.js → Extensions/chrome/return-youtube-dislike.content-script.js

@@ -2,7 +2,7 @@ chrome.runtime.sendMessage({}, (securityToken) => {
   var script = document.createElement("script");
   script.setAttribute("security-token", securityToken);
   script.setAttribute("extension-id", chrome.runtime.id);
-  script.src = chrome.runtime.getURL("script.js");
+  script.src = chrome.runtime.getURL("return-youtube-dislike.script.js");
   script.onload = function () {
     this.remove();
   };

Extensions/chrome/script.js → Extensions/chrome/return-youtube-dislike.script.js

@@ -1,5 +1,5 @@
 (function (extensionId) {
-  function cLog (message, writer) {
+  function cLog(message, writer) {
     message = `[return youtube dislike]: ${message}`;
     if (writer) {
       writer(message);
@@ -8,65 +8,71 @@
     }
   }
 
-  function getButtons () {
-    return document
-    .getElementById('menu-container')
-    ?.querySelector('#top-level-buttons-computed');
+  function getButtons() {
+    if (document.getElementById("menu-container").offsetParent === null) {
+      return document.querySelector(
+        "ytd-menu-renderer.ytd-watch-metadata > div"
+      );
+    } else {
+      return document
+        .getElementById("menu-container")
+        ?.querySelector("#top-level-buttons-computed");
+    }
   }
 
-  function getLikeButton () {
+  function getLikeButton() {
     return getButtons().children[0];
   }
 
-  function getDislikeButton () {
+  function getDislikeButton() {
     return getButtons().children[1];
   }
 
-  function isVideoLiked () {
-    return getLikeButton().classList.contains('style-default-active');
+  function isVideoLiked() {
+    return getLikeButton().classList.contains("style-default-active");
   }
 
-  function isVideoDisliked () {
-    return getDislikeButton().classList.contains('style-default-active');
+  function isVideoDisliked() {
+    return getDislikeButton().classList.contains("style-default-active");
   }
 
-  function isVideoNotLiked () {
-    return getLikeButton().classList.contains('style-text');
+  function isVideoNotLiked() {
+    return getLikeButton().classList.contains("style-text");
   }
 
-  function isVideoNotDisliked () {
-    return getDislikeButton().classList.contains('style-text');
+  function isVideoNotDisliked() {
+    return getDislikeButton().classList.contains("style-text");
   }
 
-  function getState () {
+  function getState() {
     if (isVideoLiked()) {
-      return 'liked';
+      return "liked";
     }
     if (isVideoDisliked()) {
-      return 'disliked';
+      return "disliked";
     }
-    return 'neutral';
+    return "neutral";
   }
 
-  function setLikes (likesCount) {
-    getButtons().children[0].querySelector('#text').innerText = likesCount;
+  function setLikes(likesCount) {
+    getButtons().children[0].querySelector("#text").innerText = likesCount;
   }
 
-  function setDislikes (dislikesCount) {
-    getButtons().children[1].querySelector('#text').innerText = dislikesCount;
+  function setDislikes(dislikesCount) {
+    getButtons().children[1].querySelector("#text").innerText = dislikesCount;
   }
 
-  function setState () {
+  function setState() {
     let statsSet = false;
     chrome.runtime.sendMessage(
       extensionId,
       {
-        message: 'fetch_from_youtube',
-        videoId: getVideoId(window.location.href)
+        message: "fetch_from_youtube",
+        videoId: getVideoId(window.location.href),
       },
       function (response) {
         if (response != undefined) {
-          cLog('response from youtube:');
+          cLog("response from youtube:");
           cLog(JSON.stringify(response));
           try {
             if (response.likes || response.dislikes) {
@@ -85,12 +91,12 @@
     chrome.runtime.sendMessage(
       extensionId,
       {
-        message: 'set_state',
+        message: "set_state",
         videoId: getVideoId(window.location.href),
-        state: getState()
+        state: getState(),
       },
       function (response) {
-        cLog('response from api:');
+        cLog("response from api:");
         cLog(JSON.stringify(response));
         if (response != undefined && !statsSet) {
           const formattedDislike = numberFormat(response.dislikes);
@@ -103,65 +109,65 @@
     );
   }
 
-  function likeClicked () {
+  function likeClicked() {
     // console.log("like" + getState());
     // setState();
   }
 
-  function dislikeClicked () {
+  function dislikeClicked() {
     // console.log("dislike" + getState());
     // setState();
   }
 
-  function setInitalState () {
+  function setInitalState() {
     setState();
     // setTimeout(() => sendVideoIds(), 1500);
   }
 
-  function getVideoId (url) {
+  function getVideoId(url) {
     const urlObject = new URL(url);
-    const videoId = urlObject.searchParams.get('v');
+    const videoId = urlObject.searchParams.get("v");
     return videoId;
   }
 
-  function isVideoLoaded () {
+  function isVideoLoaded() {
     const videoId = getVideoId(window.location.href);
     return (
       document.querySelector(`ytd-watch-flexy[video-id='${videoId}']`) !== null
     );
   }
 
-  function numberFormat (numberState) {
+  function numberFormat(numberState) {
     const userLocales = navigator.language;
-    const formatter = Intl.NumberFormat(userLocales, { notation: 'compact' });
+    const formatter = Intl.NumberFormat(userLocales, { notation: "compact" });
     return formatter.format(numberState);
   }
 
   var jsInitChecktimer = null;
 
-  function setEventListeners (evt) {
-    function checkForJS_Finish () {
+  function setEventListeners(evt) {
+    function checkForJS_Finish() {
       if (getButtons()?.offsetParent && isVideoLoaded()) {
         clearInterval(jsInitChecktimer);
         jsInitChecktimer = null;
         const buttons = getButtons();
         if (!window.returnDislikeButtonlistenersSet) {
-          buttons.children[0].addEventListener('click', likeClicked);
-          buttons.children[1].addEventListener('click', dislikeClicked);
+          buttons.children[0].addEventListener("click", likeClicked);
+          buttons.children[1].addEventListener("click", dislikeClicked);
           window.returnDislikeButtonlistenersSet = true;
         }
         setInitalState();
       }
     }
 
-    if (window.location.href.indexOf('watch?') >= 0) {
+    if (window.location.href.indexOf("watch?") >= 0) {
       jsInitChecktimer = setInterval(checkForJS_Finish, 111);
     }
   }
 
-  function createRateBar (likes, dislikes) {
+  function createRateBar(likes, dislikes) {
     var rateBar = document.getElementById(
-      'return-youtube-dislike-bar-container'
+      "return-youtube-dislike-bar-container"
     );
 
     const widthPx =
@@ -201,9 +207,9 @@
       document.getElementById("return-youtube-dislike-bar").style.width =
         widthPercent + "%";
 
-      document
-        .getElementById("ryd-dislike-tooltip")
-        .firstChild().innerHTML = `${likes.toLocaleString()}&nbsp;/&nbsp;${dislikes.toLocaleString()}</div>`;
+      document.querySelector(
+        "#ryd-dislike-tooltip > #tooltip"
+      ).innerHTML = `${likes.toLocaleString()}&nbsp;/&nbsp;${dislikes.toLocaleString()}`;
     }
   }
 
@@ -228,7 +234,7 @@
 
   setEventListeners();
 
-  document.addEventListener('yt-navigate-finish', function (event) {
+  document.addEventListener("yt-navigate-finish", function (event) {
     if (jsInitChecktimer !== null) clearInterval(jsInitChecktimer);
     window.returnDislikeButtonlistenersSet = false;
     setEventListeners();
@@ -239,4 +245,4 @@
   // };
 
   // setTimeout(() => sendVideoIds(), 1500);
-})(document.currentScript.getAttribute('extension-id'));
+})(document.currentScript.getAttribute("extension-id"));

Extensions/firefox/manifest.json

@@ -1,10 +1,10 @@
 {
-  "name": "YouTube Dislike Button",
+  "name": "Return Youtube Dislike",
   "description": "Returns ability to see dislikes",
-  "version": "0.0.0.8",
+  "version": "0.0.0.9",
   "manifest_version": 2,
   "background": {
-    "scripts": ["background.js"]
+    "scripts": ["return-youtube-dislike.background.js"]
   },
   "icons": {
     "48": "icons/icon48.png",

Extensions/firefox/background.js → Extensions/firefox/return-youtube-dislike.background.js

@@ -72,10 +72,11 @@ browser.tabs.onUpdated.addListener(async (tabId, changeInfo, tab) => {
   if (changeInfo.status == "complete" && new Date() - lastCalled > 100) {
     lastCalled = new Date();
     console.log("Tab update complete");
+
     if (tab.url && tab.url.indexOf("youtube.") < 0) return;
     browser.tabs.get(tabId, (tab) => {
       browser.tabs.executeScript(tab.id, {
-        file: "script.js",
+        file: "return-youtube-dislike.script.js",
       });
     });
   }

Extensions/firefox/script.js → Extensions/firefox/return-youtube-dislike.script.js

@@ -8,9 +8,13 @@ function cLog(message, writer) {
 }
 
 function getButtons() {
-  return document
-    .getElementById("menu-container")
-    ?.querySelector("#top-level-buttons-computed");
+  if (document.getElementById("menu-container").offsetParent === null) {
+    return document.querySelector("ytd-menu-renderer.ytd-watch-metadata > div");
+  } else {
+    return document
+      .getElementById("menu-container")
+      ?.querySelector("#top-level-buttons-computed");
+  }
 }
 
 function getLikeButton() {
@@ -170,19 +174,22 @@ function setEventListeners(evt) {
 
 function createRateBar(likes, dislikes) {
   var rateBar = document.getElementById("return-youtube-dislike-bar-container");
-  
+
   const widthPx =
-      getButtons().children[0].clientWidth +
-      getButtons().children[1].clientWidth +
-      8;
+    getButtons().children[0].clientWidth +
+    getButtons().children[1].clientWidth +
+    8;
 
-    const widthPercent =
-      likes + dislikes > 0 ? (likes / (likes + dislikes)) * 100 : 50;
+  const widthPercent =
+    likes + dislikes > 0 ? (likes / (likes + dislikes)) * 100 : 50;
 
-    if (!rateBar) {
-      document.getElementById("menu-container").insertAdjacentHTML(
-        "beforeend",
-        `
+  if (!rateBar) {
+    (
+      document.querySelector("#actions-inner") ||
+      document.getElementById("menu-container")
+    ).insertAdjacentHTML(
+      "beforeend",
+      `
           <div class="ryd-tooltip" style="width: ${widthPx}px">
           <div class="ryd-tooltip-bar-container">
              <div
@@ -196,22 +203,23 @@ 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">
+          <div>
              <!--css-build:shady-->${likes.toLocaleString()}&nbsp;/&nbsp;${dislikes.toLocaleString()}
           </tp-yt-paper-tooltip>
           </div>
   `
-      );
-    } else {
-      document.getElementById(
-        "return-youtube-dislike-bar-container"
-      ).style.width = widthPx + "px";
-      document.getElementById("return-youtube-dislike-bar").style.width =
-        widthPercent + "%";
-
-      document
-        .getElementById("ryd-dislike-tooltip")
-        .firstChild().innerHTML = `${likes.toLocaleString()}&nbsp;/&nbsp;${dislikes.toLocaleString()}</div>`;
-    }
+    );
+  } else {
+    document.getElementById(
+      "return-youtube-dislike-bar-container"
+    ).style.width = widthPx + "px";
+    document.getElementById("return-youtube-dislike-bar").style.width =
+      widthPercent + "%";
+
+    document.querySelector(
+      "#ryd-dislike-tooltip > #tooltip"
+    ).innerHTML = `${likes.toLocaleString()}&nbsp;/&nbsp;${dislikes.toLocaleString()}`;
+  }
 }
 
 // function sendVideoIds() {

Icons/Return Youtube Dislike - Transparent.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" viewBox="0 0 240 240" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"><path d="M139.113,65.266l-57.339,-0c-5.288,-0 -9.812,3.185 -11.723,7.772l-19.241,44.916c-0.573,1.466 -0.892,2.995 -0.892,4.651l0,12.742c0,7.009 5.734,12.743 12.742,12.743l40.202,-0l-6.053,29.115l-0.191,2.039c0,2.612 1.083,5.033 2.803,6.754l6.754,6.689l41.985,-41.985c2.294,-2.294 3.695,-5.479 3.695,-8.984l0,-63.71c0,-7.009 -5.734,-12.742 -12.742,-12.742Zm25.485,-0l-0,76.452l25.484,0l-0,-76.452l-25.484,-0Z" style="fill:url(#_Linear1);fill-rule:nonzero;"/><g id="Thumb-Down--m.io-" serif:id="Thumb Down (m.io)"></g><defs><linearGradient id="_Linear1" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(152.906,153.295,-153.295,152.906,43.6442,45.958)"><stop offset="0" style="stop-color:#f00;stop-opacity:1"/><stop offset="0.56" style="stop-color:#4c0000;stop-opacity:1"/><stop offset="1" style="stop-color:#000;stop-opacity:1"/></linearGradient></defs></svg>