From 2408fb102816027fed402aec8b2a93e4135dde7e Mon Sep 17 00:00:00 2001 From: SethBurkart123 Date: Tue, 7 May 2024 12:03:38 +1000 Subject: [PATCH] add store downloading --- src/background.ts | 6 ++- src/interface/pages/Store.tsx | 18 ++++++--- src/interface/pages/Theme.tsx | 6 +-- src/seqta/ui/themes/downloadTheme.ts | 58 ++++++++++++++++++++++++++++ 4 files changed, 79 insertions(+), 9 deletions(-) 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;