From 2bb6c0f11b8bdc1e6bf732139da4488861c06503 Mon Sep 17 00:00:00 2001 From: Factiven Date: Mon, 1 May 2023 14:49:13 +0700 Subject: Update v3.5.1 --- .github/FUNDING.yml | 2 +- README.md | 29 ++++++++++++++++++++-------- components/videoPlayer.js | 7 +++++++ pages/anime/watch/[...info].js | 44 ++++++++++++++++++------------------------ 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 @@

-

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.

-

- main + main

@@ -47,6 +45,10 @@
+## Introduction + +

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.

+ ## 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 [factiven.org@gmail.com](mailto:factiven.org@gmail.com), 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 [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) + +[Star this project](https://github.com/DevanAbinaya/Ani-Moopa) + +[![ko-fi](https://ko-fi.com/img/githubbutton_sm.svg)](https://ko-fi.com/E1E6F9XZ3) +Trakteer Saya 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 ( <> -- cgit v1.2.3