diff options
| -rw-r--r-- | components/videoPlayer.js | 2 | ||||
| -rw-r--r-- | package-lock.json | 4 | ||||
| -rw-r--r-- | package.json | 2 | ||||
| -rw-r--r-- | pages/anime/[...id].js | 33 | ||||
| -rw-r--r-- | pages/anime/watch/[...info].js | 92 |
5 files changed, 103 insertions, 30 deletions
diff --git a/components/videoPlayer.js b/components/videoPlayer.js index 8594645..b57799e 100644 --- a/components/videoPlayer.js +++ b/components/videoPlayer.js @@ -183,4 +183,4 @@ export default function VideoPlayer({ )} </> ); -}
\ No newline at end of file +} diff --git a/package-lock.json b/package-lock.json index bdb2ab2..5547b28 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "moopa", - "version": "3.5.7", + "version": "3.5.8", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "moopa", - "version": "3.5.7", + "version": "3.5.8", "dependencies": { "@apollo/client": "^3.7.3", "@heroicons/react": "^2.0.17", diff --git a/package.json b/package.json index 1106b7e..0062330 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "moopa", - "version": "3.5.7", + "version": "3.5.8", "private": true, "scripts": { "dev": "next dev", diff --git a/pages/anime/[...id].js b/pages/anime/[...id].js index dc385f9..a2c84a4 100644 --- a/pages/anime/[...id].js +++ b/pages/anime/[...id].js @@ -20,6 +20,7 @@ import Modal from "../../components/modal"; import { signIn, useSession } from "next-auth/react"; import AniList from "../../components/media/aniList"; import ListEditor from "../../components/listEditor"; +import { closestMatch } from "closest-match"; const query = ` query ($username: String, $status: MediaListStatus) { @@ -143,7 +144,6 @@ const infoQuery = `query ($id: Int) { export default function Info({ info, color }) { const { data: session } = useSession(); const [data, setData] = useState(null); - // const [infos, setInfo] = useState(null); const [episode, setEpisode] = useState(null); const [loading, setLoading] = useState(false); const [progress, setProgress] = useState(0); @@ -151,8 +151,6 @@ export default function Info({ info, color }) { const [stall, setStall] = useState(false); const [domainUrl, setDomainUrl] = useState(""); - // console.log(info); - const [showAll, setShowAll] = useState(false); const [open, setOpen] = useState(false); @@ -240,10 +238,28 @@ export default function Info({ info, color }) { if (!data || data?.episodes?.length === 0) { const res = await fetch( - `https://api.consumet.org/meta/anilist/info/${id[0]}?provider=9anime` + `https://api.moopa.my.id/anime/gogoanime/${info.title.romaji}` ); const datas = await res.json(); - if (res.status === 500) { + + if (datas) { + const release = datas.results.map((i) => i.releaseDate); + const match = closestMatch(info.startDate.year, release); + const filter = datas.results.find((i) => i.releaseDate === match); + + // const found = filter.find((i) => i.title === info.title.romaji); + + // setLog(found); + + if (filter) { + const res = await fetch( + `https://api.moopa.my.id/anime/gogoanime/info/${filter.id}` + ); + const dataA = await res.json(); + setEpisode(dataA.episodes); + // setLog(dataA); + } + } else if (res.status === 500) { setEpisode(null); setEpiStatus("error"); setError(datas.message); @@ -254,7 +270,6 @@ export default function Info({ info, color }) { // backgroundColor: `${data?.color || "#ffff"}`, // color: textColor, // }); - setStall(true); } else { setEpisode(data.episodes); } @@ -323,7 +338,7 @@ export default function Info({ info, color }) { } } fetchData(); - }, [id, session?.user?.name]); + }, [id, session?.user?.name, info]); function handleOpen() { setOpen(true); @@ -718,7 +733,7 @@ export default function Info({ info, color }) { data && ( <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]"> {epiStatus === "ok" ? ( - episode?.length !== 0 ? ( + episode?.length !== 0 && episode ? ( episode?.map((epi, index) => { return ( <div @@ -726,7 +741,7 @@ export default function Info({ info, color }) { className="flex flex-col gap-3 px-2" > <Link - href={`/anime/watch/${epi.id}/${data.id}/${ + href={`/anime/watch/${epi.id}/${info.id}/${ stall ? `9anime` : "" }`} className={`text-start text-sm lg:text-lg ${ diff --git a/pages/anime/watch/[...info].js b/pages/anime/watch/[...info].js index 29adfd5..fd6afd8 100644 --- a/pages/anime/watch/[...info].js +++ b/pages/anime/watch/[...info].js @@ -108,14 +108,13 @@ export default function Info({ sessions, id, aniId, provider }) { }` ); 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); + const release = data.results.map((i) => i.releaseDate); + + const match = closestMatch(aniData.startDate.year, release); + const anime = data.results.find((i) => i.releaseDate === match); if (anime.length !== 0) { const infos = await fetch( - `https://api.moopa.my.id/anime/gogoanime/info/${anime[0].id}` + `https://api.moopa.my.id/anime/gogoanime/info/${anime.id}` ).then((res) => res.json()); epiFallback = infos.episodes; } @@ -126,7 +125,7 @@ export default function Info({ sessions, id, aniId, provider }) { .filter((item) => item.id == id) .map((item) => item.number); - if (playingEpisode == 0) { + if (aniData.episodes.length === 0) { playingEpisode = epiFallback .filter((item) => item.id == id) .map((item) => item.number); @@ -393,18 +392,77 @@ export default function Info({ sessions, id, aniId, provider }) { fallback .filter((item) => item.id == id) .map((item) => ( - <div key={item.id} className="p-3 grid gap-2"> - <div className="text-xl font-outfit font-semibold line-clamp-2"> - <Link - href={`/anime/${data.id}`} - className="inline hover:underline" + <div key={item.id} className="flex justify-between"> + <div className="p-3 grid gap-2 w-[60%]"> + <div className="text-xl font-outfit font-semibold line-clamp-2"> + <Link + href={`/anime/${data.id}`} + className="inline hover:underline" + > + {data.title.romaji || data.title.english} + </Link> + </div> + <h4 className="text-sm font-karla font-light"> + Episode {item.number} + </h4> + </div> + <div className="w-[50%] flex gap-4 items-center justify-end px-4"> + <div className="relative"> + <select + className="flex items-center gap-5 rounded-[3px] bg-secondary py-1 px-3 pr-8 font-karla appearance-none cursor-pointer" + value={item.number} + onChange={(e) => { + const selectedEpisode = fallback.find( + (episode) => + episode.number === + parseInt(e.target.value) + ); + router.push( + `/anime/watch/${selectedEpisode.id}/${data.id}` + ); + }} + > + {fallback.map((episode) => ( + <option + key={episode.number} + value={episode.number} + > + Episode {episode.number} + </option> + ))} + </select> + <ChevronDownIcon className="absolute right-2 top-1/2 transform -translate-y-1/2 w-5 h-5 pointer-events-none" /> + </div> + <button + className={`${ + item.number === fallback.length + ? "pointer-events-none" + : "" + } relative group`} + onClick={() => { + const currentEpisodeIndex = + fallback.findIndex( + (episode) => + episode.number === item.number + ); + if ( + currentEpisodeIndex !== -1 && + currentEpisodeIndex < fallback.length - 1 + ) { + const nextEpisode = + fallback[currentEpisodeIndex + 1]; + router.push( + `/anime/watch/${nextEpisode.id}/${data.id}` + ); + } + }} > - {data.title.romaji || data.title.english} - </Link> + <span className="absolute z-[9999] -left-11 -top-14 p-2 shadow-xl rounded-md transform transition-all whitespace-nowrap bg-secondary lg:group-hover:block group-hover:opacity-1 hidden font-karla font-bold"> + Next Episode + </span> + <ForwardIcon className="w-6 h-6" /> + </button> </div> - <h4 className="text-sm font-karla font-light"> - Episode {item.number} - </h4> </div> ))} </> |