3 files changed, 43 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/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/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