Merge pull request #567 from cyrildtm/shortButtonColorFix

Fix shorts thumb colors

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

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