From 7cc682d5a4f79349e9e1cd694f1be3ef548fafc1 Mon Sep 17 00:00:00 2001 From: isymchych Date: Thu, 10 Dec 2015 15:30:25 +0200 Subject: [PATCH] move random stuff out of Toolbar --- app.js | 42 +-- modules/UI/UI.js | 89 ++++++- modules/UI/authentication/Authentication.js | 54 +++- modules/UI/toolbars/Toolbar.js | 267 ++++++++------------ service/UI/UIEvents.js | 7 +- 5 files changed, 234 insertions(+), 225 deletions(-) diff --git a/app.js b/app.js index 4465f445e..b219f71e1 100644 --- a/app.js +++ b/app.js @@ -355,7 +355,7 @@ function initConference(localTracks, connection) { ); APP.UI.addListener(UIEvents.USER_INVITED, function (roomUrl) { - inviteParticipants( + APP.UI.inviteParticipants( roomUrl, APP.conference.roomName, roomLocker.password, @@ -479,44 +479,4 @@ $(window).bind('beforeunload', function () { } }); -/** - * Invite participants to conference. - */ -function inviteParticipants(roomUrl, conferenceName, key, nick) { - let keyText = ""; - if (key) { - keyText = APP.translation.translateString( - "email.sharedKey", {sharedKey: key} - ); - } - - let and = APP.translation.translateString("email.and"); - let supportedBrowsers = `Chromium, Google Chrome ${and} Opera`; - - let subject = APP.translation.translateString( - "email.subject", {appName:interfaceConfig.APP_NAME, conferenceName} - ); - - let body = APP.translation.translateString( - "email.body", { - appName:interfaceConfig.APP_NAME, - sharedKeyText: keyText, - roomUrl, - supportedBrowsers - } - ); - - body = body.replace(/\n/g, "%0D%0A"); - - if (nick) { - body += "%0D%0A%0D%0A" + nick; - } - - if (interfaceConfig.INVITATION_POWERED_BY) { - body += "%0D%0A%0D%0A--%0D%0Apowered by jitsi.org"; - } - - window.open(`mailto:?subject=${subject}&body=${body}`, '_blank'); -} - export default APP; diff --git a/modules/UI/UI.js b/modules/UI/UI.js index 4177a8b7d..4af5196c6 100644 --- a/modules/UI/UI.js +++ b/modules/UI/UI.js @@ -95,6 +95,30 @@ function setupToolbars() { BottomToolbar.init(eventEmitter); } +/** + * Toggles the application in and out of full screen mode + * (a.k.a. presentation mode in Chrome). + */ +function toggleFullScreen () { + let fsElement = document.documentElement; + + if (!document.mozFullScreen && !document.webkitIsFullScreen) { + //Enter Full Screen + if (fsElement.mozRequestFullScreen) { + fsElement.mozRequestFullScreen(); + } else { + fsElement.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT); + } + } else { + //Exit Full Screen + if (document.mozCancelFullScreen) { + document.mozCancelFullScreen(); + } else { + document.webkitCancelFullScreen(); + } + } +} + UI.notifyGracefulShudown = function () { messageHandler.openMessageDialog( 'dialog.serviceUnavailable', @@ -179,6 +203,18 @@ function registerListeners() { UI.addListener(UIEvents.ETHERPAD_CLICKED, function () { Etherpad.toggleEtherpad(0); }); + + UI.addListener(UIEvents.FULLSCREEN_TOGGLE, toggleFullScreen); + + UI.addListener(UIEvents.AUTH_CLICKED, function () { + Authentication.authenticate(); + }); + + UI.addListener(UIEvents.TOGGLE_CHAT, UI.toggleChat); + + UI.addListener(UIEvents.TOGGLE_SETTINGS, function () { + PanelToggler.toggleSettingsMenu(); + }); } function bindEvents() { @@ -396,11 +432,7 @@ UI.updateUserRole = function (user) { }; UI.notifyAuthRequired = function (intervalCallback) { - Authentication.openAuthenticationDialog( - APP.conference.roomName, intervalCallback, function () { - Toolbar.authenticateClicked(); - } - ); + Authentication.openAuthenticationDialog(APP.conference.roomName, intervalCallback); }; @@ -413,15 +445,15 @@ UI.getSettings = function () { }; UI.toggleFilmStrip = function () { - return BottomToolbar.toggleFilmStrip(); + BottomToolbar.toggleFilmStrip(); }; UI.toggleChat = function () { - return BottomToolbar.toggleChat(); + BottomToolbar.toggleChat(); }; UI.toggleContactList = function () { - return BottomToolbar.toggleContactList(); + BottomToolbar.toggleContactList(); }; UI.inputDisplayNameHandler = function (value) { @@ -617,4 +649,45 @@ UI.updateDTMFSupport = function (isDTMFSupported) { //Toolbar.showDialPadButton(dtmfSupport); }; +/** + * Invite participants to conference. + */ +UI.inviteParticipants = function (roomUrl, conferenceName, key, nick) { + let keyText = ""; + if (key) { + keyText = APP.translation.translateString( + "email.sharedKey", {sharedKey: key} + ); + } + + let and = APP.translation.translateString("email.and"); + let supportedBrowsers = `Chromium, Google Chrome ${and} Opera`; + + let subject = APP.translation.translateString( + "email.subject", {appName:interfaceConfig.APP_NAME, conferenceName} + ); + + let body = APP.translation.translateString( + "email.body", { + appName:interfaceConfig.APP_NAME, + sharedKeyText: keyText, + roomUrl, + supportedBrowsers + } + ); + + body = body.replace(/\n/g, "%0D%0A"); + + if (nick) { + body += "%0D%0A%0D%0A" + nick; + } + + if (interfaceConfig.INVITATION_POWERED_BY) { + body += "%0D%0A%0D%0A--%0D%0Apowered by jitsi.org"; + } + + window.open(`mailto:?subject=${subject}&body=${body}`, '_blank'); +}; + + module.exports = UI; diff --git a/modules/UI/authentication/Authentication.js b/modules/UI/authentication/Authentication.js index 4531eb56a..a43e2fd8a 100644 --- a/modules/UI/authentication/Authentication.js +++ b/modules/UI/authentication/Authentication.js @@ -1,4 +1,7 @@ /* global $, APP*/ +/* jshint -W101 */ + +import messageHandler from '../util/MessageHandler'; var LoginDialog = require('./LoginDialog'); var Moderator = require('../../xmpp/moderator'); @@ -10,7 +13,37 @@ var authRetryId = null; var authenticationWindow = null; var Authentication = { - openAuthenticationDialog: function (roomName, intervalCallback, callback) { + authenticate () { + Authentication.focusAuthenticationWindow(); + if (!APP.xmpp.isExternalAuthEnabled()) { + Authentication.xmppAuthenticate(); + return; + } + // Get authentication URL + if (!APP.xmpp.isMUCJoined()) { + APP.xmpp.getLoginUrl(APP.conference.roomName, function (url) { + // If conference has not been started yet - redirect to login page + window.location.href = url; + }); + } else { + APP.xmpp.getPopupLoginUrl(APP.conference.roomName, function (url) { + // Otherwise - open popup with authentication URL + var authenticationWindow = Authentication.createAuthenticationWindow( + function () { + // On popup closed - retry room allocation + APP.xmpp.allocateConferenceFocus( + APP.conference.roomName, + function () { console.info("AUTH DONE"); } + ); + }, url); + if (!authenticationWindow) { + messageHandler.openMessageDialog(null, "dialog.popupError"); + } + }); + } + }, + + openAuthenticationDialog (roomName, intervalCallback) { // This is the loop that will wait for the room to be created by // someone else. 'auth_required.moderator' will bring us back here. authRetryId = window.setTimeout(intervalCallback, 5000); @@ -32,7 +65,7 @@ var Authentication = { var buttons = []; buttons.push({title: buttonTxt, value: "authNow"}); - authDialog = APP.UI.messageHandler.openDialog( + authDialog = messageHandler.openDialog( title, msg, true, @@ -44,19 +77,18 @@ var Authentication = { // Open login popup if (submitValue === 'authNow') { - callback(); + Authentication.authenticate(); } } ); }, - closeAuthenticationWindow: function () { + closeAuthenticationWindow () { if (authenticationWindow) { authenticationWindow.close(); authenticationWindow = null; } }, - xmppAuthenticate: function () { - + xmppAuthenticate () { var loginDialog = LoginDialog.show( function (connection, state) { if (!state) { @@ -86,22 +118,22 @@ var Authentication = { } }, true); }, - focusAuthenticationWindow: function () { + focusAuthenticationWindow () { // If auth window exists just bring it to the front if (authenticationWindow) { authenticationWindow.focus(); return; } }, - closeAuthenticationDialog: function () { + closeAuthenticationDialog () { // Close authentication dialog if opened if (authDialog) { authDialog.close(); authDialog = null; } }, - createAuthenticationWindow: function (callback, url) { - authenticationWindow = APP.UI.messageHandler.openCenteredPopup( + createAuthenticationWindow (callback, url) { + authenticationWindow = messageHandler.openCenteredPopup( url, 910, 660, // On closed function () { @@ -112,7 +144,7 @@ var Authentication = { }); return authenticationWindow; }, - stopInterval: function () { + stopInterval () { // Clear retry interval, so that we don't call 'doJoinAfterFocus' twice if (authRetryId) { window.clearTimeout(authRetryId); diff --git a/modules/UI/toolbars/Toolbar.js b/modules/UI/toolbars/Toolbar.js index c1f363349..d21bb305c 100644 --- a/modules/UI/toolbars/Toolbar.js +++ b/modules/UI/toolbars/Toolbar.js @@ -1,9 +1,6 @@ /* global APP, $, config, interfaceConfig */ /* jshint -W101 */ var messageHandler = require("../util/MessageHandler"); -var BottomToolbar = require("./BottomToolbar"); -var PanelToggler = require("../side_pannels/SidePanelToggler"); -var Authentication = require("../authentication/Authentication"); var UIUtil = require("../util/UIUtil"); var AnalyticsAdapter = require("../../statistics/AnalyticsAdapter"); var Feedback = require("../Feedback"); @@ -13,7 +10,86 @@ var roomUrl = null; var recordingToaster = null; var emitter = null; -var buttonHandlers = { + +/** + * Opens the invite link dialog. + */ +function openLinkDialog () { + var inviteAttributes; + + if (roomUrl === null) { + inviteAttributes = 'data-i18n="[value]roomUrlDefaultMsg" value="' + + APP.translation.translateString("roomUrlDefaultMsg") + '"'; + } else { + inviteAttributes = "value=\"" + encodeURI(roomUrl) + "\""; + } + messageHandler.openTwoButtonDialog( + "dialog.shareLink", null, null, + ``, + false, "dialog.Invite", + function (e, v) { + if (v && roomUrl) { + emitter.emit(UIEvents.USER_INVITED, roomUrl); + } + }, + function (event) { + if (roomUrl) { + document.getElementById('inviteLinkRef').select(); + } else { + if (event && event.target) { + $(event.target).find('button[value=true]').prop('disabled', true); + } + } + } + ); +} + +// Sets the state of the recording button +function setRecordingButtonState (recordingState) { + let selector = $('#toolbar_button_record'); + + if (recordingState === 'on') { + selector.removeClass("icon-recEnable"); + selector.addClass("icon-recEnable active"); + + $("#largeVideo").toggleClass("videoMessageFilter", true); + let recordOnKey = "recording.on"; + $('#videoConnectionMessage').attr("data-i18n", recordOnKey); + $('#videoConnectionMessage').text(APP.translation.translateString(recordOnKey)); + + setTimeout(function(){ + $("#largeVideo").toggleClass("videoMessageFilter", false); + $('#videoConnectionMessage').css({display: "none"}); + }, 1500); + + recordingToaster = messageHandler.notify( + null, "recording.toaster", null, + null, null, + {timeOut: 0, closeButton: null, tapToDismiss: false} + ); + } else if (recordingState === 'off') { + selector.removeClass("icon-recEnable active"); + selector.addClass("icon-recEnable"); + + $("#largeVideo").toggleClass("videoMessageFilter", false); + $('#videoConnectionMessage').css({display: "none"}); + + if (recordingToaster) { + messageHandler.remove(recordingToaster); + } + } else if (recordingState === 'pending') { + selector.removeClass("icon-recEnable active"); + selector.addClass("icon-recEnable"); + + $("#largeVideo").toggleClass("videoMessageFilter", true); + let recordPendingKey = "recording.pending"; + $('#videoConnectionMessage').attr("data-i18n", recordPendingKey); + $('#videoConnectionMessage').text(APP.translation.translateString(recordPendingKey)); + $('#videoConnectionMessage').css({display: "block"}); + } +} + +const buttonHandlers = { "toolbar_button_mute": function () { if (APP.conference.audioMuted) { AnalyticsAdapter.sendEvent('toolbar.audio.unmuted'); @@ -34,18 +110,18 @@ var buttonHandlers = { }, "toolbar_button_record": function () { AnalyticsAdapter.sendEvent('toolbar.recording.toggled'); - return toggleRecording(); + toggleRecording(); }, "toolbar_button_security": function () { emitter.emit(UIEvents.ROOM_LOCK_CLICKED); }, "toolbar_button_link": function () { AnalyticsAdapter.sendEvent('toolbar.invite.clicked'); - return Toolbar.openLinkDialog(); + openLinkDialog(); }, "toolbar_button_chat": function () { AnalyticsAdapter.sendEvent('toolbar.chat.toggled'); - return BottomToolbar.toggleChat(); + emitter.emit(UIEvents.TOGGLE_CHAT); }, "toolbar_button_prezi": function () { AnalyticsAdapter.sendEvent('toolbar.prezi.clicked'); @@ -61,32 +137,32 @@ var buttonHandlers = { } else { AnalyticsAdapter.sendEvent('toolbar.screen.enabled'); } - return APP.desktopsharing.toggleScreenSharing(); + APP.desktopsharing.toggleScreenSharing(); }, "toolbar_button_fullScreen": function() { AnalyticsAdapter.sendEvent('toolbar.fullscreen.enabled'); UIUtil.buttonClick("#toolbar_button_fullScreen", "icon-full-screen icon-exit-full-screen"); - return Toolbar.toggleFullScreen(); + emitter.emit(UIEvents.FULLSCREEN_TOGGLE); }, "toolbar_button_sip": function () { AnalyticsAdapter.sendEvent('toolbar.sip.clicked'); - return callSipButtonClicked(); + callSipButtonClicked(); }, "toolbar_button_dialpad": function () { AnalyticsAdapter.sendEvent('toolbar.sip.dialpad.clicked'); - return dialpadButtonClicked(); + dialpadButtonClicked(); }, "toolbar_button_settings": function () { AnalyticsAdapter.sendEvent('toolbar.settings.toggled'); - PanelToggler.toggleSettingsMenu(); + emitter.emit(UIEvents.TOGGLE_SETTINGS); }, "toolbar_button_hangup": function () { AnalyticsAdapter.sendEvent('toolbar.hangup'); - return hangup(); + hangup(); }, "toolbar_button_login": function () { AnalyticsAdapter.sendEvent('toolbar.authenticate.login.clicked'); - Toolbar.authenticateClicked(); + emitter.emit(UIEvents.AUTH_CLICKED); }, "toolbar_button_logout": function () { AnalyticsAdapter.sendEvent('toolbar.authenticate.logout.clicked'); @@ -140,8 +216,7 @@ function hangup() { } }; - if (Feedback.isEnabled()) - { + if (Feedback.isEnabled()) { // If the user has already entered feedback, we'll show the window and // immidiately start the conference dispose timeout. if (Feedback.feedbackScore > 0) { @@ -158,7 +233,7 @@ function hangup() { // If the feedback functionality isn't enabled we show a thank you // dialog. - APP.UI.messageHandler.openMessageDialog(null, null, null, + messageHandler.openMessageDialog(null, null, null, APP.translation.translateString("dialog.thankYou", {appName:interfaceConfig.APP_NAME})); } @@ -177,7 +252,7 @@ function toggleRecording(predefinedToken) { var msg = APP.translation.generateTranslationHTML( "dialog.recordingToken"); var token = APP.translation.translateString("dialog.token"); - APP.UI.messageHandler.openTwoButtonDialog(null, null, null, + messageHandler.openTwoButtonDialog(null, null, null, '

' + msg + '

' + '' + sipMsg + '' + - '', - false, - "dialog.Dial", + let sipMsg = APP.translation.generateTranslationHTML("dialog.sipMsg"); + messageHandler.openTwoButtonDialog( + null, null, null, + `

${sipMsg}

+ `, + false, "dialog.Dial", function (e, v, m, f) { if (v) { var numberInput = f.sipNumber; @@ -228,7 +302,7 @@ function callSipButtonClicked() { ); } -var Toolbar = { +const Toolbar = { init (eventEmitter) { emitter = eventEmitter; UIUtil.hideDisabledButtons(defaultToolbarButtons); @@ -237,37 +311,6 @@ var Toolbar = { $("#" + k).click(buttonHandlers[k]); }, - authenticateClicked () { - Authentication.focusAuthenticationWindow(); - if (!APP.xmpp.isExternalAuthEnabled()) { - Authentication.xmppAuthenticate(); - return; - } - // Get authentication URL - if (!APP.xmpp.isMUCJoined()) { - APP.xmpp.getLoginUrl(APP.conference.roomName, function (url) { - // If conference has not been started yet - redirect to login page - window.location.href = url; - }); - } else { - APP.xmpp.getPopupLoginUrl(APP.conference.roomName, function (url) { - // Otherwise - open popup with authentication URL - var authenticationWindow = Authentication.createAuthenticationWindow( - function () { - // On popup closed - retry room allocation - APP.xmpp.allocateConferenceFocus( - APP.conference.roomName, - function () { console.info("AUTH DONE"); } - ); - }, url); - if (!authenticationWindow) { - messageHandler.openMessageDialog( - null, "dialog.popupError"); - } - }); - } - }, - /** * Updates the room invite url. */ @@ -293,66 +336,6 @@ var Toolbar = { } }, - /** - * Opens the invite link dialog. - */ - openLinkDialog () { - var inviteAttributes; - - if (roomUrl === null) { - inviteAttributes = 'data-i18n="[value]roomUrlDefaultMsg" value="' + - APP.translation.translateString("roomUrlDefaultMsg") + '"'; - } else { - inviteAttributes = "value=\"" + encodeURI(roomUrl) + "\""; - } - messageHandler.openTwoButtonDialog("dialog.shareLink", - null, null, - '', - false, - "dialog.Invite", - function (e, v) { - if (v && roomUrl) { - emitter.emit(UIEvents.USER_INVITED, roomUrl); - } - }, - function (event) { - if (roomUrl) { - document.getElementById('inviteLinkRef').select(); - } else { - if (event && event.target) - $(event.target) - .find('button[value=true]').prop('disabled', true); - } - } - ); - }, - - /** - * Toggles the application in and out of full screen mode - * (a.k.a. presentation mode in Chrome). - */ - toggleFullScreen () { - var fsElement = document.documentElement; - - if (!document.mozFullScreen && !document.webkitIsFullScreen) { - //Enter Full Screen - if (fsElement.mozRequestFullScreen) { - fsElement.mozRequestFullScreen(); - } - else { - fsElement.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT); - } - } else { - //Exit Full Screen - if (document.mozCancelFullScreen) { - document.mozCancelFullScreen(); - } else { - document.webkitCancelFullScreen(); - } - } - }, - /** * Unlocks the lock button state. */ @@ -392,48 +375,6 @@ var Toolbar = { } }, - // Sets the state of the recording button - setRecordingButtonState (recordingState) { - var selector = $('#toolbar_button_record'); - - if (recordingState === 'on') { - selector.removeClass("icon-recEnable"); - selector.addClass("icon-recEnable active"); - - $("#largeVideo").toggleClass("videoMessageFilter", true); - var recordOnKey = "recording.on"; - $('#videoConnectionMessage').attr("data-i18n", recordOnKey); - $('#videoConnectionMessage').text(APP.translation.translateString(recordOnKey)); - - setTimeout(function(){ - $("#largeVideo").toggleClass("videoMessageFilter", false); - $('#videoConnectionMessage').css({display: "none"}); - }, 1500); - - recordingToaster = messageHandler.notify(null, "recording.toaster", null, - null, null, {timeOut: 0, closeButton: null, tapToDismiss: false}); - } else if (recordingState === 'off') { - selector.removeClass("icon-recEnable active"); - selector.addClass("icon-recEnable"); - - $("#largeVideo").toggleClass("videoMessageFilter", false); - $('#videoConnectionMessage').css({display: "none"}); - - if (recordingToaster) - messageHandler.remove(recordingToaster); - - } else if (recordingState === 'pending') { - selector.removeClass("icon-recEnable active"); - selector.addClass("icon-recEnable"); - - $("#largeVideo").toggleClass("videoMessageFilter", true); - var recordPendingKey = "recording.pending"; - $('#videoConnectionMessage').attr("data-i18n", recordPendingKey); - $('#videoConnectionMessage').text(APP.translation.translateString(recordPendingKey)); - $('#videoConnectionMessage').css({display: "block"}); - } - }, - // checks whether recording is enabled and whether we have params // to start automatically recording checkAutoRecord () { diff --git a/service/UI/UIEvents.js b/service/UI/UIEvents.js index 51df35d44..efa806288 100644 --- a/service/UI/UIEvents.js +++ b/service/UI/UIEvents.js @@ -1,4 +1,4 @@ -var UIEvents = { +export default { NICKNAME_CHANGED: "UI.nickname_changed", SELECTED_ENDPOINT: "UI.selected_endpoint", PINNED_ENDPOINT: "UI.pinned_endpoint", @@ -25,10 +25,13 @@ var UIEvents = { ETHERPAD_CLICKED: "UI.etherpad_clicked", ROOM_LOCK_CLICKED: "UI.room_lock_clicked", USER_INVITED: "UI.user_invited", + FULLSCREEN_TOGGLE: "UI.fullscreen_toggle", + AUTH_CLICKED: "UI.auth_clicked", + TOGGLE_CHAT: "UI.toggle_chat", + TOGGLE_SETTINGS: "UI.toggle_settings", /** * Notifies interested parties when the film strip (remote video's panel) * is hidden (toggled) or shown (un-toggled). */ FILM_STRIP_TOGGLED: "UI.filmstrip_toggled" }; -module.exports = UIEvents; \ No newline at end of file