Merge pull request #8 from zephex-alt/master

video players for both anime and kdrama sites are consistent now
real-zephex · Apr 30, 2024 · 2a827c2 · 2a827c2
2 parents df1e72a + 9fec718
commit 2a827c2
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 42 deletions.
diff --git a/src/app/anime/[id]/buttons.jsx b/src/app/anime/[id]/buttons.jsx
@@ -89,9 +89,6 @@ export default function Button({ data2: info }) {
 							playsInline
 							id="videoPlayer"
 							volume={0.8}
-							// onQualityChange={(event) =>
-							// 	console.log("changed qualities", event)
-							// }
 						>
 							<MediaProvider />
 							<PlyrLayout icons={plyrLayoutIcons} />

diff --git a/src/app/kdrama/[id]/buttons.jsx b/src/app/kdrama/[id]/buttons.jsx
@@ -20,23 +20,6 @@ export default function EpisodesButtons({ data: episodeData, id: dramaId }) {
 		setEpisode(episodeText);
 	}
 
-	// Auto loads the first episode
-	useEffect(() => {
-		const fetchData = async () => {
-			try {
-				let firstVideoLink = episodeData[0].id;
-				let firstLink = await getVideoLink(firstVideoLink, dramaId);
-				setVideoLink(firstLink);
-				setEpisode("Episode 1");
-			} catch (error) {
-				console.log("Some error occured", error);
-				return;
-			}
-		};
-
-		fetchData();
-	}, []);
-
 	return (
 		<div>
 			<div className={styles.EpisodesContainer}>
@@ -58,25 +41,41 @@ export default function EpisodesButtons({ data: episodeData, id: dramaId }) {
 				</div>
 			</div>
 
-			<div className={styles.VideoContainer}>
-				{videoLink && (
-					<div className={styles.Video}>
+			{videoLink && (
+				<div
+					className={styles.videoPopUp}
+					id="popup"
+					onKeyDown={(event) => {
+						if (event.code === "Escape") {
+							setVideoLink("");
+						}
+					}}
+				>
+					<div className={styles.video}>
 						<MediaPlayer
 							title="dramaPlayer"
 							src={videoLink}
 							aspectRatio="16/9"
 							load="eager"
 							className={styles.VideoPlayer}
 							playsInline
+							id="videoPlayer"
 							volume={0.8}
 						>
 							<MediaProvider />
 							<PlyrLayout icons={plyrLayoutIcons} />
 						</MediaPlayer>
-						<p>{episode}</p>
+						<button
+							className={styles.closeButton}
+							onClick={() => {
+								setVideoLink("");
+							}}
+						>
+							Close
+						</button>
 					</div>
-				)}
-			</div>
+				</div>
+			)}
 		</div>
 	);
 }
diff --git a/src/app/kdrama/styles/info.module.css b/src/app/kdrama/styles/info.module.css
@@ -101,33 +101,45 @@
 	transition: background-color 0.2s linear;
 }
 
-.VideoContainer {
-	margin-top: 20px;
-}
-
-.Video {
+.videoPopUp {
+	height: 100dvh;
+	width: 100dvw;
+	background-color: #1f1f1fd3;
+	position: fixed;
+	bottom: 0;
+	left: 0;
+	right: 0;
 	display: flex;
 	flex-direction: column;
 	align-items: center;
-	width: 70dvw;
-	margin: 0px auto;
+	justify-content: center;
+	z-index: 1;
+	overflow-y: auto;
 }
 
-.Video p {
-	color: white;
-	font-family: "Atkinson Hyperlegible", serif;
-	color: var(--pastel-red);
+.closeButton {
+	font-family: "Poppins", serif;
+	font-size: 16px;
+	background-color: var(--pastel-red);
+	padding: 0.5rem 1.5rem;
+	border: 0;
+	outline: 0;
+	border-radius: 0.5rem;
+	cursor: pointer;
+	margin: 5px;
 }
 
-.VideoPlayer {
-	margin: 0px auto;
-	width: auto;
-	height: auto;
+.video {
+	width: 60vw;
 	font-family: "Lexend Deca", serif;
 }
 
+.VideoPlayer {
+	width: 100%;
+}
+
 @media screen and (max-width: 768px) {
-	.Video {
+	.video {
 		width: 100%;
 	}