minor css fixes and added a new source for movies

10 files changed, 64 insertions, 39 deletions

diff --git a/src/app/anime/search/search.module.css b/src/app/anime/search/search.module.css
index f3c5b85..a185e36 100644
--- a/src/app/anime/search/search.module.css
+++ b/src/app/anime/search/search.module.css
@@ -56,8 +56,7 @@
 .animeEntry {

 	display: flex;

 	overflow-x: auto;

-	margin-bottom: 1rem;

-	margin-left: 0.5rem;

+	margin: 0 0 1rem 0.5rem;

 }

 

 .animeEntry:hover .anime {

@@ -112,4 +111,4 @@
 	.anime p {

 		width: 50dvw;

 	}

-}

+}
\ No newline at end of file
diff --git a/src/app/movies/[id]/page.jsx b/src/app/movies/[id]/page.jsx
index 1baec1f..313fc83 100644
--- a/src/app/movies/[id]/page.jsx
+++ b/src/app/movies/[id]/page.jsx
@@ -15,7 +15,7 @@ export default async function MOVIE_INFO({ params }) {
 	return (
 		<main
 			style={{
-				backgroundImage: `url(https://image.tmdb.org/t/p/original${data.backdrop_path})`,
+				backgroundImage: `url(https://sup-proxy.zephex0-f6c.workers.dev/api-content?url=https://image.tmdb.org/t/p/original${data.backdrop_path})`,
 				backgroundRepeat: "no-repeat",
 				backgroundSize: "cover",
 			}}
@@ -25,7 +25,7 @@ export default async function MOVIE_INFO({ params }) {
 				<section className={styles.MovieInfo}>
 					<div className={styles.HeroSection}>
 						<Image
-							src={`https://image.tmdb.org/t/p/original${data.poster_path}`}
+							src={`https://sup-proxy.zephex0-f6c.workers.dev/api-content?url=https://image.tmdb.org/t/p/original${data.poster_path}`}
 							width={200}
 							height={300}
 							alt="Movie Poster"
@@ -78,7 +78,10 @@ export default async function MOVIE_INFO({ params }) {
 						</section>
 						<section className={styles.Money}>
 							<span title="Released on">
-								<p>Release Date: {data.release_date}</p>
+								<p>
+									Release Date:{" "}
+									{data.release_date || "Not found"}
+								</p>
 							</span>
 						</section>
 						<section className={styles.Genre}>
@@ -93,13 +96,11 @@ export default async function MOVIE_INFO({ params }) {
 							style={{
 								textAlign: "center",
 								margin: 0,
-								fontSize: 14,
+								fontSize: 12,
 							}}
 						>
-							NOTE: Please wait for some time for the video to
-							load. If it buffers for a long time, then try
-							chanding the server. If the issue persists, please
-							check your internet connection.
+							IMPORTANT: Please use adblockers like uBlock Orgin
+							or Ghostery for an ad free experience.
 						</p>
 					</section>
 					<br />
diff --git a/src/app/movies/components/popular.jsx b/src/app/movies/components/popular.jsx
index 04d9cf8..d2d5e36 100644
--- a/src/app/movies/components/popular.jsx
+++ b/src/app/movies/components/popular.jsx
@@ -27,7 +27,7 @@ export default async function POPULAR_MOVIES() {
 								style={{
 									borderRadius: "0.5rem",
 									overflow: "hidden",
-									backgroundImage: `url(https://image.tmdb.org/t/p/original${item.backdrop_path})`,
+									backgroundImage: `url(https://sup-proxy.zephex0-f6c.workers.dev/api-content?url=https://image.tmdb.org/t/p/original${item.backdrop_path})`,
 									backgroundRepeat: "no-repeat",
 									backgroundSize: "cover",
 								}}
@@ -35,9 +35,9 @@ export default async function POPULAR_MOVIES() {
 							>
 								<div className={styles.MovieEntry}>
 									<Image
-										src={`https://image.tmdb.org/t/p/original${item.poster_path}`}
-										width={200}
-										height={300}
+										src={`https://sup-proxy.zephex0-f6c.workers.dev/api-content?url=https://image.tmdb.org/t/p/original${item.poster_path}`}
+										width={167}
+										height={247}
 										alt="Movie Poster"
 										priority
 									></Image>
diff --git a/src/app/movies/components/trending.jsx b/src/app/movies/components/trending.jsx
index be2a2e1..5436dfa 100644
--- a/src/app/movies/components/trending.jsx
+++ b/src/app/movies/components/trending.jsx
@@ -27,7 +27,7 @@ export default async function TREDNING_MOVIES() {
 								style={{
 									borderRadius: "0.5rem",
 									overflow: "hidden",
-									backgroundImage: `url(https://image.tmdb.org/t/p/original${item.backdrop_path})`,
+									backgroundImage: `url(https://sup-proxy.zephex0-f6c.workers.dev/api-content?url=https://image.tmdb.org/t/p/original${item.backdrop_path})`,
 									backgroundRepeat: "no-repeat",
 									backgroundSize: "cover",
 								}}
@@ -35,9 +35,9 @@ export default async function TREDNING_MOVIES() {
 							>
 								<div className={styles.MovieEntry}>
 									<Image
-										src={`https://image.tmdb.org/t/p/original${item.poster_path}`}
-										width={200}
-										height={300}
+										src={`https://sup-proxy.zephex0-f6c.workers.dev/api-content?url=https://image.tmdb.org/t/p/original${item.poster_path}`}
+										width={167}
+										height={247}
 										alt="Movie Poster"
 									></Image>
 									<p>{item.title}</p>
diff --git a/src/app/movies/components/video_player.jsx b/src/app/movies/components/video_player.jsx
index 5a49db0..86ff8e5 100644
--- a/src/app/movies/components/video_player.jsx
+++ b/src/app/movies/components/video_player.jsx
@@ -16,7 +16,6 @@ export default function VIDEO_PLAYER({ id: id }) {
 				src={url}
 				referrerPolicy="origin"
 				allowFullScreen
-				height={500}
 				className={styles.VideoPlayer}
 			></iframe>
 		);
diff --git a/src/app/movies/styles/info.module.css b/src/app/movies/styles/info.module.css
index e5c5277..a0da8d9 100644
--- a/src/app/movies/styles/info.module.css
+++ b/src/app/movies/styles/info.module.css
@@ -26,8 +26,8 @@
 .HeroTitle {
 	display: flex;
 	flex-direction: column;
-	margin-left: 1rem;
-	padding: 0.5rem;
+	margin-left: 0.6rem;
+	padding: 0.3rem;
 }
 
 .HeroTitle h2 {
@@ -49,6 +49,8 @@
 .MovieDescription {
 	font-size: 18px;
 	margin: 0.2rem 0 0 0;
+	max-height: 140px;
+	overflow: auto;
 }
 
 .OtherInfo {
@@ -117,4 +119,23 @@
 	.VideoPlayer iframe {
 		height: 250px;
 	}
-}
+
+	.HeroTitle h2 {
+		font-size: 22px;
+	}
+
+	.HeroSection img {
+		width: 170px;
+		height: 267px;
+	}
+
+	.MovieDescription {
+		font-size: 16px;
+	}
+
+	.OtherInfo {
+		width: 90%;
+		margin: 1rem auto;
+	}
+
+}
\ No newline at end of file
diff --git a/src/app/movies/styles/pop_trend.module.css b/src/app/movies/styles/pop_trend.module.css
index 9b94078..2e9ebd9 100644
--- a/src/app/movies/styles/pop_trend.module.css
+++ b/src/app/movies/styles/pop_trend.module.css
@@ -8,13 +8,11 @@
 	margin: 0 0 0.5rem 0;
 	text-align: center;
 	color: transparent;
-	background: linear-gradient(
-		90deg,
-		var(--neon-green) 40%,
-		var(--light-green) 60%,
-		var(--neon-yellow) 80%,
-		var(--soft-purple) 100%
-	);
+	background: linear-gradient(90deg,
+			var(--neon-green) 40%,
+			var(--light-green) 60%,
+			var(--neon-yellow) 80%,
+			var(--soft-purple) 100%);
 	background-size: 60% 50%;
 	background-clip: text;
 }
@@ -36,7 +34,7 @@
 
 .MovieContainer:hover .MovieEntryPrev:hover {
 	opacity: 1;
-	scale: 1.02;
+	scale: 1.015;
 }
 
 .MovieEntryPrev {
@@ -52,15 +50,16 @@
 	justify-content: center;
 	flex-direction: column;
 	cursor: pointer;
-	backdrop-filter: blur(5px);
+	backdrop-filter: blur(10px);
 }
 
 .MovieEntry img {
 	border-radius: 0.5rem;
+	box-shadow: 0px 0px 10px 8px rgb(32, 32, 32);
 }
 
 .MovieEntry p {
-	width: 190px;
+	width: 160px;
 	overflow: hidden;
 	white-space: nowrap;
 	text-overflow: ellipsis;
@@ -79,4 +78,4 @@
 		overflow-x: auto;
 		overflow-y: hidden;
 	}
-}
+}
\ No newline at end of file
diff --git a/src/app/movies/styles/video_player.module.css b/src/app/movies/styles/video_player.module.css
index aa65b07..b8946e8 100644
--- a/src/app/movies/styles/video_player.module.css
+++ b/src/app/movies/styles/video_player.module.css
@@ -1,5 +1,5 @@
 .VideoContainer {
-    margin: 0.5rem 0 0 0;
+	margin: 0.5rem 0 0 0;
 }
 
 .VideoContainer button {
@@ -17,9 +17,14 @@
 
 .VideoPlayer {
 	width: 100%;
+	height: 500px;
 	aspect-ratio: "16/9";
 	border: none;
 	outline: none;
 	border-radius: 0.5rem;
 	margin: 0.5rem 0 0 0;
 }
+
+.VideoPlayer::-webkit-scrollbar {
+	width: 0px;
+}
\ No newline at end of file
diff --git a/src/app/page.jsx b/src/app/page.jsx
index 6efc2f3..4f9eda2 100644
--- a/src/app/page.jsx
+++ b/src/app/page.jsx
@@ -39,7 +39,7 @@ export default async function Home() {
 					>
 						<div className={styles.movies}>
 							<h2>Movies</h2>
-							<p>Your one stop for all your kdrama needs</p>
+							<p>Your one stop for all your movie needs</p>
 						</div>
 					</Link>
 				</div>
diff --git a/utils/movie_urls.js b/utils/movie_urls.js
index 20cbfef..eb512aa 100644
--- a/utils/movie_urls.js
+++ b/utils/movie_urls.js
@@ -1,8 +1,9 @@
 const API_KEY = "171fe27dbfecc58e2a18fbced644cda9";
+const PROXY = "https://sup-proxy.zephex0-f6c.workers.dev/api-json?url=";
 
 // MOVIES
-export const TRENDING = `https://api.themoviedb.org/3/trending/movie/day?api_key=${API_KEY}`;
+export const TRENDING = `${PROXY}https://api.themoviedb.org/3/trending/movie/day?api_key=${API_KEY}`;
 export const SEARCH = `https://api.themoviedb.org/3/search/movie?api_key=${API_KEY}&query=`;
-export const POPULAR = `https://api.themoviedb.org/3/movie/popular?api_key=${API_KEY}`;
+export const POPULAR = `${PROXY}https://api.themoviedb.org/3/movie/popular?api_key=${API_KEY}`;
 export const getInfoURL = (movieId) =>
-	`https://api.themoviedb.org/3/movie/${movieId}?api_key=${API_KEY}`;
+	`${PROXY}https://api.themoviedb.org/3/movie/${movieId}?api_key=${API_KEY}`;