2121706658 youtube viewport loading

flowplayer.php

@@ -27,7 +27,7 @@
 */
 
 global $fv_wp_flowplayer_ver;
-$fv_wp_flowplayer_ver = '7.5.29.7212.10';
+$fv_wp_flowplayer_ver = '7.5.29.7212.11';
 $fv_wp_flowplayer_core_ver = '7.2.12.1';
 include_once( dirname( __FILE__ ) . '/includes/extra-functions.php' );
 if( file_exists( dirname( __FILE__ ) . '/includes/module.php' ) ) {

flowplayer/fv-player-youtube.dev.js

@@ -215,13 +215,17 @@ if( typeof(flowplayer) != "undefined" ) {
       wrapperTag.className = 'fp-engine fvyoutube-engine';
       common.prepend(common.find(".fp-player", root)[0], wrapperTag);    
 
-        //console.log('new YT preload');  //  probably shouldn't happen when used in lightbox
+        if( window.fv_player_pro_yt_load ) {
+          preload( true );
 
+        } else {
         // this is the event which lets the player load YouTube
-        jQuery(document).one('fv-player-yt-api-loaded', function() {
+          jQuery(document).one( 'fv-player-yt-api-loaded', preload );
+        }
 
-          // only one player can enter the loading phase
-          if( ( typeof(YT) == "undefined" || typeof(YT.Player) == "undefined" ) && window.fv_player_pro_yt_loading ) {
+        function preload( force ) {
+          // only one player can enter the loading phase, unless it's forced
+          if( ( typeof(YT) == "undefined" || typeof(YT.Player) == "undefined" ) && window.fv_player_pro_yt_loading && !force ) {
             return;
           }
 
@@ -245,8 +249,6 @@ if( typeof(flowplayer) != "undefined" ) {
 
             jQuery('.fp-engine.fvyoutube-engine',root)[0].allowFullscreen = false;
 
-
-
             // splash needs to cover the iframe
             var splash = jQuery('.fp-splash',root);
             jQuery('.fp-ui',root).before( splash );            
@@ -265,7 +267,7 @@ if( typeof(flowplayer) != "undefined" ) {
             api.fv_yt_onError = fv_player_pro_youtube_addRemovableEventListener(api.youtube,'onError',fv_player_pro_youtube_onError);
 
           }, 50 );
-        });
+        }
 
         if( !window.fv_player_pro_yt_load ) {
           window.fv_player_pro_yt_load = true;
@@ -986,9 +988,32 @@ if( typeof(flowplayer) != "undefined" ) {
 
       if( fv_player_pro_youtube_is_mobile() ) {
         // Give Flowplayer a bit of time to finish initializing, like the unload event for splash state players has to finish
-        setTimeout( function() {
+
+        load_youtube_in_viewport();
+
+        jQuery(window).on( 'scroll', load_youtube_in_viewport_debounce );
+      }
+
+        var debounce = false;
+      function load_youtube_in_viewport_debounce() {
+          clearInterval(debounce);
+          debounce = setTimeout( load_youtube_in_viewport, 100 );
+      }
+
+      function load_youtube_in_viewport() {        
+        var rect = root.getBoundingClientRect();
+        if(
+          (
+            rect.top > 0 && ( rect.top + 32 ) < (window.innerHeight || document.documentElement.clientHeight) ||
+            rect.bottom > 16 && rect.bottom <= (window.innerHeight || document.documentElement.clientHeight)
+          ) &&
+          rect.left >= 0 &&
+          rect.right <= (window.innerWidth || document.documentElement.clientWidth)
+        ) {
+          jQuery(window).off( 'scroll', load_youtube_in_viewport_debounce );
+
           fv_player_pro_youtube_preload(root,api);
-        });
+        }
       }
     });
 

flowplayer/modules/fv-player.js

@@ -1,3 +1,5 @@
+/* eslint-disable no-inner-declarations */
+/* eslint-disable no-cond-assign */
 
 /**
  * FV Flowplayer additions!
@@ -51,7 +53,7 @@ if( typeof(fv_flowplayer_conf) != "undefined" ) {
         return parseFloat(e[e.length - 1].replace('_', '.'), 10);
     }
     return 0;
-  };
+  }
 
   if( flowplayer.support.iOS && flowplayer.support.iOS.chrome && flowplayer.support.iOS.version == 0 ) {
     flowplayer.support.iOS.version = parseIOSVersion(navigator.userAgent);
@@ -220,7 +222,9 @@ function fv_player_preload() {
     }
 
     // failsafe is Flowplayer is loaded outside of fv_player_load()
-    var playlist = jQuery('.fp-playlist-external[rel='+root.attr('id')+']');
+    var playlist = jQuery('.fp-playlist-external[rel='+root.attr('id')+']'),
+      parsed;
+
     if( ( !api.conf.playlist || api.conf.playlist.length == 0 ) && playlist.length && playlist.find('a[data-item]').length > 0 ) {  // api.conf.playlist.length necessary for iOS 9 in some setups
       var items = [];      
       playlist.find('a[data-item]').each( function() {
@@ -264,7 +268,7 @@ function fv_player_preload() {
 
       if( jQuery( '#' + $this.parent().attr('rel') ).hasClass('dynamic-playlist') ) return;
 
-      var playlist = jQuery('.fp-playlist-external[rel='+root.attr('id')+']');
+      playlist = jQuery('.fp-playlist-external[rel='+root.attr('id')+']');
 
       fv_player_playlist_active(playlist,this);
 
@@ -395,9 +399,9 @@ function fv_player_preload() {
     });
 
     //is this needed?  
-    var playlist = jQuery(root).parent().find('div.fp-playlist-vertical[rel='+jQuery(root).attr('id')+']');  
+    playlist = jQuery(root).parent().find('div.fp-playlist-vertical[rel='+jQuery(root).attr('id')+']');  
     if( playlist.length ){
-      function check_size_and_all(args) {
+      function check_size_and_all() {
         var property = playlist.hasClass('fp-playlist-only-captions') ? 'height' : 'max-height';
         if( playlist.parents('.fp-playlist-text-wrapper').hasClass('is-fv-narrow') ){
           property = 'max-height';
@@ -411,7 +415,7 @@ function fv_player_preload() {
       } );
     }
 
-    function vertical_playlist_height(args) {
+    function vertical_playlist_height() {
       var height = root.height();
       if( height == 0 ) height = root.css('max-height');
       return height;
@@ -530,7 +534,7 @@ function fv_player_load( forced_el ) {
       }
     }
 
-    var conf = false;
+    var conf = false, playlist, parsed;
     if( root.attr('data-item') ) {
       conf = { clip: fv_player_videos_parse(root.attr('data-item'), root) };
 
@@ -557,7 +561,7 @@ function fv_player_load( forced_el ) {
     }
   } );
 
-  jQuery('.fv-playlist-slider-wrapper').each( function(i,el) {
+  jQuery('.fv-playlist-slider-wrapper').each( function() {
     var items = jQuery(this).find('a');
     jQuery(this).find('.fp-playlist-external').css( 'width', items.outerWidth() * items.length );
   });
@@ -580,7 +584,7 @@ function fv_player_playlist_active(playlist,item) {
     jQuery('.now-playing').remove();
   }
 
-  $playlist = jQuery(playlist);
+  var $playlist = jQuery(playlist),
   $item = jQuery(item);
 
   var scroll_parent = false;
@@ -641,8 +645,6 @@ function fv_player_playlist_active(playlist,item) {
 }
 
 
-var fv_fp_date = new Date();
-var fv_fp_utime = fv_fp_date.getTime();
 
 
 /* *
@@ -882,7 +884,7 @@ function fv_player_video_link_seek( api, fTime, abEnd, abStart ) {
     // unless the video position is > 0
     if ( fTime > 0 || api.video.time > 0 ) {
       // use the FV Player Pro method if available which considers the custom start/end time
-      if( !!api.custom_seek ) {
+      if( api.custom_seek ) {
         api.custom_seek(fTime);
       } else {
         api.seek(fTime);