Fixed Evergreen Spicetify Theme

2023-05-08 08:28:49 +05:30
parent cb628fa854
commit 7a8daf464a
4 changed files with 315 additions and 102 deletions
@@ -57,8 +57,11 @@ Run these commands:
 In **Bash**:
 ```bash
 cd "$(dirname "$(spicetify -c)")/Themes/Dribbblish"
+mkdir -p ../../Extensions
+cp dribbblish.js ../../Extensions/.
+spicetify config extensions dribbblish.js
 spicetify config current_theme Dribbblish color_scheme base
-spicetify config inject_css 1 replace_colors 1 overwrite_assets 1 inject_theme_js 1
+spicetify config inject_css 1 replace_colors 1 overwrite_assets 1
 spicetify apply
 ```

@@ -66,8 +69,10 @@ spicetify apply
 In **Powershell**:
 ```powershell
 cd "$(spicetify -c | Split-Path)\Themes\Dribbblish"
+Copy-Item dribbblish.js ..\..\Extensions
+spicetify config extensions dribbblish.js
 spicetify config current_theme Dribbblish color_scheme base
-spicetify config inject_css 1 replace_colors 1 overwrite_assets 1 inject_theme_js 1
+spicetify config inject_css 1 replace_colors 1 overwrite_assets 1
 spicetify apply
 ```

@@ -92,9 +97,12 @@ Invoke-WebRequest -UseBasicParsing "https://raw.githubusercontent.com/spicetify/
 ```

 ## Manual uninstall 
-Remove the dribbblish theme with the following commands 
+Remove the dribbblish script with the following commands 

 ```
-spicetify config current_theme " " color_scheme " "
+spicetify config extensions dribbblish.js-
+```
+And remove Patch lines you added in config file earlier. Finally, run:
+```
 spicetify apply
 ```
@@ -1,16 +1,16 @@
 [base]
-text               = 86918A
-subtext            = 4E565C
-sidebar-text       = 86918A
-main               = 232A2E
-sidebar            = 343F44
-player             = 232A2E
-card               = 232A2E
+text               = FFFFFF
+subtext            = B9BBBE
+sidebar-text       = FFFFFF
+main               = 0F1212
+sidebar            = 202222
+player             = 0F1212
+card               = 0F1212
 shadow             = 000000
 selected-row       = 797979
-button             = 414B4F
-button-active      = 414B4F
-button-disabled    = D3C6AA
+button             = 607767
+button-active      = 607767
+button-disabled    = 607767
 tab-active         = 1E2233
 notification       = 1db954
 notification-error = e22134
@@ -18,8 +18,7 @@ misc               = BFBFBF
 progress-fg        = CAA9E0
 progress-bg        = 91B1F0

-
-[...]
+[white]
 text               = 363636
 subtext            = 3D3D3D
 sidebar-text       = FFF9F4
@@ -194,7 +193,7 @@ selected-row       = 797979
 button             = 31748f
 button-active      = 31748f
 button-disabled    = 555169
-tab-active         = 31748f
+tab-active         = ebbcba
 notification       = 1db954
 notification-error = eb6f92
 misc               = 6e6a86
@@ -0,0 +1,266 @@
+// Hide popover message
+// document.getElementById("popover-container").style.height = 0;
+const DribbblishShared = {
+    configMenu: new Spicetify.Menu.SubMenu("Dribbblish", []),
+    rightBigCover: localStorage.getItem("dribs-right-big-cover") === "true",
+    setRightBigCover: () => {
+        if (DribbblishShared.rightBigCover) {
+            document.documentElement.classList.add("right-expanded-cover");
+        } else {
+            document.documentElement.classList.remove("right-expanded-cover");
+        }
+    }
+};
+
+// register drib menu item
+DribbblishShared.configMenu.register();
+DribbblishShared.configMenu.addItem(new Spicetify.Menu.Item(
+    "Right expanded cover",
+    DribbblishShared.rightBigCover,
+    (self) => {
+        self.isEnabled = !self.isEnabled;
+        DribbblishShared.rightBigCover = self.isEnabled;
+        localStorage.setItem("dribs-right-big-cover", self.isEnabled);
+        DribbblishShared.setRightBigCover();
+    }
+));
+DribbblishShared.setRightBigCover();
+
+function waitForElement(els, func, timeout = 100) {
+    const queries = els.map(el => document.querySelector(el));
+    if (queries.every(a => a)) {
+        func(queries);
+    } else if (timeout > 0) {
+        setTimeout(waitForElement, 300, els, func, --timeout);
+    }
+}
+
+waitForElement([
+    `ul[tabindex="0"]`, 
+    `ul[tabindex="0"] .GlueDropTarget--playlists.GlueDropTarget--folders`
+], ([root, firstItem]) => {
+    const listElem = firstItem.parentElement;
+    root.classList.add("dribs-playlist-list");
+
+    /** Replace Playlist name with their pictures */
+    function loadPlaylistImage() {
+        for (const item of listElem.children) {
+            let link = item.querySelector("a");
+            if (!link) continue;
+
+            let [_, app, uid ] = link.pathname.split("/");
+            let uri;
+            if (app === "playlist") {
+                uri = `spotify:playlist:${uid}`;
+            } else if (app === "folder") {
+                const base64 = localStorage.getItem("dribbblish:folder-image:" + uid);
+                let img = link.querySelector("img");
+                if (!img) {
+                    img = document.createElement("img");
+                    img.classList.add("playlist-picture");
+                    link.prepend(img);
+                }
+                img.src = base64  || "https://cdn.jsdelivr.net/gh/spicetify/spicetify-themes@master/Dribbblish/images/tracklist-row-song-fallback.svg";
+                continue;
+            }
+
+            Spicetify.CosmosAsync.get(
+                `sp://core-playlist/v1/playlist/${uri}/metadata`, 
+            { policy: { picture: true } }
+            ).then(res => {
+                const meta = res.metadata;
+                let img = link.querySelector("img");
+                if (!img) {
+                    img = document.createElement("img");
+                    img.classList.add("playlist-picture");
+                    link.prepend(img);
+                }
+                img.src = meta.picture || "https://cdn.jsdelivr.net/gh/spicetify/spicetify-themes@master/Dribbblish/images/tracklist-row-song-fallback.svg";
+            });
+        }
+    }
+
+    DribbblishShared.loadPlaylistImage = loadPlaylistImage;
+    loadPlaylistImage();
+
+    new MutationObserver(loadPlaylistImage)
+        .observe(listElem, {childList: true});
+});
+
+waitForElement([".Root__top-container"], ([topContainer]) => {
+    const shadow = document.createElement("div");
+    shadow.id = "dribbblish-back-shadow";
+    topContainer.prepend(shadow);
+});
+
+// allow resizing of the navbar
+waitForElement([
+    ".Root__nav-bar .LayoutResizer__input, .Root__nav-bar .LayoutResizer__resize-bar input"
+], ([resizer]) => {
+    const observer = new MutationObserver(updateVariable);
+    observer.observe(resizer, { attributes: true, attributeFilter: ["value"]});
+    function updateVariable() {
+        let value = resizer.value;
+        if (value < 121) {
+            value = 72;
+            document.documentElement.classList.add("sidebar-hide-text");
+        } else {
+            document.documentElement.classList.remove("sidebar-hide-text");
+        }
+        document.documentElement.style.setProperty(
+            "--sidebar-width", value + "px");
+    }
+    updateVariable();
+});
+
+// allow resizing of the buddy feed
+waitForElement([".Root__right-sidebar .LayoutResizer__input, .Root__right-sidebar .LayoutResizer__resize-bar input"], ([resizer]) => {
+    const observer = new MutationObserver(updateVariable);
+    observer.observe(resizer, { attributes: true, attributeFilter: ["value"] });
+    function updateVariable() {
+        let value = resizer.value;
+        if (value == 320) {
+            value = 72;
+            document.documentElement.classList.add("buddyFeed-hide-text");
+        } else {
+            document.documentElement.classList.remove("buddyFeed-hide-text");
+        }
+    }
+    updateVariable();
+});
+
+// add fade effect on playlist/folder list
+waitForElement([".main-navBar-navBar .os-viewport.os-viewport-native-scrollbars-invisible"], ([scrollNode]) => {
+    scrollNode.setAttribute("fade", "bottom");
+    scrollNode.addEventListener("scroll", () => {
+        if (scrollNode.scrollTop == 0) {
+            scrollNode.setAttribute("fade", "bottom");
+        } else if (scrollNode.scrollHeight - scrollNode.clientHeight - scrollNode.scrollTop == 0) {
+            scrollNode.setAttribute("fade", "top");
+        } else {
+            scrollNode.setAttribute("fade", "full");
+        }
+    });
+});
+
+// improve styles at smaller sizes
+waitForElement([".Root__main-view .os-resize-observer-host"], ([resizeHost]) => {
+    const observer = new ResizeObserver(updateVariable);
+    observer.observe(resizeHost);
+    function updateVariable([ event ]) {
+        document.documentElement.style.setProperty(
+            "--main-view-width", event.contentRect.width + "px");
+        if (event.contentRect.width < 700) {
+            document.documentElement.classList.add("minimal-player");
+        } else {
+            document.documentElement.classList.remove("minimal-player");
+        }
+        if (event.contentRect.width < 550) {
+            document.documentElement.classList.add("extra-minimal-player");
+        } else {
+            document.documentElement.classList.remove("extra-minimal-player");
+        }
+    }
+});
+
+(function Dribbblish() {
+    // dynamic playback time tooltip
+    const progBar = document.querySelector(".playback-bar");
+    const root = document.querySelector(".Root");
+
+    if (!Spicetify.Player.origin || !progBar || !root) {
+        setTimeout(Dribbblish, 300);
+        return;
+    }
+
+    const tooltip = document.createElement("div");
+    tooltip.className = "prog-tooltip";
+    progBar.append(tooltip);
+
+    const progKnob = progBar.querySelector(".progress-bar__slider");
+
+    function updateProgTime({ data: e }) {
+        const offsetX = progKnob.offsetLeft + progKnob.offsetWidth / 2;
+        const maxWidth = progBar.offsetWidth;
+        const curWidth = Spicetify.Player.getProgressPercent() * maxWidth;
+        const ttWidth = tooltip.offsetWidth / 2;
+        if (curWidth < ttWidth) {
+            tooltip.style.left = String(offsetX) + "px";
+        } else if (curWidth > maxWidth - ttWidth) {
+            tooltip.style.left = String(offsetX - ttWidth * 2) + "px";
+        } else {
+            tooltip.style.left = String(offsetX - ttWidth) + "px";
+        }
+        tooltip.innerText = Spicetify.Player.formatTime(e) + " / " + 
+            Spicetify.Player.formatTime(Spicetify.Player.getDuration());
+    }
+    Spicetify.Player.addEventListener("onprogress", updateProgTime);
+    updateProgTime({ data: Spicetify.Player.getProgress() });
+
+    Spicetify.CosmosAsync.sub("sp://connect/v1", (state) => {
+        const isExternal = state.devices.some(a => a.is_active);
+        if (isExternal) {
+            root.classList.add("is-connectBarVisible");
+        } else {
+            root.classList.remove("is-connectBarVisible");
+        }
+    });
+
+    // filepicker for custom folder images
+    const filePickerForm = document.createElement("form");
+    filePickerForm.setAttribute("aria-hidden", true);
+    filePickerForm.innerHTML = '<input type="file" class="hidden-visually" />';
+    document.body.appendChild(filePickerForm);
+    /** @type {HTMLInputElement} */
+    const filePickerInput = filePickerForm.childNodes[0];
+    filePickerInput.accept = [
+        "image/jpeg", 
+        "image/apng", 
+        "image/avif", 
+        "image/gif", 
+        "image/png", 
+        "image/svg+xml", 
+        "image/webp"
+    ].join(",");
+
+    filePickerInput.onchange = () => {
+        if (!filePickerInput.files.length) return;
+
+        const file = filePickerInput.files[0];
+        const reader = new FileReader;
+        reader.onload = (event) => {
+            const result = event.target.result;
+            const id = Spicetify.URI.from(filePickerInput.uri).id;
+            try {
+                localStorage.setItem(
+                    "dribbblish:folder-image:" + id, 
+                    result
+                );
+            } catch {
+                Spicetify.showNotification("File too large");
+            }
+            DribbblishShared.loadPlaylistImage?.call();
+        }
+        reader.readAsDataURL(file);
+    }
+
+    // context menu items for custom folder images
+    new Spicetify.ContextMenu.Item("Remove folder image",
+        ([uri]) => {
+            const id = Spicetify.URI.from(uri).id;
+            localStorage.removeItem("dribbblish:folder-image:" + id);
+            DribbblishShared.loadPlaylistImage?.call();
+        },
+        ([uri]) => Spicetify.URI.isFolder(uri),
+        "x",
+    ).register();
+    new Spicetify.ContextMenu.Item("Choose folder image",
+        ([uri]) => {
+            filePickerInput.uri = uri;
+            filePickerForm.reset();
+            filePickerInput.click();
+        },
+        ([uri]) => Spicetify.URI.isFolder(uri),
+        "edit",
+    ).register();
+})();
@@ -14,16 +14,14 @@ html.buddyFeed-hide-text {

@font-face {
    font-family: "Google Sans Display";
-    src: url("glue-resources/fonts/GoogleSansDisplayRegular.woff2")
-        format("woff2");
+    src: url("glue-resources/fonts/GoogleSansDisplayRegular.woff2") format("woff2");
    font-style: normal;
    font-weight: 400;
 }

@font-face {
    font-family: "Google Sans Display";
-    src: url("glue-resources/fonts/GoogleSansDisplayMedium.woff2")
-        format("woff2");
+    src: url("glue-resources/fonts/GoogleSansDisplayMedium.woff2") format("woff2");
    font-style: normal;
    font-weight: 500;
 }
@@ -43,14 +41,10 @@ html.buddyFeed-hide-text {
 }

 body {
-    --glue-font-family: "Google Sans Display", "Roboto", spotify-circular,
-        spotify-circular-cyrillic, spotify-circular-arabic,
-        spotify-circular-hebrew, Helvetica Neue, helvetica, arial,
+    --glue-font-family: "Google Sans Display", "Roboto", spotify-circular, spotify-circular-cyrillic, spotify-circular-arabic, spotify-circular-hebrew, Helvetica Neue, helvetica, arial,
        Hiragino Kaku Gothic Pro, Meiryo, MS Gothic, sans-serif;
-    --info-font-family: "Roboto", spotify-circular, spotify-circular-cyrillic,
-        spotify-circular-arabic, spotify-circular-hebrew, Helvetica Neue,
-        helvetica, arial, Hiragino Kaku Gothic Pro, Meiryo, MS Gothic,
-        sans-serif;
+    --info-font-family: "Roboto", spotify-circular, spotify-circular-cyrillic, spotify-circular-arabic, spotify-circular-hebrew, Helvetica Neue, helvetica, arial, Hiragino Kaku Gothic Pro, Meiryo,
+        MS Gothic, sans-serif;
    font-family: var(--glue-font-family);
    letter-spacing: normal;
 }
@@ -265,11 +259,7 @@ span.artist-artistVerifiedBadge-badge svg > path:last-of-type {
 .main-nowPlayingBar-container {
    border-radius: 0 0 var(--main-corner-radius) var(--main-corner-radius);
    background-color: unset;
-    background: radial-gradient(
-        ellipse at right 50% bottom -80px,
-        rgba(var(--spice-rgb-sidebar), 0.55),
-        var(--spice-main) 60%
-    );
+    background: radial-gradient(ellipse at right 50% bottom -80px, rgba(var(--spice-rgb-sidebar), 0.55), var(--spice-main) 60%);
    border-top: 0;
    min-width: 518px;
 }
@@ -498,9 +488,7 @@ img.playlist-picture[src$=".svg"] {
 }

 .main-rootlist-rootlistItem {
-    padding-left: calc(
-        var(--indentation) * var(--left-sidebar-item-indentation-width)
-    ) !important;
+    padding-left: calc(var(--indentation) * var(--left-sidebar-item-indentation-width)) !important;
    padding-right: 0 !important;
    transition: padding-left 0.5s ease;
 }
@@ -544,8 +532,7 @@ li.GlueDropTarget {
    padding-top: calc(var(--os-windows-icon-dodge) * 24px);
 }

-.spotify__container--is-desktop:not(.fullscreen).spotify__os--is-windows
-    .main-navBar-entryPoints {
+.spotify__container--is-desktop:not(.fullscreen).spotify__os--is-windows .main-navBar-entryPoints {
    padding-top: calc(var(--os-windows-icon-dodge) * 12px + 12px);
 }

@@ -553,8 +540,7 @@ li.GlueDropTarget {
    padding-top: calc(var(--os-windows-icon-dodge) * 32px);
 }

-.spotify__container--is-desktop.spotify__os--is-windows[dir="ltr"]
-    .main-topBar-container {
+.spotify__container--is-desktop.spotify__os--is-windows[dir="ltr"] .main-topBar-container {
    padding-right: calc(var(--os-windows-icon-dodge) * 135px + 32px);
 }

@@ -563,10 +549,8 @@ li.GlueDropTarget {
 }

 /** Linux-specific remove padding */
-.spotify__container--is-desktop:not(.fullscreen).spotify__os--is-linux
-    .main-navBar-entryPoints,
-.spotify__container--is-desktop:not(.fullscreen).spotify__os--is-linux
-    .main-navBar-navBar {
+.spotify__container--is-desktop:not(.fullscreen).spotify__os--is-linux .main-navBar-entryPoints,
+.spotify__container--is-desktop:not(.fullscreen).spotify__os--is-linux .main-navBar-navBar {
    padding-top: 0;
 }

@@ -668,8 +652,7 @@ li.GlueDropTarget {
 }

 .main-collectionLinkButton-collectionLinkButton .main-collectionLinkButton-icon,
-.main-collectionLinkButton-collectionLinkButton
-    .main-collectionLinkButton-collectionLinkText,
+.main-collectionLinkButton-collectionLinkButton .main-collectionLinkButton-collectionLinkText,
 .main-createPlaylistButton-button {
    opacity: 1;
 }
@@ -703,27 +686,14 @@ li.GlueDropTarget {
    padding: var(--main-gap) 0;
 }

-.Root__top-container:has(> .main-buddyFeed-container):not(
-        .Root__top-container--right-sidebar-hidden
-    ) {
+.Root__top-container:has(> .main-buddyFeed-container ) {
    grid-template-areas:
        "top-bar top-bar top-bar"
        "nav-bar main-view right-sidebar"
        "nav-bar now-playing-bar right-sidebar";
 }

-/* for spotify v prior to 1.2.9 */
-
-.Root__top-container:not(:has(> .main-buddyFeed-container)) {
-    grid-template-areas:
-        "top-bar top-bar"
-        "nav-bar main-view"
-        "nav-bar now-playing-bar";
-    padding-right: var(--main-gap);
-}
-
-/* for spotify v 1.2.9 */
-.Root__top-container.Root__top-container--right-sidebar-hidden {
+.Root__top-container:not(:has(> .main-buddyFeed-container )) {
    grid-template-areas:
        "top-bar top-bar"
        "nav-bar main-view"
@@ -757,9 +727,7 @@ html.right-expanded-cover .main-coverSlotExpanded-container {
    left: unset;
 }

-html.right-expanded-cover
-    .Root__top-container--right-sidebar-visible
-    .main-coverSlotExpanded-container {
+html.right-expanded-cover .Root__top-container--right-sidebar-visible .main-coverSlotExpanded-container {
    right: calc(var(--main-gap) + var(--panel-width) + 10px);
    left: unset;
 }
@@ -903,21 +871,13 @@ section.contentSpacing {
 }

 /* add fade to sidebar playlist list */
-.main-navBar-navBar
-    .os-viewport.os-viewport-native-scrollbars-invisible[fade="full"] {
-    -webkit-mask-image: linear-gradient(
-        transparent 0%,
-        black 10%,
-        black 90%,
-        transparent 100%
-    );
+.main-navBar-navBar .os-viewport.os-viewport-native-scrollbars-invisible[fade="full"] {
+    -webkit-mask-image: linear-gradient(transparent 0%, black 10%, black 90%, transparent 100%);
 }
-.main-navBar-navBar
-    .os-viewport.os-viewport-native-scrollbars-invisible[fade="top"] {
+.main-navBar-navBar .os-viewport.os-viewport-native-scrollbars-invisible[fade="top"] {
    -webkit-mask-image: linear-gradient(transparent 0%, black 10%);
 }
-.main-navBar-navBar
-    .os-viewport.os-viewport-native-scrollbars-invisible[fade="bottom"] {
+.main-navBar-navBar .os-viewport.os-viewport-native-scrollbars-invisible[fade="bottom"] {
    -webkit-mask-image: linear-gradient(black 90%, transparent 100%);
 }

@@ -933,11 +893,6 @@ section.contentSpacing {
 }

 /* buddy feed w/ hidden text*/
-
-.buddyFeed-hide-text .Root__right-sidebar {
-    width: 72px !important;
-}
-
 .buddyFeed-hide-text .NdQkQZhcYIEcJnRdAYcQ,
 .buddyFeed-hide-text .main-buddyFeed-header {
    display: none;
@@ -971,12 +926,12 @@ section.contentSpacing {
 }

 .main-buddyFeed-actions button {
-    color: var(--spice-sidebar-text);
+    color: var(--spice-sidebar-text)
 }

 .NdQkQZhcYIEcJnRdAYcQ,
 .main-buddyFeed-header {
-    padding-left: 0;
+    padding-left: 16px;
 }

 .spotify__os--is-windows .zuwPpHAEtIqahnB2u9NR {
@@ -1033,8 +988,7 @@ a.main-collectionLinkButton-collectionLinkButton.main-collectionLinkButton-selec
 }

 /* keep progress knob on page : important for js to work */
-.progress-bar:not(:hover):not(:focus):not(.DuvrswZugGajIFNXObAr)
-    .progress-bar__slider {
+.progress-bar:not(:hover):not(:focus):not(.DuvrswZugGajIFNXObAr) .progress-bar__slider {
    display: block;
    visibility: hidden;
 }
@@ -1048,29 +1002,15 @@ a.main-collectionLinkButton-collectionLinkButton.main-collectionLinkButton-selec
    transition: left 1s linear;
 }

-.playback-progressbar-isInteractive
-    .DuvrswZugGajIFNXObAr
-    .x-progressBar-fillColor,
-.playback-progressbar-isInteractive
-    .DuvrswZugGajIFNXObAr
-    .progress-bar__slider {
+.playback-progressbar-isInteractive .DuvrswZugGajIFNXObAr .x-progressBar-fillColor,
+.playback-progressbar-isInteractive .DuvrswZugGajIFNXObAr .progress-bar__slider {
    transition: none;
 }

 /* marketplace page  */
 .marketplace-header__left h1,
 .marketplace-card-type-heading {
-    font-family: var(
-        --font-family,
-        CircularSpTitle,
-        CircularSpTitle-Tall,
-        CircularSp-Arab,
-        CircularSp-Hebr,
-        CircularSp-Cyrl,
-        CircularSp-Grek,
-        CircularSp-Deva,
-        var(--fallback-fonts, sans-serif)
-    );
+    font-family: var(--font-family, CircularSpTitle, CircularSpTitle-Tall, CircularSp-Arab, CircularSp-Hebr, CircularSp-Cyrl, CircularSp-Grek, CircularSp-Deva, var(--fallback-fonts, sans-serif));
 }

 [dir="ltr"] .collection-collection-tabBar {