Update v4.4.0 - Finale - Merged Branch beta to main (#121)

* migrate to typescript * feat: Implement a way to review/rate anime (#108) * Make details cover lead back to anime page * Make 'markProgress' use object instead of param list * Import Link * Implement Rate modal * Pass session into useAniList Co-authored-by: Factiven <[email protected]> * Reimplement using markComplete & add toast for failure * redefined ratemodal * fix: home page client error * update version --------- Co-authored-by: Factiven <[email protected]> * Update changelogs version to v4.4.0 * feat: Add PreviousEpisode and NextEpisode to media controls (#111) * Make details cover lead back to anime page * Make 'markProgress' use object instead of param list * Import Link * Implement Rate modal * Pass session into useAniList Co-authored-by: Factiven <[email protected]> * Reimplement using markComplete & add toast for failure * redefined ratemodal * fix: home page client error * update version * Update version to v4.4.0 in changelogs.tsx * Implement next and previous buttons to video controls * fix subtitle button bugs --------- Co-authored-by: Factiven <[email protected]> * Add getRemovedMedia function and handle redirect for removed media * redesign: Redesign schedules page (#112) * Remove trailing commas * Polish schedules page & Remove unneeded styles * Add scroll animations * Add scrolling animation to time view * Refactor schedule page layout and styling --------- Co-authored-by: Factiven <[email protected]> * Added seeking buttons and fixed vercel error (#113) * readded seek buttons and vercel support * Redesign player layout on mobile and fix seek button * Update changelogs and player buttons --------- Co-authored-by: Factiven <[email protected]> * Refactor episode fetching and data formatting * v4.4.0 - Finale * update .env.example --------- Co-authored-by: Artrix <[email protected]> Co-authored-by: A i j a Z <[email protected]>
Ani-Moopa · Jul 14, 2024 · bdd560a · bdd560a
1 parent cd08c2e
commit bdd560a
Show file tree

Hide file tree

Showing 135 changed files with 7,724 additions and 3,243 deletions.
diff --git a/.env.example b/.env.example
@@ -1,21 +1,15 @@
-## AniList
 CLIENT_ID="get the id from here https://anilist.co/settings/developer"
 CLIENT_SECRET="get the secret from here https://anilist.co/settings/developer"
 GRAPHQL_ENDPOINT="https://graphql.anilist.co"
 
-## NextAuth
 NEXTAUTH_SECRET='run this cmd in your bash terminal (openssl rand -base64 32) with no bracket, and paste it here'
 NEXTAUTH_URL="for development use http://localhost:3000/ and for production use your domain url"
-
-## NextJS
-PROXY_URI="This is what I use for proxying video https://github.com/chaycee/M3U8Proxy. Don't put / at the end of the url."
-API_URI="host your own API from this repo https://github.com/consumet/api.consumet.org. Don't put / at the end of the url."
 DISQUS_SHORTNAME='put your disqus shortname here (optional)'
-# ADMIN_USERNAME=""
+# ADMIN_USERNAME="Your AniList account username"
 
-## Prisma
-DATABASE_URL="Your postgresql connection url"
+## Use any postgresql db, or supabase for free options
+DATABASE_URL="postgresql://user:password@host:6543/postgres?pgbouncer=true"
+DIRECT_URL="postgresql://user:password@host:5432/postgres"
 
-## Redis
 # If you don't want to use redis, just comment the REDIS_URL (press ctrl + / on windows or cmd + / on mac)
-REDIS_URL="redis://username:password@host:port"
+REDIS_URL="redis://user:password@host:port"
diff --git a/.gitignore b/.gitignore
@@ -8,8 +8,11 @@
 
 # testing
 /coverage
-/pages/en/test.js
+/pages/en/test.tsx
+/pages/en/test-player.tsx
 /components/devComp
+/components/test
+/pages/en/w2g.tsx
 
 # next.js
 /.next/
@@ -27,6 +30,8 @@ docker-compose.yml
 /assets/dummyData.json
 /backup
 release-template.md
+.vscode
+pnpm-lock.yaml
 
 # debug
 npm-debug.log*

diff --git a/.prettierrc.json b/.prettierrc.json
@@ -1,4 +1,5 @@
 {
   "bracketSpacing": true,
-  "printWidth": 80
+  "printWidth": 80,
+  "trailingComma": "none"
 }
diff --git a/README.md b/README.md
@@ -26,6 +26,17 @@
 
 </p>
 
+> [!WARNING]  
+>  
+> As of Jul 14 2024, this repository is no longer maintained and will not receive any further updates or support from the author. If you choose to use the code in this repository, please do so at your own risk.
+>
+> ### Important Points:
+> - **No Updates**: There will be no further updates or improvements made to this repository.
+> - **No Support**: The author will not provide any support, fixes, or acknowledge any issues found in the code.
+> - **Use at Your Own Risk**: Any errors, bugs, or other issues that arise from using this code are your responsibility.
+> 
+> Thank you for your understanding. 
+
 <p align="center">
  <img src="https://github.com/Ani-Moopa/Moopa/assets/97084324/c17d5d6a-36a2-4d08-957d-ad4683dcdf0d" alt="main">
 </p>
@@ -56,7 +67,7 @@
 
 </details>
 
-> **Warning:** If you are not familiar with JavaScript or any other programming language related to this project, please learn it first before attempting to work on this project. **I won't be able to help anyone who doesn't know how to do basic stuff.**
+> **Warning:** If you are not familiar with JavaScript or any other programming language related to this project, please learn it first before attempting to work on this project. **I won't help anyone who doesn't know how to do basic stuff.**
 
 ## Introduction
 
@@ -117,26 +128,20 @@ npm install
 3. Create `.env` file in the root folder and put this inside the file :
 
 ```bash
-## AniList
 CLIENT_ID="get the id from here https://anilist.co/settings/developer"
 CLIENT_SECRET="get the secret from here https://anilist.co/settings/developer"
 GRAPHQL_ENDPOINT="https://graphql.anilist.co"
 
-## NextAuth
 NEXTAUTH_SECRET='run this cmd in your bash terminal (openssl rand -base64 32) with no bracket, and paste it here'
 NEXTAUTH_URL="for development use http://localhost:3000/ and for production use your domain url"
-
-## NextJS
-PROXY_URI="This is what I use for proxying video https://github.com/chaycee/M3U8Proxy. Don't put / at the end of the url."
-API_URI="host your own API from this repo https://github.com/consumet/api.consumet.org. Don't put / at the end of the url."
 DISQUS_SHORTNAME='put your disqus shortname here (optional)'
 
-## Prisma
-DATABASE_URL="Your postgresql connection url"
+## Use any postgresql db, or supabase for free options
+DATABASE_URL="postgresql://user:password@host:6543/postgres?pgbouncer=true"
+DIRECT_URL="postgresql://user:password@host:5432/postgres"
 
-## Redis
 # If you don't want to use redis, just comment the REDIS_URL (press ctrl + / on windows or cmd + / on mac)
-REDIS_URL="rediss://username:password@host:port"
+REDIS_URL="redis://user:password@host:port"
 ```
 
 4. Add this endpoint as Redirect Url on AniList Developer :

diff --git a/components/anime/episode.js b/components/anime/episode.js
@@ -6,29 +6,45 @@ import ThumbnailDetail from "./viewMode/thumbnailDetail";
 import ListMode from "./viewMode/listMode";
 import { toast } from "sonner";
 
-function allProvider(response, setMapProviders, setProviderId) {
-  const getMap = response.find((i) => i?.map === true);
-  let allProvider = response;
+const ITEMS_PER_PAGE = 13;
+const DEFAULT_VIEW = 3;
 
-  if (getMap) {
-    allProvider = response.filter((i) => {
+const fetchEpisodes = async (info, isDub, refresh = false) => {
+  const response = await fetch(
+    `/api/v2/episode/${info.id}?releasing=${
+      info.status === "RELEASING" ? "true" : "false"
+    }${isDub ? "&dub=true" : ""}${refresh ? "&refresh=true" : ""}`
+  ).then((res) => res.json());
+
+  const providers = filterProviders(response);
+
+  return providers;
+};
+
+const filterProviders = (response) => {
+  const providersWithMap = response.find((i) => i?.map === true);
+  let providers = response;
+
+  if (providersWithMap) {
+    providers = response.filter((i) => {
       if (i?.providerId === "gogoanime" && i?.map !== true) {
         return null;
       }
       return i;
     });
-    setMapProviders(getMap?.episodes);
   }
 
-  if (allProvider.length > 0) {
-    const defaultProvider = allProvider.find(
+  return providers;
+};
+
+const setDefaultProvider = (providers, setProviderId) => {
+  if (providers.length > 0) {
+    const defaultProvider = providers.find(
       (x) => x.providerId === "gogoanime" || x.providerId === "9anime"
     );
-    setProviderId(defaultProvider?.providerId || allProvider[0].providerId); // set to first provider id
+    setProviderId(defaultProvider?.providerId || providers[0].providerId);
   }
-
-  return allProvider;
-}
+};
 
 export default function AnimeEpisode({
   info,
@@ -48,20 +64,13 @@ export default function AnimeEpisode({
   const [isDub, setIsDub] = useState(false);
 
   const [providers, setProviders] = useState(null);
-  const [mapProviders, setMapProviders] = useState(null);
 
   useEffect(() => {
     setLoading(true);
     const fetchData = async () => {
-      const response = await fetch(
-        `/api/v2/episode/${info.id}?releasing=${
-          info.status === "RELEASING" ? "true" : "false"
-        }${isDub ? "&dub=true" : ""}`
-      ).then((res) => res.json());
-
-      const providers = allProvider(response, setMapProviders, setProviderId);
-
-      setView(Number(localStorage.getItem("view")) || 3);
+      const providers = await fetchEpisodes(info, isDub);
+      setDefaultProvider(providers, setProviderId);
+      setView(Number(localStorage.getItem("view")) || DEFAULT_VIEW);
       setArtStorage(JSON.parse(localStorage.getItem("artplayer_settings")));
       setProviders(providers);
       setLoading(false);
@@ -71,20 +80,16 @@ export default function AnimeEpisode({
     return () => {
       setCurrentPage(1);
       setProviders(null);
-      setMapProviders(null);
     };
-
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [info.id, isDub]);
+  }, [info.id, isDub]); // eslint-disable-next-line react-hooks/exhaustive-deps
 
   const episodes =
-    providers
-      ?.find((provider) => provider.providerId === providerId)
-      ?.episodes?.slice(0, mapProviders?.length) || [];
+    providers?.find((provider) => provider.providerId === providerId)
+      ?.episodes || [];
 
   const lastEpisodeIndex = currentPage * itemsPerPage;
   const firstEpisodeIndex = lastEpisodeIndex - itemsPerPage;
-  let currentEpisodes = episodes.slice(firstEpisodeIndex, lastEpisodeIndex);
+  let currentEpisodes = episodes?.slice(firstEpisodeIndex, lastEpisodeIndex);
 
   const totalPages = Math.ceil(episodes.length / itemsPerPage);
 
@@ -98,9 +103,10 @@ export default function AnimeEpisode({
 
   useEffect(() => {
     if (
-      !mapProviders ||
-      mapProviders?.every(
+      !currentEpisodes ||
+      currentEpisodes?.every(
         (item) =>
+          // item?.img?.includes("null") ||
           item?.img?.includes("https://s4.anilist.co/") ||
           item?.image?.includes("https://s4.anilist.co/") ||
           item?.img === null
@@ -173,67 +179,13 @@ export default function AnimeEpisode({
       setLoading(true);
       clearTimeout(debounceTimeout);
       debounceTimeout = setTimeout(async () => {
-        const res = await fetch(
-          `/api/v2/episode/${info.id}?releasing=${
-            info.status === "RELEASING" ? "true" : "false"
-          }${isDub ? "&dub=true" : ""}&refresh=true`
-        );
-        if (!res.ok) {
-          const json = await res.json();
-          if (res.status === 429) {
-            toast.error(json.error);
-            const resp = await fetch(
-              `/api/v2/episode/${info.id}?releasing=${
-                info.status === "RELEASING" ? "true" : "false"
-              }${isDub ? "&dub=true" : ""}`
-            ).then((res) => res.json());
-
-            if (resp) {
-              const providers = allProvider(
-                resp,
-                setMapProviders,
-                setProviderId
-              );
-              setProviders(providers);
-            }
-          } else {
-            toast.error("Something went wrong");
-            setProviders([]);
-          }
-          setLoading(false);
-        } else {
-          const remainingRequests = res.headers.get("X-RateLimit-Remaining");
-          toast.success("Remaining requests " + remainingRequests);
-
-          const data = await res.json();
-          const getMap = data.find((i) => i?.map === true) || data[0];
-          let allProvider = data;
-
-          if (getMap) {
-            allProvider = data.filter((i) => {
-              if (i?.providerId === "gogoanime" && i?.map !== true) {
-                return null;
-              }
-              return i;
-            });
-            setMapProviders(getMap?.episodes);
-          }
-
-          if (allProvider.length > 0) {
-            const defaultProvider = allProvider.find(
-              (x) => x.providerId === "gogoanime" || x.providerId === "9anime"
-            );
-            setProviderId(
-              defaultProvider?.providerId || allProvider[0].providerId
-            ); // set to first provider id
-          }
-
-          setView(Number(localStorage.getItem("view")) || 3);
-          setArtStorage(JSON.parse(localStorage.getItem("artplayer_settings")));
-          setProviders(allProvider);
-          setLoading(false);
-        }
-      }, 1000);
+        const providers = await fetchEpisodes(info, isDub, true);
+        setDefaultProvider(providers, setProviderId);
+        setView(Number(localStorage.getItem("view")) || DEFAULT_VIEW);
+        setArtStorage(JSON.parse(localStorage.getItem("artplayer_settings")));
+        setProviders(providers);
+        setLoading(false);
+      }, 5000);
     } catch (err) {
       console.log(err);
       toast.error("Something went wrong");
@@ -257,7 +209,7 @@ export default function AnimeEpisode({
                   onClick={() => {
                     handleRefresh();
                     setProviders(null);
-                    setMapProviders(null);
+                    // setMapProviders(null);
                   }}
                   className="relative flex flex-col items-center w-5 h-5 group"
                 >
@@ -376,7 +328,7 @@ export default function AnimeEpisode({
               view={view}
               setView={setView}
               episode={currentEpisodes}
-              map={mapProviders}
+              // map={mapProviders}
             />
           </div>
         </div>
@@ -395,9 +347,9 @@ export default function AnimeEpisode({
             {Array.isArray(providers) ? (
               providers.length > 0 ? (
                 currentEpisodes.map((episode, index) => {
-                  const mapData = mapProviders?.find(
-                    (i) => i.number === episode.number
-                  );
+                  // const mapData = mapProviders?.find(
+                  //   (i) => i.number === episode.number
+                  // );
 
                   return (
                     <Fragment key={index}>
@@ -406,7 +358,7 @@ export default function AnimeEpisode({
                           key={index}
                           index={index}
                           info={info}
-                          image={mapData?.img || mapData?.image}
+                          // image={mapData?.img || mapData?.image}
                           providerId={providerId}
                           episode={episode}
                           artStorage={artStorage}
@@ -417,9 +369,9 @@ export default function AnimeEpisode({
                       {view === 2 && (
                         <ThumbnailDetail
                           key={index}
-                          image={mapData?.img || mapData?.image}
-                          title={mapData?.title}
-                          description={mapData?.description}
+                          // image={mapData?.img || mapData?.image}
+                          // title={mapData?.title}
+                          // description={mapData?.description}
                           index={index}
                           epi={episode}
                           provider={providerId}

diff --git a/components/anime/mobile/reused/infoChip.js → components/anime/mobile/reused/infoChip.tsx b/components/anime/mobile/reused/infoChip.js → components/anime/mobile/reused/infoChip.tsx
@@ -1,7 +1,20 @@
-import React from "react";
-import { getFormat } from "../../../../utils/getFormat";
+import React, { CSSProperties, FC } from "react";
+import { getFormat } from "@/utils/getFormat";
 
-export default function InfoChip({ info, color, className }) {
+interface Info {
+  episodes?: number;
+  averageScore?: number;
+  format?: string;
+  status?: string;
+}
+
+interface InfoChipProps {
+  info: Info;
+  color: any;
+  className: string;
+}
+
+const InfoChip: FC<InfoChipProps> = ({ info, color, className }) => {
   return (
     <div
       className={`flex-wrap w-full justify-start md:pt-1 gap-4 ${className}`}
@@ -40,4 +53,6 @@ export default function InfoChip({ info, color, className }) {
       )}
     </div>
   );
-}
+};
+
+export default InfoChip;