Evolution #553: Réécrire js autoplay

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

@@ -0,0 +1,155 @@
+
+// TODO: On recpere un tableau des lectures a effectuer:
+// actuellement on a un champ element_id, puis un champs
+// normalized_id (pour soundcloud par exemple). Il faudrait plutot
+// traité du coté php que l'on veut le "id utilisé par objet lecteur"
+// pour ne pas gérer l'héterogénéité coté js
+
+function Autoplay()
+{
+  
+  var _playlist = new Array();
+  var _player = null;
+  var _current_index = 0;
+  
+  this.start = function()
+  {
+    open_popin_dialog('autoplay');
+    initializePlaylist(this.play);
+  }
+  
+  var initializePlaylist = function(callback)
+  {
+    JQueryJson($('a#autoplay_launch').attr('href'), {}, function(response){
+      if (response.status == 'success')
+      {
+        if (response.data.length)
+        {
+          _playlist = response.data;
+        }
+      }
+      callback(0);
+    });
+  }
+  
+  this.play = function(index_to_play, timed)
+  {
+    window.autoplay.stopAndClearAllPlayers();
+    if (array_key_exists(index_to_play, _playlist))
+    {
+      if (!timed)
+      {
+        _current_index = index_to_play;
+        $('#autoplay_element_loader').show();
+        setTimeout(window.autoplay.play, 1000, index_to_play, true);
+      }
+      else if (_current_index == index_to_play)
+      {
+        loadAndDisplayInfos(_playlist[index_to_play].element_id);
+        if (!createPlayer(_playlist[index_to_play], window.autoplay.playNext))
+        {
+          this.play(index_to_play+1);
+        }
+        else
+        {
+          _current_index = index_to_play;
+        }
+      }
+    }
+    else
+    {
+      this.nothingToPlay();
+    }
+  }
+  
+  this.stopAndClearAllPlayers = function()
+  {
+    players = window.players_manager.getAll();
+    for (var i in players)
+    {
+      players[i].stopAndDestroy();
+      window.players_manager.remove(i);
+    }
+  }
+  
+  var loadAndDisplayInfos = function(element_id)
+  {
+    $('#autoplay_element_loader').show();
+    JQueryJson(url_element_dom_get_one_autoplay+'/'+element_id, {}, function(response){
+      if (response.status == 'success')
+      {
+        $('li#autoplay_element_container').html(response.data);
+        $('#autoplay_element_loader').hide();
+      }
+    });
+  }
+  
+  var createPlayer = function(play_data, finish_callback)
+  {
+    $('#autoplay_loader').show();
+    if ((player = window.dynamic_player.play(
+      $('#autoplay_player'),
+      play_data.element_type,
+      play_data.element_ref_id,
+      play_data.element_id,
+      true,
+      finish_callback
+    )))
+    {
+      $('#autoplay_loader').hide();
+      window.players_manager.add(player, 'autoplay_'+play_data.element_id);
+      return true;
+    }
+    else
+    {
+      return false;
+    }
+  }
+  
+  this.playNext = function()
+  {
+    window.autoplay.play(_current_index+1);
+  }
+  
+  this.playPrevious = function()
+  {
+    if (array_key_exists(_current_index-1, _playlist))
+    {
+      window.autoplay.play(_current_index-1);
+    }
+    return false;
+  }
+  
+  this.nothingToPlay = function()
+  {
+    this.stopAndClearAllPlayers();
+    $('#autoplay_noelements_text').show();
+    $('div#autoplay_player_container').html('<div id="autoplay_player"></div>');
+    $('li#autoplay_element_container').html('');
+    $('#autoplay iframe').hide();
+  }
+  
+}
+
+$(document).ready(function() {
+  
+  window.autoplay = new Autoplay();
+  
+  $('a#autoplay_launch').click(function(){
+    window.autoplay.start();
+    return false;
+  });
+  
+  $('a#autoplay_previous').click(function(){window.autoplay.playPrevious()});
+  
+  $('a#autoplay_next').click(function(){window.autoplay.playNext()});
+  
+  $('a#autoplay_close').click(function(){
+    // Fond gris
+    $('#fade').fadeOut(1000, function(){$('#fade').remove();});
+    // On cache le lecteur
+    $('#autoplay').hide();
+    window.autoplay.stopAndClearAllPlayers();
+  });
+  
+});

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

@@ -400,7 +400,8 @@ $(document).ready(function(){
       li.find('div.element_embed'),
       li.data('type'),
       li.data('refid'),
-      li.data('elementid')
+      li.data('elementid'),
+      false
     )))
     {
       window.players_manager.add(player, li.attr('id'));
@@ -431,7 +432,7 @@ $(document).ready(function(){
      li.find('a.element_embed_open_link_text').show();
      $(this).hide();
      
-     window.players_manager.get(li.attr('id')).stop();
+     window.players_manager.get(li.attr('id')).close();
      
      return false;
   });
@@ -710,7 +711,7 @@ $(document).ready(function(){
 
       ajax_query_timestamp = null;
       
-      $("#tags_prompt_list_"+response.form_name).tagBox(options);
+      //$("#tags_prompt_list_"+response.form_name).tagBox(options);
       
       // On rend ce formulaire ajaxFormable
       $('form[name="'+response.form_name+'"] input[type="submit"]').live('click', function(){

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

@@ -1,9 +1,11 @@
 function DynamicPlayer()
 {
   
-  this.play = function(object_for_player, player_type, ref_id, element_id)
+  this.play = function(object_for_player, player_type, ref_id, element_id, autoplay, finish_callback)
   {
-    if ((player = getPlayerObjectForElementType(object_for_player, player_type, ref_id, element_id)))
+    autoplay = typeof autoplay !== 'undefined' ? autoplay : false;
+    finish_callback = typeof finish_callback !== 'undefined' ? finish_callback : $.noop;
+    if ((player = getPlayerObjectForElementType(object_for_player, player_type, ref_id, element_id, autoplay, finish_callback)))
     {
       player.play();
       return player;
@@ -12,22 +14,27 @@ function DynamicPlayer()
     return false;
   }
   
-  var getPlayerObjectForElementType = function(object_for_player, player_type, ref_id, element_id)
+  var getPlayerObjectForElementType = function(object_for_player, player_type, ref_id, element_id, autoplay, finish_callback)
   {
     if (player_type == 'youtube.com' || player_type == 'youtu.be')
     {
-      return new YoutubePlayer(ref_id, object_for_player);
+      return new YoutubePlayer(ref_id, object_for_player, finish_callback);
     }
     if (player_type == 'soundcloud.com')
     {
-      return new SoundCloudPlayer(ref_id, object_for_player);
+      return new SoundCloudPlayer(ref_id, object_for_player, finish_callback, autoplay);
     }
     if (player_type == 'jamendo.com')
     {
-      return new JamendoPlayer(element_id, object_for_player);
+      return new JamendoPlayer(element_id, object_for_player, finish_callback);
     }
     
-    return new GenericPlayer(element_id, object_for_player);
+    if (autoplay)
+    {
+      return new GenericPlayer(element_id, object_for_player);
+    }
+    
+    return false;
   }
   
 }
@@ -45,6 +52,16 @@ function PlayersManager()
   {
     return _players[key];
   }
+  
+  this.remove = function(key)
+  {
+    delete _players[key];
+  }
+  
+  this.getAll = function()
+  {
+    return _players;
+  }
 }
 
 $(document).ready(function() {

src/Muzich/CoreBundle/Resources/public/js/player/GenericPlayer.js

@@ -17,4 +17,9 @@ function GenericPlayer(ref_id, object_for_player)
   {
     _object_for_player.html('');
   }
+  
+  this.close = function()
+  {
+    this.stop();
+  }
 }

src/Muzich/CoreBundle/Resources/public/js/player/GenericStreamingPlayer.js

@@ -9,6 +9,7 @@ function GenericStreamingPlayer(ref_id, object_for_player,
   var _object_for_player = object_for_player;
   var _playlist = new Array();
   var _player = null;
+  var _player_dom = null;
   
   var _callback_event_play = callback_event_play;
   var _callback_event_end = callback_event_end;
@@ -32,37 +33,46 @@ function GenericStreamingPlayer(ref_id, object_for_player,
     JQueryJson(url_element_get_stream_data+'/'+ref_id, {}, function(response){
       if (response.status == 'success')
       {
-        
-        for(var i = 0; i < response.data.length; i++)
+        if (response.data)
         {
-          var song = new GenericSong(response.data[i].name, response.data[i].url);
-          _playlist[i] = song;
-        }
-        
-        _player = new jPlayerPlaylist
-        (
-          {
-            jPlayer: '#jplayer_player_element_'+ref_id,
-            cssSelectorAncestor: '#jplayer_content_element_'+ref_id
-          },
-          _playlist,
+          for(var i = 0; i < response.data.length; i++)
           {
-            playlistOptions:
+            var song = new GenericSong(response.data[i].name, response.data[i].url);
+            _playlist[i] = song;
+          }
+          
+          _player = new jPlayerPlaylist
+          (
             {
-              autoPlay: true,
-              enableRemoveControls: true
+              jPlayer: '#jplayer_player_element_'+ref_id,
+              cssSelectorAncestor: '#jplayer_content_element_'+ref_id
             },
-            swfPath: "/jplayer/js",
-            supplied: "mp3",
-            wmode: "window"
-          }
-        );
-        
-        var player = $('#jplayer_player_element_'+ref_id);
-        player.bind($.jPlayer.event.play, event_play);
-        player.bind($.jPlayer.event.ended, event_end);
-        player.bind($.jPlayer.event.error, event_error);
-        
+            _playlist,
+            {
+              playlistOptions:
+              {
+                autoPlay: true,
+                enableRemoveControls: true
+              },
+              swfPath: "/jplayer/js",
+              supplied: "mp3",
+              wmode: "window"
+            }
+          );
+          
+          var _player_dom = $('#jplayer_player_element_'+ref_id);
+          _player_dom.bind($.jPlayer.event.play, event_play);
+          _player_dom.bind($.jPlayer.event.ended, event_end);
+          _player_dom.bind($.jPlayer.event.error, event_error);
+        }
+        else
+        {
+          _callback_event_finish_playlist();
+        }
+      }
+      else
+      {
+        _callback_event_finish_playlist();
       }
     });
   }
@@ -95,17 +105,22 @@ function GenericStreamingPlayer(ref_id, object_for_player,
   
   this.play = function()
   {
-    _player.jPlayer("play");
+    _player_dom.jPlayer("play");
   }
   
   this.stop = function()
   {
-    _player.jPlayer("stop");
+    //_player_dom.jPlayer("stop");
   }
   
   this.pause = function()
   {
-    _player.jPlayer("pause");
+    _player_dom.jPlayer("pause");
+  }
+  
+  this.destroy = function()
+  {
+    _object_for_player.html('');
   }
 }
 

src/Muzich/CoreBundle/Resources/public/js/player/JamendoPlayer.js

@@ -1,8 +1,9 @@
-function JamendoPlayer(ref_id, object_for_player)
+function JamendoPlayer(ref_id, object_for_player, finish_callback)
 {
   var _ref_id = ref_id;
   var _object_for_player = object_for_player;
   var _player = null;
+  var _finish_callback = finish_callback;
   
   this.play = function()
   {
@@ -26,12 +27,12 @@ function JamendoPlayer(ref_id, object_for_player)
   
   var event_error = function()
   {
-    
+    _finish_callback();
   }
   
   var event_finish_playlist = function()
   {
-    
+    _finish_callback();
   }
   
   this.stop = function()
@@ -44,4 +45,19 @@ function JamendoPlayer(ref_id, object_for_player)
     _player.pause();
   }
   
+  this.destroy = function()
+  {
+     _player.destroy();
+  }
+  
+  this.stopAndDestroy = function()
+  {
+    this.stop();
+    this.destroy();
+  }
+  
+  this.close = function()
+  {
+    this.stopAndDestroy();
+  }
 }

src/Muzich/CoreBundle/Resources/public/js/player/SoundCloudPlayer.js

@@ -1,71 +1,116 @@
-function SoundCloudPlayer(ref_id, object_for_player)
+function SoundCloudPlayer(ref_id, object_for_player, finish_callback, autoplay)
 {
+  autoplay = typeof autoplay !== 'undefined' ? autoplay : false;
+  var _autoplay = autoplay;
+  var _iframe_id = '';
   var _ref_id = ref_id;
   var _object_for_player = object_for_player;
   var _player = null;
   var _sounds_count = 0;
   var _current_sound_index = 0;
+  var _finish_callback = finish_callback;
   
   this.play = function()
   {
-    if (!_player)
-    {
-      createPlayer();
-    }
+    createPlayer(
+      event_ready,
+      event_play,
+      event_finish
+    );
   }
   
-  var createPlayer = function()
+  var createPlayer = function(callback_ready, callback_play, callback_finish)
   {
-    var div_for_iframe = $('<div>').attr('id', _object_for_player.attr('id')+'_iframe');
-    _object_for_player.append(div_for_iframe);
+    _iframe_id = 'soundcloud_player_'+new Date().getTime();
+    if (!_autoplay)
+    {
+      _object_for_player.html('<iframe id="'+_iframe_id+'" src="http://w.soundcloud.com/player/?url='
+            +_ref_id+'&show_artwork=false&auto_play=true" width="100%" '
+            +'height="350" scrolling="no" frameborder="no"></iframe>');
+    }
+    else
+    {
+      // On gère la lecture auto difframment: rappel: si on supprime une iframe l'api SC ne la trouve plus et bug
+      $('#autoplay').append('<iframe id="'+_iframe_id+'" src="http://w.soundcloud.com/player/?url='
+        +_ref_id+'&show_artwork=false&auto_play=true" width="100%" '
+        +'height="350" scrolling="no" frameborder="no"></iframe>');
+    }
     
     SC.initialize({
       client_id: '39946ea18e3d78d64c0ac95a025794e1'
     });
-    
-    SC.oEmbed(_ref_id, {
-      show_artwork: false
-    }, function(oembed){
-      _object_for_player.html(oembed.html)
-      var iframe = _object_for_player.find('iframe')[0];
-      _player = SC.Widget(iframe);
-      _player.bind(SC.Widget.Events.READY, event_ready);
-      _player.bind(SC.Widget.Events.PLAY, event_play);
-      _player.bind(SC.Widget.Events.FINISH, event_finish);
-    });
-    
-    var event_ready = function()
+    SC.get(_ref_id, function(track, error)
     {
-      console.log('sc ready');
-      _player.play();
-      _player.getSounds(function(value){
-        _sounds_count = value.length;
-      });
-    }
+      if (!error)
+      {
+        _player = SC.Widget(document.getElementById(_iframe_id));
+        _player.bind(SC.Widget.Events.READY, callback_ready);
+        _player.bind(SC.Widget.Events.PLAY, callback_play);
+        _player.bind(SC.Widget.Events.FINISH, callback_finish);
+      }
+      else
+      {
+        _finish_callback();
+      }
+    });
     
-    var event_play = function()
+  }
+  
+  var event_ready = function()
+  {
+    _player.getSounds(function(value){
+      _sounds_count = value.length;
+    });
+  }
+  
+  var event_play = function()
+  {
+    _player.getSounds(function(value){
+      _sounds_count = value.length;
+    });
+    _player.getCurrentSoundIndex(function(value){
+      _current_sound_index = value;
+    });
+  }
+  
+  var event_finish = function()
+  {
+    if (_sounds_count == _current_sound_index+1)
     {
-      console.log('sc play');
-      _player.getSounds(function(value){
-        _sounds_count = value.length;
-      });
-      _player.getCurrentSoundIndex(function(value){
-        _current_sound_index = value;
-      });
+      event_finish_playlist();
     }
+  }
+  
+  var event_finish_playlist = function()
+  {
+    _finish_callback();
+  }
+  
+  this.stop = function()
+  {
     
-    var event_finish = function()
+  }
+  
+  this.destroy = function(force)
+  {
+    if (_player)
     {
-      if (_sounds_count == _current_sound_index+1)
-      {
-        event_finish_playlist();
-      }
+      _player.pause();
     }
-    
-    var event_finish_playlist = function()
+    if (_autoplay || force)
     {
-      // Fin de lecture
+      $('#'+_iframe_id).hide();
     }
-    
+  }
+  
+  this.stopAndDestroy = function()
+  {
+    //this.stop();
+    this.destroy(false);
+  }
+  
+  this.close = function()
+  {
+    this.destroy(true);
   }
 }

src/Muzich/CoreBundle/Resources/public/js/player/YoutubePlayer.js

@@ -1,8 +1,9 @@
-function YoutubePlayer(ref_id, object_for_player)
+function YoutubePlayer(ref_id, object_for_player, finish_callback)
 {
   var _ref_id = ref_id;
   var _object_for_player = object_for_player;
   var _yt_player;
+  var _finish_callback = finish_callback;
   
   this.play = function()
   { 
@@ -16,15 +17,14 @@ function YoutubePlayer(ref_id, object_for_player)
     
     _yt_player = new YT.Player(_object_for_player.attr('id')+'_iframe', {
       height  : config_player_youtube_height,
-      width   : config_player_youtube_width,
+      width   : '100%',
       videoId : _ref_id,
       events  : {
         'onReady': onPlayerReady,
-        'onStateChange': onPlayerStateChange
+        'onStateChange': onPlayerStateChange,
+        'onError': onError
       }
     });
-    
-    
   }
   
   var onPlayerReady = function(event)
@@ -32,6 +32,11 @@ function YoutubePlayer(ref_id, object_for_player)
     _yt_player.playVideo();
   }
   
+  var onError = function(event)
+  {
+    _finish_callback();
+  }
+  
   var onPlayerStateChange = function(event)
   {
     if (event.data == YT.PlayerState.PLAYING)
@@ -40,7 +45,7 @@ function YoutubePlayer(ref_id, object_for_player)
     }
     if (event.data == YT.PlayerState.ENDED)
     {
-      
+      _finish_callback();
     }
     if (event.data == YT.PlayerState.PAUSED)
     {
@@ -58,12 +63,39 @@ function YoutubePlayer(ref_id, object_for_player)
   
   this.pause = function()
   {
-    _yt_player.pauseVideo();
+    if (_yt_player)
+    {
+      if(typeof(_yt_player.pauseVideo)!=='undefined')
+      {
+        _yt_player.pauseVideo();
+      }
+    }
   }
   
   this.stop = function()
   {
-    _yt_player.stopVideo();
+    if (_yt_player)
+    {
+      if(typeof(_yt_player.stopVideo)!=='undefined')
+      {
+        _yt_player.stopVideo();
+      }
+    }
+  }
+  
+  this.destroy = function()
+  {
     _object_for_player.html('');
   }
+  
+  this.stopAndDestroy = function()
+  {
+    this.stop();
+    this.destroy();
+  }
+  
+  this.close = function()
+  {
+    this.stopAndDestroy();
+  }
 }

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

@@ -9,9 +9,9 @@
   'js/jquery.form-2.14.js'
   'js/jConfirmAction/jconfirmaction.jquery.js'
   '@MuzichCoreBundle/Resources/public/js/TagPrompt.js'
-  '@MuzichCoreBundle/Resources/public/js/play.js'
-  '@MuzichCoreBundle/Resources/public/js/play2.js'
   '@MuzichCoreBundle/Resources/public/js/player/*'
+  '@MuzichCoreBundle/Resources/public/js/play2.js'
+  '@MuzichCoreBundle/Resources/public/js/autoplay.js'
   '@MuzichCoreBundle/Resources/public/js/muzich.js' %}{# filter='yui_js' %}#}
   <script src="{{ asset_url }}"></script>
 {% endjavascripts %}

src/Muzich/CoreBundle/lib/AutoplayManager.php

@@ -40,7 +40,7 @@ class AutoplayManager
     {
       if (
         // On doit connaitre l'id externe
-        ($ref_id = $element->getData(Element::DATA_REF_ID)) && 
+        ($ref_id = $element->getRefId(true)) && 
         // Et le site doit être pris en charge pour le autoplay
         in_array(
           ($element_type = $element->getType()), 
@@ -54,7 +54,6 @@ class AutoplayManager
         'element_id'       => $element->getId(),
         'element_name'     => $element->getName(),
         'element_url'      => $element->getUrl(),
-        'element_normalized_url' => $element->getData(Element::DATA_NORMALIZED_URL)
       );
     }
     

web/css/main.css

@@ -1635,4 +1635,9 @@ div.display_more_elements
 {
   padding: 10px;
   text-align: center;
+}
+
+div.element_embed div.jp-playlist ul
+{
+  text-align: left;
 }