fix app to work with latest spotify version

5 files changed, 197 insertions, 0 deletions

diff --git a/CustomApps/betterLibrary/betterlibrary.js b/CustomApps/betterLibrary/betterlibrary.js
new file mode 100644
index 0000000..7650f29
--- /dev/null
+++ b/CustomApps/betterLibrary/betterlibrary.js
@@ -0,0 +1,67 @@
+var library;
+var sidebar;
+var text;
+var center;
+var betterLibIsEnabled;
+var lastSidebarSize;
+var lastSidebarMode; // 1=collapsed, 0=normal, 2=expanded
+
+// Disables betterlibrary when the pages is left
+function startListener() {
+    Spicetify.Platform.History.listen((location) => {
+        if (location.pathname != '/betterlibrary' && betterLibIsEnabled)
+            disableBetterLib();
+    });
+}
+
+function enableBetterLib() {
+    waitForElm('.betterLibBox').then((elm) => {
+        if (!betterLibIsEnabled)
+        {
+            library = document.getElementsByClassName("main-yourLibraryX-libraryContainer")[0];
+            text = document.getElementsByClassName("betterLibText")[0];
+            sidebar = document.getElementsByClassName("main-yourLibraryX-library")[0];
+            center = document.getElementsByClassName("betterLibBox")[0];
+            center.appendChild(library);
+            sidebar.appendChild(text);
+            if (Spicetify.Platform.History)
+            lastSidebarMode = Spicetify.Platform.LocalStorageAPI.getItem("ylx-sidebar-state");
+            lastSidebarSize = document.documentElement.style.getPropertyValue("--left-sidebar-width");
+            Spicetify.Platform.LocalStorageAPI.setItem("ylx-sidebar-state",2);
+            if (lastSidebarMode != 1) //uncollapes sidebar temporarily while in betterlibrary
+                document.documentElement.style.setProperty("--left-sidebar-width", lastSidebarSize);
+            else
+                document.documentElement.style.setProperty("--left-sidebar-width", "280px");
+            betterLibIsEnabled = true;
+        }
+    });
+}
+
+function disableBetterLib() {
+    sidebar.appendChild(library);
+    center.appendChild(text);
+    Spicetify.Platform.LocalStorageAPI.setItem("ylx-sidebar-state",lastSidebarMode);
+    document.documentElement.style.setProperty("--left-sidebar-width", lastSidebarSize);
+    betterLibIsEnabled = false;
+}
+
+//source: https://stackoverflow.com/questions/5525071/how-to-wait-until-an-element-exists
+function waitForElm(selector) {
+    return new Promise(resolve => {
+        if (document.querySelector(selector)) {
+            return resolve(document.querySelector(selector));
+        }
+
+        const observer = new MutationObserver(mutations => {
+            if (document.querySelector(selector)) {
+                observer.disconnect();
+                resolve(document.querySelector(selector));
+            }
+        });
+
+        observer.observe(document.body, {
+            childList: true,
+            subtree: true
+        });
+    });
+}
\ No newline at end of file
diff --git a/CustomApps/betterLibrary/index.js b/CustomApps/betterLibrary/index.js
new file mode 100644
index 0000000..4b09a88
--- /dev/null
+++ b/CustomApps/betterLibrary/index.js
@@ -0,0 +1,45 @@
+// this part was mostly copied from an example
+
+// Grab any variables you need
+const react = Spicetify.React;
+const reactDOM = Spicetify.ReactDOM;
+const {
+    URI,
+    React: { useState, useEffect, useCallback },
+    Platform: { History },
+} = Spicetify;
+
+// this is called when the page is open
+function render() {
+    startListener(); //I added this
+    enableBetterLib(); //And this
+    return react.createElement(Grid, { title: "Opened in the center pane" });
+}
+
+//builds components of the page
+class Grid extends react.Component {
+    constructor(props) {
+        super(props);
+        Object.assign(this, props);
+        this.state = {
+            foo: "bar", //dont know what these do but its working so ill leave them be
+            data: "etc"
+        };
+    }
+
+    render() {
+        return react.createElement("section", {
+            className: "betterLibSection",
+            },
+            react.createElement("div",{
+                className: "betterLibBox"
+            },
+            react.createElement("div", {
+                className: "betterLibText",
+                },  
+                react.createElement("h4", null, this.props.title),
+            ),
+            )
+        );
+    }
+}
\ No newline at end of file
diff --git a/CustomApps/betterLibrary/loadcss.js b/CustomApps/betterLibrary/loadcss.js
new file mode 100644
index 0000000..184b445
--- /dev/null
+++ b/CustomApps/betterLibrary/loadcss.js
@@ -0,0 +1,12 @@
+(function loadcss() {
+    document.getElementsByTagName('head')[0].insertAdjacentHTML(
+        'beforeend',
+        '<link rel="stylesheet" href="spicetify-routes-betterlibrary.css" />');
+    // disable after window is closed to prevent an expanded sidebar on opening
+    window.addEventListener(
+        'beforeunload',
+        (event) => {
+            disableBetterLib();
+        }
+        )
+})();
\ No newline at end of file
diff --git a/CustomApps/betterLibrary/manifest.json b/CustomApps/betterLibrary/manifest.json
new file mode 100644
index 0000000..043f9d8
--- /dev/null
+++ b/CustomApps/betterLibrary/manifest.json
@@ -0,0 +1,6 @@
+{
+    "name": "Your Library",
+    "icon": "<svg role=\"img\" height=\"24\" width=\"24\" aria-hidden=\"true\" viewBox=\"0 0 24 24\" data-encore-id=\"icon\" class=\"Svg-sc-ytk21e-0 Svg-img-24-icon\"><path d=\"M14.5 2.134a1 1 0 0 1 1 0l6 3.464a1 1 0 0 1 .5.866V21a1 1 0 0 1-1 1h-6a1 1 0 0 1-1-1V3a1 1 0 0 1 .5-.866zM16 4.732V20h4V7.041l-4-2.309zM3 22a1 1 0 0 1-1-1V3a1 1 0 0 1 2 0v18a1 1 0 0 1-1 1zm6 0a1 1 0 0 1-1-1V3a1 1 0 0 1 2 0v18a1 1 0 0 1-1 1z\"></path></svg>",
+    "active-icon": "<svg role=\"img\" height=\"24\" width=\"24\" aria-hidden=\"true\" viewBox=\"0 0 24 24\" data-encore-id=\"icon\" class=\"Svg-sc-ytk21e-0 Svg-img-24-icon\"><path d=\"M3 22a1 1 0 0 1-1-1V3a1 1 0 0 1 2 0v18a1 1 0 0 1-1 1zM15.5 2.134A1 1 0 0 0 14 3v18a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V6.464a1 1 0 0 0-.5-.866l-6-3.464zM9 2a1 1 0 0 0-1 1v18a1 1 0 1 0 2 0V3a1 1 0 0 0-1-1z\"></path></svg>",
+    "subfiles_extension": ["betterlibrary.js","loadcss.js"]
+}
\ No newline at end of file
diff --git a/CustomApps/betterLibrary/style.css b/CustomApps/betterLibrary/style.css
new file mode 100644
index 0000000..69f1b25
--- /dev/null
+++ b/CustomApps/betterLibrary/style.css
@@ -0,0 +1,67 @@
+/* remove resize bar while in betterlibrary */
+.Root__top-container:has(.betterLibBox) .LayoutResizer__resize-bar {
+    visibility: hidden;
+}
+
+/* creates the centered placeholder text on the sidebar where the library was */
+.betterLibText {
+    display: none;
+    justify-content: center;
+    align-items: center;
+    height: 100%;
+}
+
+/* makes the text visible only when it is in the sidebar */
+.main-yourLibraryX-library .betterLibText {
+    display: flex;
+}
+
+/* makes the "your library" text not clickable */
+.Button-sc-1dqy6lx-0.Button-md-24-buttonTertiary-iconLeading-condensed-useBrowserDefaultFocusStyle.main-yourLibraryX-collapseButtonWrapper.main-yourLibraryX-button.main-useDropTarget-base,
+.Button-sc-1dqy6lx-0.Button-md-24-buttonTertiary-iconLeading-condensed-useBrowserDefaultFocusStyle.main-yourLibraryX-collapseButtonWrapper.main-yourLibraryX-button.main-useDropTarget-base.main-useDropTarget-track.main-useDropTarget-album.main-useDropTarget-artist.main-useDropTarget-playlistV2.main-useDropTarget-show.main-useDropTarget-episode
+{
+    pointer-events: none;
+    font-size: x-large;
+    color: white;
+}
+
+/* hides the library header when in the sidebar*/
+.main-yourLibraryX-library .main-yourLibraryX-header {
+    display: none;
+}
+
+/* shows the header if the user is in a folder*/
+.main-yourLibraryX-library .main-yourLibraryX-header:has(.WYU7SXdABSulyirnmIYb) {
+    display: flex;
+}
+
+/* hides collapse button */
+.IconWrapper__Wrapper-sc-16usrgb-0.Wrapper-md-leading {
+    display: none;
+}
+
+/* hides collapse button in folder*/
+.Button-sc-1dqy6lx-0.Button-md-24-buttonTertiary-iconOnly-condensed-useBrowserDefaultFocusStyle.main-yourLibraryX-collapseButtonWrapper.main-yourLibraryX-button.main-useDropTarget-base
+{
+    display: none;
+}
+
+/* hides expand/reduce button (and also add and more) */
+button.Button-sc-1dqy6lx-0.Button-sm-16-buttonTertiary-iconOnly-useBrowserDefaultFocusStyle.main-yourLibraryX-button.main-yourLibraryX-iconOnly.main-useDropTarget-base {
+    display: none;
+}
+
+/* shows add */
+button.Button-sc-1dqy6lx-0.Button-sm-16-buttonTertiary-iconOnly-useBrowserDefaultFocusStyle.main-yourLibraryX-createButton.main-yourLibraryX-button.main-yourLibraryX-iconOnly.main-useDropTarget-base.main-useDropTarget-track.main-useDropTarget-album.main-useDropTarget-playlistV2 {
+    display: inherit;
+}
+
+/* shows more */
+span button.Button-sc-1dqy6lx-0.Button-sm-16-buttonTertiary-iconOnly-useBrowserDefaultFocusStyle.main-yourLibraryX-button.main-yourLibraryX-iconOnly.main-useDropTarget-base {
+    display: inherit;
+}
+
+/* add more padding to the sidebar */
+.main-yourLibraryX-library {
+    padding-top: 5px;
+}
\ No newline at end of file