feat: Add LibraryScreen component and update routing for library links

Ipmake · Jan 28, 2025 · 0f43249 · 0f43249
1 parent fff0d7e
commit 0f43249
Show file tree

Hide file tree

Showing 5 changed files with 169 additions and 12 deletions.
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -15,6 +15,7 @@ import Startup, { useStartupState } from "./pages/Startup";
 import PerPlexedSync from "./components/PerPlexedSync";
 import WaitingRoom from "./pages/WaitingRoom";
 import ToastManager from "./components/ToastManager";
+import LibraryScreen from "./components/LibraryScreen";
 
 function AppManager() {
   const { loading } = useStartupState();
@@ -66,6 +67,7 @@ function App() {
       <BigReader />
       <PerPlexedSync />
       <ToastManager />
+      <LibraryScreen />
       <Routes>
         <Route path="*" element={<AppBar />} />
         <Route path="/watch/:itemID" element={<></>} />

diff --git a/frontend/src/components/LibraryScreen.tsx b/frontend/src/components/LibraryScreen.tsx
@@ -0,0 +1,153 @@
+import {
+  Alert,
+  Backdrop,
+  Box,
+  CircularProgress,
+  Grid,
+  Typography,
+} from "@mui/material";
+import React, { useEffect, useState } from "react";
+import { useSearchParams } from "react-router-dom";
+import { getLibraryDir } from "../plex";
+import MovieItem from "./MovieItem";
+
+function LibraryScreen() {
+  const [searchParams, setSearchParams] = useSearchParams();
+
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [library, setLibrary] = useState<Plex.MediaContainer | null>(null);
+
+  const bkey = searchParams.has("bkey") ? decodeURIComponent(searchParams.get("bkey") as string) : null;
+
+  useEffect(() => {
+    if (!(searchParams.has("mid") && searchParams.has("bkey"))) return;
+
+    const localbkey = searchParams.get("bkey");
+    if (localbkey) setSearchParams({ bkey: localbkey });
+  }, [searchParams, setSearchParams]);
+
+  useEffect(() => {
+    if (!bkey) return;
+
+    setLoading(true);
+    setError(null);
+    getLibraryDir(bkey)
+      .then((data) => {
+        setLibrary(data);
+        setLoading(false);
+      })
+      .catch((e) => {
+        setError(e.message);
+        setLoading(false);
+      });
+  }, [bkey, searchParams]);
+
+  if (loading)
+    return (
+      <Backdrop
+        open={searchParams.has("bkey")}
+        sx={{
+          overflowY: "scroll",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          zIndex: 9999,
+        }}
+        onClick={() => {
+          setSearchParams(new URLSearchParams());
+        }}
+      >
+        <CircularProgress />
+      </Backdrop>
+    );
+
+  if (bkey)
+    return (
+      <Backdrop
+        open={searchParams.has("bkey")}
+        sx={{
+          overflowY: "scroll",
+          display: "flex",
+          alignItems: "flex-start",
+          justifyContent: "center",
+          zIndex: 9999,
+        }}
+        onClick={() => {
+          setSearchParams(new URLSearchParams());
+        }}
+      >
+        <Box
+          sx={{
+            width: "120vh",
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "flex-start",
+            justifyContent: "flex-start",
+            backgroundColor: "#181818",
+            mt: 4,
+            padding: "20px",
+
+            ...(((library?.Metadata?.length ?? 0) > 10) && {
+                pb: "10vh"
+            }),
+
+            borderRadius: "10px",
+          }}
+          onClick={(e) => {
+            e.stopPropagation();
+          }}
+        >
+          {error && (
+            <Box sx={{ width: "100%" }}>
+              <Alert severity="error">{error}</Alert>
+            </Box>
+          )}
+
+          <Box
+            sx={{
+              width: "100%",
+              pt: 0,
+              pb: 2,
+              display: "flex",
+              gap: 0,
+              flexDirection: "row",
+              alignItems: "center",
+              justifyContent: "flex-start",
+              userSelect: "none",
+            }}
+          >
+            <Typography
+              sx={{
+                color: "#fff",
+                fontSize: "2rem",
+                fontWeight: "bold",
+              }}
+            >
+              {library?.title1} {library?.title2 && ` - ${library?.title2}`}
+            </Typography>
+          </Box>
+
+          <Grid container spacing={2}>
+            {library?.Metadata?.map((item) => (
+              <Grid
+                item
+                xs={12}
+                sm={6}
+                md={4}
+                lg={3}
+                xl={3}
+                key={item.ratingKey}
+              >
+                <MovieItem item={item} />
+              </Grid>
+            ))}
+          </Grid>
+        </Box>
+      </Backdrop>
+    );
+
+  return <></>;
+}
+
+export default LibraryScreen;
diff --git a/frontend/src/components/MovieItemSlider.tsx b/frontend/src/components/MovieItemSlider.tsx
@@ -2,7 +2,7 @@ import { Box, Typography } from "@mui/material";
 import React from "react";
 import { getLibraryDir } from "../plex";
 import { ArrowForwardIos } from "@mui/icons-material";
-import { useNavigate } from "react-router-dom";
+import { useSearchParams } from "react-router-dom";
 import MovieItem from "./MovieItem";
 
 function MovieItemSlider({
@@ -24,7 +24,7 @@ function MovieItemSlider({
   data?: Plex.Metadata[];
   plexTvSource?: boolean;
 }) {
-  const navigate = useNavigate();
+  const [, setSearchParams] = useSearchParams();
   const [items, setItems] = React.useState<Plex.Metadata[] | null>(
     data ?? null
   );
@@ -118,7 +118,9 @@ function MovieItemSlider({
             userSelect: "none",
           }}
           onClick={() => {
-            if (link) navigate(link);
+            if (link) setSearchParams(new URLSearchParams({
+              bkey: link
+            }));
           }}
         >
           <Typography

diff --git a/frontend/src/pages/Browse.tsx b/frontend/src/pages/Browse.tsx
@@ -72,7 +72,7 @@ function Library() {
             shuffleArray(genreSelection).map((genre) => ({
               title: genre.title,
               dir: `/library/sections/${library.librarySectionID}/genre/${genre.key}`,
-              link: `/library/${library.librarySectionID}/dir/genre/${genre.key}`,
+              link: `/library/sections/${library.librarySectionID}/genre/${genre.key}`,
               shuffle: true,
             }))
           );
@@ -158,19 +158,19 @@ function Library() {
         categoryPool.unshift({
           title: "Recently Added",
           dir: `/library/sections/${library.librarySectionID}/recentlyAdded`,
-          link: `/library/${library.librarySectionID}/dir/recentlyAdded`,
+          link: `/library/sections/${library.librarySectionID}/recentlyAdded`,
         });
         categoryPool.unshift({
           title: "New Releases",
           dir: `/library/sections/${library.librarySectionID}/newest`,
-          link: `/library/${library.librarySectionID}/dir/newest`,
+          link: `/library/sections/${library.librarySectionID}/newest`,
         });
       }
 
       categoryPool.unshift({
         title: "Continue Watching",
         dir: `/library/sections/${library.librarySectionID}/onDeck`,
-        link: `/library/${library.librarySectionID}/dir/onDeck`,
+        link: `/library/sections/${library.librarySectionID}/onDeck`,
         shuffle: false,
       });
 

diff --git a/frontend/src/pages/Home.tsx b/frontend/src/pages/Home.tsx
@@ -172,8 +172,8 @@ export default function Home() {
         >
           <MovieItemSlider
             title="Continue Watching"
-            dir="/onDeck"
-            link={`/library/onDeck`}
+            dir="/library/onDeck"
+            link="/library/onDeck"
           />
 
           {watchListCache && watchListCache.length > 0 && (
@@ -185,7 +185,7 @@ export default function Home() {
               <MovieItemSlider
                 key={index}
                 title={item.title}
-                dir={`/sections/${item.libraryID}/${item.dir}`}
+                dir={item.dir}
                 shuffle={true}
                 link={item.link}
               />
@@ -217,8 +217,8 @@ async function getRecommendations(libraries: Plex.Directory[]) {
       genreSelection.push({
         title: `${library.title} - ${genre.title}`,
         libraryID: library.key,
-        dir: `all?genre=${genre.key}`,
-        link: `/library/${library.key}/dir/genre/${genre.key}`,
+        dir: `/library/sections/${library.key}/genre/${genre.key}`,
+        link: `/library/sections/${library.key}/genre/${genre.key}`,
       });
     }
   }