(userscript) fix shorts thumb colors

related: #540

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