diff --git a/packages/vkui/src/components/Gallery/hooks.ts b/packages/vkui/src/components/Gallery/hooks.ts index 211b4b4c7b3..4c9dc3fc122 100644 --- a/packages/vkui/src/components/Gallery/hooks.ts +++ b/packages/vkui/src/components/Gallery/hooks.ts @@ -5,9 +5,10 @@ import { useDOM } from '../../lib/dom'; export function useAutoPlay(timeout: number, slideIndex: number, callbackFn: VoidFunction) { const { clear: clearAutoPlay, set: setAutoPlay } = useTimeout(callbackFn, timeout); const { document } = useDOM(); + const idle = React.useRef(false); React.useEffect( - () => (timeout ? setAutoPlay() : clearAutoPlay()), + () => (timeout && !idle.current ? setAutoPlay() : clearAutoPlay()), [timeout, slideIndex, clearAutoPlay, setAutoPlay], ); @@ -19,13 +20,13 @@ export function useAutoPlay(timeout: number, slideIndex: number, callbackFn: Voi } const changeAutoPlay = () => { - if (document.visibilityState === 'visible') { + if (document.hidden) { + idle.current = true; clearAutoPlay(); + } else { + idle.current = false; setAutoPlay(); } - if (document.visibilityState === 'hidden') { - clearAutoPlay(); - } }; document.addEventListener('visibilitychange', changeAutoPlay);