Add blurhash support to cards #153

prayag17 · Aug 29, 2023 · 7dd5fd8 · 7dd5fd8
1 parent 8210906
commit 7dd5fd8
Show file tree

Hide file tree

Showing 8 changed files with 197 additions and 110 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/components/card/card.jsx b/src/components/card/card.jsx
@@ -48,6 +48,7 @@ export const Card = ({
 	isFavorite,
 	isPlayed,
 	imageType = "Primary",
+	imageBlurhash,
 	cardType,
 	secondaryText,
 	queryKey,
@@ -97,6 +98,16 @@ export const Card = ({
 							width: "100%",
 						}}
 					>
+						{!!imageBlurhash && (
+							<Blurhash
+								hash={imageBlurhash}
+								width={128}
+								height={128}
+								resolutionX={24}
+								resolutionY={24}
+								className="card-image-blurhash"
+							/>
+						)}
 						<Box className="card-image-icon-container">
 							{TypeIconCollectionCard[itemType]}
 						</Box>

diff --git a/src/components/card/card.module.scss b/src/components/card/card.module.scss
@@ -6,7 +6,7 @@
 		object-fit: cover;
 		transition: opacity $transition-time-fast;
 		position: absolute;
-		z-index: 0;
+		z-index: 1;
 		top: 0;
 		left: 0;
 		&-container {
@@ -31,6 +31,14 @@
 				z-index: 0;
 			}
 		}
+		&-blurhash {
+			position: absolute;
+			z-index: 1;
+			top: 0;
+			left: 0;
+			width: 100% !important;
+			height: 100% !important;
+		}
 	}
 	&-overlay {
 		position: absolute;

diff --git a/src/components/carousel/carousel.scss b/src/components/carousel/carousel.scss
@@ -14,12 +14,14 @@
 		}
 	}
 	&-indicator {
-		height: 5px;
+		height: 2px;
 		width: 100%;
 		border-radius: 10px;
-		transition: background $transition-time-fast;
+		transition: background $transition-time-fast,
+			height $transition-time-fast;
 		&:hover {
 			cursor: pointer;
+			height: 5px;
 			background: rgb(255 255 255 / 0.8) !important;
 		}
 		&-container {
@@ -30,6 +32,11 @@
 			left: 1em;
 			right: 1em;
 			gap: 1em;
+			align-items: center;
+			justify-content: center;
+		}
+		&.active {
+			height: 5px;
 		}
 	}
 }
diff --git a/src/components/carousel/index.jsx b/src/components/carousel/index.jsx
@@ -10,7 +10,7 @@ import { MdiChevronRight } from "../icons/mdiChevronRight";
 import "./carousel.scss";
 import { useCarouselStore } from "../../utils/store/carousel";
 
-const swipeConfidenceThreshold = 10000;
+const swipeConfidenceThreshold = 8000;
 const swipePower = (offset, velocity) => {
 	return Math.abs(offset) * velocity;
 };
@@ -50,18 +50,23 @@ const Carousel = ({ content, onChange }) => {
 					animate={{ opacity: 1 }}
 					exit={{ opacity: 0 }}
 					transition={{
-						duration: 0.5,
+						duration: 0.3,
 					}}
-					drag="x"
+					drag={"x"}
 					dragConstraints={{ left: 0, right: 0 }}
 					dragElastic={1}
 					onDragEnd={(e, { offset, velocity }) => {
 						const swipe = swipePower(offset.x, velocity.x);
-
-						if (swipe < -swipeConfidenceThreshold) {
+						if (
+							currentSlide != content.length - 1 &&
+							swipe < -swipeConfidenceThreshold
+						) {
 							setDirection("right");
 							setCurrentSlide((init) => init + 1);
-						} else if (swipe > swipeConfidenceThreshold) {
+						} else if (
+							currentSlide != 0 &&
+							swipe > swipeConfidenceThreshold
+						) {
 							setDirection("left");
 							setCurrentSlide((init) => init - 1);
 						}
@@ -92,7 +97,11 @@ const Carousel = ({ content, onChange }) => {
 			</IconButton>
 			<Box className="carousel-indicator-container">
 				<Box
-					className="carousel-indicator"
+					className={
+						currentSlide == 0
+							? "carousel-indicator active"
+							: "carousel-indicator"
+					}
 					sx={{
 						background:
 							currentSlide == 0
@@ -106,7 +115,11 @@ const Carousel = ({ content, onChange }) => {
 				/>
 				{content.map((item, index) => (
 					<Box
-						className="carousel-indicator"
+						className={
+							currentSlide == index + 1
+								? "carousel-indicator active"
+								: "carousel-indicator"
+						}
 						key={index}
 						sx={{
 							background:

diff --git a/src/components/carouselSlide/index.jsx b/src/components/carouselSlide/index.jsx
@@ -127,7 +127,7 @@ const CarouselSlide = ({ item }) => {
 						opacity: 0,
 					}}
 					transition={{
-						duration: 0.25,
+						duration: 0.15,
 					}}
 					className="hero-carousel-detail"
 				>

diff --git a/src/components/homeSection/latestMediaSection.jsx b/src/components/homeSection/latestMediaSection.jsx
@@ -61,6 +61,13 @@ export const LatestMediaSection = ({ latestMediaLib }) => {
 							queryKey={["home", "resume", "video"]}
 							isPlayed={item.UserData.Played}
 							userId={user.data.Id}
+							imageBlurhash={
+								item.ImageBlurHashes?.Primary[
+									Object.keys(
+										item.ImageBlurHashes.Primary,
+									)[0]
+								]
+							}
 						></Card>
 					);
 				})}

diff --git a/src/routes/home/index.jsx b/src/routes/home/index.jsx
@@ -263,6 +263,17 @@ const Home = () => {
 														`/library/${item.Id}`,
 													)
 												}
+												imageBlurhash={
+													item
+														.ImageBlurHashes
+														?.Primary[
+														Object.keys(
+															item
+																.ImageBlurHashes
+																.Primary,
+														)[0]
+													]
+												}
 											></Card>
 										);
 									},
@@ -298,6 +309,16 @@ const Home = () => {
 												item.UserData.Played
 											}
 											userId={user.data.Id}
+											imageBlurhash={
+												item.ImageBlurHashes
+													?.Primary[
+													Object.keys(
+														item
+															.ImageBlurHashes
+															.Primary,
+													)[0]
+												]
+											}
 										></Card>
 									);
 								},
@@ -352,6 +373,16 @@ const Home = () => {
 												item.UserData.Played
 											}
 											userId={user.data.Id}
+											imageBlurhash={
+												item.ImageBlurHashes
+													?.Primary[
+													Object.keys(
+														item
+															.ImageBlurHashes
+															.Primary,
+													)[0]
+												]
+											}
 										></Card>
 									);
 								},
@@ -398,6 +429,16 @@ const Home = () => {
 												item.UserData.Played
 											}
 											userId={user.data.Id}
+											imageBlurhash={
+												item.ImageBlurHashes
+													?.Primary[
+													Object.keys(
+														item
+															.ImageBlurHashes
+															.Primary,
+													)[0]
+												]
+											}
 										></Card>
 									);
 								},