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

7 files changed, 154 insertions, 81 deletions

diff --git a/package-lock.json b/package-lock.json
index 99e3bd6..6d2071a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,8 @@
       "name": "dramalama-next",
       "version": "0.1.0",
       "dependencies": {
+        "@vidstack/react": "^1.10.9",
+        "hls.js": "^1.5.7",
         "next": "14.1.3",
         "react": "^18",
         "react-dom": "^18",
@@ -410,14 +412,12 @@
     "node_modules/@types/prop-types": {
       "version": "15.7.11",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.11.tgz",
-      "integrity": "sha512-ga8y9v9uyeiLdpKddhxYQkxNDrfvuPrlFb0N1qnZZByvcElJaXthF1UhvCh9TLWJBEHeNtdnbysW7Y6Uq8CVng==",
-      "dev": true
+      "integrity": "sha512-ga8y9v9uyeiLdpKddhxYQkxNDrfvuPrlFb0N1qnZZByvcElJaXthF1UhvCh9TLWJBEHeNtdnbysW7Y6Uq8CVng=="
     },
     "node_modules/@types/react": {
       "version": "18.2.66",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.66.tgz",
       "integrity": "sha512-OYTmMI4UigXeFMF/j4uv0lBBEbongSgptPrHBxqME44h9+yNov+oL6Z3ocJKo0WyXR84sQUNeyIp9MRfckvZpg==",
-      "dev": true,
       "dependencies": {
         "@types/prop-types": "*",
         "@types/scheduler": "*",
@@ -427,8 +427,7 @@
     "node_modules/@types/scheduler": {
       "version": "0.16.8",
       "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.8.tgz",
-      "integrity": "sha512-WZLiwShhwLRmeV6zH+GkbOFT6Z6VklCItrDioxUnv+u4Ll+8vKeFySoFyK/0ctcRpOmwAicELfmys1sDc/Rw+A==",
-      "dev": true
+      "integrity": "sha512-WZLiwShhwLRmeV6zH+GkbOFT6Z6VklCItrDioxUnv+u4Ll+8vKeFySoFyK/0ctcRpOmwAicELfmys1sDc/Rw+A=="
     },
     "node_modules/@typescript-eslint/parser": {
       "version": "6.21.0",
@@ -563,6 +562,21 @@
       "integrity": "sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==",
       "dev": true
     },
+    "node_modules/@vidstack/react": {
+      "version": "1.10.9",
+      "resolved": "https://registry.npmjs.org/@vidstack/react/-/react-1.10.9.tgz",
+      "integrity": "sha512-xMRhk8T2V/ULmDylYm2+a6F6zDAjXG2lHIUL/oRbERXDV/Ou+ZE+QDxcBFu2aIQ2rQriCyhh3pNpST8f9ePWVw==",
+      "dependencies": {
+        "media-captions": "^1.0.1"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "@types/react": "^18.0.0",
+        "react": "^18.0.0"
+      }
+    },
     "node_modules/acorn": {
       "version": "8.11.3",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.11.3.tgz",
@@ -1019,8 +1033,7 @@
     "node_modules/csstype": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
-      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
-      "dev": true
+      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
     },
     "node_modules/damerau-levenshtein": {
       "version": "1.0.8",
@@ -2165,6 +2178,11 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/hls.js": {
+      "version": "1.5.7",
+      "resolved": "https://registry.npmjs.org/hls.js/-/hls.js-1.5.7.tgz",
+      "integrity": "sha512-Hnyf7ojTBtXHeOW1/t6wCBJSiK1WpoKF9yg7juxldDx8u3iswrkPt2wbOA/1NiwU4j27DSIVoIEJRAhcdMef/A=="
+    },
     "node_modules/ignore": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.1.tgz",
@@ -2760,6 +2778,14 @@
         "node": "14 || >=16.14"
       }
     },
+    "node_modules/media-captions": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/media-captions/-/media-captions-1.0.3.tgz",
+      "integrity": "sha512-y2Qi5rqjwgH97zoko1vzu5Q6nnS0KzEQSvd4NOjnFym9JqnFb5VSsUg21RNb5cQ/nhCFJ0wz/XK+2uMwFCr6TQ==",
+      "engines": {
+        "node": ">=16"
+      }
+    },
     "node_modules/memoize-one": {
       "version": "5.2.1",
       "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.2.1.tgz",
diff --git a/package.json b/package.json
index 32c9f29..fa51c11 100644
--- a/package.json
+++ b/package.json
@@ -9,6 +9,8 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@vidstack/react": "^1.10.9",
+    "hls.js": "^1.5.7",
     "next": "14.1.3",
     "react": "^18",
     "react-dom": "^18",
diff --git a/src/app/kdrama/kdrama.css b/src/app/kdrama/kdrama.css
index 014083e..7a82bea 100644
--- a/src/app/kdrama/kdrama.css
+++ b/src/app/kdrama/kdrama.css
@@ -1,31 +1,31 @@
-
-.navbar {
+.sC {
 	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);
+	margin: 30px auto;
+	background-color: #2c2c2c;
+	padding: 8px;
+	border-radius: 5px;
+	width: 20%;
 }
 
-.navbar input {
-	padding: 5px;
-	border-radius: 5px;
+.sC input {
 	border: none;
+	border-radius: 5px;
+	color: white;
 	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";
+	background: none;
+	width: 100%;
+	font-family: "Lato";
+	font-size: 16px;
 }
 
+
+.searchIcon {
+	color: white;
+	margin-right: 5px;
+}
+
+
 .intro {
 	display: flex;
 	color: white;
@@ -57,13 +57,9 @@
 	height: 100%;
 	justify-content: center;
 	width: 100%;
-	background-color: #141414e8;
+	background-color: #141414ad;
 }
 
-.popupEntries::-webkit-scrollbar {
-	width: 5px;
-	height: 5px;
-}
 
 .popupEntries {
 	border-radius: 5px;
@@ -73,20 +69,27 @@
 	overflow-y: auto;
 }
 
+.popupEntries::-webkit-scrollbar {
+	width: 5px;
+	height: 5px;
+}
+
 .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);
+	cursor: pointer;
 }
 
+
+
 .popupEntry img {
 	width: 120px;
 	height: "auto";
@@ -96,7 +99,7 @@
 }
 
 .popupEntry p {
-	color: var(--neon-green);
+	color: #8CABFF;
 	font-size: 20px;
 	margin-left: 10px;
 }
@@ -105,7 +108,7 @@
 	position: absolute;
 	bottom: 0;
 	left: 0;
-	margin: 10px
+	margin: 10px;
 }
 
 .closeButton button {
@@ -115,6 +118,7 @@
 	font-size: 18px;
 	border-radius: 5px;
 	border: none;
+	cursor: pointer;
 }
 
 .videoContainer {
@@ -127,14 +131,13 @@
 	border-radius: 20px;
 	border-width: 4px;
 	padding: 10px;
-	text-align: center
+	/* text-align: center */
 }
 
 .titleContainer {
 	display: flex;
 	flex-direction: row;
 	justify-content: space-between;
-	width: 900px;
 	align-items: center;
 	margin: 0px auto;
 }
@@ -153,13 +156,15 @@
 .dramaDescription {
 	color: var(--softer-purple);
 	font-family: "Atkinson Hyperlegible";
+	text-align: center;
 }
 
 .episodesButtonsContainer {
-	max-width: 70%;
+	max-width: 80%;
 	margin: 0px auto;
 	max-height: 200px;
 	overflow-y: auto;
+	text-align: center;
 }
 
 .episodeButton {
@@ -178,13 +183,19 @@
 	background-color: var(--soft-purple);
 }
 
+.episodeButton:focus {
+	background-color: var(--pastel-red);
+	transition: padding 0.2s ease;
+	padding: 5px;
+}
+
 .videoPlayer {
 	display: flex;
 	justify-content: center;
 }
 
 .videoPlayer video {
-	border-radius: 5px;
+	border-radius: 10px;
 }
 
 @media screen and (max-width: 1440px) {
@@ -212,6 +223,10 @@
 	.popupEntry {
 		width: 90%;
 	}
+
+	.sC {
+		width: 70%;
+	}
 } 
 
 @media (prefers-color-scheme: dark) {
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>
diff --git a/src/app/recent/recent.css b/src/app/recent/recent.css
index 3fc5e26..aaca306 100644
--- a/src/app/recent/recent.css
+++ b/src/app/recent/recent.css
@@ -5,11 +5,10 @@
 }
 
 .trendingText {
-	color: white;
+	color: #FEFFAC;
 	font-family: "Open Sans";
-	font-size: 30px;
+	font-size: 26px;
 	margin: 10px;
-	/* margin-bottom: 10px; */
 }
 
 .trending {
@@ -38,8 +37,8 @@
 
 .trendingEntries img {
 	border-radius: 10px;
-	width: 160px;
-	height: 220px;
+	width: 150px;
+	height: 210px;
 }
 
 .trendingEntries p {
@@ -49,7 +48,7 @@
 	overflow-y: auto;
 	font-family: "Lato";
 	margin: 10px auto;
-	font-size: 18px;
+	font-size: 16px;
 }
 
 .trendingEntries p::-webkit-scrollbar{
diff --git a/src/app/search/page.js b/src/app/search/page.js
index c64030c..f384d85 100644
--- a/src/app/search/page.js
+++ b/src/app/search/page.js
@@ -9,6 +9,7 @@ import Link from 'next/link';
 export default function Input() {
 
 	const [searchedAnime, setSearchedAnime] = useState(null)
+	const [loading, setLoading] = useState(null)
 
 	const handleKeyPress = (event) => {
 		if (
@@ -31,11 +32,12 @@ export default function Input() {
 	const [search1, setSearch] = useState(null);
 	const fetch_animes = (title) => {
 		fetch("https://dramalama-api.vercel.app/anime/gogoanime/" + title)
+			.then(setLoading(true))
 			.then(res => res.json())
 			.then(
 				data => {
 					setSearch(data)
-					console.log(search1)
+					setLoading(false)
 				}
 			)
 	}
@@ -54,21 +56,37 @@ export default function Input() {
 				</div>
 			</div>
 
+
+			{loading && (
+				<p style={{color: "white", textAlign: "center"}}>
+					Please wait while we crunch all the data for you. 
+				</p>
+			)}
 			<div className='animeEntry'>
-				{search1 && search1.results.map((item, index) => (
-					<Link key={index} href={`/info/${item.id}`} style={{textDecoration: "none"}}>
-						<div className='anime'>
-							<p>{item.title}</p>
-							<Image 
-								src={item.image}
-								className='animeImage'
-								width={120}
-								height={160}
-							/>
+				{search1 ? (
+					search1.results && search1.results.length > 0 ? (
+						search1.results.map((item, index) => (
+							<Link key={index} href={`/info/${item.id}`} style={{textDecoration: "none"}}>
+								<div className='anime'>
+									<p>{item.title}</p>
+									<Image 
+										src={item.image}
+										className='animeImage'
+										width={120}
+										height={160}
+										alt='Drama Poster'
+									/>
+								</div>
+							</Link>
+						))
+					) : (
+						<div style={{margin: "0px auto"}}>
+							<p style={{color: "white"}}>No results found</p>
 						</div>
-					</Link>
-				))}
+					)
+				) : null}
 			</div>
+
 		</div>
 
 	)
diff --git a/src/app/video/video.css b/src/app/video/video.css
index a75054b..c739968 100644
--- a/src/app/video/video.css
+++ b/src/app/video/video.css
@@ -3,6 +3,7 @@
 	flex-direction: column;
 	align-items: center;
 	margin: 0px auto;
+	width: 50%;
 }
 
 .video2 video {
@@ -21,3 +22,9 @@
 		color: black;
 	}
 }
+
+@media screen and (max-width: 768px) {
+	.video2 {
+		width: 100%;
+	}
+}