Update hero carousel [6/-] #136

prayag17 · Aug 20, 2023 · 464a450 · 464a450
1 parent 8bd719e
commit 464a450
Show file tree

Hide file tree

Showing 9 changed files with 108 additions and 181 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -12,7 +12,7 @@
 	"dependencies": {
 		"@emotion/react": "^11.11.1",
 		"@emotion/styled": "^11.10.5",
-		"@fontsource/open-sans": "^5.0.5",
+		"@fontsource-variable/open-sans": "^5.0.9",
 		"@jellyfin/sdk": "^0.8.2",
 		"@mdi/js": "^7.2.96",
 		"@mui/lab": "^5.0.0-alpha.134",

diff --git a/src/App.jsx b/src/App.jsx
@@ -54,7 +54,9 @@ import { SideMenu } from "./components/menu/sidemenu.jsx";
 import { AppBar } from "./components/appBar/appBar.jsx";
 
 // Fonts
-import "@fontsource/open-sans";
+import "@fontsource-variable/open-sans"; // Defaults to wght axis
+import "@fontsource-variable/open-sans/wght.css"; // Specify axis
+import "@fontsource-variable/open-sans/wght-italic.css"; // Specify axis and style
 
 // Jellyfin SDK TypeScript
 import {
@@ -394,7 +396,7 @@ function App() {
 					<CssBaseline />
 					<SideMenu />
 					<AppBar />
-					<Routes key={location.pathname} location={location}>
+					<Routes key={location.key} location={location}>
 						<Route element={<AnimationWrapper />}>
 							<Route
 								path="/"

diff --git a/src/components/buttons/markPlayedButton.jsx b/src/components/buttons/markPlayedButton.jsx
@@ -2,11 +2,10 @@
 import PropTypes from "prop-types";
 
 import IconButton from "@mui/material/IconButton";
+import CircularProgress from "@mui/material/CircularProgress";
 
 import { useMutation, useQueryClient } from "@tanstack/react-query";
-import { green, pink } from "@mui/material/colors";
-import { MdiHeart } from "../icons/mdiHeart";
-import { MdiHeartOutline } from "../icons/mdiHeartOutline";
+import { green } from "@mui/material/colors";
 
 import { getPlaystateApi } from "@jellyfin/sdk/lib/utils/api/playstate-api";
 import { MdiCheck } from "../icons/mdiCheck";

diff --git a/src/components/carouselSlide/index.jsx b/src/components/carouselSlide/index.jsx
@@ -1,4 +1,5 @@
 /** @format */
+import { memo } from "react";
 import { Blurhash } from "react-blurhash";
 
 import { motion } from "framer-motion";
@@ -8,11 +9,9 @@ import Box from "@mui/material/Box";
 import Typography from "@mui/material/Typography";
 import Stack from "@mui/material/Stack";
 import Chip from "@mui/material/Chip";
-import LinearProgress from "@mui/material/LinearProgress";
 import Button from "@mui/material/Button";
-import IconButton from "@mui/material/IconButton";
 
-import { pink, yellow } from "@mui/material/colors";
+import { yellow } from "@mui/material/colors";
 
 import { ErrorBoundary } from "react-error-boundary";
 
@@ -32,6 +31,7 @@ import { getUserApi } from "@jellyfin/sdk/lib/utils/api/user-api";
 import { useSnackbar } from "notistack";
 import LikeButton from "../buttons/likeButton";
 import MarkPlayedButton from "../buttons/markPlayedButton";
+import { theme } from "../../theme";
 
 const CarouselSlide = ({ item }) => {
 	const navigate = useNavigate();
@@ -45,6 +45,8 @@ const CarouselSlide = ({ item }) => {
 		networkMode: "always",
 	});
 
+	// consoe;
+
 	// const favouriteButtonMutation =
 
 	return (
@@ -53,6 +55,7 @@ const CarouselSlide = ({ item }) => {
 				className="hero-carousel-slide"
 				sx={{
 					background: "transparent",
+					px: 3,
 				}}
 			>
 				<div className="hero-carousel-background-container">
@@ -80,12 +83,9 @@ const CarouselSlide = ({ item }) => {
 					<div
 						className="hero-carousel-background-image"
 						style={{
-							backgroundImage: `url(${
-								window.api.basePath +
-								"/Items/" +
-								item.Id +
-								"/Images/Backdrop"
-							})`,
+							backgroundImage: !!item.ParentBackdropItemId
+								? `url('${window.api.basePath}/Items/${item.ParentBackdropItemId}/Images/Backdrop')`
+								: `url('${window.api.basePath}/Items/${item.Id}/Images/Backdrop')`,
 						}}
 					></div>
 					<div className="hero-carousel-background-icon-container">
@@ -116,6 +116,7 @@ const CarouselSlide = ({ item }) => {
 							y: 0,
 							opacity: 1,
 						}}
+						overflow="visible"
 					>
 						{!item.ImageTags.Logo ? (
 							item.Name
@@ -166,21 +167,14 @@ const CarouselSlide = ({ item }) => {
 						}
 						className="hero-carousel-info"
 					>
-						<Typography
-							variant="subtitle1"
-							// color="GrayText"
-						>
+						<Typography variant="subtitle1">
 							{!!item.ProductionYear
 								? item.ProductionYear
 								: "Unknown"}
 						</Typography>
 						<Chip
 							variant="filled"
-							label={
-								!!item.OfficialRating
-									? item.OfficialRating
-									: "Not Rated"
-							}
+							label={item.OfficialRating ?? "Not Rated"}
 						/>
 						<Box
 							sx={{
@@ -254,54 +248,6 @@ const CarouselSlide = ({ item }) => {
 						{item.Overview}
 					</Typography>
 
-					{item.UserData.PlaybackPositionTicks > 0 && (
-						<Stack
-							component={motion.div}
-							initial={{
-								y: 10,
-								opacity: 0,
-							}}
-							transition={{
-								duration: 0.25,
-								delay: 0.3,
-							}}
-							whileInView={{
-								y: 0,
-								opacity: 1,
-							}}
-							exit={{
-								y: 10,
-								opacity: 0,
-							}}
-							direction="row"
-							gap="1em"
-							mt={2}
-							width="50%"
-							alignItems="center"
-							justifyContent="center"
-						>
-							<Typography
-								variant="subtitle1"
-								whiteSpace="nowrap"
-							>
-								{getRuntime(
-									item.RunTimeTicks -
-										item.UserData
-											.PlaybackPositionTicks,
-								)}
-							</Typography>
-							<LinearProgress
-								variant="determinate"
-								value={item.UserData.PlayedPercentage}
-								color="white"
-								sx={{
-									borderRadius: 1,
-									height: "2.5px",
-									width: "100%",
-								}}
-							/>
-						</Stack>
-					)}
 					{/* TODO Link PLay and More info buttons in carousel */}
 					<Stack
 						component={motion.div}
@@ -324,16 +270,47 @@ const CarouselSlide = ({ item }) => {
 						mt={3}
 						direction="row"
 						gap={3}
+						width="100%"
 						className="hero-carousel-button-container"
+						alignItems="center"
 					>
-						<Button
-							variant="contained"
-							endIcon={<MdiPlayOutline />}
-							disabled
+						<Stack
+							direction="row"
+							gap="1em"
+							alignItems="center"
+							justifyContent="center"
 						>
-							Play
-						</Button>
+							<Button
+								variant="contained"
+								size="large"
+								disabled
+								startIcon={
+									<MdiPlayOutline
+										sx={{ fontSize: "1.4em" }}
+									/>
+								}
+								sx={{
+									textTransform: "none !important",
+								}}
+							>
+								{item.UserData.PlaybackPositionTicks >
+								0 ? (
+									<Stack
+										direction="column"
+										gap="0.2em"
+										alignItems="flex-start"
+										justifyContent="center"
+									>
+										Resume
+									</Stack>
+								) : (
+									"Play"
+								)}
+							</Button>
+						</Stack>
+
 						<Button
+							size="large"
 							color="white"
 							variant="outlined"
 							endIcon={<MdiChevronRight />}
@@ -364,4 +341,4 @@ const CarouselSlide = ({ item }) => {
 	);
 };
 
-export default CarouselSlide;
+export default memo(CarouselSlide);
diff --git a/src/routes/home/home.module.scss b/src/routes/home/home.module.scss
@@ -90,8 +90,8 @@
 		-webkit-line-clamp: 2;
 		margin-bottom: 0.5em;
 		&-logo {
-			max-width: 12em;
-			height: 2em;
+			max-width: 9em;
+			height: 3em;
 			object-fit: contain;
 			object-position: bottom;
 		}