Project-Pro/redline.com.pl
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
main
redline.com.pl/modules/steasyvideo/views/js/front.js
Jacek Pyziak eacf500d18 feat: Add YouTube video support and update admin templates 
- Introduced a new YouTube tech integration in `youtube.min.js` for enhanced video playback.
- Created new admin template files for managing video settings, including `index.php` and `steasyvideo-pro.tpl`.
- Updated hook templates (`device_mode.tpl`, `forquickview.tpl`, `header.tpl`, `miniature.tpl`, `miniature_tb.tpl`, and predefined templates) to include video functionality.
- Implemented caching headers in several PHP files to improve performance.
- Ensured all new templates include proper licensing information and copyright notices.
2025-05-23 19:27:41 +02:00

1052 lines
44 KiB
JavaScript
Raw Permalink Blame History

/**
* Copyright since 2007 PrestaShop SA and Contributors
* PrestaShop is an International Registered Trademark & Property of PrestaShop SA
*
* NOTICE OF LICENSE
*
* This source file is subject to the Open Software License (OSL 3.0)
* that is bundled with this package in the file LICENSE.md.
* It is also available through the world-wide-web at this URL:
* https://opensource.org/licenses/OSL-3.0
* If you did not receive a copy of the license and are unable to
* obtain it through the world-wide-web, please send an email
* to license@prestashop.com so we can send you a copy immediately.
*
* DISCLAIMER
*
* Do not edit or add to this file if you wish to upgrade PrestaShop to newer
* versions in the future. If you wish to customize PrestaShop for your
* needs please refer to https://devdocs.prestashop.com/ for more information.
*
* @author PrestaShop SA and Contributors <contact@prestashop.com>
* @copyright Since 2007 PrestaShop SA and Contributors
* @license https://opensource.org/licenses/OSL-3.0 Open Software License (OSL 3.0)
*/
(function()
{
this.easyVideo = function()
{
var defaults = {};
this.elements = [];
this.settings = (arguments[0] && typeof arguments[0] === 'object') ? extendDefaults(defaults,arguments[0]) : defaults;
this.tries = 0;
this.slider_timer = null;
this.resize_timer = null;
this.product_videos = null;
this.device = '';
$(document).on('click','.st_easy_video_doplay', function(e){
e.preventDefault();
e.stopPropagation();
bofang($(this).data('id'));
return false;
});
$(document).on('click','.st_easy_video_template', function(e){
e.preventDefault();
e.stopPropagation();
if($(this).find('.st_easy_video_doplay').length)
bofang($(this).find('.st_easy_video_doplay').data('id'));
return false;
});
$(document).on('click','.st_easy_video_close', function(e){
e.preventDefault();
e.stopPropagation();
tingzhi($(this).data('id'));
return false;
});
prestashop.on('updatedProduct', $.proxy(function (event) {
window.setTimeout($.proxy(function(){
$.each(steasyvideo.videos, (function(id, video){
this.reset(id, '');
}).bind(this));
this.init();
}, this), 2000);
}, this));
prestashop.on('updateProductList', $.proxy(function (event) {
this.init();
}, this));
if((steasyvideo.miniature.desktop.display==3 || steasyvideo.miniature.desktop.display==4) && steasyvideo.miniature.desktop.hover_element){
$(document).on( 'mouseenter', steasyvideo.miniature.desktop.hover_element, function(){
if('desktop' == getCurrentDeviceMode()){
var video_box = $(this).find('.st_easy_video_box').first();
if(video_box.length)
bofang(video_box.data('id'));
}
} ).on( 'mouseleave', steasyvideo.miniature.desktop.hover_element, function(){
if('desktop' == getCurrentDeviceMode()){
var video_box = $(this).find('.st_easy_video_box').first();
if(video_box.length)
tingzhi(video_box.data('id'));
}
} );
}
$(window).resize($.proxy(function() {
clearTimeout(this.resize_timer);
this.resize_timer = setTimeout($.proxy(function(){
if(!$('.modal.quickview').length && !$('.stsb_side_panel_show[data-elementor-type="quickview"]').length){
var device = getCurrentDeviceMode();
if(this.device != device){
// this.setSettings(device)
this.init();
}
}
}, this), 200);
}, this));
this.init();
}
easyVideo.prototype.setSettings = function(device)
{
this.device = device;
steasyvideo.gallery.current = JSON.parse(JSON.stringify(steasyvideo['gallery'][device]));
steasyvideo.miniature.current = JSON.parse(JSON.stringify(steasyvideo['miniature'][device]));
}
easyVideo.prototype.quickView = function(data, id_product, id_product_attribute)
{
if(typeof(steasyvideo.videos)!='undefined')
this.product_videos = JSON.parse(JSON.stringify(steasyvideo.videos));
steasyvideo.videos = data.videos;
$(`#quickview-modal-${id_product}-${id_product_attribute}`).on('hidden.bs.modal', $.proxy(function () {
this.quiteQuickView();
}, this));
this.setSettings('quickview')
this.init();
}
easyVideo.prototype.quiteQuickView = function()
{
if(this.product_videos)
steasyvideo.videos = JSON.parse(JSON.stringify(this.product_videos));
this.setSettings(getCurrentDeviceMode()); // bu yong init
}
easyVideo.prototype.init = function(x)
{
if(typeof(x)!='undefined'){
if(x>steasyvideo.maximum_tries)
return false;
}
var device = getCurrentDeviceMode()
if(device!='desktop' && device!='mobile')
return false;
this.setSettings(device);
// build.call(this);
if(typeof(easy_video_arr)!='undefined'){
$.each(easy_video_arr, (function(id, video){
if(video[device+'_ran'])
return true;
this.miniature_reset(id, this.device);
}).bind(this));
if(steasyvideo.miniature.current.display!=0 && steasyvideo.miniature.current.video_selector){
$.each(easy_video_arr, (function(id, video){
if(video[device+'_ran'])
return true;
var $video_container = $('#'+id).closest(steasyvideo.miniature.current.selector ? steasyvideo.miniature.current.selector : '.js-product-miniature').find(steasyvideo.miniature.current.video_selector).first();
if(!$video_container.length)
return true;
video = intVideo(video);
if(steasyvideo.miniature.current.display==1 || steasyvideo.miniature.current.display==4){
var $button_container = $('#'+id).closest(steasyvideo.miniature.current.selector ? steasyvideo.miniature.current.selector : '.js-product-miniature').find(steasyvideo.miniature.current.button_selector).first();
if(!$button_container.length)
return true;
_append($button_container, steasyvideo.miniature.current.button_append, prepare_template(build_paly_button(0, id, steasyvideo.miniature.current.button_position, steasyvideo.miniature.current.button_layout, true, steasyvideo.miniature.current.button_hide), video['miniature_button_template_'+device]));
}
if(_append($video_container, steasyvideo.miniature.current.video_append, prepare_template(bulid_video_html(0, id, video, steasyvideo.miniature.current.display == 2, steasyvideo.miniature.current.video_position, (steasyvideo.miniature.current.display != 3 && steasyvideo.miniature.current.display != 4)), video['miniature_video_template_'+device]))){
var player_settings = preparePlayerSettings(steasyvideo.miniature.current.player_settings, video);
create_player(id, player_settings, $video_container);
if(steasyvideo.miniature.current.display != 3 && steasyvideo.miniature.current.display != 4 && player_settings.autoplay)
bofang(id);
}
easy_video_arr[id][device+'_ran'] = true;
}).bind(this));
}
}
if(typeof(steasyvideo.videos)!='undefined'){
$.each(steasyvideo.videos, (function(id, video){
if(video[this.device+'_ran'])
return true;
this.reset(id, this.device);
}).bind(this));
if(steasyvideo.gallery.current.display)
this.gallery();
}
}
easyVideo.prototype.reset = function(id, skip)
{
$.each(['desktop', 'mobile', 'quickview'], (function(index, device){
if(skip==device)
return true;
if(steasyvideo['videos'][id][device+'_ran']){
this.remove_video(device, id);
steasyvideo['videos'][id][device+'_ran'] = false;
}
}).bind(this));
}
easyVideo.prototype.miniature_reset = function(id, skip)
{
$.each(['desktop', 'mobile'], (function(index, device){
if(skip==device)
return true;
if(easy_video_arr[id][device+'_ran']){
this.miniature_remove_video(device, id);
easy_video_arr[id][device+'_ran'] = false;
}
}).bind(this));
}
easyVideo.prototype.update = function(element)
{
}
easyVideo.prototype.gallery = function()
{
switch(steasyvideo.gallery.current.display){
case 1:
this.sort_videos([0,2,4,6,8,10].includes(steasyvideo.gallery.current.video_append));
$.each(steasyvideo.videos, (function(id, video){
if(video[this.device+'_ran'])
return true;
if(this.handle_click_on_thumb(id))
{
var $button_container = $(steasyvideo.gallery.current.button_selector).first();
_append($button_container, steasyvideo.gallery.current.button_append, prepare_template(build_paly_button(1, id, steasyvideo.gallery.current.button_position, steasyvideo.gallery.current.button_layout, true, steasyvideo.gallery.current.button_hide), (steasyvideo.gallery.current.has_custom_button_template ? video['gallery_button_template_'+this.device] : '')));
var $video_container = $(steasyvideo.gallery.current.video_selector).first();
if(_append($video_container, steasyvideo.gallery.current.video_append, prepare_template(bulid_video_html(1, id, video, false, steasyvideo.gallery.current.video_position, true),(steasyvideo.gallery.current.has_custom_video_template ? video['gallery_video_template_'+this.device] : '')))){
var player_settings = preparePlayerSettings(steasyvideo.gallery.current.player_settings, video);
create_player(id, player_settings, $video_container);
if(player_settings.autoplay)
bofang(id);
steasyvideo.videos[id][this.device+'_ran'] = true;
}
}
}).bind(this));
break;
case 7:
this.sort_videos([0,2,4,6,8,10].includes(steasyvideo.gallery.current.video_append));
$.each(steasyvideo.videos, (function(id, video){
if(video[this.device+'_ran'])
return false; // one video only
var player_settings = preparePlayerSettings(steasyvideo.gallery.current.player_settings, video);
if(this.handle_click_on_first_thumb(id, player_settings.autoplay))
{
var $button_container = $(steasyvideo.gallery.current.button_selector).first();
_append($button_container, steasyvideo.gallery.current.button_append, prepare_template(build_paly_button(1, id, steasyvideo.gallery.current.button_position, steasyvideo.gallery.current.button_layout, true, steasyvideo.gallery.current.button_hide), (steasyvideo.gallery.current.has_custom_button_template ? video['gallery_button_template_'+this.device] : '')));
var $video_container = $(steasyvideo.gallery.current.video_selector).first();
if(_append($video_container, steasyvideo.gallery.current.video_append, prepare_template(bulid_video_html(1, id, video, false, steasyvideo.gallery.current.video_position, true),(steasyvideo.gallery.current.has_custom_video_template ? video['gallery_video_template_'+this.device] : '')))){
create_player(id, player_settings, $video_container);
if(player_settings.autoplay)
bofang(id);
steasyvideo.videos[id][this.device+'_ran'] = true;
}
this.add_icon_on_first_thumb(id);
}
return false; // one video only
}).bind(this));
break;
case 2:
this.sort_videos([0,2,4,6,8,10].includes(steasyvideo.gallery.current.video_append));
$.each(steasyvideo.videos, (function(id, video){
if(video[this.device+'_ran'])
return true;
var $video_container = $(steasyvideo.gallery.current.video_selector).first();
if(_append($video_container, steasyvideo.gallery.current.video_append, prepare_template(bulid_video_html(1, id, video, true, steasyvideo.gallery.current.video_position, true),(steasyvideo.gallery.current.has_custom_video_template ? video['gallery_video_template_'+this.device] : '')))){
create_player(id, preparePlayerSettings(steasyvideo.gallery.current.player_settings, video), $video_container);
steasyvideo.videos[id][this.device+'_ran'] = true;
}
}).bind(this));
break;
case 3:
this.sort_videos(steasyvideo.gallery.current.slider_append);
$.each(steasyvideo.videos, (function(id, video){
if(video[this.device+'_ran'])
return true;
var $gallery_container = $(steasyvideo.gallery.current.slider_selector).first();
if(this.add_slide($gallery_container, steasyvideo.gallery.current.type, steasyvideo.gallery.current.slider_append, prepare_template(bulid_video_html(1, id, video, true, 1, true), video['gallery_video_template_'+this.device]))){
create_player(id, preparePlayerSettings(steasyvideo.gallery.current.player_settings, video), $gallery_container, $('.st_easy_video_box[data-id="'+id+'"]'));
steasyvideo.videos[id][this.device+'_ran'] = true;
}else
return true;
}).bind(this));
break;
case 4:
this.sort_videos(steasyvideo.gallery.current.thumbnail_append);
$.each(steasyvideo.videos, (function(id, video){
if(video[this.device+'_ran'])
return true;
var $thumbnail_container = $(steasyvideo.gallery.current.thumbnail_selector).first();
if(this.add_slide($thumbnail_container, steasyvideo.gallery.current.thumbnail_type, steasyvideo.gallery.current.thumbnail_append, prepare_template(build_paly_button(1, id, steasyvideo.gallery.current.button_position, steasyvideo.gallery.current.button_layout, true, steasyvideo.gallery.current.button_hide), video['gallery_button_template_'+this.device]),steasyvideo.gallery.current.thumbnail_item_selector)){
var player_settings = preparePlayerSettings(steasyvideo.gallery.current.player_settings, video);
this.handle_click_on_thumb(id);
var $video_container = $(steasyvideo.gallery.current.video_selector).first();
if(_append($video_container, steasyvideo.gallery.current.video_append, prepare_template(bulid_video_html(1, id, video, false, steasyvideo.gallery.current.video_position, true), (steasyvideo.gallery.current.has_custom_video_template ? video['gallery_video_template_'+this.device] : '')))){
create_player(id, player_settings, $video_container, $('.st_easy_video_box[data-id="'+id+'"]'));
if(player_settings.autoplay)
bofang(id);
steasyvideo.videos[id][this.device+'_ran'] = true;
}
}else{
return true;
}
}).bind(this));
break;
case 5:
this.sort_videos(steasyvideo.gallery.current.slider_append);
$.each(steasyvideo.videos, (function(id, video){
if(video[this.device+'_ran'])
return true;
var $thumbnail_container = $(steasyvideo.gallery.current.thumbnail_selector).first();
if(this.add_slide($thumbnail_container, steasyvideo.gallery.current.thumbnail_type, steasyvideo.gallery.current.thumbnail_append, prepare_template(build_paly_button(1, id, steasyvideo.gallery.current.button_position, steasyvideo.gallery.current.button_layout, false, steasyvideo.gallery.current.button_hide), video['gallery_button_template_'+this.device]),steasyvideo.gallery.current.thumbnail_item_selector)){
var $gallery_container = $(steasyvideo.gallery.current.slider_selector).first();
if(this.add_slide($gallery_container, steasyvideo.gallery.current.type, steasyvideo.gallery.current.slider_append, prepare_template(bulid_video_html(1, id, video, true, 1, true), video['gallery_video_template_'+this.device]))){
create_player(id, preparePlayerSettings(steasyvideo.gallery.current.player_settings, video), $gallery_container, $('.st_easy_video_box[data-id="'+id+'"]'));
steasyvideo.videos[id][this.device+'_ran'] = true;
}else
return true;
}else{
return true;
}
}).bind(this));
break;
case 6:
this.sort_videos(steasyvideo.gallery.current.thumbnail_append);
$.each(steasyvideo.videos, (function(id, video){
if(video[this.device+'_ran'])
return true;
var $thumbnail_container = $(steasyvideo.gallery.current.thumbnail_selector).first();
if(this.add_slide($thumbnail_container, steasyvideo.gallery.current.thumbnail_type, steasyvideo.gallery.current.thumbnail_append, prepare_template(build_paly_button(1, id, steasyvideo.gallery.current.button_position, steasyvideo.gallery.current.button_layout, false, steasyvideo.gallery.current.button_hide), video['gallery_button_template_'+this.device]),steasyvideo.gallery.current.thumbnail_item_selector)){
var $video_container = $(steasyvideo.gallery.current.video_selector).first();
if(_append($video_container, steasyvideo.gallery.current.video_append, prepare_template(bulid_video_html(1, id, video, true, steasyvideo.gallery.current.video_position, true), (steasyvideo.gallery.current.has_custom_video_template ? video['gallery_video_template_'+this.device] : '')))){
create_player(id, preparePlayerSettings(steasyvideo.gallery.current.player_settings, video), $video_container, $('.st_easy_video_box[data-id="'+id+'"]'));
steasyvideo.videos[id][this.device+'_ran'] = true;
}
}else{
return true;
}
}).bind(this));
break;
}
}
easyVideo.prototype.add_icon_on_first_thumb = function(id){
var $thumbnail_item_container = $(steasyvideo.gallery.current.thumbnail_item_selector).first();
if($thumbnail_item_container.length){
$thumbnail_item_container.addClass('st_easy_video_relative').append('<button class="st_easy_video_play_icon st_easy_video_btn st_easy_video_btn_absolute" data-id="'+id+'" type="button" aria-disabled="false"><span aria-hidden="true" class="vjs-icon-placeholder"></span></button>');
}
}
easyVideo.prototype.handle_click_on_thumb = function(id){
if(!steasyvideo.gallery.current.close_video)
return true;
var event_name = steasyvideo.gallery.current.close_video==1 ? 'click' : 'mouseenter';
switch(steasyvideo.gallery.current.thumbnail_type){
case 0:
break;
case 1:
if($(steasyvideo.gallery.current.thumbnail_selector).length && typeof($(steasyvideo.gallery.current.thumbnail_selector)[0].swiper)!='undefined'){
$(steasyvideo.gallery.current.thumbnail_selector)[0].swiper.on(event_name, function(swiper){
if(!$(swiper.slides).eq(swiper.clickedIndex).find('.st_easy_video_play_icon').length)
toggle_btns(2, id);
});
return true;
}else{
this.slider_timer = window.setTimeout((function(){
this.init(++this.tries);
}).bind(this), 500);
return false;
}
break;
case 2:
if($(steasyvideo.gallery.current.thumbnail_selector).length && $(steasyvideo.gallery.current.thumbnail_selector).hasClass('slick-initialized')){
$(steasyvideo.gallery.current.thumbnail_selector).on(event_name, steasyvideo.gallery.current.thumbnail_item_selector ? steasyvideo.gallery.current.thumbnail_item_selector : '.slick-slide', function(){
if(!$(this).find('.st_easy_video_play_icon').length)
toggle_btns(2, id);
});
return true;
}else{
this.slider_timer = window.setTimeout((function(){
this.init(++this.tries);
}).bind(this), 500);
return false;
}
break;
case 3:
break;
case 4:
if($(steasyvideo.gallery.current.thumbnail_selector).length && typeof($(steasyvideo.gallery.current.thumbnail_selector).data("owlCarousel"))!='undefined'){
$(steasyvideo.gallery.current.thumbnail_selector).on(event_name, steasyvideo.gallery.current.thumbnail_item_selector ? steasyvideo.gallery.current.thumbnail_item_selector : '.owl-item', function(e){
e.preventDefault();
if(!$(this).find('.st_easy_video_play_icon').length)
toggle_btns(2, id);
});
return true;
}else{
this.slider_timer = window.setTimeout((function(){
this.init(++this.tries);
}).bind(this), 500);
return false;
}
break;
case 5:
$(steasyvideo.gallery.current.thumbnail_item_selector).on(event_name, function(){
if(!$(this).find('.st_easy_video_play_icon').length)
toggle_btns(2, id);
});
return true;
break;
}
}
easyVideo.prototype.handle_click_on_first_thumb = function(id, autoplay){
var classname = '.st_easy_video_play[data-id="'+id+'"]';
if(steasyvideo.gallery.current.slider_selector){
switch(steasyvideo.gallery.current.type){
case 0:
break;
case 1:
if($(steasyvideo.gallery.current.slider_selector).length && typeof($(steasyvideo.gallery.current.slider_selector)[0].swiper)!='undefined'){
handle_first($(steasyvideo.gallery.current.slider_selector)[0].swiper.isBeginning, id, autoplay);
$(steasyvideo.gallery.current.slider_selector)[0].swiper.on('slideChangeTransitionEnd', function(swiper){
handle_first(swiper.isBeginning, id, autoplay);
});
return true;
}else{
this.slider_timer = window.setTimeout((function(){
this.init(++this.tries);
}).bind(this), 500);
return false;
}
break;
case 2:
if($(steasyvideo.gallery.current.slider_selector).hasClass('slick-initialized')){
handle_first($(steasyvideo.gallery.current.slider_selector).slick('slickCurrentSlide')==0, id, autoplay);
$(steasyvideo.gallery.current.slider_selector).on('afterChange', function(event, slick, currentSlide, nextSlide){
handle_first($(steasyvideo.gallery.current.slider_selector).slick('slickCurrentSlide')==0, id, autoplay);
});
return true;
}else{
this.slider_timer = window.setTimeout((function(){
this.init(++this.tries);
}).bind(this), 500);
return false;
}
break;
case 3:
break;
case 4:
if($(steasyvideo.gallery.current.slider_selector).length && typeof($(steasyvideo.gallery.current.slider_selector).data("owlCarousel"))!='undefined'){
handle_first($(steasyvideo.gallery.current.slider_selector).data("owlCarousel").owl.currentItem==0, id, autoplay);
$(document).on('main_gallery_after_action', function(){
handle_first($(steasyvideo.gallery.current.slider_selector).data("owlCarousel").owl.currentItem==0, id, autoplay);
});
return true;
}else{
this.slider_timer = window.setTimeout((function(){
this.init(++this.tries);
}).bind(this), 500);
return false;
}
break;
}
}
if(steasyvideo.gallery.current.thumbnail_type){
switch(steasyvideo.gallery.current.thumbnail_type){
case 0:
break;
case 1:
if($(steasyvideo.gallery.current.thumbnail_selector).length && typeof($(steasyvideo.gallery.current.thumbnail_selector)[0].swiper)!='undefined'){
$(steasyvideo.gallery.current.thumbnail_selector)[0].swiper.on('click', function(swiper){
handle_first($(swiper.slides).eq(swiper.clickedIndex).find('.st_easy_video_play_icon').length, id, autoplay);
});
return true;
}else{
this.slider_timer = window.setTimeout((function(){
this.init(++this.tries);
}).bind(this), 500);
return false;
}
break;
case 2:
if($(steasyvideo.gallery.current.thumbnail_selector).hasClass('slick-initialized')){
$(steasyvideo.gallery.current.thumbnail_selector).on('click', '.slick-slide', function(){
handle_first($(this).find('.st_easy_video_play_icon').length, id, autoplay);
});
return true;
}else{
this.slider_timer = window.setTimeout((function(){
this.init(++this.tries);
}).bind(this), 500);
return false;
}
break;
case 3:
break;
case 4:
if($(steasyvideo.gallery.current.thumbnail_selector).length && typeof($(steasyvideo.gallery.current.thumbnail_selector).data("owlCarousel"))!='undefined'){
$(steasyvideo.gallery.current.thumbnail_selector).on('click', '.owl-item', function(e){
e.preventDefault();
handle_first($(this).find('.st_easy_video_play_icon').length, id, autoplay);
});
return true;
}else{
this.slider_timer = window.setTimeout((function(){
this.init(++this.tries);
}).bind(this), 500);
return false;
}
break;
case 5:
$(steasyvideo.gallery.current.thumbnail_item_selector).on('click', function(){
handle_first($(this).find('.st_easy_video_play_icon').length, id, autoplay);
});
return true;
break;
}
}
}
easyVideo.prototype.sort_videos = function(append)
{
if(steasyvideo.videos.length<2)
return true;
if(append<100){
if(steasyvideo.videos[Object.keys(steasyvideo.videos)[0]].position < steasyvideo.videos[Object.keys(steasyvideo.videos)[Object.keys(steasyvideo.videos).length-1]].position)
steasyvideo.videos = Object.fromEntries(Object.entries(steasyvideo.videos).reverse());
}else{
if(steasyvideo.videos[Object.keys(steasyvideo.videos)[0]].position > steasyvideo.videos[Object.keys(steasyvideo.videos)[Object.keys(steasyvideo.videos).length-1]].position)
steasyvideo.videos = Object.fromEntries(Object.entries(steasyvideo.videos).reverse());
}
}
easyVideo.prototype.miniature_remove_video = function(device, id)
{
var setting = device=='mobile' ? steasyvideo.miniature.mobile : steasyvideo.miniature.desktop;
var $video_container = $('#'+id).closest(setting.selector ? setting.selector : '.js-product-miniature').find(setting.video_selector).first();
if($video_container.length){
remove_player($video_container.find('.st_easy_video_box[data-id="'+id+'"]'));
$video_container.find('.st_easy_video_close[data-id="'+id+'"]').remove();
}
var $button_container = $('#'+id).closest(setting.selector ? setting.selector : '.js-product-miniature').find(setting.button_selector).first();
if($button_container.length)
remove_button($button_container.find('.st_easy_video_play[data-id="'+id+'"]'));
}
easyVideo.prototype.remove_video = function(device, id)
{
var setting = device=='mobile' ? steasyvideo.gallery.mobile : (device=='quickview' ? steasyvideo.gallery.quickview : steasyvideo.gallery.desktop);
switch(setting.display){
case 1:
case 2:
case 7:
var $video_container = $(setting.video_selector).first();
if($video_container.length){
remove_player($video_container.find('.st_easy_video_box[data-id="'+id+'"]'));
$video_container.find('.st_easy_video_close[data-id="'+id+'"]').remove();
}
var $button_container = $(setting.button_selector).first();
if($button_container.length)
remove_button($button_container.find('.st_easy_video_play[data-id="'+id+'"]'));
$(steasyvideo.gallery.current.thumbnail_item_selector).find('.st_easy_video_play_icon[data-id="'+id+'"]').remove();
break;
case 3:
var $gallery_container = $(setting.slider_selector).first();
this.remove_slide($gallery_container, setting.type, id);
break;
case 4:
var $thumbnail_container = $(setting.thumbnail_selector).first();
this.remove_slide($thumbnail_container, setting.thumbnail_type, id);
var $video_container = $(setting.video_selector).first();
if($video_container){
remove_player($video_container.find('.st_easy_video_box[data-id="'+id+'"]'));
$video_container.find('.st_easy_video_close[data-id="'+id+'"]').remove();
}
break;
case 5:
var $gallery_container = $(setting.slider_selector).first();
this.remove_slide($gallery_container, setting.type, id);
var $thumbnail_container = $(setting.thumbnail_selector).first();
this.remove_slide($thumbnail_container, setting.thumbnail_type, id);
break;
case 6:
var $thumbnail_container = $(setting.thumbnail_selector).first();
this.remove_slide($thumbnail_container, setting.thumbnail_type, id);
var $video_container = $(setting.video_selector).first();
if($video_container){
remove_player($video_container.find('.st_easy_video_box[data-id="'+id+'"]'));
$video_container.find('.st_easy_video_close[data-id="'+id+'"]').remove();
}
break;
}
}
easyVideo.prototype.remove_slide = function(slider, type, id)
{
if(!slider || !slider.length || !type)
return false;
switch(type){
case 1://Swiper
if(typeof(slider[0].swiper)!='undefined'){
if(slider.find('.st_easy_video_box[data-id="'+id+'"]').closest('.swiper-slide').length){
slider.find('.st_easy_video_box[data-id="'+id+'"]').closest('.swiper-slide').remove();
slider[0].swiper.update();
}
if(slider.find('.st_easy_video_play[data-id="'+id+'"]').closest('.swiper-slide').length){
slider.find('.st_easy_video_play[data-id="'+id+'"]').closest('.swiper-slide').remove();
slider[0].swiper.update();
}
}
break;
case 2://Slick
if(slider.hasClass('slick-initialized')){
if(slider.find('.st_easy_video_box[data-id="'+id+'"]').closest('.slick-slide').length)
slider.slick('slickRemove', slider.find('.st_easy_video_box[data-id="'+id+'"]').closest('.slick-slide').data("slick-index"));
if(slider.find('.st_easy_video_play[data-id="'+id+'"]').closest('.slick-slide').length)
slider.slick('slickRemove', slider.find('.st_easy_video_play[data-id="'+id+'"]').closest('.slick-slide').data("slick-index"));
}
break;
case 3://Owl 2
if(slider.data("owl.carousel")){
// remove.owl.carousel // don\'t know how to get index
if(slider.find('.st_easy_video_box[data-id="'+id+'"]').closest('.owl-item').length){
slider.find('.st_easy_video_box[data-id="'+id+'"]').closest('.owl-item').remove();
slider.trigger('refresh.owl.carousel');
}
if(slider.find('.st_easy_video_play[data-id="'+id+'"]').closest('.owl-item').length){
slider.find('.st_easy_video_play[data-id="'+id+'"]').closest('.owl-item').remove();
slider.trigger('refresh.owl.carousel');
}
}
break;
case 4://Owl 1
if(slider.data("owlCarousel")){
if(slider.find('.st_easy_video_box[data-id="'+id+'"]').closest('.owl-item').length){
slider.find('.st_easy_video_box[data-id="'+id+'"]').closest('.owl-item').remove();
slider.data("owlCarousel").updateVars();
}
if(slider.find('.st_easy_video_play[data-id="'+id+'"]').closest('.owl-item').length){
slider.find('.st_easy_video_play[data-id="'+id+'"]').closest('.owl-item').remove();
slider.data("owlCarousel").updateVars();
}
}
break;
case 5://Classic Scrollbox, not a slider
/*thumb cai you 5, thumb li mian mei you video
var player = slider.find('.st_easy_video_box[data-id="'+id+'"]');
if(player.length){
if(player.closest('.st_easy_video_template').length)
player.closest('.st_easy_video_template').remove();
else
player.remove();
}*/
var button = slider.find('.st_easy_video_play[data-id="'+id+'"]');
if(button.length){
if(button.closest('.st_easy_video_template').length)
button.closest('.st_easy_video_template').remove();
else
button.remove();
}
break;
}
}
easyVideo.prototype.add_slide = function(slider, type, index, html,thumbnail_item_selector)
{
if(!slider || !slider.length || !type)
return false;
switch(type){
case 1://Swiper
if(typeof(slider[0].swiper)!='undefined'){
if(index==100){
slider[0].swiper.appendSlide(html);
}else{
slider[0].swiper.addSlide(index, html);
if(index==0)
slider[0].swiper.params.loop ? slider[0].swiper.slideToLoop(0) : slider[0].swiper.slideTo(0);
}
return true;
}else{
this.slider_timer = window.setTimeout((function(){
this.init(++this.tries);
}).bind(this), 500);
return false;
}
break;
case 2://Slick
if(slider.hasClass('slick-initialized')){
index==100 ? slider.slick('slickAdd', html) : slider.slick('slickAdd', html, index, true);
return true;
}else{
this.slider_timer = window.setTimeout((function(){
this.init(++this.tries);
}).bind(this), 500);
return false;
}
break;
case 3://Owl 2
if(slider.data("owl.carousel")){
index==100 ? slider.trigger('add.owl.carousel', [$(html)]).trigger('refresh.owl.carousel') : slider.trigger('add.owl.carousel', [$(html), index]).trigger('refresh.owl.carousel');
return true;
}else{
this.slider_timer = window.setTimeout((function(){
this.init(++this.tries);
}).bind(this), 500);
return false;
}
break;
case 4://Owl 1
if(slider.data("owlCarousel")){
index==100 ? slider.data("owlCarousel").addItem(html, -1) : slider.data("owlCarousel").addItem(html, index);
return true;
}else{
this.slider_timer = window.setTimeout((function(){
this.init(++this.tries);
}).bind(this), 500);
return false;
}
break;
case 5://Classic Scrollbox, not a slider
if(index==100)
slider.append(html);
else if(index==0)
slider.prepend(html);
else{
_append($('thumbnail_item_selector').eq(index), 1, html);
}
return true;
break;
}
}
function run(element)
{
}
function remove_player(player)
{
if(player.length){
if(player.closest('.st_easy_video_template').length)
player.closest('.st_easy_video_template').remove();
else
player.remove();
}
}
function remove_button(button)
{
if(button.length){
if(button.closest('.st_easy_video_template').length)
button.closest('.st_easy_video_template').remove();
else
button.remove();
}
}
function intVideo(video)
{
video.autoplay = parseInt(video.autoplay, 10);
video.muted = parseInt(video.muted, 10);
video.loop = parseInt(video.loop, 10);
return video;
}
function create_player(id, video, $container)
{
// if(typeof(video.ran)=='undefined'){
var $player = $('.st_easy_video_box[data-id="'+id+'"] .st_easy_video');
var options = {
'autoplay': 1,
'muted' : 0,
'loop': 1,
'controls': 1,
'techOrder': ['html5'],
'fluid': true,
"playsinline": "playsinline",
'preload':'metadata'
};
if(video.url.indexOf('youtube')!==-1){
var youtube_options = {"enablePrivacyEnhancedMode": typeof(window.stEasyVideoEnablePrivacyEnhancedMode)!='undefined' ? window.stEasyVideoEnablePrivacyEnhancedMode : 0}; //, customVars:{'wmode': 'transparent'} // bu qi zuo yong
if(isYouTubeShorts(video.url))
youtube_options = $.extend(youtube_options, {
"width": 960,
"height": 1280
});
options = $.extend(options, {
techOrder: ['youtube'],
"youtube": youtube_options
});
}else if(video.url.indexOf('vimeo.com')!==-1){
options = $.extend(options, {
techOrder: ['vimeo'],
'vimeo':{
'color': '#ff0000',
'autoplay': true,
'muted' : true,
},
})
}
var myPlayer = videojs($player[0], $.extend(options, video));
var isPlaying = false;
var remember = false;
var observer = scrollObserver( {
callback: function( event ) {
if ( event.isInViewport ) {
if((remember || video.autoplay) && !$('.st_easy_video_box[data-id="'+id+'"]').hasClass('st_easy_video_invisible'))
myPlayer.play();
}else{
remember=isPlaying;
myPlayer.pause();
}
},
} );
observer.observe( $('.st_easy_video_box[data-id="'+id+'"]')[0] );
myPlayer.on(['waiting', 'pause'], function () {
isPlaying = false;
});
myPlayer.on('play', function () {
isPlaying = true;
});
}
function preparePlayerSettings(global_settings, video) {
if(video.autoplay=='2')
video.autoplay = global_settings.autoplay;
if(video.muted=='2')
video.muted = global_settings.muted;
if(video.loop=='2')
video.loop = global_settings.loop;
video.controls = global_settings.controls;
if(video.ratio)
video.aspectRatio = video.ratio;
return video;
}
function getYouTubeShortsID(url) {
var regex = /(?:youtube\.com\/shorts\/)([a-zA-Z0-9_-]{11})/;
var match = url.match(regex);
return match ? match[1] : null;
}
function isYouTubeShorts(url) {
return /youtube\.com\/shorts\//.test(url);
}
function prepare_template(html, template){
if(template){
html = $(template).addClass('st_easy_video_template').append(html)[0];
}
return html;
}
function bulid_video_html(type, id, video, display, position, close_button){
var video_url = video.url;
if(isYouTubeShorts(video_url)){
var youtube_id = getYouTubeShortsID(video_url);
if(youtube_id)
video_url = 'https://www.youtube.com/watch?v='+youtube_id;
}
var html = '<div class="st_easy_video_box st_easy_video_box_'+type+' '+(position ? '' : ' st_easy_video_box_absolute ')+(display ? ' st_easy_video_box_static ' : ' st_easy_video_invisible ')+' st_easy_video_flex" data-id="'+id+'"><video class="st_easy_video video-js vjs-big-play-centered"><source src="'+video_url+'" type="video/'+(/youtu(\.be|be\.com)/.test(video_url) ? 'youtube' : (/vimeo\.com/.test(video_url) ? 'vimeo' : 'mp4'))+'"></video></div>';
if(!display && close_button)
html += '<button class="st_easy_video_close st_easy_video_close_'+type+' st_easy_video_btn st_easy_video_invisible st_easy_video_btn_absolute" type="button" aria-disabled="false" data-id="'+id+'"><span aria-hidden="true" class="vjs-icon-placeholder"></span></button>';
return html;
}
function build_paly_button(type, id, position, layout, doplay, toggleble){
return '<button class="st_easy_video_play st_easy_video_play_'+type+' st_easy_video_play_layout_'+layout+' st_easy_video_btn '+(position ? '' : ' st_easy_video_btn_absolute ')+(doplay ? ' st_easy_video_doplay ' : '')+(toggleble ? ' st_easy_video_play_toggleble ' : '')+'" type="button" aria-disabled="false" data-id="'+id+'"><span aria-hidden="true" class="vjs-icon-placeholder"></span>'+(steasyvideo.play_video_text ? '<span class="st_play_video_text">'+steasyvideo.play_video_text+'</span>' : '')+'</button>';
}
function toggle_btns(display, id) {
$('.st_easy_video_close[data-id="'+id+'"], .st_easy_video_box[data-id="'+id+'"]').toggleClass('st_easy_video_invisible', display==2 || display==3);
$('.st_easy_video_play_toggleble.st_easy_video_btn_absolute[data-id="'+id+'"]').toggleClass('st_easy_video_invisible', (display==1 || display==3));
}
function bofang(id) {
toggle_btns(1, id);
var $video = $('.st_easy_video_box[data-id="'+id+'"] .st_easy_video');
if(!$video.length)
return false;
var player = videojs.getPlayer($video[0])
if(player)
player.play();
}
function tingzhi(id) {
toggle_btns(2, id);
// _pause(id);
}
function handle_first(first,id,autoplay) {
if(first){
if($('.st_easy_video_box[data-id="'+id+'"]').hasClass('st_easy_video_invisible')){
if(autoplay)
bofang(id);
else
toggle_btns(2, id);
}
}else{
// _pause(id);
toggle_btns(3, id)
}
}
function _pause(id){
var $video = $('.st_easy_video_box[data-id="'+id+'"] .st_easy_video');
if(!$video.length)
return false;
var player = videojs.getPlayer($video[0])
if(player)
player.pause();
}
function _append($dom, append, template){
if(!$dom.length || !template)
return false;
var res = true;
switch (append) {
case 0:
$dom.append(template);
break;
case 1:
$dom.before(template);
break;
case 2:
$dom.after(template);
break;
case 3:
$dom.prepend(template);
break;
case 4:
if(!$dom.parent().length)
res = false;
else
$dom.parent().append(template);
break;
case 5:
if(!$dom.parent().length)
res = false;
else
$dom.parent().before(template);
break;
case 6:
if(!$dom.parent().length)
res = false;
else
$dom.parent().after(template);
break;
case 7:
if(!$dom.parent().length)
res = false;
else
$dom.parent().prepend(template);
break;
case 8:
if(!$dom.parent().length)
res = false;
else if(!$dom.parent().parent().length)
res = false;
else
$dom.parent().parent().append(template);
break;
case 9:
if(!$dom.parent().length)
res = false;
else if(!$dom.parent().parent().length)
res = false;
else
$dom.parent().parent().before(template);
break;
case 10:
if(!$dom.parent().length)
res = false;
else if(!$dom.parent().parent().length)
res = false;
else
$dom.parent().parent().after(template);
break;
case 11:
if(!$dom.parent().length)
res = false;
else if(!$dom.parent().parent().length)
res = false;
else
$dom.parent().parent().prepend(template);
break;
case 12:
$dom.html(template);
break;
}
return true;
}
function getCurrentDeviceMode() {
if(typeof(sttheme)!='undefined' && typeof(sttheme.is_mobile_device)!='undefined')
return sttheme.is_mobile_device ? 'mobile' : 'desktop';
// st themes
return getComputedStyle( $('#st_easy_video_device_mode')[0], ':after' ).content.replace( /"/g, '' );
}
function extendDefaults(defaults,properties)
{
Object.keys(properties).forEach(property => {
if(properties.hasOwnProperty(property))
{
defaults[property] = properties[property];
}
});
return defaults;
}
function scrollObserver( obj ) {
let lastScrollY = 0;
// Generating threshholds points along the animation height
// More threshholds points = more trigger points of the callback
const buildThreshholds = function( sensitivityPercentage = 0 ){
const threshholds = [];
if ( sensitivityPercentage > 0 && sensitivityPercentage <= 100 ) {
const increment = 100 / sensitivityPercentage;
for ( let i = 0; i <= 100; i += increment ) {
threshholds.push( i / 100 );
}
} else {
threshholds.push( 0 );
}
return threshholds;
};
const options = {
root: obj.root || null,
rootMargin: obj.offset || '0px',
threshold: buildThreshholds( obj.sensitivity ),
};
function handleIntersect( entries ) {
const currentScrollY = entries[ 0 ].boundingClientRect.y,
isInViewport = entries[ 0 ].isIntersecting,
intersectionScrollDirection = ( currentScrollY < lastScrollY ) ? 'down' : 'up',
scrollPercentage = Math.abs( parseFloat( ( entries[ 0 ].intersectionRatio * 100 ).toFixed( 2 ) ) );
obj.callback( {
sensitivity: obj.sensitivity,
isInViewport,
scrollPercentage,
intersectionScrollDirection,
} );
lastScrollY = currentScrollY;
}
return new IntersectionObserver( handleIntersect, options );
}
}());
var easyVideoObj;
$(document).ready(function(){
easyVideoObj = new easyVideo();
});
Reference in New Issue View Git Blame Copy Permalink