refactor(Turntable): refactor the "Enable blur backdrop" feature

You can right click in the Full App Display to find it.

Turntable/rotateTurntable.js

@@ -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.querySelector("generic-modal").remove();
-
-    document.querySelectorAll("#popup-config-container > div")[0].remove();
-
-    handleInitalStatus(genericModal);
-  }
-
-  function handleInitalStatus(genericModal) {
-    genericModal.remove();
 
     handleRotate();
     handleFadDblclick();
   }
 
-  function handleBackdrop() {
+  function handleBackdrop(fullAppDisplay, setBlurBackdropBtn) {
-    const fadClassList = document.querySelector("#full-app-display").classList;
-
     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() {
+  function handleContextMenu(fullAppDisplay) {
-    const configPopupCloseBtn = document.querySelector(".main-trackCreditsModal-closeBtn");
     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");
-
+    const setBlurBackdropBtn = document.querySelector("[data-blur-fad]");
-    configPopupCloseBtn.addEventListener("click", () => setBlurBackdropNode.remove());
 
     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) {
-    if (!clickedFadBtn) clickedFadBtn = true;
+      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);
   });

Turntable/user.css

@@ -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 the Full App Display */
-.blur-fad #fad-background {
+[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
 }