@alfalab/core-components-gallery 7.2.3 → 7.3.0

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

@@ -1,6 +1,6 @@
 import './index.css';
 
-var styles = {"component":"gallery__component_jvjzj","mobile":"gallery__mobile_jvjzj","preview":"gallery__preview_jvjzj"};
+var styles = {"component":"gallery__component_11mwi","mobile":"gallery__mobile_11mwi","dragging":"gallery__dragging_11mwi","preview":"gallery__preview_11mwi"};
 
 export { styles as default };
 //# sourceMappingURL=index.module.css.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.module.css.js","sources":["../../src/components/navigation-bar/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/index.css';\n\n.component {\n    display: flex;\n    flex-wrap: nowrap;\n    align-content: center;\n    align-items: center;\n    flex-shrink: 0;\n    overflow-x: auto;\n    box-sizing: border-box;\n    padding: var(--gap-12) var(--gap-24);\n    scrollbar-width: none;\n    background-color: var(--color-static-neutral-0-inverted);\n\n    &.mobile {\n        padding: var(--gap-8) var(--gap-24);\n    }\n\n    &::-webkit-scrollbar {\n        display: none;\n    }\n}\n\n.previews {\n    display: flex;\n}\n\n.preview {\n    flex-shrink: 0;\n    margin-right: var(--gap-4);\n\n    &.mobile {\n        margin-right: var(--gap-2);\n    }\n\n    &:first-child {\n        margin-left: auto;\n    }\n\n    &:last-child {\n        margin-right: auto;\n    }\n}\n"],"names":[],"mappings":";;AAEgB,aAAe,CAAC,WAAW,CAAC,0BAA0B,CAAC,QAAQ,CAAC,uBAAuB,CAAsC,SAAS,CAAC,wBAAwB,CAAC;;;;"}
+{"version":3,"file":"index.module.css.js","sources":["../../src/components/navigation-bar/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/index.css';\n\n.component {\n    display: flex;\n    flex-wrap: nowrap;\n    align-content: center;\n    align-items: center;\n    flex-shrink: 0;\n    overflow-x: auto;\n    box-sizing: border-box;\n    padding: var(--gap-12) var(--gap-32);\n    scrollbar-width: none;\n    background-color: var(--color-static-neutral-0-inverted);\n    cursor: grab;\n    user-select: none;\n\n    &.mobile {\n        padding: var(--gap-8);\n    }\n\n    &.dragging {\n        cursor: grabbing;\n\n        & * {\n            cursor: grabbing;\n        }\n    }\n\n    &::-webkit-scrollbar {\n        display: none;\n    }\n}\n\n.previews {\n    display: flex;\n}\n\n.preview {\n    flex-shrink: 0;\n    margin-right: var(--gap-4);\n\n    &.mobile {\n        margin-right: var(--gap-2);\n    }\n\n    &:first-child {\n        margin-left: auto;\n    }\n\n    &:last-child {\n        margin-right: auto;\n    }\n}\n"],"names":[],"mappings":";;AAEgB,aAAe,CAAC,WAAW,CAAC,0BAA0B,CAAC,QAAQ,CAAC,uBAAuB,CAAC,UAAU,CAAC,yBAAyB,CAAsC,SAAS,CAAC,wBAAwB,CAAC;;;;"}

package/esm/components/subtitles/index.css

@@ -3,7 +3,7 @@
     --gap-16: 16px;
     --gap-32: 32px;
 }
-.gallery__subtitles_j6roo {
+.gallery__subtitles_ljsjn {
     position: absolute;
     align-self: flex-end;
     padding: var(--gap-0) var(--gap-32);
@@ -16,10 +16,10 @@
         opacity 500ms ease-in-out,
         margin-bottom 270ms ease-in-out;
 }
-.gallery__subtitles_j6roo.gallery__mobile_j6roo {
+.gallery__subtitles_ljsjn.gallery__mobile_ljsjn {
         position: static;
         position: initial;
     }
-.gallery__hideSubtitles_j6roo {
+.gallery__hideSubtitles_ljsjn {
     opacity: 0;
 }

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

@@ -1,6 +1,6 @@
 import './index.css';
 
-var styles = {"subtitles":"gallery__subtitles_j6roo","mobile":"gallery__mobile_j6roo","hideSubtitles":"gallery__hideSubtitles_j6roo"};
+var styles = {"subtitles":"gallery__subtitles_ljsjn","mobile":"gallery__mobile_ljsjn","hideSubtitles":"gallery__hideSubtitles_ljsjn"};
 
 export { styles as default };
 //# sourceMappingURL=index.module.css.js.map

package/esm/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/esm/constants.js

@@ -1,4 +1,4 @@
-var SWIPE_THRESHOLD = -250;
+var SWIPE_THRESHOLD = 250;
 var PREVIEW_WIDTH_MOBILE = 46;
 var PREVIEW_HEIGHT_MOBILE = 46;
 var PREVIEW_WIDTH_DESKTOP = 56;

package/esm/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/esm/hooks/use-custom-subtitles.js

@@ -1,8 +1,7 @@
-import { __spreadArray } from 'tslib';
 import { useContext, useState, useEffect } from 'react';
 import { GalleryContext } from '../context.js';
 
-var SUBTITLES_ANIMATION_SPEED = 0.5;
+var SUBTITLES_FADE_DURATION_SECONDS = 0.5;
 var useCustomSubtitles = function () {
     var _a;
     var getCurrentImageMeta = useContext(GalleryContext).getCurrentImageMeta;
@@ -11,24 +10,71 @@ var useCustomSubtitles = function () {
     var _c = 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;
     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 = __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/esm/hooks/use-custom-subtitles.js.map

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

@@ -1,3 +1,4 @@
 export { Gallery } from './Component.js';
 export { TestIds } from './utils/constants.js';
+import 'tslib';
 //# sourceMappingURL=index.js.map

package/esm/index.js.map

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

package/esm/index.module.css.js

@@ -1,6 +1,6 @@
 import './index.css';
 
-var 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"};
+var 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/esm/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/esm/utils/index.d.ts

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

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

@@ -0,0 +1,109 @@
+import { __awaiter, __generator } from '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 __awaiter(void 0, void 0, void 0, function () {
+    var response;
+    return __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 __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 __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*/];
+        }
+    });
+}); };
+
+export { downloadFile };
+//# sourceMappingURL=modern-download.js.map

package/esm/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/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/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/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/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');