Merge pull request #697 from aaronkerckhoff/ratio-bar-on-new-design

Ratio bar on new design

Extensions/combined/content-style.css

@@ -41,6 +41,6 @@
   height: 2px;
   position: absolute;
   padding-top: 6px;
-  padding-bottom: 28px;
+  padding-bottom: 12px;
   top: -6px;
 }

Extensions/combined/src/bar.js

@@ -1,5 +1,5 @@
 import { getButtons } from "./buttons";
-import { extConfig, isMobile, isLikesDisabled, isShorts } from "./state";
+import { extConfig, isMobile, isLikesDisabled, isNewDesign, isShorts } from "./state";
 import { cLog, getColorFromTheme } from "./utils";
 
 function createRateBar(likes, dislikes) {
@@ -18,6 +18,7 @@ function createRateBar(likes, dislikes) {
     const dislikePercentage = (100 - likePercentage).toLocaleString();
     likePercentage = likePercentage.toLocaleString();
 
+
     if (extConfig.showTooltipPercentage) {
       var tooltipInnerHTML;
       switch (extConfig.tooltipPercentageMode) {        
@@ -38,8 +39,7 @@ function createRateBar(likes, dislikes) {
       }
     } else {
       tooltipInnerHTML = `${likes.toLocaleString()} / ${dislikes.toLocaleString()}`
-    }
-    
+    }  
     
     if (!isShorts()) {
       if (!rateBar && !isMobile()) {
@@ -51,12 +51,12 @@ function createRateBar(likes, dislikes) {
         }
 
         (
-          document.getElementById("menu-container") ||
+         document.getElementById(isNewDesign() ? "actions-inner" : "menu-container") ||
           document.querySelector("ytm-slim-video-action-bar-renderer")
         ).insertAdjacentHTML(
           "beforeend",
           `
-              <div class="ryd-tooltip" style="width: ${widthPx}px">
+              <div class="ryd-tooltip" style="width: ${widthPx}px${isNewDesign() ? "; margin-bottom: -2px" : ""}">
               <div class="ryd-tooltip-bar-container">
                 <div
                     id="ryd-bar-container"
@@ -74,6 +74,12 @@ function createRateBar(likes, dislikes) {
               </div>
       `
         );
+        
+      // Add border between info and comments
+      if (isNewDesign()) {
+        let descriptionAndActionsElement = document.getElementById("top-row");
+        descriptionAndActionsElement.style.borderBottom = "1px solid var(--yt-spec-10-percent-layer)";
+        descriptionAndActionsElement.style.paddingBottom = "10px";
       } else {
         document.getElementById("ryd-bar-container").style.width = widthPx + "px";
         document.getElementById("ryd-bar").style.width = widthPercent + "%";

Extensions/combined/src/state.js

@@ -42,6 +42,10 @@ function isShorts() {
   return location.pathname.startsWith("/shorts");
 }
 
+function isNewDesign() {
+  return document.getElementById("comment-teaser") !== null;
+}
+
 let mutationObserver = new Object();
 
 if (isShorts() && mutationObserver.exists !== true) {
@@ -356,6 +360,7 @@ export {
   isShorts,
   isVideoDisliked,
   isVideoLiked,
+  isNewDesign,
   getState,
   setState,
   setInitialState,