fix(player): Fix skip credits seeking past video end causing pause (#1277)

hooks/useCreditSkipper.ts

@@ -5,6 +5,19 @@ import { useSegments } from "@/utils/segments";
 import { msToSeconds, secondsToMs } from "@/utils/time";
 import { useHaptic } from "./useHaptic";
 
+/**
+ * Custom hook to handle skipping credits in a media player.
+ *
+ * @param {string} itemId - The ID of the media item.
+ * @param {number} currentTime - The current playback time (ms for VLC, seconds otherwise).
+ * @param {function} seek - Function to seek to a position.
+ * @param {function} play - Function to resume playback.
+ * @param {boolean} isVlc - Whether using VLC player (uses milliseconds).
+ * @param {boolean} isOffline - Whether in offline mode.
+ * @param {Api|null} api - The Jellyfin API client.
+ * @param {DownloadedItem[]|undefined} downloadedFiles - Downloaded files for offline mode.
+ * @param {number|undefined} totalDuration - Total duration of the video (ms for VLC, seconds otherwise).
+ */
 export const useCreditSkipper = (
   itemId: string,
   currentTime: number,
@@ -14,14 +27,20 @@ export const useCreditSkipper = (
   isOffline = false,
   api: Api | null = null,
   downloadedFiles: DownloadedItem[] | undefined = undefined,
+  totalDuration?: number,
 ) => {
   const [showSkipCreditButton, setShowSkipCreditButton] = useState(false);
   const lightHapticFeedback = useHaptic("light");
 
+  // Convert currentTime to seconds for consistent comparison (matching useIntroSkipper pattern)
   if (isVlc) {
     currentTime = msToSeconds(currentTime);
   }
 
+  const totalDurationInSeconds =
+    isVlc && totalDuration ? msToSeconds(totalDuration) : totalDuration;
+
+  // Regular function (not useCallback) to match useIntroSkipper pattern
   const wrappedSeek = (seconds: number) => {
     if (isVlc) {
       seek(secondsToMs(seconds));
@@ -38,27 +57,63 @@ export const useCreditSkipper = (
   );
   const creditTimestamps = segments?.creditSegments?.[0];
 
+  // Determine if there's content after credits (credits don't extend to video end)
+  // Use a 5-second buffer to account for timing discrepancies
+  const hasContentAfterCredits = (() => {
+    if (!creditTimestamps || !totalDurationInSeconds) return false;
+    const creditsEndToVideoEnd =
+      totalDurationInSeconds - creditTimestamps.endTime;
+    // If credits end more than 5 seconds before video ends, there's content after
+    return creditsEndToVideoEnd > 5;
+  })();
+
   useEffect(() => {
     if (creditTimestamps) {
-      setShowSkipCreditButton(
+      const shouldShow =
         currentTime > creditTimestamps.startTime &&
-          currentTime < creditTimestamps.endTime,
-      );
+        currentTime < creditTimestamps.endTime;
+
+      setShowSkipCreditButton(shouldShow);
+    } else {
+      // Reset button state when no credit timestamps exist
+      if (showSkipCreditButton) {
+        setShowSkipCreditButton(false);
+      }
     }
-  }, [creditTimestamps, currentTime]);
+  }, [creditTimestamps, currentTime, showSkipCreditButton]);
 
   const skipCredit = useCallback(() => {
     if (!creditTimestamps) return;
+
     try {
       lightHapticFeedback();
-      wrappedSeek(creditTimestamps.endTime);
+
+      // Calculate the target seek position
+      let seekTarget = creditTimestamps.endTime;
+
+      // If we have total duration, ensure we don't seek past the end of the video.
+      // Some media sources report credit end times that exceed the actual video duration,
+      // which causes the player to pause/stop when seeking past the end.
+      // Leave a small buffer (2 seconds) to trigger the natural end-of-video flow
+      // (next episode countdown, etc.) instead of an abrupt pause.
+      if (totalDurationInSeconds && seekTarget >= totalDurationInSeconds) {
+        seekTarget = Math.max(0, totalDurationInSeconds - 2);
+      }
+
+      wrappedSeek(seekTarget);
       setTimeout(() => {
         play();
       }, 200);
     } catch (error) {
-      console.error("Error skipping credit", error);
+      console.error("[CREDIT_SKIPPER] Error skipping credit", error);
     }
-  }, [creditTimestamps, lightHapticFeedback, wrappedSeek, play]);
+  }, [
+    creditTimestamps,
+    lightHapticFeedback,
+    wrappedSeek,
+    play,
+    totalDurationInSeconds,
+  ]);
 
-  return { showSkipCreditButton, skipCredit };
+  return { showSkipCreditButton, skipCredit, hasContentAfterCredits };
 };