3 files changed, 49 insertions, 6 deletions
diff --git a/components/watch/player/artplayer.js b/components/watch/player/artplayer.js
index 4eb766d..2ab4ded 100644
--- a/components/watch/player/artplayer.js
+++ b/components/watch/player/artplayer.js
@@ -1,7 +1,7 @@
 import { useEffect, useRef } from "react";
 import Artplayer from "artplayer";
 import Hls from "hls.js";
-import { useWatchProvider } from "../../../lib/hooks/watchPageProvider";
+import { useWatchProvider } from "@/lib/context/watchPageProvider";
 import { seekBackward, seekForward } from "./component/overlay";
 import artplayerPluginHlsQuality from "artplayer-plugin-hls-quality";
 
@@ -10,6 +10,7 @@ export default function NewPlayer({
   option,
   getInstance,
   provider,
+  track,
   defSub,
   defSize,
   subtitles,
@@ -274,6 +275,46 @@ export default function NewPlayer({
       ],
     });
 
+    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}`
+          );
+        }
+      });
+    }
+
     playerRef.current = art;
 
     art.events.proxy(document, "keydown", (event) => {
diff --git a/components/watch/player/playerComponent.js b/components/watch/player/playerComponent.js
index 9fe9cd3..a524b79 100644
--- a/components/watch/player/playerComponent.js
+++ b/components/watch/player/playerComponent.js
@@ -1,9 +1,9 @@
 import React, { useEffect, useState } from "react";
 import NewPlayer from "./artplayer";
 import { icons } from "./component/overlay";
-import { useWatchProvider } from "../../../lib/hooks/watchPageProvider";
+import { useWatchProvider } from "@/lib/context/watchPageProvider";
 import { useRouter } from "next/router";
-import { useAniList } from "../../../lib/anilist/useAnilist";
+import { useAniList } from "@/lib/anilist/useAnilist";
 
 export function calculateAspectRatio(width, height) {
   const gcd = (a, b) => (b === 0 ? a : gcd(b, a % b));
@@ -475,6 +475,7 @@ export default function PlayerComponent({
               quality={source}
               option={option}
               provider={provider}
+              track={track}
               defSize={defSize}
               defSub={defSub}
               subSize={subSize}
diff --git a/components/watch/secondary/episodeLists.js b/components/watch/secondary/episodeLists.js
index 8a057ce..5fa21ad 100644
--- a/components/watch/secondary/episodeLists.js
+++ b/components/watch/secondary/episodeLists.js
@@ -12,6 +12,7 @@ export default function EpisodeLists({
   dub,
 }) {
   const progress = info.mediaListEntry?.progress;
+
   return (
     <div className="w-screen lg:max-w-sm xl:max-w-xl">
       <h1 className="text-xl font-karla pl-5 pb-5 font-semibold">Up Next</h1>
@@ -67,11 +68,11 @@ export default function EpisodeLists({
                         className={`absolute bottom-0 left-0 h-[2px] bg-red-700`}
                         style={{
                           width:
-                            progress && artStorage && item?.number <= progress
+                            progress !== undefined && progress >= item?.number
                               ? "100%"
-                              : artStorage?.[item?.id]
+                              : artStorage?.[item?.id] !== undefined
                               ? `${prog}%`
-                              : "0",
+                              : "0%",
                         }}
                       />
                       <span className="absolute bottom-2 left-2 font-karla font-bold text-sm">