-
- `;
- }
- return `
-
`;
- } else if (/rutube\.ru/.test(item)) {
- isVideoInGallery.rt = true;
- const videoId = /video\/(\w+)/.exec(item);
- if (videoId === null) {
- return `
+ } 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 `
- Ошибка при загрузке VK-плеера
+
- ${caption ? `
+ Загрузка YouTube-плеера...
${caption}
` : ''}
-
-
- ${caption ? `
`;
- });
+ });
- if (isVideoInGallery.yt && !window.GalleryYTPlayer) {
- window.GalleryYTPlayer = {
- state: false,
- get init() {
- return this.state;
- },
- set init(val) {
- this.state = val;
- for (const i of this.callback) {
- i(val);
- }
- },
- callback: [],
- addListener(callback) {
- this.callback.push(callback);
- },
- };
+ /*
+ GalleryYTPlayer и GalleryVKPlayer — простые накопители колбэков до готовности внешнего API.
+ Пока плеер не загружен, playVideo регистрирует себя через addListener и будет вызван снова,
+ когда init станет true.
+ */
+ if (isVideoInGallery.yt && !window.GalleryYTPlayer) {
+ window.GalleryYTPlayer = {
+ state: false,
+ get init() {
+ return this.state;
+ },
+ set init(val) {
+ this.state = val;
+ for (const i of this.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) {
- window.GalleryVKPlayer = {
- state: false,
- get init() {
- return this.state;
- },
- set init(val) {
- this.state = val;
- for (const i of this.callback) {
- i(val);
- }
- },
- callback: [],
- addListener(callback) {
- this.callback.push(callback);
- },
- };
-
- const checkInterval = setInterval(() => {
- if (window.VK?.VideoPlayer) {
- clearInterval(checkInterval);
- window.GalleryVKPlayer.init = true;
+ if (isVideoInGallery.vk && !window.GalleryVKPlayer) {
+ window.GalleryVKPlayer = {
+ state: false,
+ get init() {
+ return this.state;
+ },
+ set init(val) {
+ this.state = val;
+ for (const i of this.callback) {
+ i(val);
}
- }, 100);
- }
+ },
+ callback: [],
+ addListener(callback) {
+ this.callback.push(callback);
+ },
+ };
- if (isVideoInGallery.rt) {
- window.GalleryRTPlayer = new Set();
- window.addEventListener('message', (event) => {
+ // У VK нет события готовности API, поэтому проверяем его появление опросом.
+ const checkInterval = setInterval(() => {
+ 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(
- 'beforeend',
- `
+ document.body.insertAdjacentHTML(
+ 'beforeend',
+ `
`,
- );
+ );
- 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'), {
- init: false,
- initialSlide: index,
- ...options.swiper,
- modules: [...new Set([Navigation, Pagination, ...(options.swiper?.modules || [])])],
- });
+ const swiper = new Swiper(gallery.querySelector('.advdominion-lg__container'), {
+ init: false,
+ initialSlide: index,
+ ...options.swiper,
+ modules: [...new Set([Navigation, Pagination, ...(options.swiper?.modules || [])])],
+ });
- swiper.on('init', function init() {
- gallery.querySelector('.advdominion-lg__container').style.cssText = `
+ swiper.on('init', function init() {
+ gallery.querySelector('.advdominion-lg__container').style.cssText = `
visibility: '';
`;
- if (this.slides[this.activeIndex].classList.contains('advdominion-lg__item_video')) {
- playVideo(this.slides[this.activeIndex]);
- }
+ if (this.slides[this.activeIndex].classList.contains('advdominion-lg__item_video')) {
+ playVideo(this.slides[this.activeIndex]);
+ }
+ });
- if (isVideoInGallery.yt || isVideoInGallery.vk || isVideoInGallery.rt) {
- setVideoSize(gallery);
- }
- });
-
- swiper.on('slideChange', function init() {
- setTimeout(() => {
- for (const [index, slide] of Object.entries(this.slides)) {
- if (slide.classList.contains('advdominion-lg__item_video')) {
- if (Number(index) === this.activeIndex) {
- playVideo(slide);
- } else {
- pauseVideo(slide);
- }
+ swiper.on('slideChange', function init() {
+ setTimeout(() => {
+ for (const [index, slide] of Object.entries(this.slides)) {
+ 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 = () => {
- hide(options?.animation?.hide?.duration, options?.animation?.hide?.easing);
- },
- 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 closeHandler = () => {
+ hide(options?.animation?.hide?.duration, options?.animation?.hide?.easing);
+ controller.abort();
};
+ 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({
diff --git a/packages/lightbox-gallery/package.json b/packages/lightbox-gallery/package.json
index 9063d62..13688a6 100644
--- a/packages/lightbox-gallery/package.json
+++ b/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": {
diff --git a/packages/lightbox-gallery/styles.css b/packages/lightbox-gallery/styles.css
index 197bac7..6b0c902 100644
--- a/packages/lightbox-gallery/styles.css
+++ b/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 {
- Ошибка при загрузке RuTube-плеера
+
`;
- }
- return `
-
- `;
}
return `
+
+ `;
+ } else if (/rutube\.ru/.test(item)) {
+ isVideoInGallery.rt = true;
+ const videoId = /video\/(\w+)/.exec(item);
+ if (videoId === null) {
+ return `
+
+ `;
+ }
+ return `
+
+ `;
+ }
+ return `
+
- ${caption ? `
+
+ Ошибка при загрузке VK-плеера
+
${caption}
` : ''}
+ ${caption ? `${escapeHtml(caption)}
` : ''}
${caption}
` : ''}
+ ${caption ? `${escapeHtml(caption)}
` : ''}
- ${items.join('')}
+ ${slides.join('')}
${options.pagination || ''}
${options.navigation || ''}