Update card component #153

prayag17 · Aug 26, 2023 · 002d92d · 002d92d
1 parent e11056c
commit 002d92d
Show file tree

Hide file tree

Showing 7 changed files with 122 additions and 144 deletions.
diff --git a/src/components/card/card.jsx b/src/components/card/card.jsx
@@ -33,19 +33,32 @@ import { MdiHeartOutline } from "../icons/mdiHeartOutline";
 import { MdiHeart } from "../icons/mdiHeart";
 import useIntersecting from "../../utils/hooks/useIntersecting";
 
+const cardImageAspectRatios = {
+	thumb: 1.777,
+	portrait: 0.666,
+	square: 1,
+};
+
 export const Card = ({
 	itemId,
-	itemParentId,
+	itemType,
 	itemName,
-	imageTags,
 	imageType = "Primary",
-	parentImageType,
-	imageAspectRatio,
+	cardType,
+	secondaryText,
 }) => {
 	const ref = useRef();
 	const isVisible = useIntersecting(ref);
 	return (
-		<Box mr={2} ref={ref} sx={{ height: "100%", overflow: "visible" }}>
+		<Box
+			padding={1}
+			ref={ref}
+			sx={{
+				height: "100%",
+				overflow: "visible",
+				alignItems: "flex-start",
+			}}
+		>
 			<Stack
 				className={isVisible ? "card isVisible" : "card"}
 				sx={{
@@ -61,11 +74,15 @@ export const Card = ({
 				<Box
 					className="card-image-container"
 					sx={{
-						aspectRatio: imageAspectRatio,
+						aspectRatio: cardImageAspectRatios[cardType],
 						overflow: "hidden",
+						height: "auto",
+						width: "100%",
 					}}
-					height="85%"
 				>
+					<Box className="card-image-icon-container">
+						{TypeIconCollectionCard[itemType]}
+					</Box>
 					<img
 						src={window.api.getItemImageUrl(
 							itemId,
@@ -78,19 +95,33 @@ export const Card = ({
 						)}
 						style={{
 							height: "100%",
+							width: "100%",
+							opacity: 0,
 						}}
+						loading="lazy"
+						onLoad={(e) => (e.target.style.opacity = 1)}
 						className="card-image"
 					/>
 				</Box>
 				<Box className="card-text-container" height="15%">
 					<Typography
-						variant="h5"
-						fontWeight={300}
+						variant="h6"
+						fontWeight={400}
 						noWrap
 						textAlign="center"
+						sx={{ opacity: 0.9 }}
 					>
 						{itemName}
 					</Typography>
+					<Typography
+						variant="subtitle1"
+						fontWeight={300}
+						noWrap
+						textAlign="center"
+						sx={{ opacity: 0.6 }}
+					>
+						{secondaryText}
+					</Typography>
 				</Box>
 			</Stack>
 		</Box>

diff --git a/src/components/card/card.module.scss b/src/components/card/card.module.scss
@@ -4,11 +4,32 @@
 		width: 100%;
 		height: 100%;
 		object-fit: cover;
+		transition: opacity $transition-time-fast;
+		position: absolute;
+		z-index: 1;
+		top: 0;
+		left: 0;
 		&-container {
 			position: relative;
 			width: 100%;
 			border-radius: $border-radius-default;
 			box-shadow: 0 4px 8px rgb(0 0 0 / 0.2);
 		}
+		&-icon {
+			position: absolute;
+			top: 50%;
+			left: 50%;
+			transform: translate(-50%, -50%);
+			font-size: 3.4em !important;
+			fill: url(#clr-gradient-default) !important;
+			color: transparent;
+			&-container {
+				background: $clr-gradient-dark;
+				height: 100%;
+				width: 100%;
+				position: relative;
+				z-index: 0;
+			}
+		}
 	}
 }
diff --git a/src/components/carouselSlide/index.jsx b/src/components/carouselSlide/index.jsx
@@ -83,7 +83,7 @@ const CarouselSlide = ({ item }) => {
 									punch={1}
 								/>
 							)}
-							<img
+							<motion.img
 								className="hero-carousel-background-image"
 								src={
 									!!item.ParentBackdropItemId
@@ -107,8 +107,8 @@ const CarouselSlide = ({ item }) => {
 					initial={{
 						transform:
 							animationDirection == "right"
-								? "translateX(50px)"
-								: "translateX(-50px)",
+								? "translateX(40px)"
+								: "translateX(-40px)",
 						opacity: 0,
 					}}
 					animate={{
@@ -118,13 +118,13 @@ const CarouselSlide = ({ item }) => {
 					exit={{
 						transform:
 							animationDirection == "right"
-								? "translateX(-50px)"
-								: "translateX(50px)",
+								? "translateX(-40px)"
+								: "translateX(40px)",
 
 						opacity: 0,
 					}}
 					transition={{
-						duration: 0.2,
+						duration: 0.25,
 					}}
 					className="hero-carousel-detail"
 				>
@@ -140,7 +140,7 @@ const CarouselSlide = ({ item }) => {
 						{!item.ImageTags.Logo ? (
 							item.Name
 						) : (
-							<img
+							<motion.img
 								className="hero-carousel-text-logo"
 								src={
 									window.api.basePath +
@@ -156,7 +156,7 @@ const CarouselSlide = ({ item }) => {
 								onLoad={(e) =>
 									(e.target.style.opacity = 1)
 								}
-							></img>
+							/>
 						)}
 					</Typography>
 					<Stack

diff --git a/src/components/homeSection/latestMediaSection.jsx b/src/components/homeSection/latestMediaSection.jsx
@@ -44,15 +44,20 @@ export const LatestMediaSection = ({ latestMediaLib }) => {
 			>
 				{data.data.map((item, index) => {
 					return (
-						<></>
-						// <Card
-						// 	key={index}
-						// 	itemName={
-						// 		!!item.SeriesId
-						// 			? item.SeriesName
-						// 			: item.Name
-						// 	}
-						// ></Card>
+						<Card
+							key={index}
+							itemName={item.Name}
+							itemId={item.Id}
+							itemType={item.Type}
+							imageType="Primary"
+							cardType={
+								item.Type == BaseItemKind.MusicAlbum ||
+								item.Type == BaseItemKind.Audio
+									? "square"
+									: "portrait"
+							}
+							secondaryText={item.ProductionYear}
+						></Card>
 					);
 				})}
 			</CardScroller>

diff --git a/src/components/utils/iconsCollection.jsx b/src/components/utils/iconsCollection.jsx
@@ -108,4 +108,5 @@ export const TypeIconCollectionCard = {
 	Video: <MdiFilmstrip className="card-image-icon" />,
 	Year: <MdiMultimedia className="card-image-icon" />,
 	Genre: <MdiDramaMasks className="card-image-icon" />,
+	Library: <MdiMultimedia className="card-image-icon" />,
 };
diff --git a/src/routes/home/index.jsx b/src/routes/home/index.jsx
@@ -38,7 +38,7 @@ import { useNavigate } from "react-router-dom";
 import { useBackdropStore } from "../../utils/store/backdrop";
 
 import CarouselSlide from "../../components/carouselSlide";
-import { ItemFields } from "@jellyfin/sdk/lib/generated-client";
+import { BaseItemKind, ItemFields } from "@jellyfin/sdk/lib/generated-client";
 const Home = () => {
 	const authUser = useQuery({
 		queryKey: ["home", "authenticateUser"],
@@ -100,8 +100,8 @@ const Home = () => {
 					fields: [
 						ItemFields.Overview,
 						ItemFields.ParentId,
+						"ParentIndexNumber",
 						ItemFields.SeasonUserData,
-						ItemFields.RecursiveItemCount,
 						ItemFields.IsHd,
 					],
 					enableUserData: true,
@@ -254,9 +254,9 @@ const Home = () => {
 												key={index}
 												itemName={item.Name}
 												itemId={item.Id}
-												imageAspectRatio={
-													item.PrimaryImageAspectRatio
-												}
+												itemType="Library"
+												imageType="Primary"
+												cardType="thumb"
 											></Card>
 										);
 									},
@@ -277,10 +277,9 @@ const Home = () => {
 											key={index}
 											itemName={item.Name}
 											itemId={item.Id}
+											itemType={item.Type}
 											imageType="Primary"
-											imageAspectRatio={
-												item.PrimaryImageAspectRatio
-											}
+											cardType="thumb"
 										></Card>
 									);
 								},
@@ -303,14 +302,20 @@ const Home = () => {
 											key={index}
 											itemName={item.Name}
 											itemId={item.Id}
+											itemType={item.Type}
 											imageType={
-												!!item.SeriesName
+												item.Type ==
+												BaseItemKind.Episode
 													? "Primary"
 													: "Backdrop"
 											}
-											imageAspectRatio={
-												item.PrimaryImageAspectRatio
+											secondaryText={
+												item.Type ==
+												BaseItemKind.Episode
+													? `S${item.ParentIndexNumber}:E${item.IndexNumber} ${item.SeriesName}`
+													: item.ProductionYear
 											}
+											cardType="thumb"
 										></Card>
 									);
 								},
@@ -331,55 +336,19 @@ const Home = () => {
 									return (
 										<Card
 											key={index}
-											itemName={
-												!!item.SeriesId
-													? item.SeriesName
-													: item.Name
-											}
-											itemId={
-												!!item.SeriesId
-													? item.SeriesId
-													: item.Id
-											}
-											// imageTags={false}
-											imageTags={
-												!!item.ImageTags
-													.Primary
+											itemName={item.Name}
+											itemId={item.Id}
+											itemType={item.Type}
+											imageType={
+												item.Type ==
+												BaseItemKind.Episode
+													? "Primary"
+													: "Backdrop"
 											}
-											iconType={item.Type}
-											subText={
+											secondaryText={
 												item.ProductionYear
 											}
-											playedPercent={
-												item.UserData
-													.PlayedPercentage
-											}
-											cardOrientation="sqaure"
-											blurhash={
-												item.ImageBlurHashes ==
-												{}
-													? ""
-													: !!item
-															.ImageTags
-															.Primary
-													? !!item
-															.ImageBlurHashes
-															.Primary
-														? item
-																.ImageBlurHashes
-																.Primary[
-																item
-																	.ImageTags
-																	.Primary
-														  ]
-														: ""
-													: ""
-											}
-											currentUser={user.data}
-											favourite={
-												item.UserData
-													.IsFavorite
-											}
+											cardType="thumb"
 										></Card>
 									);
 								},