From 0be532e70aaec7b9ee7650956f9605f54912c01b Mon Sep 17 00:00:00 2001
From: real-zephex <zephex-1@outlook.com>
Date: Wed, 10 Apr 2024 18:55:59 +0530
Subject: tried to fix auto resizing of the video player on quality change.

---
 src/app/anime/[id]/buttons.jsx     | 50 ++++++++++++++++++++------------------
 src/app/anime/[id]/info.module.css | 12 +++++----
 2 files changed, 33 insertions(+), 29 deletions(-)

(limited to 'src')

diff --git a/src/app/anime/[id]/buttons.jsx b/src/app/anime/[id]/buttons.jsx
index 3ce44e2..eac1884 100644
--- a/src/app/anime/[id]/buttons.jsx
+++ b/src/app/anime/[id]/buttons.jsx
@@ -55,30 +55,32 @@ export default function Button({ data2: info }) {
 						}
 					}}
 				>
-					<MediaPlayer
-						title="dramaPlayer"
-						src={videoLink}
-						aspectRatio="16/9"
-						load="eager"
-						className={styles.VideoPlayer}
-						playsInline
-						id="videoPlayer"
-						volume={0.2}
-						onQualityChange={(event) =>
-							console.log("changed qualities", event)
-						}
-					>
-						<MediaProvider />
-						<PlyrLayout icons={plyrLayoutIcons} />
-					</MediaPlayer>
-					<button
-						className={styles.closeButton}
-						onClick={() => {
-							setVideoLink("");
-						}}
-					>
-						Close
-					</button>
+					<div className={styles.video}>
+						<MediaPlayer
+							title="dramaPlayer"
+							src={videoLink}
+							aspectRatio="16/9"
+							load="eager"
+							className={styles.VideoPlayer}
+							playsInline
+							id="videoPlayer"
+							volume={0.2}
+							onQualityChange={(event) =>
+								console.log("changed qualities", event)
+							}
+						>
+							<MediaProvider />
+							<PlyrLayout icons={plyrLayoutIcons} />
+						</MediaPlayer>
+						<button
+							className={styles.closeButton}
+							onClick={() => {
+								setVideoLink("");
+							}}
+						>
+							Close
+						</button>
+					</div>
 				</div>
 			)}
 		</main>
diff --git a/src/app/anime/[id]/info.module.css b/src/app/anime/[id]/info.module.css
index 15fd0cd..c65e796 100644
--- a/src/app/anime/[id]/info.module.css
+++ b/src/app/anime/[id]/info.module.css
@@ -137,7 +137,7 @@
 	font-family: "Poppins", serif;
 	font-size: 16px;
 	background-color: var(--pastel-red);
-	padding: 4px 10px;
+	padding: 0.5rem 1.5rem;
 	border: 0;
 	outline: 0;
 	border-radius: 0.5rem;
@@ -145,11 +145,13 @@
 	margin: 5px;
 }
 
-.VideoPlayer {
-	width: 60dvw;
-	height: auto;
+.video {
+	width: 60vw;
 }
 
+.VideoPlayer {
+	width: 100%;
+}
 
 @media screen and (max-width: 768px) {
 
@@ -161,7 +163,7 @@
 		font-size: 14px;
 	}
 
-	.VideoPlayer {
+	.video {
 		width: 100%;
 	}
 }
\ No newline at end of file
-- 
cgit v1.2.3