Function useAutoPlay

src/components/hooks/useAutoPlay.ts:39–169

({
  autoPlay = false,
  slideInterval = DEFAULT_SLIDE_INTERVAL,
  slideDuration = DEFAULT_SLIDE_DURATION,
  infinite = true,
  totalSlides,
  currentIndex,
  canSlideRight,
  slideToIndexCore,
  slideToIndexWithStyleReset,
  onPlay,
  onPause,
}: UseAutoPlayProps)

 * Uses refs to avoid stale closures in setInterval
 */
export function useAutoPlay({
  autoPlay = false,
  slideInterval = DEFAULT_SLIDE_INTERVAL,
  slideDuration = DEFAULT_SLIDE_DURATION,
  infinite = true,
  totalSlides,
  currentIndex,
  canSlideRight,
  slideToIndexCore,
  slideToIndexWithStyleReset,
  onPlay,
  onPause,
}: UseAutoPlayProps): UseAutoPlayReturn {
  const [isPlaying, setIsPlaying] = useState(false);
  const playPauseIntervalRef = useRef<ReturnType<typeof setInterval> | null>(
    null
  );

  // Ref to hold the latest pauseOrPlay function (avoids stale closure in setInterval)
  const pauseOrPlayRef = useRef<(() => void) | null>(null);

  const pauseOrPlay = useCallback(() => {
    if (!infinite && !canSlideRight()) {
      // Stop at the end if not infinite
      if (playPauseIntervalRef.current) {
        clearInterval(playPauseIntervalRef.current);
        playPauseIntervalRef.current = null;
        setIsPlaying(false);
        if (onPause) {
          onPause(currentIndex);
        }
      }
    } else {
      const nextIndex = currentIndex + 1;
      // Handle 2 slides the same way as manual sliding
      if (totalSlides === 2) {
        slideToIndexWithStyleReset(nextIndex);
      } else {
        slideToIndexCore(nextIndex);
      }
    }
  }, [
    infinite,
    canSlideRight,
    currentIndex,
    totalSlides,
    slideToIndexCore,
    slideToIndexWithStyleReset,
    onPause,
  ]);

  // Keep ref updated with latest pauseOrPlay
  pauseOrPlayRef.current = pauseOrPlay;

  const play = useCallback(
    (shouldCallOnPlay = true) => {
      if (!playPauseIntervalRef.current) {
        setIsPlaying(true);