diff options
author | Dmitrii Selivanov <selivano.d@gmail.com> | 2022-07-26 00:09:31 +0300 |
---|---|---|
committer | GitHub <noreply@github.com> | 2022-07-26 00:09:31 +0300 |
commit | 58161ac123a3e4d2a277d646bdab7b8a48277c95 (patch) | |
tree | 943f93b6717350152e39ad62c2a0497147d13ac1 | |
parent | b80e480d4105dc7278f4f44c45c15626ea626d1a (diff) | |
parent | 34796a720012600db9d869145dbd46deb9259166 (diff) |
Merge pull request #697 from aaronkerckhoff/ratio-bar-on-new-design
Ratio bar on new design
-rw-r--r-- | Extensions/combined/content-style.css | 2 | ||||
-rw-r--r-- | Extensions/combined/src/bar.js | 16 | ||||
-rw-r--r-- | Extensions/combined/src/state.js | 5 |
3 files changed, 17 insertions, 6 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 6267ce6..745a797 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, 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 + "%"; diff --git a/Extensions/combined/src/state.js b/Extensions/combined/src/state.js index 52f68d4..8b0c519 100644 --- a/Extensions/combined/src/state.js +++ b/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, |