@alfalab/core-components-gallery 7.2.3 → 7.3.0

package/src/components/navigation-bar/Component.tsx

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

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

@@ -8,12 +8,22 @@
     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;
+    user-select: none;
 
     &.mobile {
-        padding: var(--gap-8) var(--gap-24);
+        padding: var(--gap-8);
+    }
+
+    &.dragging {
+        cursor: grabbing;
+
+        & * {
+            cursor: grabbing;
+        }
     }
 
     &::-webkit-scrollbar {

package/src/constants.ts

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

package/src/hooks/use-custom-subtitles.ts

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

package/src/types.ts

@@ -44,10 +44,12 @@ 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/src/utils/index.ts

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

package/src/utils/modern-download.ts

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

package/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/utils/index.d.ts

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

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