diff options
Diffstat (limited to 'src/app/kdrama/page.js')
| -rw-r--r-- | src/app/kdrama/page.js | 164 |
1 files changed, 164 insertions, 0 deletions
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 |