Merge pull request #829 from hyperstown/fix_disappearing_rate_bar

Fix disappearing rate bar

Extensions/combined/src/bar.js

@@ -7,11 +7,16 @@ import {
   isRoundedDesign,
   isShorts,
 } from "./state";
-import { cLog, getColorFromTheme } from "./utils";
+import { cLog, getColorFromTheme, isInViewport } from "./utils";
 
 function createRateBar(likes, dislikes) {
+  let rateBar = document.getElementById("ryd-bar-container");
   if (!isLikesDisabled()) {
-    let rateBar = document.getElementById("ryd-bar-container");
+    // sometimes rate bar is hidden
+    if(rateBar && !isInViewport(rateBar)){
+      rateBar.remove();
+      rateBar = null;
+    }
 
     const widthPx =
       getLikeButton().clientWidth +
@@ -55,11 +60,10 @@ function createRateBar(likes, dislikes) {
           colorLikeStyle = "; background-color: " + getColorFromTheme(true);
           colorDislikeStyle = "; background-color: " + getColorFromTheme(false);
         }
-
+        let actions = isNewDesign() && getButtons().id === "top-level-buttons-computed" 
+          ? getButtons() : document.getElementById("menu-container");
         (
-          document.getElementById(
-            isNewDesign() ? "top-level-buttons-computed" : "menu-container"
-          ) || document.querySelector("ytm-slim-video-action-bar-renderer")
+          actions || document.querySelector("ytm-slim-video-action-bar-renderer")
         ).insertAdjacentHTML(
           "beforeend",
           `
@@ -112,9 +116,8 @@ function createRateBar(likes, dislikes) {
     }
   } else {
     cLog("removing bar");
-    let ratebar = document.getElementById("ryd-bar-container");
-    if (ratebar) {
-      ratebar.parentNode.removeChild(ratebar);
+    if (rateBar) {
+      rateBar.parentNode.removeChild(rateBar);
     }
   }
 }