Anomalie #450: Hardclick autoplay

src/Muzich/CoreBundle/Resources/views/layout.html.twig

@@ -97,6 +97,7 @@
         <img src="{{ asset('/bundles/muzichcore/img/1353505874_button_next.png') }}" alt="next" />
       </a>
       
+    <img id="autoplay_element_loader" src="{{ asset('/bundles/muzichcore/img/ajax-loader.gif') }}" alt="loader" />
     <ul id="autoplay_element"><li class="element" id="autoplay_element_container"></li></ul>
     <div id="autoplay_player_container">
       <div id="autoplay_player"></div>

web/bundles/muzichcore/js/autoplay.js

@@ -17,6 +17,11 @@ $(document).ready(function(){
   var autoplay_player_id     = "autoplay_player_id";
   // étape de lecture, on commence naturellement a 0
   var autoplay_step = 0;
+  // On utilise cette variable pour savoir quel est l'élélement choisis en 
+  // dernier (cas du brute click)
+  var autoplay_last_element_id = null;
+  // Pour savoir si on est en bout de ligne
+  var autoplay_no_more = false;
   
   // En cas de click sur un bouton de lecture
   $('a#autoplay_launch').click(function(){
@@ -35,6 +40,7 @@ $(document).ready(function(){
       {
         // On récupère la liste d'élèments
         autoplay_list = response.data;
+        autoplay_last_element_id = autoplay_list[0].element_id;
         autoplay_run(0);
       }
       
@@ -42,56 +48,76 @@ $(document).ready(function(){
     return false;
   });
   
-  // Lancement de l'élèment suivant
-  function autoplay_run(step)
+  function autoplay_load_element(element_id, timeouted)
   {
-    // En premier lieu on réinitialise le lecteur en détruisant le dom qui a
-    // pu être créé par la lecture précedente.
-    $('div#'+autoplay_player_div_id+'_container').html('<div id="'+autoplay_player_div_id+'"></div>');
-    $('#autoplay_noelements_text').hide();
-    $('li#autoplay_element_container').html('');
-    $('img#autoplay_loader').show();
-    
-    
-    ////// TMP to check
-    if (autoplay_player_soundcloud)
+    // On vérifie ici que c'est le dernier élement demandé, ca evite de multiples
+    // requetes en cas de brute click sur les flèches.
+    if (!timeouted)
     {
-      autoplay_player_soundcloud.pause();
+      $('#autoplay_element_loader').show();
+      $('li#autoplay_element_container').html('');
+      setTimeout(autoplay_load_element, 1000, element_id, true);
     }
-    $('div#autoplay_player_soundcloud').hide();
-    
-    if (autoplay_list.length)
+    else
     {
-    
-      if (array_key_exists(step, autoplay_list))
+      if (autoplay_last_element_id == element_id)
       {
-        
-        // Récupération du dom d'un élement
-        $.getJSON(url_element_dom_get_one_autoplay+'/'+autoplay_list[step].element_id, function(response) {
+        $.getJSON(url_element_dom_get_one_autoplay+'/'+element_id, function(response) {
+          
+          $('#autoplay_element_loader').hide();
+      
           if (response.status == 'mustbeconnected')
           {
             $(location).attr('href', url_index);
           }
-          
-          if (response.status == 'success')
+
+          if (response.status == 'success' && autoplay_last_element_id == element_id)
           {
-            // On récupère la liste d'élèments
-            $('li#autoplay_element_container').html(response.data);
-            
-            // Youtube case
-            if (autoplay_list[step].element_type == 'youtube.com' || autoplay_list[step].element_type == 'youtu.be')
+            if (!autoplay_no_more)
             {
-              youtube_create_player(autoplay_list[step].element_ref_id);
+              // On récupère la liste d'élèments
+              $('li#autoplay_element_container').html(response.data);
             }
-            
-            if (autoplay_list[step].element_type == 'soundcloud.com')
+            else
             {
-              soundcloud_create_player(autoplay_list[step].element_ref_id, autoplay_list[step].element_normalized_url);
+              $('li#autoplay_element_container').html('');
             }
           }
 
         });
+      }
+      
+    }
+  }
+  
+  // Lancement de l'élèment suivant
+  function autoplay_run(step)
+  {
+    // En premier lieu on réinitialise le lecteur en détruisant le dom qui a
+    // pu être créé par la lecture précedente.
+    autoplay_clean_for_player_creation();
+    
+    // Pause des lecteurs potentiels
+    autoplay_pause_all_players();
+    
+    if (autoplay_list.length)
+    {
+    
+      if (array_key_exists(step, autoplay_list))
+      {
         
+        // Youtube case
+        if (autoplay_list[step].element_type == 'youtube.com' || autoplay_list[step].element_type == 'youtu.be')
+        {
+          autoplay_load_element(autoplay_list[step].element_id, false);
+          youtube_create_player(autoplay_list[step].element_ref_id);
+        }
+
+        if (autoplay_list[step].element_type == 'soundcloud.com')
+        {
+          autoplay_load_element(autoplay_list[step].element_id, false);
+          soundcloud_create_player(autoplay_list[step].element_ref_id, autoplay_list[step].element_normalized_url);
+        }
         
       }
     
@@ -102,8 +128,27 @@ $(document).ready(function(){
     }
   }
   
+  function autoplay_clean_for_player_creation(clean_element)
+  {
+    autoplay_pause_all_players();
+    
+    $('div#'+autoplay_player_div_id+'_container').html('<div id="'+autoplay_player_div_id+'"></div>');
+    $('#autoplay_noelements_text').hide();
+    if (clean_element)
+    {
+      $('li#autoplay_element_container').html('');
+    }
+    $('img#autoplay_loader').show();
+  }
+  
+  function autoplay_pause_all_players()
+  {
+    soundcloud_stop_player();
+  }
+  
   function autoplay_display_nomore()
   {
+    autoplay_no_more = true;
     $('div#'+autoplay_player_div_id+'_container').html('<div id="'+autoplay_player_div_id+'"></div>');
     $('li#autoplay_element_container').html('');
     $('#autoplay_noelements_text').show();
@@ -118,9 +163,11 @@ $(document).ready(function(){
   // Avancer d'un élelement dans la liste
   function autoplay_next()
   {
+    autoplay_no_more = false;
     autoplay_step++;
     if (array_key_exists(autoplay_step, autoplay_list))
     {
+      autoplay_last_element_id = autoplay_list[autoplay_step].element_id;
       autoplay_run(autoplay_step);
     }
     else
@@ -133,9 +180,11 @@ $(document).ready(function(){
   // Reculer d'un élement dans la liste
   function autoplay_previous()
   {
+    autoplay_no_more = false;
     autoplay_step--;
     if (array_key_exists(autoplay_step, autoplay_list))
     {
+      autoplay_last_element_id = autoplay_list[autoplay_step].element_id;
       autoplay_run(autoplay_step);
     }
     else
@@ -173,6 +222,9 @@ $(document).ready(function(){
   // Création du lecteur FLASH youtube
   function youtube_create_player(ref_id)
   {
+    // Préparation du terrain
+    autoplay_clean_for_player_creation();
+    
     var playerapiid = "ytplayerapiid";
     var params = {allowScriptAccess: "always"};
     var atts = {id: autoplay_player_id};
@@ -229,6 +281,9 @@ $(document).ready(function(){
   function soundcloud_create_player(ref_id, ref_url)
   {
     
+    // Préparation du terrain
+    autoplay_clean_for_player_creation();
+    
     // Variable dans lequelle on met l'index dela track lu précedamment
     var index_track_previous = 0;
      
@@ -310,4 +365,13 @@ $(document).ready(function(){
          
   }
   
+  function soundcloud_stop_player()
+  {
+    if (autoplay_player_soundcloud)
+    {
+      autoplay_player_soundcloud.pause();
+    }
+    $('div#autoplay_player_soundcloud').hide();
+  }
+  
 });