From f752d02e5166dced74f37f06cf580c6d3c7704c3 Mon Sep 17 00:00:00 2001 From: Aneimytis <5927301+cyrildtm@users.noreply.github.com> Date: Sun, 24 Apr 2022 15:57:19 -0500 Subject: [PATCH 1/3] (extension) fix shorts thumb colors fix #565 --- Extensions/combined/src/state.js | 47 ++++++++++++++++++++++++++++++-- 1 file changed, 45 insertions(+), 2 deletions(-) diff --git a/Extensions/combined/src/state.js b/Extensions/combined/src/state.js index 6a85e8c..5f8e8ca 100644 --- a/Extensions/combined/src/state.js +++ b/Extensions/combined/src/state.js @@ -42,6 +42,36 @@ function isShorts() { return location.pathname.startsWith("/shorts"); } +let mutationObserver = new Object(); + +if (isShorts() && mutationObserver.exists !== true) { + cLog('initializing mutation observer') + mutationObserver.options = { + childList: false, + attributes: true, + subtree: false + }; + mutationObserver.exists = true; + mutationObserver.observer = new MutationObserver( function(mutationList, observer) { + mutationList.forEach( (mutation) => { + if (mutation.type === 'attributes' && + mutation.target.nodeName === 'TP-YT-PAPER-BUTTON' && + mutation.target.id === 'button') { + // cLog('Short thumb button status changed'); + if (mutation.target.getAttribute('aria-pressed') === 'true') { + mutation.target.style.color = + (mutation.target.parentElement.parentElement.id === 'like-button') ? + getColorFromTheme(true) : getColorFromTheme(false); + } else { + mutation.target.style.color = 'unset'; + } + return; + } + cLog('unexpected mutation observer event: ' + mutation.target + mutation.type); + }); + }); +} + function isVideoLiked() { if (isMobile()) { return ( @@ -119,8 +149,21 @@ function processResponse(response, storedData) { storedData.likes = getLikeCountFromButton() || parseInt(response.likes); createRateBar(storedData.likes, storedData.dislikes); if (extConfig.coloredThumbs === true) { - getLikeButton().style.color = getColorFromTheme(true); - getDislikeButton().style.color = getColorFromTheme(false); + if (isShorts()) { // for shorts, leave deactived buttons in default color + let shortLikeButton = getLikeButton().querySelector('tp-yt-paper-button#button'); + let shortDislikeButton = getDislikeButton().querySelector('tp-yt-paper-button#button'); + if (shortLikeButton.getAttribute('aria-pressed') === 'true') { + shortLikeButton.style.color = getColorFromTheme(true); + } + if (shortDislikeButton.getAttribute('aria-pressed') === 'true') { + shortDislikeButton.style.color = getColorFromTheme(false); + } + mutationObserver.observer.observe(shortLikeButton, mutationObserver.options); + mutationObserver.observer.observe(shortDislikeButton, mutationObserver.options); + } else { + getLikeButton().style.color = getColorFromTheme(true); + getDislikeButton().style.color = getColorFromTheme(false); + } } } From 605d343dc4f3f6f99338eeec56f23f209fbbaa84 Mon Sep 17 00:00:00 2001 From: Aneimytis <5927301+cyrildtm@users.noreply.github.com> Date: Sun, 24 Apr 2022 16:02:17 -0500 Subject: [PATCH 2/3] cherry pick #540 Userscript custom colors using user options #539 Userscript user options introduce user options to userscript. Using existing options available in extension for now, plus showing update popup. Part of #539 userscript custom number formats using user options #539 resolves #520 --- .../UserScript/Return Youtube Dislike.user.js | 99 ++++++++++++++++++- 1 file changed, 95 insertions(+), 4 deletions(-) diff --git a/Extensions/UserScript/Return Youtube Dislike.user.js b/Extensions/UserScript/Return Youtube Dislike.user.js index 9961734..af4b3c5 100644 --- a/Extensions/UserScript/Return Youtube Dislike.user.js +++ b/Extensions/UserScript/Return Youtube Dislike.user.js @@ -22,6 +22,20 @@ // @grant GM_addStyle // @run-at document-end // ==/UserScript== + +const extConfig = { +// BEGIN USER OPTIONS +// You may change the following variables to allowed values listed in the corresponding brackets (* means default). Keep the style and keywords intact. + showUpdatePopup: false, // [true, false*] Show a popup tab after extension update (See what's new) + disableVoteSubmission: false, // [true, false*] Disable like/dislike submission (Stops counting your likes and dislikes) + coloredThumbs: false, // [true, false*] Colorize thumbs (Use custom colors for thumb icons) + coloredBar: false, // [true, false*] Colorize ratio bar (Use custom colors for ratio bar) + 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) +// END USER OPTIONS +}; + const LIKED_STATE = "LIKED_STATE"; const DISLIKED_STATE = "DISLIKED_STATE"; const NEUTRAL_STATE = "NEUTRAL_STATE"; @@ -205,6 +219,13 @@ function createRateBar(likes, dislikes) { 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); + } + document.getElementById("menu-container").insertAdjacentHTML( "beforeend", ` @@ -212,11 +233,11 @@ function createRateBar(likes, dislikes) {
@@ -236,6 +257,13 @@ function createRateBar(likes, dislikes) { document.querySelector( "#ryd-dislike-tooltip > #tooltip" ).innerHTML = `${likes.toLocaleString()} / ${dislikes.toLocaleString()}`; + + if (extConfig.coloredBar) { + document.getElementById("return-youtube-dislike-bar-container").style.backgroundColor = + getColorFromTheme(false); + document.getElementById("return-youtube-dislike-bar").style.backgroundColor = + getColorFromTheme(true); + } } } @@ -254,6 +282,10 @@ function setState() { dislikesvalue = dislikes; setDislikes(numberFormat(dislikes)); createRateBar(likes, dislikes); + if (extConfig.coloredThumbs === true) { + getLikeButton().style.color = getColorFromTheme(true); + getDislikeButton().style.color = getColorFromTheme(false); + } } }); }); @@ -347,14 +379,73 @@ function numberFormat(numberState) { ?.getAttribute("href") )?.searchParams?.get("locale"); } catch {} + + let numberDisplay; + if (extConfig.numberDisplayRoundDown === false) { + numberDisplay = numberState; + } else { + numberDisplay = roundDown(numberState); + } + return getNumberFormatter(extConfig.numberDisplayFormat).format( + numberDisplay + ); +} + +function getNumberFormatter(optionSelect) { + let formatterNotation; + let formatterCompactDisplay; + + switch (optionSelect) { + case "compactLong": + formatterNotation = "compact"; + formatterCompactDisplay = "long"; + break; + case "standard": + formatterNotation = "standard"; + formatterCompactDisplay = "short"; + break; + case "compactShort": + default: + formatterNotation = "compact"; + formatterCompactDisplay = "short"; + } + const formatter = Intl.NumberFormat( document.documentElement.lang || userLocales || navigator.language, { - notation: "compact", + notation: formatterNotation, + compactDisplay: formatterCompactDisplay, } ); + return formatter; +} - return formatter.format(roundDown(numberState)); +function getColorFromTheme(voteIsLike) { + let colorString; + switch (extConfig.colorTheme) { + case "accessible": + if (voteIsLike === true) { + colorString = "dodgerblue"; + } else { + colorString = "gold"; + } + break; + case "neon": + if (voteIsLike === true) { + colorString = "aqua"; + } else { + colorString = "magenta"; + } + break; + case "classic": + default: + if (voteIsLike === true) { + colorString = "lime"; + } else { + colorString = "red"; + } + } + return colorString; } function setEventListeners(evt) { From abf5a42548d4346e5b6090252fd1ae3e71a3f846 Mon Sep 17 00:00:00 2001 From: Aneimytis <5927301+cyrildtm@users.noreply.github.com> Date: Sun, 24 Apr 2022 16:13:45 -0500 Subject: [PATCH 3/3] (userscript) fix shorts thumb colors related: #540 --- .../UserScript/Return Youtube Dislike.user.js | 47 ++++++++++++++++++- 1 file changed, 45 insertions(+), 2 deletions(-) diff --git a/Extensions/UserScript/Return Youtube Dislike.user.js b/Extensions/UserScript/Return Youtube Dislike.user.js index af4b3c5..8ee7dcf 100644 --- a/Extensions/UserScript/Return Youtube Dislike.user.js +++ b/Extensions/UserScript/Return Youtube Dislike.user.js @@ -96,6 +96,36 @@ function getDislikeButton() { return getButtons().children[1]; } +let mutationObserver = new Object(); + +if (isShorts() && mutationObserver.exists !== true) { + cLog('initializing mutation observer') + mutationObserver.options = { + childList: false, + attributes: true, + subtree: false + }; + mutationObserver.exists = true; + mutationObserver.observer = new MutationObserver( function(mutationList, observer) { + mutationList.forEach( (mutation) => { + if (mutation.type === 'attributes' && + mutation.target.nodeName === 'TP-YT-PAPER-BUTTON' && + mutation.target.id === 'button') { + cLog('Short thumb button status changed'); + if (mutation.target.getAttribute('aria-pressed') === 'true') { + mutation.target.style.color = + (mutation.target.parentElement.parentElement.id === 'like-button') ? + getColorFromTheme(true) : getColorFromTheme(false); + } else { + mutation.target.style.color = 'unset'; + } + return; + } + cLog('unexpected mutation observer event: ' + mutation.target + mutation.type); + }); + }); +} + function isVideoLiked() { if (isMobile) { return ( @@ -283,8 +313,21 @@ function setState() { setDislikes(numberFormat(dislikes)); createRateBar(likes, dislikes); if (extConfig.coloredThumbs === true) { - getLikeButton().style.color = getColorFromTheme(true); - getDislikeButton().style.color = getColorFromTheme(false); + if (isShorts()) { // for shorts, leave deactived buttons in default color + let shortLikeButton = getLikeButton().querySelector('tp-yt-paper-button#button'); + let shortDislikeButton = getDislikeButton().querySelector('tp-yt-paper-button#button'); + if (shortLikeButton.getAttribute('aria-pressed') === 'true') { + shortLikeButton.style.color = getColorFromTheme(true); + } + if (shortDislikeButton.getAttribute('aria-pressed') === 'true') { + shortDislikeButton.style.color = getColorFromTheme(false); + } + mutationObserver.observer.observe(shortLikeButton, mutationObserver.options); + mutationObserver.observer.observe(shortDislikeButton, mutationObserver.options); + } else { + getLikeButton().style.color = getColorFromTheme(true); + getDislikeButton().style.color = getColorFromTheme(false); + } } } });