From 7d5ea502db6e016291ad4c57c852d13747674fdc Mon Sep 17 00:00:00 2001
From: real-zephex <zephex-1@outlook.com>
Date: Mon, 27 May 2024 01:06:32 +0530
Subject: =?UTF-8?q?=F0=9F=8E=A8=20refactor(ui):=20Update=20background=20im?=
 =?UTF-8?q?age=20for=20info=20page=20and=20home=20page,=20and=20fix=20vide?=
 =?UTF-8?q?o=20loading=20issue?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 next.config.mjs              |   2 ++
 public/bg-test.jpg           | Bin 0 -> 319066 bytes
 src/app/anime/[id]/page.jsx  |  75 +++++++++++++++++++++++------------------
 src/app/globals.css          |   1 +
 src/app/kdrama/[id]/page.jsx |  75 +++++++++++++++++++++++------------------
 src/app/movies/[id]/page.jsx |  77 ++++++++++++++++++++++++-------------------
 src/app/page.jsx             |  67 ++++++++++++++++++++++---------------
 utils/kdrama_urls.js         |   4 ++-
 8 files changed, 177 insertions(+), 124 deletions(-)
 create mode 100644 public/bg-test.jpg

diff --git a/next.config.mjs b/next.config.mjs
index 6b50381..216839b 100644
--- a/next.config.mjs
+++ b/next.config.mjs
@@ -42,6 +42,8 @@ const nextConfig = {
 				hostname: "ih1.redbubble.net",
 			},
 			{ hostname: "images.hdqwalls.com" },
+			{ hostname: "cdn3.iconfinder.com" },
+			{ hostname: "www.iconfinder.com" },
 		],
 	},
 	logging: {
diff --git a/public/bg-test.jpg b/public/bg-test.jpg
new file mode 100644
index 0000000..c21c950
Binary files /dev/null and b/public/bg-test.jpg differ
diff --git a/src/app/anime/[id]/page.jsx b/src/app/anime/[id]/page.jsx
index 0e62310..c060899 100644
--- a/src/app/anime/[id]/page.jsx
+++ b/src/app/anime/[id]/page.jsx
@@ -12,39 +12,50 @@ const AnimeInfoHomepage = async ({ params }) => {
 	preFetchVideoLinks(data.episodes);
 
 	return (
-		<section className="pt-12  lg:w-9/12 m-auto">
-			<div className="flex items-center justify-center lg:justify-start md:justify-start">
-				<Image
-					isBlurred
-					width={190}
-					src={data.image.toString()}
-					alt="Anime Title Poster"
-					className="m-2"
-				/>
-				<div className="mx-5">
-					<h4 className={`text-2xl`}>
-						<strong>{data.title}</strong>
-					</h4>
-					<div>
-						{data.genres &&
-							data.genres.map((item, index) => (
-								<Chip
-									key={index}
-									color="warning"
-									variant="faded"
-									className="mr-1 mb-1"
-								>
-									<p className="text-xs">{item}</p>
-								</Chip>
-							))}
+		<section
+			style={{
+				backgroundColor: "black",
+				backgroundImage: `radial-gradient(gray 1px, transparent 1px)`,
+				backgroundSize: "40px 40px",
+			}}
+			className="h-screen "
+		>
+			<section className="absolute inset-0 bg-gradient-to-b from-transparent to-black">
+				<section className="pt-12  lg:w-9/12 m-auto">
+					<div className="flex items-center justify-center lg:justify-start md:justify-start">
+						<Image
+							isBlurred
+							width={190}
+							src={data.image.toString()}
+							alt="Anime Title Poster"
+							className="m-2"
+						/>
+						<div className="mx-5">
+							<h4 className={`text-2xl`}>
+								<strong>{data.title}</strong>
+							</h4>
+							<div>
+								{data.genres &&
+									data.genres.map((item, index) => (
+										<Chip
+											key={index}
+											color="warning"
+											variant="faded"
+											className="mr-1 mb-1"
+										>
+											<p className="text-xs">{item}</p>
+										</Chip>
+									))}
+							</div>
+						</div>
 					</div>
-				</div>
-			</div>
-			<DescriptionTabs data={data} />
-			<EpisodesContainer data={data} />
-			<br />
-			<br />
-			<br />
+					<DescriptionTabs data={data} />
+					<EpisodesContainer data={data} />
+					<br />
+					<br />
+					<br />
+				</section>
+			</section>
 		</section>
 	);
 };
diff --git a/src/app/globals.css b/src/app/globals.css
index c414701..a9aeb5b 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -25,6 +25,7 @@
 	--nord-bg-darklight: #4C566A;
 
 	--light-sky: #CAF4FF;
+	--test: #1f1f1fd2;
 }
 
 body::-webkit-scrollbar {
diff --git a/src/app/kdrama/[id]/page.jsx b/src/app/kdrama/[id]/page.jsx
index 90acded..ce8b6ba 100644
--- a/src/app/kdrama/[id]/page.jsx
+++ b/src/app/kdrama/[id]/page.jsx
@@ -11,39 +11,50 @@ export default async function DramaInfo({ params }) {
 	PreFetchVideoLinks(data.episodes, data.id);
 
 	return (
-		<section className="pt-12  lg:w-9/12 m-auto">
-			<div className="flex items-center justify-center lg:justify-start md:justify-start">
-				<Image
-					isBlurred
-					width={190}
-					src={data.image.toString()}
-					alt="Anime Title Poster"
-					className="m-2"
-				/>
-				<div className="mx-5">
-					<h4 className={`text-2xl`}>
-						<strong>{data.title}</strong>
-					</h4>
-					<div className="mt-1">
-						{data.genres &&
-							data.genres.map((item, index) => (
-								<Chip
-									key={index}
-									color="warning"
-									variant="faded"
-									className="mr-1 mb-1"
-								>
-									<p className="text-xs">{item}</p>
-								</Chip>
-							))}
+		<section
+			style={{
+				backgroundColor: "black",
+				backgroundImage: `radial-gradient(gray 1px, transparent 1px)`,
+				backgroundSize: "40px 40px",
+			}}
+			className="h-screen "
+		>
+			<section className="absolute inset-0 bg-gradient-to-b from-transparent to-black">
+				<section className="pt-12  lg:w-9/12 m-auto">
+					<div className="flex items-center justify-center lg:justify-start md:justify-start">
+						<Image
+							isBlurred
+							width={190}
+							src={data.image.toString()}
+							alt="Anime Title Poster"
+							className="m-2"
+						/>
+						<div className="mx-5">
+							<h4 className={`text-2xl`}>
+								<strong>{data.title}</strong>
+							</h4>
+							<div className="mt-1">
+								{data.genres &&
+									data.genres.map((item, index) => (
+										<Chip
+											key={index}
+											color="warning"
+											variant="faded"
+											className="mr-1 mb-1"
+										>
+											<p className="text-xs">{item}</p>
+										</Chip>
+									))}
+							</div>
+						</div>
 					</div>
-				</div>
-			</div>
-			<DescriptionTabs data={data} />
-			<EpisodesContainer data={data} />
-			<br />
-			<br />
-			<br />
+					<DescriptionTabs data={data} />
+					<EpisodesContainer data={data} />
+					<br />
+					<br />
+					<br />
+				</section>
+			</section>
 		</section>
 	);
 }
diff --git a/src/app/movies/[id]/page.jsx b/src/app/movies/[id]/page.jsx
index 11389e7..e4e745a 100644
--- a/src/app/movies/[id]/page.jsx
+++ b/src/app/movies/[id]/page.jsx
@@ -11,42 +11,53 @@ const MovieInfoPage = async ({ params }) => {
 	const data = await MovieInfoData(id);
 
 	return (
-		<main>
-			<section className="pt-12 m-auto w-full lg:w-9/12">
-				<MovieVideoPlayer id={data.id} />
-				<div className="flex items-center">
-					<Image
-						isBlurred
-						shadow="lg"
-						src={`https://sup-proxy.zephex0-f6c.workers.dev/api-content?url=https://image.tmdb.org/t/p/original${data.poster_path}`}
-						width={180}
-						height={300}
-						alt="Anime Title Poster"
-						className="m-2"
-					></Image>
-					<div className="mx-5">
-						<h4 className={`text-2xl`}>
-							<strong>{data.title}</strong>
-						</h4>
-						<div className="mt-1">
-							{data.genres &&
-								data.genres.map((item, index) => (
-									<Chip
-										key={index}
-										color="warning"
-										variant="faded"
-										className="mr-1 mb-1"
-									>
-										<p className="text-xs">{item.name}</p>
-									</Chip>
-								))}
+		<section
+			style={{
+				backgroundColor: "black",
+				backgroundImage: `radial-gradient(gray 1px, transparent 1px)`,
+				backgroundSize: "40px 40px",
+			}}
+			className="h-screen "
+		>
+			<section className="absolute inset-0 bg-gradient-to-b from-transparent to-black">
+				<section className="pt-12 m-auto w-full lg:w-9/12">
+					<MovieVideoPlayer id={data.id} />
+					<div className="flex items-center">
+						<Image
+							isBlurred
+							shadow="lg"
+							src={`https://sup-proxy.zephex0-f6c.workers.dev/api-content?url=https://image.tmdb.org/t/p/original${data.poster_path}`}
+							width={180}
+							height={300}
+							alt="Anime Title Poster"
+							className="m-2"
+						></Image>
+						<div className="mx-5">
+							<h4 className={`text-2xl`}>
+								<strong>{data.title}</strong>
+							</h4>
+							<div className="mt-1">
+								{data.genres &&
+									data.genres.map((item, index) => (
+										<Chip
+											key={index}
+											color="warning"
+											variant="faded"
+											className="mr-1 mb-1"
+										>
+											<p className="text-xs">
+												{item.name}
+											</p>
+										</Chip>
+									))}
+							</div>
 						</div>
 					</div>
-				</div>
-				<DescriptionTabs data={data} />
-				<Questions />
+					<DescriptionTabs data={data} />
+					<Questions />
+				</section>
 			</section>
-		</main>
+		</section>
 	);
 };
 
diff --git a/src/app/page.jsx b/src/app/page.jsx
index 6a8e0aa..b6fdd75 100644
--- a/src/app/page.jsx
+++ b/src/app/page.jsx
@@ -4,48 +4,63 @@ import Image from "next/image";
 export default async function Home() {
 	const homePageCards = (title, message, url) => {
 		return (
-			<Link href={`/${title}`} className="my-1">
-				<Card className="max-w-[400px]  border-1 border-gray-500">
-					<CardHeader className="flex gap-3">
-						<Image
-							alt="nextui logo"
-							height={40}
-							width={40}
-							src={url}
-							className="rounded-md"
-						/>
-						<div className="flex flex-col">
-							<p className="text-md">{title}</p>
-							<p className="text-small text-default-500">
-								dramalama/{title}
-							</p>
-						</div>
-					</CardHeader>
-					<Divider className="bg-slate-400" />
-					<CardBody>
-						<p>{message}</p>
-					</CardBody>
-				</Card>
+			// <Link href={`/${title}`} className="my-1">
+			// 	<Card className="max-w-[400px]  border-1 border-gray-500">
+			// 		<CardHeader className="flex gap-3">
+			// 			<Image
+			// 				alt="nextui logo"
+			// 				height={40}
+			// 				width={40}
+			// 				src={url}
+			// 				className="rounded-md"
+			// 			/>
+			// 			<div className="flex flex-col">
+			// 				<p className="text-md">{title}</p>
+			// 				<p className="text-small text-default-500">
+			// 					dramalama/{title}
+			// 				</p>
+			// 			</div>
+			// 		</CardHeader>
+			// 		<Divider className="bg-slate-400" />
+			// 		<CardBody>
+			// 			<p>{message}</p>
+			// 		</CardBody>
+			// 	</Card>
+			// </Link>
+			<Link
+				href={`/${title}`}
+				className="flex mb-2 lg:mx-2 text-center  transition ease-in delay-50 hover:scale-105  text-inherit bg-gray-200 dark:bg-[#1f1f1f] p-1 rounded-lg"
+			>
+				<section>
+					<Image
+						src={url}
+						height={100}
+						width={100}
+						alt="section image"
+						className="rounded-full overflow-visible"
+					></Image>
+					<p className="uppercase font-xl">{title}</p>
+				</section>
 			</Link>
 		);
 	};
 
 	return (
-		<section className="h-screen w-screen flex flex-col items-center justify-center ">
+		<section className="h-screen w-screen flex flex-col items-center justify-center lg:flex-row ">
 			{homePageCards(
 				"anime",
 				"Gravity of anime constant state of falling into the depths of happiness and joy",
-				"https://i.ibb.co/bLJzm3T/Whats-App-Image-2024-05-23-at-22-05-59-09933e5f.jpg"
+				"https://cdn3.iconfinder.com/data/icons/letters-and-numbers-1/32/letter_A_red-256.png"
 			)}
 			{homePageCards(
 				"kdrama",
 				"Infinity loop I'll watch just one k-drama, ok one more, ok wait...",
-				"https://ih1.redbubble.net/image.2656505524.2951/poster,504x498,f8f8f8-pad,600x600,f8f8f8.jpg"
+				"https://cdn3.iconfinder.com/data/icons/letters-and-numbers-1/32/letter_K_red-512.png"
 			)}
 			{homePageCards(
 				"movies",
 				"Dive into a world of thrilling adventure and heart-pounding suspense",
-				"https://images.hdqwalls.com/download/poster-avengers-endgame-ni-1920x1080.jpg"
+				"https://cdn3.iconfinder.com/data/icons/letters-and-numbers-1/32/letter_M_red-512.png"
 			)}
 		</section>
 	);
diff --git a/utils/kdrama_urls.js b/utils/kdrama_urls.js
index acea986..ccf57c4 100644
--- a/utils/kdrama_urls.js
+++ b/utils/kdrama_urls.js
@@ -1,5 +1,7 @@
 const base_url_one = "https://dramacool-scraper.vercel.app";
 const base_url_two = "https://consumet-jade.vercel.app/movies/dramacool";
+const base_url_three =
+	"https://api-consumet-org-ukw6.onrender.com/movies/dramacool";
 const proxy_url = "https://sup-proxy.zephex0-f6c.workers.dev/api-json?url=";
 
 export const popular_dramas_url = `${proxy_url}${base_url_one}/popular`;
@@ -13,5 +15,5 @@ export const drama_info_url = (id) =>
 	`${proxy_url}${base_url_two}/info?id=${id}`;
 
 export const videoURL = (episodeId, mediaId) => {
-	return `${proxy_url}${base_url_two}/watch?episodeId=${episodeId}&mediaId=${mediaId}`;
+	return `${proxy_url}${base_url_three}/watch?episodeId=${episodeId}&mediaId=${mediaId}`;
 };
-- 
cgit v1.2.3