Merge pull request #527 from CreaZyp154/display-error-when-api-down

Display 'temporarily unavailable' when the API can't be reached

5 files changed, 52 insertions, 17 deletions

diff --git a/Extensions/combined/_locales/en/messages.json b/Extensions/combined/_locales/en/messages.json
index 8493b52..f937645 100644
--- a/Extensions/combined/_locales/en/messages.json
+++ b/Extensions/combined/_locales/en/messages.json
@@ -26,9 +26,15 @@
     "textSettings": {
         "message": "Disable like/dislike submission"
     },
+    "textLikesDisabled": {
+        "message": "disabled by owner"
+    },
     "textSettingsHover": {
         "message": "Stops counting your likes and dislikes."
     },
+    "textTempUnavailable": {
+        "message": "temporarily unavailable"
+    },
     "textUpdate": {
         "message": "update to"
     },
diff --git a/Extensions/combined/_locales/fr/messages.json b/Extensions/combined/_locales/fr/messages.json
index 78878f0..1fc16cb 100644
--- a/Extensions/combined/_locales/fr/messages.json
+++ b/Extensions/combined/_locales/fr/messages.json
@@ -23,12 +23,18 @@
     "legendSettings": {
         "message": "Paramètres"
     },
+    "textLikesDisabled": {
+        "message": "Désactivé par le créateur"
+    },
     "textSettings": {
         "message": "Désactiver l'envoi des likes/dislikes"
     },
     "textSettingsHover": {
         "message": "Arrête de compter les likes et les dislikes mis sur les vidéos."
     },
+    "textTempUnavailable": {
+        "message": "temporairement indisponible"
+    },
     "textUpdate": {
         "message": "mettre à jour vers"
     }
diff --git a/Extensions/combined/src/bar.js b/Extensions/combined/src/bar.js
index dbd4c68..c56ab57 100644
--- a/Extensions/combined/src/bar.js
+++ b/Extensions/combined/src/bar.js
@@ -1,8 +1,9 @@
 import { getButtons } from "./buttons";
-import { likesDisabledState, extConfig, isMobile } from "./state";
+import { extConfig, isMobile, isLikesDisabled } from "./state";
 import { cLog, getColorFromTheme } from "./utils";
+
 function createRateBar(likes, dislikes) {
-  if (!likesDisabledState) {
+  if (!isLikesDisabled()) {
     let rateBar = document.getElementById("ryd-bar-container");
 
     const widthPx =
@@ -61,7 +62,9 @@ function createRateBar(likes, dislikes) {
   } else {
     cLog("removing bar");
     let ratebar = document.getElementById("ryd-bar-container");
-    ratebar.parentNode.removeChild(ratebar);
+    if(ratebar) {
+      ratebar.parentNode.removeChild(ratebar);
+    }
   }
 }
 
diff --git a/Extensions/combined/src/state.js b/Extensions/combined/src/state.js
index 6a85e8c..4ca7d35 100644
--- a/Extensions/combined/src/state.js
+++ b/Extensions/combined/src/state.js
@@ -8,6 +8,7 @@ import {
   getColorFromTheme,
 } from "./utils";
 import { sendVideoIds } from "./events";
+import { localize } from "./utils";
 
 //TODO: Do not duplicate here and in ryd.background.js
 const apiUrl = "https://returnyoutubedislikeapi.com";
@@ -15,8 +16,6 @@ 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,
   coloredThumbs: false,
@@ -32,8 +31,6 @@ let storedData = {
   previousState: NEUTRAL_STATE,
 };
 
-let likesDisabledState = true;
-
 function isMobile() {
   return location.hostname == "m.youtube.com";
 }
@@ -42,6 +39,16 @@ function isShorts() {
   return location.pathname.startsWith("/shorts");
 }
 
+function isLikesDisabled() {
+  // return true if the like button's text doesn't contain any number
+  if (isMobile()) {
+    return /^\D*$/.test(
+      getButtons().children[0].querySelector(".button-renderer-text").innerText
+    );
+  }
+  return /^\D*$/.test(getButtons().children[0].querySelector("#text").innerText);
+}
+
 function isVideoLiked() {
   if (isMobile()) {
     return (
@@ -78,7 +85,7 @@ function setLikes(likesCount) {
 }
 
 function setDislikes(dislikesCount) {
-  if (!likesDisabledState) {
+  if (!isLikesDisabled()) {
     if (isMobile()) {
       getButtons().children[1].querySelector(
         ".button-renderer-text"
@@ -91,11 +98,12 @@ function setDislikes(dislikesCount) {
     if (isMobile()) {
       getButtons().children[1].querySelector(
         ".button-renderer-text"
-      ).innerText = DISLIKES_DISABLED_TEXT;
+      ).innerText = localize("TextLikesDisabled");
       return;
     }
-    getButtons().children[1].querySelector("#text").innerText =
-      DISLIKES_DISABLED_TEXT;
+    getButtons().children[1].querySelector("#text").innerText = localize(
+      "TextLikesDisabled"
+    );
   }
 }
 
@@ -124,6 +132,13 @@ function processResponse(response, storedData) {
   }
 }
 
+// Tells the user if the API is down
+function displayError(error) {
+  getButtons().children[1].querySelector("#text").innerText = localize(
+    "textTempUnavailable"
+  );
+}
+
 async function setState(storedData) {
   storedData.previousState = isVideoDisliked()
     ? DISLIKED_STATE
@@ -144,14 +159,14 @@ async function setState(storedData) {
       },
     }
   )
+    .then((response) => {
+      if (!response.ok) displayError(response.error);
+      return response;
+    })
     .then((response) => response.json())
-    .catch();
+    .catch(displayError);
   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);
   }
@@ -250,5 +265,5 @@ export {
   extConfig,
   initExtConfig,
   storedData,
-  likesDisabledState,
+  isLikesDisabled
 };
diff --git a/Extensions/combined/src/utils.js b/Extensions/combined/src/utils.js
index 7cedc21..b1acc54 100644
--- a/Extensions/combined/src/utils.js
+++ b/Extensions/combined/src/utils.js
@@ -29,6 +29,10 @@ function numberFormat(numberState) {
   );
 }
 
+function localize(localeString) {
+  return chrome.i18n.getMessage(localeString);
+}
+
 function getNumberFormatter(optionSelect) {
   let formatterNotation;
   let formatterCompactDisplay;
@@ -151,4 +155,5 @@ export {
   isVideoLoaded,
   cLog,
   getColorFromTheme,
+  localize,
 };