(function($){
let main_player,
video_type,
userHasInteracted=false;
$(document).on('click', function (){
userHasInteracted=true;
});
$(window).on('load', function (){
const video_containers=$(
'.modula-video-content:not(.modula-video-item)'
);
video_containers.each(async function(index){
const player=$(this).find('.modula_video_preview_element'
)[ 0 ],
poster=$(this).find('.pic'),
icon=$(this).find('.modula-video-icon');
let watchtime=null;
if('undefined'!==typeof $(player).data('autothumb') &&
'1'==$(player).data('autothumb')
){
$(this).addClass('autoplay');
if($(this).hasClass('modula-video-slider-item') ){
return;
}
player.play();
poster.css('opacity', '0');
icon.hide();
if(0 < modulaVideoPreview.duration){
watchtime=setInterval(async function (){
player.load();
await player.play();
}, modulaVideoPreview.duration * 1000);
}
player.addEventListener('ended', async function (){
player.load();
await player.play();
});
}});
});
$(window).on('load', function (){
const player_el=$('#modula-video-player'),
videoId=player_el.attr('video_id'),
autoplay=player_el.attr('video_autoplay');
video_type=player_el.attr('video_type');
let playerPromise;
if('youtube'==video_type){
playerPromise=create_YT_player(
player_el[ 0 ],
videoId,
autoplay
);
}else if('vimeo'==video_type){
playerPromise=create_Vimeo_player(
player_el[ 0 ],
videoId,
autoplay
);
}else{
playerPromise=create_html5_player(
player_el[ 0 ],
videoId,
autoplay
);
}
playerPromise.then(function(player){
if(1==autoplay&&! userHasInteracted){
if('youtube'==video_type){
player.mute();
}else if('vimeo'==video_type){
player.setMuted(true);
}else{
player.prop('muted', true);
}}
});
});
function create_YT_player(el, id, autoplay){
return new Promise(function(resolve, reject){
main_player=new YT.Player(el, {
videoId: id,
height: '100%',
width: '100%',
mute: 0,
events: {
onReady(e){
if(1==autoplay&&! userHasInteracted){
e.target.mute();
e.target.playVideo();
}else if(1==autoplay&&userHasInteracted){
e.target.playVideo();
}
resolve(main_player);
},
onStateChange(e){
if(0==e.data){
playNextInQueue();
}},
},
});
});
}
function create_Vimeo_player(el, id, autoplay){
return new Promise(function(resolve, reject){
const options={
id,
autoplay,
muted: 1==autoplay&&! userHasInteracted ? 1:0,
autopause: false,
};
main_player=new Vimeo.Player(el, options);
main_player.on('ended', function (){
playNextInQueue();
});
resolve(main_player);
});
}
function create_html5_player(el, id, autoplay){
return new Promise(function(resolve, reject){
main_player=$('<video/>', {
width: '100%',
height: '100%',
controls: true,
autoplay: 1==autoplay ? true:false,
});
if(1==autoplay&&! userHasInteracted){
main_player.prop('muted', true);
}
$('<source/>', {
src: id,
type: 'video/mp4',
}).appendTo(main_player);
$(el).append(main_player);
main_player.on('ended', function (){
playNextInQueue();
});
resolve(main_player);
});
}
function playNextInQueue(){
let current=jQuery('.modula-video-item.current-item'),
next=current.next(),
parent=current.parent();
current.removeClass('current-item');
if('undefined'===typeof next||0==next.length){
next=parent.find('.modula-video-item')[ 0 ];
next=$(next);
}
next.addClass('current-item');
doClickAction(next.find('.modula-video-list-overlay') );
}
$(document).on('click', '.modula-video-list-overlay', function (){
video_type=$(this).attr('video_type');
let playerPromise;
userHasInteracted=true;
playerPromise=doClickAction(this);
playerPromise.then(function(player){
if('youtube'==video_type){
player.unMute();
}else if('vimeo'==video_type){
player.setMuted(false);
}else{
player.prop('muted', false);
}});
});
$(document).on('click',
'.modula_video_preview_image, .modula-video-icon',
function (){
$(this).parent().find('.modula_video_preview_image').hide();
$(this).parent().find('.modula-video-icon').hide();
if('youtube'==video_type){
main_player.playVideo();
}else if('vimeo'==video_type){
main_player.play();
}else{
main_player[ 0 ].play();
}}
);
function doClickAction(el){
video_type=$(el).attr('video_type');
let video_id=$(el).attr('video_id'),
video_autoplay=$(el).attr('video_autoplay'),
player_el=$('#modula-video-player'),
new_el=$('<div>', { class: 'modula_video_preview_element' }),
current=$('.modula-video-item.current-item'),
wrap=$(el).parents('.modula-video-item'),
playerPromise,
player_wrap=player_el.parent();
current.removeClass('current-item');
wrap.addClass('current-item');
player_wrap.append(new_el);
player_el.remove();
new_el.attr('id', 'modula-video-player');
if('youtube'==video_type){
playerPromise=create_YT_player(
new_el[ 0 ],
video_id,
video_autoplay
);
}else if('vimeo'==video_type){
playerPromise=create_Vimeo_player(
new_el[ 0 ],
video_id,
video_autoplay
);
}else{
playerPromise=create_html5_player(
new_el[ 0 ],
video_id,
video_autoplay
);
}
if(0==video_autoplay){
player_wrap
.parent()
.find('img.modula_video_preview_image, picture.modula_video_preview_image imge'
)
.attr('src', $(el).attr('video_thumb') );
player_wrap
.parent()
.find('picture.modula_video_preview_image source')
.attr('srcset', $(el).attr('video_thumb') );
player_wrap
.parent()
.find('img.modula_video_preview_image, picture.modula_video_preview_image img, .modula-video-icon'
)
.show();
}else{
player_wrap
.parent()
.find('img.modula_video_preview_image, picture.modula_video_preview_image img, .modula-video-icon'
)
.hide();
}
return playerPromise;
}
$(document).on('modula_api_after_init', function(event, inst){
add_video_preview_events();
});
$('.modula-slider').on('init', function(event, inst){
add_video_preview_events();
});
function add_video_preview_events(){
const video_container=$('.modula-video-content');
let watchtime=null;
let hoverTimeout=null;
video_container.on('mouseenter', function (){
if($(this).hasClass('autoplay') ){
return;
}
const player=jQuery(this).find('.modula_video_preview_element'
)[ 0 ];
if('undefined'===typeof player){
return;
}
hoverTimeout=setTimeout(function (){
player.play();
if(modulaVideoPreview.duration > 0){
watchtime=setInterval(async function (){
player.load();
await player.play();
}, modulaVideoPreview.duration * 1000);
}}, 200);
});
video_container.on('mouseleave', function (){
if($(this).hasClass('autoplay') ){
return;
}
const player=jQuery(this).find('.modula_video_preview_element'
)[ 0 ];
if('undefined'===typeof player){
return;
}
clearInterval(watchtime);
clearInterval(hoverTimeout);
player.load();
player.pause();
});
}})(jQuery);