From 7e1699a57a0e62b88581a9603ba14171d8297098 Mon Sep 17 00:00:00 2001 From: Sowgro <69283684+Sowgro@users.noreply.github.com> Date: Mon, 11 Sep 2023 17:34:25 -0400 Subject: Upload more files --- app/betterlibrary.js | 84 ++++++++++++++++++++++++++++++++++++++++------------ app/index.js | 50 ++++++++++++------------------- app/loadcss.js | 5 ++++ app/manifest.json | 4 +-- app/style.css | 49 ++++++++++++++++++++++++++++-- 5 files changed, 138 insertions(+), 54 deletions(-) create mode 100644 app/loadcss.js 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', + ''); +})(); \ 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": "", "active-icon": "", - "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 -- cgit v1.2.3