jiti-meet/modules/UI/UI.js

900 lines
29 KiB
JavaScript
Raw Normal View History

/* global Strophe, APP, $, config, interfaceConfig, toastr */
/* jshint -W101 */
2015-01-07 14:54:03 +00:00
var UI = {};
var VideoLayout = require("./videolayout/VideoLayout.js");
var AudioLevels = require("./audio_levels/AudioLevels.js");
var Prezi = require("./prezi/Prezi.js");
var Etherpad = require("./etherpad/Etherpad.js");
var Chat = require("./side_pannels/chat/Chat.js");
var Toolbar = require("./toolbars/Toolbar");
var ToolbarToggler = require("./toolbars/ToolbarToggler");
2015-01-07 14:54:03 +00:00
var BottomToolbar = require("./toolbars/BottomToolbar");
var ContactList = require("./side_pannels/contactlist/ContactList");
var Avatar = require("./avatar/Avatar");
2015-01-22 16:02:37 +00:00
var EventEmitter = require("events");
2015-01-07 14:54:03 +00:00
var SettingsMenu = require("./side_pannels/settings/SettingsMenu");
2015-02-13 09:38:37 +00:00
var Settings = require("./../settings/Settings");
2015-01-07 14:54:03 +00:00
var PanelToggler = require("./side_pannels/SidePanelToggler");
var RoomnameGenerator = require("../util/RoomnameGenerator");
2015-01-07 14:54:03 +00:00
UI.messageHandler = require("./util/MessageHandler");
var messageHandler = UI.messageHandler;
var Authentication = require("./authentication/Authentication");
var UIUtil = require("./util/UIUtil");
2015-01-22 16:02:37 +00:00
var NicknameHandler = require("./util/NicknameHandler");
var JitsiPopover = require("./util/JitsiPopover");
var CQEvents = require("../../service/connectionquality/CQEvents");
var DesktopSharingEventTypes
= require("../../service/desktopsharing/DesktopSharingEventTypes");
var MediaStreamType = require("../../service/RTC/MediaStreamTypes");
var RTCEvents = require("../../service/RTC/RTCEvents");
var RTCBrowserType = require("../RTC/RTCBrowserType");
var StreamEventTypes = require("../../service/RTC/StreamEventTypes");
var XMPPEvents = require("../../service/xmpp/XMPPEvents");
var StatisticsEvents = require("../../service/statistics/Events");
var UIEvents = require("../../service/UI/UIEvents");
var MemberEvents = require("../../service/members/Events");
2015-11-05 17:27:26 +00:00
var Feedback = require("./Feedback");
2015-01-07 14:54:03 +00:00
2015-01-22 16:02:37 +00:00
var eventEmitter = new EventEmitter();
var roomNode = null;
var roomName = null;
2015-01-07 14:54:03 +00:00
function promptDisplayName() {
var message = '<h2 data-i18n="dialog.displayNameRequired">';
message += APP.translation.translateString(
"dialog.displayNameRequired");
message += '</h2>' +
'<input name="displayName" type="text" data-i18n=' +
'"[placeholder]defaultNickname" placeholder="' +
APP.translation.translateString(
"defaultNickname", {name: "Jane Pink"}) +
'" autofocus>';
var buttonTxt
= APP.translation.generateTranslationHTML("dialog.Ok");
var buttons = [];
buttons.push({title: buttonTxt, value: "ok"});
messageHandler.openDialog(null, message,
true,
buttons,
function (e, v, m, f) {
if (v == "ok") {
var displayName = f.displayName;
if (displayName) {
VideoLayout.inputDisplayNameHandler(displayName);
return true;
}
}
e.preventDefault();
},
function () {
var form = $.prompt.getPrompt();
var input = form.find("input[name='displayName']");
2015-07-15 18:31:39 +00:00
input.focus();
var button = form.find("button");
button.attr("disabled", "disabled");
input.keyup(function () {
if(!input.val())
button.attr("disabled", "disabled");
else
button.removeAttr("disabled");
});
}
);
}
function notifyForInitialMute() {
2015-05-19 15:03:01 +00:00
messageHandler.notify(null, "notify.mutedTitle", "connected",
"notify.muted", null, {timeOut: 120000});
}
function setupPrezi() {
$("#reloadPresentationLink").click(function() {
2015-01-07 14:54:03 +00:00
Prezi.reloadPresentation();
});
}
function setupChat() {
2015-01-07 14:54:03 +00:00
Chat.init();
$("#toggle_smileys").click(function() {
Chat.toggleSmileys();
});
}
function setupToolbars() {
Toolbar.init(UI);
2015-01-07 14:54:03 +00:00
Toolbar.setupButtonsFromConfig();
2015-11-13 17:04:49 +00:00
BottomToolbar.init(eventEmitter);
2015-01-07 14:54:03 +00:00
}
function streamHandler(stream, isMuted) {
switch (stream.type) {
case MediaStreamType.AUDIO_TYPE:
VideoLayout.changeLocalAudio(stream, isMuted);
2015-01-13 13:11:05 +00:00
break;
case MediaStreamType.VIDEO_TYPE:
VideoLayout.changeLocalVideo(stream, isMuted);
2015-01-13 13:11:05 +00:00
break;
default:
console.error("Unknown stream type: " + stream.type);
2015-01-13 13:11:05 +00:00
break;
}
}
2015-01-07 14:54:03 +00:00
function onXmppConnectionFailed(stropheErrorMsg) {
var title = APP.translation.generateTranslationHTML(
"dialog.error");
var message;
if (stropheErrorMsg) {
message = APP.translation.generateTranslationHTML(
"dialog.connectErrorWithMsg", {msg: stropheErrorMsg});
} else {
message = APP.translation.generateTranslationHTML(
"dialog.connectError");
}
messageHandler.openDialog(
title, message, true, {}, function (e, v, m, f) { return false; });
}
function onDisposeConference(unload) {
Toolbar.showAuthenticateButton(false);
}
function onDisplayNameChanged(jid, displayName) {
ContactList.onDisplayNameChange(jid, displayName);
SettingsMenu.onDisplayNameChange(jid, displayName);
VideoLayout.onDisplayNameChanged(jid, displayName);
}
2015-01-07 14:54:03 +00:00
function registerListeners() {
APP.RTC.addStreamListener(streamHandler,
StreamEventTypes.EVENT_TYPE_LOCAL_CREATED);
APP.RTC.addStreamListener(streamHandler,
StreamEventTypes.EVENT_TYPE_LOCAL_CHANGED);
APP.RTC.addStreamListener(function (stream) {
2015-01-07 14:54:03 +00:00
VideoLayout.onRemoteStreamAdded(stream);
}, StreamEventTypes.EVENT_TYPE_REMOTE_CREATED);
APP.RTC.addListener(RTCEvents.LASTN_CHANGED, onLastNChanged);
APP.RTC.addListener(RTCEvents.DOMINANTSPEAKER_CHANGED,
function (resourceJid) {
2015-01-27 09:56:22 +00:00
VideoLayout.onDominantSpeakerChanged(resourceJid);
});
APP.RTC.addListener(RTCEvents.LASTN_ENDPOINT_CHANGED,
2015-01-27 09:56:22 +00:00
function (lastNEndpoints, endpointsEnteringLastN, stream) {
VideoLayout.onLastNEndpointsChanged(lastNEndpoints,
endpointsEnteringLastN, stream);
});
APP.RTC.addListener(RTCEvents.AVAILABLE_DEVICES_CHANGED,
function (devices) {
VideoLayout.setDeviceAvailabilityIcons(null, devices);
2015-07-18 04:39:09 +00:00
});
APP.RTC.addListener(RTCEvents.VIDEO_MUTE, UI.setVideoMuteButtonsState);
APP.RTC.addListener(RTCEvents.DATA_CHANNEL_OPEN, function () {
2015-07-18 04:39:09 +00:00
// when the data channel becomes available, tell the bridge about video
// selections so that it can do adaptive simulcast,
// we want the notification to trigger even if userJid is undefined,
// or null.
var userResource = APP.UI.getLargeVideoResource();
eventEmitter.emit(UIEvents.SELECTED_ENDPOINT, userResource);
2015-07-18 04:39:09 +00:00
});
APP.statistics.addListener(StatisticsEvents.AUDIO_LEVEL,
function(jid, audioLevel) {
2015-01-07 14:54:03 +00:00
var resourceJid;
if(jid === APP.statistics.LOCAL_JID) {
2015-01-07 14:54:03 +00:00
resourceJid = AudioLevels.LOCAL_LEVEL;
if(APP.RTC.localAudio.isMuted()) {
2015-01-07 14:54:03 +00:00
audioLevel = 0;
}
} else {
2015-01-07 14:54:03 +00:00
resourceJid = Strophe.getResourceFromJid(jid);
}
AudioLevels.updateAudioLevel(resourceJid, audioLevel,
UI.getLargeVideoResource());
2015-01-07 14:54:03 +00:00
});
APP.desktopsharing.addListener(
DesktopSharingEventTypes.INIT,
ToolbarToggler.showToolbar);
APP.desktopsharing.addListener(
DesktopSharingEventTypes.SWITCHING_DONE,
Toolbar.changeDesktopSharingButtonState);
APP.desktopsharing.addListener(
DesktopSharingEventTypes.FIREFOX_EXTENSION_NEEDED,
function (url) {
APP.UI.messageHandler.openMessageDialog(
"dialog.extensionRequired",
null,
null,
APP.translation.generateTranslationHTML(
"dialog.firefoxExtensionPrompt", {url: url}));
});
APP.connectionquality.addListener(CQEvents.LOCALSTATS_UPDATED,
VideoLayout.updateLocalConnectionStats);
APP.connectionquality.addListener(CQEvents.REMOTESTATS_UPDATED,
VideoLayout.updateConnectionStats);
APP.connectionquality.addListener(CQEvents.STOP,
VideoLayout.onStatsStop);
APP.xmpp.addListener(XMPPEvents.CONNECTION_FAILED, onXmppConnectionFailed);
APP.xmpp.addListener(XMPPEvents.DISPOSE_CONFERENCE, onDisposeConference);
APP.xmpp.addListener(XMPPEvents.GRACEFUL_SHUTDOWN, function () {
messageHandler.openMessageDialog(
'dialog.serviceUnavailable',
'dialog.gracefulShutdown'
);
});
APP.xmpp.addListener(XMPPEvents.RESERVATION_ERROR, function (code, msg) {
var title = APP.translation.generateTranslationHTML(
"dialog.reservationError");
var message = APP.translation.generateTranslationHTML(
"dialog.reservationErrorMsg", {code: code, msg: msg});
messageHandler.openDialog(
title,
message,
true, {},
function (event, value, message, formVals) {
return false;
}
);
});
APP.xmpp.addListener(XMPPEvents.KICKED, function () {
messageHandler.openMessageDialog("dialog.sessTerminated",
"dialog.kickMessage");
});
2015-02-23 15:10:12 +00:00
APP.xmpp.addListener(XMPPEvents.MUC_DESTROYED, function (reason) {
//FIXME: use Session Terminated from translation, but
// 'reason' text comes from XMPP packet and is not translated
var title = APP.translation.generateTranslationHTML("dialog.sessTerminated");
2015-02-23 15:10:12 +00:00
messageHandler.openDialog(
title, reason, true, {},
function (event, value, message, formVals) {
2015-02-23 15:10:12 +00:00
return false;
}
);
});
APP.xmpp.addListener(XMPPEvents.BRIDGE_DOWN, function () {
messageHandler.showError("dialog.error",
"dialog.bridgeUnavailable");
});
APP.xmpp.addListener(XMPPEvents.USER_ID_CHANGED, function (from, id) {
Avatar.setUserAvatar(from, id);
});
APP.xmpp.addListener(XMPPEvents.DISPLAY_NAME_CHANGED, onDisplayNameChanged);
APP.xmpp.addListener(XMPPEvents.MUC_JOINED, onMucJoined);
APP.xmpp.addListener(XMPPEvents.LOCAL_ROLE_CHANGED, onLocalRoleChanged);
APP.xmpp.addListener(XMPPEvents.MUC_MEMBER_JOINED, onMucMemberJoined);
APP.xmpp.addListener(XMPPEvents.MUC_ROLE_CHANGED, onMucRoleChanged);
APP.xmpp.addListener(XMPPEvents.PRESENCE_STATUS, onMucPresenceStatus);
APP.xmpp.addListener(XMPPEvents.SUBJECT_CHANGED, chatSetSubject);
APP.xmpp.addListener(XMPPEvents.MUC_MEMBER_LEFT, onMucMemberLeft);
2015-04-08 08:43:43 +00:00
APP.xmpp.addListener(XMPPEvents.PASSWORD_REQUIRED, onPasswordRequired);
APP.xmpp.addListener(XMPPEvents.ETHERPAD, initEtherpad);
APP.xmpp.addListener(XMPPEvents.AUTHENTICATION_REQUIRED,
onAuthenticationRequired);
APP.xmpp.addListener(XMPPEvents.PARTICIPANT_VIDEO_TYPE_CHANGED,
onPeerVideoTypeChanged);
APP.xmpp.addListener(XMPPEvents.DEVICE_AVAILABLE,
function (resource, devices) {
VideoLayout.setDeviceAvailabilityIcons(resource, devices);
});
APP.xmpp.addListener(XMPPEvents.PARTICIPANT_AUDIO_MUTED,
VideoLayout.onAudioMute);
APP.xmpp.addListener(XMPPEvents.PARTICIPANT_VIDEO_MUTED,
VideoLayout.onVideoMute);
APP.xmpp.addListener(XMPPEvents.AUDIO_MUTED_BY_FOCUS, function (doMuteAudio) {
2015-07-18 04:39:09 +00:00
UI.setAudioMuted(doMuteAudio);
});
APP.members.addListener(MemberEvents.DTMF_SUPPORT_CHANGED,
onDtmfSupportChanged);
APP.xmpp.addListener(XMPPEvents.START_MUTED_SETTING_CHANGED, function (audio, video) {
2015-05-19 15:03:01 +00:00
SettingsMenu.setStartMuted(audio, video);
});
APP.xmpp.addListener(XMPPEvents.START_MUTED_FROM_FOCUS, function (audio, video) {
UI.setInitialMuteFromFocus(audio, video);
});
APP.xmpp.addListener(XMPPEvents.JINGLE_FATAL_ERROR, function (session, error) {
UI.messageHandler.showError("dialog.sorry",
"dialog.internalError");
});
APP.xmpp.addListener(XMPPEvents.PROMPT_FOR_LOGIN, function (callback) {
// FIXME: re-use LoginDialog which supports retries
2015-11-03 19:21:25 +00:00
if (config.token) {
messageHandler.showError("dialog.error", "dialog.tokenAuthFailed");
} else {
UI.showLoginPopup(callback);
}
});
APP.xmpp.addListener(XMPPEvents.FOCUS_DISCONNECTED, function (focusComponent, retrySec) {
UI.messageHandler.notify(
null, "notify.focus",
'disconnected', "notify.focusFail",
{component: focusComponent, ms: retrySec});
});
APP.xmpp.addListener(XMPPEvents.ROOM_JOIN_ERROR, function (pres) {
UI.messageHandler.openReportDialog(null,
"dialog.connectError", pres);
});
APP.xmpp.addListener(XMPPEvents.ROOM_CONNECT_ERROR, function (pres) {
UI.messageHandler.openReportDialog(null,
"dialog.connectError", pres);
});
APP.xmpp.addListener(XMPPEvents.READY_TO_JOIN, function () {
var roomName = UI.generateRoomName();
APP.xmpp.allocateConferenceFocus(roomName, UI.checkForNicknameAndJoin);
});
//NicknameHandler emits this event
UI.addListener(UIEvents.NICKNAME_CHANGED, function (nickname) {
APP.xmpp.addToPresence("displayName", nickname);
});
UI.addListener(UIEvents.LARGEVIDEO_INIT, function () {
AudioLevels.init();
});
2015-08-03 15:58:22 +00:00
2015-11-13 17:04:49 +00:00
UI.addListener(UIEvents.FILM_STRIP_TOGGLED, function (isToggled) {
VideoLayout.onFilmStripToggled(isToggled);
});
if (!interfaceConfig.filmStripOnly) {
APP.xmpp.addListener(XMPPEvents.MESSAGE_RECEIVED, updateChatConversation);
APP.xmpp.addListener(XMPPEvents.CHAT_ERROR_RECEIVED, chatAddError);
// Listens for video interruption events.
APP.xmpp.addListener(XMPPEvents.CONNECTION_INTERRUPTED, VideoLayout.onVideoInterrupted);
// Listens for video restores events.
APP.xmpp.addListener(XMPPEvents.CONNECTION_RESTORED, VideoLayout.onVideoRestored);
}
}
2015-01-27 09:56:22 +00:00
/**
* Mutes/unmutes the local video.
*
* @param mute <tt>true</tt> to mute the local video; otherwise, <tt>false</tt>
* @param options an object which specifies optional arguments such as the
* <tt>boolean</tt> key <tt>byUser</tt> with default value <tt>true</tt> which
* specifies whether the method was initiated in response to a user command (in
* contrast to an automatic decision taken by the application logic)
*/
function setVideoMute(mute, options) {
APP.RTC.setVideoMute(mute,
UI.setVideoMuteButtonsState,
options);
2015-01-07 14:54:03 +00:00
}
function onResize() {
2015-06-23 08:00:46 +00:00
Chat.resizeChat();
VideoLayout.resizeLargeVideoContainer();
}
function bindEvents() {
2015-01-07 14:54:03 +00:00
/**
* Resizes and repositions videos in full screen mode.
*/
$(document).on('webkitfullscreenchange mozfullscreenchange fullscreenchange',
2015-06-23 08:00:46 +00:00
onResize);
2015-01-07 14:54:03 +00:00
2015-06-23 08:00:46 +00:00
$(window).resize(onResize);
2015-01-07 14:54:03 +00:00
}
UI.start = function (init) {
2015-01-07 14:54:03 +00:00
document.title = interfaceConfig.APP_NAME;
var setupWelcomePage = null;
2015-01-07 14:54:03 +00:00
if(config.enableWelcomePage && window.location.pathname == "/" &&
(!window.localStorage.welcomePageDisabled ||
window.localStorage.welcomePageDisabled == "false")) {
2015-01-07 14:54:03 +00:00
$("#videoconference_page").hide();
if (!setupWelcomePage)
setupWelcomePage = require("./welcome_page/WelcomePage");
2015-01-07 14:54:03 +00:00
setupWelcomePage();
return;
}
$("#welcome_page").hide();
// Set the defaults for prompt dialogs.
$.prompt.setDefaults({persistent: false});
2015-01-07 14:54:03 +00:00
registerListeners();
VideoLayout.init(eventEmitter);
2015-01-22 16:02:37 +00:00
NicknameHandler.init(eventEmitter);
2015-01-07 14:54:03 +00:00
bindEvents();
setupPrezi();
if (!interfaceConfig.filmStripOnly) {
$("#videospace").mousemove(function () {
return ToolbarToggler.showToolbar();
});
setupToolbars();
setupChat();
// Display notice message at the top of the toolbar
if (config.noticeMessage) {
$('#noticeText').text(config.noticeMessage);
$('#notice').css({display: 'block'});
}
$("#downloadlog").click(function (event) {
dump(event.target);
});
Feedback.init();
}
else
{
$("#header").css("display", "none");
$("#bottomToolbar").css("display", "none");
$("#downloadlog").css("display", "none");
$("#remoteVideos").css("padding", "0px 0px 18px 0px");
$("#remoteVideos").css("right", "0px");
messageHandler.disableNotifications();
$('body').popover("disable");
// $("[data-toggle=popover]").popover("disable");
JitsiPopover.enabled = false;
}
2015-01-22 16:02:37 +00:00
2015-01-07 14:54:03 +00:00
document.title = interfaceConfig.APP_NAME;
if(config.requireDisplayName) {
var currentSettings = Settings.getSettings();
if (!currentSettings.displayName) {
promptDisplayName();
}
2015-01-07 14:54:03 +00:00
}
init();
if (!interfaceConfig.filmStripOnly) {
toastr.options = {
"closeButton": true,
"debug": false,
"positionClass": "notification-bottom-right",
"onclick": null,
"showDuration": "300",
"hideDuration": "1000",
"timeOut": "2000",
"extendedTimeOut": "1000",
"showEasing": "swing",
"hideEasing": "linear",
"showMethod": "fadeIn",
"hideMethod": "fadeOut",
"reposition": function () {
if (PanelToggler.isVisible()) {
$("#toast-container").addClass("notification-bottom-right-center");
} else {
$("#toast-container").removeClass("notification-bottom-right-center");
}
},
"newestOnTop": false
};
2015-01-07 14:54:03 +00:00
SettingsMenu.init();
}
2015-01-07 14:54:03 +00:00
};
function chatAddError(errorMessage, originalText) {
2015-01-07 14:54:03 +00:00
return Chat.chatAddError(errorMessage, originalText);
}
2015-01-07 14:54:03 +00:00
function chatSetSubject(text) {
2015-01-07 14:54:03 +00:00
return Chat.chatSetSubject(text);
}
2015-01-07 14:54:03 +00:00
function updateChatConversation(from, displayName, message, myjid, stamp) {
return Chat.updateChatConversation(from, displayName, message, myjid, stamp);
}
2015-01-07 14:54:03 +00:00
function onMucJoined(jid, info) {
2015-01-07 14:54:03 +00:00
Toolbar.updateRoomUrl(window.location.href);
var meHTML = APP.translation.generateTranslationHTML("me");
2015-03-09 15:50:13 +00:00
$("#localNick").html(Strophe.getResourceFromJid(jid) + " (" + meHTML + ")");
2015-01-07 14:54:03 +00:00
var settings = Settings.getSettings();
// Make sure we configure our avatar id, before creating avatar for us
Avatar.setUserAvatar(jid, settings.email || settings.uid);
2015-01-07 14:54:03 +00:00
// Add myself to the contact list.
ContactList.addContact(jid);
2015-01-07 14:54:03 +00:00
// Once we've joined the muc show the toolbar
ToolbarToggler.showToolbar();
var displayName =
config.displayJids ? Strophe.getResourceFromJid(jid) : info.displayName;
2015-01-07 14:54:03 +00:00
if (displayName)
2015-03-09 15:50:13 +00:00
onDisplayNameChanged('localVideoContainer', displayName);
VideoLayout.mucJoined();
Toolbar.checkAutoEnableDesktopSharing();
}
2015-01-07 14:54:03 +00:00
function initEtherpad(name) {
2015-01-07 14:54:03 +00:00
Etherpad.init(name);
}
2015-01-07 14:54:03 +00:00
function onMucMemberLeft(jid) {
2015-01-07 14:54:03 +00:00
console.log('left.muc', jid);
var displayName = $('#participant_' + Strophe.getResourceFromJid(jid) +
'>.displayname').html();
messageHandler.notify(displayName,'notify.somebody',
2015-01-07 14:54:03 +00:00
'disconnected',
'notify.disconnected');
if (!config.startAudioMuted ||
config.startAudioMuted > APP.members.size()) {
UIUtil.playSoundNotification('userLeft');
}
2015-01-07 14:54:03 +00:00
ContactList.removeContact(jid);
2015-01-07 14:54:03 +00:00
VideoLayout.participantLeft(jid);
}
2015-01-07 14:54:03 +00:00
function onLocalRoleChanged(jid, info, pres, isModerator) {
2015-01-07 14:54:03 +00:00
console.info("My role changed, new role: " + info.role);
onModeratorStatusChanged(isModerator);
2015-01-07 14:54:03 +00:00
VideoLayout.showModeratorIndicator();
2015-05-19 15:03:01 +00:00
SettingsMenu.onRoleChanged();
2015-01-07 14:54:03 +00:00
if (isModerator) {
Authentication.closeAuthenticationWindow();
messageHandler.notify(null, "notify.me",
'connected', "notify.moderator");
Toolbar.checkAutoRecord();
2015-01-07 14:54:03 +00:00
}
}
2015-01-07 14:54:03 +00:00
function onModeratorStatusChanged(isModerator) {
2015-01-07 14:54:03 +00:00
Toolbar.showSipCallButton(isModerator);
Toolbar.showRecordingButton(
isModerator); //&&
// FIXME:
// Recording visible if
// there are at least 2(+ 1 focus) participants
//Object.keys(connection.emuc.members).length >= 3);
}
2015-01-07 14:54:03 +00:00
2015-04-08 08:43:43 +00:00
function onPasswordRequired(callback) {
2015-01-07 14:54:03 +00:00
// password is required
Toolbar.lockLockButton();
var message = '<h2 data-i18n="dialog.passwordRequired">';
message += APP.translation.translateString(
"dialog.passwordRequired");
message += '</h2>' +
'<input name="lockKey" type="text" data-i18n=' +
'"[placeholder]dialog.password" placeholder="' +
APP.translation.translateString("dialog.password") +
'" autofocus>';
2015-01-07 14:54:03 +00:00
messageHandler.openTwoButtonDialog(null, null, null, message,
2015-01-07 14:54:03 +00:00
true,
"dialog.Ok",
2015-01-07 14:54:03 +00:00
function (e, v, m, f) {},
null,
2015-01-07 14:54:03 +00:00
function (e, v, m, f) {
if (v) {
var lockKey = f.lockKey;
if (lockKey) {
Toolbar.setSharedKey(lockKey);
callback(lockKey);
2015-01-07 14:54:03 +00:00
}
}
},
':input:first'
2015-01-07 14:54:03 +00:00
);
}
/**
* The dialpad button is shown iff there is at least one member that supports
* DTMF (e.g. jigasi).
*/
function onDtmfSupportChanged(dtmfSupport) {
//TODO: enable when the UI is ready
//Toolbar.showDialPadButton(dtmfSupport);
}
function onMucMemberJoined(jid, id, displayName) {
messageHandler.notify(displayName,'notify.somebody',
2015-01-07 14:54:03 +00:00
'connected',
'notify.connected');
2015-01-07 14:54:03 +00:00
if (!config.startAudioMuted ||
config.startAudioMuted > APP.members.size())
UIUtil.playSoundNotification('userJoined');
// Configure avatar
Avatar.setUserAvatar(jid, id);
2015-01-07 14:54:03 +00:00
// Add Peer's container
VideoLayout.ensurePeerContainerExists(jid);
}
2015-01-07 14:54:03 +00:00
2015-06-23 08:00:46 +00:00
function onMucPresenceStatus(jid, info) {
VideoLayout.setPresenceStatus(Strophe.getResourceFromJid(jid), info.status);
}
2015-01-07 14:54:03 +00:00
function onPeerVideoTypeChanged(resourceJid, newVideoType) {
VideoLayout.onVideoTypeChanged(resourceJid, newVideoType);
}
function onMucRoleChanged(role, displayName) {
2015-01-07 14:54:03 +00:00
VideoLayout.showModeratorIndicator();
if (role === 'moderator') {
var messageKey, messageOptions = {};
if (!displayName) {
messageKey = "notify.grantedToUnknown";
}
else {
messageKey = "notify.grantedTo";
messageOptions = {to: displayName};
2015-01-07 14:54:03 +00:00
}
messageHandler.notify(
displayName,'notify.somebody',
'connected', messageKey,
messageOptions);
2015-01-07 14:54:03 +00:00
}
}
2015-01-27 09:56:22 +00:00
function onAuthenticationRequired(intervalCallback) {
Authentication.openAuthenticationDialog(
roomName, intervalCallback, function () {
Toolbar.authenticateClicked();
});
}
2015-01-27 09:56:22 +00:00
function onLastNChanged(oldValue, newValue) {
if (config.muteLocalVideoIfNotInLastN) {
setVideoMute(!newValue, { 'byUser': false });
}
}
UI.toggleSmileys = function () {
Chat.toggleSmileys();
};
2015-01-27 09:56:22 +00:00
UI.getSettings = function () {
return Settings.getSettings();
};
UI.toggleFilmStrip = function () {
return BottomToolbar.toggleFilmStrip();
};
UI.toggleChat = function () {
return BottomToolbar.toggleChat();
};
UI.toggleContactList = function () {
return BottomToolbar.toggleContactList();
};
UI.inputDisplayNameHandler = function (value) {
VideoLayout.inputDisplayNameHandler(value);
2015-01-07 14:54:03 +00:00
};
UI.getLargeVideoResource = function () {
return VideoLayout.getLargeVideoResource();
2015-01-07 14:54:03 +00:00
};
UI.getRoomNode = function () {
if (roomNode)
return roomNode;
2015-01-07 14:54:03 +00:00
var path = window.location.pathname;
// determinde the room node from the url
// TODO: just the roomnode or the whole bare jid?
if (config.getroomnode && typeof config.getroomnode === 'function') {
// custom function might be responsible for doing the pushstate
roomNode = config.getroomnode(path);
2015-01-07 14:54:03 +00:00
} else {
/* fall back to default strategy
* this is making assumptions about how the URL->room mapping happens.
* It currently assumes deployment at root, with a rewrite like the
* following one (for nginx):
location ~ ^/([a-zA-Z0-9]+)$ {
rewrite ^/(.*)$ / break;
}
*/
if (path.length > 1) {
roomNode = path.substr(1).toLowerCase();
2015-01-07 14:54:03 +00:00
} else {
var word = RoomnameGenerator.generateRoomWithoutSeparator();
roomNode = word.toLowerCase();
2015-01-07 14:54:03 +00:00
window.history.pushState('VideoChat',
'Room: ' + word, window.location.pathname + word);
2015-01-07 14:54:03 +00:00
}
}
return roomNode;
};
2015-01-07 14:54:03 +00:00
UI.generateRoomName = function () {
if (roomName)
return roomName;
var roomNode = UI.getRoomNode();
roomName = roomNode + '@' + config.hosts.muc;
return roomName;
2015-01-07 14:54:03 +00:00
};
UI.connectionIndicatorShowMore = function(jid) {
2015-06-23 08:00:46 +00:00
return VideoLayout.showMore(jid);
};
2015-01-07 14:54:03 +00:00
UI.showLoginPopup = function(callback) {
console.log('password is required');
var message = '<h2 data-i18n="dialog.passwordRequired">';
message += APP.translation.translateString(
"dialog.passwordRequired");
message += '</h2>' +
'<input name="username" type="text" ' +
'placeholder="user@domain.net" autofocus>' +
'<input name="password" ' +
'type="password" data-i18n="[placeholder]dialog.userPassword"' +
' placeholder="user password">';
UI.messageHandler.openTwoButtonDialog(null, null, null, message,
true,
"dialog.Ok",
function (e, v, m, f) {
if (v) {
2015-09-11 03:26:29 +00:00
if (f.username && f.password) {
callback(f.username, f.password);
}
}
},
null, null, ':input:first'
);
};
UI.checkForNicknameAndJoin = function () {
Authentication.closeAuthenticationDialog();
Authentication.stopInterval();
var nick = null;
if (config.useNicks) {
nick = window.prompt('Your nickname (optional)');
}
APP.xmpp.joinRoom(roomName, config.useNicks, nick);
};
function dump(elem, filename) {
elem = elem.parentNode;
elem.download = filename || 'meetlog.json';
elem.href = 'data:application/json;charset=utf-8,\n';
var data = APP.xmpp.getJingleLog();
var metadata = {};
metadata.time = new Date();
metadata.url = window.location.href;
metadata.ua = navigator.userAgent;
var log = APP.xmpp.getXmppLog();
if (log) {
metadata.xmpp = log;
}
data.metadata = metadata;
elem.href += encodeURIComponent(JSON.stringify(data, null, ' '));
return false;
}
2015-01-07 14:54:03 +00:00
UI.getRoomName = function () {
return roomName;
};
2015-05-19 15:03:01 +00:00
UI.setInitialMuteFromFocus = function (muteAudio, muteVideo) {
if (muteAudio || muteVideo)
notifyForInitialMute();
if (muteAudio)
UI.setAudioMuted(true);
if (muteVideo)
UI.setVideoMute(true);
};
2015-05-19 15:03:01 +00:00
/**
* Mutes/unmutes the local video.
*/
UI.toggleVideo = function () {
setVideoMute(!APP.RTC.localVideo.isMuted());
};
/**
* Mutes / unmutes audio for the local participant.
*/
UI.toggleAudio = function() {
UI.setAudioMuted(!APP.RTC.localAudio.isMuted());
};
/**
* Sets muted audio state for the local participant.
*/
UI.setAudioMuted = function (mute, earlyMute) {
var audioMute = null;
if (earlyMute)
audioMute = function (mute, cb) {
return APP.xmpp.sendAudioInfoPresence(mute, cb);
};
else
audioMute = function (mute, cb) {
return APP.xmpp.setAudioMute(mute, cb);
};
if (!audioMute(mute, function () {
VideoLayout.showLocalAudioIndicator(mute);
UIUtil.buttonClick("#toolbar_button_mute", "icon-microphone icon-mic-disabled");
})) {
// We still click the button.
UIUtil.buttonClick("#toolbar_button_mute", "icon-microphone icon-mic-disabled");
return;
}
};
2015-01-22 16:02:37 +00:00
UI.addListener = function (type, listener) {
eventEmitter.on(type, listener);
};
2015-01-22 16:02:37 +00:00
2015-01-22 16:26:05 +00:00
UI.clickOnVideo = function (videoNumber) {
var remoteVideos = $(".videocontainer:not(#mixedstream)");
if (remoteVideos.length > videoNumber) {
remoteVideos[videoNumber].click();
}
};
2015-01-22 16:26:05 +00:00
2015-02-09 08:12:55 +00:00
//Used by torture
UI.showToolbar = function () {
return ToolbarToggler.showToolbar();
};
2015-02-09 08:12:55 +00:00
//Used by torture
UI.dockToolbar = function (isDock) {
return ToolbarToggler.dockToolbar(isDock);
};
2015-02-09 08:12:55 +00:00
UI.setVideoMuteButtonsState = function (mute) {
var video = $('#toolbar_button_camera');
var communicativeClass = "icon-camera";
var muteClass = "icon-camera icon-camera-disabled";
if (mute) {
video.removeClass(communicativeClass);
video.addClass(muteClass);
} else {
video.removeClass(muteClass);
video.addClass(communicativeClass);
}
};
UI.userAvatarChanged = function (resourceJid, thumbUrl, contactListUrl) {
VideoLayout.userAvatarChanged(resourceJid, thumbUrl);
ContactList.userAvatarChanged(resourceJid, contactListUrl);
if(resourceJid === APP.xmpp.myResource())
SettingsMenu.changeAvatar(thumbUrl);
};
UI.setVideoMute = setVideoMute;
2015-01-07 14:54:03 +00:00
module.exports = UI;