mirror of
https://github.com/morpheusthewhite/spicetify-themes.git
synced 2024-11-21 18:32:45 +01:00
refactor(Turntable): refactor the "Enable blur backdrop" feature
You can right click in the Full App Display to find it.
This commit is contained in:
Grason Chan
parent
bc18b92219
commit
1f70381f6f
@ -7,8 +7,7 @@ window.addEventListener("load", rotateTurntable = () => {
|
||||
}
|
||||
|
||||
const adModalStyle = document.createElement("style");
|
||||
const STYLE_FOR_AD_MODAL =
|
||||
`
|
||||
const STYLE_FOR_AD_MODAL = `
|
||||
.ReactModalPortal {
|
||||
display: none
|
||||
}
|
||||
@ -29,59 +28,45 @@ window.addEventListener("load", rotateTurntable = () => {
|
||||
}
|
||||
}
|
||||
|
||||
function handleFadControl(event) {
|
||||
event.stopPropagation();
|
||||
}
|
||||
|
||||
function handleFadDblclick() {
|
||||
const fadControlsBtns = document.querySelectorAll("#fad-controls button");
|
||||
|
||||
for (const fadControl of fadControlsBtns) {
|
||||
fadControl.addEventListener("dblclick", handleFadControl);
|
||||
fadControl.addEventListener("dblclick", event => event.stopPropagation());
|
||||
}
|
||||
}
|
||||
|
||||
function handleConfigSwitch() {
|
||||
const genericModal = document.querySelector("generic-modal");
|
||||
|
||||
document.querySelectorAll("#popup-config-container > div")[0].remove();
|
||||
|
||||
handleInitalStatus(genericModal);
|
||||
}
|
||||
|
||||
function handleInitalStatus(genericModal) {
|
||||
genericModal.remove();
|
||||
document.querySelector("generic-modal").remove();
|
||||
|
||||
handleRotate();
|
||||
handleFadDblclick();
|
||||
}
|
||||
|
||||
function handleBackdrop() {
|
||||
const fadClassList = document.querySelector("#full-app-display").classList;
|
||||
|
||||
function handleBackdrop(fullAppDisplay, setBlurBackdropBtn) {
|
||||
if (!+localStorage.getItem("enableBlurFad")) {
|
||||
fadClassList.add("blur-fad");
|
||||
fullAppDisplay.setAttribute("data-is-blur-fad", "true");
|
||||
setBlurBackdropBtn.classList.remove("disabled");
|
||||
|
||||
localStorage.setItem("enableBlurFad", "1");
|
||||
} else {
|
||||
fadClassList.remove("blur-fad");
|
||||
fullAppDisplay.setAttribute("data-is-blur-fad", "false");
|
||||
setBlurBackdropBtn.classList.add("disabled");
|
||||
|
||||
localStorage.setItem("enableBlurFad", "0");
|
||||
}
|
||||
}
|
||||
|
||||
function handleContextMenu() {
|
||||
const configPopupCloseBtn = document.querySelector(".main-trackCreditsModal-closeBtn");
|
||||
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 =
|
||||
`
|
||||
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"}">
|
||||
<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>
|
||||
@ -92,17 +77,14 @@ window.addEventListener("load", rotateTurntable = () => {
|
||||
|
||||
settingRowContainer.innerHTML = settingRow;
|
||||
configContainer.insertBefore(settingRowContainer, settingRowReferenceNode);
|
||||
|
||||
const setBlurBackdropNode = document.querySelectorAll("#popup-config-container > div")[0];
|
||||
const configSwitchBtns = document.querySelectorAll("#popup-config-container button.switch");
|
||||
|
||||
configPopupCloseBtn.addEventListener("click", () => setBlurBackdropNode.remove());
|
||||
const setBlurBackdropBtn = document.querySelector("[data-blur-fad]");
|
||||
|
||||
for (const configSwitch of configSwitchBtns) {
|
||||
configSwitch.addEventListener("click", handleConfigSwitch);
|
||||
}
|
||||
|
||||
setBlurBackdropNode.querySelector("button").addEventListener("click", handleBackdrop);
|
||||
setBlurBackdropBtn.addEventListener("click", () => handleBackdrop(fullAppDisplay, setBlurBackdropBtn));
|
||||
}
|
||||
|
||||
function handleMainInterface() {
|
||||
@ -132,10 +114,12 @@ window.addEventListener("load", rotateTurntable = () => {
|
||||
const topbarContentFadeIn = document.querySelector(".main-entityHeader-topbarContentFadeIn");
|
||||
const fullAppDisplay = document.querySelector("#full-app-display");
|
||||
const fadArt = document.querySelector("#fad-art-image");
|
||||
const fadClassList = document.querySelector("#full-app-display").classList;
|
||||
|
||||
if (!clickedFadBtn && +localStorage.getItem("enableBlurFad")) fadClassList.add("blur-fad");
|
||||
if (!clickedFadBtn) clickedFadBtn = true;
|
||||
if (!clickedFadBtn) {
|
||||
if (+localStorage.getItem("enableBlurFad")) fullAppDisplay.setAttribute("data-is-blur-fad", "true");
|
||||
|
||||
clickedFadBtn = true;
|
||||
}
|
||||
|
||||
playState
|
||||
? fadArt.style.animationPlayState = "running"
|
||||
@ -151,7 +135,9 @@ window.addEventListener("load", rotateTurntable = () => {
|
||||
mainInterface.style.display = "none";
|
||||
document.body.append(adModalStyle);
|
||||
|
||||
fullAppDisplay.addEventListener("contextmenu", handleContextMenu);
|
||||
fullAppDisplay.addEventListener("contextmenu", () => {
|
||||
if (!document.querySelector("[data-blur-fad]")) handleContextMenu(fullAppDisplay);
|
||||
});
|
||||
|
||||
fullAppDisplay.addEventListener("dblclick", handleMainInterface);
|
||||
});
|
||||
|
||||
@ -5,13 +5,19 @@
|
||||
}
|
||||
|
||||
|
||||
/* remove upgrade button, user name */
|
||||
/* Remove Upgrade Button, User Name */
|
||||
.main-topBar-UpgradeButton,
|
||||
.main-userWidget-displayName {
|
||||
display: none
|
||||
}
|
||||
|
||||
|
||||
/* Notification Dot */
|
||||
.main-userWidget-notificationDot {
|
||||
color: #f00
|
||||
}
|
||||
|
||||
|
||||
/* Navbar */
|
||||
.Root__nav-bar {
|
||||
background-color: #0f0f0f
|
||||
@ -66,7 +72,7 @@
|
||||
}
|
||||
|
||||
|
||||
/* cover image */
|
||||
/* Cover Image */
|
||||
.main-nowPlayingWidget-coverExpanded{
|
||||
transform: translateX(-78px)
|
||||
}
|
||||
@ -90,7 +96,7 @@
|
||||
box-shadow: 0 0 5px rgba(200, 200, 200, .4)
|
||||
}
|
||||
|
||||
/* expand & collapse button */
|
||||
/* Expand & Collapse Button */
|
||||
.main-coverSlotCollapsed-expandButton {
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
@ -126,7 +132,7 @@
|
||||
}
|
||||
|
||||
|
||||
/* progress bar */
|
||||
/* Progress Bar */
|
||||
.Root__now-playing-bar {
|
||||
position: relative
|
||||
}
|
||||
@ -174,7 +180,7 @@
|
||||
}
|
||||
|
||||
|
||||
/* full app display */
|
||||
/* Full App Display */
|
||||
#full-app-display {
|
||||
background: radial-gradient(#242424, #1f1f1f)
|
||||
}
|
||||
@ -295,21 +301,21 @@
|
||||
}
|
||||
|
||||
|
||||
/* fad blur backdrop */
|
||||
.blur-fad #fad-background {
|
||||
/* Blur the Full App Display */
|
||||
[data-is-blur-fad = "true"] #fad-background {
|
||||
display: unset
|
||||
}
|
||||
|
||||
.blur-fad #fad-art::before {
|
||||
[data-is-blur-fad = "true"] #fad-art::before {
|
||||
background: radial-gradient(#242424, #000)
|
||||
}
|
||||
|
||||
.blur-fad #fad-art::after {
|
||||
[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)
|
||||
}
|
||||
|
||||
.blur-fad #fad-progress {
|
||||
[data-is-blur-fad = "true"] #fad-progress {
|
||||
background-color: rgba(200, 200, 200, .3) !important
|
||||
}
|
||||
|
||||
@ -321,7 +327,7 @@
|
||||
}
|
||||
|
||||
|
||||
/* rotate turntable */
|
||||
/* Rotate turntable */
|
||||
#fad-art-image {
|
||||
animation: rotate-cover_img 24s linear infinite paused
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user