diff options
Diffstat (limited to 'Extensions/UserScript/Return Youtube Dislike.user.js')
-rw-r--r-- | Extensions/UserScript/Return Youtube Dislike.user.js | 89 |
1 files changed, 67 insertions, 22 deletions
diff --git a/Extensions/UserScript/Return Youtube Dislike.user.js b/Extensions/UserScript/Return Youtube Dislike.user.js index 476561b..453c56e 100644 --- a/Extensions/UserScript/Return Youtube Dislike.user.js +++ b/Extensions/UserScript/Return Youtube Dislike.user.js @@ -33,6 +33,7 @@ const extConfig = { colorTheme: "classic", // [classic*, accessible, neon] Color theme (red/green, blue/yellow, pink/cyan) numberDisplayFormat: "compactShort", // [compactShort*, compactLong, standard] Number format (For non-English locale users, you may be able to improve appearance with a different option. Please file a feature request if your locale is not covered) numberDisplayRoundDown: true, // [true*, false] Round down numbers (Show rounded down numbers) + tooltipPercentageMode: "none", // [none*, dash_like, dash_dislike, both, only_like, only_dislike] Mode of showing percentage in like/dislike bar tooltip. numberDisplayReformatLikes: false, // [true, false*] Re-format like numbers (Make likes and dislikes format consistent) // END USER OPTIONS }; @@ -203,10 +204,10 @@ function getLikeCountFromButton() { if (isShorts()) { //Youtube Shorts don't work with this query. It's not nessecary; we can skip it and still see the results. //It should be possible to fix this function, but it's not critical to showing the dislike count. - return 0; + return false; } let likesStr = getLikeButton() - .querySelector("button") + .querySelector("yt-formatted-string#text") .getAttribute("aria-label") .replace(/\D/g, ""); return likesStr.length > 0 ? parseInt(likesStr) : false; @@ -262,6 +263,32 @@ function createRateBar(likes, dislikes) { const widthPercent = likes + dislikes > 0 ? (likes / (likes + dislikes)) * 100 : 50; + var likePercentage = parseFloat(widthPercent.toFixed(1)); + const dislikePercentage = (100 - likePercentage).toLocaleString(); + likePercentage = likePercentage.toLocaleString(); + + var tooltipInnerHTML; + switch (extConfig.tooltipPercentageMode) { + case "dash_like": + tooltipInnerHTML = `${likes.toLocaleString()} / ${dislikes.toLocaleString()} - ${likePercentage}%` + break; + 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: + tooltipInnerHTML = `${likes.toLocaleString()} / ${dislikes.toLocaleString()}` + } + + if (!rateBar && !isMobile) { let colorLikeStyle = ""; let colorDislikeStyle = ""; @@ -269,7 +296,7 @@ function createRateBar(likes, dislikes) { colorLikeStyle = "; background-color: " + getColorFromTheme(true); colorDislikeStyle = "; background-color: " + getColorFromTheme(false); } - + document.getElementById("menu-container").insertAdjacentHTML( "beforeend", ` @@ -286,7 +313,7 @@ function createRateBar(likes, dislikes) { </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()} + <!--css-build:shady-->${tooltipInnerHTML} </tp-yt-paper-tooltip> </div> ` @@ -300,8 +327,8 @@ function createRateBar(likes, dislikes) { document.querySelector( "#ryd-dislike-tooltip > #tooltip" - ).innerHTML = `${likes.toLocaleString()} / ${dislikes.toLocaleString()}`; - + ).innerHTML = tooltipInnerHTML; + if (extConfig.coloredBar) { document.getElementById("return-youtube-dislike-bar-container").style.backgroundColor = getColorFromTheme(false); @@ -372,6 +399,12 @@ function likeClicked() { createRateBar(likesvalue, dislikesvalue); previousState = 1; } + if (extConfig.numberDisplayReformatLikes === true) { + const nativeLikes = getLikeCountFromButton(); + if (nativeLikes !== false) { + setLikes(numberFormat(nativeLikes)); + } + } } } @@ -393,6 +426,12 @@ function dislikeClicked() { setDislikes(numberFormat(dislikesvalue)); createRateBar(likesvalue, dislikesvalue); previousState = 2; + if (extConfig.numberDisplayReformatLikes === true) { + const nativeLikes = getLikeCountFromButton(); + if (nativeLikes !== false) { + setLikes(numberFormat(nativeLikes)); + } + } } } } @@ -434,32 +473,38 @@ function roundDown(num) { } function numberFormat(numberState) { - let userLocales; - try { - userLocales = new URL( - Array.from(document.querySelectorAll("head > link[rel='search']")) - ?.find((n) => n?.getAttribute("href")?.includes("?locale=")) - ?.getAttribute("href") - )?.searchParams?.get("locale"); - } catch { - userLocales = document.documentElement.lang; - } - let numberDisplay; if (extConfig.numberDisplayRoundDown === false) { numberDisplay = numberState; } else { numberDisplay = roundDown(numberState); } - return getNumberFormatter(extConfig.numberDisplayFormat, userLocales).format( + return getNumberFormatter(extConfig.numberDisplayFormat).format( numberDisplay ); } -function getNumberFormatter(optionSelect, userLocales) { +function getNumberFormatter(optionSelect) { + let userLocales; + if (document.documentElement.lang) { + userLocales = document.documentElement.lang; + } else if (navigator.language) { + userLocales = navigator.language; + } else { + try { + userLocales = new URL( + Array.from(document.querySelectorAll("head > link[rel='search']")) + ?.find((n) => n?.getAttribute("href")?.includes("?locale=")) + ?.getAttribute("href") + )?.searchParams?.get("locale"); + } catch { + cLog('Cannot find browser locale. Use en as default for number formatting.'); + userLocales = 'en'; + } + } + let formatterNotation; let formatterCompactDisplay; - switch (optionSelect) { case "compactLong": formatterNotation = "compact"; @@ -476,7 +521,7 @@ function getNumberFormatter(optionSelect, userLocales) { } const formatter = Intl.NumberFormat( - document.documentElement.lang || userLocales || navigator.language, + userLocales, { notation: formatterNotation, compactDisplay: formatterCompactDisplay, @@ -516,7 +561,7 @@ function getColorFromTheme(voteIsLike) { function setEventListeners(evt) { let jsInitChecktimer; - function checkForJS_Finish(check) { + function checkForJS_Finish() { console.log(); if (isShorts() || (getButtons()?.offsetParent && isVideoLoaded())) { const buttons = getButtons(); |