Merge pull request #3 from real-zephex/kdrama-section-rewrite

minor fixes, will merge later

7 files changed, 77 insertions, 31 deletions

diff --git a/src/app/kdrama/[id]/buttons.jsx b/src/app/kdrama/[id]/buttons.jsx
index 8ec633f..c760b96 100644
--- a/src/app/kdrama/[id]/buttons.jsx
+++ b/src/app/kdrama/[id]/buttons.jsx
@@ -1,7 +1,7 @@
 "use client";
 import styles from "../styles/info.module.css";
 import getVideoLink from "../components/videoLink";
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import { MediaPlayer, MediaProvider } from "@vidstack/react";
 import "@vidstack/react/player/styles/base.css";
 import "@vidstack/react/player/styles/plyr/theme.css";
@@ -20,6 +20,23 @@ 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}>
@@ -38,22 +55,25 @@ export default function EpisodesButtons({ data: episodeData, id: dramaId }) {
 						))}
 				</div>
 			</div>
-			{videoLink && (
-				<div className={styles.VideoContainer}>
-					<MediaPlayer
-						title="dramaPlayer"
-						src={videoLink}
-						aspectRatio="16/9"
-						load="eager"
-						className={styles.VideoPlayer}
-						playsInline
-					>
-						<MediaProvider />
-						<PlyrLayout icons={plyrLayoutIcons} />
-					</MediaPlayer>
-					<p>{episode.toUpperCase()}</p>
-				</div>
-			)}
+
+			<div className={styles.VideoContainer}>
+				{videoLink && (
+					<div className={styles.Video}>
+						<MediaPlayer
+							title="dramaPlayer"
+							src={videoLink}
+							aspectRatio="16/9"
+							load="eager"
+							className={styles.VideoPlayer}
+							playsInline
+						>
+							<MediaProvider />
+							<PlyrLayout icons={plyrLayoutIcons} />
+						</MediaPlayer>
+						<p>{episode}</p>
+					</div>
+				)}
+			</div>
 		</div>
 	);
 }
diff --git a/src/app/kdrama/components/cacher.js b/src/app/kdrama/components/cacher.js
index b04c932..934fdd6 100644
--- a/src/app/kdrama/components/cacher.js
+++ b/src/app/kdrama/components/cacher.js
@@ -1,4 +1,5 @@
 // This function pre-fetches all the video links for a drama in the background
+"use server";
 
 export default async function PreFetchVideoLinks(data, dramaId) {
 	try {
diff --git a/src/app/kdrama/components/searchQuery.js b/src/app/kdrama/components/searchQuery.js
index 64e428b..cd02d43 100644
--- a/src/app/kdrama/components/searchQuery.js
+++ b/src/app/kdrama/components/searchQuery.js
@@ -1,3 +1,5 @@
+"use server";
+
 export default async function FetchSearchTitle(title) {
 	const res = await fetch(
 		`https://consumet-api-di2e.onrender.com/movies/dramacool/${title}`,
diff --git a/src/app/kdrama/loading.jsx b/src/app/kdrama/loading.jsx
new file mode 100644
index 0000000..2415575
--- /dev/null
+++ b/src/app/kdrama/loading.jsx
@@ -0,0 +1,9 @@
+import styles from "./styles/loading.module.css";
+
+export default async function Loading() {
+	return (
+		<div className={styles.Main}>
+			<div className={styles.LoadingContainer}></div>;
+		</div>
+	);
+}
diff --git a/src/app/kdrama/styles/info.module.css b/src/app/kdrama/styles/info.module.css
index 90a33b5..3ff021f 100644
--- a/src/app/kdrama/styles/info.module.css
+++ b/src/app/kdrama/styles/info.module.css
@@ -89,15 +89,18 @@
 
 .VideoContainer {
 	margin-top: 20px;
+}
+
+.Video {
 	display: flex;
-	align-items: center;
 	flex-direction: column;
+	align-items: center;
 }
 
-.VideoContainer p {
+.Video p {
 	color: white;
 	font-family: "Atkinson Hyperlegible";
-	color: var(--neon-green);
+	color: var(--pastel-red);
 }
 
 .VideoPlayer {
diff --git a/src/app/kdrama/styles/loading.module.css b/src/app/kdrama/styles/loading.module.css
new file mode 100644
index 0000000..2a24411
--- /dev/null
+++ b/src/app/kdrama/styles/loading.module.css
@@ -0,0 +1,22 @@
+.Main {
+	height: 100vh;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+
+
+.LoadingContainer {
+	width: 50px;
+	height: 50px;
+	border-radius: 50%;
+	border: 8px solid;
+	border-color: #F4F4F4 #0000;
+	animation: s1 1s infinite;
+}
+
+@keyframes s1 {
+	to {
+		transform: rotate(.5turn)
+	}
+}
\ No newline at end of file
diff --git a/src/app/page.module.css b/src/app/page.module.css
index 85f94db..1d3be60 100644
--- a/src/app/page.module.css
+++ b/src/app/page.module.css
@@ -13,15 +13,4 @@
 	font-family: "Quicksand";
 	font-size: 20px;
 	color: white;
-}
-
-.auth button {
-	padding: 5px;
-	margin: 5px;
-	font-family: "Atkinson Hyperlegible";
-	font-size: 16px;
-	border: none;
-	outline: none;
-	border-radius: 5px;
-	background-color: var(--neon-green);
 }
\ No newline at end of file