chore(webapp): add leftover changes

Tastyep · Dec 21, 2024 · ef1de6f · ef1de6f
1 parent 60b77b4
commit ef1de6f
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 22 deletions.
diff --git a/webapp/src/themes/light/purple_orange.js b/webapp/src/themes/light/purple_orange.js
@@ -64,6 +64,12 @@ const purpleOrangeTheme = {
       main: mixColor("#FFFFFF", primary.main, 0.1),
     },
 
+    // secondary: {
+    //   main: "#F9AA33",
+    //   light: "#F9B043",
+    //   dark: "#D08006",
+    // },
+
     secondary: {
       main: "#F9AA33",
       light: "#F9B043",

diff --git a/webapp/src/views/library/albums.js b/webapp/src/views/library/albums.js
@@ -1,6 +1,6 @@
-import { useState } from "react";
+import React, { useState } from "react";
 
-import { IconButton, List, Stack, Typography } from "@mui/material";
+import { Button, IconButton, List, Stack, Typography } from "@mui/material";
 import ListItem from "@mui/material/ListItem";
 import ListItemIcon from "@mui/material/ListItemIcon";
 import ListItemText from "@mui/material/ListItemText";
@@ -13,6 +13,8 @@ import QueueMusicIcon from "@mui/icons-material/QueueMusic";
 import PlayArrowIcon from "@mui/icons-material/PlayArrow";
 import AlbumIcon from "@mui/icons-material/Album";
 
+import FilterButtonGroup from "components/filter_button_group";
+
 import { styled } from "@mui/material/styles";
 
 import { Link } from "react-router-dom";
@@ -276,6 +278,9 @@ const AlbumItem = ({ album, isSmallDevice }) => {
 const AlbumsPage = observer(() => {
   const store = useAppStore();
   const albums = Object.values(store.albums);
+
+  const [filterPattern, setFilterPattern] = useState("All");
+
   const isSmallDevice = useMediaQuery({
     maxWidth: SIZES.small.max,
   });
@@ -284,28 +289,55 @@ const AlbumsPage = observer(() => {
     return null;
   }
 
-  albums.sort((a, b) => {
+  console.log(filterPattern);
+  const filteredAlbums = albums.filter((album) => {
+    return filterPattern === "All"
+      ? true
+      : album.name.startsWith(filterPattern);
+  });
+  filteredAlbums.sort((a, b) => {
     return a.name.localeCompare(b.name);
   });
   return (
-    <List
-      sx={{
-        display: "flex",
-        flexDirection: "row",
-        flexWrap: "wrap",
-        gap: "8px",
-        alignContent: "baseline",
-        overflow: "auto",
-      }}
+    <Stack
+      direction="column"
+      alignItems="flex-start"
+      sx={{ flex: 1, maxWidth: "100%" }}
     >
-      {albums.map((album, _) => (
-        <AlbumItem
-          key={album.name}
-          album={album}
-          isSmallDevice={isSmallDevice}
-        />
-      ))}
-    </List>
+      <FilterButtonGroup
+        collection={albums}
+        clickHandle={setFilterPattern}
+        selectedButtonValue={filterPattern}
+        categoryFactory={(item) => item.name[0]}
+        sx={{
+          marginTop: "8px",
+          maxWidth: "100%",
+          overflowX: "auto",
+          minHeight: "32px",
+        }}
+      >
+        <Button value="All">All</Button>
+      </FilterButtonGroup>
+      <List
+        sx={{
+          display: "flex",
+          width: "100%",
+          flexDirection: "row",
+          flexWrap: "wrap",
+          gap: "8px",
+          alignContent: "baseline",
+          overflow: "auto",
+        }}
+      >
+        {filteredAlbums.map((album, _) => (
+          <AlbumItem
+            key={album.name}
+            album={album}
+            isSmallDevice={isSmallDevice}
+          />
+        ))}
+      </List>
+    </Stack>
   );
 });
 

diff --git a/webapp/src/views/profile.js b/webapp/src/views/profile.js
@@ -35,7 +35,7 @@ const ProfilePage = observer(() => {
       <Typography variant="h6" sx={{ paddingTop: "32px" }}>
         Recent activity
       </Typography>
-      <Box sx={{ display: "flex" }}>
+      <Box sx={{ display: "flex", overflow: "auto" }}>
         <VideoList videos={listLastPlayedVideos(store.videos)} count={10} />
       </Box>
       <Divider
@@ -44,7 +44,7 @@ const ProfilePage = observer(() => {
         }}
       />
       <Typography variant="h6">Most played</Typography>
-      <Box sx={{ display: "flex" }}>
+      <Box sx={{ display: "flex", overflow: "auto" }}>
         <VideoList videos={listPopularVideos(store.videos)} count={10} />
       </Box>
     </Stack>