Просмотр исходного кода

full screen on youtube when asked

Bastien Sevajol 8 лет назад
Родитель
Сommit
6ebb22b0d5

+ 1 - 0
app/Resources/translations/userui.en.yml Просмотреть файл

274
 
274
 
275
 autoplay:
275
 autoplay:
276
   limitations_players:   Autoplay actually work with youtube, soundcloud and jamendo.
276
   limitations_players:   Autoplay actually work with youtube, soundcloud and jamendo.
277
+  full_screen_toggle:    Set full screen when possible
277
 
278
 
278
 events:
279
 events:
279
   view:
280
   view:

+ 1 - 0
app/Resources/translations/userui.fr.yml Просмотреть файл

286
 
286
 
287
 autoplay:
287
 autoplay:
288
   limitations_players:   La lecture automatique ne supporte actuellement que les lecteurs youtube, soundcloud et jamendo.
288
   limitations_players:   La lecture automatique ne supporte actuellement que les lecteurs youtube, soundcloud et jamendo.
289
+  full_screen_toggle:    Activer le plein écran quand c'est possible
289
 
290
 
290
 events:
291
 events:
291
   view:
292
   view:

+ 26 - 0
src/Muzich/CoreBundle/Resources/public/css/main.css Просмотреть файл

2721
     margin-top: -15px;
2721
     margin-top: -15px;
2722
     position: absolute;
2722
     position: absolute;
2723
 }
2723
 }
2724
+
2725
+#full_screen_toggle {
2726
+  font-size: 70%;
2727
+  text-align: right;
2728
+}
2729
+
2730
+.full_screen {
2731
+  position: fixed;
2732
+  width: 90%;
2733
+  height: 95%;
2734
+  left: 0;
2735
+  top: 0;
2736
+  z-index: 99;
2737
+  margin-left: 5%;
2738
+  margin-top: 1%;
2739
+}
2740
+
2741
+#close_full_screen {
2742
+  position: fixed;
2743
+  right: 0;
2744
+  top: 0;
2745
+  z-index: 1000000000;
2746
+  font-weight: bolder;
2747
+  font-size: 70px;
2748
+  margin-right: 12px;
2749
+}

+ 22 - 4
src/Muzich/CoreBundle/Resources/public/js/autoplay.js Просмотреть файл

5
   var _player = null;
5
   var _player = null;
6
   var _current_index = 0;
6
   var _current_index = 0;
7
   var _link = null;
7
   var _link = null;
8
+  var _full_screen = false;
8
   
9
   
9
   this.start = function(link)
10
   this.start = function(link)
10
   {
11
   {
93
   var createPlayer = function(play_data, finish_callback)
94
   var createPlayer = function(play_data, finish_callback)
94
   {
95
   {
95
     $('#autoplay_loader').show();
96
     $('#autoplay_loader').show();
96
-    if ((player = window.dynamic_player.play(
97
+    if ((_player = window.dynamic_player.play(
97
       $('#autoplay_player'),
98
       $('#autoplay_player'),
98
       play_data.element_type,
99
       play_data.element_type,
99
       play_data.element_ref_id,
100
       play_data.element_ref_id,
100
       play_data.element_id,
101
       play_data.element_id,
101
       true,
102
       true,
102
-      finish_callback
103
+      finish_callback,
104
+      function(player) {
105
+        if (!_player || !_full_screen) {
106
+          return;
107
+        }
108
+        player.enableFullScreen();
109
+      }
103
     )))
110
     )))
104
     {
111
     {
105
       $('#autoplay_loader').hide();
112
       $('#autoplay_loader').hide();
106
-      window.players_manager.add(player, 'autoplay_'+play_data.element_id);
113
+      window.players_manager.add(_player, 'autoplay_'+play_data.element_id);
107
       return true;
114
       return true;
108
     }
115
     }
109
     else
116
     else
135
     $('#autoplay iframe').hide();
142
     $('#autoplay iframe').hide();
136
     $('#autoplay img[alt="loader"]').hide();
143
     $('#autoplay img[alt="loader"]').hide();
137
   }
144
   }
145
+
146
+  this.setFullScreen = function(status) {
147
+    _full_screen = status;
148
+    if (status) {
149
+      _player.enableFullScreen();
150
+    }
151
+  }
138
   
152
   
139
 }
153
 }
140
 
154
 
165
     $('#autoplay').hide();
179
     $('#autoplay').hide();
166
     window.autoplay.stopAndClearAllPlayers();
180
     window.autoplay.stopAndClearAllPlayers();
167
   });
181
   });
168
-  
182
+
183
+  $('#full_screen_toggle input[name="full_screen_toggle"]').on('change', function(){
184
+    window.autoplay.setFullScreen($(this).is(':checked'));
185
+  });
186
+
169
 });
187
 });

+ 10 - 0
src/Muzich/CoreBundle/Resources/public/js/muzich.js Просмотреть файл

3600
 function scrollTo(element)
3600
 function scrollTo(element)
3601
 {
3601
 {
3602
   $('html, body').animate({ scrollTop: element.offset().top }, 'fast');
3602
   $('html, body').animate({ scrollTop: element.offset().top }, 'fast');
3603
+}
3604
+
3605
+function set_full_screen_on(element) {
3606
+    $(element).addClass('full_screen');
3607
+    $('#close_full_screen').remove();
3608
+    $('body').append($('<a id="close_full_screen" href="#">X</a>'));
3609
+    $('#close_full_screen').on('click', function(){
3610
+        $(element).removeClass('full_screen');
3611
+        this.remove();
3612
+    });
3603
 }
3613
 }

+ 4 - 2
src/Muzich/CoreBundle/Resources/public/js/play2.js Просмотреть файл

1
 function DynamicPlayer()
1
 function DynamicPlayer()
2
 {
2
 {
3
   
3
   
4
-  this.play = function(object_for_player, player_type, ref_id, element_id, autoplay, finish_callback)
4
+  this.play = function(object_for_player, player_type, ref_id, element_id, autoplay, finish_callback, play_callback)
5
   {
5
   {
6
     autoplay = typeof autoplay !== 'undefined' ? autoplay : false;
6
     autoplay = typeof autoplay !== 'undefined' ? autoplay : false;
7
     finish_callback = typeof finish_callback !== 'undefined' ? finish_callback : $.noop;
7
     finish_callback = typeof finish_callback !== 'undefined' ? finish_callback : $.noop;
8
+    play_callback = typeof play_callback !== 'undefined' ? play_callback : $.noop;
9
+
8
     if ((player = getPlayerObjectForElementType(object_for_player, player_type, ref_id, element_id, autoplay, finish_callback)))
10
     if ((player = getPlayerObjectForElementType(object_for_player, player_type, ref_id, element_id, autoplay, finish_callback)))
9
     {
11
     {
10
-      player.play();
12
+      player.play(play_callback);
11
       return player;
13
       return player;
12
     }
14
     }
13
     
15
     

+ 19 - 4
src/Muzich/CoreBundle/Resources/public/js/player/GenericStreamingPlayer.js Просмотреть файл

18
   
18
   
19
   var _current_index = 0;
19
   var _current_index = 0;
20
   
20
   
21
-  this.create_player = function()
21
+  this.create_player = function(play_callback)
22
   {
22
   {
23
     var jplayer_player  = $('#jquery_jplayer_1').clone();
23
     var jplayer_player  = $('#jquery_jplayer_1').clone();
24
     var jplayer_content = $('#jp_container_1').clone();
24
     var jplayer_content = $('#jp_container_1').clone();
25
-    
25
+
26
+    var event_play_callback = function(event) {
27
+      event_play(event);
28
+      play_callback();
29
+    };
30
+
26
     jplayer_player.attr ('id', 'jplayer_player_element_'+ref_id);
31
     jplayer_player.attr ('id', 'jplayer_player_element_'+ref_id);
27
     jplayer_content.attr('id', 'jplayer_content_element_'+ref_id);
32
     jplayer_content.attr('id', 'jplayer_content_element_'+ref_id);
28
     
33
     
61
           );
66
           );
62
           
67
           
63
           var _player_dom = $('#jplayer_player_element_'+ref_id);
68
           var _player_dom = $('#jplayer_player_element_'+ref_id);
64
-          _player_dom.bind($.jPlayer.event.play, event_play);
69
+          _player_dom.bind($.jPlayer.event.play, event_play_callback);
65
           _player_dom.bind($.jPlayer.event.ended, event_end);
70
           _player_dom.bind($.jPlayer.event.ended, event_end);
66
           _player_dom.bind($.jPlayer.event.error, event_error);
71
           _player_dom.bind($.jPlayer.event.error, event_error);
67
         }
72
         }
103
     _callback_event_finish_playlist(event);
108
     _callback_event_finish_playlist(event);
104
   }
109
   }
105
   
110
   
106
-  this.play = function()
111
+  this.play = function(play_callback)
107
   {
112
   {
108
     _player_dom.jPlayer("play");
113
     _player_dom.jPlayer("play");
114
+    play_callback();
109
   }
115
   }
110
   
116
   
111
   this.stop = function()
117
   this.stop = function()
122
   {
128
   {
123
     _object_for_player.html('');
129
     _object_for_player.html('');
124
   }
130
   }
131
+
132
+  this.enableFullScreen = function() {
133
+
134
+  }
135
+
136
+  this.disableFullScreen = function() {
137
+
138
+  }
139
+
125
 }
140
 }
126
 
141
 
127
 function GenericSong(title, mp3)
142
 function GenericSong(title, mp3)

+ 10 - 2
src/Muzich/CoreBundle/Resources/public/js/player/JamendoPlayer.js Просмотреть файл

5
   var _player = null;
5
   var _player = null;
6
   var _finish_callback = finish_callback;
6
   var _finish_callback = finish_callback;
7
   
7
   
8
-  this.play = function()
8
+  this.play = function(play_callback)
9
   {
9
   {
10
     _player = new GenericStreamingPlayer(_ref_id, _object_for_player,
10
     _player = new GenericStreamingPlayer(_ref_id, _object_for_player,
11
       event_play,
11
       event_play,
12
       event_end,
12
       event_end,
13
       event_error,
13
       event_error,
14
       event_finish_playlist);
14
       event_finish_playlist);
15
-    _player.create_player();
15
+    _player.create_player(play_callback);
16
   }
16
   }
17
   
17
   
18
   var event_play = function()
18
   var event_play = function()
60
   {
60
   {
61
     this.stopAndDestroy();
61
     this.stopAndDestroy();
62
   }
62
   }
63
+
64
+  this.enableFullScreen = function() {
65
+
66
+  }
67
+
68
+  this.disableFullScreen = function() {
69
+
70
+  }
63
 }
71
 }

+ 16 - 2
src/Muzich/CoreBundle/Resources/public/js/player/SoundCloudPlayer.js Просмотреть файл

10
   var _current_sound_index = 0;
10
   var _current_sound_index = 0;
11
   var _finish_callback = finish_callback;
11
   var _finish_callback = finish_callback;
12
   
12
   
13
-  this.play = function()
13
+  this.play = function(play_callback)
14
   {
14
   {
15
+
16
+    var event_play_callback = function() {
17
+      event_play();
18
+      play_callback();
19
+    }
20
+
15
     createPlayer(
21
     createPlayer(
16
       event_ready,
22
       event_ready,
17
-      event_play,
23
+      event_play_callback,
18
       event_finish
24
       event_finish
19
     );
25
     );
20
   }
26
   }
112
   {
118
   {
113
     this.destroy(true);
119
     this.destroy(true);
114
   }
120
   }
121
+
122
+  this.enableFullScreen = function() {
123
+
124
+  }
125
+
126
+  this.disableFullScreen = function() {
127
+
128
+  }
115
 }
129
 }

+ 25 - 5
src/Muzich/CoreBundle/Resources/public/js/player/YoutubePlayer.js Просмотреть файл

4
   var _object_for_player = object_for_player;
4
   var _object_for_player = object_for_player;
5
   var _yt_player;
5
   var _yt_player;
6
   var _finish_callback = finish_callback;
6
   var _finish_callback = finish_callback;
7
+  var that = this;
7
   
8
   
8
-  this.play = function()
9
+  this.play = function(play_callback)
9
   { 
10
   { 
10
-    create_player();
11
+    create_player(play_callback);
11
   }
12
   }
12
   
13
   
13
-  var create_player = function()
14
+  var create_player = function(play_callback)
14
   {
15
   {
15
     var div_for_iframe = $('<div>').attr('id', _object_for_player.attr('id')+'_iframe_'+ref_id);
16
     var div_for_iframe = $('<div>').attr('id', _object_for_player.attr('id')+'_iframe_'+ref_id);
16
     _object_for_player.append(div_for_iframe);
17
     _object_for_player.append(div_for_iframe);
17
-    
18
+
19
+    var onPlayerReady_callback = function(){
20
+      onPlayerReady();
21
+      play_callback(that);
22
+    };
23
+
18
     _yt_player = new YT.Player(_object_for_player.attr('id')+'_iframe_'+ref_id, {
24
     _yt_player = new YT.Player(_object_for_player.attr('id')+'_iframe_'+ref_id, {
19
       height  : config_player_youtube_height,
25
       height  : config_player_youtube_height,
20
       width   : '100%',
26
       width   : '100%',
21
       videoId : _ref_id,
27
       videoId : _ref_id,
22
       events  : {
28
       events  : {
23
-        'onReady': onPlayerReady,
29
+        'onReady': onPlayerReady_callback,
24
         'onStateChange': onPlayerStateChange,
30
         'onStateChange': onPlayerStateChange,
25
         'onError': onError
31
         'onError': onError
26
       }
32
       }
27
     });
33
     });
34
+
35
+
28
   }
36
   }
29
   
37
   
30
   var onPlayerReady = function(event)
38
   var onPlayerReady = function(event)
92
   {
100
   {
93
     this.stop();
101
     this.stop();
94
     this.destroy();
102
     this.destroy();
103
+    this.disableFullScreen();
95
   }
104
   }
96
   
105
   
97
   this.close = function()
106
   this.close = function()
98
   {
107
   {
99
     this.stopAndDestroy();
108
     this.stopAndDestroy();
100
   }
109
   }
110
+
111
+  this.enableFullScreen = function() {
112
+    var iframe = $('#'+_object_for_player.attr('id')+'_iframe_'+_ref_id);
113
+    set_full_screen_on(iframe);
114
+  }
115
+
116
+  this.disableFullScreen = function() {
117
+    $('#close_full_screen').remove();
118
+  }
119
+
120
+
101
 }
121
 }

+ 6 - 1
src/Muzich/CoreBundle/Resources/views/Autoplay/autoplay.html.twig Просмотреть файл

66
   </div>
66
   </div>
67
   <img id="autoplay_loader" src="{{ asset('/bundles/muzichcore/img/ajax-loader.gif') }}" alt="loader" />
67
   <img id="autoplay_loader" src="{{ asset('/bundles/muzichcore/img/ajax-loader.gif') }}" alt="loader" />
68
   <p id="autoplay_noelements_text" style="display: none;">{{ 'elements.autoplay.noelements.text'|trans({}, 'elements') }}</p>
68
   <p id="autoplay_noelements_text" style="display: none;">{{ 'elements.autoplay.noelements.text'|trans({}, 'elements') }}</p>
69
-      
69
+
70
+  <p id="full_screen_toggle">
71
+    {{ 'autoplay.full_screen_toggle'|trans({}, 'userui') }}
72
+    <input type="checkbox" name="full_screen_toggle" />
73
+  </p>
74
+
70
   <p><span class="sinfo">{{ 'autoplay.limitations_players'|trans({}, 'userui') }}</span></p>
75
   <p><span class="sinfo">{{ 'autoplay.limitations_players'|trans({}, 'userui') }}</span></p>
71
 
76
 
72
 </div>
77
 </div>