⚡️ perf(kdrama, anime): cache video links, replace next/image

16 files changed, 84 insertions, 73 deletions

diff --git a/next.config.mjs b/next.config.mjs
index a38c7a2..6b50381 100644
--- a/next.config.mjs
+++ b/next.config.mjs
@@ -35,6 +35,13 @@ const nextConfig = {
 				protocol: "https",

 				hostname: "image.tmdb.org",

 			},

+			{

+				hostname: "i.ibb.co",

+			},

+			{

+				hostname: "ih1.redbubble.net",

+			},

+			{ hostname: "images.hdqwalls.com" },

 		],

 	},

 	logging: {

diff --git a/src/app/anime/[id]/page.jsx b/src/app/anime/[id]/page.jsx
index f8cbe0c..0e62310 100644
--- a/src/app/anime/[id]/page.jsx
+++ b/src/app/anime/[id]/page.jsx
@@ -2,13 +2,15 @@ import { Chip, Image } from "@nextui-org/react";
 

 import { anime_info } from "../data-fetch/request";

 import DescriptionTabs from "../components/infoTabs";

-

 import EpisodesContainer from "../components/vidButtonContainer";

+import { preFetchVideoLinks } from "../components/cacher";

 

 const AnimeInfoHomepage = async ({ params }) => {

 	const id = params.id;

 	const data = await anime_info(id);

 

+	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">

diff --git a/src/app/anime/components/cacher.js b/src/app/anime/components/cacher.js
index 164dafd..ae9b10b 100644
--- a/src/app/anime/components/cacher.js
+++ b/src/app/anime/components/cacher.js
@@ -1,6 +1,6 @@
 "use server";
 
-import { anime_info } from "../data-fetch/request";
+import { anime_info, video_url } from "../data-fetch/request";
 
 export async function preFetchAnimeInfo(data) {
 	try {
@@ -18,7 +18,7 @@ export async function preFetchAnimeInfo(data) {
 export async function preFetchVideoLinks(data) {
 	try {
 		const fetchPromises = data.map(async (element) => {
-			await fetch(watch_url(element.id), { next: { revalidate: 21600 } });
+			await video_url(element.id);
 		});
 
 		await Promise.all(fetchPromises);
diff --git a/src/app/anime/components/search_results.jsx b/src/app/anime/components/search_results.jsx
index 3097a96..2018680 100644
--- a/src/app/anime/components/search_results.jsx
+++ b/src/app/anime/components/search_results.jsx
@@ -2,8 +2,8 @@ import { search_results } from "../data-fetch/request";
 import { preFetchAnimeInfo } from "./cacher";
 import styles from "../../page.module.css";
 
-import { Card, CardHeader, CardBody, Image, Link } from "@nextui-org/react";
-import NextImage from "next/image";
+import { Card, CardHeader, CardBody, Link } from "@nextui-org/react";
+import Image from "next/image";
 
 const SearchResults = async (title) => {
 	const data = await search_results(title);
@@ -25,14 +25,11 @@ const SearchResults = async (title) => {
 						<Card className="overflow-hidden" isPressable>
 							<CardBody>
 								<Image
-									as={NextImage}
-									isBlurred
-									alt="Anime Poster"
+									alt="Searched Anime Poster"
 									src={item.image}
 									width={190}
 									height={120}
-									shadow="lg"
-									className="h-64"
+									className="rounded-md h-64"
 									priority
 								/>
 							</CardBody>
diff --git a/src/app/anime/data-fetch/request.js b/src/app/anime/data-fetch/request.js
index 3d22b7a..579f693 100644
--- a/src/app/anime/data-fetch/request.js
+++ b/src/app/anime/data-fetch/request.js
@@ -47,7 +47,7 @@ export const anime_info = async (id) => {
 
 export const video_url = async (episodeId) => {
 	const res = await fetch(watch_url(episodeId), {
-		next: { revalidate: 21600 },
+		cache: "force-cache",
 	});
 	const data = await res.json();
 	return data;
diff --git a/src/app/anime/page.jsx b/src/app/anime/page.jsx
index a2d5777..ce5ca34 100644
--- a/src/app/anime/page.jsx
+++ b/src/app/anime/page.jsx
@@ -1,5 +1,5 @@
-import { Card, CardHeader, CardBody, Image, Link } from "@nextui-org/react";

-import NextImage from "next/image";

+import { Card, CardHeader, CardBody, Link } from "@nextui-org/react";

+import Image from "next/image";

 import styles from "../page.module.css";

 

 import { top_airing, recent, popular } from "./data-fetch/request";

@@ -38,14 +38,11 @@ const AnimeHomepage = async () => {
 						<Card className="overflow-visible " isPressable>

 							<CardBody>

 								<Image

-									as={NextImage}

-									isBlurred

 									alt="Anime Poster"

-									src={item.image}

+									src={`https://sup-proxy.zephex0-f6c.workers.dev/api-content?url=${item.image}`}

 									width={270}

 									height={160}

-									className="h-60 overflow-hidden"

-									shadow="lg"

+									className="h-60 rounded-md overflow-hidden"

 									priority

 								/>

 							</CardBody>

diff --git a/src/app/kdrama/[id]/page.jsx b/src/app/kdrama/[id]/page.jsx
index d94810e..90acded 100644
--- a/src/app/kdrama/[id]/page.jsx
+++ b/src/app/kdrama/[id]/page.jsx
@@ -2,11 +2,14 @@ import { Chip, Image } from "@nextui-org/react";
 import DescriptionTabs from "../components/infoTabs";

 import { dramaInfo } from "../components/requests";

 import EpisodesContainer from "../components/episodesContainer";

+import { PreFetchVideoLinks } from "../components/cacher";

 

 export default async function DramaInfo({ params }) {

 	const id = decodeURIComponent(params.id);

 	const data = await dramaInfo(id);

 

+	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">

diff --git a/src/app/kdrama/components/cacher.js b/src/app/kdrama/components/cacher.js
index fdfa272..476ed95 100644
--- a/src/app/kdrama/components/cacher.js
+++ b/src/app/kdrama/components/cacher.js
@@ -1,10 +1,14 @@
 "use server";

 

+import { drama_info_url } from "../../../../utils/kdrama_urls";

+import { videoLink } from "./requests";

+

 export async function PreFetchKdramaInfo(data) {

 	try {

 		const fetchPromises = data.results.map(async (element) => {

-			const link = `https://consumet-jade.vercel.app/movies/dramacool/info?id=${element.id}`;

-			await fetch(link, { next: { revalidate: 21600 } });

+			await fetch(drama_info_url(element.id), {

+				next: { revalidate: 21600 },

+			});

 		});

 

 		await Promise.all(fetchPromises);

@@ -13,3 +17,16 @@ export async function PreFetchKdramaInfo(data) {
 		console.error("Error occurred while pre-fetching video links:", error);

 	}

 }

+

+export const PreFetchVideoLinks = async (data, mediaID) => {

+	try {

+		const fetchPromise = data.map(async (element) => {

+			await videoLink(element.id, mediaID);

+		});

+

+		await Promise.all(fetchPromise);

+		console.log("Kdrama video links pre fetched successfully");

+	} catch (error) {

+		console.error("Error occured while fetching video links");

+	}

+};

diff --git a/src/app/kdrama/components/requests.js b/src/app/kdrama/components/requests.js
index 5609d79..1c82b79 100644
--- a/src/app/kdrama/components/requests.js
+++ b/src/app/kdrama/components/requests.js
@@ -36,9 +36,9 @@ export const dramaInfo = async (id) => {
 
 export const videoLink = async (epiId, mediaId) => {
 	const res = await fetch(videoURL(epiId, mediaId), {
-		next: { revalidate: 21600 },
+		cache: "force-cache",
 	});
 	const data = await res.json();
-	const videoLink = data.sources[0].url;
-	return videoLink;
+	const vidLink = await data.sources[0].url;
+	return vidLink;
 };
diff --git a/src/app/kdrama/components/searchFormatter.jsx b/src/app/kdrama/components/searchFormatter.jsx
index bac2549..a9e2f42 100644
--- a/src/app/kdrama/components/searchFormatter.jsx
+++ b/src/app/kdrama/components/searchFormatter.jsx
@@ -1,5 +1,5 @@
-import { Card, CardHeader, CardBody, Image, Link } from "@nextui-org/react";
-import NextImage from "next/image";
+import { Card, CardHeader, CardBody, Link } from "@nextui-org/react";
+import Image from "next/image";
 
 import styles from "../../page.module.css";
 
@@ -16,18 +16,16 @@ const SearchedDataFormatter = async (data) => {
 						href={`/kdrama/${encodeURIComponent(item.id)}`}
 						aria-label="anime redirection links"
 						className="flex flex-col items-center mx-1"
+						title={item.title}
 					>
 						<Card className="overflow-hidden" isPressable>
 							<CardBody>
 								<Image
-									as={NextImage}
-									isBlurred
-									alt="Anime Poster"
+									alt="Searched Kdrama Poster"
 									src={item.image}
 									width={185}
 									height={120}
-									shadow="lg"
-									className="h-64"
+									className="rounded-md h-64"
 									priority
 								/>
 							</CardBody>
diff --git a/src/app/kdrama/page.jsx b/src/app/kdrama/page.jsx
index d5e2855..afcb8a2 100644
--- a/src/app/kdrama/page.jsx
+++ b/src/app/kdrama/page.jsx
@@ -1,5 +1,5 @@
-import { Card, CardHeader, CardBody, Image, Link } from "@nextui-org/react";

-import NextImage from "next/image";

+import { Card, CardHeader, CardBody, Link } from "@nextui-org/react";

+import Image from "next/image";

 

 import { DramaDataFetcher } from "./components/requests";

 import styles from "../page.module.css";

@@ -37,14 +37,11 @@ const KdramaHomepage = async () => {
 						<Card className="overflow-visible " isPressable>

 							<CardBody>

 								<Image

-									as={NextImage}

-									isBlurred

-									alt="Anime Poster"

-									src={item.image}

+									alt="Kdrama Poster"

+									src={`https://sup-proxy.zephex0-f6c.workers.dev/api-content?url=${item.image}`}

 									width={270}

 									height={160}

-									className="h-60 overflow-hidden"

-									shadow="lg"

+									className="h-60 rounded-md overflow-hidden"

 									priority

 								/>

 							</CardBody>

diff --git a/src/app/movies/components/searchFormatter.jsx b/src/app/movies/components/searchFormatter.jsx
index 47b684f..dc6afb2 100644
--- a/src/app/movies/components/searchFormatter.jsx
+++ b/src/app/movies/components/searchFormatter.jsx
@@ -1,5 +1,5 @@
-import { Card, CardHeader, CardBody, Image, Link } from "@nextui-org/react";
-import NextImage from "next/image";
+import { Card, CardHeader, CardBody, Link } from "@nextui-org/react";
+import Image from "next/image";
 
 import styles from "../../page.module.css";
 
@@ -21,14 +21,11 @@ const MovieSearchFormatter = async (data) => {
 								<Card className="overflow-hidden" isPressable>
 									<CardBody>
 										<Image
-											as={NextImage}
-											isBlurred
-											alt="Anime Poster"
+											alt="Searched Movie Poster"
 											src={`https://sup-proxy.zephex0-f6c.workers.dev/api-content?url=https://image.tmdb.org/t/p/original${item.poster_path}`}
 											width={190}
 											height={120}
-											shadow="lg"
-											className="h-64"
+											className="rounded-md h-64"
 											priority
 										/>
 									</CardBody>
diff --git a/src/app/movies/page.jsx b/src/app/movies/page.jsx
index 66ae888..417df28 100644
--- a/src/app/movies/page.jsx
+++ b/src/app/movies/page.jsx
@@ -1,5 +1,5 @@
-import { Card, CardHeader, CardBody, Image, Link } from "@nextui-org/react";
-import NextImage from "next/image";
+import { Card, CardHeader, CardBody, Link } from "@nextui-org/react";
+import Image from "next/image";
 
 import MovieSearchBar from "./components/search";
 import { MovieHomepageDataFetcher } from "./components/requestsHandler";
@@ -36,14 +36,11 @@ export default async function MovieHomepage() {
 								<Card className="overflow-visible " isPressable>
 									<CardBody>
 										<Image
-											as={NextImage}
-											isBlurred
-											alt="Anime Poster"
+											alt="Movie Poster"
 											src={`https://sup-proxy.zephex0-f6c.workers.dev/api-content?url=https://image.tmdb.org/t/p/original${item.poster_path}`}
 											width={270}
 											height={180}
-											className="h-64 overflow-hidden"
-											shadow="lg"
+											className="h-64 rounded-md overflow-hidden"
 											priority
 										/>
 									</CardBody>
diff --git a/src/app/page.jsx b/src/app/page.jsx
index 4c99113..6a8e0aa 100644
--- a/src/app/page.jsx
+++ b/src/app/page.jsx
@@ -1,11 +1,5 @@
-import {
-	Card,
-	CardHeader,
-	CardBody,
-	Divider,
-	Link,
-	Image,
-} from "@nextui-org/react";
+import { Card, CardHeader, CardBody, Divider, Link } from "@nextui-org/react";
+import Image from "next/image";
 
 export default async function Home() {
 	const homePageCards = (title, message, url) => {
@@ -17,8 +11,8 @@ export default async function Home() {
 							alt="nextui logo"
 							height={40}
 							width={40}
-							radius="sm"
 							src={url}
+							className="rounded-md"
 						/>
 						<div className="flex flex-col">
 							<p className="text-md">{title}</p>
diff --git a/utils/anime_urls.js b/utils/anime_urls.js
index e7a0457..9bbf4e8 100644
--- a/utils/anime_urls.js
+++ b/utils/anime_urls.js
@@ -1,10 +1,13 @@
 import { PROXY } from "./movie_urls";
 
 // Using gogoanime
-export const base_url = `${PROXY}https://consumet-jade.vercel.app/anime/gogoanime`;
-export const popular_url = `${base_url}/popular`;
-export const top_airing_url = `${base_url}/top-airing`;
-export const recent_epsiodes_url = `${base_url}/recent-episodes`;
-export const search_url = (title) => `${base_url}/${title}`;
-export const info_url = (id) => `${base_url}/info/${id}`;
-export const watch_url = (episodeId) => `${base_url}/watch/${episodeId}`;
+export const base_url = `https://consumet-jade.vercel.app/anime/gogoanime`;
+export const popular_url = `${PROXY}${base_url}/popular`;
+export const top_airing_url = `${PROXY}${base_url}/top-airing`;
+export const recent_epsiodes_url = `${PROXY}${base_url}/recent-episodes`;
+export const search_url = (title) => `${PROXY}${base_url}/${title}`;
+export const info_url = (id) => {
+	return `${PROXY}${base_url}/info/${id}`;
+};
+export const watch_url = (episodeId) =>
+	`${PROXY}${base_url}/watch/${episodeId}`;
diff --git a/utils/kdrama_urls.js b/utils/kdrama_urls.js
index f671839..acea986 100644
--- a/utils/kdrama_urls.js
+++ b/utils/kdrama_urls.js
@@ -2,14 +2,16 @@ const base_url_one = "https://dramacool-scraper.vercel.app";
 const base_url_two = "https://consumet-jade.vercel.app/movies/dramacool";
 const proxy_url = "https://sup-proxy.zephex0-f6c.workers.dev/api-json?url=";
 
-export const popular_dramas_url = `${base_url_one}/popular`;
+export const popular_dramas_url = `${proxy_url}${base_url_one}/popular`;
 
-export const recent_drama_url = `${base_url_one}/recent`;
+export const recent_drama_url = `${proxy_url}${base_url_one}/recent`;
 
-export const search_drama_url = (title) => `${base_url_two}/${title}`;
+export const search_drama_url = (title) =>
+	`${proxy_url}${base_url_two}/${title}`;
 
-export const drama_info_url = (id) => `${base_url_two}/info?id=${id}`;
+export const drama_info_url = (id) =>
+	`${proxy_url}${base_url_two}/info?id=${id}`;
 
 export const videoURL = (episodeId, mediaId) => {
-	return `https://consumet-jade.vercel.app/movies/dramacool/watch?episodeId=${episodeId}&mediaId=${mediaId}`;
+	return `${proxy_url}${base_url_two}/watch?episodeId=${episodeId}&mediaId=${mediaId}`;
 };