init commit,

03_source/frontend/src/components/carousel/hooks/use-carousel-auto-play.ts

@@ -0,0 +1,47 @@
+import type {} from 'embla-carousel-autoplay';
+import type { EmblaCarouselType } from 'embla-carousel';
+
+import { useState, useEffect, useCallback } from 'react';
+
+import type { UseCarouselAutoPlayReturn } from '../types';
+
+// ----------------------------------------------------------------------
+
+export function useCarouselAutoPlay(mainApi?: EmblaCarouselType): UseCarouselAutoPlayReturn {
+  const [isPlaying, setIsPlaying] = useState(false);
+
+  const onClickAutoplay = useCallback(
+    (callback: () => void) => {
+      const autoplay = mainApi?.plugins()?.autoplay;
+      if (!autoplay) return;
+
+      const resetOrStop =
+        autoplay.options.stopOnInteraction === false ? autoplay.reset : autoplay.stop;
+
+      resetOrStop();
+      callback();
+    },
+    [mainApi]
+  );
+
+  const onTogglePlay = useCallback(() => {
+    const autoplay = mainApi?.plugins()?.autoplay;
+    if (!autoplay) return;
+
+    const playOrStop = autoplay.isPlaying() ? autoplay.stop : autoplay.play;
+    playOrStop();
+  }, [mainApi]);
+
+  useEffect(() => {
+    const autoplay = mainApi?.plugins()?.autoplay;
+    if (!autoplay) return;
+
+    setIsPlaying(autoplay.isPlaying());
+    mainApi
+      .on('autoplay:play', () => setIsPlaying(true))
+      .on('autoplay:stop', () => setIsPlaying(false))
+      .on('reInit', () => setIsPlaying(false));
+  }, [mainApi]);
+
+  return { isPlaying, onTogglePlay, onClickAutoplay };
+}