Merge pull request #52 from PixyTM/dev

Added an option to remove the libraries section from the home screen

Author: Ipmake

frontend/src/pages/Home.tsx

@@ -126,7 +126,10 @@ export default function Home() {
                     width: "100%",
                     height: "auto",
                     aspectRatio: "16/9",
-                    display: "flex",
+                    display: 
+                      settings["DISABLE_HOME_SCREEN_LIBRARIES"] === "true"
+                        ? "none"
+                        : "flex",
                     alignItems: "center",
                     justifyContent: "center",
                     borderRadius: "7px",

frontend/src/pages/Settings.tsx

@@ -53,7 +53,6 @@ function Settings() {
       >
         <SettingsDivider title="General" />
         <SettingsItem title="About" link="/settings/info" />
-
         <SettingsDivider title="Experience" />
         <SettingsItem title="Playback" link="/settings/experience-playback" />
         <SettingsItem title="Recommendations" link="/settings/experience-recommendations" />

frontend/src/pages/settings/SettingsLibraries.tsx

@@ -1,41 +1,36 @@
-import { Typography, Box } from "@mui/material";
+import { Typography, Box, Divider, CircularProgress } from "@mui/material";
 import React, { useEffect } from "react";
-import {
-  getAllLibraries
-} from "../../plex";
+import { getAllLibraries } from "../../plex";
 import CheckBoxOption from "../../components/settings/CheckBoxOption";
 import { useUserSettings } from "../../states/UserSettingsState";
 
-
 function SettingsLibraries() {
-    const [libraries, setLibraries] = React.useState<Plex.LibarySection[]>([]);
-    const [loading, setLoading] = React.useState(true);
-    const { settings, setSetting } = useUserSettings();
+  const [libraries, setLibraries] = React.useState<Plex.LibarySection[]>([]);
+  const [loading, setLoading] = React.useState(true);
+  const { settings, setSetting } = useUserSettings();
 
-    useEffect(() => {
-        async function fetchData() {
-          setLoading(true);
-          try {
-            const librariesData = await getAllLibraries();
-            
-    
-            const filteredLibraries = librariesData.filter((lib) =>
-              ["movie", "show"].includes(lib.type)
-            );
+  useEffect(() => {
+    async function fetchData() {
+      setLoading(true);
+      try {
+        const librariesData = await getAllLibraries();
+
+        const filteredLibraries = librariesData.filter((lib) =>
+          ["movie", "show"].includes(lib.type)
+        );
 
-            setLibraries(filteredLibraries);
+        setLibraries(filteredLibraries);
 
-            console.log("filteredLibraries", filteredLibraries)
-    
-          } catch (error) {
-            console.error("Error fetching data", error);
-          } finally {
-            setLoading(false);
-          }
-        }
-    
-        fetchData();
-      }, []);
+        console.log("filteredLibraries", filteredLibraries);
+      } catch (error) {
+        console.error("Error fetching data", error);
+      } finally {
+        setLoading(false);
+      }
+    }
+
+    fetchData();
+  }, []);
 
   return (
     <>
@@ -51,35 +46,50 @@ function SettingsLibraries() {
         }}
       />
 
-      <Box sx={{ mt: 2, display: "flex", flexDirection: "column", gap: 2 }}>
-
-        <Typography variant="subtitle1">
-          Enable or disable libraries to show throughout Nevu. <br />
-          Disabled libraries will not be shown in the home page, recommendations, search results, or any other place.
-        </Typography>
+      <Box sx={{ mt: 2, display: "flex", flexDirection: "column", gap: 2, width: "100%" }}>
+        <CheckBoxOption
+          title="Disable Home Libraries Section"
+          subtitle="Disables the section on the home screen where the libraries are displayed."
+          checked={settings.DISABLE_HOME_SCREEN_LIBRARIES === "true"}
+          onChange={() => {
+            setSetting(
+              "DISABLE_HOME_SCREEN_LIBRARIES",
+              settings["DISABLE_HOME_SCREEN_LIBRARIES"] === "true"
+                ? "false"
+                : "true"
+            );
+          }}
+        />
 
-        {libraries.map((library) => {
-            const key = `LIBRARY_${library.uuid}`;
-            const rawValue = settings[key];
+        <Divider sx={{ my: 2 }} />
 
-            const checked = rawValue === undefined ? true : rawValue === "true";
+        {loading && (
+          <CircularProgress
+            sx={{ alignSelf: "center", mt: 2 }}
+            size={24}
+          />
+        )}
 
-            return (
-                <CheckBoxOption
-                key={library.key}
-                title={library.title}
-                subtitle={`Type: ${library.type.toUpperCase()}`}
-                checked={checked}
-                onChange={() => {
-                    setSetting(key, checked ? "false" : "true");
-                }}
-                />
-            );
-            })}
+        {libraries.map((library) => {
+          const key = `LIBRARY_${library.uuid}`;
+          const rawValue = settings[key];
 
+          const checked = rawValue === undefined ? true : rawValue === "true";
 
+          return (
+            <CheckBoxOption
+              key={library.key}
+              title={library.title}
+              subtitle={`Type: ${library.type.toUpperCase()}`}
+              checked={checked}
+              onChange={() => {
+                setSetting(key, checked ? "false" : "true");
+              }}
+            />
+          );
+        })}
       </Box>
     </>
   );
 }
-export default SettingsLibraries;
+export default SettingsLibraries;

frontend/src/states/UserSettingsState.ts

@@ -4,6 +4,7 @@ import { getBackendURL } from '../backendURL';
 
 type UserSettingsOptions = 
 "DISABLE_WATCHSCREEN_DARKENING" |
+"DISABLE_HOME_SCREEN_LIBRARIES" |
 "AUTO_MATCH_TRACKS" |
 "AUTO_NEXT_EP" |
 string;
@@ -21,6 +22,7 @@ export const useUserSettings = create<UserSettingsState>((set) => ({
     loaded: false,
     settings: {
         DISABLE_WATCHSCREEN_DARKENING: "false",
+        DISABLE_HOME_SCREEN_LIBRARIES: "false",
         AUTO_MATCH_TRACKS: "true",
         AUTO_NEXT_EP: "true",
     },