Merge github.com-picklenik:PickleNik/return-youtube-dislike into ext-settings

Extensions/combined/src/bar.js

@@ -1,48 +1,55 @@
 import { getButtons } from "./buttons";
+import { likesDisabledState } from "./state";
+import { cLog } from "./utils";
 
 function createRateBar(likes, dislikes) {
-  let rateBar = document.getElementById("ryd-bar-container");
+  if (!likesDisabledState) {
+    let rateBar = document.getElementById("ryd-bar-container");
 
-  const widthPx =
-    getButtons().children[0].clientWidth +
-    getButtons().children[1].clientWidth +
-    8;
+    const widthPx =
+      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") ||
-      document.querySelector("ytm-slim-video-action-bar-renderer")
-    ).insertAdjacentHTML(
-      "beforeend",
-      `
-          <div class="ryd-tooltip" style="width: ${widthPx}px">
-          <div class="ryd-tooltip-bar-container">
-             <div
-                id="ryd-bar-container"
-                style="width: 100%; height: 2px;"
-                >
-                <div
-                   id="ryd-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>
-  `
-    );
+    if (!rateBar) {
+      (
+        document.getElementById("menu-container") ||
+        document.querySelector("ytm-slim-video-action-bar-renderer")
+      ).insertAdjacentHTML(
+        "beforeend",
+        `
+            <div class="ryd-tooltip" style="width: ${widthPx}px">
+            <div class="ryd-tooltip-bar-container">
+               <div
+                  id="ryd-bar-container"
+                  style="width: 100%; height: 2px;"
+                  >
+                  <div
+                     id="ryd-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("ryd-bar-container").style.width = widthPx + "px";
+      document.getElementById("ryd-bar").style.width = widthPercent + "%";
+      document.querySelector(
+        "#ryd-dislike-tooltip > #tooltip"
+      ).innerHTML = `${likes.toLocaleString()}&nbsp;/&nbsp;${dislikes.toLocaleString()}`;
+    }
   } else {
-    document.getElementById("ryd-bar-container").style.width = widthPx + "px";
-    document.getElementById("ryd-bar").style.width = widthPercent + "%";
-
-    document.querySelector(
-      "#ryd-dislike-tooltip > #tooltip"
-    ).innerHTML = `${likes.toLocaleString()}&nbsp;/&nbsp;${dislikes.toLocaleString()}`;
+    cLog("removing bar");
+    let ratebar = document.getElementById("ryd-bar-container");
+    ratebar.parentNode.removeChild(ratebar);
   }
 }
 

Extensions/combined/src/buttons.js

@@ -35,9 +35,4 @@ function checkForSignInButton() {
   }
 }
 
-export {
-  getButtons,
-  getLikeButton,
-  getDislikeButton,
-  checkForSignInButton,
-};
+export { getButtons, getLikeButton, getDislikeButton, checkForSignInButton };

Extensions/combined/src/events.js

@@ -1,7 +1,15 @@
-import { getBrowser, getVideoId, numberFormat, cLog } from "./utils"
-import { checkForSignInButton, getButtons } from "./buttons"
-import { NEUTRAL_STATE, LIKED_STATE, DISLIKED_STATE, setDislikes, extConfig, storedData } from "./state"
-import { createRateBar } from "./bar"
+import { getBrowser, getVideoId, numberFormat, cLog } from "./utils";
+import { checkForSignInButton, getButtons } from "./buttons";
+import {
+  NEUTRAL_STATE,
+  LIKED_STATE,
+  DISLIKED_STATE,
+  setDislikes,
+  extConfig,
+  storedData,
+  setLikes,
+} from "./state";
+import { createRateBar } from "./bar";
 
 function sendVote(vote) {
   if (extConfig.disableVoteSubmission !== true) {
@@ -89,16 +97,18 @@ function dislikeClicked() {
 
 function addLikeDislikeEventListener() {
   const buttons = getButtons();
-    if (!window.returnDislikeButtonlistenersSet) {
-      buttons.children[0].addEventListener("click", likeClicked);
-      buttons.children[1].addEventListener("click", dislikeClicked);
-      window.returnDislikeButtonlistenersSet = true;
-    }
+  if (!window.returnDislikeButtonlistenersSet) {
+    buttons.children[0].addEventListener("click", likeClicked);
+    buttons.children[1].addEventListener("click", dislikeClicked);
+    window.returnDislikeButtonlistenersSet = true;
+  }
 }
 
 function storageChangeHandler(changes, area) {
   if (changes.disableVoteSubmission !== undefined) {
-    handleDisableVoteSubmissionChangeEvent(changes.disableVoteSubmission.newValue);
+    handleDisableVoteSubmissionChangeEvent(
+      changes.disableVoteSubmission.newValue
+    );
   }
 }
 

Extensions/combined/src/state.js

@@ -7,6 +7,8 @@ const LIKED_STATE = "LIKED_STATE";
 const DISLIKED_STATE = "DISLIKED_STATE";
 const NEUTRAL_STATE = "NEUTRAL_STATE";
 
+const DISLIKES_DISABLED_TEXT = "DISLIKES DISABLED";
+
 let extConfig = {
   disableVoteSubmission: false,
 };
@@ -17,6 +19,8 @@ let storedData = {
   previousState: NEUTRAL_STATE,
 };
 
+let likesDisabledState = true;
+
 function isMobile() {
   return location.hostname == "m.youtube.com";
 }
@@ -57,12 +61,25 @@ function setLikes(likesCount) {
 }
 
 function setDislikes(dislikesCount) {
-  if (isMobile()) {
-    getButtons().children[1].querySelector(".button-renderer-text").innerText =
-      dislikesCount;
-    return;
+  if (!likesDisabledState) {
+    if (isMobile()) {
+      getButtons().children[1].querySelector(
+        ".button-renderer-text"
+      ).innerText = dislikesCount;
+      return;
+    }
+    getButtons().children[1].querySelector("#text").innerText = dislikesCount;
+  } else {
+    cLog("likes count diabled by creator");
+    if (isMobile()) {
+      getButtons().children[1].querySelector(
+        ".button-renderer-text"
+      ).innerText = DISLIKES_DISABLED_TEXT;
+      return;
+    }
+    getButtons().children[1].querySelector("#text").innerText =
+      DISLIKES_DISABLED_TEXT;
   }
-  getButtons().children[1].querySelector("#text").innerText = dislikesCount;
 }
 
 function getLikeCountFromButton() {
@@ -99,9 +116,12 @@ function setState(storedData) {
     function (response) {
       cLog("response from api:");
       cLog(JSON.stringify(response));
+      likesDisabledState =
+        numberFormat(response.dislikes) == 0 &&
+        numberFormat(response.likes) == 0 &&
+        numberFormat(response.viewCount) == 0;
       if (response !== undefined && !("traceId" in response) && !statsSet) {
         processResponse(response, storedData);
-      } else {
       }
     }
   );
@@ -119,11 +139,10 @@ function initExtConfig() {
 }
 
 function initializeDisableVoteSubmission() {
-  getBrowser().storage.sync.get(['disableVoteSubmission'], (res) => {
+  getBrowser().storage.sync.get(["disableVoteSubmission"], (res) => {
     if (res.disableVoteSubmission === undefined) {
-      getBrowser().storage.sync.set({disableVoteSubmission: false});
-    }
-    else {
+      getBrowser().storage.sync.set({ disableVoteSubmission: false });
+    } else {
       extConfig.disableVoteSubmission = res.disableVoteSubmission;
     }
   });
@@ -145,4 +164,5 @@ export {
   extConfig,
   initExtConfig,
   storedData,
+  likesDisabledState,
 };

README.md

@@ -36,7 +36,8 @@ You can learn more at our website at: [returnyoutubedislike.com](https://www.ret
 
 ## API documentation
 
-Third party use of this open API is allowed with the following restrictions:
+Third-party use of this open API is allowed with the following restrictions:
+
 
 - **Attribution**: This project should be clearly attributed with either a link to this repo or a link to [returnyoutubedislike.com](https://returnyoutubedislike.com/).
 - **Rate Limiting**: There are per client rate limits in place of 100 per minute and 10'000 per day. This will return a *429* status code indicating that your application should back off.
@@ -63,6 +64,7 @@ Example to get votes of a given YouTube video ID:
 }
 ```
 
+
 None existing YouTube ID will return status code *404* "Not Found".  
 Wrong formed YouTube ID will return *400* "Bad Request".
 

Website/pages/faq.vue

@@ -41,15 +41,17 @@ export default {
       {
         question: "Why isn't the dislike count updating?",
         answer:
-          "Right now video dislikes are cached and they aren't updated very frequently. It varies on video popularity but can take anywhere between a few hours and a few days days to update.",
+          "Right now video dislikes are cached and they aren't updated very frequently. It varies depending on a video's popularity but can take anywhere between a few hours and a few days days to update.",
       },
       {
         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. The extension then displays the dislike count and ratio on the page. If you dislike or like a video, that is recorded and sent to the database so an accurate dislike count can be extrapolated.",
+          "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. The extension then displays the dislike count and ratio on the page. If you like or dislike a video, that is recorded and sent to the database so an accurate dislike count can be extrapolated.",
       },
       {
-        question: "Can I share my dislke count with you?",
+
+        question:"Can I share my dislike count with you?",
+
         answer:
           "Coming soon. We are looking into using Oauth or a different read only API with a limited scope so creators can share their dislike counts verifiability. ",
       },

package.json

@@ -4,7 +4,7 @@
   "description": "Chrome extension to return youtube dislikes",
   "main": "ryd.content-script.js",
   "scripts": {
-	"start": "echo To build for development, please use \"npm run dev\". To build for production, please use \"npm run build\".",
+    "start": "echo To build for development, please use \"npm run dev\". To build for production, please use \"npm run build\".",
     "dev": "webpack --mode=development \"./Extensions/combined/ryd.content-script.js\" -o \"./Extensions/combined/dist/\" --watch",
     "build": "webpack --mode=production \"./Extensions/combined/ryd.content-script.js\" -o \"./Extensions/combined\"",
     "test": "echo \"Error: no test specified\" && exit 1"