(function ($){
'use strict';
var WoostifyProductVideo={
init: function (){
this.bindEvents();
this.initPhotoswipe();
var $gallery=$('.product-gallery .product-images-container');
var $mainImage=$gallery.find('.image-item').first();
var $lightboxToggleButton=$('.photoswipe-toggle-button');
if($mainImage.length&&$mainImage.data('video-autoplay')==1){
this.playVideo($mainImage);
}
if($mainImage.hasClass('has-video')){
$lightboxToggleButton.css('display', 'none');
}else{
$lightboxToggleButton.css('display', '');
}
if($gallery.length){
$gallery.on('change.flickity', function (event, index){
var $activeSlide=$(this).find('.image-item').eq(index);
if($activeSlide.hasClass('has-video')){
$lightboxToggleButton.css('display', 'none');
}else{
$lightboxToggleButton.css('display', '');
}});
}
$('.image-item.has-video').removeClass('ez-zoom is-loading is-error');
$('.image-item.has-video .easyzoom-notice').remove();
},
bindEvents: function (){
var self=this;
document.addEventListener('click', function (e){
var target=e.target;
if(target.tagName==='IFRAME') return;
var videoSlide=target.closest('.image-item.has-video');
if(videoSlide){
if(videoSlide.classList.contains('playing-video')){
if(!target.closest('.woostify-product-video-container')){
e.preventDefault();
e.stopPropagation();
e.stopImmediatePropagation();
}
return;
}
e.preventDefault();
e.stopPropagation();
e.stopImmediatePropagation();
self.playVideo($(videoSlide));
}}, true);
$(document).on('click', '.image-item.has-video', function (e){
if(!$(this).hasClass('playing-video')){
if($(e.target).closest('.woostify-video-icon-main').length) return;
e.preventDefault();
e.stopPropagation();
self.playVideo($(this));
}});
$(document).on('click', '.image-item.has-video a', function (e){
e.preventDefault();
e.stopPropagation();
e.stopImmediatePropagation();
var wrapper=$(this).closest('.image-item');
if(!wrapper.hasClass('playing-video')){
self.playVideo(wrapper);
}});
/*
$(document).on('click', '.thumbnail-item.has-video', function(){
});
*/
var $gallery=$('.product-gallery .product-images-container');
if($gallery.length){
$gallery.on('select.flickity', function (){
self.stopAllVideos();
});
}
$(document).on('click', '.flickity-prev-next-button', function (){
self.stopAllVideos();
});
$(document).on('mouseenter', '.image-item.has-video', function (){
var $this=$(this);
$this.removeClass('is-loading is-error');
$this.find('.easyzoom-notice').remove();
if($.data(this, 'easyZoom')){
var api=$this.data('easyZoom');
if(api&&typeof api.teardown==='function'){
api.teardown();
}}
});
},
stopAllVideos: function (){
var self=this;
$('.image-item.playing-video').each(function (){
var $wrapper=$(this);
var $video=$wrapper.find('video');
if($video.length){
$video[0].pause();
}
var $iframe=$wrapper.find('iframe');
if($iframe.length){
var src=$iframe.attr('src');
$iframe.attr('src', '');
$iframe.attr('src', src.replace('&autoplay=1', '&autoplay=0'));
}
$wrapper.removeClass('playing-video');
$wrapper.find('.woostify-video-icon').css('display', '');
$wrapper.find('.woostify-product-video-container').remove();
});
},
playVideo: function (wrapper){
var source=wrapper.data('video-source')||'youtube';
var url=wrapper.data('video-url');
var autoplay=wrapper.data('video-autoplay');
var mute=wrapper.data('video-mute');
if(!url) return;
wrapper.find('.woostify-video-icon').css('display', 'none');
if(source==='mp4'){
var videoHtml='<div class="woostify-product-video-container">';
videoHtml +='<video controls autoplay';
if(mute==1||autoplay==1){
videoHtml +=' muted';
}
videoHtml +=' playsinline style="width:100%;height:100%;object-fit:cover;">';
videoHtml +='<source src="' + url + '" type="video/mp4">';
videoHtml +='Your browser does not support the video tag.';
videoHtml +='</video>';
videoHtml +='</div>';
if(wrapper.find('.woostify-product-video-container').length===0){
wrapper.append(videoHtml);
}
wrapper.addClass('playing-video');
}else{
var videoId=this.getYoutubeId(url);
if(videoId){
var embedUrl='https://www.youtube.com/embed/' + videoId + '?autoplay=1&rel=0&enablejsapi=1';
if(mute==1||autoplay==1){
embedUrl +='&mute=1';
}
var iframe='<div class="woostify-product-video-container"><iframe src="' + embedUrl + '" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>';
if(wrapper.find('.woostify-product-video-container').length===0){
wrapper.append(iframe);
}
wrapper.addClass('playing-video');
}}
},
getYoutubeId: function (url){
var regExp=/^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=)([^#\&\?]*).*/;
var match=url.match(regExp);
if(match&&match[2].length==11){
return match[2];
}else{
return null;
}},
initPhotoswipe: function (){
}};
$(document).ready(function (){
WoostifyProductVideo.init();
});
})(jQuery);