diff --git a/index.js b/index.js index 62bf423..3503991 100644 --- a/index.js +++ b/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(); } }; @@ -100,10 +131,13 @@ const init = async (items = [], options = {}, index = 0) => { 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 `
@@ -115,6 +149,27 @@ const init = async (items = [], options = {}, index = 0) => {
`; + } else if (/vkvideo\.ru\/video/.test(item)) { + isVideoInGallery.vk = true; + const videoId = /vkvideo.ru\/video(-?\d+)_(\d+)/.exec(item); + if (videoId === null) { + return ` +
+
+
+ Ошибка при загрузке VK-плеера +
+
+
+ `; + } + return ` +
+
+ +
+
+ `; } return `
@@ -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', ` @@ -186,7 +267,7 @@ const init = async (items = [], options = {}, index = 0) => { playVideo(this.slides[this.activeIndex]); } - if (isVideoInGallery) { + if (isVideoInGallery.yt || isVideoInGallery.vk) { setVideoSize(gallery); } }); @@ -201,7 +282,7 @@ const init = async (items = [], options = {}, index = 0) => { }); swiper.on('resize', function () { - if (isVideoInGallery) { + if (isVideoInGallery.yt || isVideoInGallery.vk) { setVideoSize(gallery); } }); diff --git a/styles.css b/styles.css index 445e840..716017c 100644 --- a/styles.css +++ b/styles.css @@ -62,3 +62,6 @@ div.advdominion-lg__video { .advdominion-lg__video_youtube { } + +.advdominion-lg__video_vk { +}