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 --- app/betterlibrary.js | 67 ---------------------------------------------------- app/index.js | 45 ----------------------------------- app/loadcss.js | 12 ---------- app/manifest.json | 6 ----- app/style.css | 67 ---------------------------------------------------- 5 files changed, 197 deletions(-) delete mode 100644 app/betterlibrary.js delete mode 100644 app/index.js delete mode 100644 app/loadcss.js delete mode 100644 app/manifest.json delete mode 100644 app/style.css (limited to 'app') diff --git a/app/betterlibrary.js b/app/betterlibrary.js deleted file mode 100644 index f2f2d8c..0000000 --- a/app/betterlibrary.js +++ /dev/null @@ -1,67 +0,0 @@ -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("--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 deleted file mode 100644 index 4b09a88..0000000 --- a/app/index.js +++ /dev/null @@ -1,45 +0,0 @@ -// 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/app/loadcss.js b/app/loadcss.js deleted file mode 100644 index 184b445..0000000 --- a/app/loadcss.js +++ /dev/null @@ -1,12 +0,0 @@ -(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/app/manifest.json b/app/manifest.json deleted file mode 100644 index 043f9d8..0000000 --- a/app/manifest.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "name": "Your Library", - "icon": "", - "active-icon": "", - "subfiles_extension": ["betterlibrary.js","loadcss.js"] -} \ No newline at end of file diff --git a/app/style.css b/app/style.css deleted file mode 100644 index 69f1b25..0000000 --- a/app/style.css +++ /dev/null @@ -1,67 +0,0 @@ -/* 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