@alfalab/core-components-gallery 7.2.3 → 7.3.0

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

@@ -1,7 +1,7 @@
 import { useContext, useState, useEffect } from 'react';
 import { GalleryContext } from '../context.js';
 
-const SUBTITLES_ANIMATION_SPEED = 0.5;
+const SUBTITLES_FADE_DURATION_SECONDS = 0.5;
 const useCustomSubtitles = () => {
     const { getCurrentImageMeta } = useContext(GalleryContext);
     const meta = getCurrentImageMeta();
@@ -9,23 +9,70 @@ const useCustomSubtitles = () => {
     const [currentSub, setCurrentSub] = useState('');
     const player = meta?.player?.current;
     useEffect(() => {
-        const intervalId = setInterval(() => {
-            if (!player) {
-                return;
+        if (!player) {
+            return undefined;
+        }
+        const { textTracks } = player;
+        let textTrack;
+        let hideTimeoutId;
+        const clearHideTimeout = () => {
+            if (hideTimeoutId !== undefined) {
+                clearTimeout(hideTimeoutId);
+                hideTimeoutId = undefined;
             }
-            const textTrack = [...(Array.from(player.textTracks) || [])].find((track) => track.kind === 'subtitles');
+        };
+        const syncSubtitles = () => {
+            clearHideTimeout();
             const activeCue = textTrack?.activeCues?.[0];
             if (!activeCue?.text) {
                 setShowSub(false);
                 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]);
     return {

package/modern/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,MAAM,yBAAyB,GAAG,GAAG;AAE9B,MAAM,kBAAkB,GAAG,MAAK;IACnC,MAAM,EAAE,mBAAmB,EAAE,GAAG,UAAU,CAAC,cAAc,CAAC;AAE1D,IAAA,MAAM,IAAI,GAAG,mBAAmB,EAAE;IAElC,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC;IAC7C,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC;AAEhD,IAAA,MAAM,MAAM,GAAG,IAAI,EAAE,MAAM,EAAE,OAAO;IAEpC,SAAS,CAAC,MAAK;AACX,QAAA,MAAM,UAAU,GAAG,WAAW,CAAC,MAAK;YAChC,IAAI,CAAC,MAAM,EAAE;gBACT;;AAGJ,YAAA,MAAM,SAAS,GAAG,CAAC,IAAI,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,IAAI,CAC7D,CAAC,KAAK,KAAK,KAAK,CAAC,IAAI,KAAK,WAAW,CACxC;YACD,MAAM,SAAS,GAAG,SAAS,EAAE,UAAU,GAAG,CAAC,CAAuB;AAElE,YAAA,IAAI,CAAC,SAAS,EAAE,IAAI,EAAE;gBAClB,UAAU,CAAC,KAAK,CAAC;gBAEjB;;YAGJ,MAAM,SAAS,GACX,MAAM,EAAE,WAAW,IAAI,SAAS,CAAC,SAAS;gBAC1C,MAAM,EAAE,WAAW,IAAI,SAAS,CAAC,OAAO,GAAG,yBAAyB;AAExE,YAAA,aAAa,CAAC,SAAS,CAAC,IAAI,CAAC;YAC7B,UAAU,CAAC,SAAS,CAAC;AACzB,SAAC,CAAC;AAEF,QAAA,OAAO,MAAK;YACR,aAAa,CAAC,UAAU,CAAC;AAC7B,SAAC;AACL,KAAC,EAAE,CAAC,MAAM,CAAC,CAAC;IAEZ,OAAO;QACH,OAAO;QACP,UAAU;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":[],"mappings":"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"}

package/modern/index.css

@@ -11,7 +11,7 @@
     --sat: env(safe-area-inset-top, var(--gap-0));
     --sab: env(safe-area-inset-bottom, var(--gap-0));
 }
-.gallery__container_1ncrj {
+.gallery__container_1kzqo {
     position: relative;
     overflow-x: hidden;
     overflow-y: auto;
@@ -25,17 +25,17 @@
     padding-top: var(--sat);
     padding-bottom: var(--sab);
 }
-.gallery__container_1ncrj.gallery__mobile_1ncrj {
+.gallery__container_1kzqo.gallery__mobile_1kzqo {
         overflow: hidden;
     }
-.gallery__modal_1ncrj {
+.gallery__modal_1kzqo {
     flex-grow: 1;
     width: 100vw;
     height: 100vh;
     height: 100dvh;
     background: transparent;
 }
-.gallery__navigationVideo_1ncrj {
+.gallery__navigationVideo_1kzqo {
     z-index: 3;
     width: 100%;
     position: absolute;
@@ -44,18 +44,18 @@
     transition: transform 0.3s ease-in-out;
     text-align: center;
 }
-.gallery__hide_1ncrj {
+.gallery__hide_1kzqo {
     transform: translateY(114px);
 }
-.gallery__hideInfo_1ncrj {
+.gallery__hideInfo_1kzqo {
     transform: translateY(48px);
 }
-.gallery__bottomButton_1ncrj {
+.gallery__bottomButton_1kzqo {
     width: calc(100% - var(--gap-32));
     margin: var(--gap-16);
     background-color: var(--color-static-neutral-translucent-500-inverted);
 }
-.gallery__subtitles_1ncrj {
+.gallery__subtitles_1kzqo {
     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_1ncrj {
+.gallery__hideSubtitles_1kzqo {
     opacity: 0;
 }

package/modern/index.module.css.js

@@ -1,6 +1,6 @@
 import './index.css';
 
-const styles = {"container":"gallery__container_1ncrj","mobile":"gallery__mobile_1ncrj","modal":"gallery__modal_1ncrj","navigationVideo":"gallery__navigationVideo_1ncrj","hide":"gallery__hide_1ncrj","hideInfo":"gallery__hideInfo_1ncrj","bottomButton":"gallery__bottomButton_1ncrj"};
+const styles = {"container":"gallery__container_1kzqo","mobile":"gallery__mobile_1kzqo","modal":"gallery__modal_1kzqo","navigationVideo":"gallery__navigationVideo_1kzqo","hide":"gallery__hide_1kzqo","hideInfo":"gallery__hideInfo_1kzqo","bottomButton":"gallery__bottomButton_1kzqo"};
 
 export { styles as default };
 //# sourceMappingURL=index.module.css.js.map

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

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

package/modern/utils/index.js

@@ -1,4 +1,5 @@
 export { splitFilename } from './split-filename.js';
 export { PLACEHOLDER_HEIGHT, PLACEHOLDER_WIDTH, getImageAlt, getImageKey, isSmallImage, isVideo } from './utils.js';
 export { TestIds } from './constants.js';
+export { downloadFile } from './modern-download.js';
 //# sourceMappingURL=index.js.map

package/modern/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/modern/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/modern/utils/modern-download.js

@@ -0,0 +1,76 @@
+const downloadWithBlob = (blob, fileName) => {
+    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, fileName) => {
+    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 = () => typeof fetch === 'function' &&
+    typeof URL.createObjectURL === 'function' &&
+    typeof URL.revokeObjectURL === 'function';
+const canUseFileShare = () => typeof File === 'function' &&
+    typeof navigator !== 'undefined' &&
+    typeof navigator.share === 'function' &&
+    typeof navigator.canShare === 'function';
+const canShareFiles = (files) => canUseFileShare() && navigator.canShare({ files });
+const getBlob = async (url) => {
+    const response = await fetch(url);
+    if (!response.ok) {
+        throw new Error('Network error');
+    }
+    return response.blob();
+};
+const isAbortError = (error) => typeof DOMException !== 'undefined' &&
+    error instanceof DOMException &&
+    error.name === 'AbortError';
+const downloadFile = async ({ url, fileName = 'download', fileType, }) => {
+    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);
+    }
+};
+
+export { downloadFile };
+//# sourceMappingURL=modern-download.js.map

package/modern/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":[],"mappings":"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"}

package/moderncssm/Component.js

@@ -33,6 +33,7 @@ const Gallery = ({ open, images, slideIndex, initialSlide = 0, loop = true, onCl
     const [mutedVideo, setMutedVideo] = useState(DEFAULT_MUTED_VIDEO);
     const [playingVideo, setPlayingVideo] = useState(DEFAULT_PLAYING_VIDEO);
     const [hideNavigation, setHideNavigation] = useState(DEFAULT_HIDE_NAVIGATION);
+    const [swipeY, setSwipeY] = useState(0);
     const isDesktop = useIsDesktop();
     const isCurrentVideo = !!imagesMeta[currentSlideIndex]?.player?.current;
     const bottomButton = images[currentSlideIndex]?.bottomButton;
@@ -111,6 +112,11 @@ const Gallery = ({ open, images, slideIndex, initialSlide = 0, loop = true, onCl
             swiper?.slideTo(currentSlideIndex);
         }
     }, [uncontrolled, currentSlideIndex, swiper]);
+    useEffect(() => {
+        if (!open) {
+            setSwipeY(0);
+        }
+    }, [open]);
     useEffect(() => {
         document.addEventListener('keydown', handleKeyDown);
         return () => {
@@ -118,24 +124,59 @@ const Gallery = ({ open, images, slideIndex, initialSlide = 0, loop = true, onCl
         };
     }, [handleKeyDown]);
     useEffect(() => {
-        let startY;
+        if (!open) {
+            return undefined;
+        }
+        let startX = 0;
+        let startY = 0;
+        let lockedDirection = null;
+        const directionLockThreshold = 10;
         const abortController = new AbortController();
         const { signal } = abortController;
         document.addEventListener('touchstart', (e) => {
+            startX = e.touches[0].clientX;
             startY = e.touches[0].clientY;
+            lockedDirection = null;
         }, { signal });
         document.addEventListener('touchmove', (e) => {
-            const endY = e.changedTouches[0].clientY;
-            const deltaY = startY - endY;
-            // Если свайп вниз, закрываем галерею
-            if (deltaY < SWIPE_THRESHOLD) {
+            const currentX = e.touches[0].clientX;
+            const currentY = e.touches[0].clientY;
+            const deltaX = currentX - startX;
+            const deltaY = currentY - startY;
+            if (!lockedDirection) {
+                const absX = Math.abs(deltaX);
+                const absY = Math.abs(deltaY);
+                if (absX > absY && absX > directionLockThreshold) {
+                    lockedDirection = 'horizontal';
+                }
+                else if (absY > absX && absY > directionLockThreshold) {
+                    lockedDirection = 'vertical';
+                }
+                else {
+                    return;
+                }
+            }
+            if (lockedDirection === 'horizontal') {
+                return;
+            }
+            if (deltaY <= 0) {
+                setSwipeY(0);
+                return;
+            }
+            setSwipeY(deltaY);
+            if (deltaY > SWIPE_THRESHOLD) {
+                setSwipeY(0);
                 onClose();
             }
         }, { signal });
+        document.addEventListener('touchend', () => {
+            lockedDirection = null;
+            setSwipeY(0);
+        }, { signal });
         return () => {
             abortController.abort();
         };
-    }, [onClose]);
+    }, [onClose, open]);
     const singleSlide = images.length === 1;
     const showNavigationBar = !singleSlide && !fullScreen;
     // eslint-disable-next-line react/jsx-no-constructed-context-values
@@ -167,7 +208,9 @@ const Gallery = ({ open, images, slideIndex, initialSlide = 0, loop = true, onCl
     };
     return (React.createElement(GalleryContext.Provider, { value: galleryContext },
         React.createElement(BaseModal, { open: open, className: cn(styles.modal, popupClassName), onEscapeKeyDown: handleEscapeKeyDown, Backdrop: Backdrop, onUnmount: onUnmount },
-            React.createElement("div", { className: cn(styles.container, {
+            React.createElement("div", { "data-content-area": true, style: {
+                    transform: `translateY(${swipeY}px)`,
+                }, className: cn(styles.container, {
                     [styles.mobile]: !isDesktop,
                 }) },
                 isDesktop ? React.createElement(Header, null) : React.createElement(HeaderMobile, null),

package/moderncssm/Component.js.map

@@ -1 +1 @@
-{"version":3,"file":"Component.js","sources":["../src/Component.tsx"],"sourcesContent":["import React, { type FC, type MouseEvent, useCallback, useEffect, useState } from 'react';\nimport cn from 'classnames';\nimport type SwiperCore from 'swiper';\n\nimport { BaseModal } from '@alfalab/core-components-base-modal';\nimport { useIsDesktop } from '@alfalab/core-components-mq';\n\nimport { BottomButton } from './components/bottom-button';\nimport { Single } from './components/image-viewer/single';\nimport { Subtitles } from './components/subtitles';\nimport { Header, HeaderMobile, ImageViewer, InfoBar, NavigationBar } from './components';\nimport { SWIPE_THRESHOLD } from './constants';\nimport { GalleryContext } from './context';\nimport { type GalleryImage, type ImageMeta } from './types';\n\nimport styles from './index.module.css';\n\nexport type GalleryProps = {\n    /**\n     * Управление видимостью\n     */\n    open: boolean;\n\n    /**\n     * Массив изображений\n     */\n    images: GalleryImage[];\n\n    /**\n     * Зациклить галерею\n     * @default true\n     */\n    loop?: boolean;\n\n    /**\n     * Индекс открытого изображение\n     * @default 0\n     */\n    initialSlide?: number;\n\n    /**\n     * Обработчик закрытия\n     */\n    onClose: () => void;\n\n    /**\n     * Индекс текущего изображения\n     */\n    slideIndex?: number;\n\n    /**\n     * Обработчик изменения текущего изображения\n     */\n    onSlideIndexChange?: (index: number) => void;\n\n    /**\n     * Дополнительный класс для попапа\n     */\n    popupClassName?: string;\n};\n\nconst DEFAULT_FULL_SCREEN = false;\nconst DEFAULT_MUTED_VIDEO = true;\nconst DEFAULT_PLAYING_VIDEO = true;\nconst DEFAULT_HIDE_NAVIGATION = false;\n\nconst Backdrop = () => null;\n\nexport const Gallery: FC<GalleryProps> = ({\n    open,\n    images,\n    slideIndex,\n    initialSlide = 0,\n    loop = true,\n    onClose,\n    onSlideIndexChange,\n    popupClassName,\n}) => {\n    const currentSlideIndexState = useState(initialSlide);\n    const uncontrolled = slideIndex === undefined;\n    const [currentSlideIndex, setCurrentSlideIndex] = uncontrolled\n        ? currentSlideIndexState\n        : [slideIndex, onSlideIndexChange];\n\n    const [swiper, setSwiper] = useState<SwiperCore>();\n    const [imagesMeta, setImagesMeta] = useState<ImageMeta[]>([]);\n    const [fullScreen, setFullScreen] = useState<boolean>(DEFAULT_FULL_SCREEN);\n    const [mutedVideo, setMutedVideo] = useState<boolean>(DEFAULT_MUTED_VIDEO);\n    const [playingVideo, setPlayingVideo] = useState<boolean>(DEFAULT_PLAYING_VIDEO);\n    const [hideNavigation, setHideNavigation] = useState<boolean>(DEFAULT_HIDE_NAVIGATION);\n\n    const isDesktop = useIsDesktop();\n\n    const isCurrentVideo = !!imagesMeta[currentSlideIndex]?.player?.current;\n\n    const bottomButton = images[currentSlideIndex]?.bottomButton;\n\n    const slideTo = useCallback(\n        (index: number) => {\n            if (images[index]) {\n                setCurrentSlideIndex?.(index);\n\n                if (swiper) {\n                    setPlayingVideo(true);\n                    swiper.slideTo(index);\n                }\n            }\n        },\n        [images, setCurrentSlideIndex, swiper],\n    );\n\n    const slideNext = useCallback(() => {\n        const lastIndex = images.length - 1;\n\n        let nextIndex = currentSlideIndex + 1;\n\n        if (nextIndex >= images.length) {\n            nextIndex = loop ? 0 : lastIndex;\n        }\n\n        slideTo(nextIndex);\n    }, [images.length, loop, currentSlideIndex, slideTo]);\n\n    const slidePrev = useCallback(() => {\n        const lastIndex = images.length - 1;\n\n        let nextIndex = currentSlideIndex - 1;\n\n        if (nextIndex < 0) {\n            nextIndex = loop ? lastIndex : 0;\n        }\n\n        slideTo(nextIndex);\n    }, [images.length, loop, currentSlideIndex, slideTo]);\n\n    const setImageMeta = useCallback((meta: ImageMeta, index: number) => {\n        setImagesMeta((prevImagesMeta) => {\n            const nextImagesMeta = prevImagesMeta.slice();\n\n            nextImagesMeta[index] = meta;\n\n            return nextImagesMeta;\n        });\n    }, []);\n\n    const handleBottomButtonClick = useCallback(\n        (e: MouseEvent) => {\n            e.stopPropagation();\n            if (bottomButton?.onClick) {\n                bottomButton.onClick(e);\n            }\n        },\n        [bottomButton],\n    );\n\n    const handleClose = useCallback(() => {\n        onClose();\n\n        if (uncontrolled) {\n            setCurrentSlideIndex?.(initialSlide);\n        }\n\n        setFullScreen(false);\n    }, [initialSlide, onClose, setCurrentSlideIndex, uncontrolled]);\n\n    const handleEscapeKeyDown = () => {\n        if (fullScreen) {\n            setFullScreen(false);\n        } else {\n            handleClose();\n        }\n    };\n\n    const handleKeyDown = useCallback(\n        (event: KeyboardEvent) => {\n            if (!open || fullScreen) {\n                return;\n            }\n\n            switch (event.key) {\n                case 'ArrowLeft':\n                    slidePrev();\n                    break;\n                case 'ArrowRight':\n                    slideNext();\n                    break;\n            }\n        },\n        [fullScreen, open, slideNext, slidePrev],\n    );\n\n    const onUnmount = useCallback(() => {\n        setPlayingVideo(DEFAULT_PLAYING_VIDEO);\n        setMutedVideo(DEFAULT_MUTED_VIDEO);\n    }, [setPlayingVideo]);\n\n    useEffect(() => {\n        if (!uncontrolled && !swiper?.destroyed) {\n            swiper?.slideTo(currentSlideIndex);\n        }\n    }, [uncontrolled, currentSlideIndex, swiper]);\n\n    useEffect(() => {\n        document.addEventListener('keydown', handleKeyDown);\n\n        return () => {\n            document.removeEventListener('keydown', handleKeyDown);\n        };\n    }, [handleKeyDown]);\n\n    useEffect(() => {\n        let startY: number;\n        const abortController = new AbortController();\n        const { signal } = abortController;\n\n        document.addEventListener(\n            'touchstart',\n            (e) => {\n                startY = e.touches[0].clientY;\n            },\n            { signal },\n        );\n\n        document.addEventListener(\n            'touchmove',\n            (e) => {\n                const endY = e.changedTouches[0].clientY;\n                const deltaY = startY - endY;\n\n                // Если свайп вниз, закрываем галерею\n                if (deltaY < SWIPE_THRESHOLD) {\n                    onClose();\n                }\n            },\n            { signal },\n        );\n\n        return () => {\n            abortController.abort();\n        };\n    }, [onClose]);\n\n    const singleSlide = images.length === 1;\n\n    const showNavigationBar = !singleSlide && !fullScreen;\n\n    // eslint-disable-next-line react/jsx-no-constructed-context-values\n    const galleryContext: GalleryContext = {\n        view: isDesktop ? 'desktop' : 'mobile',\n        singleSlide,\n        currentSlideIndex,\n        images,\n        imagesMeta,\n        fullScreen,\n        initialSlide: uncontrolled ? initialSlide : currentSlideIndex,\n        setFullScreen,\n        playingVideo,\n        setPlayingVideo,\n        mutedVideo,\n        setMutedVideo,\n        hideNavigation,\n        setHideNavigation,\n        setImageMeta,\n        slideNext,\n        slidePrev,\n        slideTo,\n        getSwiper: () => swiper,\n        setSwiper,\n        onClose: handleClose,\n        setCurrentSlideIndex,\n        getCurrentImage: () => images[currentSlideIndex],\n        getCurrentImageMeta: () => imagesMeta[currentSlideIndex],\n    };\n\n    return (\n        <GalleryContext.Provider value={galleryContext}>\n            <BaseModal\n                open={open}\n                className={cn(styles.modal, popupClassName)}\n                onEscapeKeyDown={handleEscapeKeyDown}\n                Backdrop={Backdrop}\n                onUnmount={onUnmount}\n            >\n                <div\n                    className={cn(styles.container, {\n                        [styles.mobile]: !isDesktop,\n                    })}\n                >\n                    {isDesktop ? <Header /> : <HeaderMobile />}\n                    {images.length === 1 ? <Single /> : <ImageViewer />}\n                    <nav\n                        className={cn({\n                            [styles.navigationVideo]: isCurrentVideo && !isDesktop,\n                            [styles.hide]: showNavigationBar && hideNavigation && !isDesktop,\n                            [styles.hideInfo]: !showNavigationBar && hideNavigation && !isDesktop,\n                        })}\n                    >\n                        {!isDesktop && <Subtitles />}\n                        {isCurrentVideo && !isDesktop && bottomButton && (\n                            <BottomButton\n                                bottomButton={bottomButton}\n                                onClick={handleBottomButtonClick}\n                                className={styles.bottomButton}\n                            />\n                        )}\n\n                        {showNavigationBar && <NavigationBar />}\n                        {!isDesktop && <InfoBar />}\n                    </nav>\n                </div>\n            </BaseModal>\n        </GalleryContext.Provider>\n    );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"Component.js","sources":["../src/Component.tsx"],"sourcesContent":["import React, { type FC, type MouseEvent, useCallback, useEffect, useState } from 'react';\nimport cn from 'classnames';\nimport type SwiperCore from 'swiper';\n\nimport { BaseModal } from '@alfalab/core-components-base-modal';\nimport { useIsDesktop } from '@alfalab/core-components-mq';\n\nimport { BottomButton } from './components/bottom-button';\nimport { Single } from './components/image-viewer/single';\nimport { Subtitles } from './components/subtitles';\nimport { Header, HeaderMobile, ImageViewer, InfoBar, NavigationBar } from './components';\nimport { SWIPE_THRESHOLD } from './constants';\nimport { GalleryContext } from './context';\nimport { type GalleryImage, type ImageMeta } from './types';\n\nimport styles from './index.module.css';\n\nexport type GalleryProps = {\n    /**\n     * Управление видимостью\n     */\n    open: boolean;\n\n    /**\n     * Массив изображений\n     */\n    images: GalleryImage[];\n\n    /**\n     * Зациклить галерею\n     * @default true\n     */\n    loop?: boolean;\n\n    /**\n     * Индекс открытого изображение\n     * @default 0\n     */\n    initialSlide?: number;\n\n    /**\n     * Обработчик закрытия\n     */\n    onClose: () => void;\n\n    /**\n     * Индекс текущего изображения\n     */\n    slideIndex?: number;\n\n    /**\n     * Обработчик изменения текущего изображения\n     */\n    onSlideIndexChange?: (index: number) => void;\n\n    /**\n     * Дополнительный класс для попапа\n     */\n    popupClassName?: string;\n};\n\nconst DEFAULT_FULL_SCREEN = false;\nconst DEFAULT_MUTED_VIDEO = true;\nconst DEFAULT_PLAYING_VIDEO = true;\nconst DEFAULT_HIDE_NAVIGATION = false;\n\nconst Backdrop = () => null;\n\nexport const Gallery: FC<GalleryProps> = ({\n    open,\n    images,\n    slideIndex,\n    initialSlide = 0,\n    loop = true,\n    onClose,\n    onSlideIndexChange,\n    popupClassName,\n}) => {\n    const currentSlideIndexState = useState(initialSlide);\n    const uncontrolled = slideIndex === undefined;\n    const [currentSlideIndex, setCurrentSlideIndex] = uncontrolled\n        ? currentSlideIndexState\n        : [slideIndex, onSlideIndexChange];\n\n    const [swiper, setSwiper] = useState<SwiperCore>();\n    const [imagesMeta, setImagesMeta] = useState<ImageMeta[]>([]);\n    const [fullScreen, setFullScreen] = useState<boolean>(DEFAULT_FULL_SCREEN);\n    const [mutedVideo, setMutedVideo] = useState<boolean>(DEFAULT_MUTED_VIDEO);\n    const [playingVideo, setPlayingVideo] = useState<boolean>(DEFAULT_PLAYING_VIDEO);\n    const [hideNavigation, setHideNavigation] = useState<boolean>(DEFAULT_HIDE_NAVIGATION);\n    const [swipeY, setSwipeY] = useState<number>(0);\n\n    const isDesktop = useIsDesktop();\n\n    const isCurrentVideo = !!imagesMeta[currentSlideIndex]?.player?.current;\n\n    const bottomButton = images[currentSlideIndex]?.bottomButton;\n\n    const slideTo = useCallback(\n        (index: number) => {\n            if (images[index]) {\n                setCurrentSlideIndex?.(index);\n\n                if (swiper) {\n                    setPlayingVideo(true);\n                    swiper.slideTo(index);\n                }\n            }\n        },\n        [images, setCurrentSlideIndex, swiper],\n    );\n\n    const slideNext = useCallback(() => {\n        const lastIndex = images.length - 1;\n\n        let nextIndex = currentSlideIndex + 1;\n\n        if (nextIndex >= images.length) {\n            nextIndex = loop ? 0 : lastIndex;\n        }\n\n        slideTo(nextIndex);\n    }, [images.length, loop, currentSlideIndex, slideTo]);\n\n    const slidePrev = useCallback(() => {\n        const lastIndex = images.length - 1;\n\n        let nextIndex = currentSlideIndex - 1;\n\n        if (nextIndex < 0) {\n            nextIndex = loop ? lastIndex : 0;\n        }\n\n        slideTo(nextIndex);\n    }, [images.length, loop, currentSlideIndex, slideTo]);\n\n    const setImageMeta = useCallback((meta: ImageMeta, index: number) => {\n        setImagesMeta((prevImagesMeta) => {\n            const nextImagesMeta = prevImagesMeta.slice();\n\n            nextImagesMeta[index] = meta;\n\n            return nextImagesMeta;\n        });\n    }, []);\n\n    const handleBottomButtonClick = useCallback(\n        (e: MouseEvent) => {\n            e.stopPropagation();\n            if (bottomButton?.onClick) {\n                bottomButton.onClick(e);\n            }\n        },\n        [bottomButton],\n    );\n\n    const handleClose = useCallback(() => {\n        onClose();\n\n        if (uncontrolled) {\n            setCurrentSlideIndex?.(initialSlide);\n        }\n\n        setFullScreen(false);\n    }, [initialSlide, onClose, setCurrentSlideIndex, uncontrolled]);\n\n    const handleEscapeKeyDown = () => {\n        if (fullScreen) {\n            setFullScreen(false);\n        } else {\n            handleClose();\n        }\n    };\n\n    const handleKeyDown = useCallback(\n        (event: KeyboardEvent) => {\n            if (!open || fullScreen) {\n                return;\n            }\n\n            switch (event.key) {\n                case 'ArrowLeft':\n                    slidePrev();\n                    break;\n                case 'ArrowRight':\n                    slideNext();\n                    break;\n            }\n        },\n        [fullScreen, open, slideNext, slidePrev],\n    );\n\n    const onUnmount = useCallback(() => {\n        setPlayingVideo(DEFAULT_PLAYING_VIDEO);\n        setMutedVideo(DEFAULT_MUTED_VIDEO);\n    }, [setPlayingVideo]);\n\n    useEffect(() => {\n        if (!uncontrolled && !swiper?.destroyed) {\n            swiper?.slideTo(currentSlideIndex);\n        }\n    }, [uncontrolled, currentSlideIndex, swiper]);\n\n    useEffect(() => {\n        if (!open) {\n            setSwipeY(0);\n        }\n    }, [open]);\n\n    useEffect(() => {\n        document.addEventListener('keydown', handleKeyDown);\n\n        return () => {\n            document.removeEventListener('keydown', handleKeyDown);\n        };\n    }, [handleKeyDown]);\n\n    useEffect(() => {\n        if (!open) {\n            return undefined;\n        }\n\n        let startX = 0;\n        let startY = 0;\n        let lockedDirection: 'horizontal' | 'vertical' | null = null;\n        const directionLockThreshold = 10;\n\n        const abortController = new AbortController();\n        const { signal } = abortController;\n\n        document.addEventListener(\n            'touchstart',\n            (e) => {\n                startX = e.touches[0].clientX;\n                startY = e.touches[0].clientY;\n                lockedDirection = null;\n            },\n            { signal },\n        );\n\n        document.addEventListener(\n            'touchmove',\n            (e) => {\n                const currentX = e.touches[0].clientX;\n                const currentY = e.touches[0].clientY;\n                const deltaX = currentX - startX;\n                const deltaY = currentY - startY;\n\n                if (!lockedDirection) {\n                    const absX = Math.abs(deltaX);\n                    const absY = Math.abs(deltaY);\n\n                    if (absX > absY && absX > directionLockThreshold) {\n                        lockedDirection = 'horizontal';\n                    } else if (absY > absX && absY > directionLockThreshold) {\n                        lockedDirection = 'vertical';\n                    } else {\n                        return;\n                    }\n                }\n\n                if (lockedDirection === 'horizontal') {\n                    return;\n                }\n\n                if (deltaY <= 0) {\n                    setSwipeY(0);\n\n                    return;\n                }\n\n                setSwipeY(deltaY);\n\n                if (deltaY > SWIPE_THRESHOLD) {\n                    setSwipeY(0);\n                    onClose();\n                }\n            },\n            { signal },\n        );\n\n        document.addEventListener(\n            'touchend',\n            () => {\n                lockedDirection = null;\n                setSwipeY(0);\n            },\n            { signal },\n        );\n\n        return () => {\n            abortController.abort();\n        };\n    }, [onClose, open]);\n\n    const singleSlide = images.length === 1;\n\n    const showNavigationBar = !singleSlide && !fullScreen;\n\n    // eslint-disable-next-line react/jsx-no-constructed-context-values\n    const galleryContext: GalleryContext = {\n        view: isDesktop ? 'desktop' : 'mobile',\n        singleSlide,\n        currentSlideIndex,\n        images,\n        imagesMeta,\n        fullScreen,\n        initialSlide: uncontrolled ? initialSlide : currentSlideIndex,\n        setFullScreen,\n        playingVideo,\n        setPlayingVideo,\n        mutedVideo,\n        setMutedVideo,\n        hideNavigation,\n        setHideNavigation,\n        setImageMeta,\n        slideNext,\n        slidePrev,\n        slideTo,\n        getSwiper: () => swiper,\n        setSwiper,\n        onClose: handleClose,\n        setCurrentSlideIndex,\n        getCurrentImage: () => images[currentSlideIndex],\n        getCurrentImageMeta: () => imagesMeta[currentSlideIndex],\n    };\n\n    return (\n        <GalleryContext.Provider value={galleryContext}>\n            <BaseModal\n                open={open}\n                className={cn(styles.modal, popupClassName)}\n                onEscapeKeyDown={handleEscapeKeyDown}\n                Backdrop={Backdrop}\n                onUnmount={onUnmount}\n            >\n                <div\n                    data-content-area={true}\n                    style={{\n                        transform: `translateY(${swipeY}px)`,\n                    }}\n                    className={cn(styles.container, {\n                        [styles.mobile]: !isDesktop,\n                    })}\n                >\n                    {isDesktop ? <Header /> : <HeaderMobile />}\n                    {images.length === 1 ? <Single /> : <ImageViewer />}\n                    <nav\n                        className={cn({\n                            [styles.navigationVideo]: isCurrentVideo && !isDesktop,\n                            [styles.hide]: showNavigationBar && hideNavigation && !isDesktop,\n                            [styles.hideInfo]: !showNavigationBar && hideNavigation && !isDesktop,\n                        })}\n                    >\n                        {!isDesktop && <Subtitles />}\n                        {isCurrentVideo && !isDesktop && bottomButton && (\n                            <BottomButton\n                                bottomButton={bottomButton}\n                                onClick={handleBottomButtonClick}\n                                className={styles.bottomButton}\n                            />\n                        )}\n\n                        {showNavigationBar && <NavigationBar />}\n                        {!isDesktop && <InfoBar />}\n                    </nav>\n                </div>\n            </BaseModal>\n        </GalleryContext.Provider>\n    );\n};\n"],"names":[],"mappings":"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"}

package/moderncssm/components/buttons/index.d.ts

@@ -11,7 +11,9 @@ export declare const Pause: FC<Props>;
 export declare const ExitFullscreen: FC<Props>;
 export declare const MuteVideo: FC<Props>;
 export declare const UnmuteVideo: FC<Props>;
-export declare const Download: FC<Props>;
+export declare const Download: FC<Props & {
+    href?: string;
+}>;
 export declare const Share: FC<Props>;
 export declare const Exit: FC<Props>;
 export {};

package/moderncssm/components/buttons/index.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import cn from 'classnames';
 import { IconButton } from '@alfalab/core-components-icon-button/moderncssm';
+import { useIsDesktop } from '@alfalab/core-components-mq/moderncssm';
 import { TooltipDesktop } from '@alfalab/core-components-tooltip/moderncssm/desktop';
 import { ArrowLeftMIcon } from '@alfalab/icons-glyph/ArrowLeftMIcon';
 import { ArrowsInwardMIcon } from '@alfalab/icons-glyph/ArrowsInwardMIcon';
@@ -12,23 +13,61 @@ import { PointerDownMIcon } from '@alfalab/icons-glyph/PointerDownMIcon';
 import { ShareMIcon } from '@alfalab/icons-glyph/ShareMIcon';
 import { SoundCrossMIcon } from '@alfalab/icons-glyph/SoundCrossMIcon';
 import { SoundMIcon } from '@alfalab/icons-glyph/SoundMIcon';
+import { isVideo } from '../../utils/utils.js';
+import { downloadFile } from '../../utils/modern-download.js';
 import styles from './index.module.css';
 
-const Fullscreen = ({ buttonRef, ...restProps }) => (React.createElement(TooltipDesktop, { trigger: 'hover', position: 'bottom', content: '\u041E\u0442\u043A\u0440\u044B\u0442\u044C \u0432 \u043F\u043E\u043B\u043D\u043E\u044D\u043A\u0440\u0430\u043D\u043D\u043E\u043C \u0440\u0435\u0436\u0438\u043C\u0435', fallbackPlacements: ['bottom-end'] },
-    React.createElement(IconButton, { ...restProps, ref: buttonRef, icon: ArrowsOutwardMIcon, "aria-label": '\u041E\u0442\u043A\u0440\u044B\u0442\u044C \u0432 \u043F\u043E\u043B\u043D\u043E\u044D\u043A\u0440\u0430\u043D\u043D\u043E\u043C \u0440\u0435\u0436\u0438\u043C\u0435', className: styles.iconButton })));
+const Fullscreen = ({ buttonRef, ...restProps }) => {
+    const isDesktop = useIsDesktop();
+    const iconButton = (React.createElement(IconButton, { ...restProps, ref: buttonRef, icon: ArrowsOutwardMIcon, "aria-label": '\u041E\u0442\u043A\u0440\u044B\u0442\u044C \u0432 \u043F\u043E\u043B\u043D\u043E\u044D\u043A\u0440\u0430\u043D\u043D\u043E\u043C \u0440\u0435\u0436\u0438\u043C\u0435', className: styles.iconButton }));
+    return isDesktop ? (React.createElement(TooltipDesktop, { view: 'hint', colors: 'inverted', trigger: 'hover', position: 'bottom', content: '\u041E\u0442\u043A\u0440\u044B\u0442\u044C \u0432 \u043F\u043E\u043B\u043D\u043E\u044D\u043A\u0440\u0430\u043D\u043D\u043E\u043C \u0440\u0435\u0436\u0438\u043C\u0435', fallbackPlacements: ['bottom-end'] }, iconButton)) : (iconButton);
+};
 const BackArrow = ({ buttonRef, ...restProps }) => (React.createElement(IconButton, { ...restProps, ref: buttonRef, icon: ArrowLeftMIcon, "aria-label": '\u0412\u0435\u0440\u043D\u0443\u0442\u044C\u0441\u044F \u043D\u0430\u0437\u0430\u0434', className: styles.iconButton }));
 const Play = ({ buttonRef, className, ...restProps }) => (React.createElement(IconButton, { ...restProps, ref: buttonRef, icon: PlayCompactMIcon, "aria-label": '\u041F\u0440\u043E\u0438\u0433\u0440\u0430\u0442\u044C \u0432\u0438\u0434\u0435\u043E', className: cn(styles.iconButton, className) }));
 const Pause = ({ buttonRef, className, ...restProps }) => (React.createElement(IconButton, { ...restProps, ref: buttonRef, icon: PauseCompactMIcon, "aria-label": '\u041F\u043E\u0441\u0442\u0430\u0432\u0438\u0442\u044C \u043F\u0430\u0443\u0437\u0443 \u043D\u0430 \u0432\u0438\u0434\u0435\u043E', className: cn(styles.iconButton, className) }));
-const ExitFullscreen = ({ buttonRef, ...restProps }) => (React.createElement(TooltipDesktop, { trigger: 'hover', position: 'bottom', content: '\u0412\u044B\u0439\u0442\u0438 \u0438\u0437 \u043F\u043E\u043B\u043D\u043E\u044D\u043A\u0440\u0430\u043D\u043D\u043E\u0433\u043E \u0440\u0435\u0436\u0438\u043C\u0430', fallbackPlacements: ['bottom-end'] },
-    React.createElement(IconButton, { ...restProps, ref: buttonRef, icon: ArrowsInwardMIcon, "aria-label": '\u0412\u044B\u0439\u0442\u0438 \u0438\u0437 \u043F\u043E\u043B\u043D\u043E\u044D\u043A\u0440\u0430\u043D\u043D\u043E\u0433\u043E \u0440\u0435\u0436\u0438\u043C\u0430', className: styles.iconButton })));
-const MuteVideo = ({ buttonRef, className, ...restProps }) => (React.createElement(TooltipDesktop, { trigger: 'hover', position: 'bottom', content: '\u0412\u044B\u043A\u043B\u044E\u0447\u0438\u0442\u044C \u0437\u0432\u0443\u043A', fallbackPlacements: ['bottom-end'], targetClassName: className },
-    React.createElement(IconButton, { ...restProps, ref: buttonRef, icon: SoundMIcon, "aria-label": '\u0412\u044B\u043A\u043B\u044E\u0447\u0438\u0442\u044C \u0437\u0432\u0443\u043A', className: styles.iconButton })));
-const UnmuteVideo = ({ buttonRef, className, ...restProps }) => (React.createElement(TooltipDesktop, { trigger: 'hover', position: 'bottom', content: '\u0412\u043A\u043B\u044E\u0447\u0438\u0442\u044C \u0437\u0432\u0443\u043A', fallbackPlacements: ['bottom-end'], targetClassName: className },
-    React.createElement(IconButton, { ...restProps, ref: buttonRef, icon: SoundCrossMIcon, "aria-label": '\u0412\u043A\u043B\u044E\u0447\u0438\u0442\u044C \u0437\u0432\u0443\u043A', className: styles.iconButton })));
-const Download = (props) => (React.createElement(TooltipDesktop, { trigger: 'hover', position: 'bottom', content: '\u0421\u043A\u0430\u0447\u0430\u0442\u044C', fallbackPlacements: ['bottom-end'] },
-    React.createElement(IconButton, { ...props, icon: PointerDownMIcon, "aria-label": '\u0421\u043A\u0430\u0447\u0430\u0442\u044C', className: styles.iconButton })));
-const Share = (props) => (React.createElement(TooltipDesktop, { trigger: 'hover', position: 'bottom', content: '\u041F\u043E\u0434\u0435\u043B\u0438\u0442\u044C\u0441\u044F', fallbackPlacements: ['bottom-end'] },
-    React.createElement(IconButton, { ...props, icon: ShareMIcon, "aria-label": '\u041F\u043E\u0434\u0435\u043B\u0438\u0442\u044C\u0441\u044F', className: styles.iconButton })));
+const ExitFullscreen = ({ buttonRef, ...restProps }) => {
+    const isDesktop = useIsDesktop();
+    const iconButton = (React.createElement(IconButton, { ...restProps, ref: buttonRef, icon: ArrowsInwardMIcon, "aria-label": '\u0412\u044B\u0439\u0442\u0438 \u0438\u0437 \u043F\u043E\u043B\u043D\u043E\u044D\u043A\u0440\u0430\u043D\u043D\u043E\u0433\u043E \u0440\u0435\u0436\u0438\u043C\u0430', className: styles.iconButton }));
+    return isDesktop ? (React.createElement(TooltipDesktop, { view: 'hint', colors: 'inverted', trigger: 'hover', position: 'bottom', content: '\u0412\u044B\u0439\u0442\u0438 \u0438\u0437 \u043F\u043E\u043B\u043D\u043E\u044D\u043A\u0440\u0430\u043D\u043D\u043E\u0433\u043E \u0440\u0435\u0436\u0438\u043C\u0430', fallbackPlacements: ['bottom-end'] }, iconButton)) : (iconButton);
+};
+const MuteVideo = ({ buttonRef, className, ...restProps }) => {
+    const isDesktop = useIsDesktop();
+    const iconButton = (React.createElement(IconButton, { ...restProps, ref: buttonRef, icon: SoundMIcon, "aria-label": '\u0412\u044B\u043A\u043B\u044E\u0447\u0438\u0442\u044C \u0437\u0432\u0443\u043A', className: styles.iconButton }));
+    return isDesktop ? (React.createElement(TooltipDesktop, { view: 'hint', colors: 'inverted', trigger: 'hover', position: 'bottom', content: '\u0412\u044B\u043A\u043B\u044E\u0447\u0438\u0442\u044C \u0437\u0432\u0443\u043A', fallbackPlacements: ['bottom-end'], targetClassName: className }, iconButton)) : (iconButton);
+};
+const UnmuteVideo = ({ buttonRef, className, ...restProps }) => {
+    const isDesktop = useIsDesktop();
+    const iconButton = (React.createElement(IconButton, { ...restProps, ref: buttonRef, icon: SoundCrossMIcon, "aria-label": '\u0412\u043A\u043B\u044E\u0447\u0438\u0442\u044C \u0437\u0432\u0443\u043A', className: styles.iconButton }));
+    return isDesktop ? (React.createElement(TooltipDesktop, { view: 'hint', colors: 'inverted', trigger: 'hover', position: 'bottom', content: '\u0412\u043A\u043B\u044E\u0447\u0438\u0442\u044C \u0437\u0432\u0443\u043A', fallbackPlacements: ['bottom-end'], targetClassName: className }, iconButton)) : (iconButton);
+};
+const Download = ({ href, ...props }) => {
+    const isDesktop = useIsDesktop();
+    const handleMobileVideoDownload = async (e) => {
+        e.preventDefault();
+        if (!href)
+            return;
+        const fileName = props.download?.toString() || 'video';
+        const fileType = isVideo(href) ? 'video/*' : undefined;
+        await downloadFile({
+            url: href,
+            fileName,
+            fileType,
+        });
+    };
+    const iconButtonProps = {
+        ...props,
+        icon: PointerDownMIcon,
+        'aria-label': 'Скачать',
+        className: styles.iconButton,
+    };
+    const iconButton = !isDesktop && isVideo(href) ? (React.createElement(IconButton, { ...iconButtonProps, onClick: handleMobileVideoDownload })) : (React.createElement(IconButton, { ...iconButtonProps, href: href }));
+    return isDesktop ? (React.createElement(TooltipDesktop, { view: 'hint', colors: 'inverted', trigger: 'hover', position: 'bottom', content: '\u0421\u043A\u0430\u0447\u0430\u0442\u044C', fallbackPlacements: ['bottom-end'] }, iconButton)) : (iconButton);
+};
+const Share = (props) => {
+    const isDesktop = useIsDesktop();
+    const iconButton = (React.createElement(IconButton, { ...props, icon: ShareMIcon, "aria-label": '\u041F\u043E\u0434\u0435\u043B\u0438\u0442\u044C\u0441\u044F', className: styles.iconButton }));
+    return isDesktop ? (React.createElement(TooltipDesktop, { view: 'hint', colors: 'inverted', trigger: 'hover', position: 'bottom', content: '\u041F\u043E\u0434\u0435\u043B\u0438\u0442\u044C\u0441\u044F', fallbackPlacements: ['bottom-end'] }, iconButton)) : (iconButton);
+};
 const Exit = (props) => (React.createElement(IconButton, { ...props, icon: CrossMIcon, "aria-label": '\u0417\u0430\u043A\u0440\u044B\u0442\u044C', className: styles.iconButton }));
 
 export { BackArrow, Download, Exit, ExitFullscreen, Fullscreen, MuteVideo, Pause, Play, Share, UnmuteVideo };