Complete open sidemenu #11

prayag17 · Jul 6, 2023 · ce4b635 · ce4b635
1 parent 83ebd5d
commit ce4b635
Show file tree

Hide file tree

Showing 6 changed files with 58 additions and 36 deletions.
diff --git a/src/components/icons/mdiBackburger.jsx b/src/components/icons/mdiBackburger.jsx
@@ -0,0 +1,12 @@
+/** @format */
+import SvgIcon from "@mui/material/SvgIcon";
+
+import { mdiBackburger } from "@mdi/js";
+
+export const MdiBackburger = (props) => {
+	return (
+		<SvgIcon {...props}>
+			<path d={mdiBackburger}></path>
+		</SvgIcon>
+	);
+};
diff --git a/src/components/icons/mdiClose.jsx b/src/components/icons/mdiClose.jsx
@@ -0,0 +1,12 @@
+/** @format */
+import SvgIcon from "@mui/material/SvgIcon";
+
+import { mdiClose } from "@mdi/js";
+
+export const MdiClose = (props) => {
+	return (
+		<SvgIcon {...props}>
+			<path d={mdiClose}></path>
+		</SvgIcon>
+	);
+};
diff --git a/src/components/menu/sidemenu.jsx b/src/components/menu/sidemenu.jsx
@@ -22,7 +22,7 @@ import Divider from "@mui/material/Divider";
 import MuiDrawer from "@mui/material/Drawer";
 import ListItemText from "@mui/material/ListItemText";
 
-import { MdiMenu } from "../icons/mdiMenu";
+import { MdiClose } from "../icons/mdiClose";
 import { MdiLogoutVariant } from "../icons/mdiLogoutVariant";
 
 import { MediaCollectionTypeIconCollection } from "../../components/utils/iconsCollection.jsx";
@@ -80,7 +80,6 @@ export const SideMenu = ({}) => {
 		enabled: !!user.data,
 		networkMode: "always",
 	});
-	const handleDrawerOpen = () => {};
 
 	const handleLogout = async () => {
 		console.log("Logging out user...");
@@ -139,14 +138,7 @@ export const SideMenu = ({}) => {
 						sx={{
 							justifyContent: "center",
 						}}
-					>
-						{/* <div>
-						<Avatar src={""}/>
-						<Typography variant="h3">
-						{user["Name"]}
-						</Typography>
-					</div> */}
-					</DrawerHeader>
+					></DrawerHeader>
 					<Divider />
 					{libraries.isLoading ? (
 						<>
@@ -287,27 +279,29 @@ export const SideMenu = ({}) => {
 
 				<MuiDrawer
 					open={open}
+					variant="persistent"
 					onClose={() => setDrawerOpen(false)}
 					elevation={0}
 					PaperProps={{
 						sx: {
-							m: 1,
-							height: "auto",
-							minHeight: "-webkit-fill-available",
-							background: "transparent",
-							backdropFilter: "blur(15px)",
-							borderRadius: "15px",
+							background: "rgb(0 0 0 / 0.5)",
+							backdropFilter: "blur(10px)",
 							boxShadow: "0 0 15px rgb(0 0 0 / 0.2)",
 							width: 260,
 						},
 					}}
+					className="sidemenu-open"
 				>
 					<DrawerHeader
 						className="Mui-DrawerHeader"
 						sx={{
-							justifyContent: "center",
+							justifyContent: "flex-start",
 						}}
-					></DrawerHeader>
+					>
+						<IconButton onClick={() => setDrawerOpen(false)}>
+							<MdiClose />
+						</IconButton>
+					</DrawerHeader>
 					<Divider />
 					{libraries.isLoading ? (
 						<>

diff --git a/src/components/menu/sidemenu.module.scss b/src/components/menu/sidemenu.module.scss
@@ -26,4 +26,12 @@
 			transform: translateX(0);
 		}
 	}
+	&-open {
+		.sidemenu-item::before {
+			width: 100%;
+			inset: 0;
+			border-radius: 0;
+			z-index: -1;
+		}
+	}
 }
diff --git a/src/routes/item/index.jsx b/src/routes/item/index.jsx
@@ -509,8 +509,8 @@ const ItemDetail = () => {
 			setAudioTracks(audios);
 			setSubtitleTracks(subs);
 
-			setCurrentVideoTrack(videos[0]?.DisplayTitle);
-			setCurrentAudioTrack(audios[0]?.DisplayTitle);
+			setCurrentVideoTrack(videos[0]?.Index);
+			setCurrentAudioTrack(audios[0]?.Index);
 			setCurrentSubTrack(subs[0]?.Index);
 		}
 	}, [item.isSuccess]);
@@ -1054,7 +1054,7 @@ const ItemDetail = () => {
 																	.VideoType
 															) {
 																setUrl(
-																	`${window.api.basePath}/Videos/${item.data.Id}/stream.${item.data.MediaSources[0].Container}?Static=true&mediaSourceId=${item.data.Id}&deviceId=${window.api.deviceInfo.id}&api_key=${window.api.accessToken}&Tag=${item.data.MediaSources[0].ETag}`,
+																	`${window.api.basePath}/Videos/${item.data.Id}/stream.${item.data.MediaSources[0].Container}?Static=true&mediaSourceId=${item.data.Id}&deviceId=${window.api.deviceInfo.id}&api_key=${window.api.accessToken}&Tag=${item.data.MediaSources[0].ETag}&videoStreamIndex=${currentVideoTrack}&audioStreamIndex=${currentAudioTrack}`,
 																);
 																setPosition(
 																	item
@@ -1602,7 +1602,7 @@ const ItemDetail = () => {
 																					sindex
 																				}
 																				value={
-																					stream.DisplayTitle
+																					stream.Index
 																				}
 																			>
 																				{
@@ -1673,7 +1673,7 @@ const ItemDetail = () => {
 																				sindex
 																			}
 																			value={
-																				stream.DisplayTitle
+																				stream.Index
 																			}
 																		>
 																			{

diff --git a/src/routes/player/videoPlayer.jsx b/src/routes/player/videoPlayer.jsx
@@ -556,19 +556,15 @@ export const VideoPlayer = () => {
 						attributes: {
 							crossOrigin: "true",
 						},
-						tracks: [],
-						// tracks: subtitleTracksStore.map((sub, index) => {
-						// 	return {
-						// 		kind: "subtitles",
-						// 		src: `${window.api.basePath}/Videos/${itemId}/${itemId}/Subtitles/${sub.Index}/Stream.vtt?api_key=${window.api.accessToken}`,
-						// 		srcLang: sub?.Language,
-						// 		default: false,
-						// 		mode:
-						// 			sub.Index == currentSubtrack
-						// 				? "showing"
-						// 				: "hidden",
-						// 	};
-						// }),
+						tracks: [
+							{
+								kind: "subtitles",
+								src: `${window.api.basePath}/Videos/${itemId}/${itemId}/Subtitles/${currentSubtrack}/Stream.vtt?api_key=${window.api.accessToken}`,
+								srcLang: "",
+								default: true,
+								mode: "showing",
+							},
+						],
 					},
 				}}
 				playbackRate={availableSpeeds[speed]}