minor fixes

7 files changed, 56 insertions, 3 deletions

diff --git a/src/app/movies/components/cacher.js b/src/app/movies/components/cacher.js
new file mode 100644
index 0000000..169508a
--- /dev/null
+++ b/src/app/movies/components/cacher.js
@@ -0,0 +1,17 @@
+import { getInfoURL } from "../../../../utils/movie_urls";
+
+const PreFetchMovieInfo = async (data) => {
+	try {
+		const fetchPromises = data.results.map(async (element) => {
+			const link = `${getInfoURL(element.id)}`;
+			await fetch(link, { next: { revalidate: 21600 } });
+		});
+
+		await Promise.all(fetchPromises);
+		console.log("Movie info pre-fetched successfully!");
+	} catch (error) {
+		console.error("Error occurred while pre-fetching video links:", error);
+	}
+};
+
+export default PreFetchMovieInfo;
diff --git a/src/app/movies/components/popular.jsx b/src/app/movies/components/popular.jsx
index 0773780..04d9cf8 100644
--- a/src/app/movies/components/popular.jsx
+++ b/src/app/movies/components/popular.jsx
@@ -1,10 +1,12 @@
 import { POPULAR } from "../../../../utils/movie_urls";
+import PreFetchMovieInfo from "./cacher";
 import styles from "../styles/pop_trend.module.css";
 import Image from "next/image";
 import Link from "next/link";
 
 export default async function POPULAR_MOVIES() {
 	const data = await get_popular();
+	PreFetchMovieInfo(data);
 
 	return (
 		<main className={styles.Main}>
@@ -29,6 +31,7 @@ export default async function POPULAR_MOVIES() {
 									backgroundRepeat: "no-repeat",
 									backgroundSize: "cover",
 								}}
+								className={styles.MovieEntryPrev}
 							>
 								<div className={styles.MovieEntry}>
 									<Image
diff --git a/src/app/movies/components/search_2.jsx b/src/app/movies/components/search_2.jsx
index 1c2ff88..0eb66fb 100644
--- a/src/app/movies/components/search_2.jsx
+++ b/src/app/movies/components/search_2.jsx
@@ -1,12 +1,14 @@
 "use server";
 
 import { SEARCH } from "../../../../utils/movie_urls";
+import PreFetchMovieInfo from "./cacher";
 import Image from "next/image";
 import Link from "next/link";
 import styles from "../styles/search.module.css";
 
 const SearchResults = async (title) => {
 	const data = await get_search_results(title);
+	PreFetchMovieInfo(data);
 	return (
 		<div className={styles.MovieSearchResultsContainer}>
 			{data &&
@@ -26,6 +28,7 @@ const SearchResults = async (title) => {
 									borderRadius: "0.5rem",
 									overflow: "hidden",
 								}}
+								className={styles.MovieResultsPrev}
 							>
 								<section className={styles.MovieEntry}>
 									<p>{item.title || item.original_title}</p>
diff --git a/src/app/movies/components/trending.jsx b/src/app/movies/components/trending.jsx
index b12d068..be2a2e1 100644
--- a/src/app/movies/components/trending.jsx
+++ b/src/app/movies/components/trending.jsx
@@ -1,10 +1,12 @@
 import { TRENDING } from "../../../../utils/movie_urls";
+import PreFetchMovieInfo from "./cacher";
 import styles from "../styles/pop_trend.module.css";
 import Link from "next/link";
 import Image from "next/image";
 
 export default async function TREDNING_MOVIES() {
 	const data = await get_popular();
+	PreFetchMovieInfo(data);
 
 	return (
 		<main className={styles.Main}>
@@ -29,6 +31,7 @@ export default async function TREDNING_MOVIES() {
 									backgroundRepeat: "no-repeat",
 									backgroundSize: "cover",
 								}}
+								className={styles.MovieEntryPrev}
 							>
 								<div className={styles.MovieEntry}>
 									<Image
diff --git a/src/app/movies/styles/info.module.css b/src/app/movies/styles/info.module.css
index 6b7d8e6..23b3322 100644
--- a/src/app/movies/styles/info.module.css
+++ b/src/app/movies/styles/info.module.css
@@ -19,7 +19,8 @@
 }
 
 .HeroSection img {
-	border-radius: 0.5rem;
+	border-radius: 1rem;
+	padding: 0.5rem;
 }
 
 .HeroTitle {
diff --git a/src/app/movies/styles/pop_trend.module.css b/src/app/movies/styles/pop_trend.module.css
index f9581c4..9b94078 100644
--- a/src/app/movies/styles/pop_trend.module.css
+++ b/src/app/movies/styles/pop_trend.module.css
@@ -27,11 +27,24 @@
 }
 
 .MovieContainer::-webkit-scrollbar {
-    height: 0;
+	height: 0;
+}
+
+.MovieContainer:hover .MovieEntryPrev {
+	opacity: 0.5;
+}
+
+.MovieContainer:hover .MovieEntryPrev:hover {
+	opacity: 1;
+	scale: 1.02;
+}
+
+.MovieEntryPrev {
+	transition: opacity 200ms ease, scale 200ms ease;
 }
 
 .MovieEntry {
-	background-color: #1f1f1fb2;
+	background-color: #1f1f1fc2;
 	padding: 0.5rem;
 	/* border-radius: 0.5rem; */
 	display: flex;
diff --git a/src/app/movies/styles/search.module.css b/src/app/movies/styles/search.module.css
index e5ed3ee..55d4591 100644
--- a/src/app/movies/styles/search.module.css
+++ b/src/app/movies/styles/search.module.css
@@ -37,6 +37,19 @@
 	margin: 0.2rem 0.2rem 0 0.2rem;
 }
 
+.MovieSearchResultsContainer:hover .MovieResultsPrev {
+	opacity: 0.5;
+}
+
+.MovieSearchResultsContainer:hover .MovieResultsPrev:hover {
+	opacity: 1;
+	scale: 1.02;
+}
+
+.MovieResultsPrev {
+	transition: opacity 200ms ease, scale 200ms ease;
+}
+
 .MovieEntry {
 	display: flex;
 	align-items: center;