diff --git a/CHANGELOG.md b/CHANGELOG.md index c35d3c8..4fee89e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -14,4 +14,7 @@ Improved: - Added hover tooltips on playlist / folder images. Useful for collapsed sidebar - 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 \ No newline at end of file +- 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 \ No newline at end of file diff --git a/src/js/main.js b/src/js/main.js index 4120c5e..4c55295 100644 --- a/src/js/main.js +++ b/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( diff --git a/src/styles/ConnectDeviceList.scss b/src/styles/ConnectDeviceList.scss new file mode 100644 index 0000000..1923351 --- /dev/null +++ b/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; + } + } + } + } +} diff --git a/src/styles/Modals.scss b/src/styles/Modals.scss new file mode 100644 index 0000000..55842cd --- /dev/null +++ b/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; + } + } + } +} diff --git a/src/styles/main.scss b/src/styles/main.scss index dc4e36a..a3f5a97 100644 --- a/src/styles/main.scss +++ b/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, -.connect-device-list-container { +.main-entityHeader-shadow { 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); - border: 2px solid spiceColor("main"); - border-top: 0; - background-color: spiceColor("button") !important; - color: spiceColor("text") !important; + // These styles are useless, but maybe we'll change this back to the way it was before so I'll leave them + display: none; + + // position: absolute; + // 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: var(--sidebar-width); - bottom: calc(var(--main-gap) + var(--bar-height) - 12px / 2); -} - -.Root.is-connectBarVisible .playback-bar { - bottom: calc(var(--main-gap) + var(--bar-height) + 24px - 12px / 2); + left: 0px; + right: 0px; + top: calc(0px - 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; -} - -.playback-bar:not(:active) .prog-tooltip { - transition: transform var(--playbar-movement-anim-speed) ease; + border: 1px solid spiceColor("subtext", 0.1, 0.1); + border-radius: var(--main-corner-radius); + color: spiceColor("subtext"); + 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"] {