overhaul modals and casting to device ui

CHANGELOG.md

@@ -15,3 +15,6 @@ Improved:
 - Now also shows if a new spicetify-cli update is available (Requires spicetify-cli > 2.7.2)
 - Popups (like lyrics-plus settings) styles are now consistent with the Dribbblish settings styles
 - Only display option to reset setting if it was changed
+- `Connect to Device` interface / selection is now more inline with other context menus
+- When casting to a device it shows up as info (next to your profile picture)
+- Confirmation modal styles are now more inline with other popups

src/js/main.js

@@ -831,6 +831,41 @@ Dribbblish.on("ready", () => {
     setInterval(checkForUpdate, 10 * 60 * 1000);
     checkForUpdate();
 
+    function registerCastingListener() {
+        if (!document.querySelector(".main-nowPlayingBar-container")) return setTimeout(registerCastingListener, 250);
+
+        function setInfo() {
+            if (!document.querySelector(".main-connectBar-connectBar svg > path")) return;
+            Dribbblish.info.set("casting", {
+                icon: $(".main-connectBar-connectBar svg > path").attr("d").includes("1.48 1.48") ? "cast-connected" : "cast",
+                text: $(".main-connectBar-connectBar").text(),
+                // TODO: make onClick act like clicking on the connect to device button
+                // onClick: () => ,
+                order: -999
+            });
+        }
+        setInfo();
+
+        const castingListener = new MutationObserver((muts) => {
+            let action;
+            for (const mut of muts) {
+                if (mut.target instanceof HTMLElement && (mut.target.classList.contains("main-connectBar-connectBar") || mut.target.querySelector(".main-connectBar-connectBar"))) action = "change";
+                for (const el of mut.addedNodes) if (el instanceof HTMLElement && el.querySelector(".main-connectBar-connectBar")) action = "add";
+                for (const el of mut.removedNodes) if (el instanceof HTMLElement && el.querySelector(".main-connectBar-connectBar")) action = "remove";
+            }
+            if (["add", "change"].includes(action)) {
+                setInfo();
+            } else if (action == "remove") {
+                Dribbblish.info.remove("casting");
+            }
+        });
+        castingListener.observe(document.querySelector(".main-nowPlayingBar-container"), {
+            childList: true,
+            subtree: true
+        });
+    }
+    registerCastingListener();
+
     // Show "Offline" info
     function offlineInfo(show) {
         Dribbblish.info.set(

src/styles/ConnectDeviceList.scss

@@ -0,0 +1,48 @@
+.connect-device-list-container {
+    $border-color: spiceColor("subtext", 0.1, 0.1);
+
+    border: 1px solid $border-color;
+    border-radius: var(--main-corner-radius);
+    padding: 8px;
+    background-color: spiceColor("main", 0.75, -0.1) !important;
+    backdrop-filter: blur(10px);
+    border-radius: var(--main-corner-radius);
+    @include spiceShadow();
+
+    &::before {
+        display: none;
+    }
+
+    .connect-device-list-content {
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+        width: 100%;
+
+        .connect-header {
+            padding: 0px;
+            filter: invert(var(--is_light));
+        }
+
+        .connect-device-list {
+            display: flex;
+            flex-direction: column;
+            gap: 8px;
+            overflow-y: auto;
+
+            .connect-device-list-item {
+                background-color: transparent;
+                border-radius: var(--main-corner-radius);
+
+                &:hover,
+                &:active {
+                    background-color: spiceColor("subtext", 0.1, 0.1);
+                }
+
+                &--active {
+                    background-color: spiceColor("selected-row", 0.2) !important;
+                }
+            }
+        }
+    }
+}

src/styles/Modals.scss

@@ -0,0 +1,64 @@
+.GenericModal__overlay {
+    backdrop-filter: blur(3px) brightness(60%);
+    background-color: transparent;
+
+    .GenericModal {
+        z-index: 1;
+        position: relative;
+        background-color: spiceColor("main", 0.95);
+        backdrop-filter: blur(3px);
+        padding: 24px 16px;
+        border-radius: var(--main-corner-radius);
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        @include spiceShadow();
+
+        // Popups (`Spicetify.PopupModal.display()`)
+        generic-modal & {
+            color: spiceColor("text");
+            width: clamp(500px, 50%, 650px);
+        }
+
+        // Dialogs (Delete Folder)
+        .ReactModalPortal > & {
+            > * {
+                color: spiceColor("subtext");
+                background-color: transparent;
+                padding: 0px;
+            }
+        }
+
+        .main-trackCreditsModal-container {
+            display: flex;
+            gap: 16px;
+            background-color: transparent;
+            width: 100%;
+
+            .main-trackCreditsModal-header {
+                display: flex;
+                gap: 16px;
+                padding: 0px;
+                width: 100%;
+                border: none;
+
+                h1 {
+                    text-align: center;
+                    width: 100%;
+                    @include spiceFont("glue", 2em, "Bold");
+                }
+
+                button {
+                    position: absolute;
+                    top: 16px;
+                    right: 16px;
+                }
+            }
+
+            .main-trackCreditsModal-mainSection {
+                padding: 0px 26px;
+            }
+        }
+    }
+}

src/styles/main.scss

@@ -8,12 +8,13 @@
 @import "Fonts";
 @import "Inputs";
 @import "ConfigMenu";
-@import "ContextMenu.scss";
+@import "ContextMenu";
 @import "NoAds";
 @import "Markdown";
 @import "Info";
 @import "Loader";
-@import "Popup";
+@import "Modals";
+@import "ConnectDeviceList";
 
 :root {
     --bar-height: 70px;
@@ -27,6 +28,18 @@
     --sidebar-icons-border-radius: 50vh; // 50vh = round / pill
     --song-transition-speed: 3s;
     --is_dark: calc(1 - var(--is_light));
+
+    // Display warning for incorrectly installed js
+    &:not([dribbblish-js-installed])::after {
+        content: "dribbblish-dynamic.js not installed correctly";
+        position: fixed;
+        inset: 0px;
+        color: red;
+        background-color: black;
+        text-align: center;
+        line-height: 100vh;
+        @include spiceFont("glue", 32px, "Bold");
+    }
 }
 
 ::-webkit-scrollbar {
@@ -103,15 +116,6 @@
     color: white;
 }
 
-.connect-title,
-.connect-header {
-    display: none;
-}
-
-.connect-device-list {
-    margin: 0px -5px;
-}
-
 /* Remove Topbar background colour */
 .main-topBar-background {
     background-color: unset !important;
@@ -120,8 +124,7 @@
     background-color: spiceColor("main");
 }
 
-.main-entityHeader-shadow,
+.main-entityHeader-shadow {
-.connect-device-list-container {
     box-shadow: 0 4px 20px #21212130;
 }
 
@@ -305,6 +308,7 @@ span.artist-artistVerifiedBadge-badge svg > path:last-of-type {
 }
 
 .main-nowPlayingBar-container {
+    position: relative;
     border-radius: 0 0 var(--main-corner-radius) var(--main-corner-radius);
     background-color: spiceColor("main");
     border-top: 0;
@@ -320,11 +324,27 @@ span.artist-artistVerifiedBadge-badge svg > path:last-of-type {
 }
 
 .main-connectBar-connectBar {
-    border-radius: 0 0 var(--main-corner-radius) var(--main-corner-radius);
+    // These styles are useless, but maybe we'll change this back to the way it was before so I'll leave them
-    border: 2px solid spiceColor("main");
+    display: none;
-    border-top: 0;
+
-    background-color: spiceColor("button") !important;
+    // position: absolute;
-    color: spiceColor("text") !important;
+    // display: flex;
+    // flex-direction: row-reverse;
+    // gap: 8px;
+    // height: fit-content;
+    // right: 4px;
+    // bottom: 4px;
+    // padding: 2px 8px;
+    // background-color: spiceColor("text", 0.2) !important;
+    // border-radius: var(--main-corner-radius);
+
+    // &::after {
+    //     display: none;
+    // }
+
+    // svg {
+    //     margin: 0px;
+    // }
 }
 
 .Root__nav-bar {
@@ -513,13 +533,9 @@ html.sidebar-hide-text .GlueDropTarget span {
 
 .playback-bar {
     position: absolute;
-    width: var(--main-view-width);
+    left: 0px;
-    left: var(--sidebar-width);
+    right: 0px;
-    bottom: calc(var(--main-gap) + var(--bar-height) - 12px / 2);
+    top: calc(0px - 12px / 2);
-}
-
-.Root.is-connectBarVisible .playback-bar {
-    bottom: calc(var(--main-gap) + var(--bar-height) + 24px - 12px / 2);
 }
 
 .main-nowPlayingWidget-coverArt .cover-art {
@@ -557,6 +573,10 @@ html.sidebar-hide-text .GlueDropTarget span {
     .progress-bar:not(:active) .progress-bar__slider {
         transition-property: left, opacity;
     }
+
+    .playback-bar:not(:active) .prog-tooltip {
+        transition: transform var(--playbar-movement-anim-speed) ease;
+    }
 }
 
 .playback-bar .prog-tooltip {
@@ -566,15 +586,15 @@ html.sidebar-hide-text .GlueDropTarget span {
     left: 50%;
     transform: translateX(calc(-50%));
     padding: 0 5px;
-    border-radius: 4px;
     text-align: center;
-    color: spiceColor("text");
-    background-color: spiceColor("button");
     pointer-events: none;
-}
+    border: 1px solid spiceColor("subtext", 0.1, 0.1);
-
+    border-radius: var(--main-corner-radius);
-.playback-bar:not(:active) .prog-tooltip {
+    color: spiceColor("subtext");
-    transition: transform var(--playbar-movement-anim-speed) ease;
+    background-color: spiceColor("main", 0.75, -0.1) !important;
+    backdrop-filter: blur(10px);
+    border-radius: var(--main-corner-radius);
+    @include spiceShadow();
 }
 
 .minimal-player .player-controls__buttons {
@@ -1078,10 +1098,6 @@ div.GlueDropTarget.personal-library > *.active {
     left: calc(var(--sidebar-width) + 10px);
 }
 
-.Root.is-connectBarVisible .main-coverSlotExpanded-container {
-    bottom: calc(var(--main-gap) + var(--bar-height) + 24px + 10px);
-}
-
 html.right-expanded-cover .main-coverSlotExpanded-container {
     right: calc(var(--main-gap) * 2);
     left: unset;
@@ -1140,11 +1156,6 @@ html.right-expanded-cover.buddyfeed-visible .main-coverSlotExpanded-container {
     border-radius: 5px;
 }
 
-.connect-device-list-item:focus,
-.connect-device-list-item:hover {
-    background-color: spiceColor("selected-row", 0.3);
-}
-
 /* 1.1.56 */
 .main-navBar-navBar {
     width: var(--sidebar-width) !important;
@@ -1190,10 +1201,6 @@ html.right-expanded-cover.buddyfeed-visible .main-coverSlotExpanded-container {
 .main-tag-container {
     background-color: spiceColor("text");
 }
-/* progressbar tooltip text color */
-.playback-bar .prog-tooltip {
-    color: spiceColor("sidebar-text") !important;
-}
 
 /* edit button of CustomApps */
 .reddit-sort-container button.switch,
@@ -1265,6 +1272,10 @@ html.right-expanded-cover.buddyfeed-visible .main-coverSlotExpanded-container {
     display: none;
 }
 
+svg[type="dribbblish-icon"] {
+    overflow: visible;
+}
+
 // ! WORKAROUNDS / TEMP FIXES
 // Spotify UI breaks after advertisements #63
 canvas[width="250"][height="250"] {