Evolution #196: Liste de lecture

app/Resources/translations/elements.fr.yml

@@ -89,7 +89,9 @@ elements:
     more:
       noelements:       Pas d'autres éléments
   autoplay:
-    launch:             Créer une liste de lecture avec ces paramètres
+    launch:             Lecture automatique
+    noelements:
+      text:             Aucun partage a lire
       
 show:
   user:

src/Muzich/CoreBundle/Controller/ElementController.php

@@ -10,6 +10,7 @@ use Symfony\Component\HttpFoundation\Request;
 use Muzich\CoreBundle\Entity\Element;
 use Muzich\CoreBundle\Util\TagLike;
 use Muzich\CoreBundle\Entity\User;
+use Muzich\CoreBundle\lib\AutoplayManager;
 
 class ElementController extends Controller
 {
@@ -985,4 +986,44 @@ class ElementController extends Controller
     ));
   }
   
+  /**
+   * Retourne les données permettant de faire une playlist
+   * 
+   * @param Request $request 
+   * @param "filter"|"show"|"favorites" $type
+   * @param ~ $data
+   */
+  public function getDatasAutoplayAction(Request $request, $type, $data)
+  {
+    if (($response = $this->mustBeConnected(true)))
+    {
+      return $response;
+    }
+    
+    $elements = array();
+    $elements_json = array();
+    
+    if ($type == 'filter')
+    {
+      // Pour cette option on utilise le dernier filtre appliqué
+      $search_object = $this->getElementSearcher();
+      $search_object->update(array(
+        'count' => $this->container->getParameter('autoplay_max_elements')
+      ));
+      $elements = $search_object->getElements($this->getDoctrine(), $this->getUserId());
+    }
+    
+    if (count($elements))
+    {
+      // On récupère les élements
+      $autoplaym = new AutoplayManager($elements, $this->container);
+      $elements_json = $autoplaym->getList();
+    }
+    
+    return $this->jsonResponse(array(
+      'status'    => 'success',
+      'data'      => $elements_json
+    ));
+  }
+  
 }

src/Muzich/CoreBundle/Resources/config/routing.yml

@@ -159,7 +159,10 @@ teapot:
 element_retrieve_api_datas:
   pattern: /ajax/element/get/datas/api
   defaults: { _controller: MuzichCoreBundle:Element:getDatasApi }
-  requirements:
+    
+elements_get_filter_data_autoplay:
+  pattern: /ajax/elements/get/datas/autoplay/{type}/{data}
+  defaults: { _controller: MuzichCoreBundle:Element:getDatasAutoplay, data: null }
     
 element_show_need_tags:
   pattern: /need-tags

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

@@ -82,7 +82,7 @@
   
   <div id="autoplay" class="popin_block" style="display: none;">
     <a href="javascript:void(0);" id="autoplay_close" >
-      <img src="{{ asset('/bundles/muzichcore/img/1328276855_list-remove.png') }}" alt="close" />
+      <img src="{{ asset('/bundles/muzichcore/img/1353498913_window-close.png') }}" alt="close" />
     </a>
     <div id="autoplay_controls">
       
@@ -100,6 +100,7 @@
       <div id="autoplay_player"></div>
     </div>
     <img id="autoplay_loader" src="{{ asset('/bundles/muzichcore/img/ajax-loader.gif') }}" alt="loader" />
+    <p id="autoplay_noelements_text" style="display: none;">{{ 'elements.autoplay.noelements.text'|trans({}, 'elements') }}</p>
   </div>
     
   {% include "MuzichCoreBundle:Language:languages.html.twig" %}

src/Muzich/CoreBundle/lib/AutoplayManager.php

@@ -18,14 +18,21 @@ class AutoplayManager
   
   /**
    *
+   * @var Container 
+   */
+  protected $container;
+  
+  /**
+   *
    * @param array $elements 
    */
-  public function __construct($elements)
+  public function __construct($elements, $container)
   {
     $this->elements = $elements;
+    $this->container = $container;
   }
   
-  public function getListJSON()
+  public function getList()
   {
     $list = array();
     
@@ -37,7 +44,7 @@ class AutoplayManager
         // Et le site doit être pris en charge pour le autoplay
         in_array(
           ($element_type = $element->getType()), 
-          $this->container->getParameter('dailymotion_player_width')
+          $this->container->getParameter('autoplay_sites_enabled')
         )
       )
       
@@ -49,7 +56,7 @@ class AutoplayManager
       );
     }
     
-    return json_encode($list);
+    return $list;
   }
   
 }

src/Muzich/HomeBundle/Resources/views/Home/index.html.twig

@@ -90,13 +90,17 @@
     } %}
     
     <input class="main button" type="submit" value="{{ 'filter.submit'|trans({}, 'userui') }}"/>
-    
-    <a href="javascript:void(0);" class="button" id="autoplay_launch">
-      {{ 'elements.autoplay.launch'|trans({}, 'elements') }}
-    </a>
-    
+        
   </form>
 
+  
+  <a href="{{ path('elements_get_filter_data_autoplay', {
+    'type' : 'filter'
+  }) }}" class="button" id="autoplay_launch" 
+     title="{{ 'elements.autoplay.launch'|trans({}, 'elements') }}" >
+    <img src="{{ asset('/bundles/muzichcore/img/1353494305_player_play.png') }}" alt="" />
+  </a>
+
   <div class="display_more_elements" style="display: none;">
     <span></span>
   </div>

web/bundles/muzichcore/css/main.css

@@ -1308,6 +1308,12 @@ span#add_url_title
   font-size: 15px;
 }
 
+a#autoplay_launch
+{
+  float: right;
+  margin-top: -25px;
+}
+
 div#autoplay.popin_block
 {
   width: 500px;
@@ -1341,6 +1347,6 @@ a#autoplay_close
 {
   float: right;
   text-decoration: none;
-  margin-top: -27px;
-  margin-right: -27px;
+  margin-top: -32px;
+  margin-right: -32px;
 }

web/bundles/muzichcore/js/autoplay.js

@@ -5,47 +5,72 @@ $(document).ready(function(){
    * Section commune
    */
   
+  // Liste de données pour la lecture
   var autoplay_list = new Array;
+  // object player
   var autoplay_player = null;
+  // identifiant de la division du lecteur
   var autoplay_player_div_id = "autoplay_player";
+  // identifiant du lecteur
   var autoplay_player_id     = "autoplay_player_id";
+  // étape de lecture, on commence naturellement a 0
   var autoplay_step = 0;
   
+  // En cas de click sur un bouton de lecture
   $('a#autoplay_launch').click(function(){
     
-    // on fake l'ajax pour les tests
-    
-    var firdtvidz = new Array;
-    firdtvidz['element_ref_id'] = 'tq4DjQK7nsM';
-    firdtvidz['element_type']   = 'youtu.be';
-    firdtvidz['element_id']     = '99989';
-    firdtvidz['element_name']   = 'Ed Cox - La fanfare des teuffeurs (Hardcordian)';
-    
-    var secondvidz = new Array;
-    secondvidz['element_ref_id'] = 'bIAFB4vRdGw';
-    secondvidz['element_type']   = 'youtube.com';
-    secondvidz['element_id']     = '2345';
-    secondvidz['element_name']   = 'Babylon Pression - Des Tasers et des Pauvres';
-    
-    autoplay_list[0] = firdtvidz;
-    autoplay_list[1] = secondvidz;
-  
+    // On ouvre la boite de dialogue pendant la demande ajax
     open_popin_dialog('autoplay');
-    autoplay_run(0);
+    $('img#autoplay_loader').show();
+    
+    $.getJSON($(this).attr('href'), function(response) {
+      if (response.status == 'mustbeconnected')
+      {
+        $(location).attr('href', url_index);
+      }
+      
+      if (response.status == 'success')
+      {
+        // On récupère la liste d'élèments
+        autoplay_list = response.data;
+        autoplay_run(0);
+      }
+      
+    });
+    return false;
   });
   
+  // 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.
     $('div#'+autoplay_player_div_id+'_container').html('<div id="'+autoplay_player_div_id+'"></div>');
+    $('#autoplay_noelements_text').hide();
+    
+    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')
+        {
+          $('img#autoplay_loader').show();
+          $('div#autoplay_title').text(autoplay_list[step].element_name);
+          youtube_create_player(autoplay_list[step].element_ref_id);
+        }
+      }
     
-    if (autoplay_list[step].element_type == 'youtube.com' || autoplay_list[step].element_type == 'youtu.be')
+    }
+    else
     {
-      $('img#autoplay_loader').show();
-      $('div#autoplay_title').text(autoplay_list[step].element_name);
-      youtube_create_player(autoplay_list[step].element_ref_id);
+      $('#autoplay_noelements_text').show();
+      $('img#autoplay_loader').hide();
     }
   }
   
+  // Avancer d'un élelement dans la liste
   function autoplay_next()
   {
     autoplay_step++;
@@ -59,6 +84,7 @@ $(document).ready(function(){
     }
   }
   
+  // Reculer d'un élement dans la liste
   function autoplay_previous()
   {
     autoplay_step--;
@@ -72,12 +98,18 @@ $(document).ready(function(){
     }
   }
   
-  
+  // bouton précedent
   $('a#autoplay_previous').click(function(){ autoplay_previous(); });
+  // bouton suivant
   $('a#autoplay_next').click(function(){ autoplay_next(); });
+  // Fermeture de la lecture auto
   $('a#autoplay_close').click(function(){
+    // Fond gris
     $('#fade').fadeOut(1000, function(){$('#fade').remove();});
+    // On cache le lecteur
     $('#autoplay').hide();
+    // On vide le dom du lecteur
+    $('div#'+autoplay_player_div_id+'_container').html('<div id="'+autoplay_player_div_id+'"></div>');
   });
    
   
@@ -85,6 +117,7 @@ $(document).ready(function(){
    * Fonction youtube.com et youtu.be
    */
     
+  // Création du lecteur FLASH youtube
   function youtube_create_player(ref_id)
   {
     var playerapiid = "ytplayerapiid";
@@ -103,6 +136,7 @@ $(document).ready(function(){
     );
   }
   
+  // Fonction appelé par l'ActionScript (flash) du lecteur youtube quand il est prêt
   window.onYouTubePlayerReady = function()
   {
     autoplay_player = document.getElementById(autoplay_player_id);
@@ -111,14 +145,17 @@ $(document).ready(function(){
     youtube_play();
   }
   
+  // Fonction appelé par le lecteur youtube quand il change d'état
   window.youtube_StateChange = function(newState)
   {
+    // Lorsque la lecture est terminé
     if (newState === 0)
     {
       autoplay_next();
     }
   }
 
+  // Lecture
   function youtube_play()
   {
     if (autoplay_player)

web/bundles/muzichcore/js/muzich.js

@@ -2391,6 +2391,4 @@ $(document).ready(function(){
         top: '20%'
       });
     $('#'+object_id).show();
-    
-    console.debug('width: '+$('#'+object_id).width());
   }