Use peak debugging tech #6

src/components/player/atoms/NextEpisodeButton.tsx

@@ -54,8 +54,6 @@ export function NextEpisodeButton(props: {
   const setShouldStartFromBeginning = usePlayerStore(
     (s) => s.setShouldStartFromBeginning,
   );
-  const currentTime = usePlayerStore((s) => s.progress.time);
-  const episodeDuration = usePlayerStore((s) => s.progress.duration);
 
   let show = false;
   if (showingState === "always") show = true;
@@ -80,7 +78,31 @@ export function NextEpisodeButton(props: {
     setShouldStartFromBeginning(true);
     setDirectMeta(metaCopy);
     props.onChange?.(metaCopy);
-  }, [setDirectMeta, nextEp, meta, props, setShouldStartFromBeginning]);
+
+    // Check if the current video has finished
+    if (time === duration) {
+      // Get the next episode
+      const nextEpisode = meta?.episodes?.find(
+        (v) => v.number === (meta?.episode?.number ?? 0) + 1,
+      );
+
+      // If there is a next episode, start playing it
+      if (nextEpisode) {
+        metaCopy.episode = nextEpisode;
+        setShouldStartFromBeginning(true);
+        setDirectMeta(metaCopy);
+        props.onChange?.(metaCopy);
+      }
+    }
+  }, [
+    setDirectMeta,
+    nextEp,
+    meta,
+    props,
+    setShouldStartFromBeginning,
+    time,
+    duration,
+  ]);
 
   const startCurrentEpisodeFromBeginning = useCallback(() => {
     if (!meta || !meta.episode) return;
@@ -90,12 +112,6 @@ export function NextEpisodeButton(props: {
     props.onChange?.(metaCopy);
   }, [setDirectMeta, meta, props, setShouldStartFromBeginning]);
 
-  useEffect(() => {
-    if (currentTime === episodeDuration) {
-      loadNextEpisode();
-    }
-  }, [currentTime, episodeDuration, loadNextEpisode]);
-
   if (!meta?.episode || !nextEp) return null;
   if (metaType !== "show") return null;