PluginProbe
Automatic YouTube Gallery – Embed Auto-Updating YouTube Video Galleries, Feeds, Playlists & Channels / 2.3.5
Automatic YouTube Gallery – Embed Auto-Updating YouTube Video Galleries, Feeds, Playlists & Channels v2.3.5
2.9.1 2.9.0 trunk 1.0.0 1.1.0 1.2.0 1.3.0 1.4.0 1.5.0 1.6.0 1.6.1 1.6.2 1.6.3 1.6.4 1.6.5 2.0.0 2.1.0 2.2.0 2.3.2 2.3.3 2.3.5 2.3.6 2.3.8 2.3.9 2.4.3 All 37 releases
automatic-youtube-gallery / public / assets / js / public.js

public.js in Automatic YouTube Gallery – Embed Auto-Updating YouTube Video Galleries, Feeds, Playlists & Channels 2.3.5, at public/assets/js/public.js

646 lines 16.6 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 (function( $ ) {
2 'use strict';
3
4 /**
5 * Vars
6 */
7 window.ayg_is_ready = false;
8
9 /**
10 * Init Automatic YouTube Gallery. Called when YouTube API is ready.
11 *
12 * @since 2.0.0
13 */
14 function ayg_init() {
15 if ( true == window.ayg_is_ready ) {
16 return false;
17 }
18
19 window.ayg_is_ready = true;
20 $( document ).trigger( 'ayg.ready' );
21
22 // Classic Theme
23 $( '.ayg-theme-classic' ).each(function() {
24 init_classic_theme( $( this ) );
25 });
26
27 // Single Video
28 $( '.ayg-theme-single' ).each(function() {
29 init_single_video( $( this ) );
30 });
31
32 // Livestream
33 $( '.ayg-theme-livestream' ).each(function() {
34 init_livestream( $( this ) );
35 });
36 }
37
38 /**
39 * Init Classic Theme.
40 *
41 * @since 2.0.0
42 */
43 function init_classic_theme( $container ) {
44 ++ayg_public.gallery_index;
45
46 $container.addClass( 'ayg-theme-initialized' );
47
48 var params = $container.data( 'params' );
49
50 var $current_item = $container.find( '.ayg-item' ).eq(0);
51
52 var video_id = $current_item.find( '.ayg-thumbnail' ).data( 'id' );
53
54 var player_id = 'ayg-player-' + ayg_public.gallery_index;
55 $container.find( '.ayg-player-iframe' ).attr( 'id', player_id );
56
57 var $pagination = $container.find( '.ayg-pagination' );
58 var $next_button = null;
59 var pagination_type = 'none';
60 if ( $pagination.length > 0 ) {
61 $next_button = $pagination.find( '.ayg-pagination-next-btn' );
62 pagination_type = $next_button.data( 'type' );
63 }
64
65 // Player
66 var player = ayg_init_player( player_id, {
67 custom: {
68 params: params,
69 image: $current_item.find( '.ayg-thumbnail-image' ).attr( 'src' )
70 },
71 events: {
72 'onStateChange': function( e ) {
73 // On Playing
74 if ( e.data == YT.PlayerState.PLAYING ) {
75 ayg_pause_other_players( player_id );
76 }
77
78 // On Ended
79 if ( e.data == YT.PlayerState.ENDED ) {
80 if ( 1 == params.autoadvance ) {
81 player.stop();
82
83 if ( $current_item.is( ':visible' ) ) {
84 if ( $current_item.is( ':last-child' ) ) {
85 if ( 'more' == pagination_type || 'none' == pagination_type ) {
86 if ( 1 == params.loop ) {
87 $container.find( '.ayg-item' ).eq(0).trigger( 'click' );
88 }
89 } else {
90 // Load Next Page
91 if ( $next_button.is( ':visible' ) ) {
92 $next_button.trigger( 'click' );
93
94 var __interval = setInterval(
95 function() {
96 if ( 0 == $container.find( '.ayg-pagination.ayg-loading' ).length ) {
97 clearInterval( __interval );
98 $container.find( '.ayg-item' ).eq(0).trigger( 'click' );
99 }
100 },
101 1000
102 );
103 }
104 }
105 } else {
106 $current_item.next( '.ayg-item' ).trigger( 'click' );
107 }
108 } else {
109 $container.find( '.ayg-item' ).eq(0).trigger( 'click' );
110 }
111 } else {
112 if ( 1 == params.loop ) {
113 player.play();
114 } else {
115 player.stop();
116 }
117 }
118 }
119 }
120 }
121 });
122
123 // Grid: On thumbnail clicked
124 $container.on( 'click', '.ayg-item', function() {
125 $current_item = $( this );
126
127 $container.find( '.ayg-active' ).removeClass( 'ayg-active' );
128 $current_item.addClass( 'ayg-active' );
129
130 // Change video
131 video_id = $current_item.find( '.ayg-thumbnail' ).data( 'id' );
132
133 player.change({
134 id: video_id,
135 image: $current_item.find( '.ayg-thumbnail-image' ).attr( 'src' )
136 });
137
138 if ( 1 == params.player_title ) {
139 var title = $current_item.find( '.ayg-thumbnail' ).data( 'title' );
140 $container.find( '.ayg-player-title' ).html( title );
141 }
142
143 if ( 1 == params.player_description ) {
144 var description = $current_item.find( '.ayg-thumbnail-description' ).html();
145 $container.find( '.ayg-player-description' ).html( description );
146 }
147
148 // Scroll to Top
149 $( 'html, body' ).animate({
150 scrollTop: $container.offset().top - ayg_public.top_offset
151 }, 500, function() {
152 // Change URL in Browser Address Bar
153 var url = $current_item.find( '.ayg-thumbnail' ).data( 'url' );
154 if ( '' != url ) {
155 window.history.replaceState( null, null, url );
156 }
157 });
158
159 // Load Next Page
160 if ( 1 == params.autoadvance && 'more' == pagination_type ) {
161 if ( $current_item.is( ':last-child' ) && $next_button.is( ':visible' ) ) {
162 $next_button.trigger( 'click' );
163 }
164 }
165 });
166
167 // Pagination
168 if ( $pagination.length > 0 ) {
169 ayg_init_pagination( $pagination );
170
171 $pagination.on( 'gallery.updated', function() {
172 if ( $container.find( '.ayg-active' ).length > 0 ) {
173 return;
174 }
175
176 if ( $container.find( '.ayg-item-' + video_id ).length > 0 ) {
177 $current_item = $container.find( '.ayg-item-' + video_id ).addClass( 'ayg-active' );
178 }
179 });
180 }
181 }
182
183 /**
184 * Init Single Video.
185 *
186 * @since 2.0.0
187 */
188 function init_single_video( $container ) {
189 ++ayg_public.gallery_index;
190
191 $container.addClass( 'ayg-theme-initialized' );
192
193 var params = $container.data( 'params' );
194
195 var player_id = 'ayg-player-' + ayg_public.gallery_index;
196 $container.find( '.ayg-player-iframe' ).attr( 'id', player_id );
197
198 // Player
199 var player = ayg_init_player( player_id, {
200 custom: {
201 params: params,
202 image: $( '#' + player_id ).data( 'image' )
203 },
204 events: {
205 'onStateChange': function( e ) {
206 // On Playing
207 if ( e.data == YT.PlayerState.PLAYING ) {
208 ayg_pause_other_players( player_id );
209 }
210
211 // On Ended
212 if ( e.data == YT.PlayerState.ENDED ) {
213 if ( 1 == params.loop ) {
214 player.play();
215 }
216 }
217 }
218 }
219 });
220 }
221
222 /**
223 * Init Livestream.
224 *
225 * @since 2.0.0
226 */
227 function init_livestream( $container ) {
228 ++ayg_public.gallery_index;
229
230 $container.addClass( 'ayg-theme-initialized' );
231
232 var params = $container.data( 'params' );
233
234 var player_id = 'ayg-player-' + ayg_public.gallery_index;
235 $container.find( '.ayg-player-iframe' ).attr( 'id', player_id );
236
237 // Player
238 var player = ayg_init_player( player_id, {
239 custom: {
240 params: params,
241 image: 'none'
242 },
243 events: {
244 'onReady': function( e ) {
245 var url = e.target.getVideoUrl();
246
247 if ( url.indexOf( 'watch?v=live_stream' ) > 0 ) {
248 $container.find( '.ayg-player-wrapper' ).fadeOut( 'fast', function() {
249 $container.find( '.ayg-fallback-message' ).fadeIn();
250 });
251 } else {
252 $( '#' + player_id ).show();
253 }
254 },
255 'onStateChange': function( e ) {
256 // On Playing
257 if ( e.data == YT.PlayerState.PLAYING ) {
258 ayg_pause_other_players( player_id );
259 }
260
261 // On Ended
262 if ( e.data == YT.PlayerState.ENDED ) {
263 player.stop();
264 }
265 }
266 }
267 });
268 }
269
270 /**
271 * Init AYGPlayer.
272 *
273 * @since 2.0.0
274 */
275 var ayg_init_player = function ( player_id, args ) {
276 var player = null;
277 var $player_wrapper = $( '#' + player_id ).closest( 'div' );
278 var video_id = $( '#' + player_id ).data( 'id' );
279 var params = args.custom.params;
280
281 var init_player = function () {
282 var domain = 'https://www.youtube.com';
283 if ( 1 == ayg_public.privacy_enhanced_mode ) {
284 domain = 'https://www.youtube-nocookie.com';
285 }
286
287 var iframe_src = domain + '/embed/' + video_id + '?enablejsapi=1';
288
289 if ( params.hasOwnProperty( 'is_live' ) ) {
290 iframe_src = domain + '/embed/live_stream?channel=' + video_id + '&enablejsapi=1';
291 }
292
293 iframe_src += '&playsinline=1';
294 iframe_src += '&rel=0';
295
296 if ( ayg_public.origin ) {
297 iframe_src += '&origin=' + ayg_public.origin;
298 }
299
300 if ( params.hasOwnProperty( 'autoplay' ) ) {
301 iframe_src += ( '&autoplay=' + parseInt( params.autoplay ) );
302 }
303
304 if ( params.hasOwnProperty( 'muted' ) ) {
305 iframe_src += ( '&mute=' + parseInt( params.muted ) );
306 }
307
308 if ( params.hasOwnProperty( 'controls' ) ) {
309 iframe_src += ( '&controls=' + parseInt( params.controls ) );
310 }
311
312 if ( params.hasOwnProperty( 'modestbranding' ) ) {
313 iframe_src += ( '&modestbranding=' + parseInt( params.modestbranding ) );
314 }
315
316 if ( params.hasOwnProperty( 'cc_load_policy' ) ) {
317 iframe_src += ( '&cc_load_policy=' + parseInt( params.cc_load_policy ) );
318 }
319
320 if ( params.hasOwnProperty( 'iv_load_policy' ) ) {
321 iframe_src += ( '&iv_load_policy=' + parseInt( params.iv_load_policy ) );
322 }
323
324 if ( params.hasOwnProperty( 'hl' ) ) {
325 iframe_src += ( '&hl=' + params.hl );
326 }
327
328 if ( params.hasOwnProperty( 'cc_lang_pref' ) ) {
329 iframe_src += ( '&cc_lang_pref=' + params.cc_lang_pref );
330 }
331
332 if ( $( '#' + player_id ).prop( 'tagName' ).toLowerCase() == 'iframe' ) {
333 $( '#' + player_id ).attr( 'src', iframe_src );
334 } else {
335 $( '#' + player_id ).replaceWith( '<iframe id="' + player_id + '" class="ayg-player-iframe" width="100%" height="100%" src="' + iframe_src + '" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>' );
336 }
337
338 player = new YT.Player( player_id, { events: args.events } );
339 }
340
341 if ( 1 == ayg_public.cookie_consent ) {
342 var html = '<div class="ayg-privacy-wrapper" style="background-image: url(' + args.custom.image + ');">';
343 html += '<div class="ayg-privacy-consent-block">';
344 html += '<div class="ayg-privacy-consent-message">' + ayg_public.consent_message + '</div>';
345 html += '<div class="ayg-privacy-consent-button">' + ayg_public.button_label + '</div>';
346 html += '</div>';
347 html += '</div>';
348
349 $player_wrapper.append( html );
350
351 $player_wrapper.on( 'click', '.ayg-privacy-consent-button', function() {
352 $( this ).html( '...' );
353
354 var data = {
355 'action': 'ayg_set_cookie',
356 'security': ayg_public.ajax_nonce
357 };
358
359 $.post(
360 ayg_public.ajax_url,
361 data,
362 function( response ) {
363 if ( response.success ) {
364 ayg_public.cookie_consent = 0;
365
366 params.autoplay = 1;
367 init_player();
368
369 $player_wrapper.find( '.ayg-privacy-wrapper' ).remove();
370 }
371 }
372 );
373 });
374 } else {
375 init_player();
376 }
377
378 return {
379 play: function() {
380 if ( player && player.playVideo ) {
381 player.playVideo();
382 }
383 },
384 change: function( obj ) {
385 if ( player && player.loadVideoById ) {
386 player.loadVideoById( obj.id );
387 } else {
388 video_id = obj.id;
389
390 if ( 1 == ayg_public.cookie_consent ) {
391 $player_wrapper.find( '.ayg-privacy-wrapper' ).css( 'background-image', "url(" + obj.image + ")" );
392 }
393 }
394 },
395 stop: function() {
396 if ( player && player.stopVideo ) {
397 player.stopVideo();
398 }
399 },
400 destroy: function() {
401 if ( player ) {
402 if ( player.stopVideo ) {
403 player.stopVideo();
404 }
405
406 if ( player.destroy ) {
407 player.destroy();
408 }
409 } else {
410 $( '#' + player_id ).remove();
411 }
412
413 if ( 1 == ayg_public.cookie_consent ) {
414 $player_wrapper.find( '.ayg-privacy-wrapper' ).remove();
415 }
416 }
417 };
418 }
419
420 window.ayg_init_player = ayg_init_player;
421
422 /**
423 * Init Pagination.
424 *
425 * @since 2.0.0
426 */
427 var ayg_init_pagination = function( $pagination ) {
428 var params = $pagination.data( 'params' );
429
430 params.action = 'ayg_load_more_videos';
431 params.security = ayg_public.ajax_nonce;
432
433 var total_pages = parseInt( params.total_pages );
434 var paged = 1;
435 var previous_page_tokens = [''];
436
437 var $gallery = $pagination.closest( '.ayg' ).find( '.ayg-gallery' );
438
439 // On next/more button clicked
440 $pagination.on( 'click', '.ayg-pagination-next-btn', function() {
441 var $this = $( this );
442
443 $pagination.addClass( 'ayg-loading' );
444
445 var type = $this.data( 'type' );
446
447 params.pageToken = params.next_page_token;
448 previous_page_tokens[ paged ] = params.next_page_token;
449
450 $.post( ayg_public.ajax_url, params, function( response ) {
451 if ( response.success ) {
452 paged = Math.min( paged + 1, total_pages );
453
454 params.next_page_token = '';
455 if ( paged < total_pages && response.data.next_page_token ) {
456 params.next_page_token = response.data.next_page_token;
457 }
458
459 switch ( type ) {
460 case 'more':
461 $gallery.append( response.data.html );
462 break;
463 case 'next':
464 $pagination.find( '.ayg-pagination-prev-btn' ).show();
465 $pagination.find( '.ayg-pagination-current-page-number' ).html( paged );
466
467 $gallery.html( response.data.html );
468 break;
469 }
470
471 if ( '' == params.next_page_token ) {
472 $this.hide();
473 }
474
475 $pagination.trigger( 'gallery.updated' );
476 }
477
478 $pagination.removeClass( 'ayg-loading' );
479 });
480 });
481
482 // On previous button clicked
483 $pagination.on( 'click', '.ayg-pagination-prev-btn', function() {
484 var $this = $( this );
485
486 $pagination.addClass( 'ayg-loading' );
487
488 paged = Math.max( paged - 1, 1 );
489
490 params.pageToken = previous_page_tokens[ paged - 1 ];
491
492 $.post( ayg_public.ajax_url, params, function( response ) {
493 if ( response.success ) {
494 params.next_page_token = '';
495 if ( response.data.next_page_token ) {
496 params.next_page_token = response.data.next_page_token;
497 }
498
499 $gallery.html( response.data.html );
500
501 $pagination.find( '.ayg-pagination-next-btn' ).show();
502 $pagination.find( '.ayg-pagination-current-page-number' ).html( paged );
503
504 if ( 1 == paged ) {
505 $this.hide();
506 }
507
508 $pagination.trigger( 'gallery.updated' );
509 }
510
511 $pagination.removeClass( 'ayg-loading' );
512 });
513 });
514 }
515
516 window.ayg_init_pagination = ayg_init_pagination;
517
518 /**
519 * Pause other players.
520 *
521 * @since 2.3.0
522 */
523 var ayg_pause_other_players = function( player_id ) {
524 if ( ! ayg_public.active_player_id ) {
525 ayg_public.active_player_id = player_id;
526 }
527
528 if ( player_id == ayg_public.active_player_id ) {
529 return false;
530 }
531
532 ayg_public.active_player_id = player_id;
533
534 $( 'iframe.ayg-player-iframe:not(#' + player_id + ')' ).each(function() {
535 this.contentWindow.postMessage( '{"event":"command", "func":"pauseVideo", "args":""}', '*' );
536 });
537 }
538
539 window.ayg_pause_other_players = ayg_pause_other_players;
540
541 /**
542 * Called when the page has loaded.
543 *
544 * @since 1.0.0
545 */
546 $(function() {
547 // Init Automatic YouTube Gallery
548 if ( 'undefined' === typeof window['YT'] ) {
549 var tag = document.createElement( 'script' );
550 tag.src = "https://www.youtube.com/iframe_api";
551 var first_script_tag = document.getElementsByTagName( 'script' )[0];
552 first_script_tag.parentNode.insertBefore( tag, first_script_tag );
553 }
554
555 if ( 'undefined' == typeof window.onYouTubeIframeAPIReady ) {
556 window.onYouTubeIframeAPIReady = function() {
557 ayg_init();
558 };
559 } else if ( 'undefined' !== typeof window.YT ) {
560 ayg_init();
561 }
562
563 var interval = setInterval(
564 function() {
565 if ( 'undefined' !== typeof window.YT && window.YT.loaded ) {
566 clearInterval( interval );
567 ayg_init();
568 }
569 },
570 10
571 );
572
573 // Locate gallery element on single video pages
574 var gallery_id = ayg_public.gallery_id;
575 if ( '' != gallery_id && $( '#ayg-' + gallery_id ).length ) {
576 if ( history.scrollRestoration ) {
577 history.scrollRestoration = 'manual';
578 } else {
579 window.onbeforeunload = function () {
580 window.scrollTo( 0, 0 );
581 }
582 }
583
584 $( 'html, body' ).animate({
585 scrollTop: $( '#ayg-' + gallery_id ).offset().top - ayg_public.top_offset
586 }, 500);
587 }
588
589 // Toggle more/less content in the player description
590 $( document ).on( 'click', '.ayg-player-description-toggle-btn', function( event ) {
591 event.preventDefault();
592
593 var $this = $( this);
594 var $description = $this.closest( '.ayg-player-description' );
595 var $dots = $description.find( '.ayg-player-description-dots' );
596 var $more = $description.find( '.ayg-player-description-more' );
597
598 if ( $dots.is( ':visible' ) ) {
599 $this.html( ayg_public.i18n.show_less );
600 $dots.hide();
601 $more.fadeIn();
602 } else {
603 $more.fadeOut(function() {
604 $this.html( ayg_public.i18n.show_more );
605 $dots.show();
606 });
607 }
608 });
609
610 // Gutenberg: On block init
611 if ( 'undefined' !== typeof wp && 'undefined' !== typeof wp['hooks'] ) {
612 var ayg_block_interval;
613 var ayg_block_interval_retry_count;
614
615 wp.hooks.addFilter( 'ayg_block_init', 'automatic-youtube-gallery/block', function( attributes ) {
616 if ( 'livestream' == attributes.type ) {
617 if ( ayg_block_interval_retry_count > 0 ) {
618 clearInterval( ayg_block_interval );
619 }
620
621 ayg_block_interval_retry_count = 0;
622
623 ayg_block_interval = setInterval(
624 function() {
625 ayg_block_interval_retry_count++;
626 var $players = $( '.ayg-theme-livestream:not(.ayg-theme-initialized)' );
627
628 if ( $players.length > 0 || ayg_block_interval_retry_count >= 10 ) {
629 clearInterval( ayg_block_interval );
630 ayg_block_interval_retry_count = 0;
631
632 $players.each(function() {
633 init_livestream( $( this ) );
634 });
635 }
636 },
637 1000
638 );
639 }
640
641 return attributes;
642 });
643 }
644 });
645
646 })( jQuery );