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

3 files changed, 29 insertions, 2 deletions

diff --git a/components/anime/mobile/topSection.js b/components/anime/mobile/topSection.js
index 4f7c4b3..e9c9c7d 100644
--- a/components/anime/mobile/topSection.js
+++ b/components/anime/mobile/topSection.js
@@ -60,14 +60,14 @@ export default function DetailTop({ info, statuses, handleOpen, loading }) {
               </div>
               <div className="flex-center flex-col xxs:flex-row gap-2">
                 <ArrowTrendingUpIcon className="w-5 h-5 text-action" />
-                <h4>{info?.averageScore}%</h4>
+                <h4>{info?.averageScore ? `${info?.averageScore}%` : "N/A"}</h4>
               </div>
               <div className="flex-center flex-col xxs:flex-row gap-2">
                 <RectangleStackIcon className="w-5 h-5 text-action" />
                 {info?.episodes ? (
                   <h1>{info?.episodes} Episodes</h1>
                 ) : (
-                  <h1>TBA</h1>
+                  <h1>N/A</h1>
                 )}
               </div>
             </>
diff --git a/components/anime/watch/primarySide.js b/components/anime/watch/primarySide.js
index 49bb1b6..fa12711 100644
--- a/components/anime/watch/primarySide.js
+++ b/components/anime/watch/primarySide.js
@@ -74,6 +74,29 @@ export default function PrimarySide({
     fetchData();
   }, [providerId, watchId, info]);
 
+  useEffect(() => {
+    const mediaSession = navigator.mediaSession;
+    if (!mediaSession) return;
+
+    const now = navigation?.playing;
+    const poster = now?.image || info?.bannerImage;
+    const title = now?.title || info?.title?.romaji;
+
+    const artwork = poster
+      ? [{ src: poster, sizes: "512x512", type: "image/jpeg" }]
+      : undefined;
+
+    mediaSession.metadata = new MediaMetadata({
+      title: title,
+      artist: `Moopa ${
+        title === info?.title?.romaji
+          ? "- Episode " + epiNumber
+          : `- ${info?.title?.romaji || info?.title?.english}`
+      }`,
+      artwork,
+    });
+  }, [navigation, info, epiNumber]);
+
   function handleOpen() {
     setOpen(true);
     document.body.style.overflow = "hidden";
@@ -118,6 +141,7 @@ export default function PrimarySide({
                 skip={skip}
                 proxy={proxy}
                 aniId={info.id}
+                track={navigation}
               />
             )
           ) : (
diff --git a/components/videoPlayer.js b/components/videoPlayer.js
index 301812a..3709fd0 100644
--- a/components/videoPlayer.js
+++ b/components/videoPlayer.js
@@ -30,6 +30,7 @@ export default function VideoPlayer({
   poster,
   proxy,
   provider,
+  track,
 }) {
   const [url, setUrl] = useState("");
   const [source, setSource] = useState([]);
@@ -171,11 +172,13 @@ export default function VideoPlayer({
               },
             }),
           }}
+          id={aniId}
           res={resolution}
           quality={source}
           subSize={subSize}
           subtitles={subtitle}
           provider={provider}
+          track={track}
           style={{
             width: "100%",
             height: "100%",