From 1be31bbb0740e9c5a02d684e584f0d4d09831c78 Mon Sep 17 00:00:00 2001
From: Aaron Kerckhoff <aaronkerckhoff@gmail.com>
Date: Fri, 20 May 2022 16:27:05 +0200
Subject: Add ratio display to new design

---
 Extensions/combined/src/bar.js   | 8 ++++----
 Extensions/combined/src/state.js | 5 +++++
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/Extensions/combined/src/bar.js b/Extensions/combined/src/bar.js
index c56ab57..c82291d 100644
--- a/Extensions/combined/src/bar.js
+++ b/Extensions/combined/src/bar.js
@@ -1,5 +1,5 @@
 import { getButtons } from "./buttons";
-import { extConfig, isMobile, isLikesDisabled } from "./state";
+import { extConfig, isMobile, isLikesDisabled, isNewDesign } from "./state";
 import { cLog, getColorFromTheme } from "./utils";
 
 function createRateBar(likes, dislikes) {
@@ -23,12 +23,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-top: -10px; margin-bottom: 15px" : ""}">
             <div class="ryd-tooltip-bar-container">
                <div
                   id="ryd-bar-container"
@@ -62,7 +62,7 @@ function createRateBar(likes, dislikes) {
   } else {
     cLog("removing bar");
     let ratebar = document.getElementById("ryd-bar-container");
-    if(ratebar) {
+    if (ratebar) {
       ratebar.parentNode.removeChild(ratebar);
     }
   }
diff --git a/Extensions/combined/src/state.js b/Extensions/combined/src/state.js
index df9d561..822d9b2 100644
--- a/Extensions/combined/src/state.js
+++ b/Extensions/combined/src/state.js
@@ -39,6 +39,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) {
@@ -330,6 +334,7 @@ export {
   isShorts,
   isVideoDisliked,
   isVideoLiked,
+  isNewDesign,
   getState,
   setState,
   setInitialState,
-- 
cgit v1.2.3


From f60ab778cc210b87988ca8dd15fd070a7316bd84 Mon Sep 17 00:00:00 2001
From: Aaron Kerckhoff <aaronkerckhoff@gmail.com>
Date: Sat, 21 May 2022 00:08:38 +0200
Subject: Improve ratio display on new design

---
 Extensions/combined/src/bar.js | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/Extensions/combined/src/bar.js b/Extensions/combined/src/bar.js
index c82291d..386ff59 100644
--- a/Extensions/combined/src/bar.js
+++ b/Extensions/combined/src/bar.js
@@ -28,7 +28,7 @@ function createRateBar(likes, dislikes) {
       ).insertAdjacentHTML(
         "beforeend",
         `
-            <div class="ryd-tooltip" style="width: ${widthPx}px${isNewDesign() ? "; margin-top: -10px; margin-bottom: 15px" : ""}">
+            <div class="ryd-tooltip" style="width: ${widthPx}px${isNewDesign() ? "; margin-bottom: -2px" : ""}">
             <div class="ryd-tooltip-bar-container">
                <div
                   id="ryd-bar-container"
@@ -46,6 +46,13 @@ function createRateBar(likes, dislikes) {
             </div>
     `
       );
+
+      // Add border between info and comments
+      if (isNewDesign()) {
+        let descriptionAndActionsElement = document.getElementById("description-and-actions");
+        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 + "%";
-- 
cgit v1.2.3


From ea5617950f68c647cf2f0ec60270b8b4d6ddc7f4 Mon Sep 17 00:00:00 2001
From: Aaron Kerckhoff <aaronkerckhoff@gmail.com>
Date: Sat, 21 May 2022 00:08:38 +0200
Subject: Improve ratio display on new design

---
 Extensions/combined/content-style.css | 2 +-
 Extensions/combined/src/bar.js        | 9 ++++++++-
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/Extensions/combined/content-style.css b/Extensions/combined/content-style.css
index e2e5fa2..d8da7db 100644
--- a/Extensions/combined/content-style.css
+++ b/Extensions/combined/content-style.css
@@ -41,6 +41,6 @@
   height: 2px;
   position: absolute;
   padding-top: 6px;
-  padding-bottom: 28px;
+  padding-bottom: 12px;
   top: -6px;
 }
diff --git a/Extensions/combined/src/bar.js b/Extensions/combined/src/bar.js
index c82291d..386ff59 100644
--- a/Extensions/combined/src/bar.js
+++ b/Extensions/combined/src/bar.js
@@ -28,7 +28,7 @@ function createRateBar(likes, dislikes) {
       ).insertAdjacentHTML(
         "beforeend",
         `
-            <div class="ryd-tooltip" style="width: ${widthPx}px${isNewDesign() ? "; margin-top: -10px; margin-bottom: 15px" : ""}">
+            <div class="ryd-tooltip" style="width: ${widthPx}px${isNewDesign() ? "; margin-bottom: -2px" : ""}">
             <div class="ryd-tooltip-bar-container">
                <div
                   id="ryd-bar-container"
@@ -46,6 +46,13 @@ function createRateBar(likes, dislikes) {
             </div>
     `
       );
+
+      // Add border between info and comments
+      if (isNewDesign()) {
+        let descriptionAndActionsElement = document.getElementById("description-and-actions");
+        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 + "%";
-- 
cgit v1.2.3