fix: updated theme style store install

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';
-
-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
-      }
-    })
-  });
-}
+import base64ToBlob from '../../utils/base64ToBlob';
 
 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 }[] = []
-  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();
+  const coverImageBlob = base64ToBlob(themeData.coverImage);
 
-    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) => {
-          return image.id.includes(img.imageID.split('_')[0]);
-        })?.imageData
-      }
+        blob: images.find((img) => image.id === img.id)?.blob
+      };
     })
   });
-}
+};
 
-
-export default DownloadTheme;
+export default StoreDownloadTheme;

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;