add a heap more eventlisteners

interface/src/App.tsx

@@ -7,6 +7,7 @@ import Shortcuts from './pages/Shortcuts';
 import { useSettingsContext } from './SettingsContext';
 import Picker from './components/Picker';
 import Themes from './pages/Themes';
+//import About from './pages/About';
 
 const App: React.FC = () => {
 

interface/src/components/TabbedContainer.tsx

@@ -79,7 +79,7 @@ const TabbedContainer: React.FC<TabbedContainerProps> = ({ tabs }) => {
                 activeTab === index && (
                   <motion.div
                     key={index}
-                    className="absolute w-full"
+                    className="absolute w-full pb-6"
                     initial="hidden"
                     animate="visible"
                     exit="hidden"

interface/src/pages/Settings.tsx

@@ -48,6 +48,11 @@ const Settings: React.FC = () => {
       description: "Customise the overall theme colour of SEQTA Learn.",
       modifyElement: <PickerSwatch />
     },
+    {
+      title: "Transparency Effects",
+      description: "Enables transparency effects on certain elements such as blur. (May impact battery life)",
+      modifyElement: <Switch state={settingsState.betterSEQTAPlus} onChange={(isOn: boolean) => switchChange('betterSEQTAPlus', isOn)} />
+    },
     {
       title: "BetterSEQTA+",
       description: "Enables BetterSEQTA+ features",

interface/src/pages/Themes.tsx

@@ -56,14 +56,14 @@ const Themes: React.FC = () => {
     const fileType = file.type.split('/')[0];
     console.log(fileType);
   
+    // Directly save the Blob object (file)
+    await writeData(fileType, file);
+    
+    // For displaying purpose, you might still want to convert it to Data URL
     const reader = new FileReader();
-
+    reader.onload = () => {
-    reader.onload = async () => {
+      setImageSrc(reader.result as string);
-      const dataURL = reader.result;
-      await writeData(fileType, dataURL);
-      setImageSrc(dataURL as string);
     };
-
     reader.readAsDataURL(file);
   };
   
@@ -71,9 +71,17 @@ const Themes: React.FC = () => {
     (async () => {
       const data = await readData();
       if (data?.type === 'image') {
-        setImageSrc(data.data);
+        const reader = new FileReader();
+        reader.onload = () => {
+          setImageSrc(reader.result as string);
+        };
+        reader.readAsDataURL(data.data);
       } else if (data?.type === 'video') {
-        setVideoSrc(data.data);
+        const reader = new FileReader();
+        reader.onload = () => {
+          setVideoSrc(reader.result as string);
+        };
+        reader.readAsDataURL(data.data);
       }
     })();
   }, []);  

src/SEQTA.js

@@ -89,6 +89,9 @@ function OpenWhatsNewPopup() {
   let text = stringToHTML(
     String.raw`
   <div class="whatsnewTextContainer" style="height: 50%;overflow-y: scroll;">
+  <li>Custom backgrounds and themes coming soon!</li>
+  <h1>3.1.2 - New settings menu!</h1>
+  <li>Overhauled the settings menu!!!</li>
   <h1>3.1.1 - Minor Bug fixes</h1>
   <li>Fixed assessments overlapping</li>
   <li>Fixed houses not displaying if they aren't a specific color</li>
@@ -367,41 +370,9 @@ function LoadPageElements() {
         // Sends similar HTTP Post Request for the notices
         chrome.storage.local.get(null, function (result) {
           if (result.notificationcollector) {
-            var xhr3 = new XMLHttpRequest();
+            enableNotificationCollector();
-            xhr3.open(
-              "POST",
-              `${location.origin}/seqta/student/heartbeat?`,
-              true,
-            );
-            xhr3.setRequestHeader(
-              "Content-Type",
-              "application/json; charset=utf-8",
-            );
-            xhr3.onreadystatechange = function () {
-              if (xhr3.readyState === 4) {
-                var Notifications = JSON.parse(xhr3.response);
-                var alertdiv = document.getElementsByClassName(
-                  "notifications__bubble___1EkSQ",
-                )[0];
-                if (typeof alertdiv == "undefined") {
-                  console.log(
-                    "[BetterSEQTA+] No notifications currently",
-                  );
-                } else {
-                  alertdiv.textContent =
-                      Notifications.payload.notifications.length;
-                }
-              }
-            };
-            xhr3.send(
-              JSON.stringify({
-                timestamp: "1970-01-01 00:00:00.0",
-                hash: "#?page=/home",
-              }),
-            );
           }
         });
-
         finishLoad();
       }
     });
@@ -421,36 +392,7 @@ function LoadPageElements() {
     // Sends similar HTTP Post Request for the notices
     chrome.storage.local.get(null, function (result) {
       if (result.notificationcollector) {
-        var xhr3 = new XMLHttpRequest();
+        enableNotificationCollector();
-        xhr3.open(
-          "POST",
-          `${location.origin}/seqta/student/heartbeat?`,
-          true,
-        );
-        xhr3.setRequestHeader(
-          "Content-Type",
-          "application/json; charset=utf-8",
-        );
-        xhr3.onreadystatechange = function () {
-          if (xhr3.readyState === 4) {
-            var Notifications = JSON.parse(xhr3.response);
-            var alertdiv = document.getElementsByClassName(
-              "notifications__bubble___1EkSQ",
-            )[0];
-            if (typeof alertdiv == "undefined") {
-              console.log("[BetterSEQTA+] No notifications currently");
-            } else {
-              alertdiv.textContent =
-                  Notifications.payload.notifications.length;
-            }
-          }
-        };
-        xhr3.send(
-          JSON.stringify({
-            timestamp: "1970-01-01 00:00:00.0",
-            hash: "#?page=/home",
-          }),
-        );
       }
     });
     break;
@@ -837,7 +779,7 @@ document.addEventListener(
   true,
 );
 
-function CallExtensionSettings() {
+function addExtensionSettings() {
   let Settings =
   stringToHTML(
     String.raw`
@@ -846,12 +788,11 @@ function CallExtensionSettings() {
     `);
   document.body.append(Settings.firstChild);
 
-  // add an iframe to the div: <iframe src="interface/index.html"></iframe>
   let iframe = document.createElement("iframe");
   iframe.src = chrome.runtime.getURL("interface/index.html");
   iframe.allowTransparency = "true";
   iframe.style.width = "384px";
-  iframe.style.height = "590px";
+  iframe.style.height = "610px";
   iframe.style.border = "none";
   iframe.setAttribute("excludeDarkCheck", "true");
   
@@ -1327,7 +1268,7 @@ function AddBetterSEQTAElements(toggle) {
       }
       
       appendBackgroundToUI();
-      CallExtensionSettings();
+      addExtensionSettings();
 
       // If betterSEQTA+ is enabled, run the code
       if (toggle) {
@@ -1533,14 +1474,7 @@ function CheckCurrentLesson(lesson, num) {
         } else {
           // check if permission is already granted
           if (Notification.permission === "granted") {
-            // show notification here
+            new Notification("Next Lesson in 5 Minutes:", {
-          } else {
-            // request permission from user
-            Notification.requestPermission()
-              .then(function (p) {
-                if (p === "granted") {
-                  // show notification here
-                  /* notify = new Notification("Next Lesson in 5 Minutes:", {
               body:
                 "Subject: " +
                 lesson.description +
@@ -1548,7 +1482,22 @@ function CheckCurrentLesson(lesson, num) {
                 lesson.room +
                 " \nTeacher: " +
                 lesson.staff,
-                  }); */
+            });
+          } else {
+            // request permission from user
+            Notification.requestPermission()
+              .then(function (p) {
+                if (p === "granted") {
+                  // show notification here
+                  new Notification("Next Lesson in 5 Minutes:", {
+                    body:
+                      "Subject: " +
+                      lesson.description +
+                      " \nRoom: " +
+                      lesson.room +
+                      " \nTeacher: " +
+                      lesson.staff,
+                  });
                 } else {
                   console.log("User blocked notifications.");
                 }
@@ -2510,31 +2459,7 @@ function SendHomePage() {
     // Sends similar HTTP Post Request for the notices
     chrome.storage.local.get(null, function (result) {
       if (result.notificationcollector) {
-        var xhr3 = new XMLHttpRequest();
+        enableNotificationCollector();
-        xhr3.open("POST", `${location.origin}/seqta/student/heartbeat?`, true);
-        xhr3.setRequestHeader(
-          "Content-Type",
-          "application/json; charset=utf-8",
-        );
-        xhr3.onreadystatechange = function () {
-          if (xhr3.readyState === 4) {
-            var Notifications = JSON.parse(xhr3.response);
-            var alertdiv = document.getElementsByClassName(
-              "notifications__bubble___1EkSQ",
-            )[0];
-            if (typeof alertdiv == "undefined") {
-              console.log("[BetterSEQTA] No notifications currently");
-            } else {
-              alertdiv.textContent = Notifications.payload.notifications.length;
-            }
-          }
-        };
-        xhr3.send(
-          JSON.stringify({
-            timestamp: "1970-01-01 00:00:00.0",
-            hash: "#?page=/home",
-          }),
-        );
       }
     });
     console.log("Getting assessments");
@@ -2579,6 +2504,46 @@ function SendHomePage() {
   }, 8);
 }
 
+export function enableNotificationCollector() {
+  var xhr3 = new XMLHttpRequest();
+  xhr3.open("POST", `${location.origin}/seqta/student/heartbeat?`, true);
+  xhr3.setRequestHeader(
+    "Content-Type",
+    "application/json; charset=utf-8"
+  );
+  xhr3.onreadystatechange = function () {
+    if (xhr3.readyState === 4) {
+      var Notifications = JSON.parse(xhr3.response);
+      var alertdiv = document.getElementsByClassName(
+        "notifications__bubble___1EkSQ"
+      )[0];
+      if (typeof alertdiv == "undefined") {
+        console.log("[BetterSEQTA] No notifications currently");
+      } else {
+        alertdiv.textContent = Notifications.payload.notifications.length;
+      }
+    }
+  };
+  xhr3.send(
+    JSON.stringify({
+      timestamp: "1970-01-01 00:00:00.0",
+      hash: "#?page=/home",
+    })
+  );
+}
+
+export function disableNotificationCollector() {
+  var alertdiv = document.getElementsByClassName("notifications__bubble___1EkSQ")[0];
+  if (typeof alertdiv != "undefined") {
+    var currentNumber = parseInt(alertdiv.textContent);
+    if (currentNumber < 9) {
+      alertdiv.textContent = currentNumber;
+    } else {
+      alertdiv.textContent = "9+";
+    }
+  }
+}
+
 function SendNewsPage() {
   setTimeout(function () {
     // Sends the html data for the home page

src/background.js

@@ -142,13 +142,17 @@ function HandleIntexedDB(request, sendResponse) {
 
   case "read":
     readData().then((data) => {
-      console.log("Sending data: ", data);
+      const reader = new FileReader();
-      sendResponse(data);
+      reader.onload = () => {
+        const arrayBuffer = reader.result;
+        sendResponse({ data: arrayBuffer, type: data.type });
+      };
+      reader.readAsArrayBuffer(data.data);
     });
     return true;
-
   }
 }
+
 function GetNews(sendResponse) {
   // Gets the current date
   const date = new Date();
@@ -184,6 +188,7 @@ function GetNews(sendResponse) {
 const DefaultValues = {
   onoff: true,
   animatedbk: true,
+  bksliderinput: 50,
   lessonalert: true,
   notificationcollector: true,
   defaultmenuorder: [],
@@ -238,7 +243,7 @@ const DefaultValues = {
       enabled: false,
     },
     {
-      name: "educationperfect",
+      name: "Education Perfect",
       enabled: true,
     },
   ],

src/seqta/ui/Animation.js

@@ -9,7 +9,9 @@ export function updateBgDurations(item, minDuration = 1, maxDuration = 10) {
   const bgClasses = ["bg", "bg2", "bg3"];
   
   // Reverse the slider direction to align with the animation
-  const reversedValue = 200 - item.bksliderinput;
+  const reversedValue = 150 - item.bksliderinput;
+
+  console.log("reversedValue:", reversedValue);
   
   // Range of possible animation durations
   const durationRange = maxDuration - minDuration;

src/seqta/ui/Background.js

@@ -47,23 +47,30 @@ export async function appendBackgroundToUI() {
     console.log("Starting to append background");
     let backgroundElement;
     if (type === "video") {
-      /* const arrayBuffer = base64ToArrayBuffer(data);
+      console.log("Data type:", typeof data);
-      const blob = new Blob([arrayBuffer], { type: "video/mp4" });
+      console.log("Data instance:", data instanceof Blob);
-      const blobUrl = URL.createObjectURL(blob);
-      console.log("blobUrl:", blobUrl); */
 
+      if (data instanceof Blob) {
+        console.log("Blob size:", data.size);
+        console.log("Blob type:", data.type);
+      }    
+
+      console.log("Starting blob.");
+      const blob = new Blob([new Uint8Array(response.data)]);  // Adjust the MIME type accordingly
+      console.log("Made blob.");
+      const blobUrl = URL.createObjectURL(blob);
+      console.log(blobUrl);
       backgroundElement = document.createElement("video");
-      backgroundElement.src = data;
+      backgroundElement.src = blobUrl;
       backgroundElement.autoplay = true;
       backgroundElement.loop = true;
       backgroundElement.muted = true;
-      backgroundElement.classList.add("imageBackground");
+      console.log(backgroundElement);
       mount.appendChild(backgroundElement);
-
+      // Remember to revoke the blob URL to avoid memory leaks
-      const videoElement = document.getElementsByClassName("imageBackground")[0];
+      backgroundElement.addEventListener("ended", () => {
-      setTimeout(() => {
+        URL.revokeObjectURL(blobUrl);
-        videoElement.play();
+      });
-      }, 1000);
     } else {
       backgroundElement = document.createElement("img");
       backgroundElement.src = data;

src/seqta/utils/StorageListener.js

@@ -3,6 +3,8 @@
 import {
   CreateCustomShortcutDiv,
   RemoveCustomShortcutDiv,
+  disableNotificationCollector,
+  enableNotificationCollector,
 } from "../../SEQTA.js";
 import { updateAllColors } from "../ui/Colors.js";
 
@@ -22,6 +24,10 @@ export default class StorageListener {
         changes.customshortcuts.newValue
       );
     }
+
+    if (changes.notificationcollector) {
+      this.handleNotificationCollectorChange(changes.notificationcollector);
+    }
   }
 
   handleSelectedColorChange(newColor) {
@@ -32,6 +38,14 @@ export default class StorageListener {
     }
   }
 
+  handleNotificationCollectorChange(details) {
+    if (details.newValue) {
+      enableNotificationCollector();
+    } else {
+      disableNotificationCollector();
+    }
+  }
+
   handleCustomShortcutsChange(oldValue, newValue) {
     // Check for addition
     if (newValue.length > oldValue.length) {