diff options
author | ErykDarnowski <github@erykdarnowski.pl> | 2022-10-09 02:12:22 +0300 |
---|---|---|
committer | ErykDarnowski <github@erykdarnowski.pl> | 2022-10-09 02:12:22 +0300 |
commit | bf74407f8a140733e5a81cc979cd04e8a956d7ec (patch) | |
tree | 105c9ff013069e7f34c1e6f7281f28dc8d56b142 /Extensions | |
parent | de1831f2c74032f8ccfe42a8eb174088363e011f (diff) |
Fix like/dislike ratio bar offset
Closes [#733](https://github.com/Anarios/return-youtube-dislike/issues/733)
Diffstat (limited to 'Extensions')
-rw-r--r-- | Extensions/combined/src/bar.js | 16 | ||||
-rw-r--r-- | Extensions/combined/src/state.js | 21 |
2 files changed, 23 insertions, 14 deletions
diff --git a/Extensions/combined/src/bar.js b/Extensions/combined/src/bar.js index 930f0f5..4411703 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; @@ -80,15 +81,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 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 0876e10..42dde2b 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() { @@ -137,7 +139,7 @@ function setLikes(likesCount) { } function setDislikes(dislikesCount) { - getDislikeTextContainer()?.removeAttribute('is-empty'); + getDislikeTextContainer()?.removeAttribute("is-empty"); if (!isLikesDisabled()) { if (isMobile()) { getButtons().children[1].querySelector( @@ -166,15 +168,13 @@ function getLikeCountFromButton() { return false; } let likesStr = getLikeButton() - .querySelector("yt-formatted-string#text") - .getAttribute("aria-label") - .replace(/\D/g, ""); + .querySelector("yt-formatted-string#text") + .getAttribute("aria-label") + .replace(/\D/g, ""); return likesStr.length > 0 ? parseInt(likesStr) : false; - } - catch { + } catch { return false; } - } function processResponse(response, storedData) { @@ -362,6 +362,7 @@ export { isVideoDisliked, isVideoLiked, isNewDesign, + isRoundedDesign, getState, setState, setInitialState, |