Guusvanmeerveld
/
Materialtube
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Added Seo to settings page, added a few optional env variables

Browse Source
main
Guus van Meerveld 2 years ago
parent 44f2db7c25
commit 0973689fb7
Signed by: Guusvanmeerveld
GPG Key ID: 2BA7D7912771966E
9 changed files with 121 additions and 94 deletions
Show Stats Download Patch File Download Diff File

6
next.config.js
Unescape View File

@ -1,3 +1,5 @@
const packageInfo = require("./package.json");
// @ts-check
/**
* @type {import('next').NextConfig}
@ -8,7 +10,9 @@ module.exports = {
ignoreDuringBuilds: true
},
env: {
NEXT_PUBLIC_GITHUB_URL: "https://github.com/Guusvanmeerveld/MaterialTube"
NEXT_PUBLIC_GITHUB_URL: packageInfo.repository.url,
NEXT_PUBLIC_APP_NAME: process.env.APP_NAME ?? packageInfo.displayName,
NEXT_PUBLIC_DEFAULT_SERVER: process.env.DEFAULT_SERVER ?? "vid.puffyan.us"
},
basePath: process.env.BASE_PATH ?? "",
trailingSlash: !(process.env.CI == "true")

3
package.json
Unescape View File

@ -3,6 +3,9 @@
"displayName": "MaterialTube",
"description": "MaterialTube is a beautiful and elegant web client for Invidious servers, built using Next.js and MUI.",
"license": "MIT",
"repository": {
"url": "https://github.com/Guusvanmeerveld/MaterialTube"
},
"scripts": {
"dev": "next dev",
"build": "next build",

4
src/components/Navbar/Drawer.tsx
Unescape View File

@ -36,7 +36,9 @@ const AppDrawer: FC<{
onKeyDown={toggleDrawer(false)}
>
<Box padding={2}>
<Typography variant="h4">{packageInfo.displayName}</Typography>
<Typography variant="h4">
{process.env.NEXT_PUBLIC_APP_NAME}
</Typography>
</Box>
<Divider />
<List>

23
src/components/Navbar/index.tsx
Unescape View File

@ -91,14 +91,21 @@ const Navbar: FC = () => {
<Menu />
</IconButton>
<Typography
variant="h6"
component="div"
sx={{ mr: 2, display: "flex", alignItems: "center" }}
>
<PlayCircleOutline sx={{ mr: 1 }} />
{packageInfo.displayName}
</Typography>
<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>
</Link>
<Box
sx={{

10
src/next-seo.config.ts
Unescape View File

@ -2,13 +2,15 @@ import packageInfo from "../package.json";
import type { DefaultSeoProps } from "next-seo";
const name = process.env.NEXT_PUBLIC_APP_NAME;
const SEO: DefaultSeoProps = {
titleTemplate: `%s | ${packageInfo.displayName}`,
defaultTitle: packageInfo.displayName,
titleTemplate: `%s | ${name}`,
defaultTitle: name,
description: packageInfo.description,
openGraph: {
description: packageInfo.displayName,
site_name: packageInfo.displayName
description: name,
site_name: name
}
};

2
src/pages/index.tsx
Unescape View File

@ -25,7 +25,7 @@ const Index: NextPage = () => (
>
<PlayCircleOutline sx={{ mt: 2, fontSize: 100 }} />
<Typography variant="h2" sx={{ my: 1 }}>
{packageInfo.displayName}
{process.env.NEXT_PUBLIC_APP_NAME}
</Typography>
<Typography variant="h4" sx={{ my: 1 }}>
{packageInfo.description}

161
src/pages/settings.tsx
Unescape View File

@ -1,6 +1,7 @@
import axios from "axios";
import { NextPage } from "next";
import { NextSeo } from "next-seo";
import { FC, useState } from "react";
@ -163,94 +164,102 @@ const Settings: NextPage = () => {
};
return (
<Layout>
<Container>
<Typography sx={{ my: 2 }} variant="h2">
Settings
</Typography>
<>
<NextSeo
title="Settings"
description={`Update your ${process.env.NEXT_PUBLIC_APP_NAME} settings`}
/>
<Layout>
<Container>
<Typography sx={{ my: 2 }} variant="h2">
Settings
</Typography>
<Divider sx={{ mb: 4 }} />
<Divider sx={{ mb: 4 }} />
<Typography variant="h4">Theme</Typography>
<Typography variant="h4">Theme</Typography>
<Box sx={{ my: 3, display: "flex" }}>
<Typography variant="h5" sx={{ flexGrow: 1 }}>
General theme
</Typography>
<ButtonGroup
variant="contained"
color="primary"
aria-label="outlined default button group"
>
<Button onClick={() => setSetting("theme", "light")}>Light</Button>
<Button onClick={() => setSetting("theme")}>System</Button>
<Button onClick={() => setSetting("theme", "dark")}>Dark</Button>
</ButtonGroup>
</Box>
<Box sx={{ my: 3, display: "flex" }}>
<Typography variant="h5" sx={{ flexGrow: 1 }}>
General theme
</Typography>
<ButtonGroup
variant="contained"
color="primary"
aria-label="outlined default button group"
>
<Button onClick={() => setSetting("theme", "light")}>
Light
</Button>
<Button onClick={() => setSetting("theme")}>System</Button>
<Button onClick={() => setSetting("theme", "dark")}>Dark</Button>
</ButtonGroup>
</Box>
<ColorSetting type="Primary Color" />
<ColorSetting type="Primary Color" />
<ColorSetting type="Accent Color" />
<ColorSetting type="Accent Color" />
<Divider sx={{ my: 4 }} />
<Divider sx={{ my: 4 }} />
<Typography variant="h4">Player</Typography>
<Typography variant="h4">Player</Typography>
<Divider sx={{ my: 4 }} />
<Divider sx={{ my: 4 }} />
<Typography variant="h4">Miscellaneous</Typography>
<Typography variant="h4">Miscellaneous</Typography>
<Box sx={{ my: 3, display: "flex", alignItems: "center" }}>
<Typography variant="h5" sx={{ flexGrow: 1 }}>
Invidious Server
</Typography>
<Box sx={{ mr: 2 }}>
{invidiousServerResponse.data &&
!invidiousServerResponse.isLoading && (
<>
<Done
onClick={() => setModalState(true)}
sx={{ color: green[800], cursor: "pointer" }}
/>
<InfoModal />
</>
<Box sx={{ my: 3, display: "flex", alignItems: "center" }}>
<Typography variant="h5" sx={{ flexGrow: 1 }}>
Invidious Server
</Typography>
<Box sx={{ mr: 2 }}>
{invidiousServerResponse.data &&
!invidiousServerResponse.isLoading && (
<>
<Done
onClick={() => setModalState(true)}
sx={{ color: green[800], cursor: "pointer" }}
/>
<InfoModal />
</>
)}
{invidiousServerResponse.error && (
<Error sx={{ color: red[800] }} />
)}
{invidiousServerResponse.error && (
<Error sx={{ color: red[800] }} />
)}
{invidiousServerResponse.isLoading && <CircularProgress />}
{invidiousServerResponse.isLoading && <CircularProgress />}
</Box>
<FormControl sx={{ minWidth: 200 }}>
<InputLabel id="server-select-label">Server</InputLabel>
<Select
labelId="server-select-label"
id="server-select"
value={settings.invidiousServer}
label="Server"
onChange={(e) => {
const server = e.target.value;
setSetting("invidiousServer", server);
}}
MenuProps={{ sx: { maxHeight: 300 } }}
>
{instances.data &&
instances.data
.filter(
([, server]) =>
server.type != ServerInstanceType.Onion &&
server.api == true
)
.map(([uri, server]) => (
<MenuItem key={uri} value={uri}>
{server.flag} {uri}
</MenuItem>
))}
</Select>
</FormControl>
</Box>
<FormControl sx={{ minWidth: 200 }}>
<InputLabel id="server-select-label">Server</InputLabel>
<Select
labelId="server-select-label"
id="server-select"
value={settings.invidiousServer}
label="Server"
onChange={(e) => {
const server = e.target.value;
setSetting("invidiousServer", server);
}}
MenuProps={{ sx: { maxHeight: 300 } }}
>
{instances.data &&
instances.data
.filter(
([, server]) =>
server.type != ServerInstanceType.Onion &&
server.api == true
)
.map(([uri, server]) => (
<MenuItem key={uri} value={uri}>
{server.flag} {uri}
</MenuItem>
))}
</Select>
</FormControl>
</Box>
</Container>
</Layout>
</Container>
</Layout>
</>
);
};

4
src/pages/trending.tsx
Unescape View File

@ -26,10 +26,10 @@ const Trending: NextPage = () => {
const [settings] = useSettings();
const { isLoading, error, data } = useQuery<
const { isLoading, error, data, refetch } = useQuery<
TrendingModel[],
AxiosError<Error>
>("trendingData", () =>
>("trendingData", (context) =>
axios
.get(`https://${settings.invidiousServer}/api/v1/trending`, {
params: {

2
src/utils/hooks.ts
Unescape View File

@ -9,7 +9,7 @@ import Settings from "@interfaces/settings";
const defaultSettings: Settings = {
primaryColor: red[800],
accentColor: red[800],
invidiousServer: "vid.puffyan.us"
invidiousServer: process.env.NEXT_PUBLIC_DEFAULT_SERVER as string
};
export const useSettings = (): [

Write Preview
Loading…
Cancel
Save