haskal
/
jiti-meet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fixes chat panel broken layout. Closes #5.

This commit is contained in:
Yana Stamcheva 2014-02-05 14:01:22 +01:00
parent c82e80894f
commit 028c8f27c2
3 changed files with 105 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

82
app.js
View File

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

71
css/main.css
View File

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

19
index.html
View File

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