From 1fcdd9f7d859b925bf92265f441655d5522e351c Mon Sep 17 00:00:00 2001 From: Factiven Date: Tue, 11 Apr 2023 23:23:29 +0700 Subject: initial commit --- pages/anime/watch/[...info].js | 323 +++++++++++++++++++++++++++++++++++++++++ 1 file changed, 323 insertions(+) create mode 100644 pages/anime/watch/[...info].js (limited to 'pages/anime/watch') diff --git a/pages/anime/watch/[...info].js b/pages/anime/watch/[...info].js new file mode 100644 index 0000000..73e04f5 --- /dev/null +++ b/pages/anime/watch/[...info].js @@ -0,0 +1,323 @@ +import Layout from "../../../components/layout"; +// import { data } from "../../../lib/testData"; +// import { aniData } from "../../../lib/infoData"; +import Image from "next/image"; +import VideoPlayer from "../../../components/videoPlayer"; +import Link from "next/link"; +import { closestMatch } from "closest-match"; +import Head from "next/head"; +import { useEffect, useState } from "react"; +import Modal from "../../../components/modal"; + +export default function Info({ info }) { + const title = info.aniData.title.romaji || info.aniData.title.english; + const data = info.aniData; + const fallback = info.epiFallback; + + const [open, setOpen] = useState(false); + + const playingTitle = data.episodes + .filter((item) => item.id == info.id) + .map((item) => item.title); + + return ( + <> + + + {fallback ? data.title.romaji || data.title.english : playingTitle} + + + setOpen(false)}> +
+
+

+ Save this Anime to Your List +

+

+ Are you sure you want to save this anime to your list? +

+
+ + +
+
+
+ +
+
+
+ +
+
+
+ {data.episodes.length > 0 ? ( + data.episodes + .filter((items) => items.id == info.id) + .map((item) => ( +
+
+ + {item.title} + +
+

+ Episode {item.number} +

+
+ )) + ) : ( + <> + {fallback + .filter((item) => item.id == info.id) + .map((item) => ( +
+
+ + {title} + +
+

+ Episode {item.number} +

+
+ ))} + + )} +
+
+
+
+
+ Anime Cover +
+
+
+

+ Studios +

+
{data.studios}
+
+
setOpen(true)}> + + + + {/* + Save to My List + */} +
+
+
+
+

+ Status +

+
{data.status}
+
+
+

+ Titles +

+
+
+ {data.title.romaji || ""} +
+
+ {data.title.english || ""} +
+
+ {data.title.native || ""} +
+
+
+
+
+
+ {data.genres.map((item, index) => ( +
+ {item} +
+ ))} +
+
+

+

+
+
+
+
+

+ Episodes +

+
+ {data.episodes.length > 0 + ? data.episodes.map((item) => { + return ( + +
+ image + + Episode {item.number} + + {item.id == info.id && ( +
+ + + +
+ )} +
+
+

+ {item.title} +

+

+ {item.description} +

+
+ + ); + }) + : fallback.map((item) => { + return ( + + Episode {item.number} + + ); + })} +
+
+
+ + ); +} + +export async function getServerSideProps(context) { + const { info } = context.query; + if (!info) { + return { + notFound: true, + }; + } + + const id = info[0]; + const aniId = info[1]; + const seek = info[2] || 0; + let epiFallback = null; + + const res = await fetch(`https://api.moopa.my.id/meta/anilist/watch/${id}`); + const epiData = await res.json(); + + const res2 = await fetch( + `https://api.moopa.my.id/meta/anilist/info/${aniId}` + ); + const aniData = await res2.json(); + + if (aniData.episodes.length === 0) { + const res = await fetch( + `https://api.moopa.my.id/anime/gogoanime/${ + aniData.title.romaji || aniData.title.english + }` + ); + const data = await res.json(); + const match = closestMatch( + aniData.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()); + epiFallback = infos.episodes; + } + } + + return { + props: { + info: { + id, + seek, + epiData, + aniData, + epiFallback, + }, + }, + }; +} -- cgit v1.2.3