ADD: Brightness functionality

frontend/src/App.tsx

@@ -13,6 +13,7 @@ import ResultsPage from "./pages/ResultsPage";
 import { SidebarProvider } from "./context/SidebarContext";
 import { QuickSettingsProvider } from "./context/QuickSettingsContext";
 import StreamDashboardPage from "./pages/StreamDashboardPage";
+import { Brightness } from "./context/BrightnessContext";
 
 function App() {
   const [isLoggedIn, setIsLoggedIn] = useState(false);
@@ -34,6 +35,7 @@ function App() {
   }, []);
 
   return (
+    <Brightness>
     <AuthContext.Provider
       value={{ isLoggedIn, username, userId, setIsLoggedIn, setUsername, setUserId }}
     >
@@ -73,6 +75,7 @@ function App() {
         </SidebarProvider>
       </ContentProvider>
     </AuthContext.Provider>
+    </Brightness>
   );
 }
 

frontend/src/components/Settings/QuickSettings.tsx

@@ -2,6 +2,8 @@ import React from "react";
 import ThemeSetting from "./ThemeSetting";
 import { useTheme } from "../../context/ThemeContext";
 import { useQuickSettings } from "../../context/QuickSettingsContext";
+import Screenshot from "../functionality/Screenshot"
+import BrightnessControl from "../functionality/BrightnessControl";
 
 const QuickSettings: React.FC = () => {
   const { theme } = useTheme();
@@ -19,6 +21,9 @@ const QuickSettings: React.FC = () => {
       <div id="quick-settings-menu" className="flex flex-col flex-grow my-8 gap-4">
         <ThemeSetting />
       </div>
+        <Screenshot />
+        <BrightnessControl />
+
     </div>
   );
 };

frontend/src/components/functionality/BrightnessControl.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+import { useBrightness } from "../../context/BrightnessContext";
+
+const BrightnessControl: React.FC = () => {
+  const { brightness, setBrightness } = useBrightness();
+
+  const handleBrightnessChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    {/* Set brightness based on the value. Calls BrightnessContext too */}
+    setBrightness(Number(event.target.value));
+  };
+
+  return (
+    <div className="flex flex-col items-center p-4">
+      <h2 className="text-lg font-semibold mb-2">Brightness Control</h2>
+        {/* Changes based on the range of input */}
+      <input
+        type="range"
+        min="0"
+        max="200"
+        value={brightness}
+        onChange={handleBrightnessChange}
+        className="w-60 cursor-pointer"
+      />
+
+      <p className="mt-2 text-sm">Brightness: {brightness}%</p>
+    </div>
+  );
+};
+
+export default BrightnessControl;

frontend/src/components/functionality/Screenshot.tsx

@@ -0,0 +1,50 @@
+import React from "react";
+import html2canvas from "html2canvas";
+
+const Screenshot: React.FC = () => {
+  const captureScreenshot = async () => {
+    const targetElement = document.getElementById("root"); // Capture entire HTML document
+
+    if (!targetElement) {
+      console.error("Target element not found");
+      return;
+    }
+
+    try {
+      // Ensure everything is visible before capturing
+      document.body.style.overflow = "visible";
+      document.documentElement.style.overflow = "visible";
+
+      const canvas = await html2canvas(targetElement, {
+        useCORS: true, // Enables external image capture (CORS-safe)
+        scale: 2, // Higher resolution screenshot
+        backgroundColor: "#fff", // Ensures non-transparent background
+        windowWidth: document.documentElement.scrollWidth, // Capture full width
+        windowHeight: document.documentElement.scrollHeight, // Capture full height
+      });
+
+      // Restore overflow settings
+      document.body.style.overflow = "";
+      document.documentElement.style.overflow = "";
+
+      const image = canvas.toDataURL("image/png");
+      const link = document.createElement("a");
+      link.href = image;
+      link.download = `screenshot-${Date.now()}.png`;
+      link.click();
+    } catch (error) {
+      console.error("Screenshot capture failed:", error);
+    }
+  };
+
+  return (
+    <button
+      onClick={captureScreenshot}
+      className="bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 transition"
+    >
+      Capture Full Page Screenshot
+    </button>
+  );
+};
+
+export default Screenshot;

frontend/src/context/BrightnessContext.tsx

@@ -0,0 +1,31 @@
+import React, { createContext, useContext, useEffect, useState } from "react";
+
+interface BrightnessContextType {
+  brightness: number;
+  setBrightness: (value: number) => void;
+}
+
+const BrightnessContext = createContext<BrightnessContextType | undefined>(undefined);
+
+export const Brightness: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  const [brightness, setBrightness] = useState<number>(100);
+
+  useEffect(() => {
+    // Apply brightness to the entire page
+    document.body.style.filter = `brightness(${brightness}%)`;
+  }, [brightness]);
+
+  return (
+    <BrightnessContext.Provider value={{ brightness, setBrightness }}>
+      {children}
+    </BrightnessContext.Provider>
+  );
+};
+
+export const useBrightness = (): BrightnessContextType => {
+  const context = useContext(BrightnessContext);
+  if (!context) {
+    throw new Error("useBrightness must be used within a BrightnessProvider");
+  }
+  return context;
+};

frontend/src/main.tsx

@@ -1,13 +1,10 @@
-import { StrictMode } from "react";
 import { ThemeProvider } from "./context/ThemeContext";
 import { createRoot } from "react-dom/client";
 import "./assets/styles/index.css";
 import App from "./App.tsx";
 
 createRoot(document.getElementById("root")!).render(
-  // <StrictMode>
   <ThemeProvider>
   <App />
   </ThemeProvider>
-  // </StrictMode>,
 );