Mirrors/spicetify-themes
1
0
Fork 0
mirror of https://github.com/morpheusthewhite/spicetify-themes.git synced 2024-11-21 18:32:45 +01:00
Code Issues Projects Releases Activity

feat(Turntable): rotate the album cover at the Now Playing Bar

Browse Source
This commit is contained in:
Grason Chan 2021-10-26 00:12:13 +08:00
parent 7acdeaa0a5
commit 9157e1dade
2 changed files with 10 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
Turntable/rotateTurntable.js
View File

@ -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);

9
Turntable/user.css
View File

@ -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
}