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

package/esm/components/image-viewer/slide.js.map

@@ -1 +1 @@
-{"version":3,"file":"slide.js","sources":["../../../src/components/image-viewer/slide.tsx"],"sourcesContent":["import React, { type FC, type ReactNode, useCallback, useContext } from 'react';\nimport cn from 'classnames';\n\nimport { Spinner } from '@alfalab/core-components-spinner';\nimport { TypographyText } from '@alfalab/core-components-typography';\n\nimport { GalleryContext } from '../../context';\nimport { type GalleryImage, type ImageMeta } from '../../types';\nimport { getImageAlt, isSmallImage, isVideo, TestIds } from '../../utils';\n\nimport { useHandleImageViewer } from './hooks';\nimport { NoImagePaths } from './paths';\nimport { Video } from './video';\n\nimport styles from './index.module.css';\n\ntype SlideInnerProps = {\n    active: boolean;\n    broken: boolean;\n    loading: boolean;\n    children: ReactNode;\n    isVideoView?: boolean;\n};\n\nconst SlideInner: FC<SlideInnerProps> = ({ children, broken, loading, isVideoView }) => {\n    const content = broken ? (\n        <div className={styles.brokenImgWrapper}>\n            <div className={styles.brokenImgIcon}>\n                <svg\n                    xmlns='http://www.w3.org/2000/svg'\n                    width='80'\n                    height='80'\n                    viewBox='0 0 80 80'\n                    fill='none'\n                >\n                    <rect width='80' height='80' fill='none' />\n                    <path\n                        fillRule='evenodd'\n                        clipRule='evenodd'\n                        d={NoImagePaths.baseImage}\n                        fill='#89898A'\n                    />\n                    <path d={NoImagePaths.triangleImage} fill='#89898A' />\n                </svg>\n            </div>\n\n            <TypographyText view='primary-small' color='static-secondary-light'>\n                Не удалось загрузить {isVideoView ? 'видео' : 'изображение'}\n            </TypographyText>\n        </div>\n    ) : (\n        children\n    );\n\n    return (\n        <div className={cn(styles.slide, { [styles.slideLoading]: loading })}>\n            {broken ? <div className={styles.placeholder}>{content}</div> : content}\n            <Spinner className={styles.spinner} preset={48} visible={loading} />\n        </div>\n    );\n};\n\ntype SlideProps = {\n    isActive: boolean;\n    image: GalleryImage;\n    meta?: ImageMeta;\n    containerAspectRatio: number;\n    imageAspectRatio: number;\n    index: number;\n    containerHeight: number;\n    slideVisible: boolean;\n    fullScreen?: boolean;\n};\n\nexport const Slide: FC<SlideProps> = ({\n    isActive,\n    meta,\n    containerAspectRatio,\n    imageAspectRatio,\n    image,\n    index,\n    containerHeight,\n    slideVisible,\n    fullScreen,\n}) => {\n    const { view } = useContext(GalleryContext);\n    const { handleLoad, handleLoadError } = useHandleImageViewer();\n\n    const broken = Boolean(meta?.broken);\n    const small = isSmallImage(meta);\n    const verticalImageFit = !small && containerAspectRatio > imageAspectRatio;\n    const horizontalImageFit = !small && containerAspectRatio <= imageAspectRatio;\n    const imageStyle =\n        fullScreen || !containerHeight ? undefined : { maxHeight: `${containerHeight}px` };\n\n    const handleImageRef = useCallback(\n        (node: HTMLImageElement | null) => {\n            if (node?.complete && node.naturalWidth > 0 && !meta) {\n                handleLoad(\n                    { currentTarget: node } as React.SyntheticEvent<HTMLImageElement>,\n                    index,\n                );\n            }\n        },\n        [handleLoad, index, meta],\n    );\n\n    if (isVideo(image.src)) {\n        return (\n            <SlideInner isVideoView={true} active={isActive} broken={broken} loading={!meta}>\n                <Video\n                    url={image.src}\n                    index={index}\n                    isActive={isActive}\n                    className={cn({ [styles.fullScreenMedia]: fullScreen })}\n                />\n            </SlideInner>\n        );\n    }\n\n    return (\n        <SlideInner active={isActive} broken={broken} loading={!meta}>\n            <img\n                ref={handleImageRef}\n                src={image.src}\n                alt={getImageAlt(image, index)}\n                className={cn({\n                    [styles.smallImage]: small,\n                    [styles.image]: !small && meta,\n                    [styles.mobile]: view === 'mobile',\n                    [styles.fullScreenMedia]: fullScreen,\n                    [styles.verticalImageFit]: verticalImageFit,\n                    [styles.horizontalImageFit]: horizontalImageFit,\n                })}\n                onLoad={(event) => handleLoad(event, index)}\n                onError={() => handleLoadError(index)}\n                style={imageStyle}\n                data-test-id={slideVisible ? TestIds.ACTIVE_IMAGE : undefined}\n            />\n        </SlideInner>\n    );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"slide.js","sources":["../../../src/components/image-viewer/slide.tsx"],"sourcesContent":["import React, { type FC, type ReactNode, useCallback, useContext } from 'react';\nimport cn from 'classnames';\n\nimport { Spinner } from '@alfalab/core-components-spinner';\nimport { TypographyText } from '@alfalab/core-components-typography';\n\nimport { GalleryContext } from '../../context';\nimport { type GalleryImage, type ImageMeta } from '../../types';\nimport { getImageAlt, isSmallImage, isVideo, TestIds } from '../../utils';\n\nimport { useHandleImageViewer } from './hooks';\nimport { NoImagePaths } from './paths';\nimport { Video } from './video';\n\nimport styles from './index.module.css';\n\ntype SlideInnerProps = {\n    active: boolean;\n    broken: boolean;\n    loading: boolean;\n    children: ReactNode;\n    isVideoView?: boolean;\n};\n\nconst SlideInner: FC<SlideInnerProps> = ({ children, broken, loading, isVideoView }) => {\n    const content = broken ? (\n        <div className={styles.brokenImgWrapper}>\n            <div className={styles.brokenImgIcon}>\n                <svg\n                    xmlns='http://www.w3.org/2000/svg'\n                    width='80'\n                    height='80'\n                    viewBox='0 0 80 80'\n                    fill='none'\n                >\n                    <rect width='80' height='80' fill='none' />\n                    <path\n                        fillRule='evenodd'\n                        clipRule='evenodd'\n                        d={NoImagePaths.baseImage}\n                        fill='#89898A'\n                    />\n                    <path d={NoImagePaths.triangleImage} fill='#89898A' />\n                </svg>\n            </div>\n\n            <TypographyText view='primary-small' color='static-secondary-light'>\n                Не удалось загрузить {isVideoView ? 'видео' : 'изображение'}\n            </TypographyText>\n        </div>\n    ) : (\n        children\n    );\n\n    return (\n        <div className={cn(styles.slide, { [styles.slideLoading]: loading && !isVideoView })}>\n            {broken ? <div className={styles.placeholder}>{content}</div> : content}\n            <Spinner className={styles.spinner} preset={48} visible={loading} />\n        </div>\n    );\n};\n\ntype SlideProps = {\n    isActive: boolean;\n    image: GalleryImage;\n    meta?: ImageMeta;\n    containerAspectRatio: number;\n    imageAspectRatio: number;\n    index: number;\n    containerHeight: number;\n    slideVisible: boolean;\n    fullScreen?: boolean;\n};\n\nexport const Slide: FC<SlideProps> = ({\n    isActive,\n    meta,\n    containerAspectRatio,\n    imageAspectRatio,\n    image,\n    index,\n    containerHeight,\n    slideVisible,\n    fullScreen,\n}) => {\n    const { view } = useContext(GalleryContext);\n    const { handleLoad, handleLoadError } = useHandleImageViewer();\n\n    const broken = Boolean(meta?.broken);\n    const small = isSmallImage(meta);\n    const verticalImageFit = !small && containerAspectRatio > imageAspectRatio;\n    const horizontalImageFit = !small && containerAspectRatio <= imageAspectRatio;\n    const imageStyle =\n        fullScreen || !containerHeight ? undefined : { maxHeight: `${containerHeight}px` };\n\n    const handleImageRef = useCallback(\n        (node: HTMLImageElement | null) => {\n            if (node?.complete && node.naturalWidth > 0 && !meta) {\n                handleLoad(\n                    { currentTarget: node } as React.SyntheticEvent<HTMLImageElement>,\n                    index,\n                );\n            }\n        },\n        [handleLoad, index, meta],\n    );\n\n    if (isVideo(image.src)) {\n        return (\n            <SlideInner isVideoView={true} active={isActive} broken={broken} loading={!meta}>\n                <Video\n                    url={image.src}\n                    index={index}\n                    isActive={isActive}\n                    className={cn({ [styles.fullScreenMedia]: fullScreen })}\n                />\n            </SlideInner>\n        );\n    }\n\n    return (\n        <SlideInner active={isActive} broken={broken} loading={!meta}>\n            <img\n                ref={handleImageRef}\n                src={image.src}\n                alt={getImageAlt(image, index)}\n                className={cn({\n                    [styles.smallImage]: small,\n                    [styles.image]: !small && meta,\n                    [styles.mobile]: view === 'mobile',\n                    [styles.fullScreenMedia]: fullScreen,\n                    [styles.verticalImageFit]: verticalImageFit,\n                    [styles.horizontalImageFit]: horizontalImageFit,\n                })}\n                onLoad={(event) => handleLoad(event, index)}\n                onError={() => handleLoadError(index)}\n                style={imageStyle}\n                data-content-area='true'\n                data-test-id={slideVisible ? TestIds.ACTIVE_IMAGE : undefined}\n            />\n        </SlideInner>\n    );\n};\n"],"names":[],"mappings":"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"}

package/esm/components/image-viewer/video/index.css

@@ -1,32 +1,44 @@
 :root {
     --color-static-neutral-0: #fff;
+    --color-static-neutral-translucent-100-inverted: rgba(214, 214, 229, 0.07);
     --color-static-neutral-translucent-700: rgba(4, 4, 21, 0.47);
 }
 :root {
     --border-radius-0: 0;
     --border-radius-24: 24px;
 }
-.gallery__videoWrapper_gnw2e {
+.gallery__videoWrapper_itmop {
     display: flex;
     align-items: center;
     justify-content: center;
     height: 100%;
-    width: 100%;
-    min-width: 0;
-    min-height: 0;
+    width: auto;
+    max-width: 100%;
     position: relative;
+    min-width: 300px;
+    min-height: 200px;
+}
+.gallery__mobileWrapper_itmop {
+    width: 100%;
+}
+.gallery__videoWrapper_itmop.gallery__loading_itmop {
+    width: 100%;
+    aspect-ratio: 16/9;
+    background-color: var(--color-static-neutral-translucent-100-inverted);
+    border-radius: var(--border-radius-24);
+    align-items: center;
 }
-.gallery__video_gnw2e {
+.gallery__video_itmop {
     max-width: 100%;
     max-height: 100%;
     -o-object-fit: contain;
        object-fit: contain;
     border-radius: var(--border-radius-24);
 }
-.gallery__mobile_gnw2e {
+.gallery__mobile_itmop {
     border-radius: var(--border-radius-0);
 }
-.gallery__videoButton_gnw2e {
+.gallery__videoButton_itmop {
     position: absolute;
     top: 50%;
     left: 50%;
@@ -34,13 +46,13 @@
     z-index: 1;
     color: green;
 }
-.gallery__icon_gnw2e {
+.gallery__icon_itmop {
     color: var(--color-static-neutral-0);
 }
-.gallery__iconShape_gnw2e {
+.gallery__iconShape_itmop {
     fill: var(--color-static-neutral-translucent-700);
 }
-.gallery__bottomButton_gnw2e {
+.gallery__bottomButton_itmop {
     position: absolute;
     bottom: 48px;
     left: 32px;

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

@@ -1,5 +1,5 @@
 import { __awaiter, __spreadArray, __generator } from 'tslib';
-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/esm/circle';
 import PlayCompactMIcon from '@alfalab/icons-glyph/PlayCompactMIcon';
@@ -9,12 +9,15 @@ import { Subtitles } from '../../subtitles/index.js';
 import styles from './index.module.css.js';
 
 var Video = function (_a) {
-    var _b;
+    var _b, _c;
     var url = _a.url, index = _a.index, className = _a.className, isActive = _a.isActive;
+    var _d = useState(false), videoLoaded = _d[0], setVideoLoaded = _d[1];
     var playerRef = useRef(null);
     var timer = useRef();
-    var _c = useState(true), hlsSupported = _c[0], setHlsSupported = _c[1];
-    var _d = useContext(GalleryContext), setImageMeta = _d.setImageMeta, mutedVideo = _d.mutedVideo, view = _d.view, playingVideo = _d.playingVideo, setPlayingVideo = _d.setPlayingVideo, setHideNavigation = _d.setHideNavigation, getCurrentImage = _d.getCurrentImage;
+    var _e = useState(true), hlsSupported = _e[0], setHlsSupported = _e[1];
+    var abortController = useRef(new AbortController());
+    var _f = useState(false), videoError = _f[0], setVideoError = _f[1];
+    var _g = useContext(GalleryContext), setImageMeta = _g.setImageMeta, mutedVideo = _g.mutedVideo, view = _g.view, playingVideo = _g.playingVideo, setPlayingVideo = _g.setPlayingVideo, setHideNavigation = _g.setHideNavigation, getCurrentImage = _g.getCurrentImage;
     var isMobile = view === 'mobile';
     var isDesktop = view === 'desktop';
     var image = getCurrentImage();
@@ -62,6 +65,36 @@ var Video = function (_a) {
             });
         });
     }, [setImageMeta, index]);
+    useEffect(function () { return function () { return abortController.current.abort(); }; }, []);
+    useEffect(function () {
+        var video = playerRef.current;
+        if (!video) {
+            return;
+        }
+        var signal = abortController.current.signal;
+        var handleCanPlay = function () {
+            setVideoLoaded(true);
+            setVideoError(false);
+            setImageMeta({
+                player: playerRef,
+                width: video.videoWidth || 1920,
+                height: video.videoHeight || 1080,
+                loaded: true,
+            }, index);
+        };
+        var handleError = function () {
+            setVideoError(true);
+            setVideoLoaded(false);
+            setImageMeta({ player: { current: null }, broken: true, loaded: true }, index);
+        };
+        var handleLoadStart = function () {
+            setVideoLoaded(false);
+            setVideoError(false);
+        };
+        video.addEventListener('canplay', handleCanPlay, { signal: signal });
+        video.addEventListener('error', handleError, { signal: signal });
+        video.addEventListener('loadstart', handleLoadStart, { signal: signal });
+    }, [setImageMeta, index]);
     useEffect(function () {
         var hls = null;
         var initHls = function () { return __awaiter(void 0, void 0, void 0, function () {
@@ -137,8 +170,11 @@ var Video = function (_a) {
         }
     }, [isActive, playingVideo]);
     useEffect(function () {
+        var signal = abortController.current.signal;
         var handleSpacePress = function (e) {
             if ((e.key === ' ' || e.code === 'Space') && isActive) {
+                e.preventDefault();
+                e.stopPropagation();
                 if (playingVideo) {
                     setPlayingVideo(false);
                 }
@@ -147,10 +183,7 @@ var Video = function (_a) {
                 }
             }
         };
-        document.addEventListener('keyup', handleSpacePress);
-        return function () {
-            document.removeEventListener('keyup', handleSpacePress);
-        };
+        document.addEventListener('keydown', handleSpacePress, { signal: signal });
     }, [isActive, playingVideo, setPlayingVideo]);
     var handleWrapperClick = function (e) {
         e.stopPropagation();
@@ -164,9 +197,10 @@ var Video = function (_a) {
                     setHideNavigation(true);
                 }, 3000);
             }
-            return;
         }
-        setPlayingVideo(!playingVideo);
+        else {
+            setPlayingVideo(!playingVideo);
+        }
     };
     var handleBottomButtonClick = useCallback(function (e) {
         e.stopPropagation();
@@ -193,16 +227,17 @@ var Video = function (_a) {
         }
         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 },
-        React.createElement("video", { onPlay: onPlay, onPause: onPause, ref: playerRef, playsInline: true, muted: mutedVideo, loop: true, src: hlsSupported ? undefined : url, className: cn(styles.video, (_b = {}, _b[styles.mobile] = view === 'mobile', _b), className) },
+    return (React.createElement("div", { "aria-hidden": true, onClick: handleWrapperClick, "data-content-area": 'true', className: cn(styles.videoWrapper, (_b = {},
+            _b[styles.loading] = !videoLoaded && !videoError,
+            _b[styles.mobileWrapper] = isMobile,
+            _b)) },
+        React.createElement("video", { onPlay: onPlay, onPause: onPause, ref: playerRef, playsInline: true, muted: mutedVideo, loop: true, src: hlsSupported ? undefined : url, className: cn(styles.video, (_c = {}, _c[styles.mobile] = view === 'mobile', _c), 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 === null || image === void 0 ? void 0 : image.bottomButton) && (React.createElement(BottomButton, { bottomButton: image.bottomButton, onClick: handleBottomButtonClick, className: styles.bottomButton }))));
+        isDesktop && (image === null || image === void 0 ? void 0 : image.bottomButton) && videoLoaded && (React.createElement(BottomButton, { bottomButton: image.bottomButton, onClick: handleBottomButtonClick, className: styles.bottomButton }))));
 };
 
 export { Video };

package/esm/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/esm/components/image-viewer/video/index.module.css.js

@@ -1,6 +1,6 @@
 import './index.css';
 
-var 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"};
+var styles = {"videoWrapper":"gallery__videoWrapper_itmop","mobileWrapper":"gallery__mobileWrapper_itmop","loading":"gallery__loading_itmop","video":"gallery__video_itmop","mobile":"gallery__mobile_itmop","videoButton":"gallery__videoButton_itmop","icon":"gallery__icon_itmop","iconShape":"gallery__iconShape_itmop","bottomButton":"gallery__bottomButton_itmop"};
 
 export { styles as default };
 //# sourceMappingURL=index.module.css.js.map

package/esm/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,aAAe,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,aAAe,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/esm/components/info-bar/Component.js

@@ -3,6 +3,7 @@ import cn from 'classnames';
 import { TypographyText } from '@alfalab/core-components-typography/esm';
 import { GalleryContext } from '../../context.js';
 import { isVideo } from '../../utils/utils.js';
+import 'tslib';
 import { Pause, Play, UnmuteVideo, MuteVideo } from '../buttons/index.js';
 import styles from './index.module.css.js';
 

package/esm/components/info-bar/Component.js.map

@@ -1 +1 @@
-{"version":3,"file":"Component.js","sources":["../../../src/components/info-bar/Component.tsx"],"sourcesContent":["import React, { useCallback, useContext } from 'react';\nimport cn from 'classnames';\n\nimport { TypographyText } from '@alfalab/core-components-typography';\n\nimport { GalleryContext } from '../../context';\nimport { isVideo } from '../../utils';\nimport * as Buttons from '../buttons';\n\nimport styles from './index.module.css';\n\nexport const InfoBar = () => {\n    const { getCurrentImage, mutedVideo, setMutedVideo, playingVideo, setPlayingVideo } =\n        useContext(GalleryContext);\n\n    const image = getCurrentImage();\n\n    const handleMuteVideo = useCallback(() => {\n        if (image) {\n            if (mutedVideo && image.onUnmute) {\n                image.onUnmute();\n            } else if (image.onMute) {\n                image.onMute();\n            }\n        }\n        setMutedVideo(!mutedVideo);\n    }, [image, mutedVideo, setMutedVideo]);\n\n    const handlePlayVideo = useCallback(() => {\n        setPlayingVideo(!playingVideo);\n    }, [playingVideo, setPlayingVideo]);\n\n    return isVideo(image?.src) ? (\n        <section className={cn(styles.infoWrapper, styles.video)}>\n            {playingVideo ? (\n                <Buttons.Pause onClick={handlePlayVideo} />\n            ) : (\n                <Buttons.Play onClick={handlePlayVideo} />\n            )}\n            <TypographyText\n                className={styles.description}\n                tag='div'\n                view='component-primary'\n                color='static-primary-light'\n            >\n                {image?.name}\n            </TypographyText>\n            {mutedVideo ? (\n                <Buttons.UnmuteVideo onClick={handleMuteVideo} />\n            ) : (\n                <Buttons.MuteVideo onClick={handleMuteVideo} />\n            )}\n        </section>\n    ) : (\n        <section className={styles.infoWrapper}>\n            <TypographyText\n                className={styles.description}\n                tag='div'\n                view='component-primary'\n                color='static-primary-light'\n            >\n                {image?.name}\n            </TypographyText>\n        </section>\n    );\n};\n"],"names":["Buttons.Pause","Buttons.Play","Buttons.UnmuteVideo","Buttons.MuteVideo"],"mappings":";;;;;;;;AAWa,IAAA,OAAO,GAAG,YAAA;IACb,IAAA,EAAA,GACF,UAAU,CAAC,cAAc,CAAC,EADtB,eAAe,qBAAA,EAAE,UAAU,gBAAA,EAAE,aAAa,mBAAA,EAAE,YAAY,kBAAA,EAAE,eAAe,qBACnD;AAE9B,IAAA,IAAM,KAAK,GAAG,eAAe,EAAE;IAE/B,IAAM,eAAe,GAAG,WAAW,CAAC,YAAA;QAChC,IAAI,KAAK,EAAE;AACP,YAAA,IAAI,UAAU,IAAI,KAAK,CAAC,QAAQ,EAAE;gBAC9B,KAAK,CAAC,QAAQ,EAAE;;AACb,iBAAA,IAAI,KAAK,CAAC,MAAM,EAAE;gBACrB,KAAK,CAAC,MAAM,EAAE;;;AAGtB,QAAA,aAAa,CAAC,CAAC,UAAU,CAAC;KAC7B,EAAE,CAAC,KAAK,EAAE,UAAU,EAAE,aAAa,CAAC,CAAC;IAEtC,IAAM,eAAe,GAAG,WAAW,CAAC,YAAA;AAChC,QAAA,eAAe,CAAC,CAAC,YAAY,CAAC;AAClC,KAAC,EAAE,CAAC,YAAY,EAAE,eAAe,CAAC,CAAC;IAEnC,OAAO,OAAO,CAAC,KAAK,KAAL,IAAA,IAAA,KAAK,KAAL,MAAA,GAAA,MAAA,GAAA,KAAK,CAAE,GAAG,CAAC,IACtB,KAAS,CAAA,aAAA,CAAA,SAAA,EAAA,EAAA,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,WAAW,EAAE,MAAM,CAAC,KAAK,CAAC,EAAA;QACnD,YAAY,IACT,KAAA,CAAA,aAAA,CAACA,KAAa,EAAA,EAAC,OAAO,EAAE,eAAe,EAAA,CAAI,KAE3C,KAAA,CAAA,aAAA,CAACC,IAAY,EAAA,EAAC,OAAO,EAAE,eAAe,EAAA,CAAI,CAC7C;QACD,KAAC,CAAA,aAAA,CAAA,cAAc,EACX,EAAA,SAAS,EAAE,MAAM,CAAC,WAAW,EAC7B,GAAG,EAAC,KAAK,EACT,IAAI,EAAC,mBAAmB,EACxB,KAAK,EAAC,sBAAsB,EAE3B,EAAA,KAAK,KAAL,IAAA,IAAA,KAAK,KAAL,MAAA,GAAA,MAAA,GAAA,KAAK,CAAE,IAAI,CACC;AAChB,QAAA,UAAU,IACP,KAAA,CAAA,aAAA,CAACC,WAAmB,EAAC,EAAA,OAAO,EAAE,eAAe,EAAA,CAAI,KAEjD,KAAA,CAAA,aAAA,CAACC,SAAiB,EAAC,EAAA,OAAO,EAAE,eAAe,EAAA,CAAI,CAClD,CACK,KAEV,KAAA,CAAA,aAAA,CAAA,SAAA,EAAA,EAAS,SAAS,EAAE,MAAM,CAAC,WAAW,EAAA;AAClC,QAAA,KAAA,CAAA,aAAA,CAAC,cAAc,EAAA,EACX,SAAS,EAAE,MAAM,CAAC,WAAW,EAC7B,GAAG,EAAC,KAAK,EACT,IAAI,EAAC,mBAAmB,EACxB,KAAK,EAAC,sBAAsB,EAE3B,EAAA,KAAK,KAAL,IAAA,IAAA,KAAK,KAAL,MAAA,GAAA,MAAA,GAAA,KAAK,CAAE,IAAI,CACC,CACX,CACb;AACL;;;;"}
+{"version":3,"file":"Component.js","sources":["../../../src/components/info-bar/Component.tsx"],"sourcesContent":["import React, { useCallback, useContext } from 'react';\nimport cn from 'classnames';\n\nimport { TypographyText } from '@alfalab/core-components-typography';\n\nimport { GalleryContext } from '../../context';\nimport { isVideo } from '../../utils';\nimport * as Buttons from '../buttons';\n\nimport styles from './index.module.css';\n\nexport const InfoBar = () => {\n    const { getCurrentImage, mutedVideo, setMutedVideo, playingVideo, setPlayingVideo } =\n        useContext(GalleryContext);\n\n    const image = getCurrentImage();\n\n    const handleMuteVideo = useCallback(() => {\n        if (image) {\n            if (mutedVideo && image.onUnmute) {\n                image.onUnmute();\n            } else if (image.onMute) {\n                image.onMute();\n            }\n        }\n        setMutedVideo(!mutedVideo);\n    }, [image, mutedVideo, setMutedVideo]);\n\n    const handlePlayVideo = useCallback(() => {\n        setPlayingVideo(!playingVideo);\n    }, [playingVideo, setPlayingVideo]);\n\n    return isVideo(image?.src) ? (\n        <section className={cn(styles.infoWrapper, styles.video)}>\n            {playingVideo ? (\n                <Buttons.Pause onClick={handlePlayVideo} />\n            ) : (\n                <Buttons.Play onClick={handlePlayVideo} />\n            )}\n            <TypographyText\n                className={styles.description}\n                tag='div'\n                view='component-primary'\n                color='static-primary-light'\n            >\n                {image?.name}\n            </TypographyText>\n            {mutedVideo ? (\n                <Buttons.UnmuteVideo onClick={handleMuteVideo} />\n            ) : (\n                <Buttons.MuteVideo onClick={handleMuteVideo} />\n            )}\n        </section>\n    ) : (\n        <section className={styles.infoWrapper}>\n            <TypographyText\n                className={styles.description}\n                tag='div'\n                view='component-primary'\n                color='static-primary-light'\n            >\n                {image?.name}\n            </TypographyText>\n        </section>\n    );\n};\n"],"names":["Buttons.Pause","Buttons.Play","Buttons.UnmuteVideo","Buttons.MuteVideo"],"mappings":";;;;;;;;;AAWa,IAAA,OAAO,GAAG,YAAA;IACb,IAAA,EAAA,GACF,UAAU,CAAC,cAAc,CAAC,EADtB,eAAe,qBAAA,EAAE,UAAU,gBAAA,EAAE,aAAa,mBAAA,EAAE,YAAY,kBAAA,EAAE,eAAe,qBACnD;AAE9B,IAAA,IAAM,KAAK,GAAG,eAAe,EAAE;IAE/B,IAAM,eAAe,GAAG,WAAW,CAAC,YAAA;QAChC,IAAI,KAAK,EAAE;AACP,YAAA,IAAI,UAAU,IAAI,KAAK,CAAC,QAAQ,EAAE;gBAC9B,KAAK,CAAC,QAAQ,EAAE;;AACb,iBAAA,IAAI,KAAK,CAAC,MAAM,EAAE;gBACrB,KAAK,CAAC,MAAM,EAAE;;;AAGtB,QAAA,aAAa,CAAC,CAAC,UAAU,CAAC;KAC7B,EAAE,CAAC,KAAK,EAAE,UAAU,EAAE,aAAa,CAAC,CAAC;IAEtC,IAAM,eAAe,GAAG,WAAW,CAAC,YAAA;AAChC,QAAA,eAAe,CAAC,CAAC,YAAY,CAAC;AAClC,KAAC,EAAE,CAAC,YAAY,EAAE,eAAe,CAAC,CAAC;IAEnC,OAAO,OAAO,CAAC,KAAK,KAAL,IAAA,IAAA,KAAK,KAAL,MAAA,GAAA,MAAA,GAAA,KAAK,CAAE,GAAG,CAAC,IACtB,KAAS,CAAA,aAAA,CAAA,SAAA,EAAA,EAAA,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,WAAW,EAAE,MAAM,CAAC,KAAK,CAAC,EAAA;QACnD,YAAY,IACT,KAAA,CAAA,aAAA,CAACA,KAAa,EAAA,EAAC,OAAO,EAAE,eAAe,EAAA,CAAI,KAE3C,KAAA,CAAA,aAAA,CAACC,IAAY,EAAA,EAAC,OAAO,EAAE,eAAe,EAAA,CAAI,CAC7C;QACD,KAAC,CAAA,aAAA,CAAA,cAAc,EACX,EAAA,SAAS,EAAE,MAAM,CAAC,WAAW,EAC7B,GAAG,EAAC,KAAK,EACT,IAAI,EAAC,mBAAmB,EACxB,KAAK,EAAC,sBAAsB,EAE3B,EAAA,KAAK,KAAL,IAAA,IAAA,KAAK,KAAL,MAAA,GAAA,MAAA,GAAA,KAAK,CAAE,IAAI,CACC;AAChB,QAAA,UAAU,IACP,KAAA,CAAA,aAAA,CAACC,WAAmB,EAAC,EAAA,OAAO,EAAE,eAAe,EAAA,CAAI,KAEjD,KAAA,CAAA,aAAA,CAACC,SAAiB,EAAC,EAAA,OAAO,EAAE,eAAe,EAAA,CAAI,CAClD,CACK,KAEV,KAAA,CAAA,aAAA,CAAA,SAAA,EAAA,EAAS,SAAS,EAAE,MAAM,CAAC,WAAW,EAAA;AAClC,QAAA,KAAA,CAAA,aAAA,CAAC,cAAc,EAAA,EACX,SAAS,EAAE,MAAM,CAAC,WAAW,EAC7B,GAAG,EAAC,KAAK,EACT,IAAI,EAAC,mBAAmB,EACxB,KAAK,EAAC,sBAAsB,EAE3B,EAAA,KAAK,KAAL,IAAA,IAAA,KAAK,KAAL,MAAA,GAAA,MAAA,GAAA,KAAK,CAAE,IAAI,CACC,CACX,CACb;AACL;;;;"}

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

@@ -5,10 +5,10 @@
     --gap-4: 4px;
     --gap-8: 8px;
 }
-.gallery__description_2ekgy {
+.gallery__description_1v5e9 {
     text-align: center;
 }
-.gallery__infoWrapper_2ekgy {
+.gallery__infoWrapper_1v5e9 {
     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_1v5e9.gallery__video_1v5e9 {
         padding: 0 var(--gap-4) var(--gap-4);
         justify-content: space-between;
     }

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

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

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

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

package/esm/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/esm/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_9ethr {
     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_9ethr.gallery__mobile_9ethr {
+        padding: var(--gap-8);
     }
-.gallery__component_jvjzj::-webkit-scrollbar {
+.gallery__component_9ethr.gallery__dragging_9ethr {
+        cursor: grabbing;
+    }
+.gallery__component_9ethr.gallery__dragging_9ethr * {
+            cursor: grabbing;
+        }
+.gallery__component_9ethr::-webkit-scrollbar {
         display: none;
     }
-.gallery__previews_jvjzj {
+.gallery__previews_9ethr {
     display: flex;
 }
-.gallery__preview_jvjzj {
+.gallery__preview_9ethr {
     flex-shrink: 0;
     margin-right: var(--gap-4);
 }
-.gallery__preview_jvjzj.gallery__mobile_jvjzj {
+.gallery__preview_9ethr.gallery__mobile_9ethr {
         margin-right: var(--gap-2);
     }
-.gallery__preview_jvjzj:first-child {
+.gallery__preview_9ethr:first-child {
         margin-left: auto;
     }
-.gallery__preview_jvjzj:last-child {
+.gallery__preview_9ethr:last-child {
         margin-right: auto;
     }