Fixes chat panel broken layout. Closes #5.
This commit is contained in:
Yana Stamcheva
parent
c82e80894f
commit
028c8f27c2
80
app.js
80
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();
|
||||
|
|
@ -433,13 +428,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);
|
||||
if (event.value == PreziPlayer.STATUS_CONTENT_READY) {
|
||||
|
|
@ -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,16 +986,28 @@ 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.
|
||||
|
|
@ -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);
|
||||
}
|
||||
61
css/main.css
61
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,30 +85,31 @@ 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;
|
||||
top: 5px;
|
||||
padding: 5px;
|
||||
text-align: left;
|
||||
line-height: 20px;
|
||||
font-size:14px;
|
||||
padding:5px;
|
||||
height:90%;
|
||||
overflow:scroll;
|
||||
font-size: 10pt;
|
||||
width: 100%;
|
||||
height: 95%;
|
||||
overflow-y: scroll;
|
||||
overflow-x: hidden;
|
||||
word-wrap: break-word;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
|
|
@ -120,19 +122,30 @@ 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;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
color: #9d9d9d;
|
||||
font-size: 18;
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
19
index.html
19
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"> </i><span class='nick'></span>: <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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue