fix: updated theme style store install

src/background.ts

@@ -1,8 +1,6 @@
 import browser from 'webextension-polyfill'
 import { onError } from './seqta/utils/onError';
 import { SettingsState } from "./types/storage";
-import DownloadTheme from "./seqta/ui/themes/downloadTheme";
-
 
 export const openDB = () => {
   return new Promise((resolve, reject) => {
@@ -121,10 +119,6 @@ browser.runtime.onMessage.addListener((request: any, _sender: any, sendResponse:
     GetNews(sendResponse, url);
     return true;
       
-  case 'DownloadTheme':
-    DownloadTheme(request.body.theme);
-    break;
-      
   default:
     console.log('Unknown request type');
   }

src/interface/components/ThemeCover.tsx

@@ -67,7 +67,7 @@ export const ThemeCover: React.FC<ThemeCoverProps> = ({
         </div>
       )}
       
-      { ( !isEditMode ) && !downloaded && !theme.webURL || true ? (
+      { ( !isEditMode ) && !downloaded /* && !theme.webURL */ ? (
       <>
         <div
           className="absolute z-20 flex w-8 h-8 p-2 text-white transition-all rounded-full delay-[20ms] opacity-0 top-1 right-2 bg-black/50 place-items-center group-hover:opacity-100 group-hover:top-[1.25rem]"

src/interface/hooks/ThemeManagment.ts

@@ -2,18 +2,6 @@ import browser from 'webextension-polyfill'
 import { CustomTheme, DownloadedTheme, ThemeList } from '../types/CustomThemes';
 import localforage from 'localforage';
 
-export const downloadTheme = async (themeName: string, themeURL: string) => {
-  // send message to the background script
-  await browser.runtime.sendMessage({
-    type: 'currentTab',
-    info: 'DownloadTheme',
-    body: {
-      themeName: themeName,
-      themeURL: themeURL
-    }
-  });
-}
-
 export const setTheme = async (themeID: string) => {
   // send message to the background script
   await browser.runtime.sendMessage({

src/seqta/ui/themes/downloadTheme.ts

@@ -1,104 +1,52 @@
-//import PocketBase from 'pocketbase';
 import localforage from 'localforage';
-import { ThemesResponse } from '../../../interface/types/pocketbase-types';
-import { CustomTheme } from '../../../interface/types/CustomThemes';
 import { Theme } from '../../../interface/pages/Store';
-
+import base64ToBlob from '../../utils/base64ToBlob';
-const DownloadTheme = async (theme: ThemesResponse & { theme: CustomTheme & { images: { id: string, variableName: string }[] } }) => {
-  const images: { imageData: Blob, imageID: string }[] = []
-  for (const imageID of theme.images) {
-    console.log(theme.images, `https://betterseqta.pockethost.io/api/files/${theme.collectionId}/${theme.id}/${imageID}`);
-    const image = await fetch(
-      `https://betterseqta.pockethost.io/api/files/${theme.collectionId}/${theme.id}/${imageID}`
-    )
-    const imageData = await image.blob();
-
-    images.push({ imageData, imageID });
-  }
-
-  const coverImage = await fetch(
-    `https://betterseqta.pockethost.io/api/files/${theme.collectionId}/${theme.id}/${theme.coverImage}`
-  );
-
-  // add to temp storage index
-  let availableThemes = await localforage.getItem('availableThemes') as string[];
-  if (availableThemes && !availableThemes.includes(theme.theme.id)) {
-    availableThemes.push(theme.theme.id);
-  } else if (!availableThemes) {
-    availableThemes = [theme.theme.id];
-  }
-  localforage.setItem('availableThemes', availableThemes);
-
-  localforage.setItem(theme.theme.id, {
-    ...theme.theme,
-    webURL: theme.id,
-    coverImage: await coverImage.blob(),
-    CustomImages: theme.theme.images.map((image) => {
-      return {
-        ...image,
-        blob: images.find((img) => {
-          return image.id.includes(img.imageID.split('_')[0]);
-        })?.imageData
-      }
-    })
-  });
-}
 
 type ThemeContent = {
   id: string;
   name: string;
-  coverImage: string;
+  coverImage: string; // base64
   description: string;
   defaultColour: string;
   CanChangeColour: boolean;
   CustomCSS: string;
   hideThemeName: boolean;
-  images: { id: string, variableName: string }[];
+  images: { id: string, variableName: string, data: string }[]; // data: base64
-}
+};
 
 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 }[] = []
+  const coverImageBlob = base64ToBlob(themeData.coverImage);
-  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 images = themeData.images.map((image) => ({
-  }
+    ...image,
+    blob: base64ToBlob(image.data)
+  }));
 
-  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);
+  await localforage.setItem('availableThemes', availableThemes);
 
-  localforage.setItem(themeData.id, {
+  await localforage.setItem(themeData.id, {
     ...themeData,
     webURL: theme.themeContent.id,
-    coverImage: await coverImage.blob(),
+    coverImage: coverImageBlob,
     CustomImages: themeData.images.map((image) => {
       return {
         ...image,
-        blob: images.find((img) => {
+        blob: images.find((img) => image.id === img.id)?.blob
-          return image.id.includes(img.imageID.split('_')[0]);
+      };
-        })?.imageData
-      }
     })
   });
-}
+};
 
-
+export default StoreDownloadTheme;
-export default DownloadTheme;

src/seqta/utils/base64ToBlob.ts

@@ -0,0 +1,17 @@
+const base64ToBlob = (base64: string, contentType: string = ''): Blob => {
+  const byteCharacters = atob(base64.split(',')[1]);
+  const byteArrays: Uint8Array[] = [];
+
+  for (let offset = 0; offset < byteCharacters.length; offset += 512) {
+    const slice = byteCharacters.slice(offset, offset + 512);
+    const byteNumbers = new Array(slice.length);
+    for (let i = 0; i < slice.length; i++) {
+      byteNumbers[i] = slice.charCodeAt(i);
+    }
+    const byteArray = new Uint8Array(byteNumbers);
+    byteArrays.push(byteArray);
+  }
+  return new Blob(byteArrays, { type: contentType });
+};
+
+export default base64ToBlob;