dylan/gander
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

ADD: Brightness functionality

Browse Source
This commit is contained in:
EvanLin3141
2025-02-22 20:49:16 +00:00
parent cd7ea461a8
commit ed298f0293
10 changed files with 263 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
frontend/package-lock.json generated
View File

@@ -11,6 +11,7 @@
"@stripe/react-stripe-js": "^3.1.1",
"@stripe/stripe-js": "^5.5.0",
"@types/video.js": "^7.3.58",
"html2canvas": "^1.4.1",
"lodash": "^4.17.21",
"react": "^18.3.1",
"react-chrome-dino": "^0.1.3",
@@ -1953,6 +1954,15 @@
"integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
"license": "MIT"
},
"node_modules/base64-arraybuffer": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz",
"integrity": "sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ==",
"license": "MIT",
"engines": {
"node": ">= 0.6.0"
}
},
"node_modules/binary-extensions": {
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
@@ -2178,6 +2188,15 @@
"node": ">= 8"
}
},
"node_modules/css-line-break": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/css-line-break/-/css-line-break-2.1.0.tgz",
"integrity": "sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w==",
"license": "MIT",
"dependencies": {
"utrie": "^1.0.2"
}
},
"node_modules/cssesc": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
@@ -2830,6 +2849,19 @@
"node": ">= 0.4"
}
},
"node_modules/html2canvas": {
"version": "1.4.1",
"resolved": "https://registry.npmjs.org/html2canvas/-/html2canvas-1.4.1.tgz",
"integrity": "sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==",
"license": "MIT",
"dependencies": {
"css-line-break": "^2.1.0",
"text-segmentation": "^1.0.3"
},
"engines": {
"node": ">=8.0.0"
}
},
"node_modules/ignore": {
"version": "5.3.2",
"resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
@@ -4233,6 +4265,15 @@
"node": ">=14.0.0"
}
},
"node_modules/text-segmentation": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/text-segmentation/-/text-segmentation-1.0.3.tgz",
"integrity": "sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw==",
"license": "MIT",
"dependencies": {
"utrie": "^1.0.2"
}
},
"node_modules/thenify": {
"version": "3.3.1",
"resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz",
@@ -4388,6 +4429,15 @@
"integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
"license": "MIT"
},
"node_modules/utrie": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/utrie/-/utrie-1.0.2.tgz",
"integrity": "sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw==",
"license": "MIT",
"dependencies": {
"base64-arraybuffer": "^1.0.2"
}
},
"node_modules/video.js": {
"version": "8.21.0",
"resolved": "https://registry.npmjs.org/video.js/-/video.js-8.21.0.tgz",

1
frontend/package.json
View File

@@ -15,6 +15,7 @@
"@stripe/react-stripe-js": "^3.1.1",
"@stripe/stripe-js": "^5.5.0",
"@types/video.js": "^7.3.58",
"html2canvas": "^1.4.1",
"lodash": "^4.17.21",
"react": "^18.3.1",
"react-chrome-dino": "^0.1.3",

3
frontend/src/App.tsx
View File

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

5
frontend/src/components/Settings/QuickSettings.tsx
View File

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

30
frontend/src/components/functionality/BrightnessControl.tsx Normal file
View File

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

50
frontend/src/components/functionality/Screenshot.tsx Normal file
View File

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

31
frontend/src/context/BrightnessContext.tsx Normal file
View File

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

3
frontend/src/main.tsx
View File

@@ -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>,
);

86
package-lock.json generated Normal file
View File

@@ -0,0 +1,86 @@
{
"name": "cs3305-team11",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"dependencies": {
"html2canvas": "^1.4.1",
"react": "^19.0.0",
"use-react-screenshot": "^4.0.0"
}
},
"node_modules/base64-arraybuffer": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz",
"integrity": "sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ==",
"license": "MIT",
"engines": {
"node": ">= 0.6.0"
}
},
"node_modules/css-line-break": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/css-line-break/-/css-line-break-2.1.0.tgz",
"integrity": "sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w==",
"license": "MIT",
"dependencies": {
"utrie": "^1.0.2"
}
},
"node_modules/html2canvas": {
"version": "1.4.1",
"resolved": "https://registry.npmjs.org/html2canvas/-/html2canvas-1.4.1.tgz",
"integrity": "sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==",
"license": "MIT",
"dependencies": {
"css-line-break": "^2.1.0",
"text-segmentation": "^1.0.3"
},
"engines": {
"node": ">=8.0.0"
}
},
"node_modules/react": {
"version": "19.0.0",
"resolved": "https://registry.npmjs.org/react/-/react-19.0.0.tgz",
"integrity": "sha512-V8AVnmPIICiWpGfm6GLzCR/W5FXLchHop40W4nXBmdlEceh16rCN8O8LNWm5bh5XUX91fh7KpA+W0TgMKmgTpQ==",
"license": "MIT",
"engines": {
"node": ">=0.10.0"
}
},
"node_modules/text-segmentation": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/text-segmentation/-/text-segmentation-1.0.3.tgz",
"integrity": "sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw==",
"license": "MIT",
"dependencies": {
"utrie": "^1.0.2"
}
},
"node_modules/use-react-screenshot": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/use-react-screenshot/-/use-react-screenshot-4.0.0.tgz",
"integrity": "sha512-4UZIORp7iCklfNOS/dPJab9SPeGdS0nFyIi3qA1rfMyYf/em/KfodYhrOlSHAHWvfdeCrS67Jjk6H4M4oLYSWg==",
"license": "MIT",
"engines": {
"node": ">=8",
"npm": ">=5"
},
"peerDependencies": {
"html2canvas": "^1.3.3",
"react": "^18.2.0"
}
},
"node_modules/utrie": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/utrie/-/utrie-1.0.2.tgz",
"integrity": "sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw==",
"license": "MIT",
"dependencies": {
"base64-arraybuffer": "^1.0.2"
}
}
}
}

7
package.json Normal file
View File

@@ -0,0 +1,7 @@
{
"dependencies": {
"html2canvas": "^1.4.1",
"react": "^19.0.0",
"use-react-screenshot": "^4.0.0"
}
}