Добавлена поддержка VK Видео

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();
     }
 };
 
@@ -102,10 +133,13 @@ const init = async (items = [], options = {}, index = 0) => {
         import('swiper/modules'),
     ]);
 
-    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">
@@ -117,6 +151,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">
@@ -125,7 +180,7 @@ const init = async (items = [], options = {}, index = 0) => {
         `;
     });
 
-    if (isVideoInGallery && !window.GalleryYTPlayer) {
+    if (isVideoInGallery.yt && !window.GalleryYTPlayer) {
         window.GalleryYTPlayer = {
             state: false,
             get init() {
@@ -148,6 +203,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;
+                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;
+            }
+        }, 100);
+    }
+
     document.body.insertAdjacentHTML(
         'beforeend',
         `
@@ -188,7 +269,7 @@ const init = async (items = [], options = {}, index = 0) => {
             playVideo(this.slides[this.activeIndex]);
         }
 
-        if (isVideoInGallery) {
+        if (isVideoInGallery.yt || isVideoInGallery.vk) {
             setVideoSize(gallery);
         }
     });
@@ -203,7 +284,7 @@ const init = async (items = [], options = {}, index = 0) => {
     });
 
     swiper.on('resize', function () {
-        if (isVideoInGallery) {
+        if (isVideoInGallery.yt || isVideoInGallery.vk) {
             setVideoSize(gallery);
         }
     });

styles.css

@@ -65,3 +65,6 @@ div.advdominion-lg__video {
 
 .advdominion-lg__video_youtube {
 }
+
+.advdominion-lg__video_vk {
+}