@alfalab/core-components-gallery 7.2.3-alfasans → 7.3.0

package/moderncssm/components/navigation-bar/Component.js

@@ -1,6 +1,6 @@
 import React, { useRef, useState, useContext, useCallback, useEffect } from 'react';
 import cn from 'classnames';
-import throttle from 'lodash/throttle';
+import { isClient } from '@alfalab/core-components-shared/moderncssm';
 import { GalleryContext } from '../../context.js';
 import { getImageKey } from '../../utils/utils.js';
 import { TestIds } from '../../utils/constants.js';
@@ -8,11 +8,13 @@ import { ImagePreview } from '../image-preview/Component.js';
 import styles from './index.module.css';
 
 const MIN_SCROLL_STEP = 24;
-const SCROLL_SPEED = 2; // Коэффициент скорости прокрутки (можно настроить)
-const SCROLL_THRESHOLD = 150; // Расстояние от границы, при котором начинается прокрутка
+const DRAG_CLICK_THRESHOLD = 5;
 const NavigationBar = () => {
     const containerRef = useRef(null);
-    const [isNavMouseDowned, setIsNavMouseDowned] = useState(false);
+    const dragStartXRef = useRef(0);
+    const dragStartScrollLeftRef = useRef(0);
+    const suppressClickRef = useRef(false);
+    const [isDragging, setIsDragging] = useState(false);
     const { images, currentSlideIndex, setCurrentSlideIndex, getSwiper, setPlayingVideo, view } = useContext(GalleryContext);
     const swiper = getSwiper();
     const handlePreviewSelect = (index) => {
@@ -31,32 +33,57 @@ const NavigationBar = () => {
             });
         }
     }, []);
-    const handlePreviewMouseDown = () => {
-        setIsNavMouseDowned(true);
+    const handlePreviewMouseDown = (e) => {
+        if (e.button !== 0 || !containerRef.current) {
+            return;
+        }
+        dragStartXRef.current = e.clientX;
+        dragStartScrollLeftRef.current = containerRef.current.scrollLeft;
+        suppressClickRef.current = false;
+        setIsDragging(true);
     };
-    const handlePreviewMouseUp = () => {
-        setIsNavMouseDowned(false);
-        if (containerRef.current) {
-            containerRef.current.style.scrollBehavior = 'auto'; // Отключаем плавность для резкой остановки
+    const handlePreviewMouseUp = useCallback(() => {
+        setIsDragging(false);
+    }, []);
+    const dragTo = useCallback((clientX) => {
+        const container = containerRef.current;
+        if (!container) {
+            return;
+        }
+        const deltaX = clientX - dragStartXRef.current;
+        if (Math.abs(deltaX) > DRAG_CLICK_THRESHOLD) {
+            suppressClickRef.current = true;
         }
+        container.scrollLeft = dragStartScrollLeftRef.current - deltaX;
+    }, []);
+    const handleMouseNavigationMove = (e) => {
+        if (!isDragging) {
+            return;
+        }
+        dragTo(e.clientX);
     };
-    const handleMouseNavigationMove = throttle((e) => {
-        if (!containerRef.current || !isNavMouseDowned)
+    const handleClickCapture = (e) => {
+        if (!suppressClickRef.current) {
             return;
-        const container = containerRef.current;
-        const { width: containerWidth, left: containerLeft } = container.getBoundingClientRect();
-        const mouseX = e.clientX;
-        // Если курсор близко к правой границе
-        if (mouseX > containerWidth + containerLeft - SCROLL_THRESHOLD) {
-            const scrollValue = (mouseX - (containerWidth + containerLeft - SCROLL_THRESHOLD)) * SCROLL_SPEED;
-            container.scrollBy({ left: scrollValue, behavior: 'smooth' });
         }
-        // Если курсор близко к левой границе
-        else if (mouseX < containerLeft + SCROLL_THRESHOLD) {
-            const scrollValue = (mouseX - (containerLeft + SCROLL_THRESHOLD)) * SCROLL_SPEED;
-            container.scrollBy({ left: scrollValue, behavior: 'smooth' });
+        e.preventDefault();
+        e.stopPropagation();
+        suppressClickRef.current = false;
+    };
+    useEffect(() => {
+        if (!isClient() || !isDragging) {
+            return undefined;
         }
-    }, 150);
+        const handleDocumentMouseMove = (event) => {
+            dragTo(event.clientX);
+        };
+        document.addEventListener('mousemove', handleDocumentMouseMove);
+        document.addEventListener('mouseup', handlePreviewMouseUp);
+        return () => {
+            document.removeEventListener('mousemove', handleDocumentMouseMove);
+            document.removeEventListener('mouseup', handlePreviewMouseUp);
+        };
+    }, [dragTo, handlePreviewMouseUp, isDragging]);
     const handlePreviewPosition = useCallback((preview, containerWidth) => {
         const { right, left, x } = preview.getBoundingClientRect();
         if (view === 'mobile') {
@@ -82,7 +109,10 @@ const NavigationBar = () => {
     }, [currentSlideIndex, handlePreviewPosition, scroll]);
     return (
     // eslint-disable-next-line jsx-a11y/no-static-element-interactions
-    React.createElement("div", { className: cn(styles.component, { [styles.mobile]: view === 'mobile' }), ref: containerRef, "data-test-id": TestIds.NAVIGATION_BAR, onMouseDown: handlePreviewMouseDown, onMouseUp: handlePreviewMouseUp, onMouseMove: handleMouseNavigationMove }, images.map((image, index) => {
+    React.createElement("div", { className: cn(styles.component, {
+            [styles.mobile]: view === 'mobile',
+            [styles.dragging]: isDragging,
+        }), ref: containerRef, "data-test-id": TestIds.NAVIGATION_BAR, onMouseDown: handlePreviewMouseDown, onMouseUp: handlePreviewMouseUp, onMouseMove: handleMouseNavigationMove, onClickCapture: handleClickCapture }, images.map((image, index) => {
         const active = index === currentSlideIndex;
         return (React.createElement(ImagePreview, { key: getImageKey(image, index), image: image, active: active, index: index, onSelect: handlePreviewSelect, className: cn(styles.preview, { [styles.mobile]: view === 'mobile' }) }));
     })));

package/moderncssm/components/navigation-bar/Component.js.map

@@ -1 +1 @@
-{"version":3,"file":"Component.js","sources":["../../../src/components/navigation-bar/Component.tsx"],"sourcesContent":["import React, { type FC, useCallback, useContext, useEffect, useRef, useState } from 'react';\nimport cn from 'classnames';\nimport throttle from 'lodash/throttle';\n\nimport { GalleryContext } from '../../context';\nimport { getImageKey, TestIds } from '../../utils';\nimport { ImagePreview } from '../image-preview';\n\nimport styles from './index.module.css';\n\nconst MIN_SCROLL_STEP = 24;\nconst SCROLL_SPEED = 2; // Коэффициент скорости прокрутки (можно настроить)\nconst SCROLL_THRESHOLD = 150; // Расстояние от границы, при котором начинается прокрутка\n\nexport const NavigationBar: FC = () => {\n    const containerRef = useRef<HTMLDivElement>(null);\n\n    const [isNavMouseDowned, setIsNavMouseDowned] = useState<boolean>(false);\n\n    const { images, currentSlideIndex, setCurrentSlideIndex, getSwiper, setPlayingVideo, view } =\n        useContext(GalleryContext);\n\n    const swiper = getSwiper();\n\n    const handlePreviewSelect = (index: number) => {\n        setCurrentSlideIndex?.(index);\n\n        if (swiper) {\n            setPlayingVideo(true);\n            swiper.slideTo(index);\n        }\n    };\n\n    const scroll = useCallback((scrollValue: number) => {\n        if (containerRef.current) {\n            containerRef.current.scroll({\n                top: 0,\n                left: containerRef.current.scrollLeft + scrollValue,\n                behavior: 'smooth',\n            });\n        }\n    }, []);\n\n    const handlePreviewMouseDown = () => {\n        setIsNavMouseDowned(true);\n    };\n\n    const handlePreviewMouseUp = () => {\n        setIsNavMouseDowned(false);\n        if (containerRef.current) {\n            containerRef.current.style.scrollBehavior = 'auto'; // Отключаем плавность для резкой остановки\n        }\n    };\n\n    const handleMouseNavigationMove = throttle((e: React.MouseEvent<HTMLDivElement>) => {\n        if (!containerRef.current || !isNavMouseDowned) return;\n\n        const container = containerRef.current;\n        const { width: containerWidth, left: containerLeft } = container.getBoundingClientRect();\n        const mouseX = e.clientX;\n\n        // Если курсор близко к правой границе\n        if (mouseX > containerWidth + containerLeft - SCROLL_THRESHOLD) {\n            const scrollValue =\n                (mouseX - (containerWidth + containerLeft - SCROLL_THRESHOLD)) * SCROLL_SPEED;\n\n            container.scrollBy({ left: scrollValue, behavior: 'smooth' });\n        }\n        // Если курсор близко к левой границе\n        else if (mouseX < containerLeft + SCROLL_THRESHOLD) {\n            const scrollValue = (mouseX - (containerLeft + SCROLL_THRESHOLD)) * SCROLL_SPEED;\n\n            container.scrollBy({ left: scrollValue, behavior: 'smooth' });\n        }\n    }, 150);\n\n    const handlePreviewPosition = useCallback(\n        (preview: Element, containerWidth: number) => {\n            const { right, left, x } = preview.getBoundingClientRect();\n\n            if (view === 'mobile') {\n                scroll(x - containerWidth / 2 + MIN_SCROLL_STEP); // Передвигаем в центр активное превью\n            }\n\n            if (right > containerWidth) {\n                const scrollValue = right - containerWidth + MIN_SCROLL_STEP;\n\n                scroll(scrollValue);\n            } else if (left < 0) {\n                const scrollValue = left - MIN_SCROLL_STEP;\n\n                scroll(scrollValue);\n            }\n        },\n        [scroll, view],\n    );\n\n    useEffect(() => {\n        if (containerRef.current) {\n            const { width: containerWidth } = containerRef.current.getBoundingClientRect();\n\n            const activePreview = containerRef.current.children[currentSlideIndex];\n\n            if (activePreview) {\n                handlePreviewPosition(activePreview, containerWidth);\n            }\n        }\n    }, [currentSlideIndex, handlePreviewPosition, scroll]);\n\n    return (\n        // eslint-disable-next-line jsx-a11y/no-static-element-interactions\n        <div\n            className={cn(styles.component, { [styles.mobile]: view === 'mobile' })}\n            ref={containerRef}\n            data-test-id={TestIds.NAVIGATION_BAR}\n            onMouseDown={handlePreviewMouseDown}\n            onMouseUp={handlePreviewMouseUp}\n            onMouseMove={handleMouseNavigationMove}\n        >\n            {images.map((image, index) => {\n                const active = index === currentSlideIndex;\n\n                return (\n                    <ImagePreview\n                        key={getImageKey(image, index)}\n                        image={image}\n                        active={active}\n                        index={index}\n                        onSelect={handlePreviewSelect}\n                        className={cn(styles.preview, { [styles.mobile]: view === 'mobile' })}\n                    />\n                );\n            })}\n        </div>\n    );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"Component.js","sources":["../../../src/components/navigation-bar/Component.tsx"],"sourcesContent":["import React, { type FC, useCallback, useContext, useEffect, useRef, useState } from 'react';\nimport cn from 'classnames';\n\nimport { isClient } from '@alfalab/core-components-shared';\n\nimport { GalleryContext } from '../../context';\nimport { getImageKey, TestIds } from '../../utils';\nimport { ImagePreview } from '../image-preview';\n\nimport styles from './index.module.css';\n\nconst MIN_SCROLL_STEP = 24;\nconst DRAG_CLICK_THRESHOLD = 5;\n\nexport const NavigationBar: FC = () => {\n    const containerRef = useRef<HTMLDivElement>(null);\n    const dragStartXRef = useRef<number>(0);\n    const dragStartScrollLeftRef = useRef<number>(0);\n    const suppressClickRef = useRef<boolean>(false);\n\n    const [isDragging, setIsDragging] = useState<boolean>(false);\n\n    const { images, currentSlideIndex, setCurrentSlideIndex, getSwiper, setPlayingVideo, view } =\n        useContext(GalleryContext);\n\n    const swiper = getSwiper();\n\n    const handlePreviewSelect = (index: number) => {\n        setCurrentSlideIndex?.(index);\n\n        if (swiper) {\n            setPlayingVideo(true);\n            swiper.slideTo(index);\n        }\n    };\n\n    const scroll = useCallback((scrollValue: number) => {\n        if (containerRef.current) {\n            containerRef.current.scroll({\n                top: 0,\n                left: containerRef.current.scrollLeft + scrollValue,\n                behavior: 'smooth',\n            });\n        }\n    }, []);\n\n    const handlePreviewMouseDown = (e: React.MouseEvent<HTMLDivElement>) => {\n        if (e.button !== 0 || !containerRef.current) {\n            return;\n        }\n\n        dragStartXRef.current = e.clientX;\n        dragStartScrollLeftRef.current = containerRef.current.scrollLeft;\n        suppressClickRef.current = false;\n        setIsDragging(true);\n    };\n\n    const handlePreviewMouseUp = useCallback(() => {\n        setIsDragging(false);\n    }, []);\n\n    const dragTo = useCallback((clientX: number) => {\n        const container = containerRef.current;\n\n        if (!container) {\n            return;\n        }\n\n        const deltaX = clientX - dragStartXRef.current;\n\n        if (Math.abs(deltaX) > DRAG_CLICK_THRESHOLD) {\n            suppressClickRef.current = true;\n        }\n\n        container.scrollLeft = dragStartScrollLeftRef.current - deltaX;\n    }, []);\n\n    const handleMouseNavigationMove = (e: React.MouseEvent<HTMLDivElement>) => {\n        if (!isDragging) {\n            return;\n        }\n\n        dragTo(e.clientX);\n    };\n\n    const handleClickCapture = (e: React.MouseEvent<HTMLDivElement>) => {\n        if (!suppressClickRef.current) {\n            return;\n        }\n\n        e.preventDefault();\n        e.stopPropagation();\n        suppressClickRef.current = false;\n    };\n\n    useEffect(() => {\n        if (!isClient() || !isDragging) {\n            return undefined;\n        }\n\n        const handleDocumentMouseMove = (event: MouseEvent) => {\n            dragTo(event.clientX);\n        };\n\n        document.addEventListener('mousemove', handleDocumentMouseMove);\n        document.addEventListener('mouseup', handlePreviewMouseUp);\n\n        return () => {\n            document.removeEventListener('mousemove', handleDocumentMouseMove);\n            document.removeEventListener('mouseup', handlePreviewMouseUp);\n        };\n    }, [dragTo, handlePreviewMouseUp, isDragging]);\n\n    const handlePreviewPosition = useCallback(\n        (preview: Element, containerWidth: number) => {\n            const { right, left, x } = preview.getBoundingClientRect();\n\n            if (view === 'mobile') {\n                scroll(x - containerWidth / 2 + MIN_SCROLL_STEP); // Передвигаем в центр активное превью\n            }\n\n            if (right > containerWidth) {\n                const scrollValue = right - containerWidth + MIN_SCROLL_STEP;\n\n                scroll(scrollValue);\n            } else if (left < 0) {\n                const scrollValue = left - MIN_SCROLL_STEP;\n\n                scroll(scrollValue);\n            }\n        },\n        [scroll, view],\n    );\n\n    useEffect(() => {\n        if (containerRef.current) {\n            const { width: containerWidth } = containerRef.current.getBoundingClientRect();\n\n            const activePreview = containerRef.current.children[currentSlideIndex];\n\n            if (activePreview) {\n                handlePreviewPosition(activePreview, containerWidth);\n            }\n        }\n    }, [currentSlideIndex, handlePreviewPosition, scroll]);\n\n    return (\n        // eslint-disable-next-line jsx-a11y/no-static-element-interactions\n        <div\n            className={cn(styles.component, {\n                [styles.mobile]: view === 'mobile',\n                [styles.dragging]: isDragging,\n            })}\n            ref={containerRef}\n            data-test-id={TestIds.NAVIGATION_BAR}\n            onMouseDown={handlePreviewMouseDown}\n            onMouseUp={handlePreviewMouseUp}\n            onMouseMove={handleMouseNavigationMove}\n            onClickCapture={handleClickCapture}\n        >\n            {images.map((image, index) => {\n                const active = index === currentSlideIndex;\n\n                return (\n                    <ImagePreview\n                        key={getImageKey(image, index)}\n                        image={image}\n                        active={active}\n                        index={index}\n                        onSelect={handlePreviewSelect}\n                        className={cn(styles.preview, { [styles.mobile]: view === 'mobile' })}\n                    />\n                );\n            })}\n        </div>\n    );\n};\n"],"names":[],"mappings":"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"}

package/moderncssm/components/navigation-bar/index.module.css

@@ -8,15 +8,27 @@
     flex-shrink: 0;
     overflow-x: auto;
     box-sizing: border-box;
-    padding: var(--gap-12) var(--gap-24);
+    padding: var(--gap-12) var(--gap-32);
     scrollbar-width: none;
     background-color: var(--color-static-neutral-0-inverted);
+    cursor: grab;
+    -webkit-user-select: none;
+       -moz-user-select: none;
+            user-select: none;
 }
 
 .component.mobile {
-        padding: var(--gap-8) var(--gap-24);
+        padding: var(--gap-8);
     }
 
+.component.dragging {
+        cursor: grabbing;
+    }
+
+.component.dragging * {
+            cursor: grabbing;
+        }
+
 .component::-webkit-scrollbar {
         display: none;
     }

package/moderncssm/constants.d.ts

@@ -1,4 +1,4 @@
-export declare const SWIPE_THRESHOLD = -250;
+export declare const SWIPE_THRESHOLD = 250;
 export declare const PREVIEW_WIDTH_MOBILE = 46;
 export declare const PREVIEW_HEIGHT_MOBILE = 46;
 export declare const PREVIEW_WIDTH_DESKTOP = 56;

package/moderncssm/constants.js

@@ -1,4 +1,4 @@
-const SWIPE_THRESHOLD = -250;
+const SWIPE_THRESHOLD = 250;
 const PREVIEW_WIDTH_MOBILE = 46;
 const PREVIEW_HEIGHT_MOBILE = 46;
 const PREVIEW_WIDTH_DESKTOP = 56;

package/moderncssm/constants.js.map

@@ -1 +1 @@
-{"version":3,"file":"constants.js","sources":["../src/constants.ts"],"sourcesContent":["export const SWIPE_THRESHOLD = -250;\n\nexport const PREVIEW_WIDTH_MOBILE = 46;\nexport const PREVIEW_HEIGHT_MOBILE = 46;\n\nexport const PREVIEW_WIDTH_DESKTOP = 56;\nexport const PREVIEW_HEIGHT_DESKTOP = 56;\n\nexport const PREVIEW_VIDEO_MULTIPLIER = 12;\n"],"names":[],"mappings":"AAAa,MAAA,eAAe,GAAG;AAExB,MAAM,oBAAoB,GAAG;AAC7B,MAAM,qBAAqB,GAAG;AAE9B,MAAM,qBAAqB,GAAG;AAC9B,MAAM,sBAAsB,GAAG;AAE/B,MAAM,wBAAwB,GAAG;;;;"}
+{"version":3,"file":"constants.js","sources":["../src/constants.ts"],"sourcesContent":["export const SWIPE_THRESHOLD = 250;\n\nexport const PREVIEW_WIDTH_MOBILE = 46;\nexport const PREVIEW_HEIGHT_MOBILE = 46;\n\nexport const PREVIEW_WIDTH_DESKTOP = 56;\nexport const PREVIEW_HEIGHT_DESKTOP = 56;\n\nexport const PREVIEW_VIDEO_MULTIPLIER = 12;\n"],"names":[],"mappings":"AAAO,MAAM,eAAe,GAAG;AAExB,MAAM,oBAAoB,GAAG;AAC7B,MAAM,qBAAqB,GAAG;AAE9B,MAAM,qBAAqB,GAAG;AAC9B,MAAM,sBAAsB,GAAG;AAE/B,MAAM,wBAAwB,GAAG;;;;"}

package/moderncssm/hooks/use-custom-subtitles.js

@@ -1,7 +1,7 @@
 import { useContext, useState, useEffect } from 'react';
 import { GalleryContext } from '../context.js';
 
-const SUBTITLES_ANIMATION_SPEED = 0.5;
+const SUBTITLES_FADE_DURATION_SECONDS = 0.5;
 const useCustomSubtitles = () => {
     const { getCurrentImageMeta } = useContext(GalleryContext);
     const meta = getCurrentImageMeta();
@@ -9,23 +9,70 @@ const useCustomSubtitles = () => {
     const [currentSub, setCurrentSub] = useState('');
     const player = meta?.player?.current;
     useEffect(() => {
-        const intervalId = setInterval(() => {
-            if (!player) {
-                return;
+        if (!player) {
+            return undefined;
+        }
+        const { textTracks } = player;
+        let textTrack;
+        let hideTimeoutId;
+        const clearHideTimeout = () => {
+            if (hideTimeoutId !== undefined) {
+                clearTimeout(hideTimeoutId);
+                hideTimeoutId = undefined;
             }
-            const textTrack = [...(Array.from(player.textTracks) || [])].find((track) => track.kind === 'subtitles');
+        };
+        const syncSubtitles = () => {
+            clearHideTimeout();
             const activeCue = textTrack?.activeCues?.[0];
             if (!activeCue?.text) {
                 setShowSub(false);
                 return;
             }
-            const isVisible = player?.currentTime >= activeCue.startTime &&
-                player?.currentTime <= activeCue.endTime - SUBTITLES_ANIMATION_SPEED;
+            const fadeStartTime = activeCue.endTime - SUBTITLES_FADE_DURATION_SECONDS;
+            const isVisible = player.currentTime <= fadeStartTime;
             setCurrentSub(activeCue.text);
             setShowSub(isVisible);
-        });
+            if (!isVisible || player.paused || player.playbackRate <= 0) {
+                return;
+            }
+            const timeUntilFadeMs = ((fadeStartTime - player.currentTime) / player.playbackRate) * 1000;
+            hideTimeoutId = setTimeout(() => {
+                setShowSub(false);
+            }, timeUntilFadeMs);
+        };
+        const connectTextTrack = () => {
+            const nextTextTrack = Array.from(textTracks).find((track) => track.kind === 'subtitles');
+            if (nextTextTrack === textTrack) {
+                syncSubtitles();
+                return;
+            }
+            textTrack?.removeEventListener('cuechange', syncSubtitles);
+            textTrack = nextTextTrack;
+            textTrack?.addEventListener('cuechange', syncSubtitles);
+            syncSubtitles();
+        };
+        player.addEventListener('play', syncSubtitles);
+        player.addEventListener('playing', syncSubtitles);
+        player.addEventListener('pause', clearHideTimeout);
+        player.addEventListener('waiting', clearHideTimeout);
+        player.addEventListener('seeking', clearHideTimeout);
+        player.addEventListener('seeked', syncSubtitles);
+        player.addEventListener('ratechange', syncSubtitles);
+        textTracks.addEventListener('addtrack', connectTextTrack);
+        textTracks.addEventListener('change', connectTextTrack);
+        connectTextTrack();
         return () => {
-            clearInterval(intervalId);
+            clearHideTimeout();
+            textTrack?.removeEventListener('cuechange', syncSubtitles);
+            player.removeEventListener('play', syncSubtitles);
+            player.removeEventListener('playing', syncSubtitles);
+            player.removeEventListener('pause', clearHideTimeout);
+            player.removeEventListener('waiting', clearHideTimeout);
+            player.removeEventListener('seeking', clearHideTimeout);
+            player.removeEventListener('seeked', syncSubtitles);
+            player.removeEventListener('ratechange', syncSubtitles);
+            textTracks.removeEventListener('addtrack', connectTextTrack);
+            textTracks.removeEventListener('change', connectTextTrack);
         };
     }, [player]);
     return {

package/moderncssm/hooks/use-custom-subtitles.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-custom-subtitles.js","sources":["../../src/hooks/use-custom-subtitles.ts"],"sourcesContent":["import { useContext, useEffect, useState } from 'react';\n\nimport { GalleryContext } from '../context';\n\nconst SUBTITLES_ANIMATION_SPEED = 0.5;\n\nexport const useCustomSubtitles = () => {\n    const { getCurrentImageMeta } = useContext(GalleryContext);\n\n    const meta = getCurrentImageMeta();\n\n    const [showSub, setShowSub] = useState(false);\n    const [currentSub, setCurrentSub] = useState('');\n\n    const player = meta?.player?.current;\n\n    useEffect(() => {\n        const intervalId = setInterval(() => {\n            if (!player) {\n                return;\n            }\n\n            const textTrack = [...(Array.from(player.textTracks) || [])].find(\n                (track) => track.kind === 'subtitles',\n            );\n            const activeCue = textTrack?.activeCues?.[0] as VTTCue | undefined;\n\n            if (!activeCue?.text) {\n                setShowSub(false);\n\n                return;\n            }\n\n            const isVisible =\n                player?.currentTime >= activeCue.startTime &&\n                player?.currentTime <= activeCue.endTime - SUBTITLES_ANIMATION_SPEED;\n\n            setCurrentSub(activeCue.text);\n            setShowSub(isVisible);\n        });\n\n        return () => {\n            clearInterval(intervalId);\n        };\n    }, [player]);\n\n    return {\n        showSub,\n        currentSub,\n    };\n};\n"],"names":[],"mappings":";;;AAIA,MAAM,yBAAyB,GAAG,GAAG;AAE9B,MAAM,kBAAkB,GAAG,MAAK;IACnC,MAAM,EAAE,mBAAmB,EAAE,GAAG,UAAU,CAAC,cAAc,CAAC;AAE1D,IAAA,MAAM,IAAI,GAAG,mBAAmB,EAAE;IAElC,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC;IAC7C,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC;AAEhD,IAAA,MAAM,MAAM,GAAG,IAAI,EAAE,MAAM,EAAE,OAAO;IAEpC,SAAS,CAAC,MAAK;AACX,QAAA,MAAM,UAAU,GAAG,WAAW,CAAC,MAAK;YAChC,IAAI,CAAC,MAAM,EAAE;gBACT;;AAGJ,YAAA,MAAM,SAAS,GAAG,CAAC,IAAI,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,IAAI,CAC7D,CAAC,KAAK,KAAK,KAAK,CAAC,IAAI,KAAK,WAAW,CACxC;YACD,MAAM,SAAS,GAAG,SAAS,EAAE,UAAU,GAAG,CAAC,CAAuB;AAElE,YAAA,IAAI,CAAC,SAAS,EAAE,IAAI,EAAE;gBAClB,UAAU,CAAC,KAAK,CAAC;gBAEjB;;YAGJ,MAAM,SAAS,GACX,MAAM,EAAE,WAAW,IAAI,SAAS,CAAC,SAAS;gBAC1C,MAAM,EAAE,WAAW,IAAI,SAAS,CAAC,OAAO,GAAG,yBAAyB;AAExE,YAAA,aAAa,CAAC,SAAS,CAAC,IAAI,CAAC;YAC7B,UAAU,CAAC,SAAS,CAAC;AACzB,SAAC,CAAC;AAEF,QAAA,OAAO,MAAK;YACR,aAAa,CAAC,UAAU,CAAC;AAC7B,SAAC;AACL,KAAC,EAAE,CAAC,MAAM,CAAC,CAAC;IAEZ,OAAO;QACH,OAAO;QACP,UAAU;KACb;AACL;;;;"}
+{"version":3,"file":"use-custom-subtitles.js","sources":["../../src/hooks/use-custom-subtitles.ts"],"sourcesContent":["import { useContext, useEffect, useState } from 'react';\n\nimport { GalleryContext } from '../context';\n\nconst SUBTITLES_FADE_DURATION_SECONDS = 0.5;\n\nexport const useCustomSubtitles = () => {\n    const { getCurrentImageMeta } = useContext(GalleryContext);\n\n    const meta = getCurrentImageMeta();\n\n    const [showSub, setShowSub] = useState(false);\n    const [currentSub, setCurrentSub] = useState('');\n\n    const player = meta?.player?.current;\n\n    useEffect(() => {\n        if (!player) {\n            return undefined;\n        }\n\n        const { textTracks } = player;\n\n        let textTrack: TextTrack | undefined;\n        let hideTimeoutId: ReturnType<typeof setTimeout> | undefined;\n\n        const clearHideTimeout = () => {\n            if (hideTimeoutId !== undefined) {\n                clearTimeout(hideTimeoutId);\n                hideTimeoutId = undefined;\n            }\n        };\n\n        const syncSubtitles = () => {\n            clearHideTimeout();\n\n            const activeCue = textTrack?.activeCues?.[0] as VTTCue | undefined;\n\n            if (!activeCue?.text) {\n                setShowSub(false);\n\n                return;\n            }\n\n            const fadeStartTime = activeCue.endTime - SUBTITLES_FADE_DURATION_SECONDS;\n            const isVisible = player.currentTime <= fadeStartTime;\n\n            setCurrentSub(activeCue.text);\n            setShowSub(isVisible);\n\n            if (!isVisible || player.paused || player.playbackRate <= 0) {\n                return;\n            }\n\n            const timeUntilFadeMs =\n                ((fadeStartTime - player.currentTime) / player.playbackRate) * 1000;\n\n            hideTimeoutId = setTimeout(() => {\n                setShowSub(false);\n            }, timeUntilFadeMs);\n        };\n\n        const connectTextTrack = () => {\n            const nextTextTrack = Array.from(textTracks).find(\n                (track) => track.kind === 'subtitles',\n            );\n\n            if (nextTextTrack === textTrack) {\n                syncSubtitles();\n\n                return;\n            }\n\n            textTrack?.removeEventListener('cuechange', syncSubtitles);\n            textTrack = nextTextTrack;\n            textTrack?.addEventListener('cuechange', syncSubtitles);\n            syncSubtitles();\n        };\n\n        player.addEventListener('play', syncSubtitles);\n        player.addEventListener('playing', syncSubtitles);\n        player.addEventListener('pause', clearHideTimeout);\n        player.addEventListener('waiting', clearHideTimeout);\n        player.addEventListener('seeking', clearHideTimeout);\n        player.addEventListener('seeked', syncSubtitles);\n        player.addEventListener('ratechange', syncSubtitles);\n        textTracks.addEventListener('addtrack', connectTextTrack);\n        textTracks.addEventListener('change', connectTextTrack);\n\n        connectTextTrack();\n\n        return () => {\n            clearHideTimeout();\n            textTrack?.removeEventListener('cuechange', syncSubtitles);\n            player.removeEventListener('play', syncSubtitles);\n            player.removeEventListener('playing', syncSubtitles);\n            player.removeEventListener('pause', clearHideTimeout);\n            player.removeEventListener('waiting', clearHideTimeout);\n            player.removeEventListener('seeking', clearHideTimeout);\n            player.removeEventListener('seeked', syncSubtitles);\n            player.removeEventListener('ratechange', syncSubtitles);\n            textTracks.removeEventListener('addtrack', connectTextTrack);\n            textTracks.removeEventListener('change', connectTextTrack);\n        };\n    }, [player]);\n\n    return {\n        showSub,\n        currentSub,\n    };\n};\n"],"names":[],"mappings":"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"}

package/moderncssm/types.d.ts

@@ -40,9 +40,11 @@ export type ImageMeta = {
     height: number;
     broken?: boolean;
     player?: never;
+    loaded?: boolean;
 } | {
-    width?: never;
-    height?: never;
+    width?: number;
+    height?: number;
     broken?: boolean;
     player: RefObject<HTMLVideoElement>;
+    loaded?: boolean;
 };

package/moderncssm/utils/index.d.ts

@@ -1,3 +1,4 @@
 export * from './split-filename';
 export * from './utils';
 export * from './constants';
+export * from './modern-download';

package/moderncssm/utils/index.js

@@ -1,4 +1,5 @@
 export { splitFilename } from './split-filename.js';
 export { PLACEHOLDER_HEIGHT, PLACEHOLDER_WIDTH, getImageAlt, getImageKey, isSmallImage, isVideo } from './utils.js';
 export { TestIds } from './constants.js';
+export { downloadFile } from './modern-download.js';
 //# sourceMappingURL=index.js.map

package/moderncssm/utils/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}

package/moderncssm/utils/modern-download.d.ts

@@ -0,0 +1,6 @@
+export interface DownloadOptions {
+    url: string;
+    fileName?: string;
+    fileType?: string;
+}
+export declare const downloadFile: ({ url, fileName, fileType, }: DownloadOptions) => Promise<void>;

package/moderncssm/utils/modern-download.js

@@ -0,0 +1,76 @@
+const downloadWithBlob = (blob, fileName) => {
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement('a');
+    link.href = url;
+    link.download = fileName;
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+    setTimeout(() => URL.revokeObjectURL(url), 100);
+};
+const downloadWithLink = (url, fileName) => {
+    const link = document.createElement('a');
+    link.href = url;
+    link.download = fileName;
+    link.target = '_blank';
+    link.rel = 'noopener noreferrer';
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+};
+const canUseBlobDownload = () => typeof fetch === 'function' &&
+    typeof URL.createObjectURL === 'function' &&
+    typeof URL.revokeObjectURL === 'function';
+const canUseFileShare = () => typeof File === 'function' &&
+    typeof navigator !== 'undefined' &&
+    typeof navigator.share === 'function' &&
+    typeof navigator.canShare === 'function';
+const canShareFiles = (files) => canUseFileShare() && navigator.canShare({ files });
+const getBlob = async (url) => {
+    const response = await fetch(url);
+    if (!response.ok) {
+        throw new Error('Network error');
+    }
+    return response.blob();
+};
+const isAbortError = (error) => typeof DOMException !== 'undefined' &&
+    error instanceof DOMException &&
+    error.name === 'AbortError';
+const downloadFile = async ({ url, fileName = 'download', fileType, }) => {
+    if (!canUseBlobDownload()) {
+        downloadWithLink(url, fileName);
+        return;
+    }
+    if (canUseFileShare() && canShareFiles([new File([], fileName, { type: fileType })])) {
+        try {
+            const blob = await getBlob(url);
+            const file = new File([blob], fileName, { type: blob.type || fileType });
+            if (!canShareFiles([file])) {
+                downloadWithBlob(blob, fileName);
+                return;
+            }
+            await navigator.share({
+                files: [file],
+                title: `Скачать ${fileName}`,
+            });
+            return;
+        }
+        catch (error) {
+            if (isAbortError(error)) {
+                return;
+            }
+            downloadWithLink(url, fileName);
+            return;
+        }
+    }
+    try {
+        const blob = await getBlob(url);
+        downloadWithBlob(blob, fileName);
+    }
+    catch {
+        downloadWithLink(url, fileName);
+    }
+};
+
+export { downloadFile };
+//# sourceMappingURL=modern-download.js.map

package/moderncssm/utils/modern-download.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"modern-download.js","sources":["../../src/utils/modern-download.ts"],"sourcesContent":["const downloadWithBlob = (blob: Blob, fileName: string): void => {\n    const url = URL.createObjectURL(blob);\n    const link = document.createElement('a');\n\n    link.href = url;\n    link.download = fileName;\n    document.body.appendChild(link);\n    link.click();\n    document.body.removeChild(link);\n    setTimeout(() => URL.revokeObjectURL(url), 100);\n};\n\nconst downloadWithLink = (url: string, fileName: string): void => {\n    const link = document.createElement('a');\n\n    link.href = url;\n    link.download = fileName;\n    link.target = '_blank';\n    link.rel = 'noopener noreferrer';\n    document.body.appendChild(link);\n    link.click();\n    document.body.removeChild(link);\n};\n\nconst canUseBlobDownload = (): boolean =>\n    typeof fetch === 'function' &&\n    typeof URL.createObjectURL === 'function' &&\n    typeof URL.revokeObjectURL === 'function';\n\nconst canUseFileShare = (): boolean =>\n    typeof File === 'function' &&\n    typeof navigator !== 'undefined' &&\n    typeof navigator.share === 'function' &&\n    typeof navigator.canShare === 'function';\n\nconst canShareFiles = (files: File[]): boolean =>\n    canUseFileShare() && navigator.canShare({ files });\n\nconst getBlob = async (url: string): Promise<Blob> => {\n    const response = await fetch(url);\n\n    if (!response.ok) {\n        throw new Error('Network error');\n    }\n\n    return response.blob();\n};\n\nconst isAbortError = (error: unknown): boolean =>\n    typeof DOMException !== 'undefined' &&\n    error instanceof DOMException &&\n    error.name === 'AbortError';\n\nexport interface DownloadOptions {\n    url: string;\n    fileName?: string;\n    fileType?: string;\n}\n\nexport const downloadFile = async ({\n    url,\n    fileName = 'download',\n    fileType,\n}: DownloadOptions): Promise<void> => {\n    if (!canUseBlobDownload()) {\n        downloadWithLink(url, fileName);\n\n        return;\n    }\n\n    if (canUseFileShare() && canShareFiles([new File([], fileName, { type: fileType })])) {\n        try {\n            const blob = await getBlob(url);\n\n            const file = new File([blob], fileName, { type: blob.type || fileType });\n\n            if (!canShareFiles([file])) {\n                downloadWithBlob(blob, fileName);\n\n                return;\n            }\n\n            await navigator.share({\n                files: [file],\n                title: `Скачать ${fileName}`,\n            });\n\n            return;\n        } catch (error) {\n            if (isAbortError(error)) {\n                return;\n            }\n\n            downloadWithLink(url, fileName);\n\n            return;\n        }\n    }\n\n    try {\n        const blob = await getBlob(url);\n\n        downloadWithBlob(blob, fileName);\n    } catch {\n        downloadWithLink(url, fileName);\n    }\n};\n"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@alfalab/core-components-gallery",
-    "version": "7.2.3-alfasans",
+    "version": "7.3.0",
     "description": "",
     "keywords": [],
     "license": "MIT",
@@ -13,20 +13,20 @@
         "build": "rollup -c ../../tools/rollup/rollup.config.mjs --silent"
     },
     "dependencies": {
-        "@alfalab/core-components-base-modal": "7.1.8-alfasans",
-        "@alfalab/core-components-button": "13.2.2-alfasans",
-        "@alfalab/core-components-icon-button": "8.0.10-alfasans",
-        "@alfalab/core-components-icon-view": "5.0.4-alfasans",
-        "@alfalab/core-components-mq": "6.0.7-alfasans",
-        "@alfalab/core-components-spinner": "6.0.7-alfasans",
-        "@alfalab/core-components-tooltip": "9.0.18-alfasans",
-        "@alfalab/core-components-typography": "6.0.10-alfasans",
+        "@alfalab/core-components-base-modal": "^7.1.8",
+        "@alfalab/core-components-button": "^13.2.2",
+        "@alfalab/core-components-icon-button": "^8.0.10",
+        "@alfalab/core-components-icon-view": "^5.0.4",
+        "@alfalab/core-components-mq": "^6.0.7",
+        "@alfalab/core-components-shared": "^2.2.3",
+        "@alfalab/core-components-spinner": "^6.0.7",
+        "@alfalab/core-components-tooltip": "^9.0.18",
+        "@alfalab/core-components-typography": "^6.0.10",
         "@alfalab/hooks": "^1.17.0",
         "@alfalab/icons-glyph": "^2.260.0",
         "classnames": "^2.5.1",
         "element-closest": "^3.0.2",
         "hls.js": "^1.5.13",
-        "lodash": "^4.17.21",
         "swiper": "^12.1.3",
         "tslib": "^2.4.0"
     },
@@ -38,6 +38,6 @@
         "access": "public",
         "directory": "dist"
     },
-    "themesVersion": "15.2.1-alfasans",
-    "varsVersion": "11.2.1-alfasans"
+    "themesVersion": "15.2.1",
+    "varsVersion": "11.2.1"
 }

package/src/Component.tsx

@@ -88,6 +88,7 @@ export const Gallery: FC<GalleryProps> = ({
     const [mutedVideo, setMutedVideo] = useState<boolean>(DEFAULT_MUTED_VIDEO);
     const [playingVideo, setPlayingVideo] = useState<boolean>(DEFAULT_PLAYING_VIDEO);
     const [hideNavigation, setHideNavigation] = useState<boolean>(DEFAULT_HIDE_NAVIGATION);
+    const [swipeY, setSwipeY] = useState<number>(0);
 
     const isDesktop = useIsDesktop();
 
@@ -200,6 +201,12 @@ export const Gallery: FC<GalleryProps> = ({
         }
     }, [uncontrolled, currentSlideIndex, swiper]);
 
+    useEffect(() => {
+        if (!open) {
+            setSwipeY(0);
+        }
+    }, [open]);
+
     useEffect(() => {
         document.addEventListener('keydown', handleKeyDown);
 
@@ -209,14 +216,24 @@ export const Gallery: FC<GalleryProps> = ({
     }, [handleKeyDown]);
 
     useEffect(() => {
-        let startY: number;
+        if (!open) {
+            return undefined;
+        }
+
+        let startX = 0;
+        let startY = 0;
+        let lockedDirection: 'horizontal' | 'vertical' | null = null;
+        const directionLockThreshold = 10;
+
         const abortController = new AbortController();
         const { signal } = abortController;
 
         document.addEventListener(
             'touchstart',
             (e) => {
+                startX = e.touches[0].clientX;
                 startY = e.touches[0].clientY;
+                lockedDirection = null;
             },
             { signal },
         );
@@ -224,21 +241,57 @@ export const Gallery: FC<GalleryProps> = ({
         document.addEventListener(
             'touchmove',
             (e) => {
-                const endY = e.changedTouches[0].clientY;
-                const deltaY = startY - endY;
+                const currentX = e.touches[0].clientX;
+                const currentY = e.touches[0].clientY;
+                const deltaX = currentX - startX;
+                const deltaY = currentY - startY;
+
+                if (!lockedDirection) {
+                    const absX = Math.abs(deltaX);
+                    const absY = Math.abs(deltaY);
+
+                    if (absX > absY && absX > directionLockThreshold) {
+                        lockedDirection = 'horizontal';
+                    } else if (absY > absX && absY > directionLockThreshold) {
+                        lockedDirection = 'vertical';
+                    } else {
+                        return;
+                    }
+                }
+
+                if (lockedDirection === 'horizontal') {
+                    return;
+                }
 
-                // Если свайп вниз, закрываем галерею
-                if (deltaY < SWIPE_THRESHOLD) {
+                if (deltaY <= 0) {
+                    setSwipeY(0);
+
+                    return;
+                }
+
+                setSwipeY(deltaY);
+
+                if (deltaY > SWIPE_THRESHOLD) {
+                    setSwipeY(0);
                     onClose();
                 }
             },
             { signal },
         );
 
+        document.addEventListener(
+            'touchend',
+            () => {
+                lockedDirection = null;
+                setSwipeY(0);
+            },
+            { signal },
+        );
+
         return () => {
             abortController.abort();
         };
-    }, [onClose]);
+    }, [onClose, open]);
 
     const singleSlide = images.length === 1;
 
@@ -282,6 +335,10 @@ export const Gallery: FC<GalleryProps> = ({
                 onUnmount={onUnmount}
             >
                 <div
+                    data-content-area={true}
+                    style={{
+                        transform: `translateY(${swipeY}px)`,
+                    }}
                     className={cn(styles.container, {
                         [styles.mobile]: !isDesktop,
                     })}