Merge branch 'Anarios:main' into main

15 files changed, 123 insertions, 86 deletions

diff --git a/Extensions/UserScript/Return Youtube Dislike.user.js b/Extensions/UserScript/Return Youtube Dislike.user.js
index 47ddaac..a0a6df0 100644
--- a/Extensions/UserScript/Return Youtube Dislike.user.js
+++ b/Extensions/UserScript/Return Youtube Dislike.user.js
@@ -4,7 +4,7 @@
 // @version      0.5
 // @description  Return of the YouTube Dislike, Based off https://www.returnyoutubedislike.com/
 // @author       Anarios & JRWR
-// @match      *://*.youtube.com/watch*
+// @match      *://*.youtube.com/*
 // @compatible chrome
 // @compatible firefox
 // @compatible opera
@@ -16,36 +16,12 @@
 // ==/UserScript==
 function cLog(text, subtext = '') {
   subtext = subtext.trim() === '' ? '' : `(${subtext})`;
-  console.log(`[Return Youtube Dislikes] ${text} ${subtext}`);
-}
-
-function doXHR(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.');
-
-  const xhr = new XMLHttpRequest();
-
-  xhr.open(opts.method, opts.url, true);
-  xhr.onload = () => opts.onload({
-    response: JSON.parse(xhr.responseText),
-  });
-  xhr.onerror = err => console.error('XHR Failed', err);
-  xhr.send();
+  console.log(`[Return YouTube Dislikes] ${text} ${subtext}`);
 }
 
 function getButtons() {
   if (document.getElementById("menu-container").offsetParent === null) {
-    return document.querySelector(
-      "ytd-menu-renderer.ytd-watch-metadata > div"
-    );
+    return document.querySelector("ytd-menu-renderer.ytd-watch-metadata > div");
   } else {
     return document
       .getElementById("menu-container")
@@ -96,9 +72,7 @@ function setDislikes(dislikesCount) {
 }
 
 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 +
@@ -144,32 +118,46 @@ function createRateBar(likes, dislikes) {
 }
 
 function setState() {
-  cLog('Fetching votes...');
-
-  doXHR({
-    method: "GET",
-    responseType: "json",
-    url:
-      "https://return-youtube-dislike-api.azurewebsites.net/votes?videoId=" +
-      getVideoId(),
-    onload: function (xhr) {
-      if (xhr != undefined) {
-        const { dislikes, likes } = xhr.response;
+  cLog("Fetching votes...");
+  let statsSet = false;
+
+  fetch(`https://www.youtube.com/watch?v=${getVideoId()}`).then((response) => {
+    response.text().then((text) => {
+      let result = getDislikesFromYoutubeResponse(text);
+      if (result) {
+        cLog("response from youtube:");
+        cLog(JSON.stringify(result));
+        if (result.likes || result.dislikes) {
+          const formattedDislike = numberFormat(result.dislikes);
+          setDislikes(formattedDislike);
+          createRateBar(result.likes, result.dislikes);
+          statsSet = true;
+        }
+      }
+    });
+  });
+
+  fetch(
+    `https://return-youtube-dislike-api.azurewebsites.net/votes?videoId=${getVideoId()}`
+  ).then((response) => {
+    response.json().then((json) => {
+      if (json && !statsSet) {
+        const { dislikes, likes } = json;
         cLog(`Received count: ${dislikes}`);
         setDislikes(numberFormat(dislikes));
         createRateBar(likes, dislikes);
       }
-    },
+    });
   });
 }
 
 function likeClicked() {
-  cLog('Like clicked', getState());
+  cLog("Like clicked", getState());
   setState();
 }
 
 function dislikeClicked() {
-  cLog('Dislike clicked', getState());
+  cLog("Dislike clicked", getState());
   setState();
 }
 
@@ -194,21 +182,53 @@ function isVideoLoaded() {
 
 function roundDown(num) {
   if (num < 1000) return num;
-  const decimal = Math.floor(Math.log10(num) - 1);
+  const int = Math.floor(Math.log10(num) - 2);
+  const decimal = int + (int % 3 ? 1 : 0);
   const value = Math.floor(num / 10 ** decimal);
-  return value * (10 ** decimal);
+  return value * 10 ** decimal;
 }
 
 function numberFormat(numberState) {
   const userLocales = navigator.language;
 
   const formatter = Intl.NumberFormat(userLocales, {
-    notation: 'compact',
+    notation: "compact",
     minimumFractionDigits: 1,
-    maximumFractionDigits: 1
+    maximumFractionDigits: 1,
   });
 
-  return formatter.format(roundDown(numberState)).replace('.0', '');
+  return formatter.format(roundDown(numberState)).replace(/\.0|,0/, "");
+}
+
+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 setEventListeners(evt) {
@@ -218,7 +238,7 @@ function setEventListeners(evt) {
       const buttons = getButtons();
 
       if (!window.returnDislikeButtonlistenersSet) {
-        cLog('Registering button listeners...');
+        cLog("Registering button listeners...");
         buttons.children[0].addEventListener("click", likeClicked);
         buttons.children[1].addEventListener("click", dislikeClicked);
         window.returnDislikeButtonlistenersSet = true;
@@ -228,7 +248,7 @@ function setEventListeners(evt) {
   }
 
   if (window.location.href.indexOf("watch?") >= 0) {
-    cLog('Setting up...');
+    cLog("Setting up...");
     var jsInitChecktimer = setInterval(checkForJS_Finish, 111);
   }
 }
diff --git a/Extensions/chrome/popup.html b/Extensions/chrome/popup.html
index 617cca9..dd7bfa5 100644
--- a/Extensions/chrome/popup.html
+++ b/Extensions/chrome/popup.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta content="text/html; charset=utf-8">
-    <title>Return Youtube Dislike</title>
+    <title>Return YouTube Dislike</title>
     <link rel="stylesheet" href="popup.css">
   </head>
   <body>
@@ -10,11 +10,11 @@
 
     <center>
       <img src="icons/icon48.png" alt="Logo" />
-      <h1>Return Youtube Dislike</h1>
+      <h1>Return YouTube Dislike</h1>
       <p>by Dmitrii Selivanov & Community</p>
 
       <button id="link_website">Website</button>
-      <button id="link_github">Github</button>
+      <button id="link_github">GitHub</button>
       <button id="link_discord">Discord</button>
 
       <br>
diff --git a/Extensions/chrome/return-youtube-dislike.script.js b/Extensions/chrome/return-youtube-dislike.script.js
index 5ec0172..d51cc00 100644
--- a/Extensions/chrome/return-youtube-dislike.script.js
+++ b/Extensions/chrome/return-youtube-dislike.script.js
@@ -139,7 +139,8 @@
 
   function roundDown(num) {
     if (num < 1000) return num;
-    const decimal = Math.floor(Math.log10(num) - 1);
+    const int = Math.floor(Math.log10(num) - 2);
+    const decimal = int + (int % 3 ? 1 : 0);
     const value = Math.floor(num / 10 ** decimal);
     return value * (10 ** decimal);
   }
@@ -153,7 +154,7 @@
       maximumFractionDigits: 1
     });
 
-    return formatter.format(roundDown(numberState)).replace('.0', '');
+    return formatter.format(roundDown(numberState)).replace(/\.0|,0/, '');
   }
 
   var jsInitChecktimer = null;
diff --git a/Extensions/firefox/manifest.json b/Extensions/firefox/manifest.json
index 59fa79e..f01886e 100644
--- a/Extensions/firefox/manifest.json
+++ b/Extensions/firefox/manifest.json
@@ -1,5 +1,5 @@
 {
-  "name": "Return Youtube Dislike",
+  "name": "Return YouTube Dislike",
   "description": "Returns ability to see dislikes",
   "version": "0.0.0.9",
   "manifest_version": 2,
diff --git a/Extensions/firefox/popup.html b/Extensions/firefox/popup.html
index 4bba44b..52592ef 100644
--- a/Extensions/firefox/popup.html
+++ b/Extensions/firefox/popup.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta content="text/html; charset=utf-8">
-    <title>Return Youtube Dislike</title>
+    <title>Return YouTube Dislike</title>
     <link rel="stylesheet" href="popup.css">
   </head>
   <body>
@@ -10,11 +10,11 @@
 
     <center>
       <img src="icons/icon48.png" alt="Logo" />
-      <h1>Return Youtube Dislike</h1>
+      <h1>Return YouTube Dislike</h1>
       <p>by Dmitrii Selivanov & Community</p>
 
       <button id="link_website">Website</button>
-      <button id="link_github">Github</button>
+      <button id="link_github">GitHub</button>
       <button id="link_discord">Discord</button>
 
       <br>
diff --git a/Extensions/firefox/return-youtube-dislike.script.js b/Extensions/firefox/return-youtube-dislike.script.js
index 2597ee2..293388b 100644
--- a/Extensions/firefox/return-youtube-dislike.script.js
+++ b/Extensions/firefox/return-youtube-dislike.script.js
@@ -135,7 +135,8 @@ function isVideoLoaded() {
 
 function roundDown(num) {
   if (num < 1000) return num;
-  const decimal = Math.floor(Math.log10(num) - 1);
+  const int = Math.floor(Math.log10(num) - 2);
+  const decimal = int + (int % 3 ? 1 : 0);
   const value = Math.floor(num / 10 ** decimal);
   return value * (10 ** decimal);
 }
@@ -149,7 +150,7 @@ function numberFormat(numberState) {
     maximumFractionDigits: 1
   });
 
-  return formatter.format(roundDown(numberState)).replace('.0', '');
+  return formatter.format(roundDown(numberState)).replace(/\.0|,0/, '');
 }
 
 function setEventListeners(evt) {
diff --git a/README.md b/README.md
index 2c76819..9681447 100644
--- a/README.md
+++ b/README.md
@@ -1,7 +1,7 @@
-[![Mozilla rating](https://img.shields.io/amo/stars/return-youtube-dislikes?label=Firefox%20Rating&style=flat&logo=firefox)](https://addons.mozilla.org/en-US/firefox/addon/return-youtube-dislikes/)
-[![Mozilla downloads](https://img.shields.io/amo/users/return-youtube-dislikes?label=Firefox%20Users&style=flat&logo=firefox)](https://addons.mozilla.org/en-US/firefox/addon/return-youtube-dislikes/)
 [![Chrome Web Store](https://img.shields.io/chrome-web-store/stars/gebbhagfogifgggkldgodflihgfeippi?label=Chrome%20Rating&style=flat&logo=google)](https://chrome.google.com/webstore/detail/youtube-dislike-button/gebbhagfogifgggkldgodflihgfeippi/)
 [![Chrome Web Store Users](https://img.shields.io/chrome-web-store/users/gebbhagfogifgggkldgodflihgfeippi?label=Chrome%20Users&style=flat&logo=google)](https://chrome.google.com/webstore/detail/youtube-dislike-button/gebbhagfogifgggkldgodflihgfeippi/)
+[![Mozilla rating](https://img.shields.io/amo/stars/return-youtube-dislikes?label=Firefox%20Rating&style=flat&logo=firefox)](https://addons.mozilla.org/en-US/firefox/addon/return-youtube-dislikes/)
+[![Mozilla downloads](https://img.shields.io/amo/users/return-youtube-dislikes?label=Firefox%20Users&style=flat&logo=firefox)](https://addons.mozilla.org/en-US/firefox/addon/return-youtube-dislikes/)
 [![Commit rate](https://img.shields.io/github/commit-activity/m/Anarios/return-youtube-dislike?label=Commits&style=flat)](https://github.com/Anarios/return-youtube-dislike/commits/main)
 [![Issues](https://img.shields.io/github/issues/Anarios/return-youtube-dislike?style=flat&label=Issues)](https://github.com/Anarios/return-youtube-dislike/issues)
 [![Discord](https://img.shields.io/discord/909435648170160229?label=Discord&style=flat&logo=discord)](https://discord.gg/UMxyMmCgfF)
diff --git a/StaticSiteOld/index.html b/StaticSiteOld/index.html
index 23836cd..48a185d 100644
--- a/StaticSiteOld/index.html
+++ b/StaticSiteOld/index.html
@@ -171,7 +171,7 @@
             extension users to derive actual dislike count on a video
           </p>
           <p>
-            Youtube has removed dislike statistics. Since this was a very
+            YouTube has removed dislike statistics. Since this was a very
             usefull feature - this extension aims to return this functionality
             to users.
           </p>
@@ -181,7 +181,7 @@
           </div>
           <p>
             We're considering integration with
-            <a href="https://vancedapp.com/">Youtube Vanced</a> mobile app, if
+            <a href="https://vancedapp.com/">YouTube Vanced</a> mobile app, if
             the devs will want to utilize our API
           </p>
 
diff --git a/Website/README.md b/Website/README.md
index 645c53f..552c817 100644
--- a/Website/README.md
+++ b/Website/README.md
@@ -1,4 +1,4 @@
-# Return-Youtube-Dislike
+# return-youtube-dislike-site
 
 ## Build Setup
 
diff --git a/Website/layouts/default.vue b/Website/layouts/default.vue
index 4d1769d..ac84a9c 100644
--- a/Website/layouts/default.vue
+++ b/Website/layouts/default.vue
@@ -3,7 +3,7 @@
     <v-app-bar app color="lighten-2" flat>
 
       <v-tabs centered class="ml-n9" color="primary" router>
-        <v-tab v-for="link in links" :key="link" :to="link.path">
+        <v-tab v-for="link in links" :key="link.path" :to="link.path">
           {{ link.name }}
         </v-tab>
       </v-tabs>
diff --git a/Website/nuxt.config.js b/Website/nuxt.config.js
index 285e8f5..724f3ba 100644
--- a/Website/nuxt.config.js
+++ b/Website/nuxt.config.js
@@ -3,8 +3,8 @@ import colors from 'vuetify/es5/util/colors'
 export default {
   // Global page headers: https://go.nuxtjs.dev/config-head
   head: {
-    titleTemplate: 'Return Youtube Dislike',
-    title: 'Return Youtube Dislike',
+    titleTemplate: 'Return YouTube Dislike',
+    title: 'Return YouTube Dislike',
     htmlAttrs: {
       lang: 'en'
     },
diff --git a/Website/pages/faq.vue b/Website/pages/faq.vue
index 375462a..5e40638 100644
--- a/Website/pages/faq.vue
+++ b/Website/pages/faq.vue
@@ -21,23 +21,23 @@
     data: () => ({
       items: [
         { 
-          question: "Where does extension get data?",
-          answer: "Combination of GoogleAPI data and scraped data. We save all available data to our DB for it to be available after google shuts down dislike counts in their API."
+          question: "Where does the extension get its data?",
+          answer: "A combination of Google's API data and scraped data. We save all available data to our DB so it can be made available after Google removes dislike counts from their API."
         },
         { 
-          question: "Video dislike count doesn't update",
-          answer: "Right now video dislikes are cached, and arent updated very frequenly. Once in 2-3 days, not more often Yeah, it's not ideal, but it is what it is. Working on improving how often we can update  them"
+          question: "Why isn't the dislike count updating?",
+          answer: "Right now video dislikes are cached and they arent updated very frequenly. Currently this is set to update once every 2–3 days.  This isn't ideal and we are working on improving how often we can update them"
         },
         { 
           question: "How does this work?",
-          answer: "The extension collects the video id of the video you are watching, fetches the dislike (and other fields like views, likes etc) using our API, if this is the first time the video was fetched by our API, it will use the YouTube API to get the data, then stores the data in a database for caching (cached for around 2-3 days) and archiving purposes and returns it to you. The extension then displays the dislikes to you."
+          answer: "The extension collects the video ID of the video you are watching, fetches the dislike (and other fields like views, likes etc) using our API, if this is the first time the video was fetched by our API, it will use the YouTube API to get the data, then store it in the database for caching (cached for around 2-3 days) and archiving purposes, and returns it to you. The extension then displays the dislike count and ratio on the page."
         },
         { 
           question: "What will happen after the YouTube API stops returning the dislike count?",
-          answer: "The backend will switch to using a combination of archived dislike stats, estimates extrapolated from extension user data and estimates based on view/like ratios for videos whose dislikes weren't archived and for outdated dislike archives."
+          answer: "The backend will switch to using a combination of archived dislike stats, estimates extrapolated from extension user data, and estimates based on view/like ratios for videos whose dislikes weren't archived as well as outdated dislike count archives."
         },
       ],
     }),
   
   }
-</script>
\ No newline at end of file
+</script>
diff --git a/Website/pages/index.vue b/Website/pages/index.vue
index 94e3354..6cf22a2 100644
--- a/Website/pages/index.vue
+++ b/Website/pages/index.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
 
-    <h1 style="font-size: 3em; margin-bottom:0;">Return Youtube Dislike</h1>
+    <h1 style="font-size: 3em; margin-bottom:0;">Return YouTube Dislike</h1>
     <div style="color: #999">
       <p style="margin-top: 0">Browser extension and an API that show you dislikes on youtube</p>
     </div>
@@ -15,7 +15,7 @@
 
     <v-btn class="mainAltButton" :href="githubLink" target="_blank">
       <v-icon style="margin-right: 0.5em;">mdi-github</v-icon>
-      Github
+      GitHub
     </v-btn>
 
     <v-btn class="mainAltButton" :href="discordLink" target="_blank">
diff --git a/Website/pages/install.vue b/Website/pages/install.vue
index 2cb9ffb..0af080f 100644
--- a/Website/pages/install.vue
+++ b/Website/pages/install.vue
@@ -5,19 +5,34 @@
 
     <div style="color: #999">
       <p style="margin-bottom: 0;"> This is an <b>ALPHA version!</b> It may be slow. It may be buggy.</p>
-      <p style="margin-bottom: 3em;">Only available for Chrome, Firefox and as a Userscript now, but coming to other platforms soon.</p>
+      <p style="margin-bottom: 1em;">Available for Firefox and all Chromium browsers (Chrome/Edge/Opera/Brave).</p>
     </div>
 
+    <v-btn class="mainAltButton" :href="firefoxLink" target="_blank">
+      <v-icon style="margin-right: 0.5em;">mdi-firefox</v-icon>
+      Firefox
+    </v-btn>
+
     <v-btn class="mainAltButton" :href="chromeLink" target="_blank">
       <v-icon style="margin-right: 0.5em;">mdi-google-chrome</v-icon>
       Chrome
     </v-btn>
 
-    <v-btn class="mainAltButton" :href="firefoxLink" target="_blank">
-      <v-icon style="margin-right: 0.5em;">mdi-firefox</v-icon>
-      Firefox
+    <v-btn class="mainAltButton" :href="chromeLink" target="_blank">
+      <v-icon style="margin-right: 0.5em;">mdi-microsoft-edge</v-icon>
+      Edge
+    </v-btn>
+
+    <v-btn class="mainAltButton" :href="chromeLink" target="_blank">
+      <v-icon style="margin-right: 0.5em;">mdi-opera</v-icon>
+      Opera
     </v-btn>
 
+    <h3 style="margin-top: 3em; margin-bottom:0">Other Platforms</h3>
+    <div style="color: #999">
+      <p style="margin-top: 0em; margin-bottom:0;">If your browser is not yet supported, try this UserScript.</p>
+    </div>
+
     <v-btn class="mainAltButton" :href="scriptLink" target="_blank">
       <v-icon style="margin-right: 0.5em;">mdi-script-text-outline</v-icon>
       Userscript (Tampermonkey)
@@ -25,7 +40,7 @@
 
     <h3 style="margin-top: 3em;">Third Party Implementations</h3>
     <div style="color: #999">
-      <p style="margin-bottom: 0;">No liability on our side, use at your own risk</p>
+      <p style="margin-bottom: 0;">No liability on our side, use at your own risk.</p>
     </div>
     <v-btn class="mainAltButton" :href="iosJailbreakLink" target="_blank">
       <v-icon style="margin-right: 0.5em;">mdi-apple</v-icon>
diff --git a/Website/pages/links.vue b/Website/pages/links.vue
index a5042df..d8ac074 100644
--- a/Website/pages/links.vue
+++ b/Website/pages/links.vue
@@ -9,7 +9,7 @@
 
     <v-btn class="mainAltButton" :href="githubLink" target="_blank">
       <v-icon style="margin-right: 0.5em;">mdi-github</v-icon>
-      Github
+      GitHub
     </v-btn>
 
     <v-btn class="mainAltButton" :href="discordLink" target="_blank">
@@ -47,4 +47,4 @@ export default {
     }
   }
 }
-</script>
\ No newline at end of file
+</script>