Firefox updated to 0.0.0.6

Extensions/chrome/background.js

@@ -59,7 +59,10 @@ chrome.runtime.onMessageExternal.addListener(
         .then((response) => response.text())
         .then((text) => {
           var result = getDislikesFromYoutubeResponse(text);
-          sendUserSubmittedStatisticsToApi({...result, videoId: request.videoId});
+          sendUserSubmittedStatisticsToApi({
+            ...result,
+            videoId: request.videoId,
+          });
           sendResponse(result);
         });
     }
@@ -95,7 +98,7 @@ function getDislikesFromYoutubeResponse(htmlResponse) {
     likes,
     dislikes: Math.round(dislikes),
     rating,
-    viewCount: +jsonResult.viewCount
+    viewCount: +jsonResult.viewCount,
   };
   return result;
 }

Extensions/chrome/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);
@@ -7,65 +7,66 @@
       console.log(message);
     }
   }
-  function getButtons() {
+
+  function getButtons () {
     return document
-      .getElementById("menu-container")
-      ?.querySelector("#top-level-buttons-computed");
+    .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 +86,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 +104,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 =
       getButtons().children[0].clientWidth +
@@ -171,8 +172,8 @@
       likes + dislikes > 0 ? (likes / (likes + dislikes)) * 100 : 50;
 
     if (!rateBar) {
-      document.getElementById("menu-container").insertAdjacentHTML(
-        "beforeend",
+      document.getElementById('menu-container').insertAdjacentHTML(
+        'beforeend',
         `
 <div class="ryd-tooltip">
   <div
@@ -192,10 +193,10 @@
       );
     } else {
       document.getElementById(
-        "return-youtube-dislike-bar-container"
-      ).style.width = widthPx + "px";
-      document.getElementById("return-youtube-dislike-bar").style.width =
-        widthPercent + "%";
+        'return-youtube-dislike-bar-container'
+      ).style.width = widthPx + 'px';
+      document.getElementById('return-youtube-dislike-bar').style.width =
+        widthPercent + '%';
     }
   }
 
@@ -220,7 +221,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();
@@ -231,4 +232,4 @@
   // };
 
   // setTimeout(() => sendVideoIds(), 1500);
-})(document.currentScript.getAttribute("extension-id"));
+})(document.currentScript.getAttribute('extension-id'));

Extensions/firefox/background.js

@@ -45,14 +45,33 @@ browser.runtime.onMessage.addListener((request, sender, sendResponse) => {
       }
       toSend = [];
     }
+  } else if (request.message == "fetch_from_youtube") {
+    fetch(`https://www.youtube.com/watch?v=${request.videoId}`, {
+      method: "GET",
+    })
+      .then((response) => response.text())
+      .then((text) => {
+        let result = getDislikesFromYoutubeResponse(text);
+        sendResponse(result);
+        try {
+          sendUserSubmittedStatisticsToApi({
+            ...result,
+            videoId: request.videoId,
+          });
+        } catch {}
+      });
+    return true;
   }
 });
 
 const sentIds = new Set();
 let toSend = [];
+let lastCalled = new Date();
 
 browser.tabs.onUpdated.addListener(async (tabId, changeInfo, tab) => {
-  if (changeInfo.status == "complete") {
+  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, {
@@ -61,3 +80,44 @@ browser.tabs.onUpdated.addListener(async (tabId, changeInfo, tab) => {
     });
   }
 });
+
+function getDislikesFromYoutubeResponse(htmlResponse) {
+  let start =
+    htmlResponse.indexOf('"videoDetails":') + '"videoDetails":'.length;
+  let end =
+    htmlResponse.indexOf('"isLiveContent":false}', start) +
+    '"isLiveContent":false}'.length;
+  if (end < start) {
+    end =
+      htmlResponse.indexOf('"isLiveContent":true}', start) +
+      '"isLiveContent":true}'.length;
+  }
+  let jsonStr = htmlResponse.substring(start, end);
+  let jsonResult = JSON.parse(jsonStr);
+  let rating = jsonResult.averageRating;
+
+  start = htmlResponse.indexOf('"topLevelButtons":[', end);
+  start =
+    htmlResponse.indexOf('"accessibilityData":', start) +
+    '"accessibilityData":'.length;
+  end = htmlResponse.indexOf("}", start);
+  let likes = +htmlResponse.substring(start, end).replace(/\D/g, "");
+  let dislikes = (likes * (5 - rating)) / (rating - 1);
+  let result = {
+    likes,
+    dislikes: Math.round(dislikes),
+    rating,
+    viewCount: +jsonResult.viewCount,
+  };
+  return result;
+}
+
+function sendUserSubmittedStatisticsToApi(statistics) {
+  fetch(`${apiUrl}/votes/user-submitted`, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify(statistics),
+  });
+}

Extensions/firefox/content-style.css

@@ -1,14 +1,46 @@
 #return-youtube-dislike-bar-container {
-    background: #c6c6c6;
+  background: #c6c6c6;
 }
 
 #return-youtube-dislike-bar {
-    background: #5094c8;
+  background: #5094c8;
 }
 
 [dark] #return-youtube-dislike-bar-container {
 }
 
 [dark] #return-youtube-dislike-bar {
-    background: #3ea6ff;
+  background: #3ea6ff;
+}
+
+.ryd-tooltip {
+  position: relative;
+  display: inline-block;
+  border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
+  cursor: pointer;
+  height: 10px;
+  margin-bottom: -5px;
+}
+
+/* Tooltip text */
+.ryd-tooltip .ryd-tooltiptext {
+  visibility: hidden;
+  width: 120px;
+  background-color: #000000c4;
+  color: #fff;
+  text-align: center;
+  padding: 5px 0;
+  border-radius: 6px;
+
+  /* Position the tooltip text - see examples below! */
+  position: absolute;
+  z-index: 1;
+  bottom: 15px;
+  left: 10px;
+  font-size: 12px;
+}
+
+/* Show the tooltip text when you mouse over the tooltip container */
+.ryd-tooltip:hover .ryd-tooltiptext {
+  visibility: visible;
 }

Extensions/firefox/manifest.json

@@ -1,7 +1,7 @@
 {
   "name": "Youtube Dislike Button",
   "description": "Returns ability to see dislikes",
-  "version": "0.0.0.5",
+  "version": "0.0.0.6",
   "manifest_version": 2,
   "background": {
     "scripts": ["background.js"]

Extensions/firefox/script.js

@@ -1,3 +1,12 @@
+function cLog(message, writer) {
+  message = `[return youtube dislike]: ${message}`;
+  if (writer) {
+    writer(message);
+  } else {
+    console.log(message);
+  }
+}
+
 function getButtons() {
   return document
     .getElementById("menu-container")
@@ -47,6 +56,30 @@ function setDislikes(dislikesCount) {
 }
 
 function setState() {
+  let statsSet = false;
+  browser.runtime.sendMessage(
+    {
+      message: "fetch_from_youtube",
+      videoId: getVideoId(window.location.href),
+    },
+    function (response) {
+      if (response != undefined) {
+        cLog("response from youtube:");
+        cLog(JSON.stringify(response));
+        try {
+          if (response.likes || response.dislikes) {
+            const formattedDislike = numberFormat(response.dislikes);
+            setDislikes(formattedDislike);
+            createRateBar(response.likes, response.dislikes);
+            statsSet = true;
+          }
+        } catch (e) {
+          statsSet = false;
+        }
+      }
+    }
+  );
+
   browser.runtime.sendMessage(
     {
       message: "set_state",
@@ -54,7 +87,9 @@ function setState() {
       state: getState(),
     },
     function (response) {
-      if (response != undefined) {
+      cLog("response from api:");
+      cLog(JSON.stringify(response));
+      if (response != undefined && !statsSet) {
         const formattedDislike = numberFormat(response.dislikes);
         // setLikes(response.likes);
         console.log(response);
@@ -134,12 +169,9 @@ function setEventListeners(evt) {
 }
 
 function createRateBar(likes, dislikes) {
-  var rateBar = document.getElementById(
-    "return-youtube-dislike-bar-container"
-  );
+  var rateBar = document.getElementById("return-youtube-dislike-bar-container");
   const widthPx =
-    getButtons().children[0].clientWidth +
-    getButtons().children[1].clientWidth;
+    getButtons().children[0].clientWidth + getButtons().children[1].clientWidth;
 
   const widthPercent =
     likes + dislikes > 0 ? (likes / (likes + dislikes)) * 100 : 50;
@@ -147,11 +179,22 @@ function createRateBar(likes, dislikes) {
   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>`
+      `
+<div class="ryd-tooltip">
+  <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>
+
+  <span class="ryd-tooltiptext ryd-tooltip-top">${likes}&nbsp;/&nbsp;${dislikes}</span>
+</div>
+`
     );
   } else {
     document.getElementById(
@@ -189,9 +232,6 @@ setEventListeners();
 //   setEventListeners();
 // });
 
-
-
-
 // window.onscrollend = () => {
 //   sendVideoIds();
 // };