46 lines
1.4 KiB
TypeScript
46 lines
1.4 KiB
TypeScript
import type {} from 'embla-carousel-autoplay';
|
|
import type { EmblaCarouselType } from 'embla-carousel';
|
|
import { useCallback, useEffect, useState } 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 };
|
|
}
|