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

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

@@ -4,10 +4,11 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var cn = require('classnames');
-var throttle = require('lodash/throttle');
+var cssm = require('@alfalab/core-components-shared/cssm');
 var context = require('../../context.js');
 var utils = require('../../utils/utils.js');
 var constants = require('../../utils/constants.js');
+require('tslib');
 var Component = require('../image-preview/Component.js');
 var styles = require('./index.module.css');
 
@@ -15,16 +16,17 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
-var throttle__default = /*#__PURE__*/_interopDefaultCompat(throttle);
 var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
 
 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 = React.useRef(null);
-    var _b = React.useState(false), isNavMouseDowned = _b[0], setIsNavMouseDowned = _b[1];
+    var dragStartXRef = React.useRef(0);
+    var dragStartScrollLeftRef = React.useRef(0);
+    var suppressClickRef = React.useRef(false);
+    var _b = React.useState(false), isDragging = _b[0], setIsDragging = _b[1];
     var _c = React.useContext(context.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) {
@@ -43,32 +45,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 = React.useCallback(function () {
+        setIsDragging(false);
+    }, []);
+    var dragTo = React.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__default.default(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;
+    };
+    React.useEffect(function () {
+        if (!cssm.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 = React.useCallback(function (preview, containerWidth) {
         var _a = preview.getBoundingClientRect(), right = _a.right, left = _a.left, x = _a.x;
         if (view === 'mobile') {
@@ -94,7 +121,10 @@ var NavigationBar = function () {
     }, [currentSlideIndex, handlePreviewPosition, scroll]);
     return (
     // eslint-disable-next-line jsx-a11y/no-static-element-interactions
-    React__default.default.createElement("div", { className: cn__default.default(styles__default.default.component, (_a = {}, _a[styles__default.default.mobile] = view === 'mobile', _a)), ref: containerRef, "data-test-id": constants.TestIds.NAVIGATION_BAR, onMouseDown: handlePreviewMouseDown, onMouseUp: handlePreviewMouseUp, onMouseMove: handleMouseNavigationMove }, images.map(function (image, index) {
+    React__default.default.createElement("div", { className: cn__default.default(styles__default.default.component, (_a = {},
+            _a[styles__default.default.mobile] = view === 'mobile',
+            _a[styles__default.default.dragging] = isDragging,
+            _a)), ref: containerRef, "data-test-id": constants.TestIds.NAVIGATION_BAR, onMouseDown: handlePreviewMouseDown, onMouseUp: handlePreviewMouseUp, onMouseMove: handleMouseNavigationMove, onClickCapture: handleClickCapture }, images.map(function (image, index) {
         var _a;
         var active = index === currentSlideIndex;
         return (React__default.default.createElement(Component.ImagePreview, { key: utils.getImageKey(image, index), image: image, active: active, index: index, onSelect: handlePreviewSelect, className: cn__default.default(styles__default.default.preview, (_a = {}, _a[styles__default.default.mobile] = view === 'mobile', _a)) }));

package/cssm/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":["useRef","useState","useContext","GalleryContext","useCallback","throttle","useEffect","React","cn","styles","TestIds","ImagePreview","getImageKey"],"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":["useRef","useState","useContext","GalleryContext","useCallback","useEffect","isClient","React","cn","styles","TestIds","ImagePreview","getImageKey"],"mappings":"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"}

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

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

package/cssm/constants.d.ts

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

package/cssm/constants.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var SWIPE_THRESHOLD = -250;
+var SWIPE_THRESHOLD = 250;
 var PREVIEW_WIDTH_MOBILE = 46;
 var PREVIEW_HEIGHT_MOBILE = 46;
 var PREVIEW_WIDTH_DESKTOP = 56;

package/cssm/constants.js.map

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

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

@@ -2,11 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var tslib = require('tslib');
 var React = require('react');
 var context = require('../context.js');
 
-var SUBTITLES_ANIMATION_SPEED = 0.5;
+var SUBTITLES_FADE_DURATION_SECONDS = 0.5;
 var useCustomSubtitles = function () {
     var _a;
     var getCurrentImageMeta = React.useContext(context.GalleryContext).getCurrentImageMeta;
@@ -15,24 +14,71 @@ var useCustomSubtitles = function () {
     var _c = React.useState(''), currentSub = _c[0], setCurrentSub = _c[1];
     var player = (_a = meta === null || meta === void 0 ? void 0 : meta.player) === null || _a === void 0 ? void 0 : _a.current;
     React.useEffect(function () {
-        var intervalId = setInterval(function () {
-            var _a;
-            if (!player) {
-                return;
+        if (!player) {
+            return undefined;
+        }
+        var textTracks = player.textTracks;
+        var textTrack;
+        var hideTimeoutId;
+        var clearHideTimeout = function () {
+            if (hideTimeoutId !== undefined) {
+                clearTimeout(hideTimeoutId);
+                hideTimeoutId = undefined;
             }
-            var textTrack = tslib.__spreadArray([], (Array.from(player.textTracks) || []), true).find(function (track) { return track.kind === 'subtitles'; });
+        };
+        var syncSubtitles = function () {
+            var _a;
+            clearHideTimeout();
             var activeCue = (_a = textTrack === null || textTrack === void 0 ? void 0 : textTrack.activeCues) === null || _a === void 0 ? void 0 : _a[0];
             if (!(activeCue === null || activeCue === void 0 ? void 0 : activeCue.text)) {
                 setShowSub(false);
                 return;
             }
-            var isVisible = (player === null || player === void 0 ? void 0 : player.currentTime) >= activeCue.startTime &&
-                (player === null || player === void 0 ? void 0 : player.currentTime) <= activeCue.endTime - SUBTITLES_ANIMATION_SPEED;
+            var fadeStartTime = activeCue.endTime - SUBTITLES_FADE_DURATION_SECONDS;
+            var isVisible = player.currentTime <= fadeStartTime;
             setCurrentSub(activeCue.text);
             setShowSub(isVisible);
-        });
+            if (!isVisible || player.paused || player.playbackRate <= 0) {
+                return;
+            }
+            var timeUntilFadeMs = ((fadeStartTime - player.currentTime) / player.playbackRate) * 1000;
+            hideTimeoutId = setTimeout(function () {
+                setShowSub(false);
+            }, timeUntilFadeMs);
+        };
+        var connectTextTrack = function () {
+            var nextTextTrack = Array.from(textTracks).find(function (track) { return track.kind === 'subtitles'; });
+            if (nextTextTrack === textTrack) {
+                syncSubtitles();
+                return;
+            }
+            textTrack === null || textTrack === void 0 ? void 0 : textTrack.removeEventListener('cuechange', syncSubtitles);
+            textTrack = nextTextTrack;
+            textTrack === null || textTrack === void 0 ? void 0 : textTrack.addEventListener('cuechange', syncSubtitles);
+            syncSubtitles();
+        };
+        player.addEventListener('play', syncSubtitles);
+        player.addEventListener('playing', syncSubtitles);
+        player.addEventListener('pause', clearHideTimeout);
+        player.addEventListener('waiting', clearHideTimeout);
+        player.addEventListener('seeking', clearHideTimeout);
+        player.addEventListener('seeked', syncSubtitles);
+        player.addEventListener('ratechange', syncSubtitles);
+        textTracks.addEventListener('addtrack', connectTextTrack);
+        textTracks.addEventListener('change', connectTextTrack);
+        connectTextTrack();
         return function () {
-            clearInterval(intervalId);
+            clearHideTimeout();
+            textTrack === null || textTrack === void 0 ? void 0 : textTrack.removeEventListener('cuechange', syncSubtitles);
+            player.removeEventListener('play', syncSubtitles);
+            player.removeEventListener('playing', syncSubtitles);
+            player.removeEventListener('pause', clearHideTimeout);
+            player.removeEventListener('waiting', clearHideTimeout);
+            player.removeEventListener('seeking', clearHideTimeout);
+            player.removeEventListener('seeked', syncSubtitles);
+            player.removeEventListener('ratechange', syncSubtitles);
+            textTracks.removeEventListener('addtrack', connectTextTrack);
+            textTracks.removeEventListener('change', connectTextTrack);
         };
     }, [player]);
     return {

package/cssm/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;;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;;;;"}
+{"version":3,"file":"use-custom-subtitles.js","sources":["../../src/hooks/use-custom-subtitles.ts"],"sourcesContent":["import { useContext, useEffect, useState } from 'react';\n\nimport { GalleryContext } from '../context';\n\nconst SUBTITLES_FADE_DURATION_SECONDS = 0.5;\n\nexport const useCustomSubtitles = () => {\n    const { getCurrentImageMeta } = useContext(GalleryContext);\n\n    const meta = getCurrentImageMeta();\n\n    const [showSub, setShowSub] = useState(false);\n    const [currentSub, setCurrentSub] = useState('');\n\n    const player = meta?.player?.current;\n\n    useEffect(() => {\n        if (!player) {\n            return undefined;\n        }\n\n        const { textTracks } = player;\n\n        let textTrack: TextTrack | undefined;\n        let hideTimeoutId: ReturnType<typeof setTimeout> | undefined;\n\n        const clearHideTimeout = () => {\n            if (hideTimeoutId !== undefined) {\n                clearTimeout(hideTimeoutId);\n                hideTimeoutId = undefined;\n            }\n        };\n\n        const syncSubtitles = () => {\n            clearHideTimeout();\n\n            const activeCue = textTrack?.activeCues?.[0] as VTTCue | undefined;\n\n            if (!activeCue?.text) {\n                setShowSub(false);\n\n                return;\n            }\n\n            const fadeStartTime = activeCue.endTime - SUBTITLES_FADE_DURATION_SECONDS;\n            const isVisible = player.currentTime <= fadeStartTime;\n\n            setCurrentSub(activeCue.text);\n            setShowSub(isVisible);\n\n            if (!isVisible || player.paused || player.playbackRate <= 0) {\n                return;\n            }\n\n            const timeUntilFadeMs =\n                ((fadeStartTime - player.currentTime) / player.playbackRate) * 1000;\n\n            hideTimeoutId = setTimeout(() => {\n                setShowSub(false);\n            }, timeUntilFadeMs);\n        };\n\n        const connectTextTrack = () => {\n            const nextTextTrack = Array.from(textTracks).find(\n                (track) => track.kind === 'subtitles',\n            );\n\n            if (nextTextTrack === textTrack) {\n                syncSubtitles();\n\n                return;\n            }\n\n            textTrack?.removeEventListener('cuechange', syncSubtitles);\n            textTrack = nextTextTrack;\n            textTrack?.addEventListener('cuechange', syncSubtitles);\n            syncSubtitles();\n        };\n\n        player.addEventListener('play', syncSubtitles);\n        player.addEventListener('playing', syncSubtitles);\n        player.addEventListener('pause', clearHideTimeout);\n        player.addEventListener('waiting', clearHideTimeout);\n        player.addEventListener('seeking', clearHideTimeout);\n        player.addEventListener('seeked', syncSubtitles);\n        player.addEventListener('ratechange', syncSubtitles);\n        textTracks.addEventListener('addtrack', connectTextTrack);\n        textTracks.addEventListener('change', connectTextTrack);\n\n        connectTextTrack();\n\n        return () => {\n            clearHideTimeout();\n            textTrack?.removeEventListener('cuechange', syncSubtitles);\n            player.removeEventListener('play', syncSubtitles);\n            player.removeEventListener('playing', syncSubtitles);\n            player.removeEventListener('pause', clearHideTimeout);\n            player.removeEventListener('waiting', clearHideTimeout);\n            player.removeEventListener('seeking', clearHideTimeout);\n            player.removeEventListener('seeked', syncSubtitles);\n            player.removeEventListener('ratechange', syncSubtitles);\n            textTracks.removeEventListener('addtrack', connectTextTrack);\n            textTracks.removeEventListener('change', connectTextTrack);\n        };\n    }, [player]);\n\n    return {\n        showSub,\n        currentSub,\n    };\n};\n"],"names":["useContext","GalleryContext","useState","useEffect"],"mappings":"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"}

package/cssm/index.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var Component = require('./Component.js');
 var constants = require('./utils/constants.js');
+require('tslib');
 
 
 

package/cssm/index.js.map

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

package/cssm/types.d.ts

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

package/cssm/utils/index.d.ts

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

package/cssm/utils/index.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var splitFilename = require('./split-filename.js');
 var utils = require('./utils.js');
 var constants = require('./constants.js');
+var modernDownload = require('./modern-download.js');
 
 
 
@@ -16,4 +17,5 @@ exports.getImageKey = utils.getImageKey;
 exports.isSmallImage = utils.isSmallImage;
 exports.isVideo = utils.isVideo;
 exports.TestIds = constants.TestIds;
+exports.downloadFile = modernDownload.downloadFile;
 //# sourceMappingURL=index.js.map

package/cssm/utils/index.js.map

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

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

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

package/cssm/utils/modern-download.js

@@ -0,0 +1,113 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+
+var downloadWithBlob = function (blob, fileName) {
+    var url = URL.createObjectURL(blob);
+    var link = document.createElement('a');
+    link.href = url;
+    link.download = fileName;
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+    setTimeout(function () { return URL.revokeObjectURL(url); }, 100);
+};
+var downloadWithLink = function (url, fileName) {
+    var link = document.createElement('a');
+    link.href = url;
+    link.download = fileName;
+    link.target = '_blank';
+    link.rel = 'noopener noreferrer';
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+};
+var canUseBlobDownload = function () {
+    return typeof fetch === 'function' &&
+        typeof URL.createObjectURL === 'function' &&
+        typeof URL.revokeObjectURL === 'function';
+};
+var canUseFileShare = function () {
+    return typeof File === 'function' &&
+        typeof navigator !== 'undefined' &&
+        typeof navigator.share === 'function' &&
+        typeof navigator.canShare === 'function';
+};
+var canShareFiles = function (files) {
+    return canUseFileShare() && navigator.canShare({ files: files });
+};
+var getBlob = function (url) { return tslib.__awaiter(void 0, void 0, void 0, function () {
+    var response;
+    return tslib.__generator(this, function (_a) {
+        switch (_a.label) {
+            case 0: return [4 /*yield*/, fetch(url)];
+            case 1:
+                response = _a.sent();
+                if (!response.ok) {
+                    throw new Error('Network error');
+                }
+                return [2 /*return*/, response.blob()];
+        }
+    });
+}); };
+var isAbortError = function (error) {
+    return typeof DOMException !== 'undefined' &&
+        error instanceof DOMException &&
+        error.name === 'AbortError';
+};
+var downloadFile = function (_a) { return tslib.__awaiter(void 0, [_a], void 0, function (_b) {
+    var blob, file, error_1, blob;
+    var url = _b.url, _d = _b.fileName, fileName = _d === void 0 ? 'download' : _d, fileType = _b.fileType;
+    return tslib.__generator(this, function (_e) {
+        switch (_e.label) {
+            case 0:
+                if (!canUseBlobDownload()) {
+                    downloadWithLink(url, fileName);
+                    return [2 /*return*/];
+                }
+                if (!(canUseFileShare() && canShareFiles([new File([], fileName, { type: fileType })]))) return [3 /*break*/, 5];
+                _e.label = 1;
+            case 1:
+                _e.trys.push([1, 4, , 5]);
+                return [4 /*yield*/, getBlob(url)];
+            case 2:
+                blob = _e.sent();
+                file = new File([blob], fileName, { type: blob.type || fileType });
+                if (!canShareFiles([file])) {
+                    downloadWithBlob(blob, fileName);
+                    return [2 /*return*/];
+                }
+                return [4 /*yield*/, navigator.share({
+                        files: [file],
+                        title: "\u0421\u043A\u0430\u0447\u0430\u0442\u044C ".concat(fileName),
+                    })];
+            case 3:
+                _e.sent();
+                return [2 /*return*/];
+            case 4:
+                error_1 = _e.sent();
+                if (isAbortError(error_1)) {
+                    return [2 /*return*/];
+                }
+                downloadWithLink(url, fileName);
+                return [2 /*return*/];
+            case 5:
+                _e.trys.push([5, 7, , 8]);
+                return [4 /*yield*/, getBlob(url)];
+            case 6:
+                blob = _e.sent();
+                downloadWithBlob(blob, fileName);
+                return [3 /*break*/, 8];
+            case 7:
+                _e.sent();
+                downloadWithLink(url, fileName);
+                return [3 /*break*/, 8];
+            case 8: return [2 /*return*/];
+        }
+    });
+}); };
+
+exports.downloadFile = downloadFile;
+//# sourceMappingURL=modern-download.js.map

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

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