diff options
| author | real-zephex <[email protected]> | 2024-03-17 06:47:32 +0530 |
|---|---|---|
| committer | real-zephex <[email protected]> | 2024-03-17 06:47:32 +0530 |
| commit | bb50d08f5e0476fc302ca45aa2e377471d10b118 (patch) | |
| tree | eeb9de9580c6812166bf754fd9abaef3f1695763 /src/app/kdrama/page.js | |
| parent | minor fixes: tried to make the video player responsive but failed (diff) | |
| download | dramalama-bb50d08f5e0476fc302ca45aa2e377471d10b118.tar.xz dramalama-bb50d08f5e0476fc302ca45aa2e377471d10b118.zip | |
minor fixes and feature improvements: added an indicator which shows when the animes are being loaded and also indicates when no anime with given title is found
Diffstat (limited to 'src/app/kdrama/page.js')
| -rw-r--r-- | src/app/kdrama/page.js | 52 |
1 files changed, 29 insertions, 23 deletions
diff --git a/src/app/kdrama/page.js b/src/app/kdrama/page.js index fdd42c7..3877453 100644 --- a/src/app/kdrama/page.js +++ b/src/app/kdrama/page.js @@ -5,6 +5,7 @@ import "./kdrama.css" import { useState } from "react"; import ReactPlayer from "react-player"; import Image from 'next/image'; +import { FaSearch } from 'react-icons/fa'; // Import the search icon from react-icons library import { fetchAnimeInfo, @@ -48,8 +49,8 @@ export default function Kdrama() { return ( <main className="main"> - <div className="navbar"> - <p>Dramaverse</p> + <div className="sC"> + <FaSearch className='searchIcon' /> <input placeholder="Enter drama title" onChange={(event) => setSearchTitle(event.target.value)} @@ -68,6 +69,32 @@ export default function Kdrama() { <div className="videoContainer" id="videoContainer"> <div className="dramaInfoContainer"> + + {videoLink && ( + <div className="videoPlayer"> + <ReactPlayer + url={videoLink} + controls + playsinline + width={"100%"} + height={"auto"} + id="thing" + /> + </div> + )} + {episodeNo && ( + <p + style={{ + color: "white", + fontFamily: "Atkinson Hyperlegible", + color: "#FF6868", + textAlign: "center", + }} + > + Episode {episodeNo} + </p> + )} + {details && ( <div className="dramaInfo"> <div className="titleContainer"> @@ -102,27 +129,6 @@ export default function Kdrama() { </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> |