mirror of
https://github.com/ossrs/srs.git
synced 2025-03-09 15:49:59 +00:00
layout the chat in 2x8 table
This commit is contained in:
winlin
parent
3ab867d907
commit
70dc3dbb53
3 changed files with 162 additions and 84 deletions
8
trunk/research/players/js/srs.page.js
Normal file → Executable file
8
trunk/research/players/js/srs.page.js
Normal file → Executable file
|
|
@ -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.
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
}
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -86,6 +86,16 @@
|
|||
realtime_player.start();
|
||||
}
|
||||
|
||||
// 2x8 users
|
||||
for (var i = 0; i < 8; i++) {
|
||||
var tr = $("<tr></tr>").hide();
|
||||
$("#lst_chats").append(tr);
|
||||
|
||||
for (var j = 0; j < 2; j++) {
|
||||
tr.append($("<td></td>").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 = $("<div/>").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 = $("<div/>").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 @@
|
|||
<img src="img/tooltip.png"/>
|
||||
</span>
|
||||
</div>
|
||||
<div id="collapseM" class="accordion-body collapse">
|
||||
<div id="collapseM" class="accordion-body collapse in">
|
||||
<div class="accordion-inner">
|
||||
<div class="row-fluid">
|
||||
<div class="span2">
|
||||
</div>
|
||||
<div class="span8">
|
||||
<div id="chat_player">
|
||||
<div id="chat_player_raw">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="span2">
|
||||
<div id="chat_player">
|
||||
<div id="chat_player_raw">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container" id="lst_chats">
|
||||
</div>
|
||||
<table id="lst_chats" class="table">
|
||||
</table>
|
||||
<div id="video_modal" class="modal hide fade">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue