diff options
| -rw-r--r-- | README.md | 116 | ||||
| -rw-r--r-- | components/listEditor.js | 116 | ||||
| -rw-r--r-- | components/useAlert.js | 20 | ||||
| -rw-r--r-- | package-lock.json | 396 | ||||
| -rw-r--r-- | package.json | 4 | ||||
| -rw-r--r-- | pages/anime/[...id].js | 93 |
6 files changed, 337 insertions, 408 deletions
diff --git a/README.md b/README.md new file mode 100644 index 0000000..a783685 --- /dev/null +++ b/README.md @@ -0,0 +1,116 @@ +<div align="center"> +<a href="https://moopa.live"> + <img src="https://user-images.githubusercontent.com/97084324/234460363-216b29d3-acba-4c29-a321-780de84c9ab0.png" alt="logo" width="180"/> +</a> +</div> + +<h1 align="center"> + <a href="https://moopa.live">Moopa Anime Streaming Website</a> +</h1> + +<p align="center"> + + <a href="https://github.com/DevanAbinaya/Ani-Moopa/blob/main/LICENSE.md"> + <img src="https://img.shields.io/github/license/DevanAbinaya/Ani-Moopa" alt="license"/> + </a> + <a href="https://github.com/DevanAbinaya/Ani-Moopa/fork"> + <img src="https://img.shields.io/github/forks/DevanAbinaya/Ani-Moopa?style=social" alt="fork"/> + </a> + <a href="https://github.com/DevanAbinaya/Ani-Moopa"> + <img src="https://img.shields.io/github/stars/DevanAbinaya/Ani-Moopa?style=social" alt="stars"/> + </a> + +</p> + +<p align="center"><a href="https://moopa.live">Moopa</a> 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.</p> + +<p align="center"> + <img src="https://user-images.githubusercontent.com/97084324/234832975-0804e6bd-8528-4f53-b0fb-7ccce5342f59.png" alt="main" width="900"> +</p> + +<details> +<summary>More Screenshots</summary> + +<h5 align="center">Home page after you login</h5> +<img src="https://user-images.githubusercontent.com/97084324/234463979-4b4fa1ba-34cb-4ae4-b4e1-59500b24ac6f.png"/> + +<h5 align="center">Profile Page</h5> +<img src="https://user-images.githubusercontent.com/97084324/234556937-76ec236c-a077-4af5-a910-0cb85e900e38.gif"/> + +<h5 align="center">Info page for PC/Mobile</h5> +<p align="center"> +<img src="https://user-images.githubusercontent.com/97084324/234508708-082b8d64-1dea-4525-98a5-51a5a95e8db3.png"/> +</p> + +<h5 align="center">Watch Page</h5> +<img src="https://user-images.githubusercontent.com/97084324/234466915-c2107ee5-5cfe-4cf5-9da4-9ad02aaf066a.png"/> + +</details> + +## 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 + +## For Local Development + +1. Clone this repository using : + +```bash +git clone https://github.com/DevanAbinaya/Ani-Moopa.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) +- [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 + +Thank You for passing by!! If you have any questions or feedback, please reach out to us at [[email protected]](mailto:[email protected]), or you can join our [discord sever](https://discord.gg/4xTGhr85BG). + +## Support This Project + +[](https://ko-fi.com/E1E6F9XZ3) diff --git a/components/listEditor.js b/components/listEditor.js new file mode 100644 index 0000000..35f153a --- /dev/null +++ b/components/listEditor.js @@ -0,0 +1,116 @@ +import { useState } from "react"; +import useAlert from "./useAlert"; +import { motion as m } from "framer-motion"; + +const ListEditor = ({ animeId, session, stats, prg, max }) => { + const { message, type, showAlert } = useAlert(); + const [status, setStatus] = useState(stats ?? ""); + const [progress, setProgress] = useState(prg ?? 0); + + console.log(progress); + + // function success() { + // window.location.reload(); + // } + + const handleSubmit = async (e) => { + e.preventDefault(); + try { + const response = await fetch("https://graphql.anilist.co/", { + method: "POST", + headers: { + "Content-Type": "application/json", + Authorization: `Bearer ${session.user.token}`, + }, + body: JSON.stringify({ + query: ` + mutation ($mediaId: Int!, $progress: Int, $status: MediaListStatus) { + SaveMediaListEntry (mediaId: $mediaId, progress: $progress, status: $status) { + id + mediaId + progress + status + } + } + `, + variables: { + mediaId: animeId, + progress: progress ? parseInt(progress) : null, + status: status || null, + }, + }), + }); + const { data } = await response.json(); + console.log("Saved media list entry", data); + // success(); + showAlert("Media list entry saved", "success"); + } catch (error) { + showAlert("Something went wrong", "error"); + console.error(error); + } + }; + + return ( + <div className="relative"> + {message && ( + <m.div + initial={{ opacity: 0, y: 10 }} + animate={{ opacity: 1, y: 0 }} + exit={{ opacity: 0, y: 10 }} + className={`${ + type === "success" ? "bg-green-500" : "bg-red-500" + } text-white px-4 py-1 mb-4 rounded-md`} + > + {message} + </m.div> + )} + <form + onSubmit={handleSubmit} + className="px-10 py-5 text-inherit font-karla antialiased shrink-0" + > + <div className="flex justify-between items-center gap-14"> + <label htmlFor="status" className="font-karla font-bold"> + Status: + </label> + <select + name="status" + id="status" + value={status} + onChange={(e) => setStatus(e.target.value)} + className="rounded-md px-2 py-1" + > + <option value="">Select a status</option> + <option value="CURRENT">Watching</option> + <option value="COMPLETED">Completed</option> + <option value="PAUSED">Paused</option> + <option value="DROPPED">Dropped</option> + <option value="PLANNING">Plan to watch</option> + </select> + </div> + <div className="flex justify-between items-center mt-2"> + <label htmlFor="progress" className="font-karla font-bold"> + Progress: + </label> + <input + type="number" + name="progress" + id="progress" + value={progress} + max={max} + onChange={(e) => setProgress(e.target.value)} + className="rounded-md px-2 py-1" + min="0" + /> + </div> + <button + type="submit" + className="bg-[#3a3a3a] text-white rounded-md mt-2 py-1 px-4" + > + Save + </button> + </form> + </div> + ); +}; + +export default ListEditor; diff --git a/components/useAlert.js b/components/useAlert.js new file mode 100644 index 0000000..7426096 --- /dev/null +++ b/components/useAlert.js @@ -0,0 +1,20 @@ +import { useState } from "react"; + +const useAlert = () => { + const [message, setMessage] = useState(""); + const [type, setType] = useState(""); + + const showAlert = (message, type = "success") => { + setMessage(message); + setType(type); + setTimeout(() => { + setMessage(""); + setType(""); + window.location.reload(); + }, 5000); + }; + + return { message, type, showAlert }; +}; + +export default useAlert; diff --git a/package-lock.json b/package-lock.json index f3bfce0..2be574d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,16 +1,14 @@ { "name": "moopa", - "version": "3.2.0", + "version": "3.4.0", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "moopa", - "version": "3.2.0", + "version": "3.4.0", "dependencies": { "@apollo/client": "^3.7.3", - "@consumet/extensions": "github:consumet/consumet.ts", - "@headlessui/react": "^1.7.14", "@heroicons/react": "^2.0.17", "@next/font": "13.0.7", "artplayer": "latest", @@ -2698,27 +2696,6 @@ "node": ">=6.9.0" } }, - "node_modules/@consumet/extensions": { - "version": "1.4.14", - "resolved": "git+ssh://[email protected]/consumet/consumet.ts.git#3224942ef952858a234502d06fd903154c8c9b34", - "license": "MIT", - "dependencies": { - "ascii-url-encoder": "^1.2.0", - "axios": "^0.27.2", - "cheerio": "^1.0.0-rc.11", - "crypto-js": "^4.1.1", - "form-data": "^4.0.0" - } - }, - "node_modules/@consumet/extensions/node_modules/axios": { - "version": "0.27.2", - "resolved": "https://registry.npmjs.org/axios/-/axios-0.27.2.tgz", - "integrity": "sha512-t+yRIyySRTp/wua5xEr+z1q60QmLq8ABsS5O9Me1AsE5dfKqgnCFzwiCZZ/cGNd1lq4/7akDWMxdhVlucjmnOQ==", - "dependencies": { - "follow-redirects": "^1.14.9", - "form-data": "^4.0.0" - } - }, "node_modules/@eslint-community/eslint-utils": { "version": "4.4.0", "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz", @@ -2810,21 +2787,6 @@ "graphql": "^0.8.0 || ^0.9.0 || ^0.10.0 || ^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0 || ^16.0.0" } }, - "node_modules/@headlessui/react": { - "version": "1.7.14", - "resolved": "https://registry.npmjs.org/@headlessui/react/-/react-1.7.14.tgz", - "integrity": "sha512-znzdq9PG8rkwcu9oQ2FwIy0ZFtP9Z7ycS+BAqJ3R5EIqC/0bJGvhT7193rFf+45i9nnPsYvCQVW4V/bB9Xc+gA==", - "dependencies": { - "client-only": "^0.0.1" - }, - "engines": { - "node": ">=10" - }, - "peerDependencies": { - "react": "^16 || ^17 || ^18", - "react-dom": "^16 || ^17 || ^18" - } - }, "node_modules/@heroicons/react": { "version": "2.0.17", "resolved": "https://registry.npmjs.org/@heroicons/react/-/react-2.0.17.tgz", @@ -3939,11 +3901,6 @@ "option-validator": "^2.0.6" } }, - "node_modules/ascii-url-encoder": { - "version": "1.2.0", - "resolved": "https://registry.npmjs.org/ascii-url-encoder/-/ascii-url-encoder-1.2.0.tgz", - "integrity": "sha512-jRQMrz1ZqL7gnK60Xbu1S8kDi01UN+lHBnhvXZZqjd7nms7t4jOv4o9nE8bbfDh1Ts/KEtW2nXGR5CmydDBmlw==" - }, "node_modules/ast-types-flow": { "version": "0.0.7", "resolved": "https://registry.npmjs.org/ast-types-flow/-/ast-types-flow-0.0.7.tgz", @@ -4143,11 +4100,6 @@ "node": ">=8" } }, - "node_modules/boolbase": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz", - "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==" - }, "node_modules/bowser": { "version": "2.11.0", "resolved": "https://registry.npmjs.org/bowser/-/bowser-2.11.0.tgz", @@ -4333,42 +4285,6 @@ "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz", "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==" }, - "node_modules/cheerio": { - "version": "1.0.0-rc.12", - "resolved": "https://registry.npmjs.org/cheerio/-/cheerio-1.0.0-rc.12.tgz", - "integrity": "sha512-VqR8m68vM46BNnuZ5NtnGBKIE/DfN0cRIzg9n40EIq9NOv90ayxLBXA8fXC5gquFRGJSTRqBq25Jt2ECLR431Q==", - "dependencies": { - "cheerio-select": "^2.1.0", - "dom-serializer": "^2.0.0", - "domhandler": "^5.0.3", - "domutils": "^3.0.1", - "htmlparser2": "^8.0.1", - "parse5": "^7.0.0", - "parse5-htmlparser2-tree-adapter": "^7.0.0" - }, - "engines": { - "node": ">= 6" - }, - "funding": { - "url": "https://github.com/cheeriojs/cheerio?sponsor=1" - } - }, - "node_modules/cheerio-select": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/cheerio-select/-/cheerio-select-2.1.0.tgz", - "integrity": "sha512-9v9kG0LvzrlcungtnJtpGNxY+fzECQKhK4EGJX2vByejiMX84MFNQw4UxPJl3bFbTMw+Dfs37XaIkCwTZfLh4g==", - "dependencies": { - "boolbase": "^1.0.0", - "css-select": "^5.1.0", - "css-what": "^6.1.0", - "domelementtype": "^2.3.0", - "domhandler": "^5.0.3", - "domutils": "^3.0.1" - }, - "funding": { - "url": "https://github.com/sponsors/fb55" - } - }, "node_modules/chokidar": { "version": "3.5.3", "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz", @@ -4534,11 +4450,6 @@ "node": ">= 8" } }, - "node_modules/crypto-js": { - "version": "4.1.1", - "resolved": "https://registry.npmjs.org/crypto-js/-/crypto-js-4.1.1.tgz", - "integrity": "sha512-o2JlM7ydqd3Qk9CA0L4NL6mTzU2sdx96a+oOfPu8Mkl/PK51vSyoi8/rQ8NknZtk44vq15lmhAj9CIAGwgeWKw==" - }, "node_modules/crypto-random-string": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/crypto-random-string/-/crypto-random-string-2.0.0.tgz", @@ -4547,32 +4458,6 @@ "node": ">=8" } }, - "node_modules/css-select": { - "version": "5.1.0", - "resolved": "https://registry.npmjs.org/css-select/-/css-select-5.1.0.tgz", - "integrity": "sha512-nwoRF1rvRRnnCqqY7updORDsuqKzqYJ28+oSMaJMMgOauh3fvwHqMS7EZpIPqK8GL+g9mKxF1vP/ZjSeNjEVHg==", - "dependencies": { - "boolbase": "^1.0.0", - "css-what": "^6.1.0", - "domhandler": "^5.0.2", - "domutils": "^3.0.1", - "nth-check": "^2.0.1" - }, - "funding": { - "url": "https://github.com/sponsors/fb55" - } - }, - "node_modules/css-what": { - "version": "6.1.0", - "resolved": "https://registry.npmjs.org/css-what/-/css-what-6.1.0.tgz", - "integrity": "sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==", - "engines": { - "node": ">= 6" - }, - "funding": { - "url": "https://github.com/sponsors/fb55" - } - }, "node_modules/cssesc": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz", @@ -4766,57 +4651,6 @@ "node": ">=6.0.0" } }, - "node_modules/dom-serializer": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz", - "integrity": "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==", - "dependencies": { - "domelementtype": "^2.3.0", - "domhandler": "^5.0.2", - "entities": "^4.2.0" - }, - "funding": { - "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1" - } - }, - "node_modules/domelementtype": { - "version": "2.3.0", - "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz", - "integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==", - "funding": [ - { - "type": "github", - "url": "https://github.com/sponsors/fb55" - } - ] - }, - "node_modules/domhandler": { - "version": "5.0.3", - "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz", - "integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==", - "dependencies": { - "domelementtype": "^2.3.0" - }, - "engines": { - "node": ">= 4" - }, - "funding": { - "url": "https://github.com/fb55/domhandler?sponsor=1" - } - }, - "node_modules/domutils": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/domutils/-/domutils-3.0.1.tgz", - "integrity": "sha512-z08c1l761iKhDFtfXO04C7kTdPBLi41zwOZl00WS8b5eiaebNpY00HKbztwBq+e3vyqWNwWF3mP9YLUeqIrF+Q==", - "dependencies": { - "dom-serializer": "^2.0.0", - "domelementtype": "^2.3.0", - "domhandler": "^5.0.1" - }, - "funding": { - "url": "https://github.com/fb55/domutils?sponsor=1" - } - }, "node_modules/ejs": { "version": "3.1.8", "resolved": "https://registry.npmjs.org/ejs/-/ejs-3.1.8.tgz", @@ -4863,17 +4697,6 @@ "node": ">=10.13.0" } }, - "node_modules/entities": { - "version": "4.4.0", - "resolved": "https://registry.npmjs.org/entities/-/entities-4.4.0.tgz", - "integrity": "sha512-oYp7156SP8LkeGD0GF85ad1X9Ai79WtRsZ2gxJqtBuzH+98YUV6jkHEKlZkMbcrjJjIVJNIDP/3WL9wQkoPbWA==", - "engines": { - "node": ">=0.12" - }, - "funding": { - "url": "https://github.com/fb55/entities?sponsor=1" - } - }, "node_modules/es-abstract": { "version": "1.21.1", "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.21.1.tgz", @@ -6208,24 +6031,6 @@ "react-is": "^16.7.0" } }, - "node_modules/htmlparser2": { - "version": "8.0.1", - "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-8.0.1.tgz", - "integrity": "sha512-4lVbmc1diZC7GUJQtRQ5yBAeUCL1exyMwmForWkRLnwyzWBFxN633SALPMGYaWZvKe9j1pRZJpauvmxENSp/EA==", - "funding": [ - "https://github.com/fb55/htmlparser2?sponsor=1", - { - "type": "github", - "url": "https://github.com/sponsors/fb55" - } - ], - "dependencies": { - "domelementtype": "^2.3.0", - "domhandler": "^5.0.2", - "domutils": "^3.0.1", - "entities": "^4.3.0" - } - }, "node_modules/idb": { "version": "7.0.1", "resolved": "https://registry.npmjs.org/idb/-/idb-7.0.1.tgz", @@ -7429,17 +7234,6 @@ "resolved": "https://registry.npmjs.org/nprogress/-/nprogress-0.2.0.tgz", "integrity": "sha512-I19aIingLgR1fmhftnbWWO3dXc0hSxqHQHQb3H8m+K3TnEn/iSeTZZOyvKXWqQESMwuUVnatlCnZdLBZZt2VSA==" }, - "node_modules/nth-check": { - "version": "2.1.1", - "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.1.1.tgz", - "integrity": "sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==", - "dependencies": { - "boolbase": "^1.0.0" - }, - "funding": { - "url": "https://github.com/fb55/nth-check?sponsor=1" - } - }, "node_modules/oauth": { "version": "0.9.15", "resolved": "https://registry.npmjs.org/oauth/-/oauth-0.9.15.tgz", @@ -7697,29 +7491,6 @@ "node": ">=6" } }, - "node_modules/parse5": { - "version": "7.1.2", - "resolved": "https://registry.npmjs.org/parse5/-/parse5-7.1.2.tgz", - "integrity": "sha512-Czj1WaSVpaoj0wbhMzLmWD69anp2WH7FXMB9n1Sy8/ZFF9jolSQVMu1Ij5WIyGmcBmhk7EOndpO4mIpihVqAXw==", - "dependencies": { - "entities": "^4.4.0" - }, - "funding": { - "url": "https://github.com/inikulin/parse5?sponsor=1" - } - }, - "node_modules/parse5-htmlparser2-tree-adapter": { - "version": "7.0.0", - "resolved": "https://registry.npmjs.org/parse5-htmlparser2-tree-adapter/-/parse5-htmlparser2-tree-adapter-7.0.0.tgz", - "integrity": "sha512-B77tOZrqqfUfnVcOrUvfdLbz4pu4RopLD/4vmu3HUPswwTA8OH0EMW9BlWR2B0RCoiZRAHEUu7IxeP1Pd1UU+g==", - "dependencies": { - "domhandler": "^5.0.2", - "parse5": "^7.0.0" - }, - "funding": { - "url": "https://github.com/inikulin/parse5?sponsor=1" - } - }, "node_modules/path-exists": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz", @@ -11747,28 +11518,6 @@ "to-fast-properties": "^2.0.0" } }, - "@consumet/extensions": { - "version": "git+ssh://[email protected]/consumet/consumet.ts.git#3224942ef952858a234502d06fd903154c8c9b34", - "from": "@consumet/extensions@github:consumet/consumet.ts", - "requires": { - "ascii-url-encoder": "^1.2.0", - "axios": "^0.27.2", - "cheerio": "^1.0.0-rc.11", - "crypto-js": "^4.1.1", - "form-data": "^4.0.0" - }, - "dependencies": { - "axios": { - "version": "0.27.2", - "resolved": "https://registry.npmjs.org/axios/-/axios-0.27.2.tgz", - "integrity": "sha512-t+yRIyySRTp/wua5xEr+z1q60QmLq8ABsS5O9Me1AsE5dfKqgnCFzwiCZZ/cGNd1lq4/7akDWMxdhVlucjmnOQ==", - "requires": { - "follow-redirects": "^1.14.9", - "form-data": "^4.0.0" - } - } - } - }, "@eslint-community/eslint-utils": { "version": "4.4.0", "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz", @@ -11830,14 +11579,6 @@ "integrity": "sha512-NQ17ii0rK1b34VZonlmT2QMJFI70m0TRwbknO/ihlbatXyaktDhN/98vBiUU6kNBPljqGqyIrl2T4nY2RpFANg==", "requires": {} }, - "@headlessui/react": { - "version": "1.7.14", - "resolved": "https://registry.npmjs.org/@headlessui/react/-/react-1.7.14.tgz", - "integrity": "sha512-znzdq9PG8rkwcu9oQ2FwIy0ZFtP9Z7ycS+BAqJ3R5EIqC/0bJGvhT7193rFf+45i9nnPsYvCQVW4V/bB9Xc+gA==", - "requires": { - "client-only": "^0.0.1" - } - }, "@heroicons/react": { "version": "2.0.17", "resolved": "https://registry.npmjs.org/@heroicons/react/-/react-2.0.17.tgz", @@ -12664,11 +12405,6 @@ "option-validator": "^2.0.6" } }, - "ascii-url-encoder": { - "version": "1.2.0", - "resolved": "https://registry.npmjs.org/ascii-url-encoder/-/ascii-url-encoder-1.2.0.tgz", - "integrity": "sha512-jRQMrz1ZqL7gnK60Xbu1S8kDi01UN+lHBnhvXZZqjd7nms7t4jOv4o9nE8bbfDh1Ts/KEtW2nXGR5CmydDBmlw==" - }, "ast-types-flow": { "version": "0.0.7", "resolved": "https://registry.npmjs.org/ast-types-flow/-/ast-types-flow-0.0.7.tgz", @@ -12800,11 +12536,6 @@ "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==", "dev": true }, - "boolbase": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz", - "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==" - }, "bowser": { "version": "2.11.0", "resolved": "https://registry.npmjs.org/bowser/-/bowser-2.11.0.tgz", @@ -12925,33 +12656,6 @@ } } }, - "cheerio": { - "version": "1.0.0-rc.12", - "resolved": "https://registry.npmjs.org/cheerio/-/cheerio-1.0.0-rc.12.tgz", - "integrity": "sha512-VqR8m68vM46BNnuZ5NtnGBKIE/DfN0cRIzg9n40EIq9NOv90ayxLBXA8fXC5gquFRGJSTRqBq25Jt2ECLR431Q==", - "requires": { - "cheerio-select": "^2.1.0", - "dom-serializer": "^2.0.0", - "domhandler": "^5.0.3", - "domutils": "^3.0.1", - "htmlparser2": "^8.0.1", - "parse5": "^7.0.0", - "parse5-htmlparser2-tree-adapter": "^7.0.0" - } - }, - "cheerio-select": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/cheerio-select/-/cheerio-select-2.1.0.tgz", - "integrity": "sha512-9v9kG0LvzrlcungtnJtpGNxY+fzECQKhK4EGJX2vByejiMX84MFNQw4UxPJl3bFbTMw+Dfs37XaIkCwTZfLh4g==", - "requires": { - "boolbase": "^1.0.0", - "css-select": "^5.1.0", - "css-what": "^6.1.0", - "domelementtype": "^2.3.0", - "domhandler": "^5.0.3", - "domutils": "^3.0.1" - } - }, "chokidar": { "version": "3.5.3", "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz", @@ -13074,33 +12778,11 @@ "which": "^2.0.1" } }, - "crypto-js": { - "version": "4.1.1", - "resolved": "https://registry.npmjs.org/crypto-js/-/crypto-js-4.1.1.tgz", - "integrity": "sha512-o2JlM7ydqd3Qk9CA0L4NL6mTzU2sdx96a+oOfPu8Mkl/PK51vSyoi8/rQ8NknZtk44vq15lmhAj9CIAGwgeWKw==" - }, "crypto-random-string": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/crypto-random-string/-/crypto-random-string-2.0.0.tgz", "integrity": "sha512-v1plID3y9r/lPhviJ1wrXpLeyUIGAZ2SHNYTEapm7/8A9nLPoyvVp3RK/EPFqn5kEznyWgYZNsRtYYIWbuG8KA==" }, - "css-select": { - "version": "5.1.0", - "resolved": "https://registry.npmjs.org/css-select/-/css-select-5.1.0.tgz", - "integrity": "sha512-nwoRF1rvRRnnCqqY7updORDsuqKzqYJ28+oSMaJMMgOauh3fvwHqMS7EZpIPqK8GL+g9mKxF1vP/ZjSeNjEVHg==", - "requires": { - "boolbase": "^1.0.0", - "css-what": "^6.1.0", - "domhandler": "^5.0.2", - "domutils": "^3.0.1", - "nth-check": "^2.0.1" - } - }, - "css-what": { - "version": "6.1.0", - "resolved": "https://registry.npmjs.org/css-what/-/css-what-6.1.0.tgz", - "integrity": "sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==" - }, "cssesc": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz", @@ -13248,39 +12930,6 @@ "esutils": "^2.0.2" } }, - "dom-serializer": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz", - "integrity": "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==", - "requires": { - "domelementtype": "^2.3.0", - "domhandler": "^5.0.2", - "entities": "^4.2.0" - } - }, - "domelementtype": { - "version": "2.3.0", - "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz", - "integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==" - }, - "domhandler": { - "version": "5.0.3", - "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz", - "integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==", - "requires": { - "domelementtype": "^2.3.0" - } - }, - "domutils": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/domutils/-/domutils-3.0.1.tgz", - "integrity": "sha512-z08c1l761iKhDFtfXO04C7kTdPBLi41zwOZl00WS8b5eiaebNpY00HKbztwBq+e3vyqWNwWF3mP9YLUeqIrF+Q==", - "requires": { - "dom-serializer": "^2.0.0", - "domelementtype": "^2.3.0", - "domhandler": "^5.0.1" - } - }, "ejs": { "version": "3.1.8", "resolved": "https://registry.npmjs.org/ejs/-/ejs-3.1.8.tgz", @@ -13315,11 +12964,6 @@ "tapable": "^2.2.0" } }, - "entities": { - "version": "4.4.0", - "resolved": "https://registry.npmjs.org/entities/-/entities-4.4.0.tgz", - "integrity": "sha512-oYp7156SP8LkeGD0GF85ad1X9Ai79WtRsZ2gxJqtBuzH+98YUV6jkHEKlZkMbcrjJjIVJNIDP/3WL9wQkoPbWA==" - }, "es-abstract": { "version": "1.21.1", "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.21.1.tgz", @@ -14301,17 +13945,6 @@ "react-is": "^16.7.0" } }, - "htmlparser2": { - "version": "8.0.1", - "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-8.0.1.tgz", - "integrity": "sha512-4lVbmc1diZC7GUJQtRQ5yBAeUCL1exyMwmForWkRLnwyzWBFxN633SALPMGYaWZvKe9j1pRZJpauvmxENSp/EA==", - "requires": { - "domelementtype": "^2.3.0", - "domhandler": "^5.0.2", - "domutils": "^3.0.1", - "entities": "^4.3.0" - } - }, "idb": { "version": "7.0.1", "resolved": "https://registry.npmjs.org/idb/-/idb-7.0.1.tgz", @@ -15170,14 +14803,6 @@ "resolved": "https://registry.npmjs.org/nprogress/-/nprogress-0.2.0.tgz", "integrity": "sha512-I19aIingLgR1fmhftnbWWO3dXc0hSxqHQHQb3H8m+K3TnEn/iSeTZZOyvKXWqQESMwuUVnatlCnZdLBZZt2VSA==" }, - "nth-check": { - "version": "2.1.1", - "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.1.1.tgz", - "integrity": "sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==", - "requires": { - "boolbase": "^1.0.0" - } - }, "oauth": { "version": "0.9.15", "resolved": "https://registry.npmjs.org/oauth/-/oauth-0.9.15.tgz", @@ -15365,23 +14990,6 @@ "callsites": "^3.0.0" } }, - "parse5": { - "version": "7.1.2", - "resolved": "https://registry.npmjs.org/parse5/-/parse5-7.1.2.tgz", - "integrity": "sha512-Czj1WaSVpaoj0wbhMzLmWD69anp2WH7FXMB9n1Sy8/ZFF9jolSQVMu1Ij5WIyGmcBmhk7EOndpO4mIpihVqAXw==", - "requires": { - "entities": "^4.4.0" - } - }, - "parse5-htmlparser2-tree-adapter": { - "version": "7.0.0", - "resolved": "https://registry.npmjs.org/parse5-htmlparser2-tree-adapter/-/parse5-htmlparser2-tree-adapter-7.0.0.tgz", - "integrity": "sha512-B77tOZrqqfUfnVcOrUvfdLbz4pu4RopLD/4vmu3HUPswwTA8OH0EMW9BlWR2B0RCoiZRAHEUu7IxeP1Pd1UU+g==", - "requires": { - "domhandler": "^5.0.2", - "parse5": "^7.0.0" - } - }, "path-exists": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz", diff --git a/package.json b/package.json index 842f12e..b934fe0 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "moopa", - "version": "3.2.0", + "version": "3.4.0", "private": true, "scripts": { "dev": "next dev", @@ -11,8 +11,6 @@ }, "dependencies": { "@apollo/client": "^3.7.3", - "@consumet/extensions": "github:consumet/consumet.ts", - "@headlessui/react": "^1.7.14", "@heroicons/react": "^2.0.17", "@next/font": "13.0.7", "artplayer": "latest", diff --git a/pages/anime/[...id].js b/pages/anime/[...id].js index cf70c62..43b6ca9 100644 --- a/pages/anime/[...id].js +++ b/pages/anime/[...id].js @@ -15,8 +15,11 @@ import { useEffect, useState } from "react"; import Layout from "../../components/layout"; import Link from "next/link"; import Content from "../../components/hero/content"; +import Modal from "../../components/modal"; -import { useSession } from "next-auth/react"; +import { signIn, useSession } from "next-auth/react"; +import AniList from "../../components/media/aniList"; +import ListEditor from "../../components/listEditor"; const query = ` query ($username: String, $status: MediaListStatus) { @@ -137,22 +140,35 @@ const infoQuery = `query ($id: Int) { } }`; +const stats = [ + "Watching", + "Plan to Watch", + "Completed", + "Dropped", + "Paused", + "Rewatching", +]; + export default function Info() { const { data: session, status } = useSession(); const [data, setData] = useState(null); const [info, setInfo] = useState(null); const [episode, setEpisode] = useState(null); const [loading, setLoading] = useState(false); - const [progress, setProgress] = useState(null); + const [progress, setProgress] = useState(0); const [statuses, setStatuses] = useState(null); const [stall, setStall] = useState(false); const [color, setColor] = useState(null); const [showAll, setShowAll] = useState(false); + const [open, setOpen] = useState(false); const [time, setTime] = useState(0); const { id } = useRouter().query; + const [aniStatus, setAniStatus] = useState(statuses); + const [aniProgress, setAniProgress] = useState(0); + const rec = info?.recommendations?.nodes.map( (data) => data.mediaRecommendation ); @@ -262,18 +278,25 @@ export default function Info() { if (gut) { setProgress(gut?.progress); + setAniProgress(parseInt(gut?.progress)); if (gut.status === "CURRENT") { setStatuses("Watching"); + setAniStatus("Watching"); } else if (gut.status === "PLANNING") { setStatuses("Planned to watch"); + setAniStatus("Planned to watch"); } else if (gut.status === "COMPLETED") { setStatuses("Completed"); + setAniStatus("Completed"); } else if (gut.status === "DROPPED") { setStatuses("Dropped"); + setAniStatus("Dropped"); } else if (gut.status === "PAUSED") { setStatuses("Paused"); + setAniStatus("Paused"); } else if (gut.status === "REPEATING") { setStatuses("Rewatching"); + setAniStatus("Rewatching"); } } } @@ -297,6 +320,28 @@ export default function Info() { fetchData(); }, [id, session?.user?.name]); + function handleOpen() { + setOpen(true); + document.body.style.overflow = "hidden"; + } + + function handleClose() { + setOpen(false); + document.body.style.overflow = "auto"; + } + + function handleSubmit(e) { + e.preventDefault(); + const formData = { status: aniStatus, progress: aniProgress }; + console.log(formData); + } + + function handleProgress(e) { + setAniProgress(e.target.value); + } + + // console.log(progress); + return ( <> <Head> @@ -306,6 +351,37 @@ export default function Info() { : "Retrieving Data..."} </title> </Head> + <Modal open={open} onClose={() => handleClose()}> + <div className="bg-[#202020] rounded-lg text-center"> + {!session && ( + <div className="flex-center flex-col gap-5 px-10 py-5"> + <h1 className="text-md font-extrabold font-karla"> + Edit your list + </h1> + <button + className="flex items-center bg-[#3a3a3a] rounded-md text-white p-1" + onClick={() => signIn("AniListProvider")} + > + <h1 className="px-1 font-bold font-karla"> + Login with AniList + </h1> + <div className="scale-[60%] pb-[1px]"> + <AniList /> + </div> + </button> + </div> + )} + {session && info && progress && ( + <ListEditor + animeId={info?.id} + session={session} + stats={statuses} + prg={progress} + max={info?.episodes} + /> + )} + </div> + </Modal> <SkeletonTheme baseColor="#232329" highlightColor="#2a2a32"> <Layout navTop="text-white bg-primary md:pt-0 md:px-0 bg-slate bg-opacity-40 z-50"> <div className="w-screen min-h-screen relative flex flex-col items-center bg-primary gap-5"> @@ -362,7 +438,10 @@ export default function Info() { {info && ( <div className="flex items-center gap-5 pt-3 text-center"> <div className="flex items-center gap-2 text-center"> - <div className="bg-action px-10 rounded-sm font-karla font-bold"> + <div + className="bg-action px-10 rounded-sm font-karla font-bold cursor-pointer" + onClick={() => handleOpen()} + > {statuses ? statuses : "Add to List"} </div> <div className="h-6 w-6"> @@ -465,14 +544,6 @@ export default function Info() { > Sub | EN </div> - {info && info.nextAiringEpisode && ( - <div - className={`dynamic-text shadow-button rounded-md px-2 font-karla font-bold`} - style={color} - > - Ep {info.nextAiringEpisode.episode}: {time} - </div> - )} </div> ) : ( <Skeleton width={240} height={32} /> |