Editor List v0.1

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
+
+[![ko-fi](https://ko-fi.com/img/githubbutton_sm.svg)](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} />