From 8c7f9fd113611df8c2f308b7120c0a8ae4cae706 Mon Sep 17 00:00:00 2001
From: real-zephex <zephex-1@outlook.com>
Date: Thu, 14 Mar 2024 16:16:36 +0530
Subject: First commit: Rewriting dramalama in next.js

---
 src/app/kdrama/page.js | 164 +++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 164 insertions(+)
 create mode 100644 src/app/kdrama/page.js

(limited to 'src/app/kdrama/page.js')

diff --git a/src/app/kdrama/page.js b/src/app/kdrama/page.js
new file mode 100644
index 0000000..3f0eee6
--- /dev/null
+++ b/src/app/kdrama/page.js
@@ -0,0 +1,164 @@
+"use client"
+
+import "./kdrama.css"
+
+import { useState } from "react";
+import ReactPlayer from "react-player";
+import Image from 'next/image';
+
+import {
+	fetchAnimeInfo,
+	fetchDramaInfo,
+	fetchVideoLinks,
+} from "./api/fetchAnime.js";
+
+export default function Kdrama() {
+
+	const [searchTitle, setSearchTitle] = useState("");
+	const [searchedDrama, setSearchedDrama] = useState(null);
+	async function handleKeyPresses(event) {
+		if (
+			(event.code === "Enter" ||
+				event.code === 13 ||
+				event.key === "Enter") &&
+			searchTitle != ""
+		) {
+			const info = await fetchAnimeInfo(searchTitle);
+			setSearchedDrama(info);
+			document.getElementById("popup").style.display = "flex";
+		}
+	}
+
+	const [details, setDetails] = useState(null);
+	async function handleDramaSearch(input) {
+		const drama_info = await fetchDramaInfo(input);
+		setDetails(drama_info);
+		document.getElementById("intro").style.display = "none";
+		document.getElementById("videoContainer").style.display = "flex";
+	}
+
+	const [videoLink, setVideoLink] = useState(null);
+	const [episodeNo, setEpisodeNo] = useState("");
+	async function get_video_link(ep_id, drama_id, episode) {
+		const link = await fetchVideoLinks(drama_id, ep_id);
+		const video_link = link.sources[0].url;
+		setVideoLink(video_link);
+		setEpisodeNo(episode);
+	}
+
+	return (
+		<main className="main">
+			<div className="navbar">
+				<p>Dramaverse</p>
+				<input
+					placeholder="Enter drama title"
+					onChange={(event) => setSearchTitle(event.target.value)}
+					onKeyDown={(event) => handleKeyPresses(event)}
+				/>
+			</div>
+
+			<div className="intro" id="intro">
+				<p className="introText">
+					Start by searching for some dramas
+				</p>
+				<h7 className="introText2">
+					Look for the search box above.
+				</h7>
+			</div>
+
+			<div className="videoContainer" id="videoContainer">
+				<div className="dramaInfoContainer">
+					{details && (
+						<div className="dramaInfo">
+							<div className="titleContainer">
+								<p className="dramaTitle">
+									{details.title}
+								</p>
+								<Image
+									className="dramaImage"
+									src={details.image}
+									width={"160"}
+									height={"240"}
+									alt="Drama"
+								/>
+							</div>
+							<p className="dramaDescription">
+								{details.description}
+							</p>
+							<div className="episodesButtonsContainer">
+								{details.episodes.map((eps, index) => (
+									<button
+										key={index}
+										className="episodeButton"
+										onClick={() =>
+											get_video_link(
+												eps.id,
+												details.id,
+												eps.episode
+											)
+										}
+									>
+										{eps.episode}
+									</button>
+								))}
+							</div>
+							<p
+								style={{
+									color: "white",
+									fontFamily: "Atkinson Hyperlegible",
+									color: "#FF6868",
+								}}
+							>
+								Playing episode {episodeNo}
+							</p>
+							{videoLink && (
+								<div className="videoPlayer">
+									<ReactPlayer
+										url={videoLink}
+										autoPlay
+										controls
+										width={"90%"}
+										height={"auto"}
+										id="thing"
+									/>
+								</div>
+							)}
+						</div>
+					)}
+				</div>
+			</div>
+
+			<div className="popup" id="popup">
+				<div className="popupEntries">
+					{searchedDrama &&
+						searchedDrama.results.map((item, index) => (
+							<div
+								className="popupEntry"
+								key={index}
+								onClick={() => handleDramaSearch(item.id)}
+							>
+								<p>{item.title}</p>
+								<Image
+									src={item.image}
+									alt={item.title}
+									width={"200"}
+									height={"180"}
+								/>
+							</div>
+						))}
+				</div>
+
+				<div
+					className="closeButton"
+					onClick={() =>
+						(document.getElementById("popup").style.display =
+							"none")
+					}
+				>
+					<button>Close</button>
+				</div>
+			</div>
+		</main>
+
+	)
+}
\ No newline at end of file
-- 
cgit v1.2.3