fix(Gallery): timeout inactive tab issue (#5954)

packages/vkui/src/components/Gallery/Gallery.tsx

@@ -1,10 +1,10 @@
 import * as React from 'react';
 import { clamp } from '../../helpers/math';
 import { useIsClient } from '../../hooks/useIsClient';
-import { useTimeout } from '../../hooks/useTimeout';
 import { BaseGallery } from '../BaseGallery/BaseGallery';
 import { CarouselBase } from '../BaseGallery/CarouselBase/CarouselBase';
 import { BaseGalleryProps } from '../BaseGallery/types';
+import { useAutoPlay } from './hooks';
 
 export interface GalleryProps extends BaseGalleryProps {
   initialSlideIndex?: number;
@@ -47,11 +47,7 @@ export const Gallery = ({
     [isControlled, onChange, slideIndex],
   );
 
-  const autoplay = useTimeout(() => handleChange((slideIndex + 1) % childCount), timeout);
-  React.useEffect(
-    () => (timeout ? autoplay.set() : autoplay.clear()),
-    [timeout, slideIndex, autoplay],
-  );
+  useAutoPlay(timeout, slideIndex, () => handleChange((slideIndex + 1) % childCount));
 
   // prevent invalid slideIndex
   // any slide index is invalid with no slides, just keep it as is

packages/vkui/src/components/Gallery/hooks.ts

@@ -0,0 +1,39 @@
+import * as React from 'react';
+import { useTimeout } from '../../hooks/useTimeout';
+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();
+
+  React.useEffect(
+    () => (timeout ? setAutoPlay() : clearAutoPlay()),
+    [timeout, slideIndex, clearAutoPlay, setAutoPlay],
+  );
+
+  // Отключаем прокрутку слайдов при неактивной вкладке
+  React.useEffect(
+    function preventSlideChange() {
+      if (!document || !timeout) {
+        return;
+      }
+
+      const changeAutoPlay = () => {
+        if (document.visibilityState === 'visible') {
+          clearAutoPlay();
+          setAutoPlay();
+        }
+        if (document.visibilityState === 'hidden') {
+          clearAutoPlay();
+        }
+      };
+
+      document.addEventListener('visibilitychange', changeAutoPlay);
+
+      return () => {
+        document.removeEventListener('visibilitychange', changeAutoPlay);
+      };
+    },
+    [document, timeout, clearAutoPlay, setAutoPlay],
+  );
+}