diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
index fdc2b70..cbb1899 100644
--- a/src/components/Layout.tsx
+++ b/src/components/Layout.tsx
@@ -1,10 +1,15 @@
import { FC } from "react";
+import Box from "@mui/material/Box";
+
import Navbar from "@components/Navbar";
const Layout: FC = ({ children }) => (
<>
+
{children}
>
);
diff --git a/src/components/Navbar/Drawer.tsx b/src/components/Navbar/Drawer.tsx
index e0d3386..e4889f0 100644
--- a/src/components/Navbar/Drawer.tsx
+++ b/src/components/Navbar/Drawer.tsx
@@ -13,23 +13,24 @@ import ListItemIcon from "@mui/material/ListItemIcon";
import ListItemText from "@mui/material/ListItemText";
import Typography from "@mui/material/Typography";
-import { Settings } from "@mui/icons-material";
+import Settings from "@mui/icons-material/Settings";
-const MuiDrawer: FC<{
+const AppDrawer: FC<{
drawerIsOpen: boolean;
toggleDrawer: (
isOpen: boolean
) => (event: React.KeyboardEvent | React.MouseEvent) => void;
+ width: number;
pages: {
name: string;
icon: JSX.Element;
link: string;
}[];
-}> = ({ drawerIsOpen, toggleDrawer, pages }) => {
+}> = ({ drawerIsOpen, toggleDrawer, pages, width }) => {
return (
({
+ position: "relative",
+ borderRadius: theme.shape.borderRadius,
+ backgroundColor: alpha(theme.palette.common.white, 0.15),
+ "&:hover": {
+ backgroundColor: alpha(theme.palette.common.white, 0.25)
+ },
+ marginRight: theme.spacing(2),
+ marginLeft: 0,
+ width: "100%",
+ [theme.breakpoints.up("sm")]: {
+ marginLeft: theme.spacing(3),
+ width: "auto"
+ }
+}));
+
+export const SearchIconWrapper = styled("div")(({ theme }) => ({
+ padding: theme.spacing(0, 2),
+ height: "100%",
+ position: "absolute",
+ pointerEvents: "none",
+ display: "flex",
+ alignItems: "center",
+ justifyContent: "center"
+}));
+
+export const StyledInputBase = styled(InputBase)(({ theme }) => ({
+ color: "inherit",
+ "& .MuiInputBase-input": {
+ padding: theme.spacing(1, 1, 1, 0),
+ paddingLeft: `calc(1em + ${theme.spacing(4)})`,
+ transition: theme.transitions.create("width"),
+ width: "100%",
+ [theme.breakpoints.up("md")]: {
+ width: "20ch"
+ }
+ }
+}));
+
+export default Search;
diff --git a/src/components/Navbar/index.tsx b/src/components/Navbar/index.tsx
index ace2e9c..0d9eaa4 100644
--- a/src/components/Navbar/index.tsx
+++ b/src/components/Navbar/index.tsx
@@ -1,6 +1,7 @@
import packageInfo from "../../../package.json";
import Link from "next/link";
+import { useRouter } from "next/router";
import { FC, useState } from "react";
@@ -11,20 +12,26 @@ import IconButton from "@mui/material/IconButton";
import Toolbar from "@mui/material/Toolbar";
import Typography from "@mui/material/Typography";
-import {
- History,
- Subscriptions,
- Menu,
- Whatshot,
- PlaylistAddCheck,
- Settings,
- PlayCircleOutline
-} from "@mui/icons-material";
+import History from "@mui/icons-material/History";
+import Menu from "@mui/icons-material/Menu";
+import PlayCircleOutline from "@mui/icons-material/PlayCircleOutline";
+import PlaylistAddCheck from "@mui/icons-material/PlaylistAddCheck";
+import SearchIcon from "@mui/icons-material/Search";
+import Settings from "@mui/icons-material/Settings";
+import Subscriptions from "@mui/icons-material/Subscriptions";
+import Whatshot from "@mui/icons-material/Whatshot";
import Drawer from "@components/Navbar/Drawer";
+import Search, {
+ SearchIconWrapper,
+ StyledInputBase
+} from "@components/Navbar/Search";
+
+export const drawerWidth = 240;
const Navbar: FC = () => {
const [drawerIsOpen, setDrawerState] = useState(false);
+ const router = useRouter();
const toggleDrawer =
(open: boolean) => (event: React.KeyboardEvent | React.MouseEvent) => {
@@ -61,12 +68,13 @@ const Navbar: FC = () => {
return (
<>
-
+
{
color="inherit"
aria-label="menu"
sx={{ mr: 2, display: { md: "none", xs: "flex" } }}
- onClick={toggleDrawer(true)}
+ onClick={() => setDrawerState(!drawerIsOpen)}
>
+
{
{packageInfo.displayName}
-
+
+
{pages.map((page, i) => (
))}
+
+
+
+
+
+
+
+
= ({
thumbnail,
title,
@@ -27,6 +33,24 @@ const Video: FC = ({
views,
published
}) => {
+ const requestFields = ["authorThumbnails"];
+
+ const { isLoading, error, data } = useQuery>(
+ `channelData-${author.id}`,
+ () =>
+ axios
+ .get(`https://invidious.privacy.gd/api/v1/channels/${author.id}`, {
+ params: {
+ fields: requestFields.join(",")
+ }
+ })
+ .then((res) => res.data),
+ {
+ retry: 1,
+ retryDelay: 5000
+ }
+ );
+
const router = useRouter();
return (
@@ -46,7 +70,18 @@ const Video: FC = ({
-
+ {isLoading && }
+ {data && (
+ thumbnail.width == 100
+ )?.url as string
+ }
+ />
+ )}
{author.name}
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 210caf2..0c9941a 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -8,7 +8,7 @@ import Box from "@mui/material/Box";
import Button from "@mui/material/Button";
import Typography from "@mui/material/Typography";
-import { PlayCircleOutline } from "@mui/icons-material";
+import PlayCircleOutline from "@mui/icons-material/PlayCircleOutline";
import Layout from "@components/Layout";