Update v3.5.1

4 files changed, 48 insertions, 34 deletions

diff --git a/.github/FUNDING.yml b/.github/FUNDING.yml
index e10832d..345dc0a 100644
--- a/.github/FUNDING.yml
+++ b/.github/FUNDING.yml
@@ -10,4 +10,4 @@ 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']
+custom: ["https://trakteer.id/factiven"]
diff --git a/README.md b/README.md
index 051e37a..f67b995 100644
--- a/README.md
+++ b/README.md
@@ -22,10 +22,8 @@
   
 </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">
+ <img src="https://user-images.githubusercontent.com/97084324/234832975-0804e6bd-8528-4f53-b0fb-7ccce5342f59.png" alt="main">
 </p>
 
 <details>
@@ -47,6 +45,10 @@
  
 </details>
 
+## Introduction
+
+<p><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>
+
 ## Features
 
 - Free ad-supported streaming service
@@ -61,23 +63,28 @@
 - [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] 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
+  - [x] 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 :
+
+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"
@@ -87,6 +94,7 @@ NEXTAUTH_URL="for development use http://localhost:3000/ and for production use
 ```
 
 4. Start local server :
+
 ```bash
 npm run dev
 ```
@@ -103,7 +111,12 @@ This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md
 
 ## 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).
+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)
+
+[Star this project](https://github.com/DevanAbinaya/Ani-Moopa)
+
+[![ko-fi](https://ko-fi.com/img/githubbutton_sm.svg)](https://ko-fi.com/E1E6F9XZ3)  
+<a href="https://trakteer.id/factiven" target="_blank"><img id="wse-buttons-preview" src="https://cdn.trakteer.id/images/embed/trbtn-red-5.png" height="36" style="border: 0px; height: 36px;" alt="Trakteer Saya"></a>
diff --git a/components/videoPlayer.js b/components/videoPlayer.js
index b007d95..b6372c2 100644
--- a/components/videoPlayer.js
+++ b/components/videoPlayer.js
@@ -98,10 +98,17 @@ export default function VideoPlayer({
 
             art.on("video:timeupdate", () => {
               if (!session) return;
+              const mediaSession = navigator.mediaSession;
               const currentTime = art.currentTime;
               const duration = art.duration;
               const percentage = currentTime / duration;
 
+              mediaSession.setPositionState({
+                duration: art.duration,
+                playbackRate: art.playbackRate,
+                position: art.currentTime,
+              });
+
               // console.log(percentage);
 
               if (percentage >= 0.9) {
diff --git a/pages/anime/watch/[...info].js b/pages/anime/watch/[...info].js
index 0d11684..682e252 100644
--- a/pages/anime/watch/[...info].js
+++ b/pages/anime/watch/[...info].js
@@ -8,12 +8,9 @@ import dynamic from "next/dynamic";
 
 import { useNotification } from "../../../lib/useNotify";
 
-import { signIn } from "next-auth/react";
 import { getServerSession } from "next-auth/next";
 import { authOptions } from "../../api/auth/[...nextauth]";
 
-import AniList from "../../../components/media/aniList";
-
 import Skeleton, { SkeletonTheme } from "react-loading-skeleton";
 import "react-loading-skeleton/dist/skeleton.css";
 
@@ -259,28 +256,25 @@ export default function Info({ sessions, id, aniId, provider }) {
     fetchData();
   }, [id, aniId, provider, sessions]);
 
-  const { Notification: NotificationComponent } = useNotification();
-
-  const [open, setOpen] = useState(false);
-  const [aniStatus, setAniStatus] = useState("");
-  const [aniProgress, setAniProgress] = useState(parseInt(playingEpisode));
-
-  const handleStatus = (e) => {
-    setAniStatus(e.target.value);
-  };
-
-  const handleProgress = (e) => {
-    const value = parseFloat(e.target.value);
-    if (!isNaN(value) && value >= 0 && value <= data.totalEpisodes) {
-      setAniProgress(value);
-    }
-  };
-
-  const handleSubmit = (e) => {
-    e.preventDefault();
-    const formData = { status: aniStatus, progress: aniProgress };
-    console.log(formData);
-  };
+  useEffect(() => {
+    const mediaSession = navigator.mediaSession;
+    if (!mediaSession) return;
+
+    const artwork =
+      poster && poster.length > 0
+        ? [{ src: poster[0].image, type: "image/jpeg" }]
+        : undefined;
+
+    mediaSession.metadata = new MediaMetadata({
+      title: playingTitle,
+      artist: `Moopa ${
+        playingTitle === data?.title?.romaji
+          ? "- Episode " + playingEpisode
+          : `- ${data?.title?.romaji || data?.title?.english}`
+      }`,
+      artwork,
+    });
+  }, [poster, playingTitle, playingEpisode, data]);
 
   return (
     <>