add seperate display settings, fix collaped mode

Sowgro · Oct 30, 2023 · c098250 · c098250
1 parent 5bf1ebb
commit c098250
Show file tree

Hide file tree

Showing 4 changed files with 65 additions and 12 deletions.
diff --git a/CustomApps/betterLibrary/betterlibrary.js b/CustomApps/betterLibrary/betterlibrary.js
@@ -3,8 +3,10 @@ var sidebar;
 var text;
 var center;
 var betterLibIsEnabled;
-var lastSidebarSize;
-var lastSidebarMode; // 1=collapsed, 0=normal, 2=expanded
+var lastSidebarSize; //
+var lastSidebarMode; //ylx-sidebar-state 1=collapsed, 0=normal, 2=expanded
+var lastViewIcons; //items-view 1=icons 2=list
+var lastViewCompact; //library-row-mode 1=compact 2=normal
 
 // Disables betterlibrary when the pages is left
 function startListener() {
@@ -18,30 +20,71 @@ function enableBetterLib() {
     waitForElm('.betterLibBox').then((elm) => {
         if (!betterLibIsEnabled)
         {
+            //swap elements
             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)
+
+            //store last mode and size
             lastSidebarMode = Spicetify.Platform.LocalStorageAPI.getItem("ylx-sidebar-state");
-            lastSidebarSize = document.documentElement.style.getPropertyValue("--left-sidebar-width");
+            lastSidebarSize = Spicetify.Platform.LocalStorageAPI.getItem("ylx-expanded-state-nav-bar-width");
+
+            //set new mode and size
+            currentSidebarSize = document.documentElement.style.getPropertyValue("--left-sidebar-width");
+            currentSidebarSize = parseInt(currentSidebarSize, 10);
+            Spicetify.Platform.LocalStorageAPI.setItem("ylx-expanded-state-nav-bar-width",currentSidebarSize);
             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");
+
+            //fix collaped library buttons
+            if (lastSidebarMode == 1) {
+                document.documentElement.style.setProperty("--betterlib-fix-collaped-view","none");
+                document.documentElement.style.setProperty("--betterlib-show-placeholder-text","none");
+            }
+
+            //store last icons mode and compact mode
+            lastViewIcons = Spicetify.Platform.LocalStorageAPI.getItem("items-view")
+            lastViewCompact = Spicetify.Platform.LocalStorageAPI.getItem("library-row-mode")
+
+            //get betterlib icons mode and compact mode from storage
+            newViewIcons = Spicetify.Platform.LocalStorageAPI.getItem("betterlib-items-view")
+            newViewCompact = Spicetify.Platform.LocalStorageAPI.getItem("betterlib-library-row-mode")
+
+            //apply betterlib icons mode and compact mode
+            Spicetify.Platform.LocalStorageAPI.setItem("items-view", newViewIcons);
+            Spicetify.Platform.LocalStorageAPI.setItem("library-row-mode", newViewCompact);
+
+
             betterLibIsEnabled = true;
         }
     });
 }
 
 function disableBetterLib() {
+    //undo fix for collaped library buttons
+    if (lastSidebarMode == 1) {
+        document.documentElement.style.setProperty("--betterlib-fix-collaped-view","inherit");
+        document.documentElement.style.setProperty("--betterlib-show-placeholder-text","flex");
+    }
+
+    //revert swap
     sidebar.appendChild(library);
     center.appendChild(text);
+
+    //reset mode and size to last
+    Spicetify.Platform.LocalStorageAPI.setItem("lx-expanded-state-nav-bar-width",lastSidebarSize);
     Spicetify.Platform.LocalStorageAPI.setItem("ylx-sidebar-state",lastSidebarMode);
-    document.documentElement.style.setProperty("--left-sidebar-width", lastSidebarSize);
+
+    //save betterlib icons mode and compact mode to storage
+    Spicetify.Platform.LocalStorageAPI.setItem("betterlib-items-view", Spicetify.Platform.LocalStorageAPI.getItem("items-view"));
+    Spicetify.Platform.LocalStorageAPI.setItem("betterlib-library-row-mode", Spicetify.Platform.LocalStorageAPI.getItem("library-row-mode"));
+
+    //revert icons and compact mode to last
+    Spicetify.Platform.LocalStorageAPI.setItem("items-view", lastViewIcons);
+    Spicetify.Platform.LocalStorageAPI.setItem("library-row-mode", lastViewCompact);
+
     betterLibIsEnabled = false;
 }
 

diff --git a/CustomApps/betterLibrary/index.js b/CustomApps/betterLibrary/index.js
@@ -13,7 +13,7 @@ const {
 function render() {
     startListener(); //I added this
     enableBetterLib(); //And this
-    return react.createElement(Grid, { title: "Opened in the center pane" });
+    return react.createElement(Grid, { title: "Open in the main view" });
 }
 
 //builds components of the page

diff --git a/CustomApps/betterLibrary/loadcss.js b/CustomApps/betterLibrary/loadcss.js
diff --git a/CustomApps/betterLibrary/style.css b/CustomApps/betterLibrary/style.css
@@ -13,7 +13,7 @@
 
 /* makes the text visible only when it is in the sidebar */
 .main-yourLibraryX-library .betterLibText {
-    display: flex;
+    display: var(--betterlib-show-placeholder-text);
 }
 
 /* makes the "your library" text not clickable */
@@ -64,4 +64,14 @@ span button.Button-sc-1dqy6lx-0.Button-sm-16-buttonTertiary-iconOnly-useBrowserD
 /* add more padding to the sidebar */
 .main-yourLibraryX-library {
     padding-top: 5px;
+}
+
+/* fixes icons on collapsed betterlibrary */
+span.Type__TypeElement-sc-goli3j-0.TypeElement-balladBold-type {
+    display: var(--betterlib-fix-collaped-view,inherit);
+}
+
+/* for future setting */
+.main-yourLibraryX-entryPoints.main-yourLibraryX-library {
+    display: var(--betterlib-hide-sidebar-library,inherit);
 }