Improved useability on smaller devices, added category menu to trending page

main
Guus van Meerveld 3 years ago
parent c6ecdb7819
commit 8e2b0e5d6b
Signed by: Guusvanmeerveld
GPG Key ID: 2BA7D7912771966E

@ -1,3 +1,11 @@
{ {
"extends": "next/core-web-vitals" "extends": "next/core-web-vitals",
"rules": {
"no-restricted-imports": [
"error",
{
"patterns": ["@mui/*/*/*", "!@mui/material/test-utils/*"]
}
]
}
} }

@ -81,7 +81,7 @@ const Navbar: FC = () => {
edge="start" edge="start"
color="inherit" color="inherit"
aria-label="menu" aria-label="menu"
sx={{ mr: 2, display: { md: "none", xs: "flex" } }} sx={{ mr: 2, display: { lg: "none", xs: "flex" } }}
onClick={() => setDrawerState(!drawerIsOpen)} onClick={() => setDrawerState(!drawerIsOpen)}
> >
<Menu /> <Menu />

@ -36,7 +36,7 @@ const Video: FC<VideoModel> = ({
const requestFields = ["authorThumbnails"]; const requestFields = ["authorThumbnails"];
const { isLoading, error, data } = useQuery<Channel, AxiosError<Error>>( const { isLoading, error, data } = useQuery<Channel, AxiosError<Error>>(
`channelData-${author.id}`, ["channelData", author.id],
() => () =>
axios axios
.get(`https://invidious.privacy.gd/api/v1/channels/${author.id}`, { .get(`https://invidious.privacy.gd/api/v1/channels/${author.id}`, {

@ -13,7 +13,9 @@ import useMediaQuery from "@mui/material/useMediaQuery";
import SEO from "@src/next-seo.config"; import SEO from "@src/next-seo.config";
import createTheme from "@src/theme"; import createTheme from "@src/theme";
const queryClient = new QueryClient(); const queryClient = new QueryClient({
defaultOptions: { queries: { refetchOnWindowFocus: false } }
});
const App = ({ Component, pageProps }: AppProps) => { const App = ({ Component, pageProps }: AppProps) => {
const prefersDarkMode = useMediaQuery("(prefers-color-scheme: dark)"); const prefersDarkMode = useMediaQuery("(prefers-color-scheme: dark)");

@ -3,10 +3,14 @@ import axios, { AxiosError } from "axios";
import { NextPage } from "next"; import { NextPage } from "next";
import { NextSeo } from "next-seo"; import { NextSeo } from "next-seo";
import { useState } from "react";
import { useQuery } from "react-query"; import { useQuery } from "react-query";
import Box from "@mui/material/Box"; import Box from "@mui/material/Box";
import Chip from "@mui/material/Chip";
import CircularProgress from "@mui/material/CircularProgress"; import CircularProgress from "@mui/material/CircularProgress";
import Typography from "@mui/material/Typography";
import { Error } from "@interfaces/api"; import { Error } from "@interfaces/api";
import { import {
@ -20,15 +24,35 @@ import Layout from "@components/Layout";
import Grid from "@components/Video/Grid"; import Grid from "@components/Video/Grid";
const Trending: NextPage = () => { const Trending: NextPage = () => {
const [selectedCategory, setCategory] = useState<string | undefined>();
const { isLoading, error, data } = useQuery< const { isLoading, error, data } = useQuery<
TrendingModel[], TrendingModel[],
AxiosError<Error> AxiosError<Error>
>( >(
"trendingData", "trendingData",
() => () =>
axios("https://invidious.privacy.gd/api/v1/trending").then( axios
(res) => res.data .get("https://invidious.privacy.gd/api/v1/trending", {
), params: {
fields: [
"title",
"description",
"descriptionHtml",
"videoId",
"author",
"authorId",
"authorUrl",
"lengthSeconds",
"published",
"publishedText",
"viewCount",
"videoThumbnails"
].join(","),
type: selectedCategory
}
})
.then((res) => res.data),
{ {
retry: 5, retry: 5,
retryDelay: 5000 retryDelay: 5000
@ -39,7 +63,7 @@ const Trending: NextPage = () => {
<> <>
<NextSeo title="Trending" /> <NextSeo title="Trending" />
<Layout> <Layout>
<Box sx={{ padding: { xs: 2, md: 5 } }}> <Box sx={{ px: { xs: 1, sm: 2, md: 5 } }}>
{isLoading && ( {isLoading && (
<Box <Box
sx={{ sx={{
@ -53,7 +77,28 @@ const Trending: NextPage = () => {
)} )}
{error && <Box>{error.response?.data.error}</Box>} {error && <Box>{error.response?.data.error}</Box>}
{!isLoading && !error && data && ( {!isLoading && !error && data && (
<>
<Box sx={{ my: 2 }}>
<Typography sx={{ display: "inline-block", mr: 1 }}>
Categories:
</Typography>
{["Music", "Gaming", "News", "Movies"].map((category) => {
const name = category.toLowerCase();
const isSelected = name == selectedCategory;
return (
<Chip
sx={{ mr: 1 }}
key={category}
color={isSelected ? "primary" : "default"}
label={category}
onClick={() => setCategory(isSelected ? undefined : name)}
/>
);
})}
</Box>
<Grid videos={data.map(trendingToVideo)} /> <Grid videos={data.map(trendingToVideo)} />
</>
)} )}
</Box> </Box>
</Layout> </Layout>

@ -0,0 +1,9 @@
import { NextPage } from "next";
import Layout from "@components/Layout";
const Watch: NextPage = () => {
return <Layout></Layout>;
};
export default Watch;
Loading…
Cancel
Save