(extension) fix shorts thumb colors

fix #565

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