Evolution #545: chargements des lecteurs

src/Muzich/CoreBundle/Controller/ElementController.php

@@ -1153,4 +1153,18 @@ class ElementController extends Controller
     ));
   }
   
+  public function getEmbedCodeAction($element_id)
+  {
+    if (!($element = $this->getDoctrine()->getRepository('MuzichCoreBundle:Element')
+      ->findOneById($element_id)))
+    {
+      throw $this->createNotFoundException();
+    }
+    
+    return $this->jsonResponse(array(
+      'status' => 'success',
+      'data'   => $element->getEmbed(),
+    ));
+  }
+  
 }

src/Muzich/CoreBundle/Entity/Element.php

@@ -951,4 +951,9 @@ class Element
     return array();
   }
   
+  public function getRefId()
+  {
+    return $this->getData(self::DATA_REF_ID);
+  }
+  
 }

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

@@ -183,3 +183,7 @@ element_dom_get_one:
 element_get_stream_data:
   pattern: /ajax/element/data/get/stream/{element_id}
   defaults: { _controller: MuzichCoreBundle:Element:geJamendotStreamDatas, element_id: null }
+
+url_get_embed_for_element:
+  pattern: /ajax/element/data/get/embed/{element_id}
+  defaults: { _controller: MuzichCoreBundle:Element:getEmbedCode, element_id: null }

src/Muzich/CoreBundle/Resources/public/js/muzich.js

@@ -396,6 +396,16 @@ $(document).ready(function(){
      li.find('a.element_embed_open_link_text').hide();
      li.find('div.element_embed').show();
      
+    if ((player = window.dynamic_player.play(
+      li.find('div.element_embed'),
+      li.data('type'),
+      li.data('refid'),
+      li.data('elementid')
+    )))
+    {
+      window.players_manager.add(player, li.attr('id'));
+    }
+     
      return false;
   });
   
@@ -421,6 +431,8 @@ $(document).ready(function(){
      li.find('a.element_embed_open_link_text').show();
      $(this).hide();
      
+     window.players_manager.get(li.attr('id')).stop();
+     
      return false;
   });
   

src/Muzich/CoreBundle/Resources/public/js/play2.js

@@ -0,0 +1,136 @@
+
+function DynamicPlayer()
+{
+  
+  this.play = function(object_for_player, player_type, ref_id, element_id)
+  {
+    if ((player = getPlayerObjectForElementType(object_for_player, player_type, ref_id, element_id)))
+    {
+      player.play();
+      return player;
+    }
+    
+    return false;
+  }
+  
+  var getPlayerObjectForElementType = function(object_for_player, player_type, ref_id, element_id)
+  {
+    if (player_type == 'youtube.com' || player_type == 'youtu.be')
+    {
+      return new YoutubePlayer(ref_id, object_for_player);
+    }
+    return new GenericPlayer(element_id, object_for_player);
+  }
+  
+}
+
+function YoutubePlayer(ref_id, object_for_player)
+{
+  var _ref_id = ref_id;
+  var _object_for_player = object_for_player;
+  var _yt_player;
+  
+  this.play = function()
+  { 
+    create_player();
+  }
+  
+  var create_player = function()
+  {
+    var div_for_iframe = $('<div>').attr('id', _object_for_player.attr('id')+'_iframe');
+    _object_for_player.append(div_for_iframe);
+    
+    _yt_player = new YT.Player(_object_for_player.attr('id')+'_iframe', {
+      height  : config_player_youtube_height,
+      width   : config_player_youtube_width,
+      videoId : _ref_id,
+      events  : {
+        'onReady': onPlayerReady,
+        'onStateChange': onPlayerStateChange
+      }
+    });
+    
+    
+  }
+  
+  var onPlayerReady = function(event)
+  {
+    _yt_player.playVideo();
+  }
+  
+  var onPlayerStateChange = function(event)
+  {
+    if (event.data == YT.PlayerState.PLAYING)
+    {
+      
+    }
+    if (event.data == YT.PlayerState.ENDED)
+    {
+      
+    }
+    if (event.data == YT.PlayerState.PAUSED)
+    {
+      
+    }
+    if (event.data == YT.PlayerState.BUFFERING)
+    {
+      
+    }
+    if (event.data == YT.PlayerState.CUED)
+    {
+      
+    }
+  }
+  
+  this.pause = function()
+  {
+    _yt_player.pauseVideo();
+  }
+  
+  this.stop = function()
+  {
+    _yt_player.stopVideo();
+    _object_for_player.html('');
+  }
+}
+
+function GenericPlayer(ref_id, object_for_player)
+{
+  var _ref_id = ref_id;
+  var _object_for_player = object_for_player;
+  
+  this.play = function()
+  {
+    JQueryJson(url_get_embed_for_element+'/'+_ref_id, {}, function(response){
+      if (response.status == 'success')
+      {
+        object_for_player.html(response.data);
+      }
+    });
+  }
+  
+  this.stop = function()
+  {
+    _object_for_player.html('');
+  }
+}
+
+function PlayersManager()
+{
+  var _players = new Array();
+  
+  this.add = function(player, key)
+  {
+    _players[key] = player;
+  }
+  
+  this.get = function(key)
+  {
+    return _players[key];
+  }
+}
+
+$(document).ready(function() {
+  window.dynamic_player = new DynamicPlayer();
+  window.players_manager = new PlayersManager();
+});

src/Muzich/CoreBundle/Resources/views/Layout/head_js.html.twig

@@ -9,11 +9,22 @@
   'js/jquery.form-2.14.js'
   'js/jConfirmAction/jconfirmaction.jquery.js'
   '@MuzichCoreBundle/Resources/public/js/TagPrompt.js'
-  '@MuzichCoreBundle/Resources/public/js/autoplay.js'
+  '@MuzichCoreBundle/Resources/public/js/play.js'
+  '@MuzichCoreBundle/Resources/public/js/play2.js'
   '@MuzichCoreBundle/Resources/public/js/muzich.js' %}{# filter='yui_js' %}#}
   <script src="{{ asset_url }}"></script>
 {% endjavascripts %}
 
+<script>
+  $(document).ready(function(){  
+    // Pour le moment on charge toujours yt api
+    var tag = document.createElement('script');
+    tag.src = "//www.youtube.com/iframe_api";
+    var firstScriptTag = document.getElementsByTagName('script')[0];
+    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
+  });
+</script>
+
 <script type="text/javascript">
   string_follow_stop = "{{ 'user.stop_follow'|trans({}, 'users') }}";
   string_follow_following = "{{ 'user.following'|trans({}, 'users') }}";
@@ -56,6 +67,9 @@
   url_element_add = "{{ path('element_add') }}";
   url_element_dom_get_one_autoplay = "{{ path('element_dom_get_one', {'type':'autoplay'}) }}";
   url_element_get_stream_data = "{{ path('element_get_stream_data') }}";
-
   url_img_ajax_loader = "{{ asset('/bundles/muzichcore/img/ajax-loader.gif') }}";
+  url_get_embed_for_element = "{{ path('url_get_embed_for_element') }}";
+  
+  config_player_youtube_width = "{{ player_config_youtube_width }}";
+  config_player_youtube_height = "{{ player_config_youtube_height }}";
 </script>

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

@@ -8,36 +8,18 @@
   </div>
 {% endif %}
 
-<div class="elements_loader_div">
-  <img class="elements_new_loader" style="display: none;" src="{{ asset('/bundles/muzichcore/img/ajax-loader.gif') }}" alt="loading" />
-</div>
+{% if not app.request.isXmlHttpRequest %}
+  <div class="elements_loader_div">
+    <img class="elements_new_loader" style="display: none;" src="{{ asset('/bundles/muzichcore/img/ajax-loader.gif') }}" alt="loading" />
+  </div>
+{% endif %}
 
 {% if elements|length %}
   {% if not app.request.isXmlHttpRequest %}<ul class="elements">{% endif %}
     {% for element in elements %} 
-      <li class="element 
-
-{% if loop.index0 is even %}
-  {% if invertcolor is not defined %}
-    even
-  {% elseif invertcolor %}
-    odd
-  {% else %}
-    even
-  {% endif %}
-{% else %}
-  {% if invertcolor is not defined %}
-    odd
-  {% elseif invertcolor %}
-    even
-  {% else %}
-    odd
-  {% endif %}
-{% endif %}" id="element_{{ element.id }}">
-             
-        {% include "MuzichCoreBundle:SearchElement:element.html.twig" %}
-
-      </li>
+      
+      {% include "MuzichCoreBundle:SearchElement:li.element.html.twig" %}
+      
     {% endfor %} 
   {% if not app.request.isXmlHttpRequest %}</ul>{% endif %}
 
@@ -61,6 +43,8 @@
 
 {% endif %}
 
-<div class="elements_loader_div">
-  <img class="elements_more_loader" style="display: none;" src="{{ asset('/bundles/muzichcore/img/ajax-loader.gif') }}" alt="loading" />
-</div>
+{% if not app.request.isXmlHttpRequest %}
+  <div class="elements_loader_div">
+    <img class="elements_more_loader" style="display: none;" src="{{ asset('/bundles/muzichcore/img/ajax-loader.gif') }}" alt="loading" />
+  </div>
+{% endif %}

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

@@ -274,12 +274,8 @@
 {% endif %}
 {% endif %}
 
-{% if element.embed and display_player %}
-  {% autoescape false %}
-    <div id="embed_{{ element.id }}" class="element_embed" style="display: none;">
-      {{ element.embed }}
-    </div>
-  {% endautoescape %}
+{% if display_player %}
+  <div id="embed_{{ element.id }}" class="element_embed" style="display: none;"></div>
 {% endif %}
 
 {% if display_comments %}

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

@@ -1,4 +1,13 @@
-<li class="element {{ class_color }}" id="element_{{ element.id }}">
+{% if class_color is not defined %}
+  {% set class_color = '' %}
+{% endif %}
+<li
+  class="element {{ class_color }}"
+  id="element_{{ element.id }}"
+  data-type="{{ element.type }}"
+  data-refid="{{ element.refId }}"
+  data-elementid="{{ element.id }}"
+>
   
   {% include "MuzichCoreBundle:SearchElement:element.html.twig" %}