feat: show queue item from currently playing item in queueButton

prayag17 · Sep 14, 2024 · e82ff1f · e82ff1f
1 parent 48af14b
commit e82ff1f
Show file tree

Hide file tree

Showing 5 changed files with 105 additions and 101 deletions.
diff --git a/src/components/buttons/queueButton.tsx b/src/components/buttons/queueButton.tsx
@@ -34,7 +34,7 @@ const QueueButton = () => {
 	const handlePlay = useMutation({
 		mutationKey: ["handlePlayIndex"],
 		mutationFn: async ({ index }: { index: number }) => {
-			const result = playItemFromQueue(index, user.data?.Id);
+			const result = playItemFromQueue(index, user.data?.Id, api);
 			return result;
 		},
 		onSuccess: () => {
@@ -76,82 +76,86 @@ const QueueButton = () => {
 						position: "relative",
 					}}
 				>
-					{queueItems.map((item, index) => {
-						return (
-							<MenuItem
-								className="queue-item"
-								disabled={index === currentItemIndex}
-								onClick={() => handlePlay.mutate({ index })}
-								key={item.Id}
-							>
-								<Typography variant="subtitle2">
-									{item.Type === "Audio"
-										? index + 1
-										: item.IndexNumberEnd
-											? `S${item.ParentIndexNumber}:E${item.IndexNumber} / ${item.IndexNumberEnd}`
-											: `S${item.ParentIndexNumber}:E${item.IndexNumber}`}
-								</Typography>
-								<div className="queue-item-image-container">
-									{item.ImageTags?.Primary ? (
-										<img
-											className="queue-item-image"
-											src={api?.getItemImageUrl(item?.Id, "Primary", {
-												tag: item.ImageTags?.Primary,
-											})}
-											alt={item.Name}
-										/>
-									) : item.AlbumPrimaryImageTag?.length > 0 ? (
-										<img
-											className="queue-item-image"
-											src={api?.getItemImageUrl(item?.AlbumId, "Primary", {
-												tag: item.AlbumPrimaryImageTag[0],
-											})}
-											alt={item.Name}
-										/>
-									) : (
-										<div className="queue-item-image-icon">
-											{getTypeIcon(item.Type)}
-										</div>
-									)}
-									{index === currentItemIndex && (
-										<span
-											className="material-symbols-rounded"
-											style={{
-												position: "absolute",
-												top: "50%",
-												left: "50%",
-												transform: "translate(-50%,-50%)",
-												fontSize: "2em",
-												"--wght": "100",
-											}}
-										>
-											equalizer
-										</span>
-									)}
-								</div>
-								<div className="queue-item-info">
-									{item.SeriesName ? (
-										<>
-											<Typography variant="subtitle1" width="100%">
-												{item.SeriesName}
-											</Typography>
-											<Typography
-												variant="subtitle2"
-												width="100%"
-												style={{ opacity: 0.6 }}
+					{queueItems
+						.slice(currentItemIndex, queueItems.length - 1)
+						.map((item, index) => {
+							return (
+								<MenuItem
+									className="queue-item"
+									disabled={index === 0}
+									onClick={() =>
+										handlePlay.mutate({ index: index + currentItemIndex })
+									}
+									key={item.Id}
+								>
+									<Typography variant="subtitle2">
+										{item.Type === "Audio"
+											? index + 1
+											: item.IndexNumberEnd
+												? `S${item.ParentIndexNumber}:E${item.IndexNumber} / ${item.IndexNumberEnd}`
+												: `S${item.ParentIndexNumber}:E${item.IndexNumber}`}
+									</Typography>
+									<div className="queue-item-image-container">
+										{item.ImageTags?.Primary ? (
+											<img
+												className="queue-item-image"
+												src={api?.getItemImageUrl(item?.Id, "Primary", {
+													tag: item.ImageTags?.Primary,
+												})}
+												alt={item.Name}
+											/>
+										) : item.AlbumPrimaryImageTag?.length > 0 ? (
+											<img
+												className="queue-item-image"
+												src={api?.getItemImageUrl(item?.AlbumId, "Primary", {
+													tag: item.AlbumPrimaryImageTag[0],
+												})}
+												alt={item.Name}
+											/>
+										) : (
+											<div className="queue-item-image-icon">
+												{getTypeIcon(item.Type)}
+											</div>
+										)}
+										{index === 0 && (
+											<span
+												className="material-symbols-rounded"
+												style={{
+													position: "absolute",
+													top: "50%",
+													left: "50%",
+													transform: "translate(-50%,-50%)",
+													fontSize: "2em",
+													"--wght": "100",
+												}}
 											>
+												equalizer
+											</span>
+										)}
+									</div>
+									<div className="queue-item-info">
+										{item.SeriesName ? (
+											<>
+												<Typography variant="subtitle1" width="100%">
+													{item.SeriesName}
+												</Typography>
+												<Typography
+													variant="subtitle2"
+													width="100%"
+													style={{ opacity: 0.6 }}
+												>
+													{item.Name}
+												</Typography>
+											</>
+										) : (
+											<Typography variant="subtitle1" width="100%">
 												{item.Name}
 											</Typography>
-										</>
-									) : (
-										<Typography variant="subtitle1" width="100%">
-											{item.Name}
-										</Typography>
-									)}
-								</div>
-							</MenuItem>
-						);
-					})}
+										)}
+									</div>
+								</MenuItem>
+							);
+						})}
 				</MenuList>
 			</Menu>
 			<IconButton onClick={(e) => setButtonEl(e.currentTarget)}>

diff --git a/src/routeTree.gen.ts b/src/routeTree.gen.ts
@@ -439,7 +439,7 @@ const ApiRouteChildren: ApiRouteChildren = {
 
 const ApiRouteWithChildren = ApiRoute._addFileChildren(ApiRouteChildren)
 
-interface FileRoutesByFullPath {
+export interface FileRoutesByFullPath {
   '/': typeof IndexRoute
   '': typeof ApiRouteWithChildren
   '/library': typeof ApiLibraryRouteWithChildren
@@ -468,7 +468,7 @@ interface FileRoutesByFullPath {
   '/login/$userId/$userName': typeof ApiLoginUserIdUserNameRoute
 }
 
-interface FileRoutesByTo {
+export interface FileRoutesByTo {
   '/': typeof IndexRoute
   '': typeof ApiRouteWithChildren
   '/library': typeof ApiLibraryRouteWithChildren
@@ -496,7 +496,8 @@ interface FileRoutesByTo {
   '/login/$userId/$userName': typeof ApiLoginUserIdUserNameRoute
 }
 
-interface FileRoutesById {
+export interface FileRoutesById {
+  __root__: typeof rootRoute
   '/': typeof IndexRoute
   '/_api': typeof ApiRouteWithChildren
   '/_api/library': typeof ApiLibraryRouteWithChildren
@@ -525,7 +526,7 @@ interface FileRoutesById {
   '/_api/login/$userId/$userName': typeof ApiLoginUserIdUserNameRoute
 }
 
-interface FileRouteTypes {
+export interface FileRouteTypes {
   fileRoutesByFullPath: FileRoutesByFullPath
   fullPaths:
     | '/'
@@ -582,6 +583,7 @@ interface FileRouteTypes {
     | '/search'
     | '/login/$userId/$userName'
   id:
+    | '__root__'
     | '/'
     | '/_api'
     | '/_api/library'
@@ -611,7 +613,7 @@ interface FileRouteTypes {
   fileRoutesById: FileRoutesById
 }
 
-interface RootRouteChildren {
+export interface RootRouteChildren {
   IndexRoute: typeof IndexRoute
   ApiRoute: typeof ApiRouteWithChildren
   ErrorCodeRoute: typeof ErrorCodeRoute

diff --git a/src/routes/_api/library/library.scss b/src/routes/_api/library/library.scss
@@ -139,6 +139,7 @@
 			flex-basis: 14%;
 		}	
 		width: 14%;
+		flex-basis: 14%;
 		height: fit-content;
 		display: inline-flex;
 		flex-direction: row;

diff --git a/src/routes/_api/login.tsx b/src/routes/_api/login.tsx
@@ -7,7 +7,7 @@ export const Route = createFileRoute("/_api/login")({
 			const api = context.api;
 			if (!api) {
 				console.info("Awaiting Api generation.");
-				return;
+				throw redirect({ to: "/login/manual" });
 			}
 			const publicUsers = (await getUserApi(api).getPublicUsers()).data;
 			if (publicUsers.length > 0) {
@@ -16,4 +16,4 @@ export const Route = createFileRoute("/_api/login")({
 			throw redirect({ to: "/login/manual" });
 		}
 	},
-});
+});
diff --git a/src/routes/_api/player/videoPlayer.scss b/src/routes/_api/player/videoPlayer.scss
@@ -1,4 +1,3 @@
-
 .video {
 	&-osd {
 		opacity: 0;
@@ -18,9 +17,9 @@
 			}
 			gap: 0.5em;
 		}
-		&-trick-bubble{
+		&-trick-bubble {
 			overflow: hidden;
-				border-radius: $border-radius-default;
+			border-radius: $border-radius-default;
 		}
 	}
 	&-osd-visible {
@@ -36,7 +35,7 @@
 		bottom: 0;
 		overflow: hidden;
 	}
-	&-volume-indicator{
+	&-volume-indicator {
 		display: flex;
 		flex-direction: column;
 		width: 12em;
@@ -50,13 +49,12 @@
 		right: 2em;
 		z-index: 10;
 		border-radius: 2em;
-		.material-symbols-rounded{
+		.material-symbols-rounded {
 			font-size: 3em;
-			--fill:1;
+			--fill: 1;
 		}
 	}
 }
-
 video {
 	&::-webkit-media-text-track-display {
 		overflow: visible !important;
@@ -69,15 +67,14 @@ video {
 		text-shadow: 0 2px 10px rgb(0 0 0 / 0.8);
 	}
 }
-
 .video-player {
 	background: black;
 	position: absolute;
 	width: 100vw;
 	height: 100vh;
 	top: 0;
 	left: 0;
-	&-osd{
+	&-osd {
 		position: absolute;
 		width: 100vw;
 		height: 100vh;
@@ -90,17 +87,17 @@ video {
 		justify-content: space-between;
 		padding: 1em 2em;
 		background: linear-gradient(to top, rgb(0 0 0 / 0.7) 5vh, transparent 26vh 90vh, rgb(0 0 0 / 0.7));
-		&.hovering{
+		&.hovering {
 			cursor: default;
 		}
-		&-controls{
-			&-progress{
+		&-controls {
+			&-progress {
 				display: flex;
 				flex-direction: column;
 				gap: 0.2em;
 				align-items: stretch;
 				justify-content: center;
-				&-text{
+				&-text {
 					display: flex;
 					align-items: stretch;
 					justify-content: space-between;
@@ -113,12 +110,12 @@ video {
 				align-items: center;
 			}
 		}
-				.MuiSlider-valueLabel {
-					padding: 0;
-					background: transparent;
-					overflow: hidden;
-					border-radius: $border-radius-default;
-					border: 1.2px solid rgb(255 255 255 / 0.1);
-				}
+		.MuiSlider-valueLabel {
+			padding: 0;
+			background: transparent;
+			overflow: hidden;
+			border-radius: $border-radius-default;
+			border: 1.2px solid rgb(255 255 255 / 0.1);
+		}
 	}
 }