some minor fixes

6 files changed, 123 insertions, 15 deletions

diff --git a/src/app/anime/[id]/page.jsx b/src/app/anime/[id]/page.jsx
index edd100a..f107313 100644
--- a/src/app/anime/[id]/page.jsx
+++ b/src/app/anime/[id]/page.jsx
@@ -24,6 +24,7 @@ const AnimeInfoHomepage = async ({ params }) => {
 								width={200}

 								height={300}

 								alt="Anime Poster"

+								priority

 							/>

 							<div>

 								<p className={styles.animeTitle}>

diff --git a/src/app/anime/components/episode_buttons.jsx b/src/app/anime/components/episode_buttons.jsx
index 30a8086..013dee1 100644
--- a/src/app/anime/components/episode_buttons.jsx
+++ b/src/app/anime/components/episode_buttons.jsx
@@ -11,6 +11,7 @@ import {
 import styles from "../styles/buttons.module.css";
 import { video_url } from "../data-fetch/request";
 import { preFetchVideoLinks } from "./cacher";
+import { storeLocal } from "./storeHistory";
 
 const EpisodesButtons = ({ data: data }) => {
 	const [videoLink, setVideoLink] = useState(null);
@@ -23,6 +24,11 @@ const EpisodesButtons = ({ data: data }) => {
 
 	const groups = createGroups(data.episodes, 50);
 
+	/**
+	 * Retrieves the video URL for a given episode ID.
+	 * This function handles the initializing, changing URL, and hiding the video player.
+	 * @param {string} epID - The episode ID.
+	 */
 	async function getVideoURL(epID) {
 		setVideoLoading(true);
 		const data = await video_url(epID);
@@ -30,9 +36,14 @@ const EpisodesButtons = ({ data: data }) => {
 		setVideoLoading(false);
 	}
 
+	/**
+	 * Creates button groups for a range of episodes.
+	 * @param {number} start - The starting index of episodes.
+	 * @param {number} end - The ending index of episodes.
+	 * @returns {JSX.Element} - Button groups JSX element.
+	 */
 	function createButtonGroups(start, end) {
 		try {
-			// Reset background color of all buttons with the class "episode-button"
 			const buttons = document.getElementsByClassName("episode-button");
 			for (let i = 0; i < buttons.length; i++) {
 				buttons[i].style.backgroundColor = "#1f1f1fd2";
@@ -49,18 +60,18 @@ const EpisodesButtons = ({ data: data }) => {
 				{data.episodes &&
 					data.episodes.slice(start, end).map((item, index) => (
 						<button
-							className={styles.dramaButton + " episode-button"} // Add the class "episode-button"
+							className={styles.dramaButton + " episode-button"}
 							key={index}
 							onClick={(event) => {
 								event.target.style.backgroundColor =
 									"var(--soft-purple)";
 								getVideoURL(item.id);
-								// store_to_local(
-								// 	info.title,
-								// 	info.image,
-								// 	item.number,
-								// 	info.id
-								// );
+								store_to_local(
+									data.title,
+									data.image,
+									item.number,
+									data.id
+								);
 							}}
 						>
 							{item.number}
@@ -70,6 +81,10 @@ const EpisodesButtons = ({ data: data }) => {
 		);
 	}
 
+	/**
+	 * Handles the change event of the select element.
+	 * @param {Event} event - The change event object.
+	 */
 	function handleSelectChange(event) {
 		const selectedIndex = event.target.selectedIndex;
 		const selectedGroup = groups[selectedIndex];
@@ -140,6 +155,12 @@ const EpisodesButtons = ({ data: data }) => {
 	);
 };
 
+/**
+ * Divides an array into groups of a specified size.
+ * @param {Array} array - The array to be divided.
+ * @param {number} size - The size of each group.
+ * @returns {Array} - An array containing groups of elements.
+ */
 function createGroups(array, size) {
 	const groups = [];
 	for (let i = 0; i < array.length; i += size) {
@@ -148,4 +169,37 @@ function createGroups(array, size) {
 	return groups;
 }
 
-export default EpisodesButtons;
+/**
+ * Stores watch history to local storage.
+ * @param {string} name - The name of the episode.
+ * @param {string} image - The image URL of the episode.
+ * @param {number} episode - The episode number.
+ * @param {string} id - The ID of the episode.
+ */
+function store_to_local(name, image, episode, id) {
+	const currentDate = new Date();
+
+	try {
+		let newData = {
+			name: name,
+			image: image,
+			episode: episode,
+			id: id,
+			type: "anime",
+			date: `${currentDate.getDate()}-${String(
+				currentDate.getMonth() + 1
+			).padStart(2, "0")}`,
+			time: `${currentDate.getHours()}:${String(
+				currentDate.getMinutes()
+			).padStart(2, "0")}`,
+		};
+		storeLocal(newData);
+	} catch (error) {
+		console.error(
+			"Some error occurred during the process of saving your watch history to local storage. Please try again or contact us on GitHub if this issue persists.",
+			error.message
+		);
+	}
+}
+
+export default EpisodesButtons;
\ No newline at end of file
diff --git a/src/app/anime/components/search.jsx b/src/app/anime/components/search.jsx
index 7bb22ba..f916217 100644
--- a/src/app/anime/components/search.jsx
+++ b/src/app/anime/components/search.jsx
@@ -2,6 +2,7 @@
 
 import { FaSearch } from "react-icons/fa";
 import { useState } from "react";
+import Link from "next/link";
 
 import styles from "../styles/search.module.css";
 import SearchResults from "./search_results";
@@ -40,6 +41,11 @@ const SearcBar = () => {
 						}}
 					></input>
 				</div>
+				<Link shallow href={"/"}>
+					<button className={styles.animeHistoryButton}>
+						History
+					</button>
+				</Link>
 			</section>
 			{searchResults}
 		</main>
diff --git a/src/app/anime/styles/info.module.css b/src/app/anime/styles/info.module.css
index 4e65bdd..4216b37 100644
--- a/src/app/anime/styles/info.module.css
+++ b/src/app/anime/styles/info.module.css
@@ -9,21 +9,29 @@
 	align-items: center;
 }
 
+.AnimeHeroSection strong {
+	color: var(--neon-yellow);
+}
+
 .AnimeHeroSection img {
-	padding: 0.5rem 0.7rem 0rem 0;
+	width: auto;
+	height: auto;
+	padding: 0.5rem 0.7rem 0.5rem 0.7rem;
+	border-radius: 1rem;
 }
 
 .animeDescription {
 	max-height: 100px;
 	overflow: auto;
+	color: var(--light-sky);
 }
 
 .animeDescription::-webkit-scrollbar {
-	width: 4px;
+	width: 3px;
 }
 
 .animeDescription::-webkit-scrollbar-thumb {
-	background-color: gray;
+	background-color: var(--nord-yellow);
 	border-radius: 1rem;
 }
 
@@ -50,6 +58,18 @@
 	}
 
 	.AnimeHeroSection img {
-		padding: 0.4rem 0.4rem 0 0;
+		padding: 0.4rem 0.4rem 0.4rem 0.4rem;
+	}
+}
+
+@media screen and (max-width: 425px) {
+	.AnimeHeroSection {
+		display: flex;
+		align-items: center;
+		flex-direction: column;
+	}
+
+	.animeTitle {
+		text-align: center;
 	}
 }
\ 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 7c7957f..d3564f7 100644
--- a/src/app/anime/styles/search.module.css
+++ b/src/app/anime/styles/search.module.css
@@ -1,6 +1,7 @@
 .SearchBarContainer {
 	padding: 1rem 0 0.8rem 0;
-	width: 40%;
+	display: flex;
+	align-items: center;
 }
 
 .SearchInputContainer {
@@ -9,6 +10,18 @@
 	background-color: #121212;
 	padding: 0.5rem;
 	border-radius: 0.5rem;
+	width: 40%;
+}
+
+.animeHistoryButton {
+	font-family: "Lexend Deca", serif;
+	outline: none;
+	border: none;
+	background-color: #121212;
+	color: white;
+	margin: 0 0 0 0.4rem;
+	padding: 0.5rem;
+	cursor: pointer;
 }
 
 .SearchInputContainer input {
diff --git a/src/app/globals.css b/src/app/globals.css
index db28734..233d7d1 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -7,6 +7,20 @@
 	--pastel-red: #ff6868;

 	--soft-purple: #beadfa;

 	--softer-purple: #d0bfff;

+

+

+	--nord-red: #BF616A;

+	--nord-green: #A3BE8C;

+	--nord-yellow: #EBCB8B;

+	--nord-orange: #D08770;

+	--nord-pink: #B48EAD;

+

+	--nord-bg-darkest: #2E3440;

+	--nord-bg-darker: #3B4252;

+	--nord-bg-dark: #434C5E;

+	--nord-bg-darklight: #4C566A;

+

+	--light-sky: #CAF4FF;

 }

 

 body {

@@ -17,4 +31,4 @@ body {
 

 body::-webkit-scrollbar {

 	width: 0;

-}

+}
\ No newline at end of file