diff --git a/src/background.ts b/src/background.ts index 8d701986..d2611428 100644 --- a/src/background.ts +++ b/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) => { @@ -120,10 +118,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'); diff --git a/src/interface/components/ThemeCover.tsx b/src/interface/components/ThemeCover.tsx index 1c72a9b0..4d663d56 100644 --- a/src/interface/components/ThemeCover.tsx +++ b/src/interface/components/ThemeCover.tsx @@ -67,7 +67,7 @@ export const ThemeCover: React.FC = ({ )} - { ( !isEditMode ) && !downloaded && !theme.webURL || true ? ( + { ( !isEditMode ) && !downloaded /* && !theme.webURL */ ? ( <>
{ - // 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({ diff --git a/src/seqta/ui/themes/downloadTheme.ts b/src/seqta/ui/themes/downloadTheme.ts index af40f853..65f3df57 100644 --- a/src/seqta/ui/themes/downloadTheme.ts +++ b/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; diff --git a/src/seqta/utils/base64ToBlob.ts b/src/seqta/utils/base64ToBlob.ts new file mode 100644 index 00000000..00410d4f --- /dev/null +++ b/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; \ No newline at end of file