Update v3.8.7 - Merged Beta to Main (#39)

* Update v3.8.6

> Minor update for Android 13 user

* Update v3.8.7

> Added prev and next button to mediaSession

1 files changed, 47 insertions, 0 deletions

diff --git a/lib/Artplayer.js b/lib/Artplayer.js
index 5a50303..94ceff1 100644
--- a/lib/Artplayer.js
+++ b/lib/Artplayer.js
@@ -1,6 +1,7 @@
 import { useEffect, useRef } from "react";
 import Artplayer from "artplayer";
 import Hls from "hls.js";
+import { useRouter } from "next/router";
 
 export default function Player({
   option,
@@ -10,9 +11,13 @@ export default function Player({
   subtitles,
   provider,
   getInstance,
+  id,
+  track,
   ...rest
 }) {
   const artRef = useRef();
+  const router = useRouter();
+
   function playM3u8(video, url, art) {
     if (Hls.isSupported()) {
       if (art.hls) art.hls.destroy();
@@ -202,12 +207,54 @@ export default function Player({
       ].filter(Boolean),
     });
 
+    if ("mediaSession" in navigator) {
+      art.on("video:timeupdate", () => {
+        const session = navigator.mediaSession;
+        if (!session) return;
+        session.setPositionState({
+          duration: art.duration,
+          playbackRate: art.playbackRate,
+          position: art.currentTime,
+        });
+      });
+
+      navigator.mediaSession.setActionHandler("play", () => {
+        art.play();
+      });
+
+      navigator.mediaSession.setActionHandler("pause", () => {
+        art.pause();
+      });
+
+      navigator.mediaSession.setActionHandler("previoustrack", () => {
+        if (track?.prev) {
+          router.push(
+            `/en/anime/watch/${id}/${provider}?id=${encodeURIComponent(
+              track?.prev?.id
+            )}&num=${track?.prev?.number}`
+          );
+        }
+      });
+
+      navigator.mediaSession.setActionHandler("nexttrack", () => {
+        if (track?.next) {
+          router.push(
+            `/en/anime/watch/${id}/${provider}?id=${encodeURIComponent(
+              track?.next?.id
+            )}&num=${track?.next?.number}`
+          );
+        }
+      });
+    }
+
     art.events.proxy(document, "keydown", (event) => {
       if (event.key === "f" || event.key === "F") {
         art.fullscreen = !art.fullscreen;
       }
     });
 
+    // artInstanceRef.current = art;
+
     if (getInstance && typeof getInstance === "function") {
       getInstance(art);
     }