import { NextPage } from "next";
import { NextSeo } from "next-seo";
import { FC, useState } from "react";
import { useMutation, useQuery } from "react-query";
import axios from "axios";
import Box from "@mui/material/Box";
import Button from "@mui/material/Button";
import ButtonGroup from "@mui/material/ButtonGroup";
import CircularProgress from "@mui/material/CircularProgress";
import Container from "@mui/material/Container";
import Divider from "@mui/material/Divider";
import FormControl from "@mui/material/FormControl";
import InputLabel from "@mui/material/InputLabel";
import MenuItem from "@mui/material/MenuItem";
import Modal from "@mui/material/Modal";
import Select from "@mui/material/Select";
import TextField from "@mui/material/TextField";
import Typography from "@mui/material/Typography";
import { red, green } from "@mui/material/colors/";
import { useTheme } from "@mui/material/styles/";
import Done from "@mui/icons-material/Done";
import Error from "@mui/icons-material/Error";
import Refresh from "@mui/icons-material/Refresh";
import {
ServerInstance,
ServerInstanceType,
Stats
} from "@interfaces/api/instances";
import { StorageType } from "@interfaces/settings";
import useSettings from "@utils/hooks/useSettings";
import Layout from "@components/Layout";
import MaterialColorPicker from "@components/MaterialColorPicker";
import ColorBox from "@components/MaterialColorPicker/ColorBox";
import ModalBox from "@components/ModalBox";
const InfoModal: FC<{
modalIsOpen: boolean;
setModalState: (isOpen: boolean) => void;
data: Stats;
}> = ({ modalIsOpen, setModalState, data }) => {
const [settings] = useSettings();
const lastUpdated = new Date(data.metadata.updatedAt * 1000);
return (
setModalState(false)}
aria-labelledby="stats-modal"
aria-describedby="Shows server stats"
>
Stats for {settings.invidiousServer}
Version: {data.version}
Software name: {data.software.name}{" "}
Software version:{" "}
{data.software.version}
Software branch: {
data.software.branch
}{" "}
Is accepting registrations:{" "}
{data.openRegistrations ? "Yes" : "No"}
Total users: {
data.usage.users.total
}{" "}
Active in the past half year:{" "}
{data.usage.users.activeHalfyear}
Active in the past month:{" "}
{
data.usage.users.activeMonth
}
Stats updated at:{" "}
{lastUpdated.toLocaleDateString()} -{" "}
{lastUpdated.toLocaleTimeString()}
);
};
const Setting: FC<{ title: string; description?: string }> = ({
title,
children,
description
}) => {
const theme = useTheme();
return (
{title}
{description && (
{description}
)}
{children}
);
};
const Settings: NextPage = () => {
const [settings, setSettings] = useSettings();
const setSetting = (key: string, value?: string): void =>
setSettings({ ...settings, [key]: value });
const theme = useTheme();
const [primaryColorModalIsOpen, setPrimaryColorModal] = useState(false);
const [accentColorModalIsOpen, setAccentColorModal] = useState(false);
const [modalIsOpen, setModalState] = useState(false);
const instances = useQuery<[string, ServerInstance][]>(
"invidiousInstances",
() =>
axios
.get("https://api.invidious.io/instances.json")
.then((res) => res.data),
{ retry: false }
);
const invidiousServerResponse = useMutation(
"invidiousInstance",
(server) =>
axios
.get(`https://${server}/api/v1/stats`)
.then((res) => res.data)
);
const allowsRegistrations =
invidiousServerResponse.data?.openRegistrations;
return (
<>
Settings
Theme
setSetting(
"theme",
"light"
)
}
>
Light
setSetting(
"theme"
)
}
>
System
setSetting(
"theme",
"dark"
)
}
>
Dark
setPrimaryColorModal(
true
)
}
variant="contained"
>
Pick Color
setSetting(
"primaryColor",
color
)
}
selectedColor={
settings.primaryColor
}
/>
setAccentColorModal(
true
)
}
variant="contained"
>
Pick Color
setSetting(
"accentColor",
color
)
}
selectedColor={
settings.accentColor
}
/>
Player
Data
{!invidiousServerResponse.data &&
!invidiousServerResponse.error &&
!invidiousServerResponse.isLoading && (
invidiousServerResponse.mutate(
settings.invidiousServer
)
}
/>
)}
{invidiousServerResponse.data &&
!invidiousServerResponse.isLoading && (
<>
setModalState(
true
)
}
sx={{
color: green[800],
cursor: "pointer"
}}
/>
>
)}
{invidiousServerResponse.error && (
)}
{invidiousServerResponse.isLoading && (
)}
Server
{
const server =
e
.target
.value;
invidiousServerResponse.mutate(
server
);
setSetting(
"invidiousServer",
server
);
}}
MenuProps={{
sx: {
maxHeight: 300
}
}}
>
{instances.data &&
instances.data
.filter(
([
,
server
]) =>
server.type !=
ServerInstanceType.Onion &&
server.api ==
true
)
.map(
([
uri,
server
]) => (
{
server.flag
}{" "}
{
uri
}
)
)}
Location
{
const location =
e
.target
.value;
setSetting(
"storageType",
location
);
}}
MenuProps={{
sx: {
maxHeight: 300
}
}}
>
{[
{
name: "Locally",
value: StorageType.Local
},
{
name: "Invidious server using auth",
value: StorageType.Invidious
},
{
name: `A custom ${process.env.NEXT_PUBLIC_APP_NAME} auth server`,
value: StorageType.RemoteServer
}
].map(
(
location,
i
) => (
{
location.name
}
)
)}
{settings.storageType !=
StorageType.Local && (
<>
{settings.storageType ==
"invidious" &&
allowsRegistrations && (
)}
{settings.storageType ==
StorageType.RemoteServer && (
)}
>
)}
>
);
};
export default Settings;