confs
This commit is contained in:
poslop
315
.config/spicetify/Themes/Turntable/turntable.js
Normal file
315
.config/spicetify/Themes/Turntable/turntable.js
Normal file
@@ -0,0 +1,315 @@
|
||||
window.addEventListener("load", rotateTurntable = () => {
|
||||
const SpicetifyOrigin = Spicetify.Player.origin;
|
||||
const fadBtn = document.querySelector(".main-topBar-button[title='Full App Display']");
|
||||
|
||||
if (!SpicetifyOrigin?._state || !fadBtn) {
|
||||
setTimeout(rotateTurntable, 250);
|
||||
return;
|
||||
}
|
||||
|
||||
const adModalStyle = document.createElement("style");
|
||||
const STYLE_FOR_AD_MODAL = `
|
||||
.ReactModalPortal {
|
||||
display: none
|
||||
}
|
||||
`;
|
||||
adModalStyle.innerHTML = STYLE_FOR_AD_MODAL;
|
||||
|
||||
const fadHeartContainer = document.createElement("div");
|
||||
const fadHeart = document.createElement("button");
|
||||
const fadHeartSvg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
|
||||
fadHeartContainer.classList.add("fad-heart-container");
|
||||
fadHeart.classList.add("fad-heart");
|
||||
fadHeartSvg.setAttribute("width", "16");
|
||||
fadHeartSvg.setAttribute("height", "16");
|
||||
fadHeartSvg.setAttribute("viewBox", "0 0 16 16");
|
||||
fadHeart.appendChild(fadHeartSvg);
|
||||
fadHeartContainer.appendChild(fadHeart);
|
||||
|
||||
const songPreviewContainer = document.createElement("div");
|
||||
const previousSong = document.createElement("button");
|
||||
const nextSong = document.createElement("button");
|
||||
songPreviewContainer.classList.add("song-preview");
|
||||
songPreviewContainer.append(previousSong, nextSong);
|
||||
|
||||
const fadArtistSvg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
|
||||
fadArtistSvg.setAttribute("width", "16");
|
||||
fadArtistSvg.setAttribute("height", "16");
|
||||
fadArtistSvg.setAttribute("viewBox", "0 0 16 16");
|
||||
fadArtistSvg.setAttribute("fill", "currentColor");
|
||||
fadArtistSvg.innerHTML = Spicetify.SVGIcons.artist;
|
||||
const fadAlbumSvg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
|
||||
fadAlbumSvg.setAttribute("width", "16");
|
||||
fadAlbumSvg.setAttribute("height", "16");
|
||||
fadAlbumSvg.setAttribute("viewBox", "0 0 16 16");
|
||||
fadAlbumSvg.setAttribute("fill", "currentColor");
|
||||
fadAlbumSvg.innerHTML = Spicetify.SVGIcons.album;
|
||||
|
||||
let isPlaying, clickedFadBtn;
|
||||
|
||||
function handleRotate(eventType) {
|
||||
if (eventType === "load" && !SpicetifyOrigin._state.item) return;
|
||||
|
||||
const coverArt = document.querySelector(".main-nowPlayingWidget-coverArt > .cover-art");
|
||||
const fadArt = document.querySelector("#fad-art");
|
||||
|
||||
if (
|
||||
eventType === "load" && !SpicetifyOrigin._state.isPaused
|
||||
||
|
||||
eventType === "playpause" && !isPlaying
|
||||
||
|
||||
!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;
|
||||
}
|
||||
}
|
||||
|
||||
function handleFadBtn(event) {
|
||||
event.stopPropagation();
|
||||
}
|
||||
|
||||
function handleFadControl() {
|
||||
const fadControlsBtns = document.querySelectorAll("#fad-controls button");
|
||||
|
||||
for (const fadControl of fadControlsBtns) {
|
||||
fadControl.addEventListener("dblclick", handleFadBtn);
|
||||
}
|
||||
}
|
||||
|
||||
function handleFadHeart() {
|
||||
const isFadHeartContainer = document.querySelector(".fad-heart-container");
|
||||
|
||||
const stateItem = SpicetifyOrigin._state.item;
|
||||
|
||||
if (stateItem.isLocal || stateItem.type === "ad") {
|
||||
isFadHeartContainer?.remove();
|
||||
return;
|
||||
}
|
||||
|
||||
if (!isFadHeartContainer) document.querySelector("#fad-foreground")?.appendChild(fadHeartContainer);
|
||||
|
||||
if (Spicetify.Player.getHeart()) {
|
||||
fadHeartSvg.innerHTML = Spicetify.SVGIcons["heart-active"];
|
||||
fadHeart.classList.add("checked");
|
||||
} else {
|
||||
fadHeartSvg.innerHTML = Spicetify.SVGIcons.heart;
|
||||
fadHeart.classList.remove("checked");
|
||||
}
|
||||
}
|
||||
|
||||
function handleTracksNamePreview() {
|
||||
const prevTracks = Spicetify.Queue.prevTracks;
|
||||
const currentTrack = Spicetify.Queue.track;
|
||||
const nextTracks = Spicetify.Queue.nextTracks;
|
||||
|
||||
trackCondition = element => !element.contextTrack.metadata.hidden && element.provider !== "ad";
|
||||
|
||||
const prevTrack = prevTracks.slice().reverse().find(trackCondition);
|
||||
const nextTrack = nextTracks.find(trackCondition);
|
||||
|
||||
const prevTrackTitle = prevTrack.contextTrack.metadata.title;
|
||||
const currentTrackTitle = currentTrack.contextTrack.metadata.title;
|
||||
const nextTrackTitle = nextTrack.contextTrack.metadata.title;
|
||||
|
||||
if (currentTrackTitle === prevTrackTitle && currentTrackTitle === nextTrackTitle) {
|
||||
previousSong.innerHTML = "";
|
||||
nextSong.innerHTML = "";
|
||||
} else {
|
||||
previousSong.innerHTML = `< ${prevTrackTitle}`;
|
||||
nextSong.innerHTML = `${nextTrackTitle} >`;
|
||||
}
|
||||
}
|
||||
|
||||
function handleConfigSwitch() {
|
||||
const fullAppDisplay = document.querySelector("#full-app-display");
|
||||
const fadFg = document.querySelector("#fad-foreground");
|
||||
const genericModal = document.querySelector("generic-modal");
|
||||
|
||||
const stateItem = SpicetifyOrigin._state.item;
|
||||
|
||||
if (!stateItem.isLocal && stateItem.type !== "ad") fadFg.appendChild(fadHeartContainer);
|
||||
fullAppDisplay.appendChild(songPreviewContainer);
|
||||
|
||||
genericModal.remove();
|
||||
|
||||
handleIcons();
|
||||
handleRotate();
|
||||
handleFadControl();
|
||||
}
|
||||
|
||||
function handleBackdrop(fullAppDisplay, setBlurBackdropBtn) {
|
||||
if (!+localStorage.getItem("enableBlurFad")) {
|
||||
fullAppDisplay.dataset.isBlurFad = "true";
|
||||
setBlurBackdropBtn.classList.remove("disabled");
|
||||
|
||||
localStorage.setItem("enableBlurFad", "1");
|
||||
} else {
|
||||
fullAppDisplay.dataset.isBlurFad = "false";
|
||||
setBlurBackdropBtn.classList.add("disabled");
|
||||
|
||||
localStorage.setItem("enableBlurFad", "0");
|
||||
}
|
||||
}
|
||||
|
||||
function handleIcons() {
|
||||
const iconsConfig = JSON.parse(localStorage.getItem("full-app-display-config")).icons;
|
||||
|
||||
if (!iconsConfig) return;
|
||||
|
||||
const isFadArtistSvg = document.querySelector("#fad-artist svg");
|
||||
const isFadAlbumSvg = document.querySelector("#fad-album svg");
|
||||
|
||||
if (SpicetifyOrigin._state.item.type === "ad") {
|
||||
isFadArtistSvg?.remove();
|
||||
isFadAlbumSvg?.remove();
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
if (!isFadArtistSvg) {
|
||||
const fadArtist = document.querySelector("#fad-artist");
|
||||
const fadArtistTitle = document.querySelector("#fad-artist span");
|
||||
|
||||
fadArtist?.insertBefore(fadArtistSvg, fadArtistTitle);
|
||||
}
|
||||
|
||||
if (!isFadAlbumSvg) {
|
||||
const fadAlbum = document.querySelector("#fad-album");
|
||||
const fadAlbumTitle = document.querySelector("#fad-album span");
|
||||
|
||||
fadAlbum?.insertBefore(fadAlbumSvg, fadAlbumTitle);
|
||||
}
|
||||
}
|
||||
|
||||
function handleContextMenu(fullAppDisplay) {
|
||||
const configContainer = document.querySelector("#popup-config-container");
|
||||
const settingRowReferenceNode = document.querySelectorAll("#popup-config-container > div")[0];
|
||||
|
||||
const settingRowContainer = document.createElement("div");
|
||||
const settingRow = `
|
||||
<div class="setting-row">
|
||||
<label class="col description">Enable blur backdrop</label>
|
||||
<div class="col action">
|
||||
<button class="${+localStorage.getItem("enableBlurFad") ? "switch" : "switch disabled"}" data-blur-fad>
|
||||
<svg height="16" width="16" viewBox="0 0 16 16" fill="currentColor">
|
||||
<path d="M13.985 2.383L5.127 12.754 1.388 8.375l-.658.77 4.397 5.149 9.618-11.262z"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
settingRowContainer.innerHTML = settingRow;
|
||||
configContainer.insertBefore(settingRowContainer, settingRowReferenceNode);
|
||||
|
||||
const configSwitchBtns = document.querySelectorAll("#popup-config-container button.switch");
|
||||
const setBlurBackdropBtn = document.querySelector("[data-blur-fad]");
|
||||
|
||||
for (const configSwitch of configSwitchBtns) {
|
||||
configSwitch.addEventListener("click", handleConfigSwitch);
|
||||
}
|
||||
|
||||
setBlurBackdropBtn.addEventListener("click", () => handleBackdrop(fullAppDisplay, setBlurBackdropBtn));
|
||||
}
|
||||
|
||||
// Todo
|
||||
function handleToggleFad(isActive) {
|
||||
if (isActive) {
|
||||
document.body.append(adModalStyle);
|
||||
return;
|
||||
}
|
||||
|
||||
const billboard = document.querySelector("#view-billboard-ad");
|
||||
|
||||
billboard?.closest(".ReactModalPortal").remove();
|
||||
adModalStyle.remove();
|
||||
}
|
||||
|
||||
handleRotate("load");
|
||||
|
||||
const nowPlayingBarLeft = document.querySelector(".main-nowPlayingBar-left");
|
||||
const heartHiddenObserver = new MutationObserver(mutationsList => {
|
||||
mutationsLoop:
|
||||
for (const mutation of mutationsList) {
|
||||
for (const addedNode of mutation.addedNodes) {
|
||||
if (
|
||||
addedNode.matches('svg[class]')
|
||||
||
|
||||
addedNode.matches('button[class^="main-addButton-button"]')
|
||||
) {
|
||||
handleFadHeart();
|
||||
|
||||
break mutationsLoop;
|
||||
}
|
||||
}
|
||||
|
||||
for (const removedNode of mutation.removedNodes) {
|
||||
if (
|
||||
removedNode.matches('button[class^="main-addButton-button"]')
|
||||
) {
|
||||
handleFadHeart();
|
||||
|
||||
break mutationsLoop;
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
heartHiddenObserver.observe(nowPlayingBarLeft, {
|
||||
childList: true,
|
||||
subtree: true,
|
||||
});
|
||||
|
||||
const shuffleBtn = document.querySelector(".main-shuffleButton-button");
|
||||
const shuffleObserver = new MutationObserver(() => {
|
||||
setTimeout(handleTracksNamePreview, 500);
|
||||
});
|
||||
shuffleObserver.observe(shuffleBtn, {
|
||||
attributes: true,
|
||||
});
|
||||
|
||||
Spicetify.Player.addEventListener("onplaypause", () => handleRotate("playpause"));
|
||||
Spicetify.Player.addEventListener("songchange", () => {
|
||||
setTimeout(() => {
|
||||
handleIcons();
|
||||
handleRotate();
|
||||
handleTracksNamePreview();
|
||||
}, 500);
|
||||
});
|
||||
|
||||
fadHeart.addEventListener("click", Spicetify.Player.toggleHeart);
|
||||
previousSong.addEventListener("click", () => SpicetifyOrigin.skipToPrevious());
|
||||
nextSong.addEventListener("click", () => SpicetifyOrigin.skipToNext());
|
||||
|
||||
fadHeart.addEventListener("dblclick", handleFadBtn);
|
||||
previousSong.addEventListener("dblclick", handleFadBtn);
|
||||
nextSong.addEventListener("dblclick", handleFadBtn);
|
||||
|
||||
fadBtn.addEventListener("click", () => {
|
||||
const fullAppDisplay = document.querySelector("#full-app-display");
|
||||
|
||||
fullAppDisplay.appendChild(songPreviewContainer);
|
||||
|
||||
if (!clickedFadBtn) {
|
||||
if (+localStorage.getItem("enableBlurFad")) fullAppDisplay.dataset.isBlurFad = "true";
|
||||
|
||||
handleFadControl();
|
||||
|
||||
fullAppDisplay.addEventListener("contextmenu", () => handleContextMenu(fullAppDisplay), { once: true });
|
||||
|
||||
// fullAppDisplay.addEventListener("dblclick", () => handleToggleFad());
|
||||
|
||||
clickedFadBtn = true;
|
||||
}
|
||||
|
||||
// handleToggleFad(true);
|
||||
handleIcons();
|
||||
handleFadHeart();
|
||||
handleTracksNamePreview();
|
||||
handleRotate();
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user