BetterSEQTA/BetterSEQTA-Plus
1
0
Fork 0
mirror of https://github.com/BetterSEQTA/BetterSEQTA-Plus.git synced 2026-06-06 03:34:40 +00:00
Code Issues Packages Projects Releases Wiki Activity

switch to local file sharing

Browse Source
This commit is contained in:
SethBurkart123
2024-05-20 23:21:43 +10:00
parent f64f356061
commit 301ad3f296
5 changed files with 46 additions and 173 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/interface/components/ThemeCover.tsx
+2 -3
View File
@@ -46,9 +46,8 @@ export const ThemeCover: React.FC<ThemeCoverProps> = ({
const handleShareClick = (event: React.MouseEvent) => {
event?.preventDefault();
setUploading(true);
browser.runtime.sendMessage({ type: 'currentTab', info: 'ShareTheme', body: { themeID: theme.id } }).then((response) => {
browser.runtime.sendMessage({ type: 'currentTab', info: 'ShareTheme', body: { themeID: theme.id } }).then(() => {
setUploading(false);
browser.tabs.create({ url: `https://share.betterseqta/theme?id=${response.id}&justCreated=true` });
});
};
@@ -68,7 +67,7 @@ export const ThemeCover: React.FC<ThemeCoverProps> = ({
</div>
)}
{ ( !isEditMode ) && !downloaded && !theme.webURL ? (
{ ( !isEditMode ) && !downloaded && !theme.webURL || true ? (
<>
<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/main.tsx
-2
View File
@@ -10,7 +10,6 @@ import font from '../resources/fonts/IconFamily.woff'
import ThemeCreator from './pages/ThemeCreator';
import Store from './pages/Store';
import Theme from './pages/Theme';
browser.storage.local.get().then(({ telemetry, DarkMode }) => {
if (DarkMode) document.documentElement.classList.add('dark');
@@ -54,7 +53,6 @@ root.render(
<Route path="/settings/embedded" element={<SettingsPage standalone={false} />} />
<Route path="/store" element={<Store />} />
<Route path="/themeCreator" element={<ThemeCreator />} />
<Route path="/theme" element={<Theme />} />
</Routes>
</HashRouter>
</ErrorBoundary>
src/interface/pages/Theme.tsx
-131
View File
@@ -1,131 +0,0 @@
import { useEffect, useState } from "react";
import PocketBase from 'pocketbase';
import { ThemesRecord } from "../types/pocketbase-types";
import ConfettiExplosion from 'react-confetti-explosion';
import { LinkIcon } from "@heroicons/react/24/outline";
import { ToastContainer, toast } from 'react-toastify';
import browser from 'webextension-polyfill';
import 'react-toastify/dist/ReactToastify.css';
import localforage from "localforage";
const pb = new PocketBase('https://betterseqta.pockethost.io');
const Theme = () => {
const [isLoading, setIsLoading] = useState<boolean>(true);
const [theme, setTheme] = useState<ThemesRecord | null>(null);
const [themeID, setThemeID] = useState<string>('');
const [justCreated, setJustCreated] = useState(false);
const [displayConfetti, setDisplayConfetti] = useState(true);
const [currentThemes, setCurrentThemes] = useState<string[]>([]);
useEffect(() => {
const timer = setTimeout(() => {
setDisplayConfetti(false);
}, 5000);
return () => clearTimeout(timer);
}, []);
useEffect(() => {
const urlParams = new URLSearchParams(window.location.search);
document.title = 'BetterSEQTA+' // Reset the title
const themeID = urlParams.get('id');
const justCreated = urlParams.get('justCreated');
if (themeID) setThemeID(themeID);
const getTheme = async (themeID: string) => {
const theme = await pb.collection<ThemesRecord>('themes').getOne(themeID);
console.debug(theme);
setIsLoading(false);
setTheme(theme);
document.title = theme.name;
const availableThemes = await localforage.getItem('availableThemes') as string[];
setCurrentThemes(availableThemes)
}
if (themeID && themeID !== 'null') {
getTheme(themeID);
setJustCreated(justCreated === 'true');
}
}, [])
return (
<>
{ isLoading && (
<div className="flex items-center justify-center min-h-screen">
<div className="w-32 h-32 border-t-2 border-b-2 border-blue-500 rounded-full animate-spin"></div>
</div>
)}
{ theme && (
<div className="flex flex-col items-center justify-center min-h-screen dark:text-white">
<div className="p-8 text-center shadow-xl rounded-2xl bg-zinc-800 min-w-96">
{ justCreated ? (
<>
{
displayConfetti && (
<ConfettiExplosion
className="absolute"
colors={['#FF0000', '#FF7F50', '#DE3163', '#40E0D0', '#6495ED']}
duration={5000}
width={1500}
force={1}
/>
)
}
<>
<h2 className="mb-2 text-2xl font-bold">Theme Created Successfully!</h2>
<p className="mb-8">Share the install link below with your friends to install the theme!</p>
<div
className="flex gap-2 py-2 pl-3 pr-2 text-white backdrop-blur-sm rounded-3xl ring-white/20 ring-1 bg-zinc-950/50"
>
<span className="my-auto">
{`https://share.betterseqta/theme?id=${themeID}`}
</span>
<button
className="flex gap-1 px-3 py-2 text-white transition cursor-pointer rounded-2xl ring-white/20 ring-1 bg-zinc-950/20 hover:bg-black/85"
onClick={() => {
navigator.clipboard.writeText(`https://share.betterseqta/theme?id=${themeID}`);
toast("Link copied to clipboard!");
}}
>
<LinkIcon className="w-4 h-4" />
Copy Link
</button>
</div>
</>
</>
) : (
<>
<h2 className="mb-2 text-2xl font-bold">{theme.name}</h2>
<p className="mb-8">{theme.description}</p>
{
currentThemes.includes((theme.theme as { id: string }).id) ?
<button
className="flex justify-center w-full gap-1 px-3 py-2 text-white transition cursor-not-allowed rounded-2xl ring-white/20 ring-1 bg-zinc-950/20"
>
Theme Installed!
</button>
:
<button
className="flex justify-center w-full gap-1 px-3 py-2 text-white transition cursor-pointer rounded-2xl ring-white/20 hover:ring-white/10 ring-1 bg-zinc-950/20 hover:bg-zinc-950/40"
onClick={() => {
browser.runtime.sendMessage({ type: 'DownloadTheme', body: { theme } });
setCurrentThemes([...currentThemes, (theme.theme as { id: string }).id]);
}}
>
Install Theme
</button>
}
</>
)}
</div>
<ToastContainer theme="dark" />
</div>
)}
</>
);
};
export default Theme;