Added more settings to /settings #5

next.config.js

@@ -10,7 +10,7 @@ module.exports = {
 		ignoreDuringBuilds: true
 	},
 	env: {
-		NEXT_PUBLIC_GITHUB_URL: packageInfo.repository.url,
+		NEXT_PUBLIC_GITHUB_URL: process.env.GIT_URL ?? packageInfo.repository.url,
 		NEXT_PUBLIC_APP_NAME: process.env.APP_NAME ?? packageInfo.displayName,
 		NEXT_PUBLIC_DEFAULT_SERVER:
 			process.env.DEFAULT_SERVER ?? "invidious.privacy.gd"

src/components/MaterialColorPicker/ColorBox.tsx

@@ -0,0 +1,20 @@
+import Box from "@mui/material/Box";
+import { styled } from "@mui/material/styles";
+
+interface ColorBoxProps {
+	color: string;
+}
+
+const ColorBox = styled(Box, {
+	shouldForwardProp: (prop) => prop !== "color"
+})<ColorBoxProps>(({ theme, color }) => ({
+	width: 24,
+	height: 24,
+	backgroundColor: color,
+	borderRadius: "50%",
+	borderColor: theme.palette.text.primary,
+	borderWidth: 2,
+	borderStyle: "solid"
+}));
+
+export default ColorBox;

src/components/MaterialColorPicker/index.tsx

@@ -0,0 +1,103 @@
+import { FC } from "react";
+
+import Box from "@mui/material/Box";
+import Grid from "@mui/material/Grid";
+import Modal from "@mui/material/Modal";
+import Typography from "@mui/material/Typography";
+import {
+	blue,
+	green,
+	amber,
+	red,
+	cyan,
+	teal,
+	deepOrange,
+	indigo,
+	yellow,
+	lightBlue,
+	orange,
+	lime,
+	deepPurple,
+	lightGreen,
+	pink,
+	purple
+} from "@mui/material/colors";
+import { useTheme } from "@mui/material/styles";
+
+import ModalBox from "@components/ModalBox";
+
+const colors = [
+	red,
+	deepOrange,
+	orange,
+	amber,
+	yellow,
+	lime,
+	lightGreen,
+	green,
+	teal,
+	cyan,
+	lightBlue,
+	blue,
+	indigo,
+	deepPurple,
+	purple,
+	pink
+];
+
+const MaterialColorPicker: FC<{
+	isOpen: boolean;
+	setState: (isOpen: boolean) => void;
+	selectedColor: string;
+	setColor: (color: string) => void;
+}> = ({ setState, isOpen, selectedColor, setColor }) => {
+	const theme = useTheme();
+
+	return (
+		<Modal
+			open={isOpen}
+			onClose={() => setState(false)}
+			aria-labelledby="color-picker"
+			aria-describedby="Pick a material color"
+			component="div"
+		>
+			<ModalBox>
+				<Typography gutterBottom variant="h4">
+					Pick a color
+				</Typography>
+				<Grid container spacing={1} columns={12}>
+					{colors.map((color, i) => (
+						<Grid item key={i}>
+							{Object.values(color)
+								.slice(0, 10)
+								.map((shade, i) => (
+									<Box
+										onClick={() => setColor(shade)}
+										key={i}
+										sx={{
+											width: 24,
+											height: 24,
+											backgroundColor: shade,
+											borderRadius: "50%",
+											border:
+												shade == selectedColor
+													? {
+															borderColor: theme.palette.text.primary,
+															borderWidth: 2,
+															borderStyle: "solid"
+													  }
+													: null,
+											cursor: "pointer",
+											mb: 1
+										}}
+									></Box>
+								))}
+						</Grid>
+					))}
+				</Grid>
+			</ModalBox>
+		</Modal>
+	);
+};
+
+export default MaterialColorPicker;

src/components/ModalBox.ts

@@ -0,0 +1,17 @@
+import Box from "@mui/material/Box";
+
+import styled from "@mui/system/styled";
+
+const ModalBox = styled(Box)(({ theme }) => ({
+	padding: "2rem",
+	position: "absolute",
+	left: "50%",
+	top: "50%",
+	transform: "translate(-50%, -50%)",
+	minWidth: "20rem",
+	backgroundColor: theme.palette.background.paper,
+	borderRadius: 5,
+	outline: "none"
+}));
+
+export default ModalBox;

src/components/Navbar/index.tsx

@@ -95,19 +95,21 @@ const Navbar: FC = () => {
 						</IconButton>
 
 						<Link href="/" passHref>
-							<Typography
-								variant="h6"
-								component="div"
-								sx={{
-									mr: 2,
-									display: "flex",
-									alignItems: "center",
-									cursor: "pointer"
-								}}
-							>
-								<PlayCircleOutline sx={{ mr: 1 }} />
-								{process.env.NEXT_PUBLIC_APP_NAME}
-							</Typography>
+							<a>
+								<Typography
+									variant="h6"
+									component="div"
+									sx={{
+										mr: 2,
+										display: "flex",
+										alignItems: "center",
+										cursor: "pointer"
+									}}
+								>
+									<PlayCircleOutline sx={{ mr: 1 }} />
+									{process.env.NEXT_PUBLIC_APP_NAME}
+								</Typography>
+							</a>
 						</Link>
 
 						<Box

src/interfaces/settings.ts

@@ -3,6 +3,16 @@ interface Settings {
 	primaryColor: string;
 	accentColor: string;
 	invidiousServer: string;
+	invidiousUsername?: string;
+	storageType: StorageType;
+	customServer?: string;
+	password?: string;
+}
+
+export enum StorageType {
+	Local = "local",
+	Invidious = "invidious",
+	RemoteServer = "remoteserver"
 }
 
 export default Settings;