Merge pull request #395 from thesusian/issue-389

Fixed issue #389

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,
 };