@alfalab/core-components-gallery 7.0.6 → 7.1.0

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

@@ -1,6 +1,6 @@
-import React, { useRef, useContext, useEffect, useCallback } from 'react';
+import { __awaiter, __spreadArray, __generator } from 'tslib';
+import React, { useRef, useState, useContext, useEffect, useCallback } from 'react';
 import cn from 'classnames';
-import Hls from 'hls.js';
 import { Circle } from '@alfalab/core-components-icon-view/esm/circle';
 import PlayCompactMIcon from '@alfalab/icons-glyph/PlayCompactMIcon';
 import { GalleryContext } from '../../../context.js';
@@ -13,7 +13,8 @@ var Video = function (_a) {
     var url = _a.url, index = _a.index, className = _a.className, isActive = _a.isActive;
     var playerRef = useRef(null);
     var timer = useRef();
-    var _c = useContext(GalleryContext), setImageMeta = _c.setImageMeta, mutedVideo = _c.mutedVideo, view = _c.view, playingVideo = _c.playingVideo, setPlayingVideo = _c.setPlayingVideo, setHideNavigation = _c.setHideNavigation, getCurrentImage = _c.getCurrentImage;
+    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 isMobile = view === 'mobile';
     var isDesktop = view === 'desktop';
     var image = getCurrentImage();
@@ -21,30 +22,96 @@ var Video = function (_a) {
         setImageMeta({ player: playerRef }, index);
         /* eslint-disable-next-line react-hooks/exhaustive-deps */
     }, [index]);
+    var loadHlsLibrary = useCallback(function () {
+        var args_1 = [];
+        for (var _i = 0; _i < arguments.length; _i++) {
+            args_1[_i] = arguments[_i];
+        }
+        return __awaiter(void 0, __spreadArray([], args_1, true), void 0, function (attempt, maxAttempts) {
+            var HlsLib;
+            if (attempt === void 0) { attempt = 1; }
+            if (maxAttempts === void 0) { maxAttempts = 3; }
+            return __generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0:
+                        _b.trys.push([0, 2, , 5]);
+                        return [4 /*yield*/, import(
+                            /* webpackChunkName: "hls-js-gallery" */ 'hls.js')];
+                    case 1:
+                        HlsLib = (_b.sent()).default;
+                        return [2 /*return*/, HlsLib];
+                    case 2:
+                        _b.sent();
+                        if (!(attempt < maxAttempts)) return [3 /*break*/, 4];
+                        /* Экспоненциальная задержка ретрая: 300ms, 600ms, 1200ms */
+                        return [4 /*yield*/, new Promise(function (resolve) {
+                                setTimeout(function () {
+                                    resolve();
+                                }, 300 * Math.pow(2, (attempt - 1)));
+                            })];
+                    case 3:
+                        /* Экспоненциальная задержка ретрая: 300ms, 600ms, 1200ms */
+                        _b.sent();
+                        return [2 /*return*/, loadHlsLibrary(attempt + 1, maxAttempts)];
+                    case 4:
+                        setHlsSupported(false);
+                        setImageMeta({ player: { current: null }, broken: true }, index);
+                        return [2 /*return*/, null];
+                    case 5: return [2 /*return*/];
+                }
+            });
+        });
+    }, [setImageMeta, index]);
     useEffect(function () {
-        var hls = new Hls();
-        if (Hls.isSupported()) {
-            hls.on(Hls.Events.ERROR, function (_, data) {
-                if (data.fatal) {
-                    switch (data.type) {
-                        case Hls.ErrorTypes.MEDIA_ERROR:
-                            hls.recoverMediaError();
-                            break;
-                        case Hls.ErrorTypes.NETWORK_ERROR:
-                            setImageMeta({ player: { current: null }, broken: true }, index);
-                            break;
-                        default:
-                            hls.destroy();
-                            break;
-                    }
+        var hls = null;
+        var initHls = function () { return __awaiter(void 0, void 0, void 0, function () {
+            var HlsLib_1;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0:
+                        _b.trys.push([0, 2, , 3]);
+                        return [4 /*yield*/, loadHlsLibrary()];
+                    case 1:
+                        HlsLib_1 = _b.sent();
+                        if (!HlsLib_1 || !playerRef.current) {
+                            return [2 /*return*/];
+                        }
+                        if (!HlsLib_1.isSupported()) {
+                            setHlsSupported(false);
+                            return [2 /*return*/];
+                        }
+                        hls = new HlsLib_1();
+                        hls.on(HlsLib_1.Events.ERROR, function (_, data) {
+                            if (data.fatal && hls) {
+                                switch (data.type) {
+                                    case HlsLib_1.ErrorTypes.MEDIA_ERROR:
+                                        hls.recoverMediaError();
+                                        break;
+                                    case HlsLib_1.ErrorTypes.NETWORK_ERROR:
+                                        setImageMeta({ player: { current: null }, broken: true }, index);
+                                        break;
+                                    default:
+                                        hls.destroy();
+                                        break;
+                                }
+                            }
+                        });
+                        hls.loadSource(url);
+                        if (playerRef.current) {
+                            hls.attachMedia(playerRef.current);
+                            hls.subtitleDisplay = false;
+                        }
+                        return [3 /*break*/, 3];
+                    case 2:
+                        _b.sent();
+                        setHlsSupported(false);
+                        setImageMeta({ player: { current: null }, broken: true }, index);
+                        return [3 /*break*/, 3];
+                    case 3: return [2 /*return*/];
                 }
             });
-            hls.loadSource(url);
-            if (playerRef.current) {
-                hls.attachMedia(playerRef.current);
-                hls.subtitleDisplay = false;
-            }
-        }
+        }); };
+        initHls();
         return function () {
             if (hls) {
                 hls.destroy();
@@ -129,7 +196,7 @@ var Video = function (_a) {
     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: Hls.isSupported() ? undefined : url, className: cn(styles.video, (_b = {}, _b[styles.mobile] = view === 'mobile', _b), className) },
+        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) },
             React.createElement("track", { kind: 'captions' })),
         isDesktop && !playingVideo && (React.createElement("div", { className: styles.videoButton },
             React.createElement(Circle, { size: 64, shapeClassName: styles.iconShape },

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} from 'react';\nimport cn from 'classnames';\nimport 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\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    useEffect(() => {\n        const hls = new Hls();\n\n        if (Hls.isSupported()) {\n            hls.on(Hls.Events.ERROR, (_, data) => {\n                if (data.fatal) {\n                    switch (data.type) {\n                        case Hls.ErrorTypes.MEDIA_ERROR:\n                            hls.recoverMediaError();\n                            break;\n                        case Hls.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            if (playerRef.current) {\n                hls.attachMedia(playerRef.current);\n                hls.subtitleDisplay = false;\n            }\n        }\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={Hls.isSupported() ? 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 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":";;;;;;;;;;AA4BO,IAAM,KAAK,GAAG,UAAC,EAA0C,EAAA;;QAAxC,GAAG,GAAA,EAAA,CAAA,GAAA,EAAE,KAAK,GAAA,EAAA,CAAA,KAAA,EAAE,SAAS,GAAA,EAAA,CAAA,SAAA,EAAE,QAAQ,GAAA,EAAA,CAAA,QAAA;AACnD,IAAA,IAAM,SAAS,GAAG,MAAM,CAAmB,IAAI,CAAC;AAChD,IAAA,IAAM,KAAK,GAAG,MAAM,EAAiC;IAC/C,IAAA,EAAA,GAAkC,QAAQ,CAAU,IAAI,CAAC,EAAxD,YAAY,GAAA,EAAA,CAAA,CAAA,CAAA,EAAE,eAAe,GAAA,EAAA,CAAA,CAAA,CAA2B;IAEzD,IAAA,EAAA,GAQF,UAAU,CAAC,cAAc,CAAC,EAP1B,YAAY,GAAA,EAAA,CAAA,YAAA,EACZ,UAAU,GAAA,EAAA,CAAA,UAAA,EACV,IAAI,UAAA,EACJ,YAAY,GAAA,EAAA,CAAA,YAAA,EACZ,eAAe,GAAA,EAAA,CAAA,eAAA,EACf,iBAAiB,GAAA,EAAA,CAAA,iBAAA,EACjB,eAAe,GAAA,EAAA,CAAA,eACW;AAE9B,IAAA,IAAM,QAAQ,GAAG,IAAI,KAAK,QAAQ;AAClC,IAAA,IAAM,SAAS,GAAG,IAAI,KAAK,SAAS;AAEpC,IAAA,IAAM,KAAK,GAAG,eAAe,EAAE;AAE/B,IAAA,SAAS,CAAC,YAAA;QACN,YAAY,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE,KAAK,CAAC;;AAE9C,KAAC,EAAE,CAAC,KAAK,CAAC,CAAC;IAEX,IAAM,cAAc,GAAG,WAAW,CAC9B,YAAA;;;;;AAAO,QAAA,OAAA,SAAA,CAAA,MAAA,EAAA,aAAA,CAAA,EAAA,EAAA,MAAA,EAAA,IAAA,CAAA,EAAA,MAAA,EAAA,UAAA,OAAW,EAAE,WAAe,EAAA;;AAA5B,YAAA,IAAA,OAAA,KAAA,MAAA,EAAA,EAAA,OAAW,GAAA,CAAA,CAAA;AAAE,YAAA,IAAA,WAAA,KAAA,MAAA,EAAA,EAAA,WAAe,GAAA,CAAA,CAAA;;;;;AAEC,wBAAA,OAAA,CAAA,CAAA,YAAM;qEACW,QAAQ,CACpD,CAAA;;AAFgB,wBAAA,MAAM,GAAK,CAAA,EAE3B,CAAA,IAAA,EAAA,EAFsB,OAAA;AAIvB,wBAAA,OAAA,CAAA,CAAA,aAAO,MAAM,CAAC;;;AAEV,wBAAA,IAAA,EAAA,OAAO,GAAG,WAAW,CAAA,EAArB,OAAqB,CAAA,CAAA,YAAA,CAAA,CAAA;;AAErB,wBAAA,OAAA,CAAA,CAAA,YAAM,IAAI,OAAO,CAAO,UAAC,OAAO,EAAA;AAC5B,gCAAA,UAAU,CACN,YAAA;AACI,oCAAA,OAAO,EAAE;AACb,iCAAC,EACD,GAAG,GAAG,IAAA,CAAA,GAAA,CAAA,CAAC,GAAK,OAAO,GAAG,CAAC,EAAC,CAC3B;AACL,6BAAC,CAAC,CAAA;;;AAPF,wBAAA,EAAA,CAAA,IAAA,EAOE;wBAEF,OAAO,CAAA,CAAA,aAAA,cAAc,CAAC,OAAO,GAAG,CAAC,EAAE,WAAW,CAAC,CAAC;;wBAGpD,eAAe,CAAC,KAAK,CAAC;AACtB,wBAAA,YAAY,CAAC,EAAE,MAAM,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,EAAE,KAAK,CAAC;AAEhE,wBAAA,OAAA,CAAA,CAAA,aAAO,IAAI,CAAC;;;;;AAEnB,KAAA,EACD,CAAC,YAAY,EAAE,KAAK,CAAC,CACxB;AAED,IAAA,SAAS,CAAC,YAAA;QACN,IAAI,GAAG,GAAe,IAAI;AAE1B,QAAA,IAAM,OAAO,GAAG,YAAA,EAAA,OAAA,SAAA,CAAA,MAAA,EAAA,MAAA,EAAA,MAAA,EAAA,YAAA;;;;;;wBAEO,OAAM,CAAA,CAAA,YAAA,cAAc,EAAE,CAAA;;AAA/B,wBAAA,QAAA,GAAS,EAAsB,CAAA,IAAA,EAAA;wBAErC,IAAI,CAAC,QAAM,IAAI,CAAC,SAAS,CAAC,OAAO,EAAE;4BAC/B,OAAO,CAAA,CAAA,YAAA;;AAGX,wBAAA,IAAI,CAAC,QAAM,CAAC,WAAW,EAAE,EAAE;4BACvB,eAAe,CAAC,KAAK,CAAC;4BAEtB,OAAO,CAAA,CAAA,YAAA;;AAGX,wBAAA,GAAG,GAAG,IAAI,QAAM,EAAE;AAElB,wBAAA,GAAG,CAAC,EAAE,CAAC,QAAM,CAAC,MAAM,CAAC,KAAK,EAAE,UAAC,CAAC,EAAE,IAAI,EAAA;AAChC,4BAAA,IAAI,IAAI,CAAC,KAAK,IAAI,GAAG,EAAE;AACnB,gCAAA,QAAQ,IAAI,CAAC,IAAI;AACb,oCAAA,KAAK,QAAM,CAAC,UAAU,CAAC,WAAW;wCAC9B,GAAG,CAAC,iBAAiB,EAAE;wCACvB;AACJ,oCAAA,KAAK,QAAM,CAAC,UAAU,CAAC,aAAa;AAChC,wCAAA,YAAY,CAAC,EAAE,MAAM,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,EAAE,KAAK,CAAC;wCAChE;AACJ,oCAAA;wCACI,GAAG,CAAC,OAAO,EAAE;wCACb;;;AAGhB,yBAAC,CAAC;AAEF,wBAAA,GAAG,CAAC,UAAU,CAAC,GAAG,CAAC;AAEnB,wBAAA,IAAI,SAAS,CAAC,OAAO,EAAE;AACnB,4BAAA,GAAG,CAAC,WAAW,CAAC,SAAS,CAAC,OAAO,CAAC;AAClC,4BAAA,GAAG,CAAC,eAAe,GAAG,KAAK;;;;;wBAG/B,eAAe,CAAC,KAAK,CAAC;AACtB,wBAAA,YAAY,CAAC,EAAE,MAAM,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,EAAE,KAAK,CAAC;;;;;aAEvE;AAED,QAAA,OAAO,EAAE;QAET,OAAO,YAAA;YACH,IAAI,GAAG,EAAE;gBACL,GAAG,CAAC,OAAO,EAAE;;AAEjB,YAAA,IAAI,KAAK,CAAC,OAAO,EAAE;AACf,gBAAA,YAAY,CAAC,KAAK,CAAC,OAAO,CAAC;;AAEnC,SAAC;;AAEL,KAAC,EAAE,CAAC,GAAG,EAAE,KAAK,CAAC,CAAC;AAEhB,IAAA,SAAS,CAAC,YAAA;AACN,QAAA,IAAI,SAAS,CAAC,OAAO,IAAI,QAAQ,EAAE;YAC/B,IAAI,YAAY,EAAE;AACd,gBAAA,SAAS,CAAC,OAAO,CAAC,IAAI,EAAE;;iBACrB;AACH,gBAAA,SAAS,CAAC,OAAO,CAAC,KAAK,EAAE;;;AAGjC,QAAA,IAAI,SAAS,CAAC,OAAO,IAAI,CAAC,QAAQ,EAAE;AAChC,YAAA,SAAS,CAAC,OAAO,CAAC,KAAK,EAAE;AACzB,YAAA,SAAS,CAAC,OAAO,CAAC,WAAW,GAAG,CAAC;;AAEzC,KAAC,EAAE,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC;AAE5B,IAAA,SAAS,CAAC,YAAA;QACN,IAAM,gBAAgB,GAAG,UAAC,CAAgB,EAAA;AACtC,YAAA,IAAI,CAAC,CAAC,CAAC,GAAG,KAAK,GAAG,IAAI,CAAC,CAAC,IAAI,KAAK,OAAO,KAAK,QAAQ,EAAE;gBACnD,IAAI,YAAY,EAAE;oBACd,eAAe,CAAC,KAAK,CAAC;;qBACnB;oBACH,eAAe,CAAC,IAAI,CAAC;;;AAGjC,SAAC;AAED,QAAA,QAAQ,CAAC,gBAAgB,CAAC,OAAO,EAAE,gBAAgB,CAAC;QAEpD,OAAO,YAAA;AACH,YAAA,QAAQ,CAAC,mBAAmB,CAAC,OAAO,EAAE,gBAAgB,CAAC;AAC3D,SAAC;KACJ,EAAE,CAAC,QAAQ,EAAE,YAAY,EAAE,eAAe,CAAC,CAAC;IAE7C,IAAM,kBAAkB,GAAG,UAAC,CAAa,EAAA;QACrC,CAAC,CAAC,eAAe,EAAE;QAEnB,IAAI,QAAQ,EAAE;YACV,iBAAiB,CAAC,KAAK,CAAC;YAExB,IAAI,YAAY,EAAE;AACd,gBAAA,IAAI,KAAK,CAAC,OAAO,EAAE;AACf,oBAAA,YAAY,CAAC,KAAK,CAAC,OAAO,CAAC;;AAE/B,gBAAA,KAAK,CAAC,OAAO,GAAG,UAAU,CAAC,YAAA;oBACvB,iBAAiB,CAAC,IAAI,CAAC;iBAC1B,EAAE,IAAI,CAAC;;YAGZ;;AAGJ,QAAA,eAAe,CAAC,CAAC,YAAY,CAAC;AAClC,KAAC;AAED,IAAA,IAAM,uBAAuB,GAAG,WAAW,CACvC,UAAC,CAAa,EAAA;QACV,CAAC,CAAC,eAAe,EAAE;QACnB,IAAI,KAAK,aAAL,KAAK,KAAA,MAAA,GAAA,MAAA,GAAL,KAAK,CAAE,YAAY,EAAE;AACrB,YAAA,KAAK,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,CAAC;;KAEpC,EACD,CAAC,KAAK,KAAL,IAAA,IAAA,KAAK,KAAL,MAAA,GAAA,MAAA,GAAA,KAAK,CAAE,YAAY,CAAC,CACxB;AAED,IAAA,IAAM,MAAM,GAAwC,YAAA;;QAChD,CAAA,EAAA,GAAA,KAAK,aAAL,KAAK,KAAA,MAAA,GAAA,MAAA,GAAL,KAAK,CAAE,MAAM,qDAAI;AAEjB,QAAA,IAAI,KAAK,CAAC,OAAO,EAAE;AACf,YAAA,YAAY,CAAC,KAAK,CAAC,OAAO,CAAC;;AAG/B,QAAA,KAAK,CAAC,OAAO,GAAG,UAAU,CAAC,YAAA;YACvB,iBAAiB,CAAC,IAAI,CAAC;SAC1B,EAAE,IAAI,CAAC;AACZ,KAAC;AAED,IAAA,IAAM,OAAO,GAAwC,YAAA;;QACjD,CAAA,EAAA,GAAA,KAAK,aAAL,KAAK,KAAA,MAAA,GAAA,MAAA,GAAL,KAAK,CAAE,OAAO,qDAAI;AAElB,QAAA,IAAI,KAAK,CAAC,OAAO,EAAE;AACf,YAAA,YAAY,CAAC,KAAK,CAAC,OAAO,CAAC;AAC3B,YAAA,KAAK,CAAC,OAAO,GAAG,SAAS;;QAG7B,iBAAiB,CAAC,KAAK,CAAC;AAC5B,KAAC;IAED;;IAEI,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,OAAO,EAAE,kBAAkB,EAAE,SAAS,EAAE,MAAM,CAAC,YAAY,EAAA;QAC5D,KACI,CAAA,aAAA,CAAA,OAAA,EAAA,EAAA,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,OAAO,EAChB,GAAG,EAAE,SAAS,EACd,WAAW,EAAE,IAAI,EACjB,KAAK,EAAE,UAAU,EACjB,IAAI,EAAE,IAAI,EACV,GAAG,EAAE,YAAY,GAAG,SAAS,GAAG,GAAG,EACnC,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,GAAA,EAAA,GAAA,EAAA,EAAI,EAAC,CAAA,MAAM,CAAC,MAAM,CAAG,GAAA,IAAI,KAAK,QAAQ,EAAI,EAAA,GAAA,SAAS,CAAC,EAAA;AAE9E,YAAA,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EAAO,IAAI,EAAC,UAAU,EAAA,CAAG,CACrB;QACP,SAAS,IAAI,CAAC,YAAY,KACvB,6BAAK,SAAS,EAAE,MAAM,CAAC,WAAW,EAAA;YAC9B,KAAC,CAAA,aAAA,CAAA,MAAM,EAAC,EAAA,IAAI,EAAE,EAAE,EAAE,cAAc,EAAE,MAAM,CAAC,SAAS,EAAA;gBAC9C,KAAC,CAAA,aAAA,CAAA,gBAAgB,EAAC,EAAA,SAAS,EAAE,MAAM,CAAC,IAAI,EAAA,CAAI,CACvC,CACP,CACT;QACA,SAAS,IAAI,KAAC,CAAA,aAAA,CAAA,SAAS,EAAG,IAAA,CAAA;AAC1B,QAAA,SAAS,KAAI,KAAK,KAAL,IAAA,IAAA,KAAK,uBAAL,KAAK,CAAE,YAAY,CAAA,KAC7B,KAAC,CAAA,aAAA,CAAA,YAAY,IACT,YAAY,EAAE,KAAK,CAAC,YAAY,EAChC,OAAO,EAAE,uBAAuB,EAChC,SAAS,EAAE,MAAM,CAAC,YAAY,EAAA,CAChC,CACL,CACC;AAEd;;;;"}

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

@@ -1,6 +1,6 @@
 import './index.css';
 
-var styles = {"videoWrapper":"gallery__videoWrapper_izbf6","video":"gallery__video_izbf6","mobile":"gallery__mobile_izbf6","videoButton":"gallery__videoButton_izbf6","icon":"gallery__icon_izbf6","iconShape":"gallery__iconShape_izbf6","bottomButton":"gallery__bottomButton_izbf6"};
+var styles = {"videoWrapper":"gallery__videoWrapper_c9p57","video":"gallery__video_c9p57","mobile":"gallery__mobile_c9p57","videoButton":"gallery__videoButton_c9p57","icon":"gallery__icon_c9p57","iconShape":"gallery__iconShape_c9p57","bottomButton":"gallery__bottomButton_c9p57"};
 
 export { styles as default };
 //# sourceMappingURL=index.module.css.js.map

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;AAChC,QAAA,IAAI,KAAK,EAAE;AACP,YAAA,IAAI,UAAU,IAAI,KAAK,CAAC,QAAQ,EAAE;gBAC9B,KAAK,CAAC,QAAQ,EAAE;AACnB;iBAAM,IAAI,KAAK,CAAC,MAAM,EAAE;gBACrB,KAAK,CAAC,MAAM,EAAE;AACjB;AACJ;AACD,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

@@ -7,10 +7,10 @@
     --gap-4: var(--gap-2xs);
     --gap-8: var(--gap-xs);
 }
-.gallery__description_1yae2 {
+.gallery__description_e4exg {
     text-align: center;
 }
-.gallery__infoWrapper_1yae2 {
+.gallery__infoWrapper_e4exg {
     background-color: var(--color-static-neutral-0-inverted);
     display: flex;
     align-items: center;
@@ -19,7 +19,7 @@
     position: relative;
     height: 48px;
 }
-.gallery__infoWrapper_1yae2.gallery__video_1yae2 {
+.gallery__infoWrapper_e4exg.gallery__video_e4exg {
         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_1yae2","infoWrapper":"gallery__infoWrapper_1yae2","video":"gallery__video_1yae2"};
+var styles = {"description":"gallery__description_e4exg","infoWrapper":"gallery__infoWrapper_e4exg","video":"gallery__video_e4exg"};
 
 export { styles as default };
 //# sourceMappingURL=index.module.css.js.map

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';\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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"}

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

@@ -13,7 +13,7 @@
     --gap-12: var(--gap-s);
     --gap-24: var(--gap-xl);
 }
-.gallery__component_m6zcb {
+.gallery__component_fhd2d {
     display: flex;
     flex-wrap: nowrap;
     align-content: center;
@@ -25,25 +25,25 @@
     scrollbar-width: none;
     background-color: var(--color-static-neutral-0-inverted);
 }
-.gallery__component_m6zcb.gallery__mobile_m6zcb {
+.gallery__component_fhd2d.gallery__mobile_fhd2d {
         padding: var(--gap-8) var(--gap-24);
     }
-.gallery__component_m6zcb::-webkit-scrollbar {
+.gallery__component_fhd2d::-webkit-scrollbar {
         display: none;
     }
-.gallery__previews_m6zcb {
+.gallery__previews_fhd2d {
     display: flex;
 }
-.gallery__preview_m6zcb {
+.gallery__preview_fhd2d {
     flex-shrink: 0;
     margin-right: var(--gap-4);
 }
-.gallery__preview_m6zcb.gallery__mobile_m6zcb {
+.gallery__preview_fhd2d.gallery__mobile_fhd2d {
         margin-right: var(--gap-2);
     }
-.gallery__preview_m6zcb:first-child {
+.gallery__preview_fhd2d:first-child {
         margin-left: auto;
     }
-.gallery__preview_m6zcb:last-child {
+.gallery__preview_fhd2d:last-child {
         margin-right: auto;
     }

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

@@ -1,6 +1,6 @@
 import './index.css';
 
-var styles = {"component":"gallery__component_m6zcb","mobile":"gallery__mobile_m6zcb","preview":"gallery__preview_m6zcb"};
+var styles = {"component":"gallery__component_fhd2d","mobile":"gallery__mobile_fhd2d","preview":"gallery__preview_fhd2d"};
 
 export { styles as default };
 //# sourceMappingURL=index.module.css.js.map

package/esm/components/subtitles/index.css

@@ -5,7 +5,7 @@
     --gap-16: var(--gap-m);
     --gap-32: var(--gap-2xl);
 }
-.gallery__subtitles_13dww {
+.gallery__subtitles_1yg4j {
     position: absolute;
     align-self: flex-end;
     padding: var(--gap-0) var(--gap-32);
@@ -18,10 +18,10 @@
         opacity 500ms ease-in-out,
         margin-bottom 270ms ease-in-out;
 }
-.gallery__subtitles_13dww.gallery__mobile_13dww {
+.gallery__subtitles_1yg4j.gallery__mobile_1yg4j {
         position: static;
         position: initial;
     }
-.gallery__hideSubtitles_13dww {
+.gallery__hideSubtitles_1yg4j {
     opacity: 0;
 }

package/esm/components/subtitles/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/subtitles/index.tsx"],"sourcesContent":["import React, { useContext } from 'react';\nimport cn from 'classnames';\n\nimport { Typography } from '@alfalab/core-components-typography';\n\nimport { GalleryContext } from '../../context';\nimport { useCustomSubtitles } from '../../hooks';\n\nimport styles from './index.module.css';\n\nexport const Subtitles = () => {\n    const { view } = useContext(GalleryContext);\n\n    const { showSub, currentSub } = useCustomSubtitles();\n\n    if (showSub) {\n        return (\n            <Typography.Text\n                className={cn(styles.subtitles, {\n                    [styles.hideSubtitles]: !showSub,\n                    [styles.mobile]: view === 'mobile',\n                })}\n                color='static-primary-light'\n            >\n                {currentSub}\n            </Typography.Text>\n        );\n    }\n\n    return null;\n};\n"],"names":[],"mappings":";;;;;;;AAUa,IAAA,SAAS,GAAG,YAAA;;AACb,IAAA,IAAA,IAAI,GAAK,UAAU,CAAC,cAAc,CAAC,KAA/B;IAEN,IAAA,EAAA,GAA0B,kBAAkB,EAAE,EAA5C,OAAO,GAAA,EAAA,CAAA,OAAA,EAAE,UAAU,GAAA,EAAA,CAAA,UAAyB;AAEpD,IAAA,IAAI,OAAO,EAAE;AACT,QAAA,QACI,KAAA,CAAA,aAAA,CAAC,UAAU,CAAC,IAAI,EAAA,EACZ,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,SAAS,GAAA,EAAA,GAAA,EAAA;AAC1B,gBAAA,EAAA,CAAC,MAAM,CAAC,aAAa,CAAA,GAAG,CAAC,OAAO;AAChC,gBAAA,EAAA,CAAC,MAAM,CAAC,MAAM,CAAG,GAAA,IAAI,KAAK,QAAQ;AACpC,gBAAA,EAAA,EAAA,EACF,KAAK,EAAC,sBAAsB,IAE3B,UAAU,CACG;AAEzB;AAED,IAAA,OAAO,IAAI;AACf;;;;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/subtitles/index.tsx"],"sourcesContent":["import React, { useContext } from 'react';\nimport cn from 'classnames';\n\nimport { Typography } from '@alfalab/core-components-typography';\n\nimport { GalleryContext } from '../../context';\nimport { useCustomSubtitles } from '../../hooks';\n\nimport styles from './index.module.css';\n\nexport const Subtitles = () => {\n    const { view } = useContext(GalleryContext);\n\n    const { showSub, currentSub } = useCustomSubtitles();\n\n    if (showSub) {\n        return (\n            <Typography.Text\n                className={cn(styles.subtitles, {\n                    [styles.hideSubtitles]: !showSub,\n                    [styles.mobile]: view === 'mobile',\n                })}\n                color='static-primary-light'\n            >\n                {currentSub}\n            </Typography.Text>\n        );\n    }\n\n    return null;\n};\n"],"names":[],"mappings":";;;;;;;AAUa,IAAA,SAAS,GAAG,YAAA;;AACb,IAAA,IAAA,IAAI,GAAK,UAAU,CAAC,cAAc,CAAC,KAA/B;IAEN,IAAA,EAAA,GAA0B,kBAAkB,EAAE,EAA5C,OAAO,GAAA,EAAA,CAAA,OAAA,EAAE,UAAU,GAAA,EAAA,CAAA,UAAyB;IAEpD,IAAI,OAAO,EAAE;AACT,QAAA,QACI,KAAA,CAAA,aAAA,CAAC,UAAU,CAAC,IAAI,EAAA,EACZ,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,SAAS,GAAA,EAAA,GAAA,EAAA;AAC1B,gBAAA,EAAA,CAAC,MAAM,CAAC,aAAa,CAAA,GAAG,CAAC,OAAO;AAChC,gBAAA,EAAA,CAAC,MAAM,CAAC,MAAM,CAAG,GAAA,IAAI,KAAK,QAAQ;AACpC,gBAAA,EAAA,EAAA,EACF,KAAK,EAAC,sBAAsB,IAE3B,UAAU,CACG;;AAI1B,IAAA,OAAO,IAAI;AACf;;;;"}

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

@@ -1,6 +1,6 @@
 import './index.css';
 
-var styles = {"subtitles":"gallery__subtitles_13dww","mobile":"gallery__mobile_13dww","hideSubtitles":"gallery__hideSubtitles_13dww"};
+var styles = {"subtitles":"gallery__subtitles_1yg4j","mobile":"gallery__mobile_1yg4j","hideSubtitles":"gallery__hideSubtitles_1yg4j"};
 
 export { styles as default };
 //# sourceMappingURL=index.module.css.js.map

package/esm/context.d.ts

@@ -1,7 +1,6 @@
-/// <reference types="react" />
 import type SwiperCore from 'swiper';
 import { type GalleryImage, type ImageMeta } from './types';
-export declare type GalleryContext = {
+export type GalleryContext = {
     view: 'desktop' | 'mobile';
     singleSlide: boolean;
     currentSlideIndex: number;

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

@@ -1 +1 @@
-{"version":3,"file":"use-custom-subtitles.js","sources":["../../src/hooks/use-custom-subtitles.ts"],"sourcesContent":["import { useContext, useEffect, useState } from 'react';\n\nimport { GalleryContext } from '../context';\n\nconst SUBTITLES_ANIMATION_SPEED = 0.5;\n\nexport const useCustomSubtitles = () => {\n    const { getCurrentImageMeta } = useContext(GalleryContext);\n\n    const meta = getCurrentImageMeta();\n\n    const [showSub, setShowSub] = useState(false);\n    const [currentSub, setCurrentSub] = useState('');\n\n    const player = meta?.player?.current;\n\n    useEffect(() => {\n        const intervalId = setInterval(() => {\n            if (!player) {\n                return;\n            }\n\n            const textTrack = [...(Array.from(player.textTracks) || [])].find(\n                (track) => track.kind === 'subtitles',\n            );\n            const activeCue = textTrack?.activeCues?.[0] as VTTCue | undefined;\n\n            if (!activeCue?.text) {\n                setShowSub(false);\n\n                return;\n            }\n\n            const isVisible =\n                player?.currentTime >= activeCue.startTime &&\n                player?.currentTime <= activeCue.endTime - SUBTITLES_ANIMATION_SPEED;\n\n            setCurrentSub(activeCue.text);\n            setShowSub(isVisible);\n        });\n\n        return () => {\n            clearInterval(intervalId);\n        };\n    }, [player]);\n\n    return {\n        showSub,\n        currentSub,\n    };\n};\n"],"names":[],"mappings":";;;;AAIA,IAAM,yBAAyB,GAAG,GAAG;AAExB,IAAA,kBAAkB,GAAG,YAAA;;AACtB,IAAA,IAAA,mBAAmB,GAAK,UAAU,CAAC,cAAc,CAAC,oBAA/B;AAE3B,IAAA,IAAM,IAAI,GAAG,mBAAmB,EAAE;IAE5B,IAAA,EAAA,GAAwB,QAAQ,CAAC,KAAK,CAAC,EAAtC,OAAO,GAAA,EAAA,CAAA,CAAA,CAAA,EAAE,UAAU,GAAA,EAAA,CAAA,CAAA,CAAmB;IACvC,IAAA,EAAA,GAA8B,QAAQ,CAAC,EAAE,CAAC,EAAzC,UAAU,GAAA,EAAA,CAAA,CAAA,CAAA,EAAE,aAAa,GAAA,EAAA,CAAA,CAAA,CAAgB;AAEhD,IAAA,IAAM,MAAM,GAAG,CAAA,EAAA,GAAA,IAAI,KAAJ,IAAA,IAAA,IAAI,KAAJ,MAAA,GAAA,MAAA,GAAA,IAAI,CAAE,MAAM,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,OAAO;AAEpC,IAAA,SAAS,CAAC,YAAA;QACN,IAAM,UAAU,GAAG,WAAW,CAAC,YAAA;;YAC3B,IAAI,CAAC,MAAM,EAAE;gBACT;AACH;AAED,YAAA,IAAM,SAAS,GAAG,aAAI,CAAA,EAAA,GAAC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,UAAU,CAAC,IAAI,EAAE,GAAG,IAAA,CAAA,CAAA,IAAI,CAC7D,UAAC,KAAK,EAAA,EAAK,OAAA,KAAK,CAAC,IAAI,KAAK,WAAW,CAA1B,EAA0B,CACxC;AACD,YAAA,IAAM,SAAS,GAAG,CAAA,EAAA,GAAA,SAAS,KAAT,IAAA,IAAA,SAAS,KAAT,MAAA,GAAA,MAAA,GAAA,SAAS,CAAE,UAAU,MAAG,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,CAAC,CAAuB;YAElE,IAAI,EAAC,SAAS,KAAT,IAAA,IAAA,SAAS,uBAAT,SAAS,CAAE,IAAI,CAAA,EAAE;gBAClB,UAAU,CAAC,KAAK,CAAC;gBAEjB;AACH;AAED,YAAA,IAAM,SAAS,GACX,CAAA,MAAM,KAAN,IAAA,IAAA,MAAM,KAAN,MAAA,GAAA,MAAA,GAAA,MAAM,CAAE,WAAW,KAAI,SAAS,CAAC,SAAS;AAC1C,gBAAA,CAAA,MAAM,KAAA,IAAA,IAAN,MAAM,KAAA,MAAA,GAAA,MAAA,GAAN,MAAM,CAAE,WAAW,KAAI,SAAS,CAAC,OAAO,GAAG,yBAAyB;AAExE,YAAA,aAAa,CAAC,SAAS,CAAC,IAAI,CAAC;YAC7B,UAAU,CAAC,SAAS,CAAC;AACzB,SAAC,CAAC;QAEF,OAAO,YAAA;YACH,aAAa,CAAC,UAAU,CAAC;AAC7B,SAAC;AACL,KAAC,EAAE,CAAC,MAAM,CAAC,CAAC;IAEZ,OAAO;AACH,QAAA,OAAO,EAAA,OAAA;AACP,QAAA,UAAU,EAAA,UAAA;KACb;AACL;;;;"}
+{"version":3,"file":"use-custom-subtitles.js","sources":["../../src/hooks/use-custom-subtitles.ts"],"sourcesContent":["import { useContext, useEffect, useState } from 'react';\n\nimport { GalleryContext } from '../context';\n\nconst SUBTITLES_ANIMATION_SPEED = 0.5;\n\nexport const useCustomSubtitles = () => {\n    const { getCurrentImageMeta } = useContext(GalleryContext);\n\n    const meta = getCurrentImageMeta();\n\n    const [showSub, setShowSub] = useState(false);\n    const [currentSub, setCurrentSub] = useState('');\n\n    const player = meta?.player?.current;\n\n    useEffect(() => {\n        const intervalId = setInterval(() => {\n            if (!player) {\n                return;\n            }\n\n            const textTrack = [...(Array.from(player.textTracks) || [])].find(\n                (track) => track.kind === 'subtitles',\n            );\n            const activeCue = textTrack?.activeCues?.[0] as VTTCue | undefined;\n\n            if (!activeCue?.text) {\n                setShowSub(false);\n\n                return;\n            }\n\n            const isVisible =\n                player?.currentTime >= activeCue.startTime &&\n                player?.currentTime <= activeCue.endTime - SUBTITLES_ANIMATION_SPEED;\n\n            setCurrentSub(activeCue.text);\n            setShowSub(isVisible);\n        });\n\n        return () => {\n            clearInterval(intervalId);\n        };\n    }, [player]);\n\n    return {\n        showSub,\n        currentSub,\n    };\n};\n"],"names":[],"mappings":";;;;AAIA,IAAM,yBAAyB,GAAG,GAAG;AAExB,IAAA,kBAAkB,GAAG,YAAA;;AACtB,IAAA,IAAA,mBAAmB,GAAK,UAAU,CAAC,cAAc,CAAC,oBAA/B;AAE3B,IAAA,IAAM,IAAI,GAAG,mBAAmB,EAAE;IAE5B,IAAA,EAAA,GAAwB,QAAQ,CAAC,KAAK,CAAC,EAAtC,OAAO,GAAA,EAAA,CAAA,CAAA,CAAA,EAAE,UAAU,GAAA,EAAA,CAAA,CAAA,CAAmB;IACvC,IAAA,EAAA,GAA8B,QAAQ,CAAC,EAAE,CAAC,EAAzC,UAAU,GAAA,EAAA,CAAA,CAAA,CAAA,EAAE,aAAa,GAAA,EAAA,CAAA,CAAA,CAAgB;AAEhD,IAAA,IAAM,MAAM,GAAG,CAAA,EAAA,GAAA,IAAI,KAAJ,IAAA,IAAA,IAAI,KAAJ,MAAA,GAAA,MAAA,GAAA,IAAI,CAAE,MAAM,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,OAAO;AAEpC,IAAA,SAAS,CAAC,YAAA;QACN,IAAM,UAAU,GAAG,WAAW,CAAC,YAAA;;YAC3B,IAAI,CAAC,MAAM,EAAE;gBACT;;AAGJ,YAAA,IAAM,SAAS,GAAG,aAAI,CAAA,EAAA,GAAC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,UAAU,CAAC,IAAI,EAAE,GAAG,IAAA,CAAA,CAAA,IAAI,CAC7D,UAAC,KAAK,EAAA,EAAK,OAAA,KAAK,CAAC,IAAI,KAAK,WAAW,CAA1B,EAA0B,CACxC;AACD,YAAA,IAAM,SAAS,GAAG,CAAA,EAAA,GAAA,SAAS,KAAT,IAAA,IAAA,SAAS,KAAT,MAAA,GAAA,MAAA,GAAA,SAAS,CAAE,UAAU,MAAG,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,CAAC,CAAuB;YAElE,IAAI,EAAC,SAAS,KAAT,IAAA,IAAA,SAAS,KAAT,MAAA,GAAA,MAAA,GAAA,SAAS,CAAE,IAAI,CAAA,EAAE;gBAClB,UAAU,CAAC,KAAK,CAAC;gBAEjB;;AAGJ,YAAA,IAAM,SAAS,GACX,CAAA,MAAM,KAAN,IAAA,IAAA,MAAM,KAAN,MAAA,GAAA,MAAA,GAAA,MAAM,CAAE,WAAW,KAAI,SAAS,CAAC,SAAS;AAC1C,gBAAA,CAAA,MAAM,KAAA,IAAA,IAAN,MAAM,KAAA,MAAA,GAAA,MAAA,GAAN,MAAM,CAAE,WAAW,KAAI,SAAS,CAAC,OAAO,GAAG,yBAAyB;AAExE,YAAA,aAAa,CAAC,SAAS,CAAC,IAAI,CAAC;YAC7B,UAAU,CAAC,SAAS,CAAC;AACzB,SAAC,CAAC;QAEF,OAAO,YAAA;YACH,aAAa,CAAC,UAAU,CAAC;AAC7B,SAAC;AACL,KAAC,EAAE,CAAC,MAAM,CAAC,CAAC;IAEZ,OAAO;AACH,QAAA,OAAO,EAAA,OAAA;AACP,QAAA,UAAU,EAAA,UAAA;KACb;AACL;;;;"}

package/esm/index.css

@@ -13,7 +13,7 @@
     --sat: env(safe-area-inset-top, var(--gap-0));
     --sab: env(safe-area-inset-bottom, var(--gap-0));
 }
-.gallery__container_j5zem {
+.gallery__container_83eok {
     position: relative;
     overflow-x: hidden;
     overflow-y: auto;
@@ -26,16 +26,16 @@
     padding-top: var(--sat);
     padding-bottom: var(--sab);
 }
-.gallery__container_j5zem.gallery__mobile_j5zem {
+.gallery__container_83eok.gallery__mobile_83eok {
         overflow: hidden;
     }
-.gallery__modal_j5zem {
+.gallery__modal_83eok {
     flex-grow: 1;
     width: 100vw;
     height: 100vh;
     background: transparent;
 }
-.gallery__navigationVideo_j5zem {
+.gallery__navigationVideo_83eok {
     z-index: 3;
     width: 100%;
     position: absolute;
@@ -44,18 +44,18 @@
     transition: transform 0.3s ease-in-out;
     text-align: center;
 }
-.gallery__hide_j5zem {
+.gallery__hide_83eok {
     transform: translateY(114px);
 }
-.gallery__hideInfo_j5zem {
+.gallery__hideInfo_83eok {
     transform: translateY(48px);
 }
-.gallery__bottomButton_j5zem {
+.gallery__bottomButton_83eok {
     width: calc(100% - var(--gap-32));
     margin: var(--gap-16);
     background-color: var(--color-static-neutral-translucent-500-inverted);
 }
-.gallery__subtitles_j5zem {
+.gallery__subtitles_83eok {
     padding: var(--gap-0) var(--gap-32);
     margin-bottom: var(--gap-16);
     width: 100%;
@@ -66,6 +66,6 @@
         opacity 500ms ease-in-out,
         margin-bottom 270ms ease-in-out;
 }
-.gallery__hideSubtitles_j5zem {
+.gallery__hideSubtitles_83eok {
     opacity: 0;
 }

package/esm/index.module.css.js

@@ -1,6 +1,6 @@
 import './index.css';
 
-var styles = {"container":"gallery__container_j5zem","mobile":"gallery__mobile_j5zem","modal":"gallery__modal_j5zem","navigationVideo":"gallery__navigationVideo_j5zem","hide":"gallery__hide_j5zem","hideInfo":"gallery__hideInfo_j5zem","bottomButton":"gallery__bottomButton_j5zem"};
+var styles = {"container":"gallery__container_83eok","mobile":"gallery__mobile_83eok","modal":"gallery__modal_83eok","navigationVideo":"gallery__navigationVideo_83eok","hide":"gallery__hide_83eok","hideInfo":"gallery__hideInfo_83eok","bottomButton":"gallery__bottomButton_83eok"};
 
 export { styles as default };
 //# sourceMappingURL=index.module.css.js.map

package/esm/types.d.ts

@@ -1,5 +1,5 @@
 import { type MouseEvent, type RefObject } from 'react';
-export declare type TBottomButton = {
+export type TBottomButton = {
     text: string;
     onClick: (e: MouseEvent) => void;
     /**
@@ -7,12 +7,13 @@ export declare type TBottomButton = {
      */
     timeout?: number;
 };
-export declare type GalleryImage = {
+export type GalleryImage = {
     src: string;
     name?: string;
     previewSrc?: string;
     alt?: string;
     canDownload?: boolean;
+    canShare?: boolean;
     /**
      * Нижняя кнопка, есть только у видео
      */
@@ -34,7 +35,7 @@ export declare type GalleryImage = {
      */
     onUnmute?: () => void;
 };
-export declare type ImageMeta = {
+export type ImageMeta = {
     width: number;
     height: number;
     broken?: boolean;

package/esm/utils/split-filename.js.map

@@ -1 +1 @@
-{"version":3,"file":"split-filename.js","sources":["../../src/utils/split-filename.ts"],"sourcesContent":["const SEPARATION_POSITION_SHIFT = 3;\n\nexport function splitFilename(filename: string): [string, string] {\n    const dotPosition = filename.lastIndexOf('.');\n\n    let head = filename;\n    let tail = '';\n\n    const splitPosition = dotPosition - SEPARATION_POSITION_SHIFT;\n\n    if (splitPosition > 0) {\n        head = filename.slice(0, splitPosition);\n        tail = filename.slice(splitPosition);\n    }\n\n    return [head, tail];\n}\n"],"names":[],"mappings":"AAAA,IAAM,yBAAyB,GAAG,CAAC;AAE7B,SAAU,aAAa,CAAC,QAAgB,EAAA;IAC1C,IAAM,WAAW,GAAG,QAAQ,CAAC,WAAW,CAAC,GAAG,CAAC;IAE7C,IAAI,IAAI,GAAG,QAAQ;IACnB,IAAI,IAAI,GAAG,EAAE;AAEb,IAAA,IAAM,aAAa,GAAG,WAAW,GAAG,yBAAyB;IAE7D,IAAI,aAAa,GAAG,CAAC,EAAE;QACnB,IAAI,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC,EAAE,aAAa,CAAC;AACvC,QAAA,IAAI,GAAG,QAAQ,CAAC,KAAK,CAAC,aAAa,CAAC;AACvC;AAED,IAAA,OAAO,CAAC,IAAI,EAAE,IAAI,CAAC;AACvB;;;;"}
+{"version":3,"file":"split-filename.js","sources":["../../src/utils/split-filename.ts"],"sourcesContent":["const SEPARATION_POSITION_SHIFT = 3;\n\nexport function splitFilename(filename: string): [string, string] {\n    const dotPosition = filename.lastIndexOf('.');\n\n    let head = filename;\n    let tail = '';\n\n    const splitPosition = dotPosition - SEPARATION_POSITION_SHIFT;\n\n    if (splitPosition > 0) {\n        head = filename.slice(0, splitPosition);\n        tail = filename.slice(splitPosition);\n    }\n\n    return [head, tail];\n}\n"],"names":[],"mappings":"AAAA,IAAM,yBAAyB,GAAG,CAAC;AAE7B,SAAU,aAAa,CAAC,QAAgB,EAAA;IAC1C,IAAM,WAAW,GAAG,QAAQ,CAAC,WAAW,CAAC,GAAG,CAAC;IAE7C,IAAI,IAAI,GAAG,QAAQ;IACnB,IAAI,IAAI,GAAG,EAAE;AAEb,IAAA,IAAM,aAAa,GAAG,WAAW,GAAG,yBAAyB;AAE7D,IAAA,IAAI,aAAa,GAAG,CAAC,EAAE;QACnB,IAAI,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC,EAAE,aAAa,CAAC;AACvC,QAAA,IAAI,GAAG,QAAQ,CAAC,KAAK,CAAC,aAAa,CAAC;;AAGxC,IAAA,OAAO,CAAC,IAAI,EAAE,IAAI,CAAC;AACvB;;;;"}

package/esm/utils/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sources":["../../src/utils/utils.ts"],"sourcesContent":["import { type GalleryImage, type ImageMeta } from '../types';\n\nexport const PLACEHOLDER_WIDTH = 400;\nexport const PLACEHOLDER_HEIGHT = 300;\n\nexport const getImageKey = ({ name = '', src }: GalleryImage, index: number): string =>\n    `${name}-${index}-${src}`;\n\nexport const getImageAlt = ({ alt, name }: GalleryImage, index: number): string =>\n    alt || name || `Изображение ${index + 1}`;\n\nexport const isSmallImage = (meta?: ImageMeta) => {\n    if (meta?.width && meta.height) {\n        return meta.width < PLACEHOLDER_WIDTH && meta.height < PLACEHOLDER_HEIGHT;\n    }\n\n    return false;\n};\n\nexport const isVideo = (url: string | undefined) =>\n    ['.webm', '.mp4', '.m3u8'].some((item) => url?.endsWith(item));\n"],"names":[],"mappings":"AAEO,IAAM,iBAAiB,GAAG;AAC1B,IAAM,kBAAkB,GAAG;AAErB,IAAA,WAAW,GAAG,UAAC,EAAgC,EAAE,KAAa,EAAA;AAA7C,IAAA,IAAA,EAAA,GAAA,EAAA,CAAA,IAAS,EAAT,IAAI,GAAA,EAAA,KAAA,MAAA,GAAG,EAAE,GAAA,EAAA,EAAE,GAAG,GAAA,EAAA,CAAA,GAAA;AACxC,IAAA,OAAA,UAAG,IAAI,EAAA,GAAA,CAAA,CAAA,MAAA,CAAI,KAAK,EAAA,GAAA,CAAA,CAAA,MAAA,CAAI,GAAG,CAAE;AAAzB;AAES,IAAA,WAAW,GAAG,UAAC,EAA2B,EAAE,KAAa,EAAA;QAAxC,GAAG,GAAA,EAAA,CAAA,GAAA,EAAE,IAAI,GAAA,EAAA,CAAA,IAAA;IACnC,OAAA,GAAG,IAAI,IAAI,IAAI,6EAAe,KAAK,GAAG,CAAC,CAAE;AAAzC;AAEG,IAAM,YAAY,GAAG,UAAC,IAAgB,EAAA;AACzC,IAAA,IAAI,CAAA,IAAI,KAAJ,IAAA,IAAA,IAAI,KAAJ,MAAA,GAAA,MAAA,GAAA,IAAI,CAAE,KAAK,KAAI,IAAI,CAAC,MAAM,EAAE;QAC5B,OAAO,IAAI,CAAC,KAAK,GAAG,iBAAiB,IAAI,IAAI,CAAC,MAAM,GAAG,kBAAkB;AAC5E;AAED,IAAA,OAAO,KAAK;AAChB;AAEO,IAAM,OAAO,GAAG,UAAC,GAAuB,EAAA;IAC3C,OAAA,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,CAAC,CAAC,IAAI,CAAC,UAAC,IAAI,EAAA,EAAK,OAAA,GAAG,KAAA,IAAA,IAAH,GAAG,KAAA,MAAA,GAAA,MAAA,GAAH,GAAG,CAAE,QAAQ,CAAC,IAAI,CAAC,CAAnB,EAAmB,CAAC;AAA9D;;;;"}
+{"version":3,"file":"utils.js","sources":["../../src/utils/utils.ts"],"sourcesContent":["import { type GalleryImage, type ImageMeta } from '../types';\n\nexport const PLACEHOLDER_WIDTH = 400;\nexport const PLACEHOLDER_HEIGHT = 300;\n\nexport const getImageKey = ({ name = '', src }: GalleryImage, index: number): string =>\n    `${name}-${index}-${src}`;\n\nexport const getImageAlt = ({ alt, name }: GalleryImage, index: number): string =>\n    alt || name || `Изображение ${index + 1}`;\n\nexport const isSmallImage = (meta?: ImageMeta) => {\n    if (meta?.width && meta.height) {\n        return meta.width < PLACEHOLDER_WIDTH && meta.height < PLACEHOLDER_HEIGHT;\n    }\n\n    return false;\n};\n\nexport const isVideo = (url: string | undefined) =>\n    ['.webm', '.mp4', '.m3u8'].some((item) => url?.endsWith(item));\n"],"names":[],"mappings":"AAEO,IAAM,iBAAiB,GAAG;AAC1B,IAAM,kBAAkB,GAAG;AAErB,IAAA,WAAW,GAAG,UAAC,EAAgC,EAAE,KAAa,EAAA;AAA7C,IAAA,IAAA,EAAA,GAAA,EAAA,CAAA,IAAS,EAAT,IAAI,GAAA,EAAA,KAAA,MAAA,GAAG,EAAE,GAAA,EAAA,EAAE,GAAG,GAAA,EAAA,CAAA,GAAA;AACxC,IAAA,OAAA,UAAG,IAAI,EAAA,GAAA,CAAA,CAAA,MAAA,CAAI,KAAK,EAAA,GAAA,CAAA,CAAA,MAAA,CAAI,GAAG,CAAE;AAAzB;AAES,IAAA,WAAW,GAAG,UAAC,EAA2B,EAAE,KAAa,EAAA;QAAxC,GAAG,GAAA,EAAA,CAAA,GAAA,EAAE,IAAI,GAAA,EAAA,CAAA,IAAA;IACnC,OAAA,GAAG,IAAI,IAAI,IAAI,6EAAe,KAAK,GAAG,CAAC,CAAE;AAAzC;AAEG,IAAM,YAAY,GAAG,UAAC,IAAgB,EAAA;AACzC,IAAA,IAAI,CAAA,IAAI,KAAJ,IAAA,IAAA,IAAI,KAAJ,MAAA,GAAA,MAAA,GAAA,IAAI,CAAE,KAAK,KAAI,IAAI,CAAC,MAAM,EAAE;QAC5B,OAAO,IAAI,CAAC,KAAK,GAAG,iBAAiB,IAAI,IAAI,CAAC,MAAM,GAAG,kBAAkB;;AAG7E,IAAA,OAAO,KAAK;AAChB;AAEO,IAAM,OAAO,GAAG,UAAC,GAAuB,EAAA;IAC3C,OAAA,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,CAAC,CAAC,IAAI,CAAC,UAAC,IAAI,EAAA,EAAK,OAAA,GAAG,KAAA,IAAA,IAAH,GAAG,KAAA,MAAA,GAAA,MAAA,GAAH,GAAG,CAAE,QAAQ,CAAC,IAAI,CAAC,CAAnB,EAAmB,CAAC;AAA9D;;;;"}

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

@@ -1 +1 @@
-{"version":3,"file":"use-custom-subtitles.js","sources":["../src/hooks/use-custom-subtitles.ts"],"sourcesContent":["import { useContext, useEffect, useState } from 'react';\n\nimport { GalleryContext } from '../context';\n\nconst SUBTITLES_ANIMATION_SPEED = 0.5;\n\nexport const useCustomSubtitles = () => {\n    const { getCurrentImageMeta } = useContext(GalleryContext);\n\n    const meta = getCurrentImageMeta();\n\n    const [showSub, setShowSub] = useState(false);\n    const [currentSub, setCurrentSub] = useState('');\n\n    const player = meta?.player?.current;\n\n    useEffect(() => {\n        const intervalId = setInterval(() => {\n            if (!player) {\n                return;\n            }\n\n            const textTrack = [...(Array.from(player.textTracks) || [])].find(\n                (track) => track.kind === 'subtitles',\n            );\n            const activeCue = textTrack?.activeCues?.[0] as VTTCue | undefined;\n\n            if (!activeCue?.text) {\n                setShowSub(false);\n\n                return;\n            }\n\n            const isVisible =\n                player?.currentTime >= activeCue.startTime &&\n                player?.currentTime <= activeCue.endTime - SUBTITLES_ANIMATION_SPEED;\n\n            setCurrentSub(activeCue.text);\n            setShowSub(isVisible);\n        });\n\n        return () => {\n            clearInterval(intervalId);\n        };\n    }, [player]);\n\n    return {\n        showSub,\n        currentSub,\n    };\n};\n"],"names":["useContext","GalleryContext","useState","useEffect","__spreadArray"],"mappings":";;;;;;;;AAIA,IAAM,yBAAyB,GAAG,GAAG;AAExB,IAAA,kBAAkB,GAAG,YAAA;;AACtB,IAAA,IAAA,mBAAmB,GAAKA,gBAAU,CAACC,sBAAc,CAAC,oBAA/B;AAE3B,IAAA,IAAM,IAAI,GAAG,mBAAmB,EAAE;IAE5B,IAAA,EAAA,GAAwBC,cAAQ,CAAC,KAAK,CAAC,EAAtC,OAAO,GAAA,EAAA,CAAA,CAAA,CAAA,EAAE,UAAU,GAAA,EAAA,CAAA,CAAA,CAAmB;IACvC,IAAA,EAAA,GAA8BA,cAAQ,CAAC,EAAE,CAAC,EAAzC,UAAU,GAAA,EAAA,CAAA,CAAA,CAAA,EAAE,aAAa,GAAA,EAAA,CAAA,CAAA,CAAgB;AAEhD,IAAA,IAAM,MAAM,GAAG,CAAA,EAAA,GAAA,IAAI,KAAJ,IAAA,IAAA,IAAI,KAAJ,MAAA,GAAA,MAAA,GAAA,IAAI,CAAE,MAAM,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,OAAO;AAEpC,IAAAC,eAAS,CAAC,YAAA;QACN,IAAM,UAAU,GAAG,WAAW,CAAC,YAAA;;YAC3B,IAAI,CAAC,MAAM,EAAE;gBACT;AACH;AAED,YAAA,IAAM,SAAS,GAAGC,mBAAI,CAAA,EAAA,GAAC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,UAAU,CAAC,IAAI,EAAE,GAAG,IAAA,CAAA,CAAA,IAAI,CAC7D,UAAC,KAAK,EAAA,EAAK,OAAA,KAAK,CAAC,IAAI,KAAK,WAAW,CAA1B,EAA0B,CACxC;AACD,YAAA,IAAM,SAAS,GAAG,CAAA,EAAA,GAAA,SAAS,KAAT,IAAA,IAAA,SAAS,KAAT,MAAA,GAAA,MAAA,GAAA,SAAS,CAAE,UAAU,MAAG,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,CAAC,CAAuB;YAElE,IAAI,EAAC,SAAS,KAAT,IAAA,IAAA,SAAS,uBAAT,SAAS,CAAE,IAAI,CAAA,EAAE;gBAClB,UAAU,CAAC,KAAK,CAAC;gBAEjB;AACH;AAED,YAAA,IAAM,SAAS,GACX,CAAA,MAAM,KAAN,IAAA,IAAA,MAAM,KAAN,MAAA,GAAA,MAAA,GAAA,MAAM,CAAE,WAAW,KAAI,SAAS,CAAC,SAAS;AAC1C,gBAAA,CAAA,MAAM,KAAA,IAAA,IAAN,MAAM,KAAA,MAAA,GAAA,MAAA,GAAN,MAAM,CAAE,WAAW,KAAI,SAAS,CAAC,OAAO,GAAG,yBAAyB;AAExE,YAAA,aAAa,CAAC,SAAS,CAAC,IAAI,CAAC;YAC7B,UAAU,CAAC,SAAS,CAAC;AACzB,SAAC,CAAC;QAEF,OAAO,YAAA;YACH,aAAa,CAAC,UAAU,CAAC;AAC7B,SAAC;AACL,KAAC,EAAE,CAAC,MAAM,CAAC,CAAC;IAEZ,OAAO;AACH,QAAA,OAAO,EAAA,OAAA;AACP,QAAA,UAAU,EAAA,UAAA;KACb;AACL;;;;"}
+{"version":3,"file":"use-custom-subtitles.js","sources":["../src/hooks/use-custom-subtitles.ts"],"sourcesContent":["import { useContext, useEffect, useState } from 'react';\n\nimport { GalleryContext } from '../context';\n\nconst SUBTITLES_ANIMATION_SPEED = 0.5;\n\nexport const useCustomSubtitles = () => {\n    const { getCurrentImageMeta } = useContext(GalleryContext);\n\n    const meta = getCurrentImageMeta();\n\n    const [showSub, setShowSub] = useState(false);\n    const [currentSub, setCurrentSub] = useState('');\n\n    const player = meta?.player?.current;\n\n    useEffect(() => {\n        const intervalId = setInterval(() => {\n            if (!player) {\n                return;\n            }\n\n            const textTrack = [...(Array.from(player.textTracks) || [])].find(\n                (track) => track.kind === 'subtitles',\n            );\n            const activeCue = textTrack?.activeCues?.[0] as VTTCue | undefined;\n\n            if (!activeCue?.text) {\n                setShowSub(false);\n\n                return;\n            }\n\n            const isVisible =\n                player?.currentTime >= activeCue.startTime &&\n                player?.currentTime <= activeCue.endTime - SUBTITLES_ANIMATION_SPEED;\n\n            setCurrentSub(activeCue.text);\n            setShowSub(isVisible);\n        });\n\n        return () => {\n            clearInterval(intervalId);\n        };\n    }, [player]);\n\n    return {\n        showSub,\n        currentSub,\n    };\n};\n"],"names":["useContext","GalleryContext","useState","useEffect","__spreadArray"],"mappings":";;;;;;;;AAIA,IAAM,yBAAyB,GAAG,GAAG;AAExB,IAAA,kBAAkB,GAAG,YAAA;;AACtB,IAAA,IAAA,mBAAmB,GAAKA,gBAAU,CAACC,sBAAc,CAAC,oBAA/B;AAE3B,IAAA,IAAM,IAAI,GAAG,mBAAmB,EAAE;IAE5B,IAAA,EAAA,GAAwBC,cAAQ,CAAC,KAAK,CAAC,EAAtC,OAAO,GAAA,EAAA,CAAA,CAAA,CAAA,EAAE,UAAU,GAAA,EAAA,CAAA,CAAA,CAAmB;IACvC,IAAA,EAAA,GAA8BA,cAAQ,CAAC,EAAE,CAAC,EAAzC,UAAU,GAAA,EAAA,CAAA,CAAA,CAAA,EAAE,aAAa,GAAA,EAAA,CAAA,CAAA,CAAgB;AAEhD,IAAA,IAAM,MAAM,GAAG,CAAA,EAAA,GAAA,IAAI,KAAJ,IAAA,IAAA,IAAI,KAAJ,MAAA,GAAA,MAAA,GAAA,IAAI,CAAE,MAAM,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,OAAO;AAEpC,IAAAC,eAAS,CAAC,YAAA;QACN,IAAM,UAAU,GAAG,WAAW,CAAC,YAAA;;YAC3B,IAAI,CAAC,MAAM,EAAE;gBACT;;AAGJ,YAAA,IAAM,SAAS,GAAGC,mBAAI,CAAA,EAAA,GAAC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,UAAU,CAAC,IAAI,EAAE,GAAG,IAAA,CAAA,CAAA,IAAI,CAC7D,UAAC,KAAK,EAAA,EAAK,OAAA,KAAK,CAAC,IAAI,KAAK,WAAW,CAA1B,EAA0B,CACxC;AACD,YAAA,IAAM,SAAS,GAAG,CAAA,EAAA,GAAA,SAAS,KAAT,IAAA,IAAA,SAAS,KAAT,MAAA,GAAA,MAAA,GAAA,SAAS,CAAE,UAAU,MAAG,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,CAAC,CAAuB;YAElE,IAAI,EAAC,SAAS,KAAT,IAAA,IAAA,SAAS,KAAT,MAAA,GAAA,MAAA,GAAA,SAAS,CAAE,IAAI,CAAA,EAAE;gBAClB,UAAU,CAAC,KAAK,CAAC;gBAEjB;;AAGJ,YAAA,IAAM,SAAS,GACX,CAAA,MAAM,KAAN,IAAA,IAAA,MAAM,KAAN,MAAA,GAAA,MAAA,GAAA,MAAM,CAAE,WAAW,KAAI,SAAS,CAAC,SAAS;AAC1C,gBAAA,CAAA,MAAM,KAAA,IAAA,IAAN,MAAM,KAAA,MAAA,GAAA,MAAA,GAAN,MAAM,CAAE,WAAW,KAAI,SAAS,CAAC,OAAO,GAAG,yBAAyB;AAExE,YAAA,aAAa,CAAC,SAAS,CAAC,IAAI,CAAC;YAC7B,UAAU,CAAC,SAAS,CAAC;AACzB,SAAC,CAAC;QAEF,OAAO,YAAA;YACH,aAAa,CAAC,UAAU,CAAC;AAC7B,SAAC;AACL,KAAC,EAAE,CAAC,MAAM,CAAC,CAAC;IAEZ,OAAO;AACH,QAAA,OAAO,EAAA,OAAA;AACP,QAAA,UAAU,EAAA,UAAA;KACb;AACL;;;;"}