From c6ecdb7819837aec1a058c4d5c4da7cc4a6d9212 Mon Sep 17 00:00:00 2001 From: Guusvanmeerveld Date: Wed, 23 Mar 2022 17:11:12 +0100 Subject: [PATCH] Removed all top level imports (bundle size), added search to appbar --- src/components/Layout.tsx | 5 +++ src/components/Navbar/Drawer.tsx | 11 +++--- src/components/Navbar/Search.tsx | 43 ++++++++++++++++++++++++ src/components/Navbar/index.tsx | 57 ++++++++++++++++++++++++-------- src/components/Video/Grid.tsx | 2 +- src/components/Video/index.tsx | 39 ++++++++++++++++++++-- src/pages/index.tsx | 2 +- 7 files changed, 136 insertions(+), 23 deletions(-) create mode 100644 src/components/Navbar/Search.tsx 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";