@advdominion/lightbox-gallery@5.1.0

.yarnrc.yml

@@ -4,8 +4,5 @@ packageExtensions:
   '@advdominion/stylelint-config@*':
     dependencies:
       stylelint: '*'
-  lerna@*:
-    dependencies:
-      ci-info: '*'
 
 yarnPath: .yarn/releases/yarn-4.18.0.cjs

README.md

@@ -8,8 +8,18 @@
 
 ## Публикация новых версий
 
+1. Вручную поднять `version` в `packages/<пакет>/package.json`
+2. Опубликовать пакет:
+
 ```bash
-yarn lerna publish
+yarn workspace @advdominion/<пакет> npm publish
+```
+
+3. Поставить git-тег:
+
+```bash
+git tag @advdominion/<пакет>@<версия>
+git push origin @advdominion/<пакет>@<версия>
 ```
 
 ## Обновление зависимостей

lerna.json

@@ -1,4 +0,0 @@
-{
-  "version": "independent",
-  "npmClient": "yarn"
-}

package.json

@@ -10,7 +10,6 @@
   },
   "devDependencies": {
     "husky": "^9.1.7",
-    "lerna": "^10.0.1",
     "lint-staged": "^17.5.1",
     "oxfmt": "^0.70.0",
     "oxlint": "^1.85.0"

packages/lightbox-gallery/index.js

@@ -2,403 +2,440 @@
 
 import { getScrollbarWidth } from '@advdominion/get-scrollbar-width';
 
-const getYTPlayer = () => {
+const ESCAPE_MAP = {
-        const script = document.createElement('script');
+    '&': '&',
-        script.src = 'https://www.youtube.com/player_api';
+    '<': '&lt;',
-        script.async = true;
+    '>': '&gt;',
-        document.body.append(script);
+    '"': '&quot;',
-    },
+    "'": '&#39;',
-    getVKPlayer = () => {
+};
-        const script = document.createElement('script');
-        script.src = 'https://vk.com/js/api/videoplayer.js';
-        script.async = true;
-        document.body.append(script);
-    },
-    playVideo = (slide) => {
-        const youtube = slide.querySelector('.advdominion-lg__video_youtube'),
-            vk = slide.querySelector('.advdominion-lg__video_vk'),
-            rt = slide.querySelector('.advdominion-lg__video_rt');
 
-        if (youtube) {
+/*
-            if (slide.YTPlayer) {
+    Экранирует HTML в значениях (сейчас — подписи), которые попадают в разметку через insertAdjacentHTML.
-                if (slide.classList.contains('swiper-slide-active')) {
+    Без этого подпись с тегами выполнится как разметка. Готового санитайзера с нужной поддержкой браузеров нет.
-                    slide.YTPlayer.playVideo();
+*/
-                }
+const escapeHtml = (value) => String(value).replaceAll(/[&<>"']/g, (char) => ESCAPE_MAP[char]);
-            } else if (window.YT) {
+
-                if (GalleryYTPlayer.state) {
+const getYTPlayer = () => {
-                    slide.YTPlayer = new YT.Player(youtube, {
+    const script = document.createElement('script');
-                        videoId: youtube.dataset.id,
+    script.src = 'https://www.youtube.com/player_api';
-                        events: {
+    script.async = true;
-                            onReady(event) {
+    document.body.append(script);
-                                if (slide.classList.contains('swiper-slide-active')) {
+};
-                                    event.target.playVideo();
+
-                                }
+const getVKPlayer = () => {
-                            },
+    const script = document.createElement('script');
+    script.src = 'https://vk.com/js/api/videoplayer.js';
+    script.async = true;
+    document.body.append(script);
+};
+
+const playVideo = (slide) => {
+    const youtube = slide.querySelector('.advdominion-lg__video_youtube');
+    const vk = slide.querySelector('.advdominion-lg__video_vk');
+    const rt = slide.querySelector('.advdominion-lg__video_rt');
+
+    if (youtube) {
+        if (slide.YTPlayer) {
+            if (slide.classList.contains('swiper-slide-active')) {
+                slide.YTPlayer.playVideo();
+            }
+        } else if (window.YT) {
+            if (GalleryYTPlayer.state) {
+                slide.YTPlayer = new YT.Player(youtube, {
+                    videoId: youtube.dataset.id,
+                    events: {
+                        onReady(event) {
+                            if (slide.classList.contains('swiper-slide-active')) {
+                                event.target.playVideo();
+                            }
                         },
-                    });
+                    },
-                } else {
+                });
-                    GalleryYTPlayer.addListener(() => {
-                        playVideo(slide);
-                    });
-                }
             } else {
-                getYTPlayer();
                 GalleryYTPlayer.addListener(() => {
                     playVideo(slide);
                 });
             }
-        } else if (vk) {
+        } else {
-            if (slide.VKPlayer) {
+            getYTPlayer();
-                if (slide.classList.contains('swiper-slide-active')) {
+            GalleryYTPlayer.addListener(() => {
-                    slide.VKPlayer.play();
+                playVideo(slide);
-                }
+            });
-            } else if (window.VK?.VideoPlayer) {
+        }
-                if (GalleryVKPlayer.state) {
+    } else if (vk) {
-                    slide.VKPlayer = VK.VideoPlayer(vk);
+        if (slide.VKPlayer) {
-                    slide.VKPlayer.on('inited', () => {
+            if (slide.classList.contains('swiper-slide-active')) {
-                        if (slide.classList.contains('swiper-slide-active')) {
+                slide.VKPlayer.play();
-                            slide.VKPlayer.play();
+            }
-                        }
+        } else if (window.VK?.VideoPlayer) {
-                    });
+            if (GalleryVKPlayer.state) {
-                } else {
+                slide.VKPlayer = VK.VideoPlayer(vk); // eslint-disable-line new-cap
-                    GalleryVKPlayer.addListener(() => {
+                slide.VKPlayer.on('inited', () => {
-                        playVideo(slide);
+                    if (slide.classList.contains('swiper-slide-active')) {
-                    });
+                        slide.VKPlayer.play();
-                }
+                    }
+                });
             } else {
-                getVKPlayer();
                 GalleryVKPlayer.addListener(() => {
                     playVideo(slide);
                 });
             }
-        } else if (rt) {
+        } else {
-            const videoId = /embed\/(\w+)/.exec(rt.getAttribute('src'))?.[1],
+            getVKPlayer();
-                checkInterval = setInterval(() => {
+            GalleryVKPlayer.addListener(() => {
-                    if (window.GalleryRTPlayer) {
+                playVideo(slide);
-                        if (window.GalleryRTPlayer.has(videoId)) {
+            });
-                            clearInterval(checkInterval);
+        }
-                            if (slide.classList.contains('swiper-slide-active')) {
+    } else if (rt) {
-                                rt.contentWindow.postMessage(
+        /*
-                                    JSON.stringify({
+            RuTube не отдаёт объект плеера вроде YT.Player или VK.VideoPlayer — о готовности он сообщает
-                                        type: 'player:play',
+            через postMessage, а id готовых видео копятся в window.GalleryRTPlayer (см. слушатель ниже).
-                                        data: {},
+            Поэтому ждём появления своего id в этом наборе и только тогда отправляем команду.
-                                    }),
+        */
-                                    '*',
+        const videoId = /embed\/(\w+)/.exec(rt.getAttribute('src'))?.[1];
-                                );
+        const checkInterval = setInterval(() => {
-                            }
+            if (window.GalleryRTPlayer) {
-                        }
+                if (window.GalleryRTPlayer.has(videoId)) {
-                    } else {
+                    clearInterval(checkInterval);
-                        clearInterval(checkInterval);
+                    if (slide.classList.contains('swiper-slide-active')) {
+                        rt.contentWindow.postMessage(
+                            JSON.stringify({
+                                type: 'player:play',
+                                data: {},
+                            }),
+                            '*',
+                        );
                     }
-                }, 100);
+                }
-            slide.checkInterval = checkInterval;
+            } else {
-        }
+                clearInterval(checkInterval);
-    },
-    pauseVideo = (slide) => {
-        const youtube = slide.querySelector('.advdominion-lg__video_youtube'),
-            vk = slide.querySelector('.advdominion-lg__video_vk'),
-            rt = slide.querySelector('.advdominion-lg__video_rt');
-
-        if (youtube && slide.YTPlayer) {
-            slide.YTPlayer.pauseVideo();
-        } else if (vk && slide.VKPlayer) {
-            slide.VKPlayer.pause();
-        } else if (rt) {
-            rt.contentWindow.postMessage(
-                JSON.stringify({
-                    type: 'player:pause',
-                    data: {},
-                }),
-                '*',
-            );
-        }
-    },
-    setVideoSize = (gallery) => {
-        const items = gallery.querySelectorAll('.advdominion-lg__video-wrapper');
-        items[0].style.cssText = '';
-        let height = (items[0].getBoundingClientRect().width * 9) / 16,
-            width = '';
-        if (height > items[0].getBoundingClientRect().height) {
-            height = items[0].getBoundingClientRect().height;
-            width = `${(height * 16) / 9}px`;
-        }
-        for (const item of items) {
-            item.style.cssText = `
-            height: ${height}px;
-            width: ${width};
-        `;
-        }
-    },
-    hide = async (duration = 500, easing = 'linear') => {
-        const gallery = document.body.querySelector('.advdominion-lg');
-
-        await gallery.animate([{ opacity: 1 }, { opacity: 0 }], {
-            duration,
-            easing,
-        }).finished;
-
-        // Очищаем интервалы проверки для видео
-        for (const slide of gallery.querySelectorAll('.advdominion-lg__item_video')) {
-            if (slide.checkInterval) {
-                clearInterval(slide.checkInterval);
             }
+        }, 100);
+        slide.checkInterval = checkInterval;
+    }
+};
+
+const pauseVideo = (slide) => {
+    const youtube = slide.querySelector('.advdominion-lg__video_youtube');
+    const vk = slide.querySelector('.advdominion-lg__video_vk');
+    const rt = slide.querySelector('.advdominion-lg__video_rt');
+
+    if (youtube && slide.YTPlayer) {
+        slide.YTPlayer.pauseVideo();
+    } else if (vk && slide.VKPlayer) {
+        slide.VKPlayer.pause();
+    } else if (rt) {
+        rt.contentWindow.postMessage(
+            JSON.stringify({
+                type: 'player:pause',
+                data: {},
+            }),
+            '*',
+        );
+    }
+};
+
+const hide = async (duration = 500, easing = 'linear') => {
+    const gallery = document.body.querySelector('.advdominion-lg');
+
+    await gallery.animate([{ opacity: 1 }, { opacity: 0 }], {
+        duration,
+        easing,
+    }).finished;
+
+    // Очищаем интервалы проверки для видео
+    for (const slide of gallery.querySelectorAll('.advdominion-lg__item_video')) {
+        if (slide.checkInterval) {
+            clearInterval(slide.checkInterval);
         }
+    }
 
-        gallery.remove();
+    gallery.remove();
-        delete window.GalleryRTPlayer;
+    // Сбрасываем накопленные id готовых RuTube-плееров, чтобы следующее открытие начинало с чистого состояния.
+    delete window.GalleryRTPlayer;
 
-        document.body.style.cssText = `
+    document.body.style.overflow = '';
-        overflow: '';
+    document.body.style.marginRight = '';
-        margin-right: '';
+};
-    `;
-    },
-    show = async (duration = 500, easing = 'linear') => {
-        const gallery = document.body.querySelector('.advdominion-lg');
 
-        document.body.style.cssText = `
+const show = async (duration = 500, easing = 'linear') => {
-        overflow: hidden;
+    const gallery = document.body.querySelector('.advdominion-lg');
-        margin-right: ${getScrollbarWidth()}px
-    `;
 
-        await gallery.animate([{ opacity: 0 }, { opacity: 1 }], {
+    document.body.style.overflow = 'hidden';
-            duration,
+    document.body.style.marginRight = `${getScrollbarWidth()}px`;
-            easing,
+
-        }).finished;
+    await gallery.animate([{ opacity: 0 }, { opacity: 1 }], {
-    },
+        duration,
-    init = async (items = [], options = {}, index = 0) => {
+        easing,
-        const [{ default: Swiper }, { Navigation, Pagination }] = await Promise.all([
+    }).finished;
-                import('swiper'),
+};
-                import('swiper/modules'),
+
-            ]),
+const init = async (items = [], options = {}, index = 0) => {
-            isVideoInGallery = {
+    // Вторая галерея поверх первой сломала бы закрытие: show/hide ищут только первый элемент .advdominion-lg.
-                yt: false,
+    if (document.body.querySelector('.advdominion-lg')) {
-                vk: false,
+        return;
-                rt: false,
+    }
-            };
+    // Один отменяемый контроллер на время жизни галереи: при закрытии снимает все её слушатели.
-        items = items.map(({ url: item, caption }) => {
+    const controller = new AbortController();
-            if (/youtube\.com\/watch\?v=/.test(item)) {
+    const [{ default: Swiper }, { Navigation, Pagination }] = await Promise.all([
-                isVideoInGallery.yt = true;
+        import('swiper'),
-                return `
+        import('swiper/modules'),
+    ]);
+    const isVideoInGallery = {
+        yt: false,
+        vk: false,
+        rt: false,
+    };
+    const slides = items.map(({ url: item, caption }) => {
+        if (/youtube\.com\/watch\?v=/.test(item)) {
+            isVideoInGallery.yt = true;
+            return `
                 <div class="advdominion-lg__item advdominion-lg__item_video swiper-slide">
-                    <div class="advdominion-lg__video-wrapper">
+                    <div class="advdominion-lg__video-area">
-                        <div
-                            class="advdominion-lg__video advdominion-lg__video_youtube"
-                            data-id="${/v=([\w-]+)/i.exec(item)[1]}">
-                            Загрузка YouTube-плеера...
-                        </div>
-                    </div>
-                    ${caption ? `<div class="advdominion-lg__caption">${caption}</div>` : ''}
-                </div>
-            `;
-            } else if (/(?:vkvideo\.ru|vk\.com)\/video/.test(item)) {
-                isVideoInGallery.vk = true;
-                const videoId = /(?:vkvideo\.ru|vk\.com)\/video(-?\d+)_(\d+)/.exec(item);
-                if (videoId === null) {
-                    return `
-                    <div class="advdominion-lg__item advdominion-lg__item_video swiper-slide">
                         <div class="advdominion-lg__video-wrapper">
-                            <div class="advdominion-lg__video advdominion-lg__video_vk">
+                            <div
-                                Ошибка при загрузке VK-плеера
+                                class="advdominion-lg__video advdominion-lg__video_youtube"
+                                data-id="${/v=([\w-]+)/i.exec(item)[1]}">
+                                Загрузка YouTube-плеера...
                             </div>
                         </div>
-                        ${caption ? `<div class="advdominion-lg__caption">${caption}</div>` : ''}
                     </div>
-                `;
+                    ${caption ? `<div class="advdominion-lg__caption">${escapeHtml(caption)}</div>` : ''}
-                }
-                return `
-                <div class="advdominion-lg__item advdominion-lg__item_video swiper-slide">
-                    <div class="advdominion-lg__video-wrapper">
-                        <iframe
-                            class="advdominion-lg__video advdominion-lg__video_vk"
-                            src="https://vkvideo.ru/video_ext.php?oid=${videoId[1]}&id=${videoId[2]}&hd=4&js_api=1"
-                            allow="autoplay; encrypted-media; fullscreen; picture-in-picture; screen-wake-lock;">
-                        </iframe>
-                    </div>
-                    ${caption ? `<div class="advdominion-lg__caption">${caption}</div>` : ''}
                 </div>
             `;
-            } else if (/rutube\.ru/.test(item)) {
+        } else if (/(?:vkvideo\.ru|vk\.com)\/video/.test(item)) {
-                isVideoInGallery.rt = true;
+            isVideoInGallery.vk = true;
-                const videoId = /video\/(\w+)/.exec(item);
+            const videoId = /(?:vkvideo\.ru|vk\.com)\/video(-?\d+)_(\d+)/.exec(item);
-                if (videoId === null) {
+            if (videoId === null) {
-                    return `
+                return `
                     <div class="advdominion-lg__item advdominion-lg__item_video swiper-slide">
-                        <div class="advdominion-lg__video-wrapper">
+                        <div class="advdominion-lg__video-area">
-                            <div class="advdominion-lg__video advdominion-lg__video_rt">
+                            <div class="advdominion-lg__video-wrapper">
-                                Ошибка при загрузке RuTube-плеера
+                                <div class="advdominion-lg__video advdominion-lg__video_vk">
+                                    Ошибка при загрузке VK-плеера
+                                </div>
                             </div>
                         </div>
-                        ${caption ? `<div class="advdominion-lg__caption">${caption}</div>` : ''}
+                        ${caption ? `<div class="advdominion-lg__caption">${escapeHtml(caption)}</div>` : ''}
                     </div>
                 `;
-                }
-                return `
-                <div class="advdominion-lg__item advdominion-lg__item_video swiper-slide">
-                    <div class="advdominion-lg__video-wrapper">
-                        <iframe
-                            class="advdominion-lg__video advdominion-lg__video_rt"
-                            src="https://rutube.ru/play/embed/${videoId[1]}"
-                            allow="autoplay; encrypted-media; fullscreen; picture-in-picture; screen-wake-lock;">
-                        </iframe>
-                    </div>
-                    ${caption ? `<div class="advdominion-lg__caption">${caption}</div>` : ''}
-                </div>
-            `;
             }
             return `
+                <div class="advdominion-lg__item advdominion-lg__item_video swiper-slide">
+                    <div class="advdominion-lg__video-area">
+                        <div class="advdominion-lg__video-wrapper">
+                            <iframe
+                                class="advdominion-lg__video advdominion-lg__video_vk"
+                                src="https://vkvideo.ru/video_ext.php?oid=${videoId[1]}&id=${videoId[2]}&hd=4&js_api=1"
+                                allow="autoplay; encrypted-media; fullscreen; picture-in-picture; screen-wake-lock;">
+                            </iframe>
+                        </div>
+                    </div>
+                    ${caption ? `<div class="advdominion-lg__caption">${escapeHtml(caption)}</div>` : ''}
+                </div>
+            `;
+        } else if (/rutube\.ru/.test(item)) {
+            isVideoInGallery.rt = true;
+            const videoId = /video\/(\w+)/.exec(item);
+            if (videoId === null) {
+                return `
+                    <div class="advdominion-lg__item advdominion-lg__item_video swiper-slide">
+                        <div class="advdominion-lg__video-area">
+                            <div class="advdominion-lg__video-wrapper">
+                                <div class="advdominion-lg__video advdominion-lg__video_rt">
+                                    Ошибка при загрузке RuTube-плеера
+                                </div>
+                            </div>
+                        </div>
+                        ${caption ? `<div class="advdominion-lg__caption">${escapeHtml(caption)}</div>` : ''}
+                    </div>
+                `;
+            }
+            return `
+                <div class="advdominion-lg__item advdominion-lg__item_video swiper-slide">
+                    <div class="advdominion-lg__video-area">
+                        <div class="advdominion-lg__video-wrapper">
+                            <iframe
+                                class="advdominion-lg__video advdominion-lg__video_rt"
+                                src="https://rutube.ru/play/embed/${videoId[1]}"
+                                allow="autoplay; encrypted-media; fullscreen; picture-in-picture; screen-wake-lock;">
+                            </iframe>
+                        </div>
+                    </div>
+                    ${caption ? `<div class="advdominion-lg__caption">${escapeHtml(caption)}</div>` : ''}
+                </div>
+            `;
+        }
+        return `
             <div class="advdominion-lg__item swiper-slide">
                 <img class="advdominion-lg__image" src="${item}" alt="" loading="lazy">
-                ${caption ? `<div class="advdominion-lg__caption">${caption}</div>` : ''}
+                ${caption ? `<div class="advdominion-lg__caption">${escapeHtml(caption)}</div>` : ''}
             </div>
         `;
-        });
+    });
 
-        if (isVideoInGallery.yt && !window.GalleryYTPlayer) {
+    /*
-            window.GalleryYTPlayer = {
+        GalleryYTPlayer и GalleryVKPlayer — простые накопители колбэков до готовности внешнего API.
-                state: false,
+        Пока плеер не загружен, playVideo регистрирует себя через addListener и будет вызван снова,
-                get init() {
+        когда init станет true.
-                    return this.state;
+    */
-                },
+    if (isVideoInGallery.yt && !window.GalleryYTPlayer) {
-                set init(val) {
+        window.GalleryYTPlayer = {
-                    this.state = val;
+            state: false,
-                    for (const i of this.callback) {
+            get init() {
-                        i(val);
+                return this.state;
-                    }
+            },
-                },
+            set init(val) {
-                callback: [],
+                this.state = val;
-                addListener(callback) {
+                for (const i of this.callback) {
-                    this.callback.push(callback);
+                    i(val);
-                },
+                }
-            };
+            },
+            callback: [],
+            addListener(callback) {
+                this.callback.push(callback);
+            },
+        };
 
+        /*
+            YouTube вызывает onYouTubeIframeAPIReady только один раз, поэтому нельзя просто перезаписать его:
+            если API уже загружен или колбэк занят другим кодом, он больше не сработает. Поэтому сохраняем
+            прежний обработчик и явно отмечаем готовность, когда API уже присутствует.
+        */
+        if (window.YT?.Player) {
+            window.GalleryYTPlayer.init = true;
+        } else {
+            const prevOnYouTubeIframeAPIReady = window.onYouTubeIframeAPIReady;
             window.onYouTubeIframeAPIReady = () => {
+                prevOnYouTubeIframeAPIReady?.();
                 window.GalleryYTPlayer.init = true;
             };
         }
+    }
 
-        if (isVideoInGallery.vk && !window.GalleryVKPlayer) {
+    if (isVideoInGallery.vk && !window.GalleryVKPlayer) {
-            window.GalleryVKPlayer = {
+        window.GalleryVKPlayer = {
-                state: false,
+            state: false,
-                get init() {
+            get init() {
-                    return this.state;
+                return this.state;
-                },
+            },
-                set init(val) {
+            set init(val) {
-                    this.state = val;
+                this.state = val;
-                    for (const i of this.callback) {
+                for (const i of this.callback) {
-                        i(val);
+                    i(val);
-                    }
-                },
-                callback: [],
-                addListener(callback) {
-                    this.callback.push(callback);
-                },
-            };
-
-            const checkInterval = setInterval(() => {
-                if (window.VK?.VideoPlayer) {
-                    clearInterval(checkInterval);
-                    window.GalleryVKPlayer.init = true;
                 }
-            }, 100);
+            },
-        }
+            callback: [],
+            addListener(callback) {
+                this.callback.push(callback);
+            },
+        };
 
-        if (isVideoInGallery.rt) {
+        // У VK нет события готовности API, поэтому проверяем его появление опросом.
-            window.GalleryRTPlayer = new Set();
+        const checkInterval = setInterval(() => {
-            window.addEventListener('message', (event) => {
+            if (window.VK?.VideoPlayer) {
+                clearInterval(checkInterval);
+                window.GalleryVKPlayer.init = true;
+            }
+        }, 100);
+    }
+
+    if (isVideoInGallery.rt) {
+        window.GalleryRTPlayer = new Set();
+        window.addEventListener(
+            'message',
+            (event) => {
                 if (event.origin.includes('rutube.ru') && typeof event.data === 'string') {
                     const message = JSON.parse(event.data);
                     if (message.type === 'player:ready') {
                         window.GalleryRTPlayer.add(message.data.videoId);
                     }
                 }
-            });
+            },
-        }
+            { signal: controller.signal },
+        );
+    }
 
-        document.body.insertAdjacentHTML(
+    document.body.insertAdjacentHTML(
-            'beforeend',
+        'beforeend',
-            `
+        `
             <div class="advdominion-lg">
                 <button class="advdominion-lg__close" type="button">
                     <svg class="advdominion-lg__close-icon"><use href="${options.icons.close}" /></svg>
                 </button>
                 <div class="advdominion-lg__container swiper">
                     <div class="advdominion-lg__wrapper swiper-wrapper">
-                        ${items.join('')}
+                        ${slides.join('')}
                     </div>
                     ${options.pagination || ''}
                     ${options.navigation || ''}
                 </div>
             </div>
         `,
-        );
+    );
 
-        const gallery = document.body.querySelector('.advdominion-lg');
+    const gallery = document.body.querySelector('.advdominion-lg');
 
-        gallery.querySelector('.advdominion-lg__container').style.cssText = `
+    gallery.querySelector('.advdominion-lg__container').style.cssText = `
         visibility: hidden;
     `;
 
-        await show(options?.animation?.show?.duration, options?.animation?.show?.easing);
+    await show(options?.animation?.show?.duration, options?.animation?.show?.easing);
 
-        const swiper = new Swiper(gallery.querySelector('.advdominion-lg__container'), {
+    const swiper = new Swiper(gallery.querySelector('.advdominion-lg__container'), {
-            init: false,
+        init: false,
-            initialSlide: index,
+        initialSlide: index,
-            ...options.swiper,
+        ...options.swiper,
-            modules: [...new Set([Navigation, Pagination, ...(options.swiper?.modules || [])])],
+        modules: [...new Set([Navigation, Pagination, ...(options.swiper?.modules || [])])],
-        });
+    });
 
-        swiper.on('init', function init() {
+    swiper.on('init', function init() {
-            gallery.querySelector('.advdominion-lg__container').style.cssText = `
+        gallery.querySelector('.advdominion-lg__container').style.cssText = `
             visibility: '';
         `;
 
-            if (this.slides[this.activeIndex].classList.contains('advdominion-lg__item_video')) {
+        if (this.slides[this.activeIndex].classList.contains('advdominion-lg__item_video')) {
-                playVideo(this.slides[this.activeIndex]);
+            playVideo(this.slides[this.activeIndex]);
-            }
+        }
+    });
 
-            if (isVideoInGallery.yt || isVideoInGallery.vk || isVideoInGallery.rt) {
+    swiper.on('slideChange', function init() {
-                setVideoSize(gallery);
+        setTimeout(() => {
-            }
+            for (const [index, slide] of Object.entries(this.slides)) {
-        });
+                if (slide.classList.contains('advdominion-lg__item_video')) {
-
+                    if (Number(index) === this.activeIndex) {
-        swiper.on('slideChange', function init() {
+                        playVideo(slide);
-            setTimeout(() => {
+                    } else {
-                for (const [index, slide] of Object.entries(this.slides)) {
+                        pauseVideo(slide);
-                    if (slide.classList.contains('advdominion-lg__item_video')) {
-                        if (Number(index) === this.activeIndex) {
-                            playVideo(slide);
-                        } else {
-                            pauseVideo(slide);
-                        }
                     }
                 }
-            }, 0);
-        });
-
-        swiper.on('resize', () => {
-            if (isVideoInGallery.yt || isVideoInGallery.vk || isVideoInGallery.rt) {
-                setVideoSize(gallery);
             }
-        });
+        }, 0);
+    });
 
-        swiper.init();
+    swiper.init();
 
-        const closeHandler = () => {
+    const closeHandler = () => {
-                hide(options?.animation?.hide?.duration, options?.animation?.hide?.easing);
+        hide(options?.animation?.hide?.duration, options?.animation?.hide?.easing);
-            },
+        controller.abort();
-            keydownHandler = (e) => {
-                if (e.key === 'Escape') {
-                    closeHandler();
-                    document.body.removeEventListener('keydown', keydownHandler);
-                }
-            };
-
-        gallery.querySelector('.advdominion-lg__close').addEventListener('click', closeHandler);
-        document.body.addEventListener('keydown', keydownHandler);
     };
+    const keydownHandler = (e) => {
+        if (e.key === 'Escape') {
+            closeHandler();
+        }
+    };
+
+    gallery.querySelector('.advdominion-lg__close').addEventListener('click', closeHandler);
+    document.body.addEventListener('keydown', keydownHandler, { signal: controller.signal });
+};
 
 export const gallery = (container, options) => {
     const items = [];
+    /*
+        Подпись берётся из элемента, на который указывает data-gallery-caption у ссылки,
+        поэтому одна и та же подпись не дублируется в разметке галереи.
+    */
     if (options.single) {
         const element = container.children[0];
         items.push({

packages/lightbox-gallery/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@advdominion/lightbox-gallery",
-  "version": "5.0.1",
+  "version": "5.1.0",
   "type": "module",
   "main": "index.js",
   "repository": {

packages/lightbox-gallery/styles.css

@@ -39,15 +39,31 @@
 .advdominion-lg__item_video.swiper-slide {
 }
 
+/*
+    Обёртка вокруг видео внутри слайда. Слайд — это колонка из видео и подписи, поэтому обёртка
+    забирает всю высоту, оставшуюся после подписи и отступа, и центрирует в себе видео.
+    container-type: size нужен, чтобы cqw/cqh в .advdominion-lg__video-wrapper считались от этой
+    области, а не от всего слайда: иначе 16:9-блок вырастет на высоту подписи и наедет на неё.
+*/
+.advdominion-lg__video-area {
+    align-items: center;
+    container-type: size;
+    display: flex;
+    flex-grow: 1;
+    justify-content: center;
+    min-height: 0;
+    width: 100%;
+}
+
 .advdominion-lg__image {
     max-height: 100%;
     max-width: 100%;
 }
 
 .advdominion-lg__video-wrapper {
-    height: 100%;
+    aspect-ratio: 16 / 9;
     position: relative;
-    width: 100%;
+    width: min(100cqw, calc(100cqh * 16 / 9));
 }
 
 .advdominion-lg__video {