feat: update Spicetify.Config when loading things in (#339)

spicetify · Sep 30, 2022 · c9d611d · c9d611d
1 parent 4b85409
commit c9d611d
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 3 deletions.
diff --git a/packages/marketplace/src/components/Card/Card.tsx b/packages/marketplace/src/components/Card/Card.tsx
@@ -280,6 +280,11 @@ class Card extends React.Component<CardProps, {
       this.props.updateActiveTheme(this.localStorageKey);
       // Update schemes in Grid, triggers state change and re-render
       this.props.updateColourSchemes(parsedSchemes, activeScheme as string);
+
+      // Add to Spicetify.Config
+      const name = this.props.item.manifest?.name;
+      if (name) Spicetify.Config.current_theme = name;
+      if (activeScheme) Spicetify.Config.color_scheme = activeScheme;
     }
 
     this.setState({ installed: true });
@@ -314,6 +319,10 @@ class Card extends React.Component<CardProps, {
       // Removes the current colour scheme
       this.props.updateColourSchemes(null, null);
 
+      // Restore Spicetify.Config
+      Spicetify.Config.current_theme = Spicetify.Config.local_theme;
+      Spicetify.Config.color_scheme = Spicetify.Config.local_color_scheme;
+
       this.setState({ installed: false });
     }
   }

diff --git a/packages/marketplace/src/extensions/extension.tsx b/packages/marketplace/src/extensions/extension.tsx
@@ -17,6 +17,7 @@ import {
   injectUserCSS,
   addToSessionStorage,
   sleep,
+  addExtensionToSpicetifyConfig,
 } from "../logic/Utils";
 import {
   getBlacklist,
@@ -65,6 +66,9 @@ import {
     script.src = `${script.src}?time=${Date.now()}`;
 
     document.body.appendChild(script);
+
+    // Add to Spicetify.Config
+    addExtensionToSpicetifyConfig(extensionManifest.manifest?.main);
   };
 
   const initializeTheme = async (themeKey: string) => {
@@ -82,6 +86,9 @@ import {
       const activeScheme = themeManifest.schemes[themeManifest.activeScheme];
       injectColourScheme(activeScheme);
 
+      // Add to Spicetify.Config
+      Spicetify.Config.color_scheme = themeManifest.activeScheme;
+
       if (localStorage.getItem(LOCALSTORAGE_KEYS.colorShift) === "true") {
         initColorShiftLoop(themeManifest.schemes);
       }
@@ -102,6 +109,9 @@ import {
     const userCSS = await parseCSS(themeManifest);
     injectUserCSS(userCSS);
 
+    // Add to Spicetify.Config
+    Spicetify.Config.current_theme = themeManifest.manifest?.name;
+
     // Inject any included js
     if (themeManifest.include && themeManifest.include.length) {
       // console.log("Including js", installedThemeData.include);
@@ -119,12 +129,18 @@ import {
         newScript.src = `${src}?time=${Date.now()}`;
         newScript.classList.add("marketplaceScript");
         document.body.appendChild(newScript);
+
+        // Add to Spicetify.Config
+        addExtensionToSpicetifyConfig(script);
       });
     }
   };
 
   console.log("Loaded Marketplace extension");
 
+  // Save to Spicetify.Config for use when removing a theme
+  Spicetify.Config.local_theme = Spicetify.Config.current_theme;
+  Spicetify.Config.local_color_scheme = Spicetify.Config.color_scheme;
   const installedThemeKey = localStorage.getItem(LOCALSTORAGE_KEYS.themeInstalled);
   if (installedThemeKey) initializeTheme(installedThemeKey);
 

diff --git a/packages/marketplace/src/logic/Utils.ts b/packages/marketplace/src/logic/Utils.ts
@@ -445,3 +445,12 @@ export const sanitizeUrl = (url: string) => {
     return "about:blank";
   return url;
 };
+
+export const addExtensionToSpicetifyConfig = (main?: string) => {
+  if (!main) return;
+
+  const name = main.split("/").pop();
+  if (name && Spicetify.Config.extensions.indexOf(name) === -1) {
+    Spicetify.Config.extensions.push(name);
+  }
+};
diff --git a/packages/marketplace/src/types/spicetify.d.ts b/packages/marketplace/src/types/spicetify.d.ts
@@ -1371,9 +1371,13 @@ declare namespace Spicetify {
      */
     namespace Config {
         const version: string;
-        const current_theme: string;
-        const color_scheme: string;
-        const extensions: string[];
+        let current_theme: string;
+        let color_scheme: string;
+        let extensions: string[];
         const custom_apps: string[];
+
+        // These two are just added by Marketplace so we can save and restore them when removing a theme
+        let local_theme: string;
+        let local_color_scheme: string;
     }
 }