From c87ecb82c387cc5b55b5d35bc987240df7fffa63 Mon Sep 17 00:00:00 2001
From: Grason Chan <grasonchan@gmail.com>
Date: Sat, 30 Oct 2021 19:24:50 +0800
Subject: [PATCH] fix(Turntable): in the "Connect to a device" scene,
 automatically update fad-heart state when toggle the heart

---
 Turntable/rotateTurntable.js | 39 +++++++++++++++++++++++++-----------
 1 file changed, 27 insertions(+), 12 deletions(-)

diff --git a/Turntable/rotateTurntable.js b/Turntable/rotateTurntable.js
index d234889..dcadd90 100644
--- a/Turntable/rotateTurntable.js
+++ b/Turntable/rotateTurntable.js
@@ -82,7 +82,7 @@ window.addEventListener("load", rotateTurntable = () => {
     }
   }
 
-  function handleFadHeart(fromEvent) {
+  function handleFadHeart() {
     const isFadHeartContainer = document.querySelector(".fad-heart-container");
 
     const stateItem = SpicetifyOrigin._state.item;
@@ -92,21 +92,15 @@ window.addEventListener("load", rotateTurntable = () => {
       return;
     }
 
-    const fadFg = document.querySelector("#fad-foreground");
+    if (!isFadHeartContainer) document.querySelector("#fad-foreground")?.appendChild(fadHeartContainer);
 
-    const fadHeartState = Spicetify.Player.getHeart();
-
-    if (!fromEvent && fadFg && !isFadHeartContainer) fadFg.appendChild(fadHeartContainer);
-
-    if (!fromEvent && fadHeartState || fromEvent && !fadHeartState) {
+    if (Spicetify.Player.getHeart()) {
       fadHeartSvg.innerHTML = Spicetify.SVGIcons["heart-active"];
       fadHeart.classList.add("checked");
     } else {
       fadHeartSvg.innerHTML = Spicetify.SVGIcons.heart;
       fadHeart.classList.remove("checked");
     }
-
-    if (fromEvent) Spicetify.Player.toggleHeart();
   }
 
   function handleTracksNamePreview() {
@@ -251,6 +245,29 @@ window.addEventListener("load", rotateTurntable = () => {
 
   handleRotate("load");
 
+  const nowPlayingBarLeft = document.querySelector(".main-nowPlayingBar-left");
+  const heartHiddenObserver = new MutationObserver(mutationsList => {
+    const targetMutation = mutationsList[mutationsList.length - 1];
+
+    for (const addedNode of targetMutation.addedNodes) {
+      if (
+        addedNode.matches('svg[class]')
+        ||
+        addedNode.matches('button[class^="main-addButton-button"]')
+      ) handleFadHeart();
+    }
+
+    for (const removedNode of targetMutation.removedNodes) {
+      if (
+        removedNode.matches('button[class^="main-addButton-button"]')
+      ) handleFadHeart();
+    }
+  });
+  heartHiddenObserver.observe(nowPlayingBarLeft, {
+    childList: true,
+    subtree: true,
+  });
+
   const shuffleBtn = document.querySelector(".main-shuffleButton-button");
   const shuffleObserver = new MutationObserver(() => {
     setTimeout(handleTracksNamePreview, 500);
@@ -264,12 +281,11 @@ window.addEventListener("load", rotateTurntable = () => {
     setTimeout(() => {
       handleIcons();
       handleRotate();
-      handleFadHeart();
       handleTracksNamePreview();
     }, 500);
   });
 
-  fadHeart.addEventListener("click", () => handleFadHeart(true));
+  fadHeart.addEventListener("click", Spicetify.Player.toggleHeart);
   previousSong.addEventListener("click", () => SpicetifyOrigin.skipToPrevious());
   nextSong.addEventListener("click", () => SpicetifyOrigin.skipToNext());
 
@@ -285,7 +301,6 @@ window.addEventListener("load", rotateTurntable = () => {
       if (+localStorage.getItem("enableBlurFad")) fullAppDisplay.dataset.isBlurFad = "true";
       fullAppDisplay.appendChild(songPreviewContainer);
 
-      // if (!songPreviewContainer.textContent.length) handleTracksNamePreview();
       handleFadControl();
 
       fullAppDisplay.addEventListener("contextmenu", () => handleContextMenu(fullAppDisplay), { once: true });