/* global APP, $, config, interfaceConfig */ /* jshint -W101 */ import messageHandler from '../util/MessageHandler'; import UIUtil from '../util/UIUtil'; import AnalyticsAdapter from '../../statistics/AnalyticsAdapter'; import UIEvents from '../../../service/UI/UIEvents'; let roomUrl = null; let recordingToaster = null; let emitter = null; /** * Opens the invite link dialog. */ function openLinkDialog () { let 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'); emitter.emit(UIEvents.AUDIO_MUTED, false); } else { AnalyticsAdapter.sendEvent('toolbar.audio.muted'); emitter.emit(UIEvents.AUDIO_MUTED, true); } }, "toolbar_button_camera": function () { if (APP.conference.videoMuted) { AnalyticsAdapter.sendEvent('toolbar.video.enabled'); emitter.emit(UIEvents.VIDEO_MUTED, false); } else { AnalyticsAdapter.sendEvent('toolbar.video.disabled'); emitter.emit(UIEvents.VIDEO_MUTED, true); } }, "toolbar_button_record": function () { AnalyticsAdapter.sendEvent('toolbar.recording.toggled'); emitter.emit(UIEvents.RECORDING_TOGGLE); }, "toolbar_button_security": function () { emitter.emit(UIEvents.ROOM_LOCK_CLICKED); }, "toolbar_button_link": function () { AnalyticsAdapter.sendEvent('toolbar.invite.clicked'); openLinkDialog(); }, "toolbar_button_chat": function () { AnalyticsAdapter.sendEvent('toolbar.chat.toggled'); emitter.emit(UIEvents.TOGGLE_CHAT); }, "toolbar_button_prezi": function () { AnalyticsAdapter.sendEvent('toolbar.prezi.clicked'); emitter.emit(UIEvents.PREZI_CLICKED); }, "toolbar_button_etherpad": function () { AnalyticsAdapter.sendEvent('toolbar.etherpad.clicked'); emitter.emit(UIEvents.ETHERPAD_CLICKED); }, "toolbar_button_desktopsharing": function () { if (APP.conference.isSharingScreen) { AnalyticsAdapter.sendEvent('toolbar.screen.disabled'); } else { AnalyticsAdapter.sendEvent('toolbar.screen.enabled'); } emitter.emit(UIEvents.TOGGLE_SCREENSHARING); }, "toolbar_button_fullScreen": function() { AnalyticsAdapter.sendEvent('toolbar.fullscreen.enabled'); UIUtil.buttonClick("#toolbar_button_fullScreen", "icon-full-screen icon-exit-full-screen"); emitter.emit(UIEvents.FULLSCREEN_TOGGLE); }, "toolbar_button_sip": function () { AnalyticsAdapter.sendEvent('toolbar.sip.clicked'); showSipNumberInput(); }, "toolbar_button_dialpad": function () { AnalyticsAdapter.sendEvent('toolbar.sip.dialpad.clicked'); dialpadButtonClicked(); }, "toolbar_button_settings": function () { AnalyticsAdapter.sendEvent('toolbar.settings.toggled'); emitter.emit(UIEvents.TOGGLE_SETTINGS); }, "toolbar_button_hangup": function () { AnalyticsAdapter.sendEvent('toolbar.hangup'); emitter.emit(UIEvents.HANGUP); }, "toolbar_button_login": function () { AnalyticsAdapter.sendEvent('toolbar.authenticate.login.clicked'); emitter.emit(UIEvents.AUTH_CLICKED); }, "toolbar_button_logout": function () { AnalyticsAdapter.sendEvent('toolbar.authenticate.logout.clicked'); // Ask for confirmation messageHandler.openTwoButtonDialog( "dialog.logoutTitle", null, "dialog.logoutQuestion", null, false, "dialog.Yes", function (evt, yes) { if (yes) { emitter.emit(UIEvents.LOGOUT); } } ); } }; const defaultToolbarButtons = { 'microphone': '#toolbar_button_mute', 'camera': '#toolbar_button_camera', 'desktop': '#toolbar_button_desktopsharing', 'security': '#toolbar_button_security', 'invite': '#toolbar_button_link', 'chat': '#toolbar_button_chat', 'prezi': '#toolbar_button_prezi', 'etherpad': '#toolbar_button_etherpad', 'fullscreen': '#toolbar_button_fullScreen', 'settings': '#toolbar_button_settings', 'hangup': '#toolbar_button_hangup' }; function dialpadButtonClicked() { //TODO show the dialpad box } function showSipNumberInput () { let defaultNumber = config.defaultSipNumber ? config.defaultSipNumber : ''; let sipMsg = APP.translation.generateTranslationHTML("dialog.sipMsg"); messageHandler.openTwoButtonDialog( null, null, null, `

${sipMsg}

`, false, "dialog.Dial", function (e, v, m, f) { if (v && f.sipNumber) { emitter.emit(UIEvents.SIP_DIAL, f.sipNumber); } }, null, null, ':input:first' ); } const Toolbar = { init (eventEmitter) { emitter = eventEmitter; UIUtil.hideDisabledButtons(defaultToolbarButtons); Object.keys(buttonHandlers).forEach( buttonId => $(`#${buttonId}`).click(buttonHandlers[buttonId]) ); }, /** * Updates the room invite url. */ updateRoomUrl (newRoomUrl) { roomUrl = newRoomUrl; // If the invite dialog has been already opened we update the information. let inviteLink = document.getElementById('inviteLinkRef'); if (inviteLink) { inviteLink.value = roomUrl; inviteLink.select(); $('#inviteLinkRef').parent() .find('button[value=true]').prop('disabled', false); } }, /** * Disables and enables some of the buttons. */ setupButtonsFromConfig () { if (!UIUtil.isButtonEnabled('prezi')) { $("#toolbar_button_prezi").css({display: "none"}); } }, /** * Unlocks the lock button state. */ unlockLockButton () { if ($("#toolbar_button_security").hasClass("icon-security-locked")) UIUtil.buttonClick("#toolbar_button_security", "icon-security icon-security-locked"); }, /** * Updates the lock button state to locked. */ lockLockButton () { if ($("#toolbar_button_security").hasClass("icon-security")) UIUtil.buttonClick("#toolbar_button_security", "icon-security icon-security-locked"); }, /** * Shows or hides authentication button * @param show true to show or false to hide */ showAuthenticateButton (show) { if (UIUtil.isButtonEnabled('authentication') && show) { $('#authentication').css({display: "inline"}); } else { $('#authentication').css({display: "none"}); } }, showEtherpadButton () { if (!$('#toolbar_button_etherpad').is(":visible")) { $('#toolbar_button_etherpad').css({display: 'inline-block'}); } }, // Shows or hides the 'recording' button. showRecordingButton (show) { if (UIUtil.isButtonEnabled('recording') && show) { $('#toolbar_button_record').css({display: "inline-block"}); } else { $('#toolbar_button_record').css({display: "none"}); } }, // checks whether recording is enabled and whether we have params // to start automatically recording checkAutoRecord () { if (UIUtil.isButtonEnabled('recording') && config.autoRecord) { emitter.emit(UIEvents.RECORDING_TOGGLE, UIUtil.escapeHtml(config.autoRecordToken)); } }, // checks whether desktop sharing is enabled and whether // we have params to start automatically sharing checkAutoEnableDesktopSharing () { if (UIUtil.isButtonEnabled('desktop') && config.autoEnableDesktopSharing) { emitter.emit(UIEvents.TOGGLE_SCREENSHARING); } }, // Shows or hides SIP calls button showSipCallButton (show) { if (APP.conference.sipGatewayEnabled() && UIUtil.isButtonEnabled('sip') && show) { $('#toolbar_button_sip').css({display: "inline-block"}); } else { $('#toolbar_button_sip').css({display: "none"}); } }, // Shows or hides the dialpad button showDialPadButton (show) { if (UIUtil.isButtonEnabled('dialpad') && show) { $('#toolbar_button_dialpad').css({display: "inline-block"}); } else { $('#toolbar_button_dialpad').css({display: "none"}); } }, /** * Displays user authenticated identity name(login). * @param authIdentity identity name to be displayed. */ setAuthenticatedIdentity (authIdentity) { if (authIdentity) { let selector = $('#toolbar_auth_identity'); selector.css({display: "list-item"}); selector.text(authIdentity); } else { $('#toolbar_auth_identity').css({display: "none"}); } }, /** * Shows/hides login button. * @param show true to show */ showLoginButton (show) { if (UIUtil.isButtonEnabled('authentication') && show) { $('#toolbar_button_login').css({display: "list-item"}); } else { $('#toolbar_button_login').css({display: "none"}); } }, /** * Shows/hides logout button. * @param show true to show */ showLogoutButton (show) { if (UIUtil.isButtonEnabled('authentication') && show) { $('#toolbar_button_logout').css({display: "list-item"}); } else { $('#toolbar_button_logout').css({display: "none"}); } }, /** * Update the state of the button. The button has blue glow if desktop * streaming is active. */ updateDesktopSharingButtonState () { let button = $("#toolbar_button_desktopsharing"); if (APP.conference.isSharingScreen) { button.addClass("glow"); } else { button.removeClass("glow"); } }, updateRecordingState (state) { setRecordingButtonState(state); }, /** * Marks video icon as muted or not. * @param {boolean} muted if icon should look like muted or not */ markVideoIconAsMuted (muted) { $('#toolbar_button_camera').toggleClass("icon-camera-disabled", muted); }, /** * Marks audio icon as muted or not. * @param {boolean} muted if icon should look like muted or not */ markAudioIconAsMuted (muted) { $('#toolbar_button_mute').toggleClass("icon-microphone", !muted).toggleClass("icon-mic-disabled", muted); } }; export default Toolbar;