diff options
| -rw-r--r-- | app/betterlibrary.js | 84 | ||||
| -rw-r--r-- | app/index.js | 50 | ||||
| -rw-r--r-- | app/loadcss.js | 5 | ||||
| -rw-r--r-- | app/manifest.json | 4 | ||||
| -rw-r--r-- | app/style.css | 49 |
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 |