feat(full-screen): make sidebar queue as a configurable option

Author: daksh2k

Extensions/full-screen/.hintrc

@@ -3,7 +3,15 @@
     "development"
   ],
   "hints": {
-    "no-inline-styles": "off"
+    "no-inline-styles": "off",
+    "compat-api/css": [
+      "default",
+      {
+        "ignore": [
+          "backdrop-filter"
+        ]
+      }
+    ]
   },
   "browserslist": [
     "defaults",

Extensions/full-screen/src/app.tsx

@@ -124,7 +124,9 @@ async function main() {
 
     function render() {
         container.classList.toggle("lyrics-active", Boolean(CFM.get("lyricsDisplay")));
-        Utils.toggleQueuePanel(queue, false);
+        if (CFM.get("sidebarQueue")) {
+            Utils.toggleQueuePanel(queue, false);
+        }
         container.classList.toggle(
             "vertical-mode",
             (CFM.get("verticalMonitorSupport") as Settings["verticalMonitorSupport"]) &&
@@ -232,7 +234,6 @@ async function main() {
             heart = container.querySelector("#fsd-heart")!;
             shuffle = container.querySelector("#fsd-shuffle")!;
             repeat = container.querySelector("#fsd-repeat")!;
-            queue = container.querySelector("#fsd-queue")!;
 
             heart.onclick = () => {
                 Utils.fadeAnimation(heart);
@@ -247,16 +248,18 @@ async function main() {
                 Spicetify.Player.toggleRepeat();
             };
 
-            queue.onclick = () => toggleQueue();
-
             if (CFM.get("invertColors") === "auto") {
                 invertButton = container.querySelector("#fsd-invert")!;
                 invertButton.onclick = toggleInvert;
             }
-            if (CFM.get("lyricsDisplay")) {
+            if (CFM.get("lyricsDisplay") && !CFM.get("sidebarQueue")) {
                 lyrics = container.querySelector("#fsd-lyrics")!;
-                // lyrics.onclick = () => toggleLyrics();
-                lyrics.onclick = () => recordSequence();
+                lyrics.onclick = () => toggleLyrics();
+                // lyrics.onclick = () => recordSequence();
+            }
+            if (CFM.get("sidebarQueue")) {
+                queue = container.querySelector("#fsd-queue")!;
+                queue.onclick = () => toggleQueue();
             }
         }
     }
@@ -868,7 +871,6 @@ async function main() {
             CFM.get("enableFullscreen") &&
             Utils.isModeActivated()
         ) {
-            console.log("Deactivating Full Screen");
             deactivate();
         }
     }
@@ -877,7 +879,9 @@ async function main() {
     const heartObserver = new MutationObserver(updateHeart);
 
     async function activate() {
-        Utils.toggleQueuePanel(queue, true);
+        if (CFM.get("sidebarQueue")) {
+            Utils.toggleQueuePanel(queue, true);
+        }
         document.body.classList.add(...CLASSES_TO_ADD);
         if (CFM.get("enableFullscreen")) await Utils.fullScreenOn()?.catch((err) => {});
         else await Utils.fullScreenOff()?.catch((err) => {});
@@ -957,11 +961,15 @@ async function main() {
             if (popup) popup.remove();
             else openConfig();
         });
-        Spicetify.Mousetrap.bind("q", toggleQueue);
+        if (CFM.get("sidebarQueue")) {
+            Spicetify.Mousetrap.bind("q", toggleQueue);
+        }
     }
 
     async function deactivate() {
-        Utils.toggleQueuePanel(queue, false);
+        if (CFM.get("sidebarQueue")) {
+            Utils.toggleQueuePanel(queue, false);
+        }
         modifyIsAnimationRunning(false);
         Spicetify.Player.removeEventListener("songchange", updateInfo);
         handleMouseMoveDeactivation();
@@ -1259,6 +1267,7 @@ async function main() {
                 },
                 translations[LOCALE].settings.keyActivation.description,
             ),
+
             headerText(translations[LOCALE].settings.lyricsHeader),
             createToggle(
                 translations[LOCALE].settings.lyrics,
@@ -1349,6 +1358,12 @@ async function main() {
                 ? createToggle(translations[LOCALE].settings.fullscreen, "enableFullscreen")
                 : "",
             headerText(translations[LOCALE].settings.extraHeader),
+            createToggle(
+                translations[LOCALE].settings.sidebarQueue,
+                "sidebarQueue",
+                (value: boolean) => saveOption("sidebarQueue", value),
+                translations[LOCALE].settings.sidebarQueueDescription.join("<br>"),
+            ),
             createOptions(
                 translations[LOCALE].settings.extraControls,
                 {

Extensions/full-screen/src/constants/defaults.ts

@@ -34,6 +34,7 @@ export const DEFAULTS: Config = {
         backgroundBrightness: 0.4,
         showRemainingTime: false,
         verticalMonitorSupport: false,
+        sidebarQueue: false,
     },
     def: {
         lyricsDisplay: true,
@@ -68,6 +69,7 @@ export const DEFAULTS: Config = {
         backgroundBrightness: 0.7,
         showRemainingTime: false,
         verticalMonitorSupport: true,
+        sidebarQueue: false,
     },
     tvMode: false,
     locale: "en-US",

Extensions/full-screen/src/resources/locales/en-US.json

@@ -102,6 +102,11 @@
             "animatedArt": "Animated Album Art (Experimental)",
             "artist": "Artist artwork"
         },
+        "sidebarQueue": "Enable Queue in Sidebar (replaces the lyrics button)",
+        "sidebarQueueDescription": [
+            "Toggle the queue in the sidebar with <kbd>Q</kbd> or the button in the extra bar.",
+            "Make sure to enable the setting in Experimental features. Check [this.](https://github.com/daksh2k/Spicetify-stuff/issues/167#issuecomment-2199480598) "
+        ],
         "extraControls": "Extra Controls",
         "upnextDisplay": "Upnext Display",
         "contextDisplay": {

Extensions/full-screen/src/services/html-creator.ts

@@ -109,19 +109,21 @@ ${CFM.get("lyricsDisplay") ? `<div id="fad-lyrics-plus-container"></div>` : ""}
                             }</svg>
                        </button>
                        ${
-                           CFM.get("lyricsDisplay")
+                           CFM.get("lyricsDisplay") && !CFM.get("sidebarQueue")
                                ? `<button id="fsd-lyrics" class="fs-button ${
                                      areLyricsForceHidden ? "" : "button-active"
                                  }">
                        ${areLyricsForceHidden ? ICONS.LYRICS_ACTIVE : ICONS.LYRICS_INACTIVE}
                     </button>`
                                : ""
                        }
-                       <button class="fs-button" id="fsd-queue">
-                       <svg height="20" width="20" viewBox="0 0 16 16" fill="currentColor">${
-                           Spicetify.SVGIcons["queue"]
-                       }</svg>
-                  </button>
+                      ${
+                          CFM.get("sidebarQueue")
+                              ? `<button class="fs-button" id="fsd-queue">
+                       <svg height="20" width="20" viewBox="0 0 16 16" fill="currentColor">${Spicetify.SVGIcons["queue"]}</svg>
+                  </button>`
+                              : ""
+                      }
                     </div>`
                         : ""
                 }

Extensions/full-screen/src/styles/base.scss

@@ -368,9 +368,6 @@
     .fsd-background-fade {
         transition: background-image var(--fs-transition) linear;
     }
-    #fsd-lyrics {
-        display: none;
-    }
 }
 
 body.fsd-activated #full-screen-display {

Extensions/full-screen/src/types/fullscreen.d.ts

@@ -48,6 +48,7 @@ export type Settings = {
     backgroundBrightness: number;
     showRemainingTime: boolean;
     verticalMonitorSupport: boolean;
+    sidebarQueue: boolean;
 };
 
 export type Cache = {