胡斌 / srs

转到一个项目
Toggle navigation Toggle navigation pinning
winlin
70dc3dbb 1 parent 3ab867d9

layout the chat in 2x8 table

内嵌 并排对比
正在显示 3 个修改的文件 包含 161 行增加 和 83 行删除
@@ -286,19 +286,19 @@ function srs_chat_initialize_page( @@ -286,19 +286,19 @@ function srs_chat_initialize_page(
286 286
287 //var gops = ["0.3", "0.5", "1", "2", "3", "4", 287 //var gops = ["0.3", "0.5", "1", "2", "3", "4",
288 // "5", "6", "7", "8", "9", "10", "15", "20"]; 288 // "5", "6", "7", "8", "9", "10", "15", "20"];
289 - $(sl_gop + " option[value='0.5']").attr("selected", true); 289 + $(sl_gop + " option[value='1']").attr("selected", true);
290 290
291 //var sizes = ["176x144", "320x240", "352x240", 291 //var sizes = ["176x144", "320x240", "352x240",
292 // "352x288", "460x240", "640x480", "720x480", "720x576", "800x600", 292 // "352x288", "460x240", "640x480", "720x480", "720x576", "800x600",
293 // "1024x768", "1280x720", "1360x768", "1920x1080"]; 293 // "1024x768", "1280x720", "1360x768", "1920x1080"];
294 - $(sl_size + " option[value='320x240']").attr("selected", true); 294 + $(sl_size + " option[value='640x480']").attr("selected", true);
295 295
296 //var fpses = ["5", "10", "15", "20", "24", "25", "29.97", "30"]; 296 //var fpses = ["5", "10", "15", "20", "24", "25", "29.97", "30"];
297 - $(sl_fps + " option[value='10']").attr("selected", true); 297 + $(sl_fps + " option[value='15']").attr("selected", true);
298 298
299 //var bitrates = ["50", "200", "350", "500", "650", "800", 299 //var bitrates = ["50", "200", "350", "500", "650", "800",
300 // "950", "1000", "1200", "1500", "1800", "2000", "3000", "5000"]; 300 // "950", "1000", "1200", "1500", "1800", "2000", "3000", "5000"];
301 - $(sl_bitrate + " option[value='200']").attr("selected", true); 301 + $(sl_bitrate + " option[value='350']").attr("selected", true);
302 } 302 }
303 /** 303 /**
304 * get the vcodec and acodec. 304 * get the vcodec and acodec.
@@ -87,6 +87,9 @@ SrsPublisher.prototype.start = function() { @@ -87,6 +87,9 @@ SrsPublisher.prototype.start = function() {
87 * @param acodec an object contains the audio codec info. 87 * @param acodec an object contains the audio codec info.
88 */ 88 */
89 SrsPublisher.prototype.publish = function(url, vcodec, acodec) { 89 SrsPublisher.prototype.publish = function(url, vcodec, acodec) {
  90 + this.stop();
  91 + SrsPublisher.__publishers.push(this);
  92 +
90 if (url) { 93 if (url) {
91 this.url = url; 94 this.url = url;
92 } 95 }
@@ -100,6 +103,17 @@ SrsPublisher.prototype.publish = function(url, vcodec, acodec) { @@ -100,6 +103,17 @@ SrsPublisher.prototype.publish = function(url, vcodec, acodec) {
100 this.callbackObj.ref.__publish(this.url, this.width, this.height, this.vcodec, this.acodec); 103 this.callbackObj.ref.__publish(this.url, this.width, this.height, this.vcodec, this.acodec);
101 } 104 }
102 SrsPublisher.prototype.stop = function() { 105 SrsPublisher.prototype.stop = function() {
  106 + for (var i = 0; i < SrsPublisher.__publishers.length; i++) {
  107 + var player = SrsPublisher.__publishers[i];
  108 +
  109 + if (player.id != this.id) {
  110 + continue;
  111 + }
  112 +
  113 + SrsPublisher.__publishers.splice(i, 1);
  114 + break;
  115 + }
  116 +
103 this.callbackObj.ref.__stop(); 117 this.callbackObj.ref.__stop();
104 } 118 }
105 /** 119 /**
@@ -86,6 +86,16 @@ @@ -86,6 +86,16 @@
86 realtime_player.start(); 86 realtime_player.start();
87 } 87 }
88 88
  89 + // 2x8 users
  90 + for (var i = 0; i < 8; i++) {
  91 + var tr = $("<tr></tr>").hide();
  92 + $("#lst_chats").append(tr);
  93 +
  94 + for (var j = 0; j < 2; j++) {
  95 + tr.append($("<td></td>").attr("id", "td_" + (i * 8 + j)));
  96 + }
  97 + }
  98 +
89 api_server = "http://" + query.hostname + ":" + srs_get_api_server_port() + "/api/v1/chats"; 99 api_server = "http://" + query.hostname + ":" + srs_get_api_server_port() + "/api/v1/chats";
90 refresh(); 100 refresh();
91 }); 101 });
@@ -187,89 +197,44 @@ @@ -187,89 +197,44 @@
187 } 197 }
188 }); 198 });
189 } 199 }
190 - function render_chat_room(chats) { 200 + function render_chat_room(original_chats) {
191 if (!self_chat) { 201 if (!self_chat) {
192 return; 202 return;
193 } 203 }
194 204
195 - // new added chat  
196 - for (var i = 0; i < chats.length; i++) {  
197 - var chat = chats[i]; 205 + var chats = [];
  206 + for (var i = 0; i < original_chats.length; i++) {
  207 + var chat = original_chats[i];
  208 +
198 // ignore the self. 209 // ignore the self.
199 if (self_chat && self_chat.id == chat.id) { 210 if (self_chat && self_chat.id == chat.id) {
200 continue; 211 continue;
201 } 212 }
202 213
  214 + chats.push(chat);
  215 + }
  216 +
  217 + // new added chat
  218 + for (var i = 0; i < chats.length; i++) {
  219 + var chat = chats[i];
  220 +
203 // if previous exists, ignore, only add new here. 221 // if previous exists, ignore, only add new here.
204 var previous_chat = get_previous_chat_user(previous_chats, chat.id); 222 var previous_chat = get_previous_chat_user(previous_chats, chat.id);
205 if (previous_chat) { 223 if (previous_chat) {
206 // update reference. 224 // update reference.
  225 + chat.ui = previous_chat.ui;
  226 + chat.parent = previous_chat.parent;
207 chat.player = previous_chat.player; 227 chat.player = previous_chat.player;
208 - chat.player.private_object = chat;  
209 - continue;  
210 - }  
211 -  
212 - global_chat_user_id++;  
213 -  
214 - // username: a str indicates the user name.  
215 - // url: a str indicates the url of user stream.  
216 - // join_date: a str indicates the join timestamp in seconds.  
217 - // join_date_str: friendly formated time.  
218 - var obj = $("<div/>").html($("#template").html());  
219 - $(obj).attr("chat_id", chat.id);  
220 - $(obj).attr("id", "div_" + chat.id); // for specifed chat: $("#div_" + chat_id)  
221 - $(obj).attr("class", "div_chat"); // for all chats: $(".div_chat")  
222 - $(obj).find("#chat_player").attr("id", "rp_" + chat.id); // for specifed player: $("#rp_" + chat_id)  
223 - $(obj).find("#chat_player_raw").attr("id", "rp_raw_" + chat.id); // for specifed player: $("#rp_raw_" + chat_id)  
224 - $(obj).find("#user_name").text(chat.username);  
225 - $(obj).find("#join_date").text(chat.join_date_str);  
226 - $(obj).find("#collapseM").attr("id", "collapse_" + global_chat_user_id);  
227 - $(obj).find("#headerN").attr("href", "#collapse_" + global_chat_user_id);  
228 -  
229 - $("#lst_chats").append(obj);  
230 -  
231 - if (!no_play) {  
232 - // start the realtime player.  
233 - var _player = new SrsPlayer("rp_raw_" + chat.id, 600, 300, chat);  
234 - _player.on_player_ready = function() {  
235 - this.set_bt(0.5);  
236 - };  
237 - _player.on_player_metadata = function(metadata) {  
238 - this.set_dar(0, 0);  
239 - this.set_fs("screen", 100); 228 + if (chat.player) {
  229 + chat.player.private_object = chat;
240 } 230 }
241 - _player.start(chat.url);  
242 -  
243 - chat.player = _player;  
244 - } else {  
245 - chat.player = null; 231 + continue;
246 } 232 }
247 -  
248 - $(obj).find("#collapse_main").on('hidden', function(){  
249 - var id = $(this).parent().attr("chat_id");  
250 - var chat = get_previous_chat_user(previous_chats, id);  
251 - if (!chat || !chat.player) {  
252 - return;  
253 - }  
254 - chat.player.stop();  
255 - });  
256 - $(obj).find("#collapse_main").on('shown', function(){  
257 - var id = $(this).parent().attr("chat_id");  
258 - var chat = get_previous_chat_user(previous_chats, id);  
259 - if (!chat || !chat.player) {  
260 - return;  
261 - }  
262 - chat.player.play();  
263 - });  
264 } 233 }
265 234
266 // removed chat 235 // removed chat
267 for (var i = 0; i < previous_chats.length; i++) { 236 for (var i = 0; i < previous_chats.length; i++) {
268 var chat = previous_chats[i]; 237 var chat = previous_chats[i];
269 - // ignore the self.  
270 - if (self_chat && self_chat.id == chat.id) {  
271 - continue;  
272 - }  
273 238
274 var new_chat = get_previous_chat_user(chats, chat.id); 239 var new_chat = get_previous_chat_user(chats, chat.id);
275 if (new_chat) { 240 if (new_chat) {
@@ -282,6 +247,117 @@ @@ -282,6 +247,117 @@
282 $("#div_" + chat.id).remove(); 247 $("#div_" + chat.id).remove();
283 } 248 }
284 249
  250 + // hide empty rows.
  251 + $("#lst_chats").find("tr").each(function(){
  252 + var empty = true;
  253 +
  254 + $(this).find("td").each(function(){
  255 + if ($(this).html() != "") {
  256 + empty = false;
  257 + return false; // abort each
  258 + }
  259 + return true;
  260 + });
  261 +
  262 + if (empty) {
  263 + $(this).hide();
  264 + }
  265 + });
  266 +
  267 + // render the chat
  268 + for (var i = 0; i < chats.length; i++) {
  269 + var chat = chats[i];
  270 +
  271 + // if redered, ignore.
  272 + if (chat.parent) {
  273 + continue;
  274 + }
  275 +
  276 + // generate the ui of chat
  277 + if (!chat.ui) {
  278 + global_chat_user_id++;
  279 +
  280 + // username: a str indicates the user name.
  281 + // url: a str indicates the url of user stream.
  282 + // join_date: a str indicates the join timestamp in seconds.
  283 + // join_date_str: friendly formated time.
  284 + var obj = $("<div/>").html($("#template").html());
  285 + if (true) {
  286 + // save current ui object to the chat.
  287 + chat.ui = obj;
  288 +
  289 + $(obj).attr("chat_id", chat.id);
  290 + $(obj).attr("id", "div_" + chat.id); // for specifed chat: $("#div_" + chat_id)
  291 + $(obj).attr("class", "div_chat"); // for all chats: $(".div_chat")
  292 + $(obj).find("#chat_player").attr("id", "rp_" + chat.id); // for specifed player: $("#rp_" + chat_id)
  293 + $(obj).find("#chat_player_raw").attr("id", "rp_raw_" + chat.id); // for specifed player: $("#rp_raw_" + chat_id)
  294 + $(obj).find("#user_name").text(chat.username);
  295 + $(obj).find("#join_date").text(chat.join_date_str);
  296 + $(obj).find("#collapseM").attr("id", "collapse_" + global_chat_user_id);
  297 + $(obj).find("#headerN").attr("href", "#collapse_" + global_chat_user_id);
  298 + }
  299 + }
  300 +
  301 + // find a idle td to render the chat.
  302 + var parent = null;
  303 + $("#lst_chats").find("td").each(function(){
  304 + if ($(this).html() != "") {
  305 + return true;
  306 + }
  307 +
  308 + parent = $(this);
  309 + return false; // abort each
  310 + });
  311 +
  312 + if (!parent) {
  313 + warn("没有可用的位置展示流。");
  314 + break;
  315 + }
  316 + $(parent).append(chat.ui);
  317 + $(parent).parent().show();
  318 +
  319 + // when ui elements appent to the page,
  320 + // create the player, or flash will failed.
  321 + if (!chat.parent) {
  322 + chat.parent = $(parent);
  323 +
  324 + if (!no_play) {
  325 + // start the realtime player.
  326 + var _player = new SrsPlayer("rp_raw_" + chat.id, 430, 185, chat);
  327 + _player.on_player_ready = function() {
  328 + this.set_bt(0.5);
  329 + this.play();
  330 + };
  331 + _player.on_player_metadata = function(metadata) {
  332 + this.set_dar(0, 0);
  333 + this.set_fs("screen", 100);
  334 + }
  335 + _player.start(chat.url);
  336 +
  337 + chat.player = _player;
  338 + } else {
  339 + chat.player = null;
  340 + }
  341 +
  342 + $(obj).find("#collapse_main").on('hidden', function(){
  343 + var id = $(this).parent().attr("chat_id");
  344 + var chat = get_previous_chat_user(previous_chats, id);
  345 + if (!chat || !chat.player) {
  346 + return;
  347 + }
  348 + chat.player.stop();
  349 + });
  350 + $(obj).find("#collapse_main").on('shown', function(){
  351 + var id = $(this).parent().attr("chat_id");
  352 + var chat = get_previous_chat_user(previous_chats, id);
  353 + if (!chat || !chat.player) {
  354 + return;
  355 + }
  356 + chat.player.play();
  357 + });
  358 + }
  359 + }
  360 +
285 previous_chats = chats; 361 previous_chats = chats;
286 } 362 }
287 function get_previous_chat_user(arr, id) { 363 function get_previous_chat_user(arr, id) {
@@ -325,10 +401,6 @@ @@ -325,10 +401,6 @@
325 // removed chat 401 // removed chat
326 for (var i = 0; i < previous_chats.length; i++) { 402 for (var i = 0; i < previous_chats.length; i++) {
327 var chat = previous_chats[i]; 403 var chat = previous_chats[i];
328 - // ignore the self.  
329 - if (self_chat && self_chat.id == chat.id) {  
330 - continue;  
331 - }  
332 404
333 if (chat.player) { 405 if (chat.player) {
334 chat.player.stop(); 406 chat.player.stop();
@@ -517,26 +589,18 @@ @@ -517,26 +589,18 @@
517 <img src="img/tooltip.png"/> 589 <img src="img/tooltip.png"/>
518 </span> 590 </span>
519 </div> 591 </div>
520 - <div id="collapseM" class="accordion-body collapse"> 592 + <div id="collapseM" class="accordion-body collapse in">
521 <div class="accordion-inner"> 593 <div class="accordion-inner">
522 - <div class="row-fluid">  
523 - <div class="span2">  
524 - </div>  
525 - <div class="span8">  
526 - <div id="chat_player">  
527 - <div id="chat_player_raw">  
528 - </div>  
529 - </div>  
530 - </div>  
531 - <div class="span2"> 594 + <div id="chat_player">
  595 + <div id="chat_player_raw">
532 </div> 596 </div>
533 </div> 597 </div>
534 </div> 598 </div>
535 </div> 599 </div>
536 </div> 600 </div>
537 </div> 601 </div>
538 - <div class="container" id="lst_chats">  
539 - </div> 602 + <table id="lst_chats" class="table">
  603 + </table>
540 <div id="video_modal" class="modal hide fade"> 604 <div id="video_modal" class="modal hide fade">
541 <div class="modal-header"> 605 <div class="modal-header">
542 <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 606 <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>