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

src/background.ts

@@ -15,6 +15,7 @@ browser.storage.local.get([ "telemetry" ]).then((telemetry) => {
 })
 
 import { onError } from './seqta/utils/onError';
+import { SettingsState } from "./types/storage";
 export const openDB = () => {
   return new Promise((resolve, reject) => {
     const request = indexedDB.open('MyDatabase', 1);
@@ -141,16 +142,33 @@ function GetNews(sendResponse: any, url: string) {
     });
 }
 
-const DefaultValues: any = {
+const DefaultValues: SettingsState = {
   onoff: true,
   animatedbk: true,
   telemetry: false,
-  bksliderinput: 50,
+  bksliderinput: "50",
   transparencyEffects: false,
   lessonalert: true,
   notificationcollector: true,
   defaultmenuorder: [],
-  menuitems: {},
+  menuitems: {
+    assessments: { toggle: true },
+    courses: { toggle: true },
+    dashboard: { toggle: true },
+    documents: { toggle: true },
+    forums: { toggle: true },
+    goals: { toggle: true },
+    home: { toggle: true },
+    messages: { toggle: true },
+    myed: { toggle: true },
+    news: { toggle: true },
+    notices: { toggle: true },
+    portals: { toggle: true },
+    reports: { toggle: true },
+    settings: { toggle: true },
+    timetable: { toggle: true },
+    welcome: { toggle: true },
+  },
   menuorder: [],
   subjectfilters: {},
   selectedTheme: '',

src/interface/components/BackgroundSelector.tsx

@@ -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;
         }

src/interface/pages/ThemeCreator.tsx

@@ -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
+          <Switch state={theme.CanChangeColour} onChange={value => setTheme({ ...theme, CanChangeColour: value })} />
-            state={theme.CanChangeColour}
+        </div>
-            onChange={value => setTheme({ ...theme, CanChangeColour: value })} />
+
+        <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 />

src/interface/types/CustomThemes.ts

@@ -4,6 +4,7 @@ export type CustomTheme = {
   description: string;
   defaultColour: string;
   CanChangeColour: boolean;
+  allowBackgrounds: boolean;
   CustomCSS: string;
   CustomImages: CustomImage[];
 }

src/seqta/ui/ImageBackgrounds.ts

@@ -1,11 +1,6 @@
 import browser from 'webextension-polyfill';
-import { SettingsState } from '../../types/storage';
 
 export async function appendBackgroundToUI() {
-  const settings = await browser.storage.local.get() as SettingsState;
-
-  if (settings.theme == '') return; 
-
   const parent = document.getElementById('container');
 
   // embed background.html

src/types/storage.ts

@@ -1,6 +1,6 @@
 export interface SettingsState {
   DarkMode: boolean;
-  theme: string;
+  selectedTheme: string;
   animatedbk: boolean;
   bksliderinput: string;
   customshortcuts: CustomShortcut[];