v1.2.0

index.js

@@ -1,4 +1,4 @@
-/* globals GalleryYTPlayer, YT */
+/* globals GalleryYTPlayer, YT, GalleryVKPlayer, VK */
 
 import getScrollbarWidth from '@advdominion/get-scrollbar-width';
 
@@ -9,8 +9,16 @@ const getYTPlayer = () => {
     document.body.append(script);
 };
 
+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');
 
     if (youtube) {
         if (slide.YTPlayer) {
@@ -36,14 +44,37 @@ const playVideo = (slide) => {
                 playVideo(slide);
             });
         }
+    } else if (vk) {
+        if (slide.VKPlayer) {
+            slide.VKPlayer.play();
+        } else if (window.VK?.VideoPlayer) {
+            if (GalleryVKPlayer.state) {
+                slide.VKPlayer = VK.VideoPlayer(vk);
+                slide.VKPlayer.on('inited', () => {
+                    slide.VKPlayer.play();
+                });
+            } else {
+                GalleryVKPlayer.addListener(() => {
+                    playVideo(slide);
+                });
+            }
+        } else {
+            getVKPlayer();
+            GalleryVKPlayer.addListener(() => {
+                playVideo(slide);
+            });
+        }
     }
 };
 
 const pauseVideo = (slide) => {
     const youtube = slide.querySelector('.advdominion-lg__video_youtube');
+    const vk = slide.querySelector('.advdominion-lg__video_vk');
 
     if (youtube && slide.YTPlayer) {
         slide.YTPlayer.pauseVideo();
+    } else if (vk && slide.VKPlayer) {
+        slide.VKPlayer.pause();
     }
 };
 
@@ -69,7 +100,7 @@ const setVideoSize = (gallery) => {
 const hide = async (duration = 500, easing = 'linear') => {
     const gallery = document.body.querySelector('.advdominion-lg');
 
-    await gallery.animate([{opacity: 1}, {opacity: 0}], {
+    await gallery.animate([{ opacity: 1 }, { opacity: 0 }], {
         duration,
         easing,
     }).finished;
@@ -90,20 +121,23 @@ const show = async (duration = 500, easing = 'linear') => {
         margin-right: ${getScrollbarWidth()}px
     `;
 
-    await gallery.animate([{opacity: 0}, {opacity: 1}], {
+    await gallery.animate([{ opacity: 0 }, { opacity: 1 }], {
         duration,
         easing,
     }).finished;
 };
 
 const init = async (items = [], options = {}, index = 0) => {
-    const {Swiper, Navigation, Pagination} = await import('swiper');
+    const { Swiper, Navigation, Pagination } = await import('swiper');
     Swiper.use([Navigation, Pagination]);
 
-    let isVideoInGallery = false;
+    const isVideoInGallery = {
+        yt: false,
+        vk: false,
+    };
     items = items.map((item) => {
         if (/youtube\.com\/watch\?v=/.test(item)) {
-            isVideoInGallery = true;
+            isVideoInGallery.yt = true;
             return `
                 <div class="advdominion-lg__item advdominion-lg__item_video swiper-slide">
                     <div class="advdominion-lg__video-wrapper">
@@ -115,6 +149,27 @@ const init = async (items = [], options = {}, index = 0) => {
                     </div>
                 </div>
             `;
+        } else if (/vkvideo\.ru\/video/.test(item)) {
+            isVideoInGallery.vk = true;
+            const videoId = /vkvideo.ru\/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">
+                                Ошибка при загрузке VK-плеера
+                            </div>
+                        </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_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;" allowfullscreen></iframe>
+                    </div>
+                </div>
+            `;
         }
         return `
             <div class="advdominion-lg__item swiper-slide">
@@ -123,7 +178,7 @@ const init = async (items = [], options = {}, index = 0) => {
         `;
     });
 
-    if (isVideoInGallery && !window.GalleryYTPlayer) {
+    if (isVideoInGallery.yt && !window.GalleryYTPlayer) {
         window.GalleryYTPlayer = {
             state: false,
             get init() {
@@ -146,6 +201,32 @@ const init = async (items = [], options = {}, index = 0) => {
         };
     }
 
+    if (isVideoInGallery.vk && !window.GalleryVKPlayer) {
+        window.GalleryVKPlayer = {
+            state: false,
+            get init() {
+                return this.state;
+            },
+            set init(val) {
+                this.state = val;
+                this.callback.forEach((i) => {
+                    i(val);
+                });
+            },
+            callback: [],
+            addListener(callback) {
+                this.callback.push(callback);
+            },
+        };
+
+        const checkInterval = setInterval(() => {
+            if (window.VK?.VideoPlayer) {
+                clearInterval(checkInterval);
+                window.GalleryVKPlayer.init = true;
+            }
+        }, 100);
+    }
+
     document.body.insertAdjacentHTML(
         'beforeend',
         `
@@ -157,28 +238,36 @@ const init = async (items = [], options = {}, index = 0) => {
                     <div class="advdominion-lg__wrapper swiper-wrapper">
                         ${items.join('')}
                     </div>
-                    ${options.pagination ? options.pagination : ''}
-                    ${options.navigation ? options.navigation : ''}
+                    ${options.pagination || ''}
+                    ${options.navigation || ''}
                 </div>
             </div>
-        `
+        `,
     );
 
     const gallery = document.body.querySelector('.advdominion-lg');
 
+    gallery.querySelector('.advdominion-lg__container').style = `
+        visibility: hidden;
+    `;
+
     await show(options?.animation?.show?.duration, options?.animation?.show?.easing);
 
     const swiper = new Swiper(
         gallery.querySelector('.advdominion-lg__container'),
-        Object.assign({init: false, initialSlide: index}, options.swiper)
+        Object.assign({ init: false, initialSlide: index }, options.swiper),
     );
 
     swiper.on('init', function () {
+        gallery.querySelector('.advdominion-lg__container').style = `
+            visibility: '';
+        `;
+
         if (this.slides[this.activeIndex].classList.contains('advdominion-lg__item_video')) {
             playVideo(this.slides[this.activeIndex]);
         }
 
-        if (isVideoInGallery) {
+        if (isVideoInGallery.yt || isVideoInGallery.vk) {
             setVideoSize(gallery);
         }
     });
@@ -193,7 +282,7 @@ const init = async (items = [], options = {}, index = 0) => {
     });
 
     swiper.on('resize', function () {
-        if (isVideoInGallery) {
+        if (isVideoInGallery.yt || isVideoInGallery.vk) {
             setVideoSize(gallery);
         }
     });
@@ -213,17 +302,25 @@ const init = async (items = [], options = {}, index = 0) => {
         },
         {
             once: true,
-        }
+        },
     );
 };
 
 export default (container, options) => {
     const items = [];
-    for (const [index, element] of [...container.children].entries()) {
-        items.push(element.href);
-        element.addEventListener('click', (event) => {
+    if (options.single) {
+        items.push(container.href);
+        container.addEventListener('click', (event) => {
             event.preventDefault();
-            init(items, options, index);
+            init(items, options);
         });
+    } else {
+        for (const [index, element] of [...container.children].entries()) {
+            items.push(element.href);
+            element.addEventListener('click', (event) => {
+                event.preventDefault();
+                init(items, options, index);
+            });
+        }
     }
 };

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@advdominion/lightbox-gallery",
-    "version": "1.0.1",
+    "version": "1.2.0",
     "type": "module",
     "packageManager": "yarn@3.6.0",
     "main": "index.js",

styles.css

@@ -29,7 +29,6 @@
     align-items: center;
     display: flex;
     justify-content: center;
-    padding: 50px 55px;
 }
 
 .advdominion-lg__item_video {
@@ -37,6 +36,7 @@
 
 .advdominion-lg__image {
     max-height: 100%;
+    max-width: 100%;
 }
 
 .advdominion-lg__video-wrapper {
@@ -62,3 +62,6 @@ div.advdominion-lg__video {
 
 .advdominion-lg__video_youtube {
 }
+
+.advdominion-lg__video_vk {
+}