From 70dc3dbb53809daa1015e3ed01b08a83c2df7430 Mon Sep 17 00:00:00 2001 From: winlin Date: Wed, 25 Dec 2013 17:26:50 +0800 Subject: [PATCH] layout the chat in 2x8 table --- trunk/research/players/js/srs.page.js | 8 +- trunk/research/players/js/srs.publisher.js | 14 ++ trunk/research/players/srs_chat.html | 224 +++++++++++++-------- 3 files changed, 162 insertions(+), 84 deletions(-) mode change 100644 => 100755 trunk/research/players/js/srs.page.js diff --git a/trunk/research/players/js/srs.page.js b/trunk/research/players/js/srs.page.js old mode 100644 new mode 100755 index fff3ccb97..e68ee30f9 --- a/trunk/research/players/js/srs.page.js +++ b/trunk/research/players/js/srs.page.js @@ -286,19 +286,19 @@ function srs_chat_initialize_page( //var gops = ["0.3", "0.5", "1", "2", "3", "4", // "5", "6", "7", "8", "9", "10", "15", "20"]; - $(sl_gop + " option[value='0.5']").attr("selected", true); + $(sl_gop + " option[value='1']").attr("selected", true); //var sizes = ["176x144", "320x240", "352x240", // "352x288", "460x240", "640x480", "720x480", "720x576", "800x600", // "1024x768", "1280x720", "1360x768", "1920x1080"]; - $(sl_size + " option[value='320x240']").attr("selected", true); + $(sl_size + " option[value='640x480']").attr("selected", true); //var fpses = ["5", "10", "15", "20", "24", "25", "29.97", "30"]; - $(sl_fps + " option[value='10']").attr("selected", true); + $(sl_fps + " option[value='15']").attr("selected", true); //var bitrates = ["50", "200", "350", "500", "650", "800", // "950", "1000", "1200", "1500", "1800", "2000", "3000", "5000"]; - $(sl_bitrate + " option[value='200']").attr("selected", true); + $(sl_bitrate + " option[value='350']").attr("selected", true); } /** * get the vcodec and acodec. diff --git a/trunk/research/players/js/srs.publisher.js b/trunk/research/players/js/srs.publisher.js index b46d51ef7..3dac341ec 100755 --- a/trunk/research/players/js/srs.publisher.js +++ b/trunk/research/players/js/srs.publisher.js @@ -87,6 +87,9 @@ SrsPublisher.prototype.start = function() { * @param acodec an object contains the audio codec info. */ SrsPublisher.prototype.publish = function(url, vcodec, acodec) { + this.stop(); + SrsPublisher.__publishers.push(this); + if (url) { this.url = url; } @@ -100,6 +103,17 @@ SrsPublisher.prototype.publish = function(url, vcodec, acodec) { this.callbackObj.ref.__publish(this.url, this.width, this.height, this.vcodec, this.acodec); } SrsPublisher.prototype.stop = function() { + for (var i = 0; i < SrsPublisher.__publishers.length; i++) { + var player = SrsPublisher.__publishers[i]; + + if (player.id != this.id) { + continue; + } + + SrsPublisher.__publishers.splice(i, 1); + break; + } + this.callbackObj.ref.__stop(); } /** diff --git a/trunk/research/players/srs_chat.html b/trunk/research/players/srs_chat.html index 270322d91..f895c4e5d 100755 --- a/trunk/research/players/srs_chat.html +++ b/trunk/research/players/srs_chat.html @@ -86,6 +86,16 @@ realtime_player.start(); } + // 2x8 users + for (var i = 0; i < 8; i++) { + var tr = $("").hide(); + $("#lst_chats").append(tr); + + for (var j = 0; j < 2; j++) { + tr.append($("").attr("id", "td_" + (i * 8 + j))); + } + } + api_server = "http://" + query.hostname + ":" + srs_get_api_server_port() + "/api/v1/chats"; refresh(); }); @@ -187,89 +197,44 @@ } }); } - function render_chat_room(chats) { + function render_chat_room(original_chats) { if (!self_chat) { return; } + var chats = []; + for (var i = 0; i < original_chats.length; i++) { + var chat = original_chats[i]; + + // ignore the self. + if (self_chat && self_chat.id == chat.id) { + continue; + } + + chats.push(chat); + } + // new added chat for (var i = 0; i < chats.length; i++) { var chat = chats[i]; - // ignore the self. - if (self_chat && self_chat.id == chat.id) { - continue; - } // if previous exists, ignore, only add new here. var previous_chat = get_previous_chat_user(previous_chats, chat.id); if (previous_chat) { // update reference. + chat.ui = previous_chat.ui; + chat.parent = previous_chat.parent; chat.player = previous_chat.player; - chat.player.private_object = chat; + if (chat.player) { + chat.player.private_object = chat; + } continue; } - - global_chat_user_id++; - - // username: a str indicates the user name. - // url: a str indicates the url of user stream. - // join_date: a str indicates the join timestamp in seconds. - // join_date_str: friendly formated time. - var obj = $("
").html($("#template").html()); - $(obj).attr("chat_id", chat.id); - $(obj).attr("id", "div_" + chat.id); // for specifed chat: $("#div_" + chat_id) - $(obj).attr("class", "div_chat"); // for all chats: $(".div_chat") - $(obj).find("#chat_player").attr("id", "rp_" + chat.id); // for specifed player: $("#rp_" + chat_id) - $(obj).find("#chat_player_raw").attr("id", "rp_raw_" + chat.id); // for specifed player: $("#rp_raw_" + chat_id) - $(obj).find("#user_name").text(chat.username); - $(obj).find("#join_date").text(chat.join_date_str); - $(obj).find("#collapseM").attr("id", "collapse_" + global_chat_user_id); - $(obj).find("#headerN").attr("href", "#collapse_" + global_chat_user_id); - - $("#lst_chats").append(obj); - - if (!no_play) { - // start the realtime player. - var _player = new SrsPlayer("rp_raw_" + chat.id, 600, 300, chat); - _player.on_player_ready = function() { - this.set_bt(0.5); - }; - _player.on_player_metadata = function(metadata) { - this.set_dar(0, 0); - this.set_fs("screen", 100); - } - _player.start(chat.url); - - chat.player = _player; - } else { - chat.player = null; - } - - $(obj).find("#collapse_main").on('hidden', function(){ - var id = $(this).parent().attr("chat_id"); - var chat = get_previous_chat_user(previous_chats, id); - if (!chat || !chat.player) { - return; - } - chat.player.stop(); - }); - $(obj).find("#collapse_main").on('shown', function(){ - var id = $(this).parent().attr("chat_id"); - var chat = get_previous_chat_user(previous_chats, id); - if (!chat || !chat.player) { - return; - } - chat.player.play(); - }); } // removed chat for (var i = 0; i < previous_chats.length; i++) { var chat = previous_chats[i]; - // ignore the self. - if (self_chat && self_chat.id == chat.id) { - continue; - } var new_chat = get_previous_chat_user(chats, chat.id); if (new_chat) { @@ -282,6 +247,117 @@ $("#div_" + chat.id).remove(); } + // hide empty rows. + $("#lst_chats").find("tr").each(function(){ + var empty = true; + + $(this).find("td").each(function(){ + if ($(this).html() != "") { + empty = false; + return false; // abort each + } + return true; + }); + + if (empty) { + $(this).hide(); + } + }); + + // render the chat + for (var i = 0; i < chats.length; i++) { + var chat = chats[i]; + + // if redered, ignore. + if (chat.parent) { + continue; + } + + // generate the ui of chat + if (!chat.ui) { + global_chat_user_id++; + + // username: a str indicates the user name. + // url: a str indicates the url of user stream. + // join_date: a str indicates the join timestamp in seconds. + // join_date_str: friendly formated time. + var obj = $("
").html($("#template").html()); + if (true) { + // save current ui object to the chat. + chat.ui = obj; + + $(obj).attr("chat_id", chat.id); + $(obj).attr("id", "div_" + chat.id); // for specifed chat: $("#div_" + chat_id) + $(obj).attr("class", "div_chat"); // for all chats: $(".div_chat") + $(obj).find("#chat_player").attr("id", "rp_" + chat.id); // for specifed player: $("#rp_" + chat_id) + $(obj).find("#chat_player_raw").attr("id", "rp_raw_" + chat.id); // for specifed player: $("#rp_raw_" + chat_id) + $(obj).find("#user_name").text(chat.username); + $(obj).find("#join_date").text(chat.join_date_str); + $(obj).find("#collapseM").attr("id", "collapse_" + global_chat_user_id); + $(obj).find("#headerN").attr("href", "#collapse_" + global_chat_user_id); + } + } + + // find a idle td to render the chat. + var parent = null; + $("#lst_chats").find("td").each(function(){ + if ($(this).html() != "") { + return true; + } + + parent = $(this); + return false; // abort each + }); + + if (!parent) { + warn("没有可用的位置展示流。"); + break; + } + $(parent).append(chat.ui); + $(parent).parent().show(); + + // when ui elements appent to the page, + // create the player, or flash will failed. + if (!chat.parent) { + chat.parent = $(parent); + + if (!no_play) { + // start the realtime player. + var _player = new SrsPlayer("rp_raw_" + chat.id, 430, 185, chat); + _player.on_player_ready = function() { + this.set_bt(0.5); + this.play(); + }; + _player.on_player_metadata = function(metadata) { + this.set_dar(0, 0); + this.set_fs("screen", 100); + } + _player.start(chat.url); + + chat.player = _player; + } else { + chat.player = null; + } + + $(obj).find("#collapse_main").on('hidden', function(){ + var id = $(this).parent().attr("chat_id"); + var chat = get_previous_chat_user(previous_chats, id); + if (!chat || !chat.player) { + return; + } + chat.player.stop(); + }); + $(obj).find("#collapse_main").on('shown', function(){ + var id = $(this).parent().attr("chat_id"); + var chat = get_previous_chat_user(previous_chats, id); + if (!chat || !chat.player) { + return; + } + chat.player.play(); + }); + } + } + previous_chats = chats; } function get_previous_chat_user(arr, id) { @@ -325,10 +401,6 @@ // removed chat for (var i = 0; i < previous_chats.length; i++) { var chat = previous_chats[i]; - // ignore the self. - if (self_chat && self_chat.id == chat.id) { - continue; - } if (chat.player) { chat.player.stop(); @@ -517,26 +589,18 @@
-
+
-
-
-
-
-
-
-
-
-
-
+
+
-
-
+ +