From bb50d08f5e0476fc302ca45aa2e377471d10b118 Mon Sep 17 00:00:00 2001
From: real-zephex <zephex-1@outlook.com>
Date: Sun, 17 Mar 2024 06:47:32 +0530
Subject: 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

---
 src/app/kdrama/page.js | 52 ++++++++++++++++++++++++++++----------------------
 1 file changed, 29 insertions(+), 23 deletions(-)

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

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>
-- 
cgit v1.2.3