refine the ui of chat, to 5x3+1

@@ -251,7 +251,7 @@ function srs_initialize_codec_page(
     
     $(sl_size).empty();
     var sizes = ["176x144", "320x240", "352x240", 
-        "352x288", "460x240", "640x480", "720x480", "720x576", "800x600", 
+        "352x288", "480x360", "640x480", "720x480", "720x576", "800x600", 
         "1024x768", "1280x720", "1360x768", "1920x1080"];
     for (i = 0; i < sizes.length; i++) {
         $(sl_size).append("<option value='" + sizes[i] + "'>" + sizes[i] + "</option");
@@ -294,7 +294,7 @@ function srs_publisher_initialize_page(
     $(sl_gop + " option[value='10']").attr("selected", true);
     
     //var sizes = ["176x144", "320x240", "352x240", 
-    //    "352x288", "460x240", "640x480", "720x480", "720x576", "800x600", 
+    //    "352x288", "480x360", "640x480", "720x480", "720x576", "800x600", 
     //    "1024x768", "1280x720", "1360x768", "1920x1080"];
     $(sl_size + " option[value='640x480']").attr("selected", true);
     
@@ -322,16 +322,16 @@ function srs_chat_initialize_page(
     
     //var levels = ["1", "1b", "1.1", "1.2", "1.3", 
     //    "2", "2.1", "2.2", "3", "3.1", "3.2", "4", "4.1", "4.2", "5", "5.1"];
-    $(sl_level + " option[value='2.1']").attr("selected", true);
+    $(sl_level + " option[value='3.1']").attr("selected", true);
     
     //var gops = ["0.3", "0.5", "1", "2", "3", "4", 
     //    "5", "6", "7", "8", "9", "10", "15", "20"];
-    $(sl_gop + " option[value='1']").attr("selected", true);
+    $(sl_gop + " option[value='2']").attr("selected", true);
     
     //var sizes = ["176x144", "320x240", "352x240", 
-    //    "352x288", "460x240", "640x480", "720x480", "720x576", "800x600", 
+    //    "352x288", "480x360", "640x480", "720x480", "720x576", "800x600", 
     //    "1024x768", "1280x720", "1360x768", "1920x1080"];
-    $(sl_size + " option[value='640x480']").attr("selected", true);
+    $(sl_size + " option[value='480x360']").attr("selected", true);
     
     //var fpses = ["5", "10", "15", "20", "24", "25", "29.97", "30"];
     $(sl_fps + " option[value='15']").attr("selected", true);

@@ -113,13 +113,13 @@ SrsPlayer.prototype.resume = function() {
     this.callbackObj.ref.__resume();
 }
 /**
-* to set the DAR, for example, DAR=16:9
-* @param num, for example, 9. 
-*       use metadata height if 0.
-*       use user specified height if -1.
-* @param den, for example, 16. 
+* to set the DAR, for example, DAR=16:9 where num=16,den=9.
+* @param num, for example, 16. 
 *       use metadata width if 0.
 *       use user specified width if -1.
+* @param den, for example, 9. 
+*       use metadata height if 0.
+*       use user specified height if -1.
 */
 SrsPlayer.prototype.set_dar = function(num, den) {
     this.callbackObj.ref.__set_dar(num, den);

@@ -17,6 +17,9 @@
         body{
             padding-top: 55px;
         }
+        .accordion-group {
+            width: 310px;
+        }
     </style>
     <script type="text/javascript">
         var srs_publisher = null;
@@ -34,6 +37,19 @@
             // url set to: rtmp://demo:1935/live/livestream
             srs_init_publish("#txt_url");
             
+            // support 5x3+1 users
+            for (var i = 0; i < 5; i++) {
+                var tr = $("<tr></tr>").hide();
+                $("#lst_chats").append(tr);
+                
+                for (var j = 0; j < 3; j++) {
+                    tr.append($("<td></td>").attr("id", "td_" + ((i+1) * 8 + j)));
+                }
+            }
+            // remove border of row.
+            $("#lst_chats").find("td").css("border", "none").css("padding", "2px")
+                .css("padding-left", "0px").css("width", "327px");
+            
             if (query.agent == "true") {
                 document.write(navigator.userAgent);
                 return;
@@ -60,7 +76,7 @@
             $("#txt_url").val($("#txt_url").val() + "." + new Date().getTime());
             
             // start the publisher.
-            srs_publisher = new SrsPublisher("local_publisher", 430, 185);
+            srs_publisher = new SrsPublisher("local_publisher", 280, 180);
             srs_publisher.on_publisher_ready = function(cameras, microphones) {
                 srs_chat_initialize_page(
                     cameras, microphones,
@@ -85,7 +101,7 @@
             
             if (!no_play) {
                 // start the realtime player.
-                realtime_player = new SrsPlayer("realtime_player", 430, 185);
+                realtime_player = new SrsPlayer("realtime_player", 280, 180);
                 realtime_player.on_player_ready = function() {
                     this.set_bt(0.5);
                 };
@@ -98,18 +114,6 @@
                 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)));
-                }
-            }
-            // remove border of row.
-            $("#lst_chats").find("td").css("border", "none");
-            
             $("#txt_name").focus();
             
             api_server = "http://" + query.hostname + ":" + srs_get_api_server_port() + "/api/v1/chats";
@@ -321,7 +325,7 @@
                         $(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("#user_player_url").attr("href", chat.url);
-                        $(obj).find("#join_date").text(chat.join_date_str);
+                        $(obj).find("#join_date").text(chat.join_date_str.split(" ")[1]);
                         $(obj).find("#collapseM").attr("id", "collapse_" + global_chat_user_id);
                         $(obj).find("#headerN").attr("href", "#collapse_" + global_chat_user_id);
                     }
@@ -352,7 +356,7 @@
                     
                     if (!no_play) {
                         // start the realtime player.
-                        var _player = new SrsPlayer("rp_raw_" + chat.id, 430, 185, chat);
+                        var _player = new SrsPlayer("rp_raw_" + chat.id, 240, 180, chat);
                         _player.on_player_ready = function() {
                             this.set_bt(0.5);
                             this.play();
@@ -580,7 +584,7 @@
     </div>
     <table id="lst_chats" class="table">
         <tr>
-            <td>
+            <td id="td_0">
                 <div class="accordion-group">
                     <div class="accordion-heading">
                         <span class="accordion-toggle">
@@ -594,7 +598,7 @@
                     </div>
                 </div>
             </td>
-            <td>
+            <td id="td_1">
                 <div class="accordion-group">
                     <div class="accordion-heading">
                         <span class="accordion-toggle">
@@ -611,6 +615,7 @@
                     </div>
                 </div>
             </td>
+            <td id="td_2"></td>
         </tr>
     </table>
     <div class="container hide" id="template">

@@ -196,13 +196,13 @@
                     select_dar("#btn_dar_original", 0, 0);
                 });
                 $("#btn_dar_21_9").click(function(){
-                    select_dar("#btn_dar_21_9", 9, 21);
+                    select_dar("#btn_dar_21_9", 21, 9);
                 });
                 $("#btn_dar_16_9").click(function(){
-                    select_dar("#btn_dar_16_9", 9, 16);
+                    select_dar("#btn_dar_16_9", 16, 9);
                 });
                 $("#btn_dar_4_3").click(function(){
-                    select_dar("#btn_dar_4_3", 3, 4);
+                    select_dar("#btn_dar_4_3", 4, 3);
                 });
                 $("#btn_dar_fill").click(function(){
                     select_dar("#btn_dar_fill", -1, -1);

@@ -37,8 +37,8 @@ package
         private var user_w:int = 0;
         private var user_h:int = 0;
         // user set dar den:num
-        private var user_dar_num:int = 0;
         private var user_dar_den:int = 0;
+        private var user_dar_num:int = 0;
         // user set fs(fullscreen) refer and percent.
         private var user_fs_refer:String = null;
         private var user_fs_percent:int = 0;
@@ -221,13 +221,13 @@ package
         }
         
         /**
-         * to set the DAR, for example, DAR=16:9
-         * @param num, for example, 9. 
-         *       use metadata height if 0.
-         *       use user specified height if -1.
-         * @param den, for example, 16. 
+        * to set the DAR, for example, DAR=16:9 where num=16,den=9.
+        * @param num, for example, 16. 
         *       use metadata width if 0.
         *       use user specified width if -1.
+        * @param den, for example, 9. 
+        *       use metadata height if 0.
+        *       use user specified height if -1.
          */
         private function js_call_set_dar(num:int, den:int):void {
             user_dar_num = num;
@@ -402,21 +402,21 @@ package
             var obj:Object = __get_video_size_object();
             
             // get the DAR
-            var num:int = user_dar_num;
             var den:int = user_dar_den;
+            var num:int = user_dar_num;
             
-            if (num == 0) {
-                num = obj.height;
+            if (den == 0) {
+                den = obj.height;
             }
-            if (num == -1) {
-                num = this.stage.fullScreenHeight;
+            if (den == -1) {
+                den = this.stage.fullScreenHeight;
             }
             
-            if (den == 0) {
-                den = obj.width;
+            if (num == 0) {
+                num = obj.width;
             }
-            if (den == -1) {
-                den = this.stage.fullScreenWidth;
+            if (num == -1) {
+                num = this.stage.fullScreenWidth;
             }
                 
             // for refer is screen.
@@ -436,23 +436,23 @@ package
          */
         private function __execute_user_set_dar():void {
             // get the DAR
-            var num:int = user_dar_num;
             var den:int = user_dar_den;
+            var num:int = user_dar_num;
             
             var obj:Object = __get_video_size_object();
             
-            if (num == 0) {
-                num = obj.height;
+            if (den == 0) {
+                den = obj.height;
             }
-            if (num == -1) {
-                num = this.user_h;
+            if (den == -1) {
+                den = this.user_h;
             }
             
-            if (den == 0) {
-                den = obj.width;
+            if (num == 0) {
+                num = obj.width;
             }
-            if (den == -1) {
-                den = this.user_w;
+            if (num == -1) {
+                num = this.user_w;
             }
             
             __update_video_size(num, den, this.user_w, this.user_h, this.user_w, this.user_h);
@@ -468,19 +468,19 @@ package
         * @param _sw/_wh the stage size, >= paper size. used to center the player.
         */
         private function __update_video_size(_num:int, _den:int, _w:int, _h:int, _sw:int, _sh:int):void {
-            if (!this.media_video || _num <= 0 || _den <= 0) {
+            if (!this.media_video || _den <= 0 || _num <= 0) {
                 return;
             }
             
             // set DAR.
             // calc the height by DAR
-            var _height:int = _w * _num / _den;
+            var _height:int = _w * _den / _num;
             if (_height <= _h) {
                 this.media_video.width = _w;
                 this.media_video.height = _height;
             } else {
                 // height overflow, calc the width by DAR
-                var _width:int = _h * _den / _num;
+                var _width:int = _h * _num / _den;
                 
                 this.media_video.width = _width;
                 this.media_video.height = _h;