diff --git a/interface/src/App.tsx b/interface/src/App.tsx index d686838b..2de98e69 100644 --- a/interface/src/App.tsx +++ b/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 = () => { diff --git a/interface/src/components/TabbedContainer.tsx b/interface/src/components/TabbedContainer.tsx index fa1364a3..08a8594a 100644 --- a/interface/src/components/TabbedContainer.tsx +++ b/interface/src/components/TabbedContainer.tsx @@ -79,7 +79,7 @@ const TabbedContainer: React.FC = ({ tabs }) => { activeTab === index && ( { description: "Customise the overall theme colour of SEQTA Learn.", modifyElement: }, + { + title: "Transparency Effects", + description: "Enables transparency effects on certain elements such as blur. (May impact battery life)", + modifyElement: switchChange('betterSEQTAPlus', isOn)} /> + }, { title: "BetterSEQTA+", description: "Enables BetterSEQTA+ features", diff --git a/interface/src/pages/Themes.tsx b/interface/src/pages/Themes.tsx index 7045ac80..3827d45c 100644 --- a/interface/src/pages/Themes.tsx +++ b/interface/src/pages/Themes.tsx @@ -52,28 +52,36 @@ const Themes: React.FC = () => { const handleFileChange = async (e: React.ChangeEvent) => { const file = e.target.files?.[0]; if (!file) return; - + 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 = async () => { - const dataURL = reader.result; - await writeData(fileType, dataURL); - setImageSrc(dataURL as string); + reader.onload = () => { + setImageSrc(reader.result as string); }; - reader.readAsDataURL(file); }; - + useEffect(() => { (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); } })(); }, []); diff --git a/src/SEQTA.js b/src/SEQTA.js index 33e8d305..73b9fece 100644 --- a/src/SEQTA.js +++ b/src/SEQTA.js @@ -89,6 +89,9 @@ function OpenWhatsNewPopup() { let text = stringToHTML( String.raw`
+
  • Custom backgrounds and themes coming soon!
    • +

    3.1.2 - New settings menu!

    +
  • Overhauled the settings menu!!!

    • 3.1.1 - Minor Bug fixes

  • Fixed assessments overlapping
  • Fixed houses not displaying if they aren't a specific color
    • @@ -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(); - 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", - }), - ); + enableNotificationCollector(); } }); - 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(); - 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", - }), - ); + enableNotificationCollector(); } }); 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: 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,22 @@ 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:", { + body: + "Subject: " + + lesson.description + + " \nRoom: " + + lesson.room + + " \nTeacher: " + + lesson.staff, + }); } else { // request permission from user Notification.requestPermission() .then(function (p) { if (p === "granted") { // show notification here - /* notify = new Notification("Next Lesson in 5 Minutes:", { + new Notification("Next Lesson in 5 Minutes:", { body: "Subject: " + lesson.description + @@ -1548,7 +1497,7 @@ function CheckCurrentLesson(lesson, num) { 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(); - 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", - }), - ); + enableNotificationCollector(); } }); 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 diff --git a/src/background.js b/src/background.js index 44834f97..a52889c6 100644 --- a/src/background.js +++ b/src/background.js @@ -142,13 +142,17 @@ function HandleIntexedDB(request, sendResponse) { case "read": readData().then((data) => { - console.log("Sending data: ", data); - sendResponse(data); + const reader = new FileReader(); + 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, }, ], diff --git a/src/seqta/ui/Animation.js b/src/seqta/ui/Animation.js index a6059f09..c932f407 100644 --- a/src/seqta/ui/Animation.js +++ b/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; diff --git a/src/seqta/ui/Background.js b/src/seqta/ui/Background.js index 3d85e715..caf5c586 100644 --- a/src/seqta/ui/Background.js +++ b/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); - const blob = new Blob([arrayBuffer], { type: "video/mp4" }); - const blobUrl = URL.createObjectURL(blob); - console.log("blobUrl:", blobUrl); */ + console.log("Data type:", typeof data); + console.log("Data instance:", data instanceof Blob); + 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); - - const videoElement = document.getElementsByClassName("imageBackground")[0]; - setTimeout(() => { - videoElement.play(); - }, 1000); + // Remember to revoke the blob URL to avoid memory leaks + backgroundElement.addEventListener("ended", () => { + URL.revokeObjectURL(blobUrl); + }); } else { backgroundElement = document.createElement("img"); backgroundElement.src = data; diff --git a/src/seqta/utils/StorageListener.js b/src/seqta/utils/StorageListener.js index 5b9e21af..e25c7e79 100644 --- a/src/seqta/utils/StorageListener.js +++ b/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) {