aboutsummaryrefslogtreecommitdiff
path: root/pages
diff options
context:
space:
mode:
authorFactiven <[email protected]>2023-04-20 14:28:45 +0700
committerFactiven <[email protected]>2023-04-20 14:28:45 +0700
commitf1ed2b18f90b89caf47f678204d0179c640aa5e6 (patch)
treeef25e4055209bede40d0451bfa57c0e78b28eea5 /pages
parentUpdate [...id].js (diff)
downloadmoopa-f1ed2b18f90b89caf47f678204d0179c640aa5e6.tar.xz
moopa-f1ed2b18f90b89caf47f678204d0179c640aa5e6.zip
Improve Performance 1
Diffstat (limited to 'pages')
-rw-r--r--pages/anime/[...id].js146
-rw-r--r--pages/anime/watch/[...info].js192
2 files changed, 142 insertions, 196 deletions
diff --git a/pages/anime/[...id].js b/pages/anime/[...id].js
index d5db21e..c7ab23f 100644
--- a/pages/anime/[...id].js
+++ b/pages/anime/[...id].js
@@ -17,16 +17,14 @@ export default function Himitsu({
color,
episodeList,
episode1,
- subIndo,
- epIndo,
sessions,
progress,
status,
lastPlayed,
+ stall,
}) {
const [showText, setShowtext] = useState(false);
const [load, setLoad] = useState(true);
- const [Lang, setLang] = useState(true);
const [showAll, setShowAll] = useState(false);
const [time, setTime] = useState(0);
@@ -35,14 +33,6 @@ export default function Himitsu({
const maxItems = 3;
- function handleEnLang() {
- setLang(true);
- }
-
- function handleIdLang() {
- setLang(false);
- }
-
const nextAir = info.nextAiringEpisode;
// console.log(time);
@@ -75,13 +65,6 @@ export default function Himitsu({
setLoad(false);
}, [color, sessions, info.id]);
- let episodeIndo = null;
- if (epIndo < 17) {
- episodeIndo = episode.slice(0, epIndo);
- } else {
- episodeIndo = episode;
- }
-
return (
<>
<Head>
@@ -235,7 +218,7 @@ export default function Himitsu({
className={`dynamic-text rounded-md px-2 font-karla font-bold`}
style={color}
>
- Sub | {subIndo === null ? "EN" : "EN/ID"}
+ Sub | EN
</div>
{nextAir && (
<div
@@ -362,24 +345,25 @@ export default function Himitsu({
</h1>
<div className="flex items-center rounded-md">
<button
- onClick={handleEnLang}
+ // onClick={handleEnLang}
className={
- Lang
- ? `w-14 p-1 rounded-l-md bg-secondary text-action shadow-action`
- : `w-14 p-1 rounded-l-md bg-[#17171b] text-[#404040]`
+ // Lang?
+ `w-14 p-1 rounded-l-md bg-secondary text-action shadow-action`
+ // `w-14 p-1 rounded-l-md bg-[#17171b] text-[#404040]`
}
>
EN
</button>
<div className="w-[1px] bg-white h-4" />
<button
- onClick={handleIdLang}
+ // onClick={handleIdLang}
className={
- subIndo === null
- ? `w-14 p-1 rounded-r-md bg-[#171717] text-[#404040] pointer-events-none`
- : Lang
- ? `w-14 p-1 rounded-r-md bg-[#171717] text-[#404040]`
- : `w-14 p-1 rounded-r-md bg-[#212121]`
+ // subIndo === null
+ // ?
+ `w-14 p-1 rounded-r-md bg-[#171717] text-[#404040] pointer-events-none`
+ // : Lang
+ // ? `w-14 p-1 rounded-r-md bg-[#171717] text-[#404040]`
+ // : `w-14 p-1 rounded-r-md bg-[#212121]`
}
>
ID
@@ -399,16 +383,13 @@ export default function Himitsu({
<div className="flex h-[640px] flex-col gap-5 scrollbar-thin scrollbar-thumb-[#1b1c21] scrollbar-thumb-rounded-full overflow-y-scroll hover:scrollbar-thumb-[#2e2f37]">
{load ? (
<p>Loading...</p>
- ) : episode && Lang ? (
+ ) : episode ? (
episode.map((episode, index) => {
- const item = lastPlayed?.find(
- (item) => item.id === episode.id
- );
return (
<div key={index} className="flex flex-col gap-3 px-2">
<Link
href={`/anime/watch/${episode.id}/${info.id}/${
- item ? `${item.time}` : ""
+ stall ? `9anime` : ""
}`}
className={`text-start text-sm md:text-lg ${
episode.number <= progress
@@ -433,46 +414,8 @@ export default function Himitsu({
</div>
);
})
- ) : subIndo === null ? (
- <p>No Episodes Available</p>
) : (
- <>
- <div className="flex h-[640px] flex-col gap-5 overflow-y-hidden scrollbar-thin scrollbar-thumb-[#1b1c21] scrollbar-thumb-rounded-full hover:overflow-y-scroll hover:scrollbar-thumb-[#2e2f37]">
- {episodeIndo.map((episode, index) => {
- return (
- <div key={index} className="flex flex-col gap-3">
- <Link
- onClick={() =>
- handleStore({
- title:
- info.title?.english ||
- info.title.romaji ||
- info.title.native,
- description: info.description,
- image: info.image,
- id: info.id,
- })
- }
- href={`/anime/watch?title=${encodeURIComponent(
- info.title?.romaji || info.title?.english
- )}&id=${subIndo}&idInt=${info.id}&epi=${
- episode.number
- }&epiTitle=${encodeURIComponent(
- episode.title
- )}&te=${epIndo}&sub=id`}
- className="text-start text-xl"
- >
- <p>Episode {episode.number}</p>
- <p className="text-[14px] text-[#b1b1b1] italic">
- "{episode.title}" (Sub Indonesia)
- </p>
- </Link>
- <div className="h-[1px] bg-white" />
- </div>
- );
- })}
- </div>
- </>
+ <p>No Episodes Available</p>
)}
</div>
</div>
@@ -532,59 +475,15 @@ export async function getServerSideProps(context) {
}
let episodeList = episodes;
+ let stall = false;
+
if (episodes.length === 0) {
const res = await fetch(
- `https://api.moopa.my.id/anime/gogoanime/${
- info.title.romaji || info.title.english
- }`
+ `https://api.consumet.org/meta/anilist/info/${id[0]}?provider=9anime`
);
const data = await res.json();
- const match = closestMatch(
- info.title.romaji,
- data.results.map((item) => item.title)
- );
- const anime = data.results.filter((item) => item.title === match);
- if (anime.length !== 0) {
- const infos = await fetch(
- `https://api.moopa.my.id/anime/gogoanime/info/${anime[0].id}`
- ).then((res) => res.json());
- episodeList = infos.episodes;
- }
- }
-
- const ress = await fetch(
- `https://ani-api-eight.vercel.app/nanime/search?query=${
- info.title.romaji || info.title?.english
- }`
- );
-
- const yes = await ress.json();
-
- // Clannad Fixer
- function convertToClannad(text) {
- const regex = /(?<!\w)CLANNAD(?!\w)/g;
- return text.replace(regex, "Clannad");
- }
-
- const fixedTitle = convertToClannad(info.title.romaji);
-
- let epis = null;
- let slug = null;
-
- if (!yes.error) {
- // let anime = yes.list.filter((item) => item.title.includes(fixedTitle));
- let list = yes.list.map((item) => item.title);
- const match = closestMatch(fixedTitle, list);
-
- const anime = yes.list.filter((item) => item.title === match);
-
- slug = anime[0]?.slug;
- const inf = await fetch(
- `https://ani-api-eight.vercel.app/nanime/anime/${slug}`
- );
-
- const dataInf = await inf.json();
- epis = dataInf.episode;
+ episodeList = data.episodes;
+ stall = true;
}
let progress = null;
@@ -707,12 +606,11 @@ export async function getServerSideProps(context) {
color,
episodeList,
episode1: epi1,
- subIndo: slug,
- epIndo: epis,
sessions: session,
progress: progress || null,
status: status,
lastPlayed: lastPlayed || null,
+ stall,
},
};
}
diff --git a/pages/anime/watch/[...info].js b/pages/anime/watch/[...info].js
index c70f290..3c29888 100644
--- a/pages/anime/watch/[...info].js
+++ b/pages/anime/watch/[...info].js
@@ -23,7 +23,7 @@ const VideoPlayer = dynamic(() =>
import("../../../components/videoPlayer", { ssr: false })
);
-export default function Info({ sessions, id, aniId }) {
+export default function Info({ sessions, id, aniId, provider }) {
const [epiData, setEpiData] = useState(null);
const [data, setAniData] = useState(null);
const [fallback, setEpiFallback] = useState(null);
@@ -31,6 +31,7 @@ export default function Info({ sessions, id, aniId }) {
const [statusWatch, setStatusWatch] = useState("CURRENT");
const [playingEpisode, setPlayingEpisode] = useState(null);
const [loading, setLoading] = useState(false);
+ const [playingTitle, setPlayingTitle] = useState(null);
// console.log(epiData);
@@ -68,22 +69,40 @@ export default function Info({ sessions, id, aniId }) {
let epiFallback = null;
try {
- const res = await fetch(
- `https://api.moopa.my.id/meta/anilist/watch/${id}`
- );
- const epiData = await res.json();
- setEpiData(epiData);
+ if (provider) {
+ const res = await fetch(
+ `https://api.consumet.org/meta/anilist/watch/${id}?provider=9anime`
+ );
+ const epiData = await res.json();
+ setEpiData(epiData);
+ } else {
+ const res = await fetch(
+ `https://api.moopa.my.id/meta/anilist/watch/${id}`
+ );
+ const epiData = await res.json();
+ setEpiData(epiData);
+ }
} catch (error) {
setTimeout(() => {
window.location.reload();
}, 3000);
}
- const res2 = await fetch(
- `https://api.moopa.my.id/meta/anilist/info/${aniId}`
- );
- const aniData = await res2.json();
- setAniData(aniData);
+ let aniData = null;
+
+ if (provider) {
+ const res = await fetch(
+ `https://api.consumet.org/meta/anilist/info/${aniId}?provider=9anime`
+ );
+ aniData = await res.json();
+ setAniData(aniData);
+ } else {
+ const res2 = await fetch(
+ `https://api.moopa.my.id/meta/anilist/info/${aniId}`
+ );
+ aniData = await res2.json();
+ setAniData(aniData);
+ }
if (aniData.episodes.length === 0) {
const res = await fetch(
@@ -118,6 +137,13 @@ export default function Info({ sessions, id, aniId }) {
setPlayingEpisode(playingEpisode);
+ const title = aniData.episodes
+ .filter((item) => item.id == id)
+ .find((item) => item.title !== null);
+ setPlayingTitle(
+ title?.title || aniData.title?.romaji || aniData.title?.english
+ );
+
const res4 = await fetch(
`https://api.aniskip.com/v2/skip-times/${aniData.malId}/${parseInt(
playingEpisode
@@ -256,18 +282,12 @@ export default function Info({ sessions, id, aniId }) {
console.log(formData);
};
- const playingTitle = data?.episodes
- .filter((item) => item.id == id)
- .map((item) => item.title);
-
- // console.log(skip);
+ // console.log(playingTitle.title);
return (
<>
<Head>
- <title>
- {fallback ? data.title.romaji || data.title.english : playingTitle}
- </title>
+ <title>{playingTitle}</title>
</Head>
{/* <NotificationComponent /> */}
@@ -373,7 +393,7 @@ export default function Info({ sessions, id, aniId }) {
/>
</div>
) : (
- <div className="lg:h-[693px] h-[225px] xs:h-[281px] bg-image" />
+ <div className="lg:h-[693px] h-[225px] xs:h-[281px] bg-black" />
)}
<div>
{data ? (
@@ -387,7 +407,9 @@ export default function Info({ sessions, id, aniId }) {
href={`/anime/${data.id}`}
className="inline hover:underline"
>
- {item.title}
+ {item.title ||
+ data.title.romaji ||
+ data.title.english}
</Link>
</div>
<h4 className="text-sm font-karla font-light">
@@ -530,60 +552,84 @@ export default function Info({ sessions, id, aniId }) {
<div className="grid gap-5 lg:px-5 px-2 py-2 scrollbar-thin scrollbar-thumb-[#313131] scrollbar-thumb-rounded-full">
{data ? (
data.episodes.length > 0 ? (
- data.episodes.map((item) => {
- return (
- <Link
- href={`/anime/watch/${item.id}/${data.id}`}
- key={item.id}
- className={`bg-secondary flex w-full h-[110px] rounded-lg scale-100 transition-all duration-300 ease-out ${
- item.id == id
- ? "pointer-events-none ring-1 ring-action"
- : "cursor-pointer hover:scale-[1.02] ring-0 hover:ring-1 hover:shadow-lg ring-white"
- }`}
- >
- <div className="w-[40%] h-full relative shrink-0">
- <Image
- src={item.image}
- alt="image"
- height={1000}
- width={1000}
- className={`object-cover rounded-lg h-[110px] shadow-[4px_0px_5px_0px_rgba(0,0,0,0.3)] ${
- item.id == id
- ? "brightness-[30%]"
- : "brightness-75"
+ data.episodes.some(
+ (item) => item.title && item.description
+ ) ? (
+ data.episodes.map((item) => {
+ return (
+ <Link
+ href={`/anime/watch/${item.id}/${data.id}${
+ provider ? "/9anime" : ""
+ }`}
+ key={item.id}
+ className={`bg-secondary flex w-full h-[110px] rounded-lg scale-100 transition-all duration-300 ease-out ${
+ item.id == id
+ ? "pointer-events-none ring-1 ring-action"
+ : "cursor-pointer hover:scale-[1.02] ring-0 hover:ring-1 hover:shadow-lg ring-white"
+ }`}
+ >
+ <div className="w-[40%] h-full relative shrink-0">
+ <Image
+ src={item.image}
+ alt="image"
+ height={1000}
+ width={1000}
+ className={`object-cover rounded-lg h-[110px] shadow-[4px_0px_5px_0px_rgba(0,0,0,0.3)] ${
+ item.id == id
+ ? "brightness-[30%]"
+ : "brightness-75"
+ }`}
+ />
+ <span className="absolute bottom-2 left-2 font-karla font-light text-sm">
+ Episode {item.number}
+ </span>
+ {item.id == id && (
+ <div className="absolute top-11 left-[105px] scale-[1.5]">
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ viewBox="0 0 20 20"
+ fill="currentColor"
+ className="w-5 h-5"
+ >
+ <path d="M6.3 2.841A1.5 1.5 0 004 4.11V15.89a1.5 1.5 0 002.3 1.269l9.344-5.89a1.5 1.5 0 000-2.538L6.3 2.84z" />
+ </svg>
+ </div>
+ )}
+ </div>
+ <div
+ className={`w-[70%] h-full select-none p-4 flex flex-col gap-2 ${
+ item.id == id ? "text-[#7a7a7a]" : ""
}`}
- />
- <span className="absolute bottom-2 left-2 font-karla font-light text-sm">
- Episode {item.number}
- </span>
- {item.id == id && (
- <div className="absolute top-11 left-[105px] scale-[1.5]">
- <svg
- xmlns="http://www.w3.org/2000/svg"
- viewBox="0 0 20 20"
- fill="currentColor"
- className="w-5 h-5"
- >
- <path d="M6.3 2.841A1.5 1.5 0 004 4.11V15.89a1.5 1.5 0 002.3 1.269l9.344-5.89a1.5 1.5 0 000-2.538L6.3 2.84z" />
- </svg>
- </div>
- )}
- </div>
- <div
- className={`w-[70%] h-full select-none p-4 flex flex-col gap-2 ${
- item.id == id ? "text-[#7a7a7a]" : ""
+ >
+ <h1 className="font-karla font-bold italic line-clamp-1">
+ {item.title}
+ </h1>
+ <p className="line-clamp-2 text-xs italic font-outfit font-extralight">
+ {item.description}
+ </p>
+ </div>
+ </Link>
+ );
+ })
+ ) : (
+ data.episodes.map((item) => {
+ return (
+ <Link
+ href={`/anime/watch/${item.id}/${data.id}${
+ provider ? "/9anime" : ""
+ }`}
+ key={item.id}
+ className={`bg-secondary flex-center w-full h-[50px] rounded-lg scale-100 transition-all duration-300 ease-out ${
+ item.id == id
+ ? "pointer-events-none ring-1 ring-action text-[#5d5d5d]"
+ : "cursor-pointer hover:scale-[1.02] ring-0 hover:ring-1 hover:shadow-lg ring-white"
}`}
>
- <h1 className="font-karla font-bold italic line-clamp-1">
- {item.title}
- </h1>
- <p className="line-clamp-2 text-xs italic font-outfit font-extralight">
- {item.description}
- </p>
- </div>
- </Link>
- );
- })
+ Episode {item.number}
+ </Link>
+ );
+ })
+ )
) : (
fallback &&
fallback.map((item) => {
@@ -633,12 +679,14 @@ export async function getServerSideProps(context) {
const id = info[0];
const aniId = info[1];
+ const provider = info[2] || null;
return {
props: {
sessions: session,
id,
aniId,
+ provider,
},
};
}
generated by cgit v1.2.3 (git 2.25.1) at 2026-04-21 08:35:45 +0000