Fixes chat panel broken layout. Closes #5.

11 years ago · 028c8f27c2
parent c82e80894f
commit 028c8f27c2
3 changed files with 105 additions and 67 deletions
--- a/app.js
+++ b/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);
+}
--- a/css/main.css
+++ b/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;
--- a/index.html
+++ b/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>