feat(app)!: v2.0.0 - New implementation after Spotify update

.gitignore

@@ -142,3 +142,6 @@ out
 .svelte-kit
 
 # End of https://www.toptal.com/developers/gitignore/api/node
+
+# .idea directory from Jetbrains
+.idea

README.md

@@ -1,7 +1,10 @@
 # LuckyLP - Spicetify Extension
 
-LuckyLP is a Spicetify Extension which allows to easily choose random album from your album collection. Just press the "Get Random Saved Album" button located in the header section of album collection page.
+LuckyLP is a Spicetify Extension which allows to easily choose random album from your album collection. Just press the _"Get Random Saved Album"_ button located in the navigation section of home or album page.
 
+> **Note:** This extension only works with 
+> - Spicetify v2.20.0 and above
+> - Spotify 1.2.15.828.g79f41970 and above
 
 ## Installation
 
@@ -23,10 +26,12 @@ spicetify config extensions LuckyLP.js
 spicetify apply
 ```
 
-## Screeshots
+## Screeshot
 
 ![Screenshot 1](/screenshots/Screenshot_1.png)
 
+![Screenshot 2](/screenshots/Screenshot_2.png)
+
 ## Docs
 Check out [Spicetify's docs](https://spicetify.app/docs/development/spicetify-creator/the-basics)!
 

manifest.json

@@ -1,11 +1,11 @@
 {
   "name": "LuckyLP",
-  "description": "Spicetify extension to add 'Get Random Saved Album' in user's Album Collection",
-  "preview": "screenshots/Screenshot_2.png",
+  "description": "Spicetify extension to add 'Get Random Saved Album' in user's Home Page",
+  "preview": "screenshots/Extension_prev.png",
   "main": "LuckyLP.js",
   "readme": "README.md",
   "authors": [
     { "name": "Akasiek", "url": "https://github.com/Akasiek" }
   ],
   "tags": ["album collection"]
-}
+}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "lucky-lp",
-  "version": "1.2.1",
+  "version": "2.0.0",
   "private": true,
   "scripts": {
     "build": "spicetify-creator",

src/app.ts

@@ -0,0 +1,26 @@
+import { isAlbumPage, isHomePage } from "./util";
+import { addButton, removeButton } from "./button";
+
+const toggleButton = () => {
+  if (isHomePage() || isAlbumPage()) {
+    addButton();
+  } else {
+    removeButton();
+  }
+};
+
+async function main() {
+  while (!Spicetify?.showNotification && !Spicetify?.Platform) {
+    await new Promise((resolve) => setTimeout(resolve, 500));
+  }
+
+  // Show button on app load
+  toggleButton();
+
+  // Show button depending on navigation
+  Spicetify.Platform.History.listen(() => {
+    toggleButton();
+  });
+}
+
+export default main;

src/button.ts

@@ -0,0 +1,28 @@
+import ShuffleIcon from "./shuffleIcon";
+import { handleClick } from "./util";
+
+const renderButton = () => {
+  const randomBtn = new Spicetify.Topbar.Button(
+    "Get Random Saved Album",
+    `<svg role="img" height="16" width="16" viewBox="0 0 16 16" fill="currentColor">${ShuffleIcon}</svg>`,
+    handleClick
+  );
+
+  randomBtn.element.id = "random-saved-album-btn";
+};
+
+export const addButton = () => {
+  const btn = document.getElementById("random-saved-album-btn");
+
+  if (!btn) {
+    renderButton();
+  }
+};
+
+export const removeButton = () => {
+  const btn = document.getElementById("random-saved-album-btn");
+
+  if (btn) {
+    btn.remove();
+  }
+};

src/shuffleIcon.ts

@@ -0,0 +1,5 @@
+const ShuffleIcon = () =>
+  `<path d="M13.151.922a.75.75 0 1 0-1.06 1.06L13.109 3H11.16a3.75 3.75 0 0 0-2.873 1.34l-6.173 7.356A2.25 2.25 0 0 1 .39 12.5H0V14h.391a3.75 3.75 0 0 0 2.873-1.34l6.173-7.356a2.25 2.25 0 0 1 1.724-.804h1.947l-1.017 1.018a.75.75 0 0 0 1.06 1.06L15.98 3.75 13.15.922zM.391 3.5H0V2h.391c1.109 0 2.16.49 2.873 1.34L4.89 5.277l-.979 1.167-1.796-2.14A2.25 2.25 0 0 0 .39 3.5z"></path>
+    <path d="m7.5 10.723.98-1.167.957 1.14a2.25 2.25 0 0 0 1.724.804h1.947l-1.017-1.018a.75.75 0 1 1 1.06-1.06l2.829 2.828-2.829 2.828a.75.75 0 1 1-1.06-1.06L13.109 13H11.16a3.75 3.75 0 0 1-2.873-1.34l-.787-.938z"></path>`;
+
+export default ShuffleIcon;

src/util.ts

@@ -1,8 +1,13 @@
 import { IAlbum, ISavedAlbums } from "./types/api";
 
-export const isAlbumCollectionPage = () => {
+export const isHomePage = () => {
   const pathname = Spicetify.Platform.History.location.pathname;
-  return pathname === "/collection/albums";
+  return pathname === "/";
+};
+
+export const isAlbumPage = () => {
+  const pathname = Spicetify.Platform.History.location.pathname;
+  return pathname.startsWith("/album/");
 };
 
 const getRandomAlbumIndex = (total: number): number =>