feat: don't install themes if current_theme isn't marketplace (#673)

src/components/Card/Card.tsx

@@ -1,7 +1,8 @@
 import React, { Key } from "react";
 import { withTranslation } from "react-i18next";
-import { CardItem, CardType, Config, SchemeIni, Snippet, VisualConfig } from "../../types/marketplace-types";
+import { t } from "i18next";
 
+import { CardItem, CardType, Config, SchemeIni, Snippet, VisualConfig } from "../../types/marketplace-types";
 import { LOCALSTORAGE_KEYS, CUSTOM_APP_PATH, SNIPPETS_PAGE_URL } from "../../constants";
 import {
   getLocalStorageDataFromKey,
@@ -18,7 +19,6 @@ import { openModal } from "../../logic/LaunchModals";
 import AuthorsDiv from "./AuthorsDiv";
 import TagsDiv from "./TagsDiv";
 import Button from "../Button";
-import { t } from "i18next";
 const Spicetify = window.Spicetify;
 
 export type CardProps = {
@@ -140,6 +140,16 @@ class Card extends React.Component<CardProps, {
         console.debug("Theme already installed, removing");
         this.removeTheme(this.localStorageKey);
       } else {
+        const localTheme = localStorage.getItem(LOCALSTORAGE_KEYS.localTheme);
+        if (localTheme != null && localTheme.toLowerCase() !== "marketplace") {
+          Spicetify.showNotification(
+            t("notifications.wrongLocalTheme"),
+            true,
+            5000,
+          );
+          return;
+        }
+
         // Remove theme if already installed, then install the new theme
         this.removeTheme();
         this.installTheme();
@@ -298,7 +308,9 @@ class Card extends React.Component<CardProps, {
 
       // Add to Spicetify.Config
       const name = this.props.item.manifest?.name;
+      // @ts-expect-error: Cannot assign to 'current_theme' because it is a read-only property
       if (name) Spicetify.Config.current_theme = name;
+      // @ts-expect-error: Cannot assign to 'color_scheme' because it is a read-only property
       if (activeScheme) Spicetify.Config.color_scheme = activeScheme;
     }
 
@@ -335,8 +347,10 @@ class Card extends React.Component<CardProps, {
       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;
+      // @ts-expect-error: Cannot assign to 'current_theme' because it is a read-only property
+      Spicetify.Config.current_theme = "marketplace";
+      // @ts-expect-error: Cannot assign to 'color_scheme' because it is a read-only property
+      Spicetify.Config.color_scheme = "marketplace";
 
       this.setState({ installed: false });
     }

src/constants.ts

@@ -3,19 +3,21 @@ import { version } from "../package.json";
 
 export const MARKETPLACE_VERSION = version;
 
+const STORAGE_KEY_PREFIX = "marketplace";
 export const LOCALSTORAGE_KEYS = {
-  installedExtensions: "marketplace:installed-extensions",
-  installedSnippets: "marketplace:installed-snippets",
-  installedThemes: "marketplace:installed-themes",
-  activeTab: "marketplace:active-tab",
-  tabs: "marketplace:tabs",
-  sort: "marketplace:sort",
+  installedExtensions: `${STORAGE_KEY_PREFIX}:installed-extensions`,
+  installedSnippets: `${STORAGE_KEY_PREFIX}:installed-snippets`,
+  installedThemes: `${STORAGE_KEY_PREFIX}:installed-themes`,
+  activeTab: `${STORAGE_KEY_PREFIX}:active-tab`,
+  tabs: `${STORAGE_KEY_PREFIX}:tabs`,
+  sort: `${STORAGE_KEY_PREFIX}:sort`,
   // Theme installed store the localsorage key of the theme (e.g. marketplace:installed:NYRI4/Comfy-spicetify/user.css)
-  themeInstalled: "marketplace:theme-installed",
-  albumArtBasedColor: "marketplace:albumArtBasedColors",
-  albumArtBasedColorMode: "marketplace:albumArtBasedColorsMode",
-  albumArtBasedColorVibrancy: "marketplace:albumArtBasedColorsVibrancy",
-  colorShift: "marketplace:colorShift",
+  themeInstalled: `${STORAGE_KEY_PREFIX}:theme-installed`,
+  localTheme: `${STORAGE_KEY_PREFIX}:local-theme`,
+  albumArtBasedColor: `${STORAGE_KEY_PREFIX}:albumArtBasedColors`,
+  albumArtBasedColorMode: `${STORAGE_KEY_PREFIX}:albumArtBasedColorsMode`,
+  albumArtBasedColorVibrancy: `${STORAGE_KEY_PREFIX}:albumArtBasedColorsVibrancy`,
+  colorShift: `${STORAGE_KEY_PREFIX}:colorShift`,
 };
 
 // Initalize topbar tabs

src/extensions/extension.tsx

@@ -2,6 +2,8 @@
 // AUTHOR: theRealPadster, CharlieS1103
 // DESCRIPTION: Companion extension for Spicetify Marketplace
 
+import { t } from "i18next";
+
 import { ITEMS_PER_REQUEST, LOCALSTORAGE_KEYS, MARKETPLACE_VERSION } from "../constants";
 import { RepoType } from "../types/marketplace-types";
 import {
@@ -168,16 +170,23 @@ import {
 
   window.sessionStorage.setItem("marketplace-request-tld", tld);
 
-  // Save to Spicetify.Config for use when removing a theme
-  // @ts-expect-error: Config doesn't have a `local_theme` property
-  Spicetify.Config.local_theme = Spicetify.Config.current_theme;
-  // @ts-expect-error: Config doesn't have a `local_color_scheme` property
-  Spicetify.Config.local_color_scheme = Spicetify.Config.color_scheme;
-  const installedThemeKey = localStorage.getItem(LOCALSTORAGE_KEYS.themeInstalled);
-  if (installedThemeKey) initializeTheme(installedThemeKey);
-
   const installedExtensions = getLocalStorageDataFromKey(LOCALSTORAGE_KEYS.installedExtensions, []);
   installedExtensions.forEach((extensionKey) => initializeExtension(extensionKey));
+
+  const { current_theme: localTheme } = Spicetify.Config;
+  localStorage.setItem(LOCALSTORAGE_KEYS.localTheme, localTheme);
+  const installedTheme = localStorage.getItem(LOCALSTORAGE_KEYS.themeInstalled);
+  if (installedTheme) {
+    if (localTheme.toLocaleLowerCase() !== "marketplace") {
+      Spicetify.showNotification(
+        t("notifications.wrongLocalTheme"),
+        true,
+        5000,
+      );
+      return;
+    }
+    initializeTheme(installedTheme);
+  }
 })();
 
 /**

src/resources/locales/en.json

@@ -114,6 +114,9 @@
     "save": "Save",
     "colour_one": "colour",
     "colour_other": "colours",
-    "favourite": "favourite"
+    "favourite": "favourite",
+    "notifications": {
+      "wrongLocalTheme": "Please set current_theme in config-xpui.ini to 'marketplace' to install themes using the Marketplace."
+    }
   }
 }

src/resources/locales/ru.json

@@ -114,6 +114,9 @@
     "save": "Сохранить",
     "colour_one": "цвет",
     "colour_other": "цвета",
-    "favourite": "избранное"
+    "favourite": "избранное",
+    "notifications": {
+      "wrongLocalTheme": "Пожалуйста, измените значение current_theme в config-xpui.ini на 'marketplace', чтобы устанавливать темы из Маркетплейса"
+    }
   }
 }