From 48d0354a3f49df313487a31a7f1daa9c69fe2139 Mon Sep 17 00:00:00 2001
From: Prayag Prajapati <prayagprajapati.17@gmail.com>
Date: Sat, 7 Oct 2023 12:49:06 +0530
Subject: [PATCH] Add favorite page #33

---
 src/components/appBar/appBar.jsx   |   2 +-
 src/routes/album/album.module.scss |  26 ++-
 src/routes/album/index.jsx         |   6 +-
 src/routes/favorite/index.jsx      | 337 ++++++++++++++++++++++++++++-
 src/styles/global.scss             |   2 +-
 5 files changed, 358 insertions(+), 15 deletions(-)

diff --git a/src/components/appBar/appBar.jsx b/src/components/appBar/appBar.jsx
index e10d838d..379a5956 100644
--- a/src/components/appBar/appBar.jsx
+++ b/src/components/appBar/appBar.jsx
@@ -158,7 +158,7 @@ export const AppBar = () => {
 						<IconButton onClick={() => navigate("/search")}>
 							<MdiMagnify />
 						</IconButton>
-						<IconButton disabled>
+						<IconButton onClick={() => navigate("/favorite")}>
 							<MdiHeartOutline />
 						</IconButton>
 						<IconButton
diff --git a/src/routes/album/album.module.scss b/src/routes/album/album.module.scss
index ff1b5e93..3a90b777 100644
--- a/src/routes/album/album.module.scss
+++ b/src/routes/album/album.module.scss
@@ -1,5 +1,7 @@
 /** @format */
 
+$border-radius: 20px;
+
 .item-detail-album {
 	&-track {
 		display: grid;
@@ -9,22 +11,30 @@
 		gap: 0.5em;
 		width: 100%;
 		padding: 0.25em 0;
-		background: rgb(255 255 255 / 0);
+		background: hsl(256, 100%, 4%, 40%);
 		transition: background $transition-time-default;
 
-		&:first-child,
+		&:first-child {
+			border-radius: $border-radius $border-radius 8px 8px;
+			cursor: default !important;
+		}
+
 		&:last-child {
-			border-bottom: none;
+			border-radius: 8px 8px $border-radius $border-radius;
 		}
-		border-bottom: 1px solid rgb(255 255 255 / 0.05);
+		border-radius: 8px;
+
 		&s {
-			border-radius: 10px !important;
-			overflow: hidden !important;
-			background: $clr-background-dark-opacity-0_8 !important;
+			background: transparent !important;
+			box-shadow: none !important;
+			display: flex;
+			flex-direction: column;
+			gap: 5px;
 		}
 
 		&:hover {
-			background: rgb(255 255 255 / 0.05);
+			background: hsl(256, 100%, 4%, 50%);
+			cursor: pointer;
 		}
 
 		&.playing {
diff --git a/src/routes/album/index.jsx b/src/routes/album/index.jsx
index c688d346..bd3afeca 100644
--- a/src/routes/album/index.jsx
+++ b/src/routes/album/index.jsx
@@ -1,5 +1,5 @@
 /** @format */
-import { useEffect } from "react";
+import React, { useEffect } from "react";
 import PropTypes from "prop-types";
 
 import Box from "@mui/material/Box";
@@ -211,9 +211,7 @@ const MusicAlbumTitlePage = () => {
 								style={{
 									padding: "0.75em 0 ",
 									background:
-										"rgb(255 255 255 / 0.1)",
-									boxShadow:
-										"0 0 10px rgb(0 0 0 / 0.5)",
+										"hsl(256, 100%, 4%, 60%)",
 								}}
 							>
 								<Typography
diff --git a/src/routes/favorite/index.jsx b/src/routes/favorite/index.jsx
index c378d99b..bd26fac9 100644
--- a/src/routes/favorite/index.jsx
+++ b/src/routes/favorite/index.jsx
@@ -1,7 +1,342 @@
 /** @format */
+import React, { useEffect } from "react";
+
+import { useBackdropStore } from "../../utils/store/backdrop";
+
+import "./favorite.module.scss";
+import Typography from "@mui/material/Typography";
+import { useQuery } from "@tanstack/react-query";
+
+import { getItemsApi } from "@jellyfin/sdk/lib/utils/api/items-api";
+import { getUserApi } from "@jellyfin/sdk/lib/utils/api/user-api";
+import { BaseItemKind } from "@jellyfin/sdk/lib/generated-client";
+import { CardScroller } from "../../components/cardScroller/cardScroller";
+import { Card } from "../../components/card/card";
 
 const FavoritePage = () => {
-	<></>;
+	const [setBackdrop] = useBackdropStore((state) => [state.setBackdrop]);
+
+	const user = useQuery({
+		queryKey: ["user"],
+		queryFn: async () => {
+			let usr = await getUserApi(window.api).getCurrentUser();
+			return usr.data;
+		},
+		networkMode: "always",
+	});
+
+	const movies = useQuery({
+		queryKey: ["favorite", "movies"],
+		queryFn: async () => {
+			const result = await getItemsApi(window.api).getItems({
+				userId: user.data.Id,
+				isFavorite: true,
+				includeItemTypes: [BaseItemKind.Movie],
+				recursive: true,
+			});
+			return result.data;
+		},
+	});
+
+	const series = useQuery({
+		queryKey: ["favorite", "series"],
+		queryFn: async () => {
+			const result = await getItemsApi(window.api).getItems({
+				userId: user.data.Id,
+				isFavorite: true,
+				includeItemTypes: [BaseItemKind.Series],
+				recursive: true,
+			});
+			return result.data;
+		},
+	});
+
+	const musicAlbum = useQuery({
+		queryKey: ["favorite", "musicAlbum"],
+		queryFn: async () => {
+			const result = await getItemsApi(window.api).getItems({
+				userId: user.data.Id,
+				isFavorite: true,
+				includeItemTypes: [BaseItemKind.MusicAlbum],
+				recursive: true,
+			});
+			return result.data;
+		},
+	});
+
+	const audio = useQuery({
+		queryKey: ["favorite", "audio"],
+		queryFn: async () => {
+			const result = await getItemsApi(window.api).getItems({
+				userId: user.data.Id,
+				isFavorite: true,
+				includeItemTypes: [BaseItemKind.Audio],
+				recursive: true,
+			});
+			return result.data;
+		},
+	});
+
+	const book = useQuery({
+		queryKey: ["favorite", "book"],
+		queryFn: async () => {
+			const result = await getItemsApi(window.api).getItems({
+				userId: user.data.Id,
+				isFavorite: true,
+				includeItemTypes: [BaseItemKind.Book],
+				recursive: true,
+			});
+			return result.data;
+		},
+	});
+
+	const musicArtists = useQuery({
+		queryKey: ["favorite", "musicArtist"],
+		queryFn: async () => {
+			const result = await getItemsApi(window.api).getItems({
+				userId: user.data.Id,
+				isFavorite: true,
+				includeItemTypes: [BaseItemKind.MusicArtist],
+				recursive: true,
+			});
+			return result.data;
+		},
+	});
+
+	const person = useQuery({
+		queryKey: ["favorite", "person"],
+		queryFn: async () => {
+			const result = await getItemsApi(window.api).getItems({
+				userId: user.data.Id,
+				isFavorite: true,
+				includeItemTypes: [BaseItemKind.Person],
+				recursive: true,
+			});
+			return result.data;
+		},
+	});
+
+	useEffect(() => {
+		// Removing app's backdrop
+		setBackdrop("", "");
+	}, []);
+	return (
+		<main
+			className="scrollY"
+			style={{
+				display: "flex",
+				flexDirection: "column",
+				gap: "0.5em",
+				paddingBottom: "2em",
+				paddingTop: "4.2em",
+			}}
+		>
+			{movies.isSuccess && movies.data.Items.length > 0 && (
+				<CardScroller displayCards={8} title="Movies">
+					{movies.data.Items.map((item) => (
+						<Card
+							key={item.Id}
+							item={item}
+							cardTitle={item.Name}
+							imageType={"Primary"}
+							cardCaption={item.ProductionYear}
+							cardType="portrait"
+							queryKey={["favorite", "movies"]}
+							userId={user.data.Id}
+							imageBlurhash={
+								!!item.ImageBlurHashes?.Primary &&
+								item.ImageBlurHashes?.Primary[
+									Object.keys(
+										item.ImageBlurHashes.Primary,
+									)[0]
+								]
+							}
+						/>
+					))}
+				</CardScroller>
+			)}
+			{series.isSuccess && series.data.Items.length > 0 && (
+				<CardScroller
+					title="TV Shows"
+					displayCards={8}
+					disableDecoration
+				>
+					{series.data.Items.map((item) => (
+						<Card
+							key={item.Id}
+							item={item}
+							cardTitle={item.Name}
+							imageType={"Primary"}
+							cardCaption={`${item.ProductionYear} - ${
+								item.EndDate
+									? new Date(
+											item.EndDate,
+									  ).toLocaleString([], {
+											year: "numeric",
+									  })
+									: "Present"
+							}`}
+							cardType="portrait"
+							queryKey={["favorite", "series"]}
+							userId={user.data.Id}
+							imageBlurhash={
+								!!item.ImageBlurHashes?.Primary &&
+								item.ImageBlurHashes?.Primary[
+									Object.keys(
+										item.ImageBlurHashes.Primary,
+									)[0]
+								]
+							}
+						/>
+					))}
+				</CardScroller>
+			)}
+			{audio.isSuccess && audio.data.Items.length > 0 && (
+				<CardScroller
+					title="Audio"
+					displayCards={8}
+					disableDecoration
+				>
+					{audio.data.Items.map((item) => (
+						<Card
+							key={item.Id}
+							item={item}
+							cardTitle={item.Name}
+							imageType={"Primary"}
+							cardCaption={item.ProductionYear}
+							cardType="square"
+							queryKey={["favorite", "audio"]}
+							userId={user.data.Id}
+							imageBlurhash={
+								!!item.ImageBlurHashes?.Primary &&
+								item.ImageBlurHashes?.Primary[
+									Object.keys(
+										item.ImageBlurHashes.Primary,
+									)[0]
+								]
+							}
+						/>
+					))}
+				</CardScroller>
+			)}
+			{musicAlbum.isSuccess && musicAlbum.data.Items.length > 0 && (
+				<CardScroller
+					title="Albums"
+					displayCards={8}
+					disableDecoration
+				>
+					{musicAlbum.data.Items.map((item) => (
+						<Card
+							key={item.Id}
+							item={item}
+							seriesId={item.SeriesId}
+							cardTitle={item.Name}
+							imageType={"Primary"}
+							cardCaption={item.AlbumArtist}
+							cardType={"square"}
+							queryKey={["favorite", "musicAlbum"]}
+							userId={user.data.Id}
+							imageBlurhash={
+								!!item.ImageBlurHashes?.Primary &&
+								item.ImageBlurHashes?.Primary[
+									Object.keys(
+										item.ImageBlurHashes.Primary,
+									)[0]
+								]
+							}
+						/>
+					))}
+				</CardScroller>
+			)}
+			{book.isSuccess && book.data.Items.length > 0 && (
+				<CardScroller
+					title="Books"
+					displayCards={8}
+					disableDecoration
+				>
+					{book.data.Items.map((item) => (
+						<Card
+							key={item.Id}
+							item={item}
+							cardTitle={item.Name}
+							imageType={"Primary"}
+							cardCaption={item.ProductionYear}
+							disableOverlay
+							cardType={"portrait"}
+							queryKey={["favorite", "book"]}
+							userId={user.data.Id}
+							imageBlurhash={
+								!!item.ImageBlurHashes?.Primary &&
+								item.ImageBlurHashes?.Primary[
+									Object.keys(
+										item.ImageBlurHashes.Primary,
+									)[0]
+								]
+							}
+						/>
+					))}
+				</CardScroller>
+			)}
+			{musicArtists.isSuccess &&
+				musicArtists.data.Items.length > 0 && (
+					<CardScroller
+						title="Artists"
+						displayCards={8}
+						disableDecoration
+					>
+						{musicArtists.data.Items.map((item) => (
+							<Card
+								key={item.Id}
+								item={item}
+								cardTitle={item.Name}
+								imageType={"Primary"}
+								disableOverlay
+								cardType={"square"}
+								queryKey={["favorite", "musicArtist"]}
+								userId={user.data.Id}
+								imageBlurhash={
+									!!item.ImageBlurHashes?.Primary &&
+									item.ImageBlurHashes?.Primary[
+										Object.keys(
+											item.ImageBlurHashes
+												.Primary,
+										)[0]
+									]
+								}
+							/>
+						))}
+					</CardScroller>
+				)}
+			{person.isSuccess && person.data.Items.length > 0 && (
+				<CardScroller
+					title="People"
+					displayCards={8}
+					disableDecoration
+				>
+					{person.data.Items.map((item) => (
+						<Card
+							key={item.Id}
+							item={item}
+							cardTitle={item.Name}
+							imageType={"Primary"}
+							disableOverlay
+							cardType={"square"}
+							queryKey={["favorite", "person"]}
+							userId={user.data.Id}
+							imageBlurhash={
+								!!item.ImageBlurHashes?.Primary &&
+								item.ImageBlurHashes?.Primary[
+									Object.keys(
+										item.ImageBlurHashes.Primary,
+									)[0]
+								]
+							}
+						/>
+					))}
+				</CardScroller>
+			)}
+		</main>
+	);
 };
 
 export default FavoritePage;
diff --git a/src/styles/global.scss b/src/styles/global.scss
index 7f53b9cc..3fd039ca 100644
--- a/src/styles/global.scss
+++ b/src/styles/global.scss
@@ -38,7 +38,7 @@ body {
 	width: 100vw;
 	height: 100vh;
 	overflow-x: hidden;
-	overflow-y: overlay;
+	overflow-y: scroll;
 	overscroll-behavior: none;
 }