diff --git a/.eslintrc.json b/.eslintrc.json
index bffb357..c0faf1d 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -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/*"]
+ }
+ ]
+ }
}
diff --git a/src/components/Navbar/index.tsx b/src/components/Navbar/index.tsx
index 0d9eaa4..daa1f40 100644
--- a/src/components/Navbar/index.tsx
+++ b/src/components/Navbar/index.tsx
@@ -81,7 +81,7 @@ const Navbar: FC = () => {
edge="start"
color="inherit"
aria-label="menu"
- sx={{ mr: 2, display: { md: "none", xs: "flex" } }}
+ sx={{ mr: 2, display: { lg: "none", xs: "flex" } }}
onClick={() => setDrawerState(!drawerIsOpen)}
>
diff --git a/src/components/Video/index.tsx b/src/components/Video/index.tsx
index 61246e4..cd068c4 100644
--- a/src/components/Video/index.tsx
+++ b/src/components/Video/index.tsx
@@ -36,7 +36,7 @@ const Video: FC = ({
const requestFields = ["authorThumbnails"];
const { isLoading, error, data } = useQuery>(
- `channelData-${author.id}`,
+ ["channelData", author.id],
() =>
axios
.get(`https://invidious.privacy.gd/api/v1/channels/${author.id}`, {
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index ca78c0b..6cf92f2 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -13,7 +13,9 @@ import useMediaQuery from "@mui/material/useMediaQuery";
import SEO from "@src/next-seo.config";
import createTheme from "@src/theme";
-const queryClient = new QueryClient();
+const queryClient = new QueryClient({
+ defaultOptions: { queries: { refetchOnWindowFocus: false } }
+});
const App = ({ Component, pageProps }: AppProps) => {
const prefersDarkMode = useMediaQuery("(prefers-color-scheme: dark)");
diff --git a/src/pages/trending.tsx b/src/pages/trending.tsx
index a8e534c..d48a534 100644
--- a/src/pages/trending.tsx
+++ b/src/pages/trending.tsx
@@ -3,10 +3,14 @@ import axios, { AxiosError } from "axios";
import { NextPage } from "next";
import { NextSeo } from "next-seo";
+import { useState } from "react";
+
import { useQuery } from "react-query";
import Box from "@mui/material/Box";
+import Chip from "@mui/material/Chip";
import CircularProgress from "@mui/material/CircularProgress";
+import Typography from "@mui/material/Typography";
import { Error } from "@interfaces/api";
import {
@@ -20,15 +24,35 @@ import Layout from "@components/Layout";
import Grid from "@components/Video/Grid";
const Trending: NextPage = () => {
+ const [selectedCategory, setCategory] = useState();
+
const { isLoading, error, data } = useQuery<
TrendingModel[],
AxiosError
>(
"trendingData",
() =>
- axios("https://invidious.privacy.gd/api/v1/trending").then(
- (res) => res.data
- ),
+ axios
+ .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,
retryDelay: 5000
@@ -39,7 +63,7 @@ const Trending: NextPage = () => {
<>
-
+
{isLoading && (
{
)}
{error && {error.response?.data.error}}
{!isLoading && !error && data && (
-
+ <>
+
+
+ Categories:
+
+ {["Music", "Gaming", "News", "Movies"].map((category) => {
+ const name = category.toLowerCase();
+ const isSelected = name == selectedCategory;
+
+ return (
+ setCategory(isSelected ? undefined : name)}
+ />
+ );
+ })}
+
+
+ >
)}
diff --git a/src/pages/watch.tsx b/src/pages/watch.tsx
new file mode 100644
index 0000000..eac7780
--- /dev/null
+++ b/src/pages/watch.tsx
@@ -0,0 +1,9 @@
+import { NextPage } from "next";
+
+import Layout from "@components/Layout";
+
+const Watch: NextPage = () => {
+ return ;
+};
+
+export default Watch;