Ratio bar added

Extensions/chrome/manifest.json

@@ -1,7 +1,7 @@
 {
   "name": "Youtube Dislike Button",
   "description": "Returns ability to see dislikes",
-  "version": "0.0.0.4",
+  "version": "0.0.0.5",
   "manifest_version": 3,
   "background": {
     "service_worker": "background.js"

Extensions/chrome/script.js

@@ -79,7 +79,7 @@
 
   function setInitalState() {
     setState();
-    setTimeout(() => sendVideoIds(), 1500);
+    // setTimeout(() => sendVideoIds(), 1500);
   }
 
   function getVideoId(url) {
@@ -152,24 +152,24 @@
     }
   }
 
-  function sendVideoIds() {
-    const ids = Array.from(
-      document.getElementsByClassName(
-        "yt-simple-endpoint ytd-compact-video-renderer"
-      )
-    )
-      .concat(
-        Array.from(
-          document.getElementsByClassName("yt-simple-endpoint ytd-thumbnail")
-        )
-      )
-      .filter((x) => x.href && x.href.indexOf("/watch?v=") > 0)
-      .map((x) => getVideoId(x.href));
-    chrome.runtime.sendMessage(extensionId, {
-      message: "send_links",
-      videoIds: ids,
-    });
-  }
+  // function sendVideoIds() {
+  //   const ids = Array.from(
+  //     document.getElementsByClassName(
+  //       "yt-simple-endpoint ytd-compact-video-renderer"
+  //     )
+  //   )
+  //     .concat(
+  //       Array.from(
+  //         document.getElementsByClassName("yt-simple-endpoint ytd-thumbnail")
+  //       )
+  //     )
+  //     .filter((x) => x.href && x.href.indexOf("/watch?v=") > 0)
+  //     .map((x) => getVideoId(x.href));
+  //   chrome.runtime.sendMessage(extensionId, {
+  //     message: "send_links",
+  //     videoIds: ids,
+  //   });
+  // }
 
   setEventListeners();
 
@@ -179,9 +179,9 @@
     setEventListeners();
   });
 
-  window.onscrollend = () => {
-    sendVideoIds();
-  };
+  // window.onscrollend = () => {
+  //   sendVideoIds();
+  // };
 
-  setTimeout(() => sendVideoIds(), 1500);
+  // setTimeout(() => sendVideoIds(), 1500);
 })(document.currentScript.getAttribute("extension-id"));

Extensions/firefox/background.js

@@ -30,14 +30,32 @@ browser.runtime.onMessage.addListener((request, sender, sendResponse) => {
       .catch();
     //});
     return true;
+  } else if (request.message == "send_links") {
+    toSend = toSend.concat(request.videoIds.filter((x) => !sentIds.has(x)));
+    if (toSend.length >= 20) {
+      fetch(`${apiUrl}/votes`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify(toSend),
+      });
+      for (const toSendUrl of toSend) {
+        sentIds.add(toSendUrl);
+      }
+      toSend = [];
+    }
   }
 });
 
+const sentIds = new Set();
+let toSend = [];
+
 browser.tabs.onUpdated.addListener(async (tabId, changeInfo, tab) => {
   if (changeInfo.status == "complete") {
     if (tab.url && tab.url.indexOf("youtube.") < 0) return;
     browser.tabs.get(tabId, (tab) => {
-      browser.tabs.executeScript(tab.id,{
+      browser.tabs.executeScript(tab.id, {
         file: "script.js",
       });
     });

Extensions/firefox/content-style.css

@@ -0,0 +1,14 @@
+#return-youtube-dislike-bar-container {
+    background: #c6c6c6;
+}
+
+#return-youtube-dislike-bar {
+    background: #5094c8;
+}
+
+[dark] #return-youtube-dislike-bar-container {
+}
+
+[dark] #return-youtube-dislike-bar {
+    background: #3ea6ff;
+}

Extensions/firefox/manifest.json

@@ -1,7 +1,7 @@
 {
   "name": "Youtube Dislike Button",
   "description": "Returns ability to see dislikes",
-  "version": "0.0.0.2",
+  "version": "0.0.0.5",
   "manifest_version": 2,
   "background": {
     "scripts": ["background.js"]
@@ -14,7 +14,8 @@
     {
       "matches": ["*://*.youtube.com/*"],
       "js": ["content-script.js"],
-      "run_at": "document_idle"
+      "run_at": "document_idle",
+      "css": ["content-style.css"]
     }
   ]
 

Extensions/firefox/script.js

@@ -50,7 +50,7 @@ function setState() {
   browser.runtime.sendMessage(
     {
       message: "set_state",
-      videoId: getVideoId(),
+      videoId: getVideoId(window.location.href),
       state: getState(),
     },
     function (response) {
@@ -59,6 +59,7 @@ function setState() {
         // setLikes(response.likes);
         console.log(response);
         setDislikes(formattedDislike);
+        createRateBar(response.likes, response.dislikes);
       } else {
       }
     }
@@ -66,27 +67,28 @@ function setState() {
 }
 
 function likeClicked() {
-  console.log("like" + getState());
-  setState();
+  // console.log("like" + getState());
+  // setState();
 }
 
 function dislikeClicked() {
-  console.log("dislike" + getState());
-  setState();
+  // console.log("dislike" + getState());
+  // setState();
 }
 
 function setInitalState() {
   setState();
+  // setTimeout(() => sendVideoIds(), 1500);
 }
 
-function getVideoId() {
-  const urlParams = new URLSearchParams(window.location.search);
-  const videoId = urlParams.get("v");
+function getVideoId(url) {
+  const urlObject = new URL(url);
+  const videoId = urlObject.searchParams.get("v");
   return videoId;
 }
 
 function isVideoLoaded() {
-  const videoId = getVideoId();
+  const videoId = getVideoId(window.location.href);
   return (
     document.querySelector(`ytd-watch-flexy[video-id='${videoId}']`) !== null
   );
@@ -106,6 +108,20 @@ function setEventListeners(evt) {
       if (!window.returnDislikeButtonlistenersSet) {
         buttons.children[0].addEventListener("click", likeClicked);
         buttons.children[1].addEventListener("click", dislikeClicked);
+        let lastKnownScrollPosition = 0;
+        let ticking = false;
+        // document.addEventListener('scroll', function(e) {
+        //   lastKnownScrollPosition = window.scrollY;
+        //
+        //   if (!ticking) {
+        //     window.requestAnimationFrame(function() {
+        //       // sendVideoIds();
+        //       ticking = false;
+        //     });
+        //
+        //     ticking = true;
+        //   }
+        // });
         window.returnDislikeButtonlistenersSet = true;
       }
       setInitalState();
@@ -117,6 +133,69 @@ 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;
+
+  const widthPercent =
+    likes + dislikes > 0 ? (likes / (likes + dislikes)) * 100 : 50;
+
+  if (!rateBar) {
+    document.getElementById("menu-container").insertAdjacentHTML(
+      "beforeend",
+      `<div id="return-youtube-dislike-bar-container" 
+                  style="width: ${widthPx}px; 
+                  height: 3px; margin-left: 6px;">
+                  <div id="return-youtube-dislike-bar" style="width: ${widthPercent}%; height: 100%" ></div>
+                </div>`
+    );
+  } else {
+    document.getElementById(
+      "return-youtube-dislike-bar-container"
+    ).style.width = widthPx + "px";
+    document.getElementById("return-youtube-dislike-bar").style.width =
+      widthPercent + "%";
+  }
+}
+
+// function sendVideoIds() {
+//   const ids = Array.from(
+//     document.getElementsByClassName(
+//       "yt-simple-endpoint ytd-compact-video-renderer"
+//     )
+//   )
+//   .concat(
+//     Array.from(
+//       document.getElementsByClassName("yt-simple-endpoint ytd-thumbnail")
+//     )
+//   )
+//   .filter((x) => x.href && x.href.indexOf("/watch?v=") > 0)
+//   .map((x) => getVideoId(x.href));
+//   browser.runtime.sendMessage({
+//     message: "send_links",
+//     videoIds: ids,
+//   });
+// }
+
 setEventListeners();
 
+// document.addEventListener("yt-navigate-finish", function (event) {
+//   if (jsInitChecktimer !== null) clearInterval(jsInitChecktimer);
+//   window.returnDislikeButtonlistenersSet = false;
+//   setEventListeners();
+// });
+
+
+
+
+// window.onscrollend = () => {
+//   sendVideoIds();
+// };
+//
+// setTimeout(() => sendVideoIds(), 1500);
+
 //window.addEventListener("hashchange", setEventListeners, false);

StaticSite/index.html

@@ -17,10 +17,10 @@
     <div class="col-lg-8 col-md-10 col-sm-12">
       <h2 class="mt-4">Chrome/Firefox/Usersript extension to return youtube dislike count</h2>
       <img src="images/aAGrY8L_700b.jpg" class="img-fluid"/>
-      <p><strong>Now <a href="https://addons.mozilla.org/en-US/firefox/addon/return-youtube-dislikes/">available</a> in
-        firefox addon store! </strong></p>
+      
 
-      <p><strong>Version 0.0.0.4 released - ratio (like/dislike) bar added</strong></p>
+      <p><strong>Version 0.0.0.5 released - ratio (like/dislike) bar added</strong></p>
+      <img class="img-fluid mb-5" src="images/ratio.jpg"/>
       <p>This is a Chrome/Firefox/Userscript extension that return dislike statistics to YouTube. For now, it only works
         if
         a video had public display of dislikes enabled before YouTube removed dislike stats.</p>
@@ -44,12 +44,15 @@
       <section id="downloads" class="pb-5">
         <h2>Downloads:</h2>
         <p><strong>This is an ALHPA version!</strong> It may be slow. It may be buggy.</p>
-        <p>Only available for chrome and Firefox now, but coming to other platforms soon</p>
+        <p>Only available for chrome and Firefox now and as a Userscript now, but coming to other platforms soon</p>
         <h4>Chrome:</h4>
         <p>
           <a href="files/chrome/return_youtube_dislike0.0.0.1.crx">v_0.0.0.1</a></p>
         <p><a href="files/chrome/return_youtube_dislike0.0.0.2.crx">v_0.0.0.2</a> - Better number formatting added,
         <p><a href="files/chrome/return_youtube_dislike_LOAD_UNPACKED_0.0.0.3.zip">v_0.0.0.3</a>
+        <p>  0.0.0.4 <strong> removed (accidental self-ddos)</strong></p>
+        <p> <a href="files/chrome/return_youtube_dislike_LOAD_UNPACKED_0.0.0.5.zip">0.0.0.5</a>
+        - ratio bar added. Dislikes from every video on page are saved now
 
         Previous versions are disabled automatically by chrome, because Chrome doesn't like .crx extensions.
 
@@ -60,6 +63,7 @@
 
        Install from extension's firefox addon store <a href="https://addons.mozilla.org/en-US/firefox/addon/return-youtube-dislikes/" target="_blank">page</a>.
         Check for updates often - this extension is being actively improved
+        Latest version coming out as soon as update is approved by Mozilla
 
         <p>