From 5a75c4551b3f6cc28aa7e9bef2dc56a36a8a494b Mon Sep 17 00:00:00 2001
From: real-zephex <zephex-1@outlook.com>
Date: Mon, 13 May 2024 21:23:36 +0530
Subject: added loading.jsx file and it's css subpart

---
 src/app/anime/[id]/page.jsx                | 18 ++++++++++++------
 src/app/anime/components/search.jsx        |  9 +++++++++
 src/app/anime/loading.jsx                  | 11 +++++++++++
 src/app/anime/styles/loading.module.css    | 12 ++++++++++++
 src/app/anime/styles/search.module.css     |  6 ++++++
 src/app/movies/components/video_player.jsx |  2 +-
 src/app/movies/styles/info.module.css      |  9 +++++++++
 7 files changed, 60 insertions(+), 7 deletions(-)
 create mode 100644 src/app/anime/loading.jsx
 create mode 100644 src/app/anime/styles/loading.module.css

(limited to 'src')

diff --git a/src/app/anime/[id]/page.jsx b/src/app/anime/[id]/page.jsx
index f107313..7715dc6 100644
--- a/src/app/anime/[id]/page.jsx
+++ b/src/app/anime/[id]/page.jsx
@@ -28,11 +28,15 @@ const AnimeInfoHomepage = async ({ params }) => {
 							/>
 							<div>
 								<p className={styles.animeTitle}>
-									{data.title}
+									<strong
+										style={{ color: "var(--neon-green)" }}
+									>
+										{data.title || "Not Found"}
+									</strong>
 								</p>
 								<p className={styles.animeDescription}>
 									<strong>Description: </strong>
-									{data.description}
+									{data.description || "Not Found"}
 								</p>
 								<hr style={{ borderColor: "gray" }} />
 								<span>
@@ -51,17 +55,19 @@ const AnimeInfoHomepage = async ({ params }) => {
 								</span>
 								<p>
 									<strong>Episodes:</strong>{" "}
-									{data.totalEpisodes}
+									{data.totalEpisodes || "Not Found"}
 								</p>
 								<p>
 									<strong>Release year:</strong>{" "}
-									{data.releaseDate}
+									{data.releaseDate || "Not Found"}
 								</p>
 								<p>
-									<strong>Status:</strong> {data.status}
+									<strong>Status:</strong>{" "}
+									{data.status || "Not Found"}
 								</p>
 								<p>
-									<strong>Type:</strong> {data.type}
+									<strong>Type:</strong>{" "}
+									{data.type || "Not Found"}
 								</p>
 							</div>
 						</div>
diff --git a/src/app/anime/components/search.jsx b/src/app/anime/components/search.jsx
index b8b4b53..66c491a 100644
--- a/src/app/anime/components/search.jsx
+++ b/src/app/anime/components/search.jsx
@@ -10,9 +10,13 @@ import SearchResults from "./search_results";
 const SearcBar = () => {
 	const [title, setTitle] = useState("");
 	const [searchResults, setSearchResults] = useState(null);
+	const [loading, setLoading] = useState(false);
 
 	const handleSearchInput = async (title) => {
+		setSearchResults(null);
+		setLoading(true);
 		setSearchResults(await SearchResults(title));
+		setLoading(false);
 	};
 
 	return (
@@ -47,6 +51,11 @@ const SearcBar = () => {
 					</button>
 				</Link>
 			</section>
+			{loading && (
+				<p className={styles.SearchLoading}>
+					Please wait while we crunch up all the data.....
+				</p>
+			)}
 			{searchResults}
 		</main>
 	);
diff --git a/src/app/anime/loading.jsx b/src/app/anime/loading.jsx
new file mode 100644
index 0000000..00ce39c
--- /dev/null
+++ b/src/app/anime/loading.jsx
@@ -0,0 +1,11 @@
+import styles from "./styles/loading.module.css";
+
+const Loading = async () => {
+	return (
+		<main className={styles.LoadingContainer}>
+			<strong>Loading...</strong>
+		</main>
+	);
+};
+
+export default Loading;
diff --git a/src/app/anime/styles/loading.module.css b/src/app/anime/styles/loading.module.css
new file mode 100644
index 0000000..f0d0606
--- /dev/null
+++ b/src/app/anime/styles/loading.module.css
@@ -0,0 +1,12 @@
+.LoadingContainer {
+	height: 100vh;
+	width: 100vw;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.LoadingContainer strong {
+	color: white;
+	font-size: 20px;
+}
\ No newline at end of file
diff --git a/src/app/anime/styles/search.module.css b/src/app/anime/styles/search.module.css
index b7e35ab..25fa4d4 100644
--- a/src/app/anime/styles/search.module.css
+++ b/src/app/anime/styles/search.module.css
@@ -37,6 +37,11 @@
 	width: 100%;
 }
 
+.SearchLoading {
+	color: white;
+	text-align: center;
+}
+
 /* Search Results */
 
 .SearchResultsContainer {
@@ -60,6 +65,7 @@
 
 .AnimeEntry img {
 	border-radius: 0.5rem;
+	margin-left: 0.2rem;
 }
 
 .SearchResultsContainer::-webkit-scrollbar {
diff --git a/src/app/movies/components/video_player.jsx b/src/app/movies/components/video_player.jsx
index 86ff8e5..86b6748 100644
--- a/src/app/movies/components/video_player.jsx
+++ b/src/app/movies/components/video_player.jsx
@@ -7,7 +7,7 @@ export default function VIDEO_PLAYER({ id: id }) {
 	const [frame, setFrame] = useState(null);
 
 	useEffect(() => {
-		make_player(`https://vidsrc.pro/embed/movie/${id}`);
+		make_player(`https://vidsrc.icu/embed/movie/${id}`);
 	}, []);
 
 	function make_player(url) {
diff --git a/src/app/movies/styles/info.module.css b/src/app/movies/styles/info.module.css
index a0da8d9..b848f7f 100644
--- a/src/app/movies/styles/info.module.css
+++ b/src/app/movies/styles/info.module.css
@@ -53,6 +53,15 @@
 	overflow: auto;
 }
 
+.MovieDescription::-webkit-scrollbar {
+	width: 5px;
+}
+
+.MovieDescription::-webkit-scrollbar-thumb {
+	background-color: var(--nord-yellow);
+	border-radius: 1rem;
+}
+
 .OtherInfo {
 	display: flex;
 	flex-direction: column;
-- 
cgit v1.2.3