Fixes chat panel broken layout. Closes #5.

app.js

@@ -46,7 +46,7 @@ function init() {
             if (RTC.browser == 'firefox') {
                 getUserMediaWithConstraints(['audio']);
             } else {
-                getUserMediaWithConstraints(['audio', 'video'], config.resolution || '360');
+                getUserMediaWithConstraints(['audio', 'video'], '360');
             }
             document.getElementById('connect').disabled = true;
         } else {
@@ -99,6 +99,7 @@ function doJoin() {
 $(document).bind('mediaready.jingle', function (event, stream) {
     connection.jingle.localStream = stream;
     RTC.attachMediaStream($('#localVideo'), stream);
+    document.getElementById('localVideo').muted = true;
     document.getElementById('localVideo').autoplay = true;
     document.getElementById('localVideo').volume = 0;
 
@@ -106,13 +107,7 @@ $(document).bind('mediaready.jingle', function (event, stream) {
     updateLargeVideo(localVideoSrc, true, 0);
 
     $('#localVideo').click(function () {
-        updateLargeVideo($(this).attr('src'), true, 0);
-        $('video').each(function (idx, el) {
-            if (el.id.indexOf('mixedmslabel') != -1) {
-                el.volume = 0;
-                el.volume = 1;
-            }
-        });
+        updateLargeVideo($(this).attr('src'), true, 1);
     });
 
     doJoin();
@@ -432,13 +427,6 @@ $(document).bind('presentationadded.muc', function (event, jid, presUrl, current
                 });
 
     $('#presentation>iframe').attr('id', preziPlayer.options.preziId);
-
-//    $('#presentation>iframe').load(function (){
-//        console.log("IFRAME LOADED!!!!!!!!!!!!!!!!");
-//    });
-//    $('#presentation>iframe').ready(function (){
-//        console.log("IFRAME READY!!!!!!!!!!!!!!!!");
-//    });
                  
     preziPlayer.on(PreziPlayer.EVENT_STATUS, function(event) {
         console.log("prezi status", event.value);
@@ -554,6 +542,7 @@ function toggleAudio() {
 }
 
 function resizeLarge() {
+    resizeChat();
     var availableHeight = window.innerHeight;
     var chatspaceWidth = $('#chatspace').width();
 
@@ -588,10 +577,8 @@ function resizeThumbnails() {
     var availableHeight = window.innerHeight - $('#largeVideo').height() - 79;
     var numvids = $('#remoteVideos>span:visible').length;
 
-    var chatWidth = $('#chatspace').width();
-
     // Remove the 1px borders arround videos and the chat width.
-    var availableWinWidth = $('#remoteVideos').width() - 2 * numvids - chatWidth - 50;
+    var availableWinWidth = $('#remoteVideos').width() - 2 * numvids - 50;
     var availableWidth = availableWinWidth / numvids;
     var aspectRatio = 16.0 / 9.0;
     var maxHeight = Math.min(160, availableHeight);
@@ -599,12 +586,35 @@ function resizeThumbnails() {
     if (availableHeight < availableWidth / aspectRatio) {
         availableWidth = Math.floor(availableHeight * aspectRatio);
     }
+
     // size videos so that while keeping AR and max height, we have a nice fit
     $('#remoteVideos').height(availableHeight+26); // add the 2*18px-padding-top border used for highlighting shadow.
     $('#remoteVideos>span').width(availableWidth);
     $('#remoteVideos>span').height(availableHeight);
 }
 
+function resizeChat() {
+    var availableHeight = window.innerHeight;
+    var availableWidth = window.innerWidth;
+
+    var chatWidth = 200;
+    if (availableWidth*0.2 < 200)
+        chatWidth = availableWidth*0.2;
+
+    $('#chatspace').width(chatWidth);
+    $('#chatspace').height(availableHeight - 40);
+
+    resizeChatConversation();
+}
+
+function resizeChatConversation() {
+    var usermsgStyleHeight = document.getElementById("usermsg").style.height;
+    var usermsgHeight = usermsgStyleHeight.substring(0, usermsgStyleHeight.indexOf('px'));
+
+    $('#chatconversation').width($('#chatspace').width() - 10);
+    $('#chatconversation').height(window.innerHeight - 50 - parseInt(usermsgHeight));
+}
+
 $(document).ready(function () {
     $('#nickinput').keydown(function(event) {
         if (event.keyCode == 13) {
@@ -632,7 +642,11 @@ $(document).ready(function () {
         }
     });
 
-    $('#usermsg').autosize();
+    var onTextAreaResize = function() {
+        resizeChatConversation();
+        scrollChatToBottom();
+    };
+    $('#usermsg').autosize({callback: onTextAreaResize});
 
     // Set the defaults for prompt dialogs.
     jQuery.prompt.setDefaults({persistent: false});
@@ -972,18 +986,30 @@ function updateLockButton() {
 function openChat() {
     var chatspace = $('#chatspace');
     var videospace = $('#videospace');
-    var onAnimationProgress = function () {
+
+    var onShow = function () {
+        resizeLarge();
+        $('#chatspace').show("slide", { direction: "right", duration: 500});
+    };
+    var onHide = function () {
+        $('#chatspace').hide("slide", { direction: "right", duration: 500});
         resizeLarge();
-        videospace.css({right:chatspace.width()});
     };
 
-    if (chatspace.css("opacity") == 1) {
-        chatspace.animate({width: 0, opacity: 0}, {duration: 1000, progress: onAnimationProgress});
+    if (chatspace.css("display") == 'block') {
+        videospace.animate({right: 0}, {queue: false, duration: 500, progress: onHide});
     }
     else {
-        chatspace.animate({width:"20%", opacity: 1}, {duration: 1000, progress: onAnimationProgress});
+        videospace.animate({right: chatspace.width()},
+                           {queue: false,
+                            duration: 500,
+                            progress: onShow,
+                            complete: function() {
+                                scrollChatToBottom();
+                            }
+                           });
     }
-    
+
     // Request the focus in the nickname field or the chat input field.
     if ($('#nickinput').is(':visible'))
         $('#nickinput').focus();
@@ -1069,3 +1095,9 @@ function createFocusIndicatorElement(parentElement) {
     focusIndicator.title = "The owner of this conference"
     parentElement.appendChild(focusIndicator);
 }
+
+function scrollChatToBottom() {
+    setTimeout(function() {
+        $('#chatconversation').scrollTop($('#chatconversation')[0].scrollHeight);
+    }, 5);
+}

css/main.css

@@ -5,6 +5,7 @@ html, body{
     font-family:'YanoneKaffeesatzLight',Verdana,Tahoma,Arial;
 	font-weight: 400;
     background: #e9e9e9;
+    overflow-x: hidden;
 }
 
 #videospace {
@@ -84,31 +85,32 @@ html, body{
 }
 
 #chatspace {
-    display:block;
+    display:none;
     position:absolute;
     float: right;
     top: 40px;
     bottom: 0px;
     right: 0px;
-    width:0;
-    opacity: 0;
+    width: 20%;
+    max-width: 200px;
     overflow: hidden;
-    background-color:#f6f6f6;
+    background-color:#dfebf1;
     border-left:1px solid #424242;
 }
 
 #chatconversation {
-    display:block;
-    position:relative;
-    top: -120px;
-    float:top;
-    text-align:left;
-    line-height:20px;
-    font-size:14px;
-    padding:5px;
-    height:90%;
-    overflow:scroll;
-    visibility:hidden;
+    position: relative;
+    top: 5px;
+    padding: 5px;
+    text-align: left;
+    line-height: 20px;
+    font-size: 10pt;
+    width: 100%;
+    height: 95%;
+    overflow-y: scroll;
+    overflow-x: hidden;
+    word-wrap: break-word;
+    visibility: hidden;
 }
 
 .localuser {
@@ -120,20 +122,31 @@ html, body{
 }
 
 #usermsg {
-    position:absolute;
-    bottom: 5px;
-    left: 5px;
-    right: 5px;
-    width: 95%;
-    height: 40px;
+    position: relative;
+    width: 100%;
+    height: 5%;
+    padding: 5px;
     z-index: 5;
-    visibility:hidden;
     max-height:150px;
+    min-height:50px;
+    visibility:hidden;
+    border: 0px none;
+    border-top: 1px solid #cccccc;
+    background: #FFFFFF;
+    box-shadow: none;
+    border-radius:0;
+    font-size: 10pt;
+}
+
+#usermsg: hover {
+    border: 0px none;
+    border-top: 1px solid #cccccc;
+    box-shadow: none;
 }
 
 #nickname {
-    position:relative;
-    text-align:center;
+    position: absolute;
+    text-align: center;
     color: #9d9d9d;
     font-size: 18;
     top: 100px;
@@ -163,7 +176,7 @@ html, body{
     display:block;
     height:39px;
     text-align:center;
-    background-color:#087dba;
+    background-color: #2591e5;
 }
 
 #left {
@@ -272,7 +285,6 @@ a.button:hover {
 }
 
 input[type='text'], textarea {
-    border: 0px none;
     display: inline-block;
     font-size: 14px;
     padding: 5px;
@@ -331,13 +343,6 @@ form {
     display: block;
 }
 
-/* Animated text area. */
-.animated {
-    -webkit-transition: height 0.2s;
-    -moz-transition: height 0.2s;
-    transition: height 0.2s;
-}
-
 #downloadlog {
     position: absolute;
     bottom: 5;

index.html

@@ -4,17 +4,18 @@
     <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
     <script src="libs/strophejingle.bundle.js?v=7"></script><!-- strophe.jingle bundle -->
     <script src="libs/colibri.js?v=7"></script><!-- colibri focus implementation -->
+    <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
     <script src="muc.js?v=4"></script><!-- simple MUC library -->
-    <script src="estos_log.js?v=3"></script><!-- simple stanza logger -->
-    <script src="app.js?v=14"></script><!-- application logic -->
+    <script src="estos_log.js?v=2"></script><!-- simple stanza logger -->
+    <script src="app.js?v=11"></script><!-- application logic -->
     <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
     <link rel="stylesheet" type="text/css" media="screen" href="css/main.css?v=11"/>
-    <link rel="stylesheet" href="css/jquery-impromptu.css?v=4">
-    <link rel="stylesheet" href="css/modaldialog.css?v=4">
-    <script src="libs/jquery-impromptu.js?v=4"></script>
-    <script src="libs/jquery.autosize.js?v=4"></script>
-    <script src="config.js?v=5"></script><!-- adapt to your needs, i.e. set hosts and bosh path -->
-    <script src="libs/prezi_player.js?v=3"></script>
+    <link rel="stylesheet" href="css/jquery-impromptu.css?v=3">
+    <link rel="stylesheet" href="css/modaldialog.css?v=3">
+    <script src="libs/jquery-impromptu.js"></script>
+    <script src="libs/jquery.autosize.js"></script>
+    <script src="config.js"></script><!-- adapt to your needs, i.e. set hosts and bosh path -->
+    <script src="libs/prezi_player.js"></script>
   </head>
   <body>
     <div id="header">
@@ -74,7 +75,7 @@
         
         <!--div><i class="fa fa-comments">&nbsp;</i><span class='nick'></span>:&nbsp;<span class='chattext'></span></div-->
         <div id="chatconversation"></div>
-        <textarea id="usermsg" class= "animated" placeholder='Enter text...' autofocus></textarea>
+        <textarea id="usermsg" placeholder='Enter text...' autofocus></textarea>
     </div>
     <a id="downloadlog" onclick='dump(event.target);'><i title="Download support information" class="fa fa-cloud-download"></i></a>
     <script>