mirror of
https://github.com/BetterSEQTA/BetterSEQTA-Plus.git
synced 2026-06-06 03:34:40 +00:00
Add settings for custom backgrounds and allow users to set image and video backgrounds
This commit is contained in:
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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 />
|
||||
|
||||
@@ -4,6 +4,7 @@ export type CustomTheme = {
|
||||
description: string;
|
||||
defaultColour: string;
|
||||
CanChangeColour: boolean;
|
||||
allowBackgrounds: boolean;
|
||||
CustomCSS: string;
|
||||
CustomImages: CustomImage[];
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user