small fixes and shit

real-zephex · May 7, 2024 · d4cb608 · d4cb608
1 parent bfe95a1
commit d4cb608
Show file tree

Hide file tree

Showing 10 changed files with 64 additions and 38 deletions.
diff --git 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
@@ -27,17 +27,17 @@ 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",
 								}}
 								className={styles.MovieEntryPrev}
 							>
 								<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/search_2.jsx b/src/app/movies/components/search_2.jsx
@@ -33,8 +33,8 @@ const SearchResults = async (title) => {
 								<section className={styles.MovieEntry}>
 									<p>{item.title || item.original_title}</p>
 									<Image
-										src={`https://image.tmdb.org/t/p/original${item.poster_path}`}
-										width={130}
+										src={`https://sup-proxy.zephex0-f6c.workers.dev/api-content?url=https://image.tmdb.org/t/p/original${item.poster_path}`}
+										width={150}
 										height={230}
 										alt="Movie Poster"
 										priority

diff --git a/src/app/movies/components/trending.jsx b/src/app/movies/components/trending.jsx
@@ -27,17 +27,17 @@ 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",
 								}}
 								className={styles.MovieEntryPrev}
 							>
 								<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
@@ -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
@@ -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;
+	}
+
+}
diff --git 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;
 	}
-}
+}
diff --git 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;
+}
diff --git 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
@@ -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}`;