Add settings for custom backgrounds and allow users to set image and video backgrounds

This commit is contained in:
SethBurkart123
2024-04-05 10:21:28 +11:00
parent a94cccc4ab
commit a66f5775a6
6 changed files with 35 additions and 15 deletions
@@ -4,7 +4,6 @@ import presetBackgrounds from "../assets/presetBackgrounds";
import "./BackgroundSelector.css";
import browser from "webextension-polyfill";
// Custom Types and Interfaces
export interface Background {
id: string;
type: string;
@@ -71,9 +70,9 @@ function BackgroundSelector({ isEditMode, disableTheme }: BackgroundSelectorProp
try {
await openDB();
} catch (error) {
// @ts-expect-error - Brave is not in the navigator type (unless you are actually using brave browser, then it is there)
// @ts-expect-error - Brave is not in the navigator type (unless you are actually using brave browser)
if (navigator.brave && await navigator.brave.isBrave() || false) {
console.log('[BetterSEQTA+] Brave browser is blocking access to IndexedDB. Please disable the "Cross-site cookies blocked" setting in the Shields panel. (or you can just disable brave shields for SEQTA)');
console.error('[BetterSEQTA+] Brave browser is blocking access to IndexedDB. Please disable the "Cross-site cookies blocked" setting in the Shields panel. (or you can just disable brave shields for SEQTA)');
setBackgroundsBlocked(true);
return;
}
+10 -3
View File
@@ -16,6 +16,7 @@ function ThemeCreator() {
description: '',
defaultColour: '',
CanChangeColour: true,
allowBackgrounds: true,
CustomCSS: '',
CustomImages: [],
});
@@ -167,9 +168,15 @@ function ThemeCreator() {
<div className='pr-2 text-sm font-semibold'>Custom Theme Colour</div>
<div className='pr-2 text-[11px]'>Allow users to change the theme colour</div>
</div>
<Switch
state={theme.CanChangeColour}
onChange={value => setTheme({ ...theme, CanChangeColour: value })} />
<Switch state={theme.CanChangeColour} onChange={value => setTheme({ ...theme, CanChangeColour: value })} />
</div>
<div className='flex items-center justify-between pt-4'>
<div>
<div className='pr-2 text-sm font-semibold'>Custom Backgrounds</div>
<div className='pr-2 text-[11px]'>Allow users to set image and video backgrounds</div>
</div>
<Switch state={theme.allowBackgrounds} onChange={value => setTheme({ ...theme, allowBackgrounds: value })} />
</div>
<Divider />
+1
View File
@@ -4,6 +4,7 @@ export type CustomTheme = {
description: string;
defaultColour: string;
CanChangeColour: boolean;
allowBackgrounds: boolean;
CustomCSS: string;
CustomImages: CustomImage[];
}