added caching and video player

7 files changed, 148 insertions, 4 deletions

diff --git a/src/app/anime/[id]/[...animeId]/page.jsx b/src/app/anime/[id]/[...animeId]/page.jsx
index 60c05ee..950f618 100644
--- a/src/app/anime/[id]/[...animeId]/page.jsx
+++ b/src/app/anime/[id]/[...animeId]/page.jsx
@@ -32,8 +32,8 @@ export default async function Video({ params }) {
 		try {
 			link = data.sources[3].url;
 		} catch (error) {
-			redirect("/404");
 			console.log("Episode not found.");
+			redirect("/404");
 		}
 	}
 
@@ -47,7 +47,6 @@ export default async function Video({ params }) {
 					<MediaPlayer
 						title={words}
 						src={link}
-						playsInline
 						aspectRatio="16/9"
 						load="eager"
 						className={styles.VideoPlayer}
diff --git a/src/app/kdrama/[id]/buttons.jsx b/src/app/kdrama/[id]/buttons.jsx
new file mode 100644
index 0000000..8ec633f
--- /dev/null
+++ b/src/app/kdrama/[id]/buttons.jsx
@@ -0,0 +1,59 @@
+"use client";
+import styles from "../styles/info.module.css";
+import getVideoLink from "../components/videoLink";
+import React, { useState } from "react";
+import { MediaPlayer, MediaProvider } from "@vidstack/react";
+import "@vidstack/react/player/styles/base.css";
+import "@vidstack/react/player/styles/plyr/theme.css";
+import {
+	PlyrLayout,
+	plyrLayoutIcons,
+} from "@vidstack/react/player/layouts/plyr";
+
+export default function EpisodesButtons({ data: episodeData, id: dramaId }) {
+	const [videoLink, setVideoLink] = useState(null);
+	const [episode, setEpisode] = useState("");
+
+	async function test(a, b, episodeText) {
+		let link = await getVideoLink(a, b);
+		setVideoLink(link);
+		setEpisode(episodeText);
+	}
+
+	return (
+		<div>
+			<div className={styles.EpisodesContainer}>
+				<h2>Episodes</h2>
+				<div className={styles.EpisodeButtons}>
+					{episodeData &&
+						episodeData.map((item, index) => (
+							<button
+								key={index}
+								onClick={() =>
+									test(item.id, dramaId, item.title)
+								}
+							>
+								{item.title}
+							</button>
+						))}
+				</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>
+	);
+}
diff --git a/src/app/kdrama/[id]/page.jsx b/src/app/kdrama/[id]/page.jsx
index cd3af74..c891a0b 100644
--- a/src/app/kdrama/[id]/page.jsx
+++ b/src/app/kdrama/[id]/page.jsx
@@ -1,9 +1,14 @@
 import styles from "../styles/info.module.css";
 import Image from "next/image";
+import EpisodesButtons from "./buttons";
+import VideoLinkCacher from "../components/cacher";
+
 export default async function DramaInfo({ params }) {
 	const id = decodeURIComponent(params.id);
 	const info = await getDramaInfo(id);
 
+	await VideoLinkCacher(info.episodes, id);
+
 	return (
 		<div className={styles.Main}>
 			{info && (
@@ -19,6 +24,7 @@ export default async function DramaInfo({ params }) {
 						/>
 					</div>
 
+					{/* Drama description */}
 					<div className={styles.DramaDescription}>
 						<h2>Description</h2>
 						<p>{info.description}</p>
@@ -45,6 +51,9 @@ export default async function DramaInfo({ params }) {
 								</span>
 							))}
 					</div>
+
+					{/* Episodes Buttons */}
+					<EpisodesButtons data={info.episodes} id={id} />
 				</div>
 			)}
 		</div>
@@ -53,7 +62,8 @@ export default async function DramaInfo({ params }) {
 
 async function getDramaInfo(id) {
 	const res = await fetch(
-		`https://consumet-api-di2e.onrender.com/movies/dramacool/info?id=${id}`
+		`https://consumet-api-di2e.onrender.com/movies/dramacool/info?id=${id}`,
+		{ next: { revalidate: 86400 } }
 	);
 	const data = await res.json();
 	return data;
diff --git a/src/app/kdrama/components/cacher.js b/src/app/kdrama/components/cacher.js
new file mode 100644
index 0000000..3ef05be
--- /dev/null
+++ b/src/app/kdrama/components/cacher.js
@@ -0,0 +1,8 @@
+// This file pre fetches all the videolinks and next js automatically caches them!
+
+export default async function VideoLinkCacher(data, dramaId) {
+	data.forEach(async (element) => {
+		const link = `https://consumet-api-di2e.onrender.com/movies/dramacool/watch?episodeId=${element.id}&mediaId=${dramaId}`;
+		await fetch(link, { cache: "force-cache" });
+	});
+}
diff --git a/src/app/kdrama/components/videoLink.js b/src/app/kdrama/components/videoLink.js
new file mode 100644
index 0000000..fec016d
--- /dev/null
+++ b/src/app/kdrama/components/videoLink.js
@@ -0,0 +1,11 @@
+"use server";
+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}`,
+		{ cache: "force-cache" }
+	);
+	const data = await res.json();
+	videoLink = data.sources[0].url;
+	return videoLink;
+}
diff --git a/src/app/kdrama/styles/info.module.css b/src/app/kdrama/styles/info.module.css
index 5597cd2..cc4ebe8 100644
--- a/src/app/kdrama/styles/info.module.css
+++ b/src/app/kdrama/styles/info.module.css
@@ -52,4 +52,61 @@
 	border-radius: 5px;
 	font-family: "Atkinson Hyperlegible";
 	cursor: crosshair;
+}
+
+.EpisodesContainer {
+	margin-top: -10px;
+}
+
+.EpisodesContainer h2 {
+	color: gray;
+	font-family: "Poppins";
+}
+
+.EpisodeButtons {
+	margin: -10px 5px;
+}
+
+.EpisodeButtons button {
+	margin: 3px;
+	padding: 5px;
+	border: none;
+	outline: none;
+	font-family: "Atkinson Hyperlegible";
+	font-size: 16px;
+	border-radius: 5px;
+	background-color: #3d3d3d;
+	transition: background-color 0.2s linear;
+	color: white;
+	cursor: pointer;
+}
+
+.EpisodeButtons button:hover {
+	background-color: #1f1f1f;
+	transition: background-color 0.2s linear
+}
+
+.VideoContainer {
+	margin-top: 20px;
+	display: flex;
+	align-items: center;
+	flex-direction: column;
+}
+
+.VideoContainer p {
+	color: white;
+	font-family: "Atkinson Hyperlegible";
+	color: var(--neon-green);
+}
+
+.VideoPlayer {
+	width: 70%;
+	height: auto;
+	margin: 0px auto;
+}
+
+@media screen and (max-width: 768px) {
+	.VideoPlayer {
+		width: 100%;
+	}
 }
\ 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 cdda029..eafe792 100644
--- a/src/app/kdrama/styles/popular.module.css
+++ b/src/app/kdrama/styles/popular.module.css
@@ -32,12 +32,12 @@
 	align-items: center;
 	margin: 7px;
 	transition: transform 0.2s linear;
+	cursor: grab;
 }
 
 .AnimeEntry:hover {
 	transition: transform 0.2s linear;
 	transform: scale(0.97);
-	cursor: pointer;
 }
 
 .AnimeEntry img {