@alfalab/core-components-gallery 7.2.3 → 7.3.0

package/modern/components/image-viewer/video/index.js

@@ -1,4 +1,4 @@
-import React, { useRef, useState, useContext, useEffect, useCallback } from 'react';
+import React, { useState, useRef, useContext, useEffect, useCallback } from 'react';
 import cn from 'classnames';
 import { Circle } from '@alfalab/core-components-icon-view/modern/circle';
 import PlayCompactMIcon from '@alfalab/icons-glyph/PlayCompactMIcon';
@@ -8,9 +8,12 @@ import { Subtitles } from '../../subtitles/index.js';
 import styles from './index.module.css.js';
 
 const Video = ({ url, index, className, isActive }) => {
+    const [videoLoaded, setVideoLoaded] = useState(false);
     const playerRef = useRef(null);
     const timer = useRef();
     const [hlsSupported, setHlsSupported] = useState(true);
+    const abortController = useRef(new AbortController());
+    const [videoError, setVideoError] = useState(false);
     const { setImageMeta, mutedVideo, view, playingVideo, setPlayingVideo, setHideNavigation, getCurrentImage, } = useContext(GalleryContext);
     const isMobile = view === 'mobile';
     const isDesktop = view === 'desktop';
@@ -40,6 +43,36 @@ const Video = ({ url, index, className, isActive }) => {
             return null;
         }
     }, [setImageMeta, index]);
+    useEffect(() => () => abortController.current.abort(), []);
+    useEffect(() => {
+        const video = playerRef.current;
+        if (!video) {
+            return;
+        }
+        const { signal } = abortController.current;
+        const handleCanPlay = () => {
+            setVideoLoaded(true);
+            setVideoError(false);
+            setImageMeta({
+                player: playerRef,
+                width: video.videoWidth || 1920,
+                height: video.videoHeight || 1080,
+                loaded: true,
+            }, index);
+        };
+        const handleError = () => {
+            setVideoError(true);
+            setVideoLoaded(false);
+            setImageMeta({ player: { current: null }, broken: true, loaded: true }, index);
+        };
+        const handleLoadStart = () => {
+            setVideoLoaded(false);
+            setVideoError(false);
+        };
+        video.addEventListener('canplay', handleCanPlay, { signal });
+        video.addEventListener('error', handleError, { signal });
+        video.addEventListener('loadstart', handleLoadStart, { signal });
+    }, [setImageMeta, index]);
     useEffect(() => {
         let hls = null;
         const initHls = async () => {
@@ -105,8 +138,11 @@ const Video = ({ url, index, className, isActive }) => {
         }
     }, [isActive, playingVideo]);
     useEffect(() => {
+        const { signal } = abortController.current;
         const handleSpacePress = (e) => {
             if ((e.key === ' ' || e.code === 'Space') && isActive) {
+                e.preventDefault();
+                e.stopPropagation();
                 if (playingVideo) {
                     setPlayingVideo(false);
                 }
@@ -115,10 +151,7 @@ const Video = ({ url, index, className, isActive }) => {
                 }
             }
         };
-        document.addEventListener('keyup', handleSpacePress);
-        return () => {
-            document.removeEventListener('keyup', handleSpacePress);
-        };
+        document.addEventListener('keydown', handleSpacePress, { signal });
     }, [isActive, playingVideo, setPlayingVideo]);
     const handleWrapperClick = (e) => {
         e.stopPropagation();
@@ -132,9 +165,10 @@ const Video = ({ url, index, className, isActive }) => {
                     setHideNavigation(true);
                 }, 3000);
             }
-            return;
         }
-        setPlayingVideo(!playingVideo);
+        else {
+            setPlayingVideo(!playingVideo);
+        }
     };
     const handleBottomButtonClick = useCallback((e) => {
         e.stopPropagation();
@@ -159,16 +193,17 @@ const Video = ({ url, index, className, isActive }) => {
         }
         setHideNavigation(false);
     };
-    return (
-    // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
-    React.createElement("div", { onClick: handleWrapperClick, className: styles.videoWrapper },
+    return (React.createElement("div", { "aria-hidden": true, onClick: handleWrapperClick, "data-content-area": 'true', className: cn(styles.videoWrapper, {
+            [styles.loading]: !videoLoaded && !videoError,
+            [styles.mobileWrapper]: isMobile,
+        }) },
         React.createElement("video", { onPlay: onPlay, onPause: onPause, ref: playerRef, playsInline: true, muted: mutedVideo, loop: true, src: hlsSupported ? undefined : url, className: cn(styles.video, { [styles.mobile]: view === 'mobile' }, className) },
             React.createElement("track", { kind: 'captions' })),
-        isDesktop && !playingVideo && (React.createElement("div", { className: styles.videoButton },
+        isDesktop && !playingVideo && videoLoaded && (React.createElement("div", { className: styles.videoButton },
             React.createElement(Circle, { size: 64, shapeClassName: styles.iconShape },
                 React.createElement(PlayCompactMIcon, { className: styles.icon })))),
         isDesktop && React.createElement(Subtitles, null),
-        isDesktop && image?.bottomButton && (React.createElement(BottomButton, { bottomButton: image.bottomButton, onClick: handleBottomButtonClick, className: styles.bottomButton }))));
+        isDesktop && image?.bottomButton && videoLoaded && (React.createElement(BottomButton, { bottomButton: image.bottomButton, onClick: handleBottomButtonClick, className: styles.bottomButton }))));
 };
 
 export { Video };

package/modern/components/image-viewer/video/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/image-viewer/video/index.tsx"],"sourcesContent":["import React, {\n    type MouseEvent,\n    type ReactEventHandler,\n    useCallback,\n    useContext,\n    useEffect,\n    useRef,\n    useState,\n} from 'react';\nimport cn from 'classnames';\nimport type Hls from 'hls.js';\n\nimport { Circle } from '@alfalab/core-components-icon-view/circle';\nimport PlayCompactMIcon from '@alfalab/icons-glyph/PlayCompactMIcon';\n\nimport { GalleryContext } from '../../../context';\nimport { BottomButton } from '../../bottom-button';\nimport { Subtitles } from '../../subtitles';\n\nimport styles from './index.module.css';\n\ntype Props = {\n    url: string;\n    index: number;\n    isActive: boolean;\n    className?: string;\n};\n\nexport const Video = ({ url, index, className, isActive }: Props) => {\n    const playerRef = useRef<HTMLVideoElement>(null);\n    const timer = useRef<ReturnType<typeof setTimeout>>();\n    const [hlsSupported, setHlsSupported] = useState<boolean>(true);\n\n    const {\n        setImageMeta,\n        mutedVideo,\n        view,\n        playingVideo,\n        setPlayingVideo,\n        setHideNavigation,\n        getCurrentImage,\n    } = useContext(GalleryContext);\n\n    const isMobile = view === 'mobile';\n    const isDesktop = view === 'desktop';\n\n    const image = getCurrentImage();\n\n    useEffect(() => {\n        setImageMeta({ player: playerRef }, index);\n        /* eslint-disable-next-line react-hooks/exhaustive-deps */\n    }, [index]);\n\n    const loadHlsLibrary = useCallback(\n        async (attempt = 1, maxAttempts = 3): Promise<typeof Hls | null> => {\n            try {\n                const { default: HlsLib } = await import(\n                    /* webpackChunkName: \"hls-js-gallery\" */ 'hls.js'\n                );\n\n                return HlsLib;\n            } catch {\n                if (attempt < maxAttempts) {\n                    /* Экспоненциальная задержка ретрая: 300ms, 600ms, 1200ms */\n                    await new Promise<void>((resolve) => {\n                        setTimeout(\n                            () => {\n                                resolve();\n                            },\n                            300 * 2 ** (attempt - 1),\n                        );\n                    });\n\n                    return loadHlsLibrary(attempt + 1, maxAttempts);\n                }\n\n                setHlsSupported(false);\n                setImageMeta({ player: { current: null }, broken: true }, index);\n\n                return null;\n            }\n        },\n        [setImageMeta, index],\n    );\n\n    useEffect(() => {\n        let hls: Hls | null = null;\n\n        const initHls = async () => {\n            try {\n                const HlsLib = await loadHlsLibrary();\n\n                if (!HlsLib || !playerRef.current) {\n                    return;\n                }\n\n                if (!HlsLib.isSupported()) {\n                    setHlsSupported(false);\n\n                    return;\n                }\n\n                hls = new HlsLib();\n\n                hls.on(HlsLib.Events.ERROR, (_, data) => {\n                    if (data.fatal && hls) {\n                        switch (data.type) {\n                            case HlsLib.ErrorTypes.MEDIA_ERROR:\n                                hls.recoverMediaError();\n                                break;\n                            case HlsLib.ErrorTypes.NETWORK_ERROR:\n                                setImageMeta({ player: { current: null }, broken: true }, index);\n                                break;\n                            default:\n                                hls.destroy();\n                                break;\n                        }\n                    }\n                });\n\n                hls.loadSource(url);\n\n                if (playerRef.current) {\n                    hls.attachMedia(playerRef.current);\n                    hls.subtitleDisplay = false;\n                }\n            } catch {\n                setHlsSupported(false);\n                setImageMeta({ player: { current: null }, broken: true }, index);\n            }\n        };\n\n        initHls();\n\n        return () => {\n            if (hls) {\n                hls.destroy();\n            }\n            if (timer.current) {\n                clearTimeout(timer.current);\n            }\n        };\n        /* eslint-disable-next-line react-hooks/exhaustive-deps */\n    }, [url, index]);\n\n    useEffect(() => {\n        if (playerRef.current && isActive) {\n            if (playingVideo) {\n                playerRef.current.play();\n            } else {\n                playerRef.current.pause();\n            }\n        }\n        if (playerRef.current && !isActive) {\n            playerRef.current.pause();\n            playerRef.current.currentTime = 0;\n        }\n    }, [isActive, playingVideo]);\n\n    useEffect(() => {\n        const handleSpacePress = (e: KeyboardEvent) => {\n            if ((e.key === ' ' || e.code === 'Space') && isActive) {\n                if (playingVideo) {\n                    setPlayingVideo(false);\n                } else {\n                    setPlayingVideo(true);\n                }\n            }\n        };\n\n        document.addEventListener('keyup', handleSpacePress);\n\n        return () => {\n            document.removeEventListener('keyup', handleSpacePress);\n        };\n    }, [isActive, playingVideo, setPlayingVideo]);\n\n    const handleWrapperClick = (e: MouseEvent) => {\n        e.stopPropagation();\n\n        if (isMobile) {\n            setHideNavigation(false);\n\n            if (playingVideo) {\n                if (timer.current) {\n                    clearTimeout(timer.current);\n                }\n                timer.current = setTimeout(() => {\n                    setHideNavigation(true);\n                }, 3000);\n            }\n\n            return;\n        }\n\n        setPlayingVideo(!playingVideo);\n    };\n\n    const handleBottomButtonClick = useCallback(\n        (e: MouseEvent) => {\n            e.stopPropagation();\n            if (image?.bottomButton) {\n                image.bottomButton.onClick(e);\n            }\n        },\n        [image?.bottomButton],\n    );\n\n    const onPlay: ReactEventHandler<HTMLVideoElement> = () => {\n        image?.onPlay?.();\n\n        if (timer.current) {\n            clearTimeout(timer.current);\n        }\n\n        timer.current = setTimeout(() => {\n            setHideNavigation(true);\n        }, 3000);\n    };\n\n    const onPause: ReactEventHandler<HTMLVideoElement> = () => {\n        image?.onPause?.();\n\n        if (timer.current) {\n            clearTimeout(timer.current);\n            timer.current = undefined;\n        }\n\n        setHideNavigation(false);\n    };\n\n    return (\n        // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions\n        <div onClick={handleWrapperClick} className={styles.videoWrapper}>\n            <video\n                onPlay={onPlay}\n                onPause={onPause}\n                ref={playerRef}\n                playsInline={true}\n                muted={mutedVideo}\n                loop={true}\n                src={hlsSupported ? undefined : url}\n                className={cn(styles.video, { [styles.mobile]: view === 'mobile' }, className)}\n            >\n                <track kind='captions' />\n            </video>\n            {isDesktop && !playingVideo && (\n                <div className={styles.videoButton}>\n                    <Circle size={64} shapeClassName={styles.iconShape}>\n                        <PlayCompactMIcon className={styles.icon} />\n                    </Circle>\n                </div>\n            )}\n            {isDesktop && <Subtitles />}\n            {isDesktop && image?.bottomButton && (\n                <BottomButton\n                    bottomButton={image.bottomButton}\n                    onClick={handleBottomButtonClick}\n                    className={styles.bottomButton}\n                />\n            )}\n        </div>\n    );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/image-viewer/video/index.tsx"],"sourcesContent":["import React, {\n    type MouseEvent,\n    type ReactEventHandler,\n    useCallback,\n    useContext,\n    useEffect,\n    useRef,\n    useState,\n} from 'react';\nimport cn from 'classnames';\nimport type Hls from 'hls.js';\n\nimport { Circle } from '@alfalab/core-components-icon-view/circle';\nimport PlayCompactMIcon from '@alfalab/icons-glyph/PlayCompactMIcon';\n\nimport { GalleryContext } from '../../../context';\nimport { BottomButton } from '../../bottom-button';\nimport { Subtitles } from '../../subtitles';\n\nimport styles from './index.module.css';\n\ntype Props = {\n    url: string;\n    index: number;\n    isActive: boolean;\n    className?: string;\n};\n\nexport const Video = ({ url, index, className, isActive }: Props) => {\n    const [videoLoaded, setVideoLoaded] = useState(false);\n    const playerRef = useRef<HTMLVideoElement>(null);\n    const timer = useRef<ReturnType<typeof setTimeout>>();\n    const [hlsSupported, setHlsSupported] = useState<boolean>(true);\n    const abortController = useRef(new AbortController());\n    const [videoError, setVideoError] = useState(false);\n\n    const {\n        setImageMeta,\n        mutedVideo,\n        view,\n        playingVideo,\n        setPlayingVideo,\n        setHideNavigation,\n        getCurrentImage,\n    } = useContext(GalleryContext);\n\n    const isMobile = view === 'mobile';\n    const isDesktop = view === 'desktop';\n\n    const image = getCurrentImage();\n\n    useEffect(() => {\n        setImageMeta({ player: playerRef }, index);\n        /* eslint-disable-next-line react-hooks/exhaustive-deps */\n    }, [index]);\n\n    const loadHlsLibrary = useCallback(\n        async (attempt = 1, maxAttempts = 3): Promise<typeof Hls | null> => {\n            try {\n                const { default: HlsLib } = await import(\n                    /* webpackChunkName: \"hls-js-gallery\" */ 'hls.js'\n                );\n\n                return HlsLib;\n            } catch {\n                if (attempt < maxAttempts) {\n                    /* Экспоненциальная задержка ретрая: 300ms, 600ms, 1200ms */\n                    await new Promise<void>((resolve) => {\n                        setTimeout(\n                            () => {\n                                resolve();\n                            },\n                            300 * 2 ** (attempt - 1),\n                        );\n                    });\n\n                    return loadHlsLibrary(attempt + 1, maxAttempts);\n                }\n\n                setHlsSupported(false);\n                setImageMeta({ player: { current: null }, broken: true }, index);\n\n                return null;\n            }\n        },\n        [setImageMeta, index],\n    );\n\n    useEffect(() => () => abortController.current.abort(), []);\n\n    useEffect(() => {\n        const video = playerRef.current;\n\n        if (!video) {\n            return;\n        }\n\n        const { signal } = abortController.current;\n\n        const handleCanPlay = () => {\n            setVideoLoaded(true);\n            setVideoError(false);\n            setImageMeta(\n                {\n                    player: playerRef,\n                    width: video.videoWidth || 1920,\n                    height: video.videoHeight || 1080,\n                    loaded: true,\n                },\n                index,\n            );\n        };\n\n        const handleError = () => {\n            setVideoError(true);\n            setVideoLoaded(false);\n            setImageMeta({ player: { current: null }, broken: true, loaded: true }, index);\n        };\n\n        const handleLoadStart = () => {\n            setVideoLoaded(false);\n            setVideoError(false);\n        };\n\n        video.addEventListener('canplay', handleCanPlay, { signal });\n        video.addEventListener('error', handleError, { signal });\n        video.addEventListener('loadstart', handleLoadStart, { signal });\n    }, [setImageMeta, index]);\n\n    useEffect(() => {\n        let hls: Hls | null = null;\n\n        const initHls = async () => {\n            try {\n                const HlsLib = await loadHlsLibrary();\n\n                if (!HlsLib || !playerRef.current) {\n                    return;\n                }\n\n                if (!HlsLib.isSupported()) {\n                    setHlsSupported(false);\n\n                    return;\n                }\n\n                hls = new HlsLib();\n\n                hls.on(HlsLib.Events.ERROR, (_, data) => {\n                    if (data.fatal && hls) {\n                        switch (data.type) {\n                            case HlsLib.ErrorTypes.MEDIA_ERROR:\n                                hls.recoverMediaError();\n                                break;\n                            case HlsLib.ErrorTypes.NETWORK_ERROR:\n                                setImageMeta({ player: { current: null }, broken: true }, index);\n                                break;\n                            default:\n                                hls.destroy();\n                                break;\n                        }\n                    }\n                });\n\n                hls.loadSource(url);\n\n                if (playerRef.current) {\n                    hls.attachMedia(playerRef.current);\n                    hls.subtitleDisplay = false;\n                }\n            } catch {\n                setHlsSupported(false);\n                setImageMeta({ player: { current: null }, broken: true }, index);\n            }\n        };\n\n        initHls();\n\n        return () => {\n            if (hls) {\n                hls.destroy();\n            }\n            if (timer.current) {\n                clearTimeout(timer.current);\n            }\n        };\n        /* eslint-disable-next-line react-hooks/exhaustive-deps */\n    }, [url, index]);\n\n    useEffect(() => {\n        if (playerRef.current && isActive) {\n            if (playingVideo) {\n                playerRef.current.play();\n            } else {\n                playerRef.current.pause();\n            }\n        }\n        if (playerRef.current && !isActive) {\n            playerRef.current.pause();\n            playerRef.current.currentTime = 0;\n        }\n    }, [isActive, playingVideo]);\n\n    useEffect(() => {\n        const { signal } = abortController.current;\n\n        const handleSpacePress = (e: KeyboardEvent) => {\n            if ((e.key === ' ' || e.code === 'Space') && isActive) {\n                e.preventDefault();\n                e.stopPropagation();\n                if (playingVideo) {\n                    setPlayingVideo(false);\n                } else {\n                    setPlayingVideo(true);\n                }\n            }\n        };\n\n        document.addEventListener('keydown', handleSpacePress, { signal });\n    }, [isActive, playingVideo, setPlayingVideo]);\n\n    const handleWrapperClick = (e: MouseEvent) => {\n        e.stopPropagation();\n\n        if (isMobile) {\n            setHideNavigation(false);\n\n            if (playingVideo) {\n                if (timer.current) {\n                    clearTimeout(timer.current);\n                }\n                timer.current = setTimeout(() => {\n                    setHideNavigation(true);\n                }, 3000);\n            }\n        } else {\n            setPlayingVideo(!playingVideo);\n        }\n    };\n\n    const handleBottomButtonClick = useCallback(\n        (e: MouseEvent) => {\n            e.stopPropagation();\n            if (image?.bottomButton) {\n                image.bottomButton.onClick(e);\n            }\n        },\n        [image?.bottomButton],\n    );\n\n    const onPlay: ReactEventHandler<HTMLVideoElement> = () => {\n        image?.onPlay?.();\n\n        if (timer.current) {\n            clearTimeout(timer.current);\n        }\n\n        timer.current = setTimeout(() => {\n            setHideNavigation(true);\n        }, 3000);\n    };\n\n    const onPause: ReactEventHandler<HTMLVideoElement> = () => {\n        image?.onPause?.();\n\n        if (timer.current) {\n            clearTimeout(timer.current);\n            timer.current = undefined;\n        }\n\n        setHideNavigation(false);\n    };\n\n    return (\n        <div\n            aria-hidden={true}\n            onClick={handleWrapperClick}\n            data-content-area='true'\n            className={cn(styles.videoWrapper, {\n                [styles.loading]: !videoLoaded && !videoError,\n                [styles.mobileWrapper]: isMobile,\n            })}\n        >\n            <video\n                onPlay={onPlay}\n                onPause={onPause}\n                ref={playerRef}\n                playsInline={true}\n                muted={mutedVideo}\n                loop={true}\n                src={hlsSupported ? undefined : url}\n                className={cn(styles.video, { [styles.mobile]: view === 'mobile' }, className)}\n            >\n                <track kind='captions' />\n            </video>\n            {isDesktop && !playingVideo && videoLoaded && (\n                <div className={styles.videoButton}>\n                    <Circle size={64} shapeClassName={styles.iconShape}>\n                        <PlayCompactMIcon className={styles.icon} />\n                    </Circle>\n                </div>\n            )}\n            {isDesktop && <Subtitles />}\n            {isDesktop && image?.bottomButton && videoLoaded && (\n                <BottomButton\n                    bottomButton={image.bottomButton}\n                    onClick={handleBottomButtonClick}\n                    className={styles.bottomButton}\n                />\n            )}\n        </div>\n    );\n};\n"],"names":[],"mappings":"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"}

package/modern/components/image-viewer/video/index.module.css.js

@@ -1,6 +1,6 @@
 import './index.css';
 
-const styles = {"videoWrapper":"gallery__videoWrapper_gnw2e","video":"gallery__video_gnw2e","mobile":"gallery__mobile_gnw2e","videoButton":"gallery__videoButton_gnw2e","icon":"gallery__icon_gnw2e","iconShape":"gallery__iconShape_gnw2e","bottomButton":"gallery__bottomButton_gnw2e"};
+const styles = {"videoWrapper":"gallery__videoWrapper_yf8l7","mobileWrapper":"gallery__mobileWrapper_yf8l7","loading":"gallery__loading_yf8l7","video":"gallery__video_yf8l7","mobile":"gallery__mobile_yf8l7","videoButton":"gallery__videoButton_yf8l7","icon":"gallery__icon_yf8l7","iconShape":"gallery__iconShape_yf8l7","bottomButton":"gallery__bottomButton_yf8l7"};
 
 export { styles as default };
 //# sourceMappingURL=index.module.css.js.map

package/modern/components/image-viewer/video/index.module.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.module.css.js","sources":["../../../src/components/image-viewer/video/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/index.css';\n\n.videoWrapper {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    height: 100%;\n    width: 100%;\n    min-width: 0;\n    min-height: 0;\n    position: relative;\n}\n\n.video {\n    max-width: 100%;\n    max-height: 100%;\n    object-fit: contain;\n    border-radius: var(--border-radius-24);\n}\n\n.mobile {\n    border-radius: var(--border-radius-0);\n}\n\n.videoButton {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    z-index: 1;\n    color: green;\n}\n\n.icon {\n    color: var(--color-static-neutral-0);\n}\n\n.iconShape {\n    fill: var(--color-static-neutral-translucent-700);\n}\n\n.bottomButton {\n    position: absolute;\n    bottom: 48px;\n    left: 32px;\n    right: 32px;\n}\n"],"names":[],"mappings":";;AAEgB,eAAe,CAAC,cAAc,CAAC,6BAA6B,CAAC,OAAO,CAAC,sBAAsB,CAAC,QAAQ,CAAC,uBAAuB,CAAC,aAAa,CAAC,4BAA4B,CAAC,MAAM,CAAC,qBAAqB,CAAC,WAAW,CAAC,0BAA0B,CAAC,cAAc,CAAC,6BAA6B,CAAC;;;;"}
+{"version":3,"file":"index.module.css.js","sources":["../../../src/components/image-viewer/video/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/index.css';\n\n.videoWrapper {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    height: 100%;\n    width: auto;\n    max-width: 100%;\n    position: relative;\n    min-width: 300px;\n    min-height: 200px;\n}\n\n.mobileWrapper {\n    width: 100%;\n}\n\n.videoWrapper.loading {\n    width: 100%;\n    aspect-ratio: 16/9;\n    background-color: var(--color-static-neutral-translucent-100-inverted);\n    border-radius: var(--border-radius-24);\n    align-items: center;\n}\n\n.video {\n    max-width: 100%;\n    max-height: 100%;\n    object-fit: contain;\n    border-radius: var(--border-radius-24);\n}\n\n.mobile {\n    border-radius: var(--border-radius-0);\n}\n\n.videoButton {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    z-index: 1;\n    color: green;\n}\n\n.icon {\n    color: var(--color-static-neutral-0);\n}\n\n.iconShape {\n    fill: var(--color-static-neutral-translucent-700);\n}\n\n.bottomButton {\n    position: absolute;\n    bottom: 48px;\n    left: 32px;\n    right: 32px;\n}\n"],"names":[],"mappings":";;AAEgB,eAAe,CAAC,cAAc,CAAC,6BAA6B,CAAC,eAAe,CAAC,8BAA8B,CAAC,SAAS,CAAC,wBAAwB,CAAC,OAAO,CAAC,sBAAsB,CAAC,QAAQ,CAAC,uBAAuB,CAAC,aAAa,CAAC,4BAA4B,CAAC,MAAM,CAAC,qBAAqB,CAAC,WAAW,CAAC,0BAA0B,CAAC,cAAc,CAAC,6BAA6B,CAAC;;;;"}

package/modern/components/info-bar/index.css

@@ -5,10 +5,10 @@
     --gap-4: 4px;
     --gap-8: 8px;
 }
-.gallery__description_2ekgy {
+.gallery__description_bonz4 {
     text-align: center;
 }
-.gallery__infoWrapper_2ekgy {
+.gallery__infoWrapper_bonz4 {
     background-color: var(--color-static-neutral-0-inverted);
     display: flex;
     align-items: center;
@@ -17,7 +17,7 @@
     position: relative;
     height: 48px;
 }
-.gallery__infoWrapper_2ekgy.gallery__video_2ekgy {
+.gallery__infoWrapper_bonz4.gallery__video_bonz4 {
         padding: 0 var(--gap-4) var(--gap-4);
         justify-content: space-between;
     }

package/modern/components/info-bar/index.module.css.js

@@ -1,6 +1,6 @@
 import './index.css';
 
-const styles = {"description":"gallery__description_2ekgy","infoWrapper":"gallery__infoWrapper_2ekgy","video":"gallery__video_2ekgy"};
+const styles = {"description":"gallery__description_bonz4","infoWrapper":"gallery__infoWrapper_bonz4","video":"gallery__video_bonz4"};
 
 export { styles as default };
 //# sourceMappingURL=index.module.css.js.map

package/modern/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/modern';
 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.js';
 
 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/modern/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/modern/components/navigation-bar/index.css

@@ -6,9 +6,9 @@
     --gap-4: 4px;
     --gap-8: 8px;
     --gap-12: 12px;
-    --gap-24: 24px;
+    --gap-32: 32px;
 }
-.gallery__component_jvjzj {
+.gallery__component_11mwi {
     display: flex;
     flex-wrap: nowrap;
     align-content: center;
@@ -16,29 +16,39 @@
     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;
 }
-.gallery__component_jvjzj.gallery__mobile_jvjzj {
-        padding: var(--gap-8) var(--gap-24);
+.gallery__component_11mwi.gallery__mobile_11mwi {
+        padding: var(--gap-8);
     }
-.gallery__component_jvjzj::-webkit-scrollbar {
+.gallery__component_11mwi.gallery__dragging_11mwi {
+        cursor: grabbing;
+    }
+.gallery__component_11mwi.gallery__dragging_11mwi * {
+            cursor: grabbing;
+        }
+.gallery__component_11mwi::-webkit-scrollbar {
         display: none;
     }
-.gallery__previews_jvjzj {
+.gallery__previews_11mwi {
     display: flex;
 }
-.gallery__preview_jvjzj {
+.gallery__preview_11mwi {
     flex-shrink: 0;
     margin-right: var(--gap-4);
 }
-.gallery__preview_jvjzj.gallery__mobile_jvjzj {
+.gallery__preview_11mwi.gallery__mobile_11mwi {
         margin-right: var(--gap-2);
     }
-.gallery__preview_jvjzj:first-child {
+.gallery__preview_11mwi:first-child {
         margin-left: auto;
     }
-.gallery__preview_jvjzj:last-child {
+.gallery__preview_11mwi:last-child {
         margin-right: auto;
     }

package/modern/components/navigation-bar/index.module.css.js

@@ -1,6 +1,6 @@
 import './index.css';
 
-const styles = {"component":"gallery__component_jvjzj","mobile":"gallery__mobile_jvjzj","preview":"gallery__preview_jvjzj"};
+const styles = {"component":"gallery__component_11mwi","mobile":"gallery__mobile_11mwi","dragging":"gallery__dragging_11mwi","preview":"gallery__preview_11mwi"};
 
 export { styles as default };
 //# sourceMappingURL=index.module.css.js.map

package/modern/components/navigation-bar/index.module.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.module.css.js","sources":["../../src/components/navigation-bar/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/index.css';\n\n.component {\n    display: flex;\n    flex-wrap: nowrap;\n    align-content: center;\n    align-items: center;\n    flex-shrink: 0;\n    overflow-x: auto;\n    box-sizing: border-box;\n    padding: var(--gap-12) var(--gap-24);\n    scrollbar-width: none;\n    background-color: var(--color-static-neutral-0-inverted);\n\n    &.mobile {\n        padding: var(--gap-8) var(--gap-24);\n    }\n\n    &::-webkit-scrollbar {\n        display: none;\n    }\n}\n\n.previews {\n    display: flex;\n}\n\n.preview {\n    flex-shrink: 0;\n    margin-right: var(--gap-4);\n\n    &.mobile {\n        margin-right: var(--gap-2);\n    }\n\n    &:first-child {\n        margin-left: auto;\n    }\n\n    &:last-child {\n        margin-right: auto;\n    }\n}\n"],"names":[],"mappings":";;AAEgB,eAAe,CAAC,WAAW,CAAC,0BAA0B,CAAC,QAAQ,CAAC,uBAAuB,CAAsC,SAAS,CAAC,wBAAwB,CAAC;;;;"}
+{"version":3,"file":"index.module.css.js","sources":["../../src/components/navigation-bar/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/index.css';\n\n.component {\n    display: flex;\n    flex-wrap: nowrap;\n    align-content: center;\n    align-items: center;\n    flex-shrink: 0;\n    overflow-x: auto;\n    box-sizing: border-box;\n    padding: var(--gap-12) var(--gap-32);\n    scrollbar-width: none;\n    background-color: var(--color-static-neutral-0-inverted);\n    cursor: grab;\n    user-select: none;\n\n    &.mobile {\n        padding: var(--gap-8);\n    }\n\n    &.dragging {\n        cursor: grabbing;\n\n        & * {\n            cursor: grabbing;\n        }\n    }\n\n    &::-webkit-scrollbar {\n        display: none;\n    }\n}\n\n.previews {\n    display: flex;\n}\n\n.preview {\n    flex-shrink: 0;\n    margin-right: var(--gap-4);\n\n    &.mobile {\n        margin-right: var(--gap-2);\n    }\n\n    &:first-child {\n        margin-left: auto;\n    }\n\n    &:last-child {\n        margin-right: auto;\n    }\n}\n"],"names":[],"mappings":";;AAEgB,eAAe,CAAC,WAAW,CAAC,0BAA0B,CAAC,QAAQ,CAAC,uBAAuB,CAAC,UAAU,CAAC,yBAAyB,CAAsC,SAAS,CAAC,wBAAwB,CAAC;;;;"}

package/modern/components/subtitles/index.css

@@ -3,7 +3,7 @@
     --gap-16: 16px;
     --gap-32: 32px;
 }
-.gallery__subtitles_j6roo {
+.gallery__subtitles_ljsjn {
     position: absolute;
     align-self: flex-end;
     padding: var(--gap-0) var(--gap-32);
@@ -16,10 +16,10 @@
         opacity 500ms ease-in-out,
         margin-bottom 270ms ease-in-out;
 }
-.gallery__subtitles_j6roo.gallery__mobile_j6roo {
+.gallery__subtitles_ljsjn.gallery__mobile_ljsjn {
         position: static;
         position: initial;
     }
-.gallery__hideSubtitles_j6roo {
+.gallery__hideSubtitles_ljsjn {
     opacity: 0;
 }

package/modern/components/subtitles/index.module.css.js

@@ -1,6 +1,6 @@
 import './index.css';
 
-const styles = {"subtitles":"gallery__subtitles_j6roo","mobile":"gallery__mobile_j6roo","hideSubtitles":"gallery__hideSubtitles_j6roo"};
+const styles = {"subtitles":"gallery__subtitles_ljsjn","mobile":"gallery__mobile_ljsjn","hideSubtitles":"gallery__hideSubtitles_ljsjn"};
 
 export { styles as default };
 //# sourceMappingURL=index.module.css.js.map

package/modern/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/modern/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/modern/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;;;;"}