Upload more files

5 files changed, 138 insertions, 54 deletions

diff --git a/app/betterlibrary.js b/app/betterlibrary.js
index 9649bea..f2f2d8c 100644
--- a/app/betterlibrary.js
+++ b/app/betterlibrary.js
@@ -1,21 +1,67 @@
-var a;
+var library;
+var sidebar;
+var text;
+var center;
+var betterLibIsEnabled;
+var lastSidebarSize;
+var lastSidebarMode; // 1=collapsed, 0=normal, 2=expanded
 
-function betterlibrary() {
-    if (a == undefined)
-        try {
-            a = document.getElementsByClassName("main-yourLibraryX-libraryContainer")[0];
-            console.log("setting a");
-        } catch (error) {
-            
-    }
-    try {
-        setTimeout(() => {
-            document.getElementsByClassName("betterlibheader")[0].prepend(a);
-            // document.getElementsByClassName("main-yourLibraryX-entryPoints")[0].appendChild(a);
-        }, 100);
-        console.log("did not catch");
-    } catch (error) {
-        console.log("catch!!");
-        console.error(error);
-    }
+// 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("--nav-bar-width");
+            Spicetify.Platform.LocalStorageAPI.setItem("ylx-sidebar-state",2);
+            if (lastSidebarMode != 1) //uncollapes sidebar temporarily while in betterlibrary
+                document.documentElement.style.setProperty("--nav-bar-width", lastSidebarSize);
+            else
+                document.documentElement.style.setProperty("--nav-bar-width", "280px");
+            betterLibIsEnabled = true;
+        }
+    });
+}
+
+function disableBetterLib() {
+    sidebar.appendChild(library);
+    center.appendChild(text);
+    Spicetify.Platform.LocalStorageAPI.setItem("ylx-sidebar-state",lastSidebarMode);
+    document.documentElement.style.setProperty("--nav-bar-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/app/index.js b/app/index.js
index b6f1a9b..4b09a88 100644
--- a/app/index.js
+++ b/app/index.js
@@ -1,3 +1,5 @@
+// this part was mostly copied from an example
+
 // Grab any variables you need
 const react = Spicetify.React;
 const reactDOM = Spicetify.ReactDOM;
@@ -7,51 +9,37 @@ const {
     Platform: { History },
 } = Spicetify;
 
-// The main custom app render function. The component returned is what is rendered in Spotify.
+// this is called when the page is open
 function render() {
-    betterlibrary();
-    return react.createElement(Grid, { title: "loading..." });
+    startListener(); //I added this
+    enableBetterLib(); //And this
+    return react.createElement(Grid, { title: "Opened in the center pane" });
 }
 
-// Our main component
+//builds components of the page
 class Grid extends react.Component {
     constructor(props) {
         super(props);
         Object.assign(this, props);
         this.state = {
-            foo: "bar",
+            foo: "bar", //dont know what these do but its working so ill leave them be
             data: "etc"
         };
-        // console.log("test");
     }
 
     render() {
         return react.createElement("section", {
-            className: "contentSpacing",
-        },
-        react.createElement("div", {
-            className: "betterlibheader",
-        }, react.createElement("h1", null, this.props.title),
-        ),
+            className: "betterLibSection",
+            },
+            react.createElement("div",{
+                className: "betterLibBox"
+            },
+            react.createElement("div", {
+                className: "betterLibText",
+                },  
+                react.createElement("h4", null, this.props.title),
+            ),
+            )
         );
-        // ), react.createElement("div", {
-        //     id: "marketplace-grid",
-        //     className: "main-gridContainer-gridContainer",
-        //     "data-tab": CONFIG.activeTab,
-        //     style: {
-        //         "--minimumColumnWidth": "180px",
-        //     },
-        // }, [...cardList]),
-        // react.createElement("footer", {
-        //     style: {
-        //         margin: "auto",
-        //         textAlign: "center",
-        //     },
-        // }, !this.state.endOfList && (this.state.rest ? react.createElement(LoadMoreIcon, { onClick: this.loadMore.bind(this) }) : react.createElement(LoadingIcon)),
-        // ), react.createElement(TopBarContent, {
-        //     switchCallback: this.switchTo.bind(this),
-        //     links: CONFIG.tabs,
-        //     activeLink: CONFIG.activeTab,
-        // });
     }
 }
\ No newline at end of file
diff --git a/app/loadcss.js b/app/loadcss.js
new file mode 100644
index 0000000..57f002e
--- /dev/null
+++ b/app/loadcss.js
@@ -0,0 +1,5 @@
+(function loadcss() {
+    document.getElementsByTagName('head')[0].insertAdjacentHTML(
+        'beforeend',
+        '<link rel="stylesheet" href="spicetify-routes-betterlibrary.css" />');
+})();
\ No newline at end of file
diff --git a/app/manifest.json b/app/manifest.json
index 2431a42..043f9d8 100644
--- a/app/manifest.json
+++ b/app/manifest.json
@@ -1,6 +1,6 @@
 {
-    "name": "betterlibrary",
+    "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"]
+    "subfiles_extension": ["betterlibrary.js","loadcss.js"]
 }
\ No newline at end of file
diff --git a/app/style.css b/app/style.css
index d6d155b..8777de3 100644
--- a/app/style.css
+++ b/app/style.css
@@ -1,3 +1,48 @@
-.betterlibheader{
-    margin: 0 calc(-.5 * var(--content-spacing));
+/* 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.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 expand and collapse icons */
+.Button-sc-1dqy6lx-0.Button-sm-16-buttonTertiary-iconOnly-useBrowserDefaultFocusStyle.main-yourLibraryX-button.main-yourLibraryX-iconOnly.main-useDropTarget-base.main-useDropTarget-track.main-useDropTarget-album.main-useDropTarget-artist.main-useDropTarget-playlistV2.main-useDropTarget-show.main-useDropTarget-episode,
+.Button-sc-1dqy6lx-0.Button-md-24-buttonTertiary-iconOnly-condensed-useBrowserDefaultFocusStyle.main-yourLibraryX-collapseButtonWrapper.main-yourLibraryX-button.main-useDropTarget-base.main-useDropTarget-track.main-useDropTarget-local.main-useDropTarget-album.main-useDropTarget-episode.main-useDropTarget-playlistV2,
+.Button-sc-1dqy6lx-0.Button-sm-16-buttonTertiary-iconOnly-useBrowserDefaultFocusStyle.main-yourLibraryX-button.main-yourLibraryX-iconOnly.main-useDropTarget-base.main-useDropTarget-track.main-useDropTarget-local.main-useDropTarget-album.main-useDropTarget-episode.main-useDropTarget-playlistV2, 
+.IconWrapper__Wrapper-sc-16usrgb-0.Wrapper-md-leading {
+    display: none;
+}
+
+/* add more padding to the sidebar */
+.main-yourLibraryX-library {
+    padding-top: 5px;
 }
\ No newline at end of file