diff options
| -rw-r--r-- | Extensions/UserScript/Return Youtube Dislike.user.js | 47 | ||||
| -rw-r--r-- | Extensions/combined/src/state.js | 47 |
2 files changed, 90 insertions, 4 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); + } } } }); diff --git a/Extensions/combined/src/state.js b/Extensions/combined/src/state.js index 4ca7d35..1ec2af5 100644 --- a/Extensions/combined/src/state.js +++ b/Extensions/combined/src/state.js @@ -39,6 +39,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 isLikesDisabled() { // return true if the like button's text doesn't contain any number if (isMobile()) { @@ -127,8 +157,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); + } } } |