fix: fixed kdrama page and made it available

10 files changed, 45 insertions, 30 deletions

diff --git a/src/app/anime/search/search.module.css b/src/app/anime/search/search.module.css
index 74bd7f2..feff8bc 100644
--- a/src/app/anime/search/search.module.css
+++ b/src/app/anime/search/search.module.css
@@ -20,9 +20,9 @@
 	display: flex;
 	align-items: center;
 	margin: 20px 0px 20px 0px;
-	background-color: #2c2c2c;
-	padding: 8px;
-	border-radius: 5px;
+	background-color: #121212;
+	padding: 10px;
+	border-radius: 10px;
 	width: 30%;
 }
 
diff --git a/src/app/kdrama/[id]/buttons.jsx b/src/app/kdrama/[id]/buttons.jsx
index c760b96..c41c32f 100644
--- a/src/app/kdrama/[id]/buttons.jsx
+++ b/src/app/kdrama/[id]/buttons.jsx
@@ -66,6 +66,7 @@ export default function EpisodesButtons({ data: episodeData, id: dramaId }) {
 							load="eager"
 							className={styles.VideoPlayer}
 							playsInline
+							volume={0.5}
 						>
 							<MediaProvider />
 							<PlyrLayout icons={plyrLayoutIcons} />
diff --git a/src/app/kdrama/components/cacher.js b/src/app/kdrama/components/cacher.js
index 934fdd6..4c787d5 100644
--- a/src/app/kdrama/components/cacher.js
+++ b/src/app/kdrama/components/cacher.js
@@ -4,7 +4,7 @@
 export default async function PreFetchVideoLinks(data, dramaId) {
 	try {
 		const fetchPromises = data.map(async (element) => {
-			const link = `https://consumet-api-di2e.onrender.com/movies/dramacool/watch?episodeId=${element.id}&mediaId=${dramaId}`;
+			const link = `https://consumet-jade.vercel.app/movies/dramacool/watch?episodeId=${element.id}&mediaId=${dramaId}`;
 			await fetch(link, { cache: "force-cache" });
 		});
 
diff --git a/src/app/kdrama/components/popular.jsx b/src/app/kdrama/components/popular.jsx
index 42536dd..7c29ee2 100644
--- a/src/app/kdrama/components/popular.jsx
+++ b/src/app/kdrama/components/popular.jsx
@@ -20,8 +20,8 @@ export default async function PopularDramas() {
 							<div className={styles.AnimeEntry}>
 								<Image
 									src={`https://sup-proxy.zephex0-f6c.workers.dev/api-content?url=${item.image}`}
-									width={160}
-									height={240}
+									width={150}
+									height={230}
 									alt="Drama Poster"
 								/>
 								<p>{item.title}</p>
diff --git a/src/app/kdrama/components/searchQuery.js b/src/app/kdrama/components/searchQuery.js
index cd02d43..b67cf08 100644
--- a/src/app/kdrama/components/searchQuery.js
+++ b/src/app/kdrama/components/searchQuery.js
@@ -2,7 +2,7 @@
 
 export default async function FetchSearchTitle(title) {
 	const res = await fetch(
-		`https://consumet-api-di2e.onrender.com/movies/dramacool/${title}`,
+		`https://consumet-jade.vercel.app/movies/dramacool/${title}`,
 		{ cache: "force-cache" }
 	);
 	const data = await res.json();
diff --git a/src/app/kdrama/components/videoLink.js b/src/app/kdrama/components/videoLink.js
index fec016d..db1b885 100644
--- a/src/app/kdrama/components/videoLink.js
+++ b/src/app/kdrama/components/videoLink.js
@@ -2,7 +2,7 @@
 export default async function getVideoLink(epiId, mediaId) {
 	let videoLink;
 	const res = await fetch(
-		`https://consumet-api-di2e.onrender.com/movies/dramacool/watch?episodeId=${epiId}&mediaId=${mediaId}`,
+		`https://consumet-jade.vercel.app/movies/dramacool/watch?episodeId=${epiId}&mediaId=${mediaId}`,
 		{ cache: "force-cache" }
 	);
 	const data = await res.json();
diff --git a/src/app/kdrama/styles/info.module.css b/src/app/kdrama/styles/info.module.css
index 3d9966e..4b6a091 100644
--- a/src/app/kdrama/styles/info.module.css
+++ b/src/app/kdrama/styles/info.module.css
@@ -1,6 +1,6 @@
 .Main {
-	max-width: 95%;
-	margin: 100px auto;
+	max-width: 98%;
+	margin: 80px auto;
 }
 
 .TitleContainer {
@@ -16,8 +16,8 @@
 }
 
 .TitleContainer img {
-	height: auto;
 	width: auto;
+	/* height: auto; */
 	border-radius: 10px;
 }
 
@@ -95,6 +95,8 @@
 	display: flex;
 	flex-direction: column;
 	align-items: center;
+	width: 70dvw;
+	margin: 0px auto;
 }
 
 .Video p {
@@ -104,14 +106,18 @@
 }
 
 .VideoPlayer {
-	width: 70%;
 	height: auto;
 	margin: 0px auto;
 }
 
 @media screen and (max-width: 768px) {
-	.VideoPlayer {
+	.Video {
 		width: 100%;
-		height: auto;
 	}
+
+	.EpisodeButtons button {
+		font-size: 14px;
+		width: 80px;
+	}
+
 }
\ No newline at end of file
diff --git a/src/app/kdrama/styles/kdrama.module.css b/src/app/kdrama/styles/kdrama.module.css
index 15695be..9cfc377 100644
--- a/src/app/kdrama/styles/kdrama.module.css
+++ b/src/app/kdrama/styles/kdrama.module.css
@@ -1,4 +1,4 @@
 .Main {
-	max-width: 95%;
-	margin: 100px auto;
+	max-width: 98%;
+	margin: 80px auto;
 }
\ No newline at end of file
diff --git a/src/app/kdrama/styles/popular.module.css b/src/app/kdrama/styles/popular.module.css
index eafe792..ecfcbdd 100644
--- a/src/app/kdrama/styles/popular.module.css
+++ b/src/app/kdrama/styles/popular.module.css
@@ -3,11 +3,13 @@
 	font-family: "Poppins";
 	font-size: 28px;
 	margin-bottom: 10px;
+	font-weight: 500;
 }
 
 .AnimeContainer {
 	display: flex;
 	overflow-x: auto;
+	overflow-y: hidden;
 }
 
 .AnimeContainer::-webkit-scrollbar {
@@ -24,29 +26,38 @@
 	border-radius: 5px;
 }
 
+.AnimeContainer:hover .AnimeEntry {
+	opacity: 0.4;
+}
+
+.AnimeContainer:hover .AnimeEntry:hover {
+	opacity: 1;
+	transform: scale(1.02);
+}
+
 /* Format the scrollbar later */
 
 .AnimeEntry {
 	display: flex;
 	flex-direction: column;
 	align-items: center;
-	margin: 7px;
-	transition: transform 0.2s linear;
+	margin: 4px;
+	background-color: #353535a6;
+	padding: 0.5rem;
+	transition: opacity 400ms ease, transform 400ms ease;
 	cursor: grab;
-}
-
-.AnimeEntry:hover {
-	transition: transform 0.2s linear;
-	transform: scale(0.97);
+	border-radius: 1rem;
 }
 
 .AnimeEntry img {
-	border-radius: 5px;
+	border-radius: 1rem;
 }
 
-
 .AnimeEntry p {
 	text-align: center;
 	color: white;
 	font-family: "Atkinson Hyperlegible";
+	width: 140px;
+	height: 60px;
+	overflow-y: auto;
 }
\ No newline at end of file
diff --git a/src/app/page.jsx b/src/app/page.jsx
index 99cc758..2b79931 100644
--- a/src/app/page.jsx
+++ b/src/app/page.jsx
@@ -20,11 +20,8 @@ export default function Home() {
 						</Link>
 					</div>
 					<div className={styles.kdrama}>
-						<Link
-							href={"/kdrama"}
-							style={{ pointerEvents: "none" }}
-						>
-							<h2>Kdrama - Maintainence</h2>
+						<Link href={"/kdrama"}>
+							<h2>Kdrama</h2>
 							<p>Your one stop for all your kdrama needs</p>
 						</Link>
 					</div>