mirror of https://github.com/jitsi/jitsi-meet
Implements audio and visual chat notifications. Closes issue #7. Implements audio notifications for people joining and leaving. Closes issue #37.
yanas
11 years ago
parent
9deae2e6cd
commit
ee5936aaef
@ -0,0 +1,222 @@ |
||||
/** |
||||
* Chat related user interface. |
||||
*/ |
||||
var Chat = (function (my) { |
||||
var notificationInterval = false; |
||||
var unreadMessages = 0; |
||||
|
||||
/** |
||||
* Initializes chat related interface. |
||||
*/ |
||||
my.init = function () { |
||||
var storedDisplayName = window.localStorage.displayname; |
||||
if (storedDisplayName) { |
||||
nickname = storedDisplayName; |
||||
|
||||
Chat.setChatConversationMode(true); |
||||
} |
||||
|
||||
$('#nickinput').keydown(function(event) { |
||||
if (event.keyCode == 13) { |
||||
event.preventDefault(); |
||||
var val = this.value; |
||||
this.value = ''; |
||||
if (!nickname) { |
||||
nickname = val; |
||||
window.localStorage.displayname = nickname; |
||||
|
||||
connection.emuc.addDisplayNameToPresence(nickname); |
||||
connection.emuc.sendPresence(); |
||||
|
||||
Chat.setChatConversationMode(true); |
||||
|
||||
return; |
||||
} |
||||
} |
||||
}); |
||||
|
||||
$('#usermsg').keydown(function(event) { |
||||
if (event.keyCode == 13) { |
||||
event.preventDefault(); |
||||
var message = this.value; |
||||
$('#usermsg').val('').trigger('autosize.resize'); |
||||
this.focus(); |
||||
connection.emuc.sendMessage(message, nickname); |
||||
} |
||||
}); |
||||
|
||||
var onTextAreaResize = function() { |
||||
resizeChatConversation(); |
||||
scrollChatToBottom(); |
||||
}; |
||||
$('#usermsg').autosize({callback: onTextAreaResize}); |
||||
|
||||
$("#chatspace").bind("shown", |
||||
function() { |
||||
unreadMessages = 0; |
||||
setVisualNotification(false); |
||||
}); |
||||
}; |
||||
|
||||
/** |
||||
* Appends the given message to the chat conversation. |
||||
*/ |
||||
my.updateChatConversation = function (nick, message) { |
||||
var divClassName = ''; |
||||
|
||||
if (nickname == nick) { |
||||
divClassName = "localuser"; |
||||
} |
||||
else { |
||||
divClassName = "remoteuser"; |
||||
|
||||
if (!$('#chatspace').is(":visible")) { |
||||
unreadMessages++; |
||||
Util.playSoundNotification('chatNotification'); |
||||
setVisualNotification(true); |
||||
} |
||||
} |
||||
|
||||
//replace links and smileys
|
||||
message = processReplacements(message); |
||||
|
||||
$('#chatconversation').append('<div class="' + divClassName + '"><b>' |
||||
+ nick + ': </b>' + message + '</div>'); |
||||
$('#chatconversation').animate( |
||||
{ scrollTop: $('#chatconversation')[0].scrollHeight}, 1000); |
||||
}; |
||||
|
||||
/** |
||||
* Opens / closes the chat area. |
||||
*/ |
||||
my.toggleChat = function () { |
||||
var chatspace = $('#chatspace'); |
||||
var videospace = $('#videospace'); |
||||
|
||||
var onShow = function () { |
||||
resizeLarge(); |
||||
$('#chatspace').show("slide", { direction: "right", duration: 500}); |
||||
}; |
||||
var onHide = function () { |
||||
$('#chatspace').hide("slide", { direction: "right", duration: 500}); |
||||
resizeLarge(); |
||||
}; |
||||
|
||||
if (chatspace.is(":visible")) { |
||||
videospace.animate( {right: 0}, |
||||
{queue: false, |
||||
duration: 500, |
||||
progress: onHide}); |
||||
} |
||||
else { |
||||
videospace.animate({right: chatspace.width()}, |
||||
{queue: false, |
||||
duration: 500, |
||||
progress: onShow, |
||||
complete: function() { |
||||
scrollChatToBottom(); |
||||
chatspace.trigger('shown'); |
||||
} |
||||
}); |
||||
} |
||||
|
||||
// Request the focus in the nickname field or the chat input field.
|
||||
if ($('#nickname').css('visibility') == 'visible') |
||||
$('#nickinput').focus(); |
||||
else { |
||||
$('#usermsg').focus(); |
||||
} |
||||
}; |
||||
|
||||
/** |
||||
* Sets the chat conversation mode. |
||||
*/ |
||||
my.setChatConversationMode = function (isConversationMode) { |
||||
if (isConversationMode) { |
||||
$('#nickname').css({visibility:"hidden"}); |
||||
$('#chatconversation').css({visibility:'visible'}); |
||||
$('#usermsg').css({visibility:'visible'}); |
||||
$('#usermsg').focus(); |
||||
} |
||||
}; |
||||
|
||||
/** |
||||
* Resizes the chat area. |
||||
*/ |
||||
my.resizeChat = function () { |
||||
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(); |
||||
}; |
||||
|
||||
/** |
||||
* Resizes the chat conversation. |
||||
*/ |
||||
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)); |
||||
}; |
||||
|
||||
/** |
||||
* Shows/hides a visual notification, indicating that a message has arrived. |
||||
*/ |
||||
function setVisualNotification(show) { |
||||
var unreadMsgElement = document.getElementById('unreadMessages'); |
||||
|
||||
if (unreadMessages) { |
||||
unreadMsgElement.innerHTML = unreadMessages.toString(); |
||||
|
||||
var chatButtonElement |
||||
= document.getElementById('chat').parentNode; |
||||
var leftIndent = (Util.getTextWidth(chatButtonElement) |
||||
- Util.getTextWidth(unreadMsgElement) - 5)/2; |
||||
var topIndent = (Util.getTextHeight(chatButtonElement) |
||||
- Util.getTextHeight(unreadMsgElement))/2 - 2; |
||||
|
||||
unreadMsgElement.setAttribute( |
||||
'style', |
||||
'top:' + Util.toInteger(topIndent) |
||||
+ '; left:' + Util.toInteger(leftIndent) +';'); |
||||
} |
||||
else |
||||
unreadMsgElement.innerHTML = ''; |
||||
|
||||
var glower = $('#chat'); |
||||
|
||||
if (show && !notificationInterval) { |
||||
notificationInterval = window.setInterval(function() { |
||||
glower.toggleClass('active'); |
||||
}, 800); |
||||
} |
||||
else if (!show && notificationInterval) { |
||||
window.clearInterval(notificationInterval); |
||||
notificationInterval = false; |
||||
glower.removeClass('active'); |
||||
} |
||||
} |
||||
|
||||
/** |
||||
* Scrolls chat to the bottom. |
||||
*/ |
||||
function scrollChatToBottom() { |
||||
setTimeout(function() { |
||||
$('#chatconversation').scrollTop( |
||||
$('#chatconversation')[0].scrollHeight); |
||||
}, 5); |
||||
} |
||||
|
||||
return my; |
||||
}(Chat || {})); |
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
@ -0,0 +1,43 @@ |
||||
/** |
||||
* Utility functions. |
||||
*/ |
||||
var Util = (function (my) { |
||||
|
||||
/** |
||||
* Returns the text width for the given element. |
||||
* |
||||
* @param el the element |
||||
*/ |
||||
my.getTextWidth = function(el) { |
||||
return (el.clientWidth + 1); |
||||
}; |
||||
|
||||
/** |
||||
* Returns the text height for the given element. |
||||
* |
||||
* @param el the element |
||||
*/ |
||||
my.getTextHeight = function(el) { |
||||
return (el.clientHeight + 1); |
||||
}; |
||||
|
||||
/** |
||||
* Casts the given number to integer. |
||||
* |
||||
* @param number the number to cast |
||||
*/ |
||||
my.toInteger = function(number) { |
||||
return Math.round(Number(number)); |
||||
}; |
||||
|
||||
/** |
||||
* Plays the sound given by id. |
||||
* |
||||
* @param id the identifier of the audio element. |
||||
*/ |
||||
my.playSoundNotification = function(id) { |
||||
document.getElementById(id).play(); |
||||
}; |
||||
|
||||
return my; |
||||
}(Util || {})); |
||||
Loading…
Reference in new issue