Evolution #196: Liste de lecture

src/Muzich/CoreBundle/Controller/ElementController.php

     ));
   }
   
+  public function getOneDomAction(Request $request, $element_id, $type)
+  {
+    if (($response = $this->mustBeConnected()))
+    {
+      return $response;
+    }
+    
+    if (!in_array($type, array('autoplay')))
+    {
+      return $this->jsonResponse(array(
+        'status' => 'error',
+        'errors' => array('NotAllowed')
+      ));
+    }
+    
+    // variables pour le template
+    $display_edit_actions  = true;
+    $display_player        = true;
+    $display_comments      = true;
+    
+    if ($type == 'autoplay')
+    {
+      $display_edit_actions  = false;
+      $display_player        = false;
+      $display_comments      = false;
+    }
+    
+    if (!($element = $this->getDoctrine()->getRepository('MuzichCoreBundle:Element')
+      ->findOneById($element_id)))
+    {
+      throw $this->createNotFoundException('Not found');
+    }
+    
+    $html = $this->render('MuzichCoreBundle:SearchElement:element.html.twig', array(
+      'element'               => $element,
+      'display_edit_actions'  => $display_edit_actions,
+      'display_player'        => $display_player,
+      'display_comments'      => $display_comments
+    ))->getContent();
+    
+    return $this->jsonResponse(array(
+      'status'  => 'success',
+      'data'    => $html
+    ));
+  }
+  
 }

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

 element_show_need_tags:
   pattern: /need-tags
   defaults: { _controller: MuzichHomeBundle:Home:needTags }
+
+element_dom_get_one:
+  pattern: /ajax/element/dom/get/{type}/{element_id}
+  defaults: { _controller: MuzichCoreBundle:Element:getOneDom, element_id: null }

src/Muzich/CoreBundle/Resources/views/SearchElement/element.html.twig

+{% if display_edit_actions is not defined %}
+  {% set display_edit_actions = true %}
+{% endif %}
+{% if display_player is not defined %}
+  {% set display_player = true %}
+{% endif %}
+{% if display_comments is not defined %}
+  {% set display_comments = true %}
+{% endif %}
+
 <table>
   <tr>
     <td class="element_thumbnail">
       
       {% if element.embed %}
-        <a href="#" class="a_thumbnail element_open element_embed_open_link {% if element.embed %}embed{% else %}noembed{% endif %}">
+        <a href="#" class="a_thumbnail {% if display_player %}element_open element_embed_open_link{% endif %} {% if element.embed and display_player %}embed{% else %}noembed{% endif %}">
           <img class="play" style="display: none;" src="{{ asset('bundles/muzichcore/img/1328283150_media-playback-start.png') }}" alt="" />
           <img 
             class="element_thumbnail"
       
       {% if app.user.id != element.owner.id %}
       
-        <a title="{{ 'element.proposition_tags.link_title'|trans({}, 'userui') }}" 
-          class="element_propose_tags" 
-          href="{{ path('ajax_element_propose_tags_open', {'element_id' : element.id}) }}">
-          <img src="{{ asset('bundles/muzichcore/img/1333484018_rss-tag.png') }}" alt="tags_proposition" />
-        </a>
-        
-        <a title="{{ 'element.reshare.link_title'|trans({}, 'userui') }}" 
-          class="element_reshare" 
-          href="{{ path('ajax_reshare_element', {'element_id':element.id, 'token':app.user.getPersonalHash('reshare_'~element.id)}) }}">
-          <img src="{{ asset('bundles/muzichcore/img/1349338086_adept_update.png') }}" alt="re" />
-        </a>
+      {% if display_edit_actions %}
       
-        <a title="{{ 'element.report.link_title'|trans({}, 'userui') }}" 
-          class="element_report" 
-          href="{{ path('ajax_report_element', {'element_id':element.id, 'token':app.user.getPersonalHash}) }}">
-          <img src="{{ asset('bundles/muzichcore/img/1331832708_comment_alert.png') }}" alt="report" />
-        </a>
+          <a title="{{ 'element.proposition_tags.link_title'|trans({}, 'userui') }}" 
+            class="element_propose_tags" 
+            href="{{ path('ajax_element_propose_tags_open', {'element_id' : element.id}) }}">
+            <img src="{{ asset('bundles/muzichcore/img/1333484018_rss-tag.png') }}" alt="tags_proposition" />
+          </a>
+
+          <a title="{{ 'element.reshare.link_title'|trans({}, 'userui') }}" 
+            class="element_reshare" 
+            href="{{ path('ajax_reshare_element', {'element_id':element.id, 'token':app.user.getPersonalHash('reshare_'~element.id)}) }}">
+            <img src="{{ asset('bundles/muzichcore/img/1349338086_adept_update.png') }}" alt="re" />
+          </a>
+
+          <a title="{{ 'element.report.link_title'|trans({}, 'userui') }}" 
+            class="element_report" 
+            href="{{ path('ajax_report_element', {'element_id':element.id, 'token':app.user.getPersonalHash}) }}">
+            <img src="{{ asset('bundles/muzichcore/img/1331832708_comment_alert.png') }}" alt="report" />
+          </a>
+      
+      {% endif %}
       
       {% endif %}
       
       {% if app.user.id == element.owner.id %}
       
-        {% if element.hasTagProposition %}
-          <a title="{{ 'element.view_propositions.link'|trans({}, 'elements') }}" class="element_view_propositions_link" 
-             href="{{ path('ajax_element_proposed_tags_view', {'element_id' : element.id})  }}"
+        {% if display_edit_actions %}
+      
+          {% if element.hasTagProposition %}
+            <a title="{{ 'element.view_propositions.link'|trans({}, 'elements') }}" class="element_view_propositions_link" 
+              href="{{ path('ajax_element_proposed_tags_view', {'element_id' : element.id})  }}"
+            >
+              <img src="{{ asset('bundles/muzichcore/img/1333493527_tag_add.png') }}" alt="tags proposition" />
+            </a>
+          {% endif %}
+
+          <a title="{{ 'element.edit.link'|trans({}, 'elements') }}" class="element_edit_link" 
+            href="{{ path('element_edit', {'element_id' : element.id})  }}" style="display: none;"
           >
-            <img src="{{ asset('bundles/muzichcore/img/1333493527_tag_add.png') }}" alt="tags proposition" />
+            <img src="{{ asset('bundles/muzichcore/img/1327151338_desktop.png') }}" alt="edit" />
+          </a>
+
+          <a title="{{ 'element.remove.link'|trans({}, 'elements') }}" class="element_remove_link" 
+            href="{{ path('element_remove', {'element_id' : element.id})  }}" style="display: none;"
+          >
+            <img src="{{ asset('bundles/muzichcore/img/1327168960_fileclose.png') }}" alt="delete" />
           </a>
         {% endif %}
       
-        <a title="{{ 'element.edit.link'|trans({}, 'elements') }}" class="element_edit_link" 
-           href="{{ path('element_edit', {'element_id' : element.id})  }}" style="display: none;"
-        >
-          <img src="{{ asset('bundles/muzichcore/img/1327151338_desktop.png') }}" alt="edit" />
-        </a>
-
-        <a title="{{ 'element.remove.link'|trans({}, 'elements') }}" class="element_remove_link" 
-           href="{{ path('element_remove', {'element_id' : element.id})  }}" style="display: none;"
-        >
-          <img src="{{ asset('bundles/muzichcore/img/1327168960_fileclose.png') }}" alt="delete" />
-        </a>
       {% endif %}
       
       <br />
         {{ 'element.show.close_embed'|trans({}, 'elements') }}
       </a>
       
+      {% if display_comments %}
       
-      {% autoescape false %}
-        {% if element.comments|length > 1 %}
-          <a href="#hide_comments_{{ element.id }}" class="hide_comments" style="display: none;">
-            {{ 'element.comments.hideare'|trans({}, 'elements') }}
-          </a>  
-          <a href="#comments_{{ element.id }}" class="display_comments">
-            {{ 'element.comments.thereare'|trans({'%count%':element.comments|length}, 'elements') }}
-          </a>
-        {% elseif element.comments|length == 1 %}
-          <a href="#hide_comments_{{ element.id }}" class="hide_comments" style="display: none;">
-            {{ 'element.comments.hideis'|trans({}, 'elements') }}
-          </a> 
-          <a href="#comments_{{ element.id }}" class="display_comments">
-            {{ 'element.comments.thereis'|trans({}, 'elements') }}
-          </a>
-        {%endif %}
-      {% endautoescape %}
-                
-      <a href="#add_comment_{{ element.id }}" class="add_comment">
-        {{ 'element.comments.add'|trans({}, 'elements') }}
-      </a>
+        {% autoescape false %}
+          {% if element.comments|length > 1 %}
+            <a href="#hide_comments_{{ element.id }}" class="hide_comments" style="display: none;">
+              {{ 'element.comments.hideare'|trans({}, 'elements') }}
+            </a>  
+            <a href="#comments_{{ element.id }}" class="display_comments">
+              {{ 'element.comments.thereare'|trans({'%count%':element.comments|length}, 'elements') }}
+            </a>
+          {% elseif element.comments|length == 1 %}
+            <a href="#hide_comments_{{ element.id }}" class="hide_comments" style="display: none;">
+              {{ 'element.comments.hideis'|trans({}, 'elements') }}
+            </a> 
+            <a href="#comments_{{ element.id }}" class="display_comments">
+              {{ 'element.comments.thereis'|trans({}, 'elements') }}
+            </a>
+          {%endif %}
+        {% endautoescape %}
+
+        <a href="#add_comment_{{ element.id }}" class="add_comment">
+          {{ 'element.comments.add'|trans({}, 'elements') }}
+        </a>
+      
+      {% endif %}
       
       
     </td>
 {% endif %}
 {% endif %}
 
-{% if element.embed %}
+{% if element.embed and display_player %}
   {% autoescape false %}
     <div id="embed_{{ element.id }}" class="element_embed" style="display: none;">
       {{ element.embed }}
   {% endautoescape %}
 {% endif %}
 
+{% if display_comments %}
+
   <div class="comments" style="display: none;">
     <ul class="comments">
     {% if element.comments|length %}
     </a>
       
   </div>
+
+{% endif %}

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

     url_global_search = "{{ path('global_search') }}";
     url_datas_api = "{{ path('element_retrieve_api_datas') }}";
     url_element_add = "{{ path('element_add') }}";
+    url_element_dom_get_one_autoplay = "{{ path('element_dom_get_one', {'type':'autoplay'}) }}";
     
     url_img_ajax_loader = "{{ asset('/bundles/muzichcore/img/ajax-loader.gif') }}";
   </script>
     <a href="javascript:void(0);" id="autoplay_close" >
       <img src="{{ asset('/bundles/muzichcore/img/1353498913_window-close.png') }}" alt="close" />
     </a>
-    <div id="autoplay_controls">
       
       <a href="javascript:void(0);" id="autoplay_previous">
-        <img src="{{ asset('/bundles/muzichcore/img/player_start.png') }}" alt="previous" />
+        <img src="{{ asset('/bundles/muzichcore/img/1353505865_button_previous.png') }}" alt="previous" />
       </a>
       <a href="javascript:void(0);" id="autoplay_next">
-        <img src="{{ asset('/bundles/muzichcore/img/player_end.png') }}" alt="next" />
+        <img src="{{ asset('/bundles/muzichcore/img/1353505874_button_next.png') }}" alt="next" />
       </a>
-        
-      <div id="autoplay_title"></div>
       
-    </div>
+    <ul id="autoplay_element"><li class="element" id="autoplay_element_container"></li></ul>
     <div id="autoplay_player_container">
       <div id="autoplay_player"></div>
     </div>

web/bundles/muzichcore/css/main.css

   background-color: #39C9CC;
 }
 
-#container a
+#container a, #autoplay a
 {
   text-decoration: none;
   color: #00d0de;
 }
 
-#container a.button
+#container a.button, #autoplay a.button
 {
   color: white;
 }
   left: 483px;
 }*/
 
-#container li.element a.favorite_link:hover
+#container li.element a.favorite_link:hover, #autoplay li.element a.favorite_link:hover
 {
   text-decoration: none;
 }
   height: 90px;
 }
 
-#container li.element span.element_name a
+#container li.element span.element_name a, #autoplay li.element span.element_name a
 {
   color: black;
 }
   
 }
 
-ul.elements
+ul.elements, ul#autoplay_element
 {
   margin-left: 0px;
 }
   margin-left: 0px;
 }
   
-.elements ul.element_tags li
+.elements ul.element_tags li, ul#autoplay_element ul.element_tags li
 {
   display: inline;
   font-size: 90%;
   font-size: 15px;
 }
 
+div#autoplay
+{
+  text-align: left;
+  padding-top: 0px;
+}
+
 a#autoplay_launch
 {
   float: right;
   width: 500px;
 }
 
-div#autoplay.popin_block div#autoplay_controls
-{
- text-align: left;
-}
-
 a#autoplay_previous
 {
   float: left;
   text-decoration: none;
+  margin-left: -50px;
 }
 
 a#autoplay_next
 {
   float: right;
   text-decoration: none;
+  margin-right: -50px;
 }
 
 div#autoplay_title
   text-decoration: none;
   margin-top: -32px;
   margin-right: -32px;
+}
+
+div#autoplay_player_container
+{
+  text-align: center;
+}
+
+div#autoplay ul.elements, div#autoplay
+{
+  margin-top: 0px;
 }

web/bundles/muzichcore/js/autoplay.js

     // 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();
     
     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);
-        }
+        
+        // Récupération du dom d'un élement
+        $.getJSON(url_element_dom_get_one_autoplay+'/'+autoplay_list[step].element_id, function(response) {
+          if (response.status == 'mustbeconnected')
+          {
+            $(location).attr('href', url_index);
+          }
+
+          if (response.status == 'success')
+          {
+            // 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')
+            {
+              youtube_create_player(autoplay_list[step].element_ref_id);
+            }
+            
+          }
+
+        });
+        
+        
       }
     
     }
     else
     {
-      $('#autoplay_noelements_text').show();
-      $('img#autoplay_loader').hide();
+      autoplay_display_nomore();
     }
   }
   
+  function autoplay_display_nomore()
+  {
+    $('div#'+autoplay_player_div_id+'_container').html('<div id="'+autoplay_player_div_id+'"></div>');
+    $('li#autoplay_element_container').html('');
+    $('#autoplay_noelements_text').show();
+    $('img#autoplay_loader').hide();
+  }
+  
   // Avancer d'un élelement dans la liste
   function autoplay_next()
   {
     }
     else
     {
-      autoplay_step--;
+      autoplay_display_nomore();
+      autoplay_step = autoplay_list.length;
     }
   }
   
     }
     else
     {
-      autoplay_step++;
+      autoplay_display_nomore();
+      autoplay_step = -1;
     }
   }