Update v3.6.0

> We switch back to gogo as a source and this will fix the video won't play on iOS devices
> Removed subtitle function since gogo doesn't provide external subtitle

2 files changed, 42 insertions, 308 deletions

diff --git a/pages/anime/[...id].js b/pages/anime/[...id].js
index cd37525..867e429 100644
--- a/pages/anime/[...id].js
+++ b/pages/anime/[...id].js
@@ -20,7 +20,6 @@ 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,12 +142,10 @@ const infoQuery = `query ($id: Int) {
 
 export default function Info({ info, color }) {
   const { data: session } = useSession();
-  const [data, setData] = useState(null);
   const [episode, setEpisode] = useState(null);
   const [loading, setLoading] = useState(false);
   const [progress, setProgress] = useState(0);
   const [statuses, setStatuses] = useState(null);
-  const [stall, setStall] = useState(false);
   const [domainUrl, setDomainUrl] = useState("");
 
   const [showAll, setShowAll] = useState(false);
@@ -157,9 +154,6 @@ export default function Info({ info, color }) {
   const [time, setTime] = useState(0);
   const { id } = useRouter().query;
 
-  const [epiStatus, setEpiStatus] = useState("ok");
-  const [error, setError] = useState(null);
-
   const rec = info?.recommendations?.nodes.map(
     (data) => data.mediaRecommendation
   );
@@ -167,121 +161,26 @@ export default function Info({ info, color }) {
   useEffect(() => {
     const { protocol, host } = window.location;
     const url = `${protocol}//${host}`;
-
     setDomainUrl(url);
 
-    const defaultState = {
-      data: null,
-      // info: null,
-      episode: null,
-      loading: true,
-      statuses: null,
-      progress: null,
-      stall: false,
-      EpiStatus: "ok",
-      error: null,
-    };
-
-    // Reset all state variables to their default values
-    Object.keys(defaultState).forEach((key) => {
-      document.body.style.overflow = "auto";
-      const value = defaultState[key];
-      if (Array.isArray(value)) {
-        value.length
-          ? eval(
-              `set${
-                key.charAt(0).toUpperCase() + key.slice(1)
-              }(${JSON.stringify(value)})`
-            )
-          : eval(`set${key.charAt(0).toUpperCase() + key.slice(1)}([])`);
-      } else {
-        eval(
-          `set${key.charAt(0).toUpperCase() + key.slice(1)}(${JSON.stringify(
-            value
-          )})`
-        );
-      }
-    });
     async function fetchData() {
+      setLoading(true);
       if (id) {
-        setLoading(false);
         try {
-          const [res] = await Promise.all([
-            fetch(
-              `https://api.moopa.my.id/meta/anilist/info/${id?.[0]}?provider=zoro`
-            ),
-            // fetch("https://graphql.anilist.co/", {
-            //   method: "POST",
-            //   headers: {
-            //     "Content-Type": "application/json",
-            //   },
-            //   body: JSON.stringify({
-            //     query: infoQuery,
-            //     variables: {
-            //       id: id?.[0],
-            //     },
-            //   }),
-            // }),
-          ]);
+          setEpisode(null)
+          const res = await fetch(`https://api.moopa.my.id/meta/anilist/info/${info.id}`)
           const data = await res.json();
-          // const infos = await info.json();
 
           if (res.status === 500) {
-            setEpisode(null);
-            setEpiStatus("error");
-            setError(data.message);
+            setEpisode([]);
           } else if (res.status === 404) {
             window.location.href("/404");
-          }
-          // setInfo(infos.data.Media);
-          // setLog(data);
-
-          // const textColor = setTxtColor(infos.data.Media.coverImage?.color);
-
-          if (!data || data?.episodes?.length === 0) {
-            // const res = await fetch(
-            //   `https://api.moopa.my.id/anime/gogoanime/${info.title.romaji}`
-            // );
-            // const datas = await res.json();
-
-            // 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);
-            //   }
-            // }
-            // if (res.status === 500) {
-            //   setEpisode(null);
-            //   setEpiStatus("error");
-            //   setError(datas.message);
-            // } else {
+          } else if (!data || data?.episodes?.length === 0) {
             setEpisode([]);
-            // }
-            // setColor({
-            //   backgroundColor: `${data?.color || "#ffff"}`,
-            //   color: textColor,
-            // });
           } else {
-            setEpisode(data.episodes);
+            setEpisode(data.episodes?.reverse());
           }
 
-          // setColor({
-          //   backgroundColor: `${data?.color || "#ffff"}`,
-          //   color: textColor,
-          // });
-
           if (session?.user?.name) {
             const response = await fetch("https://graphql.anilist.co/", {
               method: "POST",
@@ -330,8 +229,7 @@ export default function Info({ info, color }) {
             );
           }
 
-          setData(data);
-          setLoading(true);
+          setLoading(false);
         } catch (error) {
           console.log(error);
           setTimeout(() => {
@@ -397,7 +295,7 @@ export default function Info({ info, color }) {
               </button>
             </div>
           )}
-          {session && loading && info && (
+          {session && info && (
             <ListEditor
               animeId={info?.id}
               session={session}
@@ -437,7 +335,6 @@ export default function Info({ info, color }) {
               <div className="lg:hidden pt-5 w-screen px-5 flex flex-col">
                 <div className="h-[250px] flex flex-col gap-1 justify-center">
                   <h1 className="font-karla font-extrabold text-lg line-clamp-1 w-[70%]">
-                    {/* Yuru Camp△ SEASON 2 */}
                     {info?.title?.romaji || info?.title?.english}
                   </h1>
                   <p
@@ -454,12 +351,8 @@ export default function Info({ info, color }) {
                         <span
                           key={index}
                           className="px-2 py-1 bg-secondary shadow-lg font-outfit font-light rounded-full"
-                          // style={color}
                         >
                           <span className="">{item}</span>
-                          {/* {index !== info?.genres?.length - 1 && (
-                            <span className="w-[5px] h-[5px] ml-[6px] mb-[2px] inline-block rounded-full bg-white" />
-                          )} */}
                         </span>
                       ))}
                   </div>
@@ -471,7 +364,7 @@ export default function Info({ info, color }) {
                           className="bg-action px-10 rounded-sm font-karla font-bold"
                           onClick={() => handleOpen()}
                         >
-                          {loading
+                          {!loading
                             ? statuses
                               ? statuses.name
                               : "Add to List"
@@ -533,7 +426,7 @@ export default function Info({ info, color }) {
                         className="bg-action flex-center z-20 h-[20px] w-[180px] absolute bottom-0 rounded-sm font-karla font-bold"
                         onClick={() => handleOpen()}
                       >
-                        {loading
+                        {!loading
                           ? statuses
                             ? statuses.name
                             : "Add to List"
@@ -621,7 +514,7 @@ export default function Info({ info, color }) {
 
               <div>
                 <div className="flex gap-5 items-center">
-                  {info && (
+                  {info?.relations?.edges?.length > 0 && (
                     <div className="p-3 lg:p-0 text-[20px] lg:text-2xl font-bold font-karla">
                       Relations
                     </div>
@@ -721,7 +614,6 @@ export default function Info({ info, color }) {
                         <h1>Next :</h1>
                         <div
                           className="px-5 rounded-sm font-karla font-bold bg-white text-black"
-                          // style={color}
                         >
                           {time}
                         </div>
@@ -732,10 +624,10 @@ export default function Info({ info, color }) {
                     </div>
                   )}
                 </div>
-                {loading ? (
-                  data && (
+                {!loading ? (
+                  episode && (
                     <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 ? (
                           episode?.map((epi, index) => {
                             return (
@@ -744,9 +636,7 @@ export default function Info({ info, color }) {
                                 className="flex flex-col gap-3 px-2"
                               >
                                 <Link
-                                  href={`/anime/watch/${epi.id}/${info.id}/${
-                                    stall ? `9anime` : ""
-                                  }`}
+                                  href={`/anime/watch/${epi.id}/${info.id}`}
                                   className={`text-start text-sm lg:text-lg ${
                                     progress && epi.number <= progress
                                       ? "text-[#5f5f5f]"
@@ -775,23 +665,7 @@ export default function Info({ info, color }) {
                         ) : (
                           <p>No Episodes Available</p>
                         )
-                      ) : (
-                        // <p className="flex-center">
-                        //   Something went wrong, can't retrieve any episodes :/
-                        // </p>
-                        <div className="flex flex-col">
-                          {/* <h1>{epiStatus} while retrieving data</h1> */}
-                          <pre
-                            className={`rounded-md ${getLanguageClassName(
-                              "bash"
-                            )}`}
-                          >
-                            <code>
-                              Something went wrong while retrieving data :/
-                            </code>
-                          </pre>
-                        </div>
-                      )}
+                        }
                     </div>
                   )
                 ) : (
@@ -815,8 +689,6 @@ export default function Info({ info, color }) {
                 />
               </div>
             )}
-            <div></div>
-            <div></div>
           </div>
         </Layout>
       </SkeletonTheme>
@@ -901,17 +773,3 @@ function setTxtColor(hexColor) {
   const brightness = getBrightness(hexColor);
   return brightness < 150 ? "#fff" : "#000";
 }
-
-const getLanguageClassName = (language) => {
-  switch (language) {
-    case "javascript":
-      return "language-javascript";
-    case "html":
-      return "language-html";
-    case "bash":
-      return "language-bash";
-    // add more languages here as needed
-    default:
-      return "";
-  }
-};
diff --git a/pages/anime/watch/[...info].js b/pages/anime/watch/[...info].js
index 5c2e460..1350ce8 100644
--- a/pages/anime/watch/[...info].js
+++ b/pages/anime/watch/[...info].js
@@ -1,6 +1,5 @@
 import Image from "next/image";
 import Link from "next/link";
-import { closestMatch } from "closest-match";
 import Head from "next/head";
 import { useEffect, useState } from "react";
 import dynamic from "next/dynamic";
@@ -24,7 +23,6 @@ const VideoPlayer = dynamic(() =>
 export default function Info({ sessions, id, aniId, provider, proxy }) {
   const [epiData, setEpiData] = useState(null);
   const [data, setAniData] = useState(null);
-  const [fallback, setEpiFallback] = useState(null);
   const [skip, setSkip] = useState({ op: null, ed: null });
   const [statusWatch, setStatusWatch] = useState("CURRENT");
   const [playingEpisode, setPlayingEpisode] = useState(null);
@@ -32,6 +30,8 @@ export default function Info({ sessions, id, aniId, provider, proxy }) {
   const [playingTitle, setPlayingTitle] = useState(null);
   const [poster, setPoster] = useState(null);
 
+  const [episodes, setEpisodes] = useState([]);
+
   const router = useRouter();
 
   useEffect(() => {
@@ -64,8 +64,6 @@ export default function Info({ sessions, id, aniId, provider, proxy }) {
     });
 
     const fetchData = async () => {
-      // setLoading(true);
-      let epiFallback = null;
 
       try {
         if (provider) {
@@ -76,7 +74,7 @@ export default function Info({ sessions, id, aniId, provider, proxy }) {
           setEpiData(epiData);
         } else {
           const res = await fetch(
-            `https://api.moopa.my.id/meta/anilist/watch/${id}?provider=zoro`
+            `https://api.moopa.my.id/meta/anilist/watch/${id}`
           );
           const epiData = await res.json();
           setEpiData(epiData);
@@ -97,46 +95,20 @@ export default function Info({ sessions, id, aniId, provider, proxy }) {
         setAniData(aniData);
       } else {
         const res2 = await fetch(
-          `https://api.moopa.my.id/meta/anilist/info/${aniId}?provider=zoro`
+          `https://api.moopa.my.id/meta/anilist/info/${aniId}`
         );
         aniData = await res2.json();
+        setEpisodes(aniData.episodes?.reverse());
         setAniData(aniData);
       }
 
-      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 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.id}`
-          ).then((res) => res.json());
-          epiFallback = infos.episodes;
-        }
-        setEpiFallback(epiFallback);
-      }
-
       let playingEpisode = aniData.episodes
         .filter((item) => item.id == id)
         .map((item) => item.number);
 
-      if (aniData.episodes.length === 0) {
-        playingEpisode = epiFallback
-          .filter((item) => item.id == id)
-          .map((item) => item.number);
-      }
-
       setPlayingEpisode(playingEpisode);
 
       const playing = aniData.episodes.filter((item) => item.id == id);
-      // .map((item) => item.);
 
       setPoster(playing);
 
@@ -290,7 +262,7 @@ export default function Info({ sessions, id, aniId, provider, proxy }) {
           <div className="min-h-screen mt-3 md:mt-0 flex flex-col lg:gap-0 gap-5 lg:flex-row lg:py-10 lg:px-10 justify-start w-screen">
             <div className="w-screen lg:w-[67%]">
               {loading ? (
-                <div className="aspect-video z-20">
+                <div className="aspect-video z-20 bg-black">
                   <VideoPlayer
                     key={id}
                     data={epiData}
@@ -310,8 +282,8 @@ export default function Info({ sessions, id, aniId, provider, proxy }) {
                 <div className="aspect-video bg-black" />
               )}
               <div>
-                {data ? (
-                  data.episodes.length > 0 ? (
+                {
+                  data && data?.episodes.length > 0 ? (
                     data.episodes
                       .filter((items) => items.id == id)
                       .map((item, index) => (
@@ -389,87 +361,6 @@ export default function Info({ sessions, id, aniId, provider, proxy }) {
                           </div>
                         </div>
                       ))
-                  ) : (
-                    <>
-                      {fallback &&
-                        fallback
-                          .filter((item) => item.id == id)
-                          .map((item) => (
-                            <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}`
-                                      );
-                                    }
-                                  }}
-                                >
-                                  <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>
-                            </div>
-                          ))}
-                    </>
-                  )
                 ) : (
                   <div className="p-3 grid gap-2">
                     <div className="text-xl font-outfit font-semibold line-clamp-2">
@@ -492,6 +383,7 @@ export default function Info({ sessions, id, aniId, provider, proxy }) {
                         alt="Anime Cover"
                         width={1000}
                         height={1000}
+                        priority
                         className="object-cover aspect-[9/13] h-[240px] rounded-md"
                       />
                     ) : (
@@ -581,12 +473,12 @@ export default function Info({ sessions, id, aniId, provider, proxy }) {
                 Up Next
               </h1>
               <div className="flex flex-col gap-5 lg:pl-5 px-2 py-2 scrollbar-thin scrollbar-thumb-[#313131] scrollbar-thumb-rounded-full">
-                {data ? (
-                  data.episodes.length > 0 ? (
+                {
+                  data && data?.episodes.length > 0 ? (
                     data.episodes.some(
                       (item) => item.title && item.description
                     ) ? (
-                      data.episodes.map((item) => {
+                      episodes.map((item) => {
                         return (
                           <Link
                             href={`/anime/watch/${item.id}/${data.id}${
@@ -599,18 +491,20 @@ export default function Info({ sessions, id, aniId, provider, proxy }) {
                                 : "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"
-                                }`}
-                              />
+                            <div className="w-[40%] h-[110px] relative ">
+                              <div className="">
+                                <Image
+                                  src={item.image}
+                                  alt="Anime Cover"
+                                  width={1000}
+                                  height={1000}
+                                  className={`object-cover rounded-lg w-[240px] h-[110px] shadow-[4px_0px_5px_0px_rgba(0,0,0,0.3)] ${
+                                    item.id == id
+                                      ? "brightness-[30%]"
+                                      : "brightness-75"
+                                  }`}
+                                />
+                              </div>
                               <span className="absolute bottom-2 left-2 font-karla font-light text-sm">
                                 Episode {item.number}
                               </span>
@@ -661,24 +555,6 @@ export default function Info({ sessions, id, aniId, provider, proxy }) {
                         );
                       })
                     )
-                  ) : (
-                    fallback &&
-                    fallback.map((item) => {
-                      return (
-                        <Link
-                          href={`/anime/watch/${item.id}/${data.id}`}
-                          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"
-                          }`}
-                        >
-                          Episode {item.number}
-                        </Link>
-                      );
-                    })
-                  )
                 ) : (
                   <>
                     {[1].map((item) => (