Merge pull request #31 from Ipmake/ver/1.0.0

Redesign, Watchlist and support for new plex features
Ipmake · Jan 14, 2025 · 4cb14d7 · 4cb14d7
2 parents 20f4ef7 + aaa3691
commit 4cb14d7
Show file tree

Hide file tree

Showing 24 changed files with 1,996 additions and 947 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -5,7 +5,10 @@
   "dependencies": {
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.5",
+    "@fontsource-variable/inter": "^5.1.1",
     "@fontsource-variable/quicksand": "^5.1.0",
+    "@fontsource-variable/rubik": "^5.1.1",
+    "@fontsource/ibm-plex-sans": "^5.1.1",
     "@mui/icons-material": "^5.15.15",
     "@mui/material": "^5.15.15",
     "axios": "^1.6.8",

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -9,32 +9,54 @@ import Login from "./pages/Login";
 import Search from "./pages/Search";
 import Home from "./pages/Home";
 import Library from "./pages/Library";
+import BigReader from "./components/BigReader";
+import { useWatchListCache } from "./states/WatchListCache";
 
 function App() {
   const location = useLocation();
   const navigate = useNavigate();
 
   useEffect(() => {
-    if(!localStorage.getItem("accessToken") && !location.pathname.startsWith("/login")) navigate("/login")
+    if (
+      !localStorage.getItem("accessToken") &&
+      !location.pathname.startsWith("/login")
+    )
+      navigate("/login");
   }, [location.pathname]);
 
+  useEffect(() => {
+    useWatchListCache.getState().loadWatchListCache();
+
+    const interval = setInterval(() => {
+      useWatchListCache.getState().loadWatchListCache();
+    }, 60000);
+
+    return () => clearInterval(interval);
+  }, []);
+
   return (
     <>
+      <BigReader />
       <Routes>
         <Route path="*" element={<AppBar />} />
         <Route path="/watch/:itemID" element={<></>} />
       </Routes>
-      <Box sx={{
-        width: "100%",
-        height: "auto",
-      }}>
+      <Box
+        sx={{
+          width: "100%",
+          height: "auto",
+        }}
+      >
         <Routes>
           <Route path="/" element={<Home />} />
           <Route path="/browse/:libraryID" element={<Browse />} />
           <Route path="/watch/:itemID" element={<Watch />} />
           <Route path="/login" element={<Login />} />
           <Route path="/search/:query?" element={<Search />} />
-          <Route path="/library/:libraryKey/dir/:dir/:subdir?" element={<Library />} />
+          <Route
+            path="/library/:libraryKey/dir/:dir/:subdir?"
+            element={<Library />}
+          />
         </Routes>
       </Box>
     </>

diff --git a/frontend/src/components/AppBar.tsx b/frontend/src/components/AppBar.tsx
@@ -66,6 +66,7 @@ function Appbar() {
         transition: "all 0.2s ease-in-out",
 
         bgcolor: scrollAtTop ? "#00000000" : `#000000AA`,
+        backdropFilter: scrollAtTop ? "blur(0px)" : "blur(10px)",
         boxShadow: scrollAtTop ? "none" : "0px 0px 10px 0px #000000AA",
 
         borderBottomLeftRadius: "10px",
@@ -229,6 +230,7 @@ function HeadLink({
         color: "inherit",
         fontWeight: 500,
         transition: "all 0.2s ease-in-out",
+        fontFamily: '"Inter Variable", sans-serif',
       }}
       aria-current={active ? "page" : undefined}
     >

diff --git a/frontend/src/components/BigReader.tsx b/frontend/src/components/BigReader.tsx
@@ -0,0 +1,60 @@
+import { Backdrop, Box, Button, Typography } from "@mui/material";
+import React from "react";
+import { create } from "zustand";
+
+interface BigReaderState {
+  bigReader: string | null;
+  setBigReader: (bigReader: string) => void;
+  closeBigReader: () => void;
+}
+
+export const useBigReader = create<BigReaderState>((set) => ({
+  bigReader: null,
+  setBigReader: (bigReader) => set({ bigReader }),
+  closeBigReader: () => set({ bigReader: null }),
+}));
+
+function BigReader() {
+  const { bigReader, closeBigReader } = useBigReader();
+  if (!bigReader) return null;
+  return (
+    <Backdrop
+      open={Boolean(bigReader)}
+      onClick={closeBigReader}
+      sx={{
+        zIndex: "100000",
+      }}
+    >
+      <Box
+        sx={{
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          justifyContent: "flex-start",
+          width: "600px",
+          maxheight: "500px",
+          backgroundColor: "#171717",
+          padding: "20px",
+          borderRadius: "10px",
+          overflowY: "auto",
+        }}
+        onClick={(e) => e.stopPropagation()}
+      >
+        <Typography
+          sx={{
+            fontSize: "1rem",
+            fontWeight: "light",
+            color: "white",
+            mb: "10px",
+          }}
+        >
+          {bigReader}
+        </Typography>
+
+        <Button onClick={closeBigReader}>Close</Button>
+      </Box>
+    </Backdrop>
+  );
+}
+
+export default BigReader;
diff --git a/frontend/src/components/CenteredSpinner.tsx b/frontend/src/components/CenteredSpinner.tsx
@@ -1,16 +1,18 @@
-import { Box, CircularProgress } from '@mui/material'
-import React from 'react'
+import { Box, CircularProgress } from "@mui/material";
+import React from "react";
 
 export default function CenteredSpinner() {
   return (
-    <Box sx={{
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
-        height: '100%',
-        width: '100%'
-    }}>
-        <CircularProgress />
+    <Box
+      sx={{
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        height: "100%",
+        width: "100%",
+      }}
+    >
+      <CircularProgress />
     </Box>
-  )
+  );
 }