From 66567221d95ac7d2422be720e494cdb48b009d11 Mon Sep 17 00:00:00 2001 From: Factiven Date: Tue, 25 Apr 2023 22:18:37 +0700 Subject: Update v3.3 --- package.json | 2 +- pages/anime/[...id].js | 138 ++++++++++++++++++++++++++----------------------- styles/globals.css | 56 ++++++++++++++++++++ 3 files changed, 129 insertions(+), 67 deletions(-) diff --git a/package.json b/package.json index 842f12e..62518c2 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "moopa", - "version": "3.2.0", + "version": "3.3.0", "private": true, "scripts": { "dev": "next dev", diff --git a/pages/anime/[...id].js b/pages/anime/[...id].js index cf70c62..11fc22d 100644 --- a/pages/anime/[...id].js +++ b/pages/anime/[...id].js @@ -157,9 +157,6 @@ export default function Info() { (data) => data.mediaRecommendation ); - // console.log(rec); - // console.log(info); - useEffect(() => { const defaultState = { data: null, @@ -397,7 +394,7 @@ export default function Info() { {/* PC */} -
+
{info ? ( <> @@ -418,7 +415,7 @@ export default function Info() {
{/* PC */} -
+

{info ? ( @@ -507,72 +504,76 @@ export default function Info() { )}

- {info?.relations?.edges - ? info?.relations?.edges - .slice(0, showAll ? info?.relations?.edges.length : 3) - .map((r, index) => { - const rel = r.node; - return ( - { + const rel = r.node; + return ( + +
-
-
- {rel.id} +
+ {rel.id} +
+
+
+ {r.relationType}
-
-
- {r.relationType} -
-
- {rel.title.userPreferred || - rel.title.romaji} -
-
{rel.type}
+
+ {rel.title.userPreferred || rel.title.romaji}
+
{rel.type}
- - ); - }) - : [1, 2, 3].map((item) => ( -
+
+ + ); + }) + ) : ( + <> + {[1, 2, 3].map((item) => ( +
))} +
+ +
+ + )}
@@ -612,8 +613,8 @@ export default function Info() { {loading ? ( data && (
- {episode ? ( - episode.map((epi, index) => { + {episode?.length !== 0 ? ( + episode?.map((epi, index) => { return (
) ) : ( -
- Loading Episodes... +
+
+
+
+
+
+
)}
diff --git a/styles/globals.css b/styles/globals.css index b101081..ff7a1bb 100644 --- a/styles/globals.css +++ b/styles/globals.css @@ -147,3 +147,59 @@ button { .skip-button { @apply bg-white xs:w-28 xs:h-9 w-24 h-7 -right-8 -bottom-7 rounded-md font-karla shadow-xl hover:bg-[#f1f1f1] text-black md:static absolute xs:-right-6 xs:-bottom-5 xs:text-[15px] text-xs md:text-sm; } + +.lds-ellipsis { + display: inline-block; + position: relative; + width: 80px; + height: 80px; +} +.lds-ellipsis div { + position: absolute; + top: 33px; + width: 13px; + height: 13px; + border-radius: 50%; + background: #27272e; + animation-timing-function: cubic-bezier(0, 1, 1, 0); +} +.lds-ellipsis div:nth-child(1) { + left: 8px; + animation: lds-ellipsis1 0.6s infinite; +} +.lds-ellipsis div:nth-child(2) { + left: 8px; + animation: lds-ellipsis2 0.6s infinite; +} +.lds-ellipsis div:nth-child(3) { + left: 32px; + animation: lds-ellipsis2 0.6s infinite; +} +.lds-ellipsis div:nth-child(4) { + left: 56px; + animation: lds-ellipsis3 0.6s infinite; +} +@keyframes lds-ellipsis1 { + 0% { + transform: scale(0); + } + 100% { + transform: scale(1); + } +} +@keyframes lds-ellipsis3 { + 0% { + transform: scale(1); + } + 100% { + transform: scale(0); + } +} +@keyframes lds-ellipsis2 { + 0% { + transform: translate(0, 0); + } + 100% { + transform: translate(24px, 0); + } +} -- cgit v1.2.3 From 3a17e8ed40b36d7f66bc9340b259694589c813c1 Mon Sep 17 00:00:00 2001 From: Factiven Date: Tue, 25 Apr 2023 22:22:04 +0700 Subject: Update [...id].js --- pages/anime/[...id].js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pages/anime/[...id].js b/pages/anime/[...id].js index 11fc22d..38b7e04 100644 --- a/pages/anime/[...id].js +++ b/pages/anime/[...id].js @@ -656,7 +656,7 @@ export default function Info() { ) ) : (
-
+
-- cgit v1.2.3 From 021c5c414e9c1fe88a076c8d929a4fab373b2bf8 Mon Sep 17 00:00:00 2001 From: Factiven Date: Wed, 26 Apr 2023 12:07:03 +0700 Subject: Create README.md --- README.md | 71 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 71 insertions(+) create mode 100644 README.md diff --git a/README.md b/README.md new file mode 100644 index 0000000..e13da6a --- /dev/null +++ b/README.md @@ -0,0 +1,71 @@ +
+ + logo + +
+ +

Moopa Anime Streaming Website

+ +
+ + ![GitHub forks](https://img.shields.io/github/forks/DevanAbinaya/moopa-v3?style=flat-square) ![GitHub](https://img.shields.io/github/license/DevanAbinaya/moopa-v3?style=flat-square) ![Website](https://img.shields.io/website?style=flat-square&url=https%3A%2F%2Fmoopa.live) ![GitHub Repo stars](https://img.shields.io/github/stars/DevanAbinaya/moopa-v3?style=flat-square) +
+ +

Moopa is an anime streaming website build with nextjs and tailwindcss with a sleek and modern design that offers Anilist integration to help you keep track of your favorite anime series. Moopa is entirely free and does not feature any ads, making it a great option for you who want an uninterrupted viewing experience.

+ +![image](https://user-images.githubusercontent.com/97084324/234473045-8c648633-1f85-4815-b784-75d32bbdc2a7.png) + + +
+More Screenshots + +
Home page after you login
+ + +
Profile Page
+ + +
Info page for PC/Mobile
+

+ + +

+ +
Watch Page
+ + +
+ +## Features + +- Free ad-supported streaming service +- Anime tracking through Anilist API +- User-friendly interface +- Mobile-responsive design +- PWA supported + +## To Do List + +- [x] Add PWA support +- [x] Connect to consumet API to fetch episodes data +- [x] Implement skip op/ed button on supported anime +- [x] Create README file +- [ ] Integrate Anilist API for anime tracking + - [x] Ability to auto track anime after watching >= 90% through the video + - [x] Create a user profile page to see lists of anime watched + - [ ] Ability to edit list inside detail page +- [ ] Working on Manga pages + +## Credits + +- [Consumet API](https://github.com/consumet/api.consumet.org) +- [AniList API](https://github.com/AniList/ApiV2-GraphQL-Docs) +- [miru](https://github.com/ThaUnknown/miru/blob/master/README.md?plain=1) for inspiring me making this site + +## License + +This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details. + +## Contact + +For any questions or feedback, please reach out to us at [factiven.org@gmail.com](mailto:factiven.org@gmail.com). -- cgit v1.2.3 From ede417353785bdf0c24a8b816c4746cf251fdb5b Mon Sep 17 00:00:00 2001 From: Factiven Date: Wed, 26 Apr 2023 12:42:35 +0700 Subject: Update README.md --- README.md | 25 ++++++++++++++++++++++++- 1 file changed, 24 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index e13da6a..093df3f 100644 --- a/README.md +++ b/README.md @@ -8,7 +8,7 @@
- ![GitHub forks](https://img.shields.io/github/forks/DevanAbinaya/moopa-v3?style=flat-square) ![GitHub](https://img.shields.io/github/license/DevanAbinaya/moopa-v3?style=flat-square) ![Website](https://img.shields.io/website?style=flat-square&url=https%3A%2F%2Fmoopa.live) ![GitHub Repo stars](https://img.shields.io/github/stars/DevanAbinaya/moopa-v3?style=flat-square) + ![GitHub forks](https://img.shields.io/github/forks/DevanAbinaya/moopa-v3?style=flat-square) ![GitHub](https://img.shields.io/github/license/DevanAbinaya/moopa-v3?style=flat-square) ![Website](https://img.shields.io/website?style=flat-square&url=https%3A%2F%2Fmoopa.live) ![GitHub Repo stars](https://img.shields.io/github/stars/DevanAbinaya/moopa-v3?style=flat-square) ![Discord](https://img.shields.io/discord/822413263148285973?style=flat-square)

Moopa is an anime streaming website build with nextjs and tailwindcss with a sleek and modern design that offers Anilist integration to help you keep track of your favorite anime series. Moopa is entirely free and does not feature any ads, making it a great option for you who want an uninterrupted viewing experience.

@@ -56,6 +56,29 @@ - [ ] Ability to edit list inside detail page - [ ] Working on Manga pages +## For Local Development + +1. Clone this repository using : +```bash +git clone https://github.com/DevanAbinaya/moopa-v3.git +``` +2. Install package using npm : +```bash +npm install +``` +3. Create ```.env``` file in the root folder and put this inside the file : +```bash +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_SECRET='type this 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" +``` +4. Start local server : +```bash +npm run dev +``` + ## Credits - [Consumet API](https://github.com/consumet/api.consumet.org) -- cgit v1.2.3 From 9f87a40e7cbe8d3a1f3d8d9e19526f9799bb4f03 Mon Sep 17 00:00:00 2001 From: Factiven Date: Wed, 26 Apr 2023 12:58:22 +0700 Subject: Update README.md --- README.md | 20 +++++++++++++++++--- 1 file changed, 17 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 093df3f..e91c3d1 100644 --- a/README.md +++ b/README.md @@ -6,10 +6,24 @@

Moopa Anime Streaming Website

-
+

- ![GitHub forks](https://img.shields.io/github/forks/DevanAbinaya/moopa-v3?style=flat-square) ![GitHub](https://img.shields.io/github/license/DevanAbinaya/moopa-v3?style=flat-square) ![Website](https://img.shields.io/website?style=flat-square&url=https%3A%2F%2Fmoopa.live) ![GitHub Repo stars](https://img.shields.io/github/stars/DevanAbinaya/moopa-v3?style=flat-square) ![Discord](https://img.shields.io/discord/822413263148285973?style=flat-square) -

+ + fork + + + license + + + website + + + stars + + + discord + +

Moopa is an anime streaming website build with nextjs and tailwindcss with a sleek and modern design that offers Anilist integration to help you keep track of your favorite anime series. Moopa is entirely free and does not feature any ads, making it a great option for you who want an uninterrupted viewing experience.

-- cgit v1.2.3 From 78062a58cf7db5b684627eadea97138c4fd2e35f Mon Sep 17 00:00:00 2001 From: Factiven Date: Wed, 26 Apr 2023 13:18:33 +0700 Subject: Update README.md --- README.md | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index e91c3d1..955fc9b 100644 --- a/README.md +++ b/README.md @@ -105,4 +105,7 @@ This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md ## Contact -For any questions or feedback, please reach out to us at [factiven.org@gmail.com](mailto:factiven.org@gmail.com). +Thank You for passing by!! If you have any questions or feedback, please reach out to us at [factiven.org@gmail.com](mailto:factiven.org@gmail.com), or you can join our [discord sever](https://discord.gg/4xTGhr85BG). + +## Support This Project +[![ko-fi](https://ko-fi.com/img/githubbutton_sm.svg)](https://ko-fi.com/E1E6F9XZ3) -- cgit v1.2.3 From df3a8279b8e52b63ce44f59bac3f8dbb76f46c38 Mon Sep 17 00:00:00 2001 From: Factiven Date: Wed, 26 Apr 2023 13:22:52 +0700 Subject: Create FUNDING.yml --- .github/FUNDING.yml | 13 +++++++++++++ 1 file changed, 13 insertions(+) create mode 100644 .github/FUNDING.yml diff --git a/.github/FUNDING.yml b/.github/FUNDING.yml new file mode 100644 index 0000000..e10832d --- /dev/null +++ b/.github/FUNDING.yml @@ -0,0 +1,13 @@ +# These are supported funding model platforms + +github: # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2] +patreon: # Replace with a single Patreon username +open_collective: # Replace with a single Open Collective username +ko_fi: Factiven +tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel +community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry +liberapay: # Replace with a single Liberapay username +issuehunt: # Replace with a single IssueHunt username +otechie: # Replace with a single Otechie username +lfx_crowdfunding: # Replace with a single LFX Crowdfunding project-name e.g., cloud-foundry +custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2'] -- cgit v1.2.3 From a1f77cb0cfc75df0b4a14d43c40cdba78b6acec8 Mon Sep 17 00:00:00 2001 From: Factiven Date: Wed, 26 Apr 2023 13:31:25 +0700 Subject: Update README.md --- README.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 955fc9b..ffff682 100644 --- a/README.md +++ b/README.md @@ -9,16 +9,16 @@

- fork + fork - license + license website - stars + stars discord -- cgit v1.2.3 From 4ae1a44722cc2b13a83659a84301efa8a70e35c4 Mon Sep 17 00:00:00 2001 From: Factiven Date: Wed, 26 Apr 2023 13:38:22 +0700 Subject: Update README.md --- README.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/README.md b/README.md index ffff682..f9b7727 100644 --- a/README.md +++ b/README.md @@ -8,17 +8,17 @@

- - fork + + fork - - license + + license website - - stars + + stars discord @@ -74,7 +74,7 @@ 1. Clone this repository using : ```bash -git clone https://github.com/DevanAbinaya/moopa-v3.git +git clone https://github.com/DevanAbinaya/Ani-Moopa.git ``` 2. Install package using npm : ```bash -- cgit v1.2.3 From 37427fd23b808663ccf6477d0d725d8e5c8e5271 Mon Sep 17 00:00:00 2001 From: Factiven Date: Wed, 26 Apr 2023 14:59:12 +0700 Subject: Update README.md --- README.md | 26 +++++++++++--------------- 1 file changed, 11 insertions(+), 15 deletions(-) diff --git a/README.md b/README.md index f9b7727..b84a829 100644 --- a/README.md +++ b/README.md @@ -1,28 +1,25 @@

-

Moopa Anime Streaming Website

+

+ Moopa Anime Streaming Website +

- - fork - - - license + + license - - website + + fork - stars - - - discord + stars +

Moopa is an anime streaming website build with nextjs and tailwindcss with a sleek and modern design that offers Anilist integration to help you keep track of your favorite anime series. Moopa is entirely free and does not feature any ads, making it a great option for you who want an uninterrupted viewing experience.

@@ -41,8 +38,7 @@
Info page for PC/Mobile

- - +

Watch Page
-- cgit v1.2.3 From e005eecfee8497d2d43d0df250ef4ffc874b46b2 Mon Sep 17 00:00:00 2001 From: Factiven Date: Wed, 26 Apr 2023 18:12:42 +0700 Subject: Update README.md --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index b84a829..7f262b5 100644 --- a/README.md +++ b/README.md @@ -34,8 +34,8 @@
Profile Page
- - + +
Info page for PC/Mobile

-- cgit v1.2.3