From 2088eba08cec721551bda691aa4a1d7bd2606b2c Mon Sep 17 00:00:00 2001 From: sowgro Date: Wed, 20 Sep 2023 14:56:03 -0400 Subject: fix app to work with latest spotify version --- CustomApps/betterLibrary/betterlibrary.js | 67 +++++++++++++++++++++++++++++++ CustomApps/betterLibrary/index.js | 45 +++++++++++++++++++++ CustomApps/betterLibrary/loadcss.js | 12 ++++++ CustomApps/betterLibrary/manifest.json | 6 +++ CustomApps/betterLibrary/style.css | 67 +++++++++++++++++++++++++++++++ 5 files changed, 197 insertions(+) create mode 100644 CustomApps/betterLibrary/betterlibrary.js create mode 100644 CustomApps/betterLibrary/index.js create mode 100644 CustomApps/betterLibrary/loadcss.js create mode 100644 CustomApps/betterLibrary/manifest.json create mode 100644 CustomApps/betterLibrary/style.css (limited to 'CustomApps') 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', + ''); + // 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": "", + "active-icon": "", + "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 -- cgit v1.2.3