diff --git a/src/background.ts b/src/background.ts
index 1cc18952..990a0e0b 100644
--- a/src/background.ts
+++ b/src/background.ts
@@ -2,7 +2,7 @@ import * as Sentry from "@sentry/browser";
import browser from 'webextension-polyfill'
import { onError } from './seqta/utils/onError';
import { SettingsState } from "./types/storage";
-import DownloadTheme from "./seqta/ui/themes/downloadTheme";
+import DownloadTheme, { StoreDownloadTheme } from "./seqta/ui/themes/downloadTheme";
import localforage from "localforage";
browser.storage.local.get([ "telemetry" ]).then((telemetry) => {
@@ -166,6 +166,10 @@ browser.runtime.onMessage.addListener((request: any, _sender: any, sendResponse:
case 'DownloadTheme':
DownloadTheme(request.body.theme);
break;
+
+ case 'StoreDownloadTheme':
+ StoreDownloadTheme(request.body);
+ break;
case 'DeleteDownloadedTheme':
DeleteDownloadedTheme(request.body);
diff --git a/src/interface/pages/Store.tsx b/src/interface/pages/Store.tsx
index af74048b..b6e59d13 100644
--- a/src/interface/pages/Store.tsx
+++ b/src/interface/pages/Store.tsx
@@ -1,14 +1,16 @@
import { useEffect, useRef, useState } from 'react';
import { Swiper, SwiperSlide } from 'swiper/react';
-import { Autoplay } from 'swiper/modules';
import Header from '../components/store/header';
+import browser from 'webextension-polyfill';
+import { Autoplay } from 'swiper/modules';
import { motion } from 'framer-motion';
+
import 'swiper/css';
import 'swiper/css/pagination';
import 'swiper/css/scrollbar';
import 'swiper/css/autoplay';
-interface Theme {
+export type Theme = {
name: string;
description: string;
coverImage: string;
@@ -16,7 +18,7 @@ interface Theme {
id: string;
}
-interface ThemesResponse {
+type ThemesResponse = {
themes: Theme[];
}
@@ -46,7 +48,13 @@ const Store = () => {
}, [searchTerm, gridThemes]);
const downloadTheme = (id: string) => {
- window.open(`https://betterseqta.pockethost.io/api/v1/themes/${id}/download`, '_blank');
+ const themeContent = gridThemes.find(theme => theme.id === id);
+ if (!themeContent) {
+ alert('There was an error, The theme was not found!')
+ return
+ };
+
+ browser.runtime.sendMessage({ type: 'StoreDownloadTheme', body: { themeContent } });
};
return (
@@ -138,7 +146,7 @@ const Store = () => {
diff --git a/src/interface/pages/Theme.tsx b/src/interface/pages/Theme.tsx
index 898b0990..ca067d6e 100644
--- a/src/interface/pages/Theme.tsx
+++ b/src/interface/pages/Theme.tsx
@@ -35,7 +35,7 @@ const Theme = () => {
const getTheme = async (themeID: string) => {
const theme = await pb.collection('themes').getOne(themeID);
- console.log(theme);
+ console.debug(theme);
setIsLoading(false);
setTheme(theme);
@@ -104,7 +104,7 @@ const Theme = () => {
:
}
>
diff --git a/src/seqta/ui/themes/downloadTheme.ts b/src/seqta/ui/themes/downloadTheme.ts
index 616ee957..af40f853 100644
--- a/src/seqta/ui/themes/downloadTheme.ts
+++ b/src/seqta/ui/themes/downloadTheme.ts
@@ -2,6 +2,7 @@
import localforage from 'localforage';
import { ThemesResponse } from '../../../interface/types/pocketbase-types';
import { CustomTheme } from '../../../interface/types/CustomThemes';
+import { Theme } from '../../../interface/pages/Store';
const DownloadTheme = async (theme: ThemesResponse & { theme: CustomTheme & { images: { id: string, variableName: string }[] } }) => {
const images: { imageData: Blob, imageID: string }[] = []
@@ -43,4 +44,61 @@ const DownloadTheme = async (theme: ThemesResponse & { theme: CustomTheme & { im
});
}
+type ThemeContent = {
+ id: string;
+ name: string;
+ coverImage: string;
+ description: string;
+ defaultColour: string;
+ CanChangeColour: boolean;
+ CustomCSS: string;
+ hideThemeName: boolean;
+ images: { id: string, variableName: string }[];
+}
+
+export const StoreDownloadTheme = async (theme: { themeContent: Theme }) => {
+ console.log(theme.themeContent.id);
+ if (!theme.themeContent.id) return;
+ const themeContent = await fetch(`https://raw.githubusercontent.com/BetterSEQTA/BetterSEQTA-Themes/main/store/themes/${theme.themeContent.id}/theme.json`);
+ const themeData = await themeContent.json() as ThemeContent;
+
+ const images: { imageData: Blob, imageID: string }[] = []
+ for (const image of themeData.images) {
+ const data = await fetch(
+ `https://raw.githubusercontent.com/BetterSEQTA/BetterSEQTA-Themes/main/store/themes/${themeData.id}/images/${image.id}`
+ )
+ const imageData = await data.blob();
+
+ images.push({ imageData, imageID: image.id });
+ }
+
+ const coverImage = await fetch(
+ `https://raw.githubusercontent.com/BetterSEQTA/BetterSEQTA-Themes/main/store/themes/${themeData.id}/images/${themeData.coverImage}`
+ );
+
+ // add to temp storage index
+ let availableThemes = await localforage.getItem('availableThemes') as string[];
+ if (availableThemes && !availableThemes.includes(themeData.id)) {
+ availableThemes.push(themeData.id);
+ } else if (!availableThemes) {
+ availableThemes = [themeData.id];
+ }
+ localforage.setItem('availableThemes', availableThemes);
+
+ localforage.setItem(themeData.id, {
+ ...themeData,
+ webURL: theme.themeContent.id,
+ coverImage: await coverImage.blob(),
+ CustomImages: themeData.images.map((image) => {
+ return {
+ ...image,
+ blob: images.find((img) => {
+ return image.id.includes(img.imageID.split('_')[0]);
+ })?.imageData
+ }
+ })
+ });
+}
+
+
export default DownloadTheme;