diff options
Diffstat (limited to 'Extensions/combined/src/bar.js')
| -rw-r--r-- | Extensions/combined/src/bar.js | 131 |
1 files changed, 88 insertions, 43 deletions
diff --git a/Extensions/combined/src/bar.js b/Extensions/combined/src/bar.js index c56ab57..55f21ed 100644 --- a/Extensions/combined/src/bar.js +++ b/Extensions/combined/src/bar.js @@ -1,5 +1,11 @@ import { getButtons } from "./buttons"; -import { extConfig, isMobile, isLikesDisabled } from "./state"; +import { + extConfig, + isMobile, + isLikesDisabled, + isNewDesign, + isShorts, +} from "./state"; import { cLog, getColorFromTheme } from "./utils"; function createRateBar(likes, dislikes) { @@ -14,55 +20,94 @@ function createRateBar(likes, dislikes) { const widthPercent = likes + dislikes > 0 ? (likes / (likes + dislikes)) * 100 : 50; - if (!rateBar && !isMobile()) { - let colorLikeStyle = ""; - let colorDislikeStyle = ""; - if (extConfig.coloredBar) { - colorLikeStyle = "; background-color: " + getColorFromTheme(true); - colorDislikeStyle = "; background-color: " + getColorFromTheme(false); - } + var likePercentage = parseFloat(widthPercent.toFixed(1)); + const dislikePercentage = (100 - likePercentage).toLocaleString(); + likePercentage = likePercentage.toLocaleString(); - ( - document.getElementById("menu-container") || - document.querySelector("ytm-slim-video-action-bar-renderer") - ).insertAdjacentHTML( - "beforeend", - ` - <div class="ryd-tooltip" style="width: ${widthPx}px"> - <div class="ryd-tooltip-bar-container"> - <div - id="ryd-bar-container" - style="width: 100%; height: 2px;${colorDislikeStyle}" - > - <div - id="ryd-bar" - style="width: ${widthPercent}%; height: 100%${colorLikeStyle}" - ></div> - </div> - </div> - <tp-yt-paper-tooltip position="top" id="ryd-dislike-tooltip" class="style-scope ytd-sentiment-bar-renderer" role="tooltip" tabindex="-1"> - <!--css-build:shady-->${likes.toLocaleString()} / ${dislikes.toLocaleString()} - </tp-yt-paper-tooltip> - </div> - ` - ); + if (extConfig.showTooltipPercentage) { + var tooltipInnerHTML; + switch (extConfig.tooltipPercentageMode) { + case "dash_dislike": + tooltipInnerHTML = `${likes.toLocaleString()} / ${dislikes.toLocaleString()} - ${dislikePercentage}%`; + break; + case "both": + tooltipInnerHTML = `${likePercentage}% / ${dislikePercentage}%`; + break; + case "only_like": + tooltipInnerHTML = `${likePercentage}%`; + break; + case "only_dislike": + tooltipInnerHTML = `${dislikePercentage}%`; + break; + default: // dash_like + tooltipInnerHTML = `${likes.toLocaleString()} / ${dislikes.toLocaleString()} - ${likePercentage}%`; + } } else { - document.getElementById("ryd-bar-container").style.width = widthPx + "px"; - document.getElementById("ryd-bar").style.width = widthPercent + "%"; - document.querySelector( - "#ryd-dislike-tooltip > #tooltip" - ).innerHTML = `${likes.toLocaleString()} / ${dislikes.toLocaleString()}`; - if (extConfig.coloredBar) { - document.getElementById("ryd-bar-container").style.backgroundColor = - getColorFromTheme(false); - document.getElementById("ryd-bar").style.backgroundColor = - getColorFromTheme(true); + tooltipInnerHTML = `${likes.toLocaleString()} / ${dislikes.toLocaleString()}`; + } + + if (!isShorts()) { + if (!rateBar && !isMobile()) { + let colorLikeStyle = ""; + let colorDislikeStyle = ""; + if (extConfig.coloredBar) { + colorLikeStyle = "; background-color: " + getColorFromTheme(true); + colorDislikeStyle = "; background-color: " + getColorFromTheme(false); + } + + ( + 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${ + isNewDesign() ? "; margin-bottom: -2px" : "" + }"> + <div class="ryd-tooltip-bar-container"> + <div + id="ryd-bar-container" + style="width: 100%; height: 2px;${colorDislikeStyle}" + > + <div + id="ryd-bar" + style="width: ${widthPercent}%; height: 100%${colorLikeStyle}" + ></div> + </div> + </div> + <tp-yt-paper-tooltip position="top" id="ryd-dislike-tooltip" class="style-scope ytd-sentiment-bar-renderer" role="tooltip" tabindex="-1"> + <!--css-build:shady-->${tooltipInnerHTML} + </tp-yt-paper-tooltip> + </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 + "%"; + document.querySelector("#ryd-dislike-tooltip > #tooltip").innerHTML = + tooltipInnerHTML; + if (extConfig.coloredBar) { + document.getElementById("ryd-bar-container").style.backgroundColor = + getColorFromTheme(false); + document.getElementById("ryd-bar").style.backgroundColor = + getColorFromTheme(true); + } } } } else { cLog("removing bar"); let ratebar = document.getElementById("ryd-bar-container"); - if(ratebar) { + if (ratebar) { ratebar.parentNode.removeChild(ratebar); } } |