From 9157e1dade888013ab3950185af38f3a96a4be59 Mon Sep 17 00:00:00 2001
From: Grason Chan <grasonchan@gmail.com>
Date: Tue, 26 Oct 2021 00:12:13 +0800
Subject: [PATCH] feat(Turntable): rotate the album cover at the Now Playing
 Bar

---
 Turntable/rotateTurntable.js | 4 ++++
 Turntable/user.css           | 9 ++++++---
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/Turntable/rotateTurntable.js b/Turntable/rotateTurntable.js
index 4c8c8c5..b5fae4a 100644
--- a/Turntable/rotateTurntable.js
+++ b/Turntable/rotateTurntable.js
@@ -35,6 +35,7 @@ window.addEventListener("load", rotateTurntable = () => {
   let isPlaying, clickedFadBtn;
 
   function handleRotate(eventType) {
+    const coverArt = document.querySelector(".cover-art-image");
     const fadArt = document.querySelector("#fad-art-image");
 
     if (
@@ -44,9 +45,11 @@ window.addEventListener("load", rotateTurntable = () => {
       ||
       !eventType && isPlaying
     ) {
+      coverArt.style.setProperty("animation-play-state", "running");
       fadArt?.style.setProperty("animation-play-state", "running");
       if (eventType) isPlaying = true;
     } else {
+      coverArt.style.setProperty("animation-play-state", "paused");
       fadArt?.style.setProperty("animation-play-state", "paused");
       if (eventType) isPlaying = false;
     }
@@ -212,6 +215,7 @@ window.addEventListener("load", rotateTurntable = () => {
   Spicetify.Player.addEventListener("onplaypause", () => handleRotate("playpause"));
   Spicetify.Player.addEventListener("songchange", () => {
     setTimeout(() => {
+      handleRotate();
       handleFadHeart();
       handleTracksNamePreview();
     }, 500);
diff --git a/Turntable/user.css b/Turntable/user.css
index eaea6cc..88acbf5 100644
--- a/Turntable/user.css
+++ b/Turntable/user.css
@@ -87,12 +87,13 @@
 }
 
 .main-nowPlayingWidget-coverArt .cover-art.shadow {
+  width: 62px !important;
+  height: 62px !important;
   box-shadow: unset
 }
 
 .main-nowPlayingWidget-coverArt .cover-art-image {
   border: 2px solid #aaa;
-  transform: scale(1.1);
   box-shadow: 0 0 5px rgba(200, 200, 200, .4)
 }
 
@@ -312,8 +313,9 @@
 }
 
 [data-is-blur-fad = "true"] #fad-art::after {
-  background-color: rgba(40, 40, 40, .1);
-  box-shadow: 0 0 1px rgba(100, 100, 100, .4)
+  background-color: rgba(100, 100, 100, .1);
+  border: 1px solid rgba(100, 100, 100, .1);
+  box-shadow: 0 0 1px rgba(40, 40, 40, .2) inset, 0 0 1px rgba(200, 200, 200, .2)
 }
 
 [data-is-blur-fad = "true"] #fad-progress {
@@ -390,6 +392,7 @@
 
 
 /* Rotate turntable */
+.main-nowPlayingWidget-coverArt .cover-art-image,
 #fad-art-image {
   animation: rotate-cover_img 24s linear infinite paused
 }