full screen on youtube when asked

app/Resources/translations/userui.en.yml

@@ -274,6 +274,7 @@ registration:
 
 autoplay:
   limitations_players:   Autoplay actually work with youtube, soundcloud and jamendo.
+  full_screen_toggle:    Set full screen when possible
 
 events:
   view:

app/Resources/translations/userui.fr.yml

@@ -286,6 +286,7 @@ registration:
 
 autoplay:
   limitations_players:   La lecture automatique ne supporte actuellement que les lecteurs youtube, soundcloud et jamendo.
+  full_screen_toggle:    Activer le plein écran quand c'est possible
 
 events:
   view:

src/Muzich/CoreBundle/Resources/public/css/main.css

@@ -2721,3 +2721,29 @@ ul.elements li.inline_actions a.button {
     margin-top: -15px;
     position: absolute;
 }
+
+#full_screen_toggle {
+  font-size: 70%;
+  text-align: right;
+}
+
+.full_screen {
+  position: fixed;
+  width: 90%;
+  height: 95%;
+  left: 0;
+  top: 0;
+  z-index: 99;
+  margin-left: 5%;
+  margin-top: 1%;
+}
+
+#close_full_screen {
+  position: fixed;
+  right: 0;
+  top: 0;
+  z-index: 1000000000;
+  font-weight: bolder;
+  font-size: 70px;
+  margin-right: 12px;
+}

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

@@ -5,6 +5,7 @@ function Autoplay()
   var _player = null;
   var _current_index = 0;
   var _link = null;
+  var _full_screen = false;
   
   this.start = function(link)
   {
@@ -93,17 +94,23 @@ function Autoplay()
   var createPlayer = function(play_data, finish_callback)
   {
     $('#autoplay_loader').show();
-    if ((player = window.dynamic_player.play(
+    if ((_player = window.dynamic_player.play(
       $('#autoplay_player'),
       play_data.element_type,
       play_data.element_ref_id,
       play_data.element_id,
       true,
-      finish_callback
+      finish_callback,
+      function(player) {
+        if (!_player || !_full_screen) {
+          return;
+        }
+        player.enableFullScreen();
+      }
     )))
     {
       $('#autoplay_loader').hide();
-      window.players_manager.add(player, 'autoplay_'+play_data.element_id);
+      window.players_manager.add(_player, 'autoplay_'+play_data.element_id);
       return true;
     }
     else
@@ -135,6 +142,13 @@ function Autoplay()
     $('#autoplay iframe').hide();
     $('#autoplay img[alt="loader"]').hide();
   }
+
+  this.setFullScreen = function(status) {
+    _full_screen = status;
+    if (status) {
+      _player.enableFullScreen();
+    }
+  }
   
 }
 
@@ -165,5 +179,9 @@ $(document).ready(function() {
     $('#autoplay').hide();
     window.autoplay.stopAndClearAllPlayers();
   });
-  
+
+  $('#full_screen_toggle input[name="full_screen_toggle"]').on('change', function(){
+    window.autoplay.setFullScreen($(this).is(':checked'));
+  });
+
 });

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

@@ -3600,4 +3600,14 @@ function reload_top_and_side()
 function scrollTo(element)
 {
   $('html, body').animate({ scrollTop: element.offset().top }, 'fast');
+}
+
+function set_full_screen_on(element) {
+    $(element).addClass('full_screen');
+    $('#close_full_screen').remove();
+    $('body').append($('<a id="close_full_screen" href="#">X</a>'));
+    $('#close_full_screen').on('click', function(){
+        $(element).removeClass('full_screen');
+        this.remove();
+    });
 }

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

@@ -1,13 +1,15 @@
 function DynamicPlayer()
 {
   
-  this.play = function(object_for_player, player_type, ref_id, element_id, autoplay, finish_callback)
+  this.play = function(object_for_player, player_type, ref_id, element_id, autoplay, finish_callback, play_callback)
   {
     autoplay = typeof autoplay !== 'undefined' ? autoplay : false;
     finish_callback = typeof finish_callback !== 'undefined' ? finish_callback : $.noop;
+    play_callback = typeof play_callback !== 'undefined' ? play_callback : $.noop;
+
     if ((player = getPlayerObjectForElementType(object_for_player, player_type, ref_id, element_id, autoplay, finish_callback)))
     {
-      player.play();
+      player.play(play_callback);
       return player;
     }
     

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

@@ -18,11 +18,16 @@ function GenericStreamingPlayer(ref_id, object_for_player,
   
   var _current_index = 0;
   
-  this.create_player = function()
+  this.create_player = function(play_callback)
   {
     var jplayer_player  = $('#jquery_jplayer_1').clone();
     var jplayer_content = $('#jp_container_1').clone();
-    
+
+    var event_play_callback = function(event) {
+      event_play(event);
+      play_callback();
+    };
+
     jplayer_player.attr ('id', 'jplayer_player_element_'+ref_id);
     jplayer_content.attr('id', 'jplayer_content_element_'+ref_id);
     
@@ -61,7 +66,7 @@ function GenericStreamingPlayer(ref_id, object_for_player,
           );
           
           var _player_dom = $('#jplayer_player_element_'+ref_id);
-          _player_dom.bind($.jPlayer.event.play, event_play);
+          _player_dom.bind($.jPlayer.event.play, event_play_callback);
           _player_dom.bind($.jPlayer.event.ended, event_end);
           _player_dom.bind($.jPlayer.event.error, event_error);
         }
@@ -103,9 +108,10 @@ function GenericStreamingPlayer(ref_id, object_for_player,
     _callback_event_finish_playlist(event);
   }
   
-  this.play = function()
+  this.play = function(play_callback)
   {
     _player_dom.jPlayer("play");
+    play_callback();
   }
   
   this.stop = function()
@@ -122,6 +128,15 @@ function GenericStreamingPlayer(ref_id, object_for_player,
   {
     _object_for_player.html('');
   }
+
+  this.enableFullScreen = function() {
+
+  }
+
+  this.disableFullScreen = function() {
+
+  }
+
 }
 
 function GenericSong(title, mp3)

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

@@ -5,14 +5,14 @@ function JamendoPlayer(ref_id, object_for_player, finish_callback)
   var _player = null;
   var _finish_callback = finish_callback;
   
-  this.play = function()
+  this.play = function(play_callback)
   {
     _player = new GenericStreamingPlayer(_ref_id, _object_for_player,
       event_play,
       event_end,
       event_error,
       event_finish_playlist);
-    _player.create_player();
+    _player.create_player(play_callback);
   }
   
   var event_play = function()
@@ -60,4 +60,12 @@ function JamendoPlayer(ref_id, object_for_player, finish_callback)
   {
     this.stopAndDestroy();
   }
+
+  this.enableFullScreen = function() {
+
+  }
+
+  this.disableFullScreen = function() {
+
+  }
 }

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

@@ -10,11 +10,17 @@ function SoundCloudPlayer(ref_id, object_for_player, finish_callback, autoplay)
   var _current_sound_index = 0;
   var _finish_callback = finish_callback;
   
-  this.play = function()
+  this.play = function(play_callback)
   {
+
+    var event_play_callback = function() {
+      event_play();
+      play_callback();
+    }
+
     createPlayer(
       event_ready,
-      event_play,
+      event_play_callback,
       event_finish
     );
   }
@@ -112,4 +118,12 @@ function SoundCloudPlayer(ref_id, object_for_player, finish_callback, autoplay)
   {
     this.destroy(true);
   }
+
+  this.enableFullScreen = function() {
+
+  }
+
+  this.disableFullScreen = function() {
+
+  }
 }

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

@@ -4,27 +4,35 @@ function YoutubePlayer(ref_id, object_for_player, finish_callback)
   var _object_for_player = object_for_player;
   var _yt_player;
   var _finish_callback = finish_callback;
+  var that = this;
   
-  this.play = function()
+  this.play = function(play_callback)
   { 
-    create_player();
+    create_player(play_callback);
   }
   
-  var create_player = function()
+  var create_player = function(play_callback)
   {
     var div_for_iframe = $('<div>').attr('id', _object_for_player.attr('id')+'_iframe_'+ref_id);
     _object_for_player.append(div_for_iframe);
-    
+
+    var onPlayerReady_callback = function(){
+      onPlayerReady();
+      play_callback(that);
+    };
+
     _yt_player = new YT.Player(_object_for_player.attr('id')+'_iframe_'+ref_id, {
       height  : config_player_youtube_height,
       width   : '100%',
       videoId : _ref_id,
       events  : {
-        'onReady': onPlayerReady,
+        'onReady': onPlayerReady_callback,
         'onStateChange': onPlayerStateChange,
         'onError': onError
       }
     });
+
+
   }
   
   var onPlayerReady = function(event)
@@ -92,10 +100,22 @@ function YoutubePlayer(ref_id, object_for_player, finish_callback)
   {
     this.stop();
     this.destroy();
+    this.disableFullScreen();
   }
   
   this.close = function()
   {
     this.stopAndDestroy();
   }
+
+  this.enableFullScreen = function() {
+    var iframe = $('#'+_object_for_player.attr('id')+'_iframe_'+_ref_id);
+    set_full_screen_on(iframe);
+  }
+
+  this.disableFullScreen = function() {
+    $('#close_full_screen').remove();
+  }
+
+
 }

src/Muzich/CoreBundle/Resources/views/Autoplay/autoplay.html.twig

@@ -66,7 +66,12 @@
   </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>
-      
+
+  <p id="full_screen_toggle">
+    {{ 'autoplay.full_screen_toggle'|trans({}, 'userui') }}
+    <input type="checkbox" name="full_screen_toggle" />
+  </p>
+
   <p><span class="sinfo">{{ 'autoplay.limitations_players'|trans({}, 'userui') }}</span></p>
 
 </div>