Merge pull request #567 from cyrildtm/shortButtonColorFix

Fix shorts thumb colors
This commit is contained in:
Dmitrii Selivanov
2022-04-26 18:55:11 +02:00
committed by GitHub
2 changed files with 90 additions and 4 deletions

View File

@@ -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);
}
}
}
});

View File

@@ -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);
}
}
}