diff options
Diffstat (limited to 'Extensions/combined/src/bar.js')
| -rw-r--r-- | Extensions/combined/src/bar.js | 22 |
1 files changed, 14 insertions, 8 deletions
diff --git a/Extensions/combined/src/bar.js b/Extensions/combined/src/bar.js index 930f0f5..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; @@ -57,14 +58,12 @@ function createRateBar(likes, dislikes) { ( document.getElementById( - isNewDesign() ? "actions-inner" : "menu-container" + isNewDesign() ? "top-level-buttons-computed" : "menu-container" ) || document.querySelector("ytm-slim-video-action-bar-renderer") ).insertAdjacentHTML( "beforeend", ` - <div class="ryd-tooltip" style="width: ${widthPx}px${ - isNewDesign() ? "; margin-bottom: -2px" : "" - }"> + <div class="ryd-tooltip ryd-tooltip-${isNewDesign() ? "new" : "old"}-design" style="width: ${widthPx}px"> <div class="ryd-tooltip-bar-container"> <div id="ryd-bar-container" @@ -80,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 = |