Refactor code

2 files changed, 14 insertions, 54 deletions

diff --git a/components/watch/new-player/player.tsx b/components/watch/new-player/player.tsx
index 5e25a61..1bbfd40 100644
--- a/components/watch/new-player/player.tsx
+++ b/components/watch/new-player/player.tsx
@@ -20,6 +20,7 @@ import { Subtitle } from "types/episodes/TrackData";
 import useWatchStorage from "@/lib/hooks/useWatchStorage";
 import { Sessions } from "types/episodes/Sessions";
 import { useAniList } from "@/lib/anilist/useAnilist";
+import useChapterTracks from "@/lib/hooks/useChapterTracks";
 
 export interface Navigation {
   prev: Prev;
@@ -115,6 +116,8 @@ export default function VidStack({
 
   const router = useRouter();
 
+  useChapterTracks(track, duration, setChapters);
+
   useEffect(() => {
     if (qualities.length > 0) {
       const sourceQuality = qualities.reduce(
@@ -255,58 +258,13 @@ export default function VidStack({
     });
   }, [playerState?.currentTime, playerState?.isPlaying]);
 
-  useEffect(() => {
-    const chapter = track?.skip;
-    const videoDuration = Math.round(duration);
-
-    if (!chapter || chapter.length === 0 || !player.current) {
-      // Handle cases where there's no chapter data or player is not ready
-      setChapters("");
-      return;
-    }
-
-    let vtt = "WEBVTT\n\n";
-
-    chapter.forEach((item: { endTime: any; startTime: any; text: any }) => {
-      if (!item.endTime) {
-        // Handle missing endTime gracefully
-        console.warn("Skipping item with missing endTime:", item);
-        return;
-      }
-
-      const [startMinutes, startSeconds] = formatTime(item.startTime);
-      const [endMinutes, endSeconds] = formatTime(item.endTime);
-
-      vtt += `${startMinutes}:${startSeconds} --> ${endMinutes}:${endSeconds}\n${item.text}\n\n`;
-    });
-
-    if (chapter[chapter.length - 1].endTime < videoDuration) {
-      // Add a final chapter if needed
-      const [startMinutes, startSeconds] = formatTime(
-        chapter[chapter.length - 1].endTime
-      );
-      const [endMinutes, endSeconds] = formatTime(videoDuration);
-      vtt += `${startMinutes}:${startSeconds} --> ${endMinutes}:${endSeconds}\n\n\n`;
-    }
-
-    const vttBlob = new Blob([vtt], { type: "text/vtt" });
-    const vttUrl = URL.createObjectURL(vttBlob);
-
-    setChapters(vttUrl);
-
-    return () => {
-      setChapters("");
-      URL.revokeObjectURL(vttUrl); // Clean up VTT URL
-    };
-  }, [track?.skip, duration, player.current]);
-
-  useEffect(() => {
-    return () => {
-      if (player.current) {
-        player.current.destroy();
-      }
-    };
-  }, [id]);
+  // useEffect(() => {
+  //   return () => {
+  //     if (player.current) {
+  //       player.current.destroy();
+  //     }
+  //   };
+  // }, [id]);
 
   function onEnded() {
     if (!navigation?.next?.id) return;
diff --git a/components/watch/secondary/episodeLists.tsx b/components/watch/secondary/episodeLists.tsx
index 2c23f25..48f0222 100644
--- a/components/watch/secondary/episodeLists.tsx
+++ b/components/watch/secondary/episodeLists.tsx
@@ -25,7 +25,7 @@ export default function EpisodeLists({
   episode,
   artStorage,
   track,
-  dub,
+  dub
 }: EpisodeListsProps) {
   const progress = info.mediaListEntry?.progress;
 
@@ -108,6 +108,7 @@ export default function EpisodeLists({
                       ? "pointer-events-none ring-1 ring-action"
                       : "cursor-pointer hover:scale-[1.02] ring-0 hover:ring-1 hover:shadow-lg ring-white"
                   }`}
+                  replace
                 >
                   <div className="w-[43%] lg:w-[42%] h-[110px] relative rounded-lg z-40 shrink-0 overflow-hidden shadow-[4px_0px_5px_0px_rgba(0,0,0,0.3)]">
                     <div className="relative">
@@ -133,7 +134,7 @@ export default function EpisodeLists({
                               ? "100%"
                               : artStorage?.[item?.id] !== undefined
                               ? `${prog}%`
-                              : "0%",
+                              : "0%"
                         }}
                       />
                       <span className="absolute bottom-2 left-2 font-karla font-bold text-sm text-white">
@@ -183,6 +184,7 @@ export default function EpisodeLists({
                       ? "pointer-events-none ring-1 ring-action text-[#5d5d5d]"
                       : "cursor-pointer hover:scale-[1.02] ring-0 hover:ring-1 hover:shadow-lg ring-white"
                   }`}
+                  replace
                 >
                   Episode {item.number}
                 </Link>