Merge pull request #771 from ErykDarnowski/fix-like-dislike-bar-offset

Fix like/dislike ratio bar offset

2 files changed, 21 insertions, 10 deletions

diff --git a/Extensions/combined/src/bar.js b/Extensions/combined/src/bar.js
index ebf9ad8..fea42a9 100644
--- a/Extensions/combined/src/bar.js
+++ b/Extensions/combined/src/bar.js
@@ -1,9 +1,10 @@
-import { getButtons, getDislikeButton, getLikeButton } from './buttons';
+import { getButtons, getDislikeButton, getLikeButton } from "./buttons";
 import {
   extConfig,
   isMobile,
   isLikesDisabled,
   isNewDesign,
+  isRoundedDesign,
   isShorts,
 } from "./state";
 import { cLog, getColorFromTheme } from "./utils";
@@ -15,7 +16,7 @@ function createRateBar(likes, dislikes) {
     const widthPx =
       getLikeButton().clientWidth +
       getDislikeButton().clientWidth +
-      8;
+      (isRoundedDesign() ? 0 : 8);
 
     const widthPercent =
       likes + dislikes > 0 ? (likes / (likes + dislikes)) * 100 : 50;
@@ -78,15 +79,22 @@ function createRateBar(likes, dislikes) {
                 <!--css-build:shady-->${tooltipInnerHTML}
               </tp-yt-paper-tooltip>
               </div>
-      `
+      		`
         );
 
-        // Add border between info and comments
         if (isNewDesign()) {
+          // Add border between info and comments
           let descriptionAndActionsElement = document.getElementById("top-row");
           descriptionAndActionsElement.style.borderBottom =
             "1px solid var(--yt-spec-10-percent-layer)";
           descriptionAndActionsElement.style.paddingBottom = "10px";
+
+          // Fix like/dislike ratio bar offset in new UI
+          document.getElementById("actions-inner").style.width = "revert";
+          if (isRoundedDesign()) {
+            document.getElementById("actions").style.flexDirection =
+              "row-reverse";
+          }
         }
       } else {
         document.getElementById("ryd-bar-container").style.width =
diff --git a/Extensions/combined/src/state.js b/Extensions/combined/src/state.js
index 444a203..58c3e29 100644
--- a/Extensions/combined/src/state.js
+++ b/Extensions/combined/src/state.js
@@ -51,6 +51,10 @@ function isNewDesign() {
   return document.getElementById("comment-teaser") !== null;
 }
 
+function isRoundedDesign() {
+  return document.getElementById("segmented-like-button") !== null;
+}
+
 let mutationObserver = new Object();
 
 if (isShorts() && mutationObserver.exists !== true) {
@@ -96,9 +100,7 @@ function isLikesDisabled() {
       getButtons().children[0].querySelector(".button-renderer-text").innerText
     );
   }
-  return /^\D*$/.test(
-    getButtons().children[0].innerText
-  );
+  return /^\D*$/.test(getButtons().children[0].innerText);
 }
 
 function isVideoLiked() {
@@ -139,6 +141,7 @@ function setLikes(likesCount) {
 
 function setDislikes(dislikesCount) {
   cLog(`SET dislikes ${dislikesCount}`)
+  getDislikeTextContainer()?.removeAttribute("is-empty");
   getDislikeTextContainer()?.removeAttribute('is-empty');
   if (!isLikesDisabled()) {
     if (isMobile()) {
@@ -167,6 +170,7 @@ function getLikeCountFromButton() {
       //It should be possible to fix this function, but it's not critical to showing the dislike count.
       return false;
     }
+
     let likeButton = getLikeButton()
     .querySelector("yt-formatted-string#text") ??
     getLikeButton().querySelector("button");
@@ -174,11 +178,9 @@ function getLikeCountFromButton() {
     let likesStr = likeButton.getAttribute("aria-label")
     .replace(/\D/g, "");
     return likesStr.length > 0 ? parseInt(likesStr) : false;
-  }
-  catch {
+  } catch {
     return false;
   }
-
 }
 
 function processResponse(response, storedData) {
@@ -366,6 +368,7 @@ export {
   isVideoDisliked,
   isVideoLiked,
   isNewDesign,
+  isRoundedDesign,
   getState,
   setState,
   setInitialState,