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 }