updated userscript to work with new ui

Extensions/UserScript/Return Youtube Dislike.user.js

@@ -23,8 +23,10 @@ function doXHR(opts) {
   if (typeof GM_xmlhttpRequest === 'function') {
     return GM_xmlhttpRequest(opts);
   }
-  if (typeof GM.xmlHttpRequest === 'function') {
-    return GM.xmlHttpRequest(opts);
+  if (typeof GM !== 'undefined') /*This will prevent from throwing "Uncaught ReferenceError: GM is not defined"*/{ 
+    if (typeof GM.xmlHttpRequest === 'function') {
+      return GM.xmlHttpRequest(opts);
+    }
   }
 
   console.warn('Unable to detect UserScript plugin, falling back to native XHR.');
@@ -40,9 +42,15 @@ function doXHR(opts) {
 }
 
 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() {
@@ -88,6 +96,54 @@ function setDislikes(dislikesCount) {
   getButtons().children[1].querySelector("#text").innerText = dislikesCount;
 }
 
+function createRateBar(likes, dislikes) {
+  var rateBar = document.getElementById(
+    "return-youtube-dislike-bar-container"
+  );
+
+  const widthPx =
+    getButtons().children[0].clientWidth +
+    getButtons().children[1].clientWidth +
+    8;
+
+  const widthPercent =
+    likes + dislikes > 0 ? (likes / (likes + dislikes)) * 100 : 50;
+
+  if (!rateBar) {
+    document.getElementById("menu-container").insertAdjacentHTML(
+      "beforeend",
+      `
+        <div class="ryd-tooltip" style="width: ${widthPx}px">
+        <div class="ryd-tooltip-bar-container">
+           <div
+              id="return-youtube-dislike-bar-container"
+              style="width: 100%; height: 2px;"
+              >
+              <div
+                 id="return-youtube-dislike-bar"
+                 style="width: ${widthPercent}%; height: 100%"
+                 ></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>
+`
+    );
+  } 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 setState() {
   cLog('Fetching votes...');
 
@@ -99,10 +155,10 @@ function setState() {
       getVideoId(),
     onload: function (xhr) {
       if (xhr != undefined) {
-        const { dislikes } = xhr.response;
-
+        const { dislikes, likes } = xhr.response;
         cLog(`Received count: ${dislikes}`);
         setDislikes(numberFormat(dislikes));
+        createRateBar(likes, dislikes);
       }
     },
   });