aboutsummaryrefslogtreecommitdiff
path: root/src/app/kdrama
diff options
context:
space:
mode:
Diffstat (limited to 'src/app/kdrama')
-rw-r--r--src/app/kdrama/api/fetchAnime.js15
-rw-r--r--src/app/kdrama/kdrama.css224
-rw-r--r--src/app/kdrama/page.js164
3 files changed, 403 insertions, 0 deletions
diff --git a/src/app/kdrama/api/fetchAnime.js b/src/app/kdrama/api/fetchAnime.js
new file mode 100644
index 0000000..903ca18
--- /dev/null
+++ b/src/app/kdrama/api/fetchAnime.js
@@ -0,0 +1,15 @@
+export async function fetchAnimeInfo(title) {
+ const res = await fetch("https://dramalama-api.vercel.app/movies/dramacool/" + title)
+ const data = await res.json();
+ return data;
+}
+
+export async function fetchDramaInfo(id) {
+ const res = (await fetch(`https://dramalama-api.vercel.app/movies/dramacool/info?id=${id}`)).json()
+ return res;
+}
+
+export async function fetchVideoLinks(drama_id, episode_id) {
+ const res = (await (fetch(`https://dramalama-api.vercel.app/movies/dramacool/watch?episodeId=${episode_id}&mediaId=${drama_id}`))).json()
+ return res;
+} \ No newline at end of file
diff --git a/src/app/kdrama/kdrama.css b/src/app/kdrama/kdrama.css
new file mode 100644
index 0000000..4e0754c
--- /dev/null
+++ b/src/app/kdrama/kdrama.css
@@ -0,0 +1,224 @@
+
+.navbar {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ margin: 0px auto;
+}
+
+.navbar p {
+ font-family: "Kanit";
+ font-size: 36px;
+ color: var(--soft-purple);
+}
+
+.navbar input {
+ padding: 5px;
+ border-radius: 5px;
+ border: none;
+ outline: none;
+ width: 200px;
+ margin-top: 5px;
+ box-shadow: 0 4px 8px #0003, 0 6px 20px #00000030;
+ background-color: #9eacc4;
+ color: #fff;
+ font-family: "Atkinson Hyperlegible";
+}
+
+.intro {
+ display: flex;
+ color: white;
+ justify-content: center;
+ align-items: center;
+ height: 60vh;
+ width: 100%;
+ margin: 0px auto;
+ flex-direction: column;
+}
+
+.introText {
+ font-size: 22px;
+ font-family: "Quicksand";
+ color: var(--softer-purple)
+}
+
+.introText2 {
+ font-family: "Quicksand";
+ color: black;
+}
+
+.popup {
+ z-index: 1;
+ display: none;
+ position: fixed;
+ top: 0;
+ align-items: center;
+ height: 100%;
+ justify-content: center;
+ width: 100%;
+ background-color: #141414e8;
+}
+
+.popupEntries::-webkit-scrollbar {
+ width: 5px;
+ height: 5px;
+}
+
+.popupEntries {
+ border-radius: 5px;
+ display: flex;
+ flex-direction: column;
+ height: 60%;
+ overflow-y: auto;
+}
+
+.popupEntry {
+ background: #272727b4;
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+ border-style: groove;
+ align-items: center;
+ border-radius: 10px;
+ width: 800px;
+ margin: 5px auto;
+ padding: 3px;
+ border-color: var(--soft-purple);
+}
+
+.popupEntry img {
+ width: 120px;
+ padding: 5px;
+ border-radius: 10px;
+
+}
+
+.popupEntry p {
+ color: var(--neon-green);
+ font-size: 20px;
+ margin-left: 10px;
+}
+
+.closeButton {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ margin: 10px
+}
+
+.closeButton button {
+ padding: 12px;
+ background-color: var(--pastel-red);
+ font-family: "Quicksand";
+ font-size: 18px;
+ border-radius: 5px;
+ border: none;
+}
+
+.videoContainer {
+ display: none;
+ max-width: 50%;
+ margin: 10px auto;
+ justify-content: center;
+ border-style: dotted;
+ border-color: rgba(97, 97, 97, 0.575);
+ border-radius: 20px;
+ border-width: 4px;
+ padding: 10px;
+ text-align: center
+}
+
+.titleContainer {
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+ width: 900px;
+ align-items: center;
+ margin: 0px auto;
+}
+
+.dramaTitle {
+ color: var(--neon-green);
+ font-family: "Kanit";
+ font-size: 30px;
+}
+
+.dramaImage {
+ width: 160px;
+ border-radius: 10px;
+}
+
+.dramaDescription {
+ color: var(--softer-purple);
+ font-family: "Atkinson Hyperlegible";
+}
+
+.episodesButtonsContainer {
+ max-width: 70%;
+ margin: 0px auto;
+ max-height: 200px;
+ overflow-y: auto;
+}
+
+.episodeButton {
+ background-color: var(--light-green);
+ border: none;
+ border-radius: 5px;
+ padding: 8px;
+ margin: 5px;
+ width: 50px;
+ font-family: "Atkinson Hyperlegible";
+ font-size: 16px;
+ cursor: pointer;
+}
+
+.episodeButton:hover {
+ background-color: var(--soft-purple);
+}
+
+.videoPlayer {
+ display: flex;
+ justify-content: center;
+}
+
+.videoPlayer video {
+ border-radius: 5px;
+}
+
+@media screen and (max-width: 1440px) {
+ .videoContainer {
+ max-width: 70%;
+ }
+
+}
+
+@media screen and (max-width: 1024px) {
+ .videoContainer {
+ max-width: 90%;
+ }
+}
+
+@media screen and (max-width: 768px) {
+ .videoContainer {
+ max-width: 95%;
+ }
+
+ .titleContainer {
+ width: 100%;
+ }
+
+ .popupEntry {
+ width: 90%;
+ }
+}
+
+@media (prefers-color-scheme: dark) {
+ .navbar input {
+ background-color: #2f333ab7;
+ }
+
+ .introText2 {
+ color: white
+ }
+} \ No newline at end of file
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
generated by cgit v1.2.3 (git 2.25.1) at 2026-05-30 00:24:18 +0000