jitsi_corner8/modules/UI/UI.js

/* global APP, JitsiMeetJS, $, config, interfaceConfig, toastr */

const logger = require("jitsi-meet-logger").getLogger(__filename);

var UI = {};

import Chat from "./side_pannels/chat/Chat";
import SidePanels from "./side_pannels/SidePanels";
import Toolbar from "./toolbars/Toolbar";
import ToolbarToggler from "./toolbars/ToolbarToggler";
import Avatar from "./avatar/Avatar";
import SideContainerToggler from "./side_pannels/SideContainerToggler";
import UIUtil from "./util/UIUtil";
import UIEvents from "../../service/UI/UIEvents";
import EtherpadManager from './etherpad/Etherpad';
import SharedVideoManager from './shared_video/SharedVideo';
import Recording from "./recording/Recording";

import VideoLayout from "./videolayout/VideoLayout";
import FilmStrip from "./videolayout/FilmStrip";
import SettingsMenu from "./side_pannels/settings/SettingsMenu";
import Profile from "./side_pannels/profile/Profile";
import Settings from "./../settings/Settings";
import RingOverlay from "./ring_overlay/RingOverlay";
import UIErrors from './UIErrors';
import { debounce } from "../util/helpers";

var EventEmitter = require("events");
UI.messageHandler = require("./util/MessageHandler");
var messageHandler = UI.messageHandler;
var JitsiPopover = require("./util/JitsiPopover");
import Feedback from "./feedback/Feedback";
import FollowMe from "../FollowMe";

var eventEmitter = new EventEmitter();
UI.eventEmitter = eventEmitter;

/**
 * Whether an overlay is visible or not.
 *
 * FIXME: This is temporary solution. Don't use this variable!
 * Should be removed when all the code is move to react.
 *
 * @type {boolean}
 * @public
 */
UI.overlayVisible = false;

let etherpadManager;
let sharedVideoManager;

let followMeHandler;

let deviceErrorDialog;

const TrackErrors = JitsiMeetJS.errors.track;

const JITSI_TRACK_ERROR_TO_MESSAGE_KEY_MAP = {
    microphone: {},
    camera: {}
};

JITSI_TRACK_ERROR_TO_MESSAGE_KEY_MAP.camera[TrackErrors.UNSUPPORTED_RESOLUTION]
    = "dialog.cameraUnsupportedResolutionError";
JITSI_TRACK_ERROR_TO_MESSAGE_KEY_MAP.camera[TrackErrors.GENERAL]
    = "dialog.cameraUnknownError";
JITSI_TRACK_ERROR_TO_MESSAGE_KEY_MAP.camera[TrackErrors.PERMISSION_DENIED]
    = "dialog.cameraPermissionDeniedError";
JITSI_TRACK_ERROR_TO_MESSAGE_KEY_MAP.camera[TrackErrors.NOT_FOUND]
    = "dialog.cameraNotFoundError";
JITSI_TRACK_ERROR_TO_MESSAGE_KEY_MAP.camera[TrackErrors.CONSTRAINT_FAILED]
    = "dialog.cameraConstraintFailedError";
JITSI_TRACK_ERROR_TO_MESSAGE_KEY_MAP.camera[TrackErrors.NO_DATA_FROM_SOURCE]
    = "dialog.cameraNotSendingData";
JITSI_TRACK_ERROR_TO_MESSAGE_KEY_MAP.microphone[TrackErrors.GENERAL]
    = "dialog.micUnknownError";
JITSI_TRACK_ERROR_TO_MESSAGE_KEY_MAP.microphone[TrackErrors.PERMISSION_DENIED]
    = "dialog.micPermissionDeniedError";
JITSI_TRACK_ERROR_TO_MESSAGE_KEY_MAP.microphone[TrackErrors.NOT_FOUND]
    = "dialog.micNotFoundError";
JITSI_TRACK_ERROR_TO_MESSAGE_KEY_MAP.microphone[TrackErrors.CONSTRAINT_FAILED]
    = "dialog.micConstraintFailedError";
JITSI_TRACK_ERROR_TO_MESSAGE_KEY_MAP.microphone[TrackErrors.NO_DATA_FROM_SOURCE]
    = "dialog.micNotSendingData";

/**
 * Initialize toolbars with side panels.
 */
function setupToolbars() {
    // Initialize toolbar buttons
    Toolbar.init(eventEmitter);
    // Initialize side panels
    SidePanels.init(eventEmitter);
}

/**
 * Toggles the application in and out of full screen mode
 * (a.k.a. presentation mode in Chrome).
 */
UI.toggleFullScreen = function() {
    (UIUtil.isFullScreen())
        ? UIUtil.exitFullScreen()
        : UIUtil.enterFullScreen();
};

/**
 * Notify user that server has shut down.
 */
UI.notifyGracefulShutdown = function () {
    messageHandler.openMessageDialog(
        'dialog.serviceUnavailable',
        'dialog.gracefulShutdown'
    );
};

/**
 * Notify user that reservation error happened.
 */
UI.notifyReservationError = function (code, msg) {
    var message = APP.translation.generateTranslationHTML(
        "dialog.reservationErrorMsg", {code: code, msg: msg});
    messageHandler.openDialog(
        "dialog.reservationError", message, true, {}, () => false);
};

/**
 * Notify user that he has been kicked from the server.
 */
UI.notifyKicked = function () {
    messageHandler.openMessageDialog(
            "dialog.sessTerminated",
            "dialog.kickMessage");
};

/**
 * Notify user that conference was destroyed.
 * @param reason {string} the reason text
 */
UI.notifyConferenceDestroyed = function (reason) {
    //FIXME: use Session Terminated from translation, but
    // 'reason' text comes from XMPP packet and is not translated
    messageHandler.openDialog(
        "dialog.sessTerminated", reason, true, {}, () => false);
};

/**
 * Show chat error.
 * @param err the Error
 * @param msg
 */
UI.showChatError = function (err, msg) {
    if (interfaceConfig.filmStripOnly) {
        return;
    }
    Chat.chatAddError(err, msg);
};

/**
 * Change nickname for the user.
 * @param {string} id user id
 * @param {string} displayName new nickname
 */
UI.changeDisplayName = function (id, displayName) {
    if (UI.ContactList)
        UI.ContactList.onDisplayNameChange(id, displayName);
    VideoLayout.onDisplayNameChanged(id, displayName);

    if (APP.conference.isLocalId(id) || id === 'localVideoContainer') {
        Profile.changeDisplayName(displayName);
        Chat.setChatConversationMode(!!displayName);
    }
};

/**
 * Shows/hides the indication about local connection being interrupted.
 *
 * @param {boolean} isInterrupted <tt>true</tt> if local connection is
 * currently in the interrupted state or <tt>false</tt> if the connection
 * is fine.
 */
UI.showLocalConnectionInterrupted = function (isInterrupted) {
    VideoLayout.showLocalConnectionInterrupted(isInterrupted);
};

/**
 * Sets the "raised hand" status for a participant.
 */
UI.setRaisedHandStatus = (participant, raisedHandStatus) => {
    VideoLayout.setRaisedHandStatus(participant.getId(), raisedHandStatus);
    if (raisedHandStatus) {
        messageHandler.notify(participant.getDisplayName(), 'notify.somebody',
                          'connected', 'notify.raisedHand');
    }
};

/**
 * Sets the local "raised hand" status.
 */
UI.setLocalRaisedHandStatus = (raisedHandStatus) => {
    VideoLayout.setRaisedHandStatus(
            APP.conference.getMyUserId(),
            raisedHandStatus);
};

/**
 * Initialize conference UI.
 */
UI.initConference = function () {
    let id = APP.conference.getMyUserId();
    // Add myself to the contact list.
    if (UI.ContactList)
        UI.ContactList.addContact(id, true);

    // Update default button states before showing the toolbar
    // if local role changes buttons state will be again updated.
    UI.updateLocalRole(APP.conference.isModerator);

    UI.showToolbar();

    let displayName = config.displayJids ? id : Settings.getDisplayName();

    if (displayName) {
        UI.changeDisplayName('localVideoContainer', displayName);
    }

    // Make sure we configure our avatar id, before creating avatar for us
    let email = Settings.getEmail();
    if (email) {
        UI.setUserEmail(id, email);
    } else {
        UI.setUserAvatarID(id, Settings.getAvatarId());
    }

    Toolbar.checkAutoEnableDesktopSharing();

    if(!interfaceConfig.filmStripOnly) {
        Feedback.init(eventEmitter);
    }

    // FollowMe attempts to copy certain aspects of the moderator's UI into the
    // other participants' UI. Consequently, it needs (1) read and write access
    // to the UI (depending on the moderator role of the local participant) and
    // (2) APP.conference as means of communication between the participants.
    followMeHandler = new FollowMe(APP.conference, UI);

    UIUtil.activateTooltips();
};

UI.mucJoined = function () {
    VideoLayout.mucJoined();
};

/***
 * Handler for toggling filmstrip
 */
UI.handleToggleFilmStrip = () => UI.toggleFilmStrip();

/**
 * Sets tooltip defaults.
 *
 * @private
 */
function _setTooltipDefaults() {
    $.fn.tooltip.defaults = {
        opacity: 1, //defaults to 1
        offset: 1,
        delayIn: 0, //defaults to 500
        hoverable: true,
        hideOnClick: true,
        aria: true
    };
}

/**
 * Returns the shared document manager object.
 * @return {EtherpadManager} the shared document manager object
 */
UI.getSharedVideoManager = function () {
    return sharedVideoManager;
};

/**
 * Starts the UI module and initializes all related components.
 *
 * @returns {boolean} true if the UI is ready and the conference should be
 * esablished, false - otherwise (for example in the case of welcome page)
 */
UI.start = function () {
    document.title = interfaceConfig.APP_NAME;

    // Set the defaults for prompt dialogs.
    $.prompt.setDefaults({persistent: false});

    // Set the defaults for tooltips.
    _setTooltipDefaults();

    ToolbarToggler.init();
    SideContainerToggler.init(eventEmitter);
    FilmStrip.init(eventEmitter);

    VideoLayout.init(eventEmitter);
    if (!interfaceConfig.filmStripOnly) {
        VideoLayout.initLargeVideo();
    }
    VideoLayout.resizeVideoArea(true, true);

    sharedVideoManager = new SharedVideoManager(eventEmitter);
    if (!interfaceConfig.filmStripOnly) {
        let debouncedShowToolbar = debounce(() => {
            UI.showToolbar();
        }, 100, { leading: true, trailing: false });
        $("#videoconference_page").mousemove(debouncedShowToolbar);
        setupToolbars();

        // Initialise the recording module.
        if (config.enableRecording)
            Recording.init(eventEmitter, config.recordingType);
    } else {
        $("body").addClass("filmstrip-only");
        UIUtil.setVisible('mainToolbarContainer', false);
        FilmStrip.setupFilmStripOnly();
        messageHandler.enableNotifications(false);
        JitsiPopover.enabled = false;
    }

    document.title = interfaceConfig.APP_NAME;

    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",
            "newestOnTop": false,
            // this is the default toastr close button html, just adds tabIndex
            "closeHtml": '<button type="button" tabIndex="-1">&times;</button>'
        };

    }

    if(APP.tokenData.callee) {
        UI.showRingOverlay();
    }
};

/**
 * Setup some UI event listeners.
 */
UI.registerListeners
    = () => UIListeners.forEach((value, key) => UI.addListener(key, value));

/**
 * Unregister some UI event listeners.
 */
UI.unregisterListeners
    = () => UIListeners.forEach((value, key) => UI.removeListener(key, value));

/**
 * Setup some DOM event listeners.
 */
UI.bindEvents = () => {
    function onResize() {
        SideContainerToggler.resize();
        VideoLayout.resizeVideoArea();
    }

    // Resize and reposition videos in full screen mode.
    $(document).on(
            'webkitfullscreenchange mozfullscreenchange fullscreenchange',
            () => {
                eventEmitter.emit(
                        UIEvents.FULLSCREEN_TOGGLED,
                        UIUtil.isFullScreen());
                onResize();
            });

    $(window).resize(onResize);
};

/**
 * Unbind some DOM event listeners.
 */
UI.unbindEvents = () => {
    $(document).off(
            'webkitfullscreenchange mozfullscreenchange fullscreenchange');

    $(window).off('resize');
};

/**
 * Show local stream on UI.
 * @param {JitsiTrack} track stream to show
 */
UI.addLocalStream = track => {
    switch (track.getType()) {
    case 'audio':
        VideoLayout.changeLocalAudio(track);
        break;
    case 'video':
        VideoLayout.changeLocalVideo(track);
        break;
    default:
        logger.error("Unknown stream type: " + track.getType());
        break;
    }
};


/**
 * Show remote stream on UI.
 * @param {JitsiTrack} track stream to show
 */
UI.addRemoteStream = track => VideoLayout.onRemoteStreamAdded(track);

/**
 * Removed remote stream from UI.
 * @param {JitsiTrack} track stream to remove
 */
UI.removeRemoteStream = track => VideoLayout.onRemoteStreamRemoved(track);

/**
 * Update chat subject.
 * @param {string} subject new chat subject
 */
UI.setSubject = subject => Chat.setSubject(subject);

/**
 * Setup and show Etherpad.
 * @param {string} name etherpad id
 */
UI.initEtherpad = name => {
    if (etherpadManager || !config.etherpad_base || !name) {
        return;
    }
    logger.log('Etherpad is enabled');
    etherpadManager
        = new EtherpadManager(config.etherpad_base, name, eventEmitter);
    Toolbar.showEtherpadButton();
};

/**
 * Returns the shared document manager object.
 * @return {EtherpadManager} the shared document manager object
 */
UI.getSharedDocumentManager = () => etherpadManager;

/**
 * Show user on UI.
 * @param {JitsiParticipant} user
 */
UI.addUser = function (user) {
    var id = user.getId();
    var displayName = user.getDisplayName();
    UI.hideRingOverLay();
    if (UI.ContactList)
        UI.ContactList.addContact(id);

    messageHandler.notify(
        displayName,'notify.somebody', 'connected', 'notify.connected'
    );

    if (!config.startAudioMuted ||
        config.startAudioMuted > APP.conference.membersCount)
        UIUtil.playSoundNotification('userJoined');

    // Add Peer's container
    VideoLayout.addParticipantContainer(user);

    // Configure avatar
    UI.setUserEmail(id);

    // set initial display name
    if(displayName)
        UI.changeDisplayName(id, displayName);
};

/**
 * Remove user from UI.
 * @param {string} id   user id
 * @param {string} displayName user nickname
 */
UI.removeUser = function (id, displayName) {
    if (UI.ContactList)
        UI.ContactList.removeContact(id);

    messageHandler.notify(
        displayName,'notify.somebody', 'disconnected', 'notify.disconnected'
    );

    if (!config.startAudioMuted
        || config.startAudioMuted > APP.conference.membersCount) {
        UIUtil.playSoundNotification('userLeft');
    }

    VideoLayout.removeParticipantContainer(id);
};

/**
 * Update videotype for specified user.
 * @param {string} id user id
 * @param {string} newVideoType new videotype
 */
UI.onPeerVideoTypeChanged
    = (id, newVideoType) => VideoLayout.onVideoTypeChanged(id, newVideoType);

/**
 * Update local user role and show notification if user is moderator.
 * @param {boolean} isModerator if local user is moderator or not
 */
UI.updateLocalRole = isModerator => {
    VideoLayout.showModeratorIndicator();

    Toolbar.showSipCallButton(isModerator);
    Toolbar.showSharedVideoButton(isModerator);
    Recording.showRecordingButton(isModerator);
    SettingsMenu.showStartMutedOptions(isModerator);
    SettingsMenu.showFollowMeOptions(isModerator);

    if (isModerator) {
        if (!interfaceConfig.DISABLE_FOCUS_INDICATOR)
            messageHandler
                .notify(null, "notify.me", 'connected', "notify.moderator");

        Recording.checkAutoRecord();
    }
};

/**
 * Check the role for the user and reflect it in the UI, moderator ui indication
 * and notifies user who is the moderator
 * @param user to check for moderator
 */
UI.updateUserRole = user => {
    VideoLayout.showModeratorIndicator();

    // We don't need to show moderator notifications when the focus (moderator)
    // indicator is disabled.
    if (!user.isModerator() || interfaceConfig.DISABLE_FOCUS_INDICATOR) {
        return;
    }

    var displayName = user.getDisplayName();
    if (displayName) {
        messageHandler.notify(
            displayName, 'notify.somebody',
            'connected', 'notify.grantedTo', {
                to: UIUtil.escapeHtml(displayName)
            }
        );
    } else {
        messageHandler.notify(
            '', 'notify.somebody',
            'connected', 'notify.grantedToUnknown');
    }
};

/**
 * Toggles smileys in the chat.
 */
UI.toggleSmileys = () => Chat.toggleSmileys();

/**
 * Toggles film strip.
 */
UI.toggleFilmStrip = function () {
    var self = FilmStrip;
    self.toggleFilmStrip.apply(self, arguments);
    VideoLayout.resizeVideoArea(true, false);
};

/**
 * Indicates if the film strip is currently visible or not.
 * @returns {true} if the film strip is currently visible, otherwise
 */
UI.isFilmStripVisible = () => FilmStrip.isFilmStripVisible();

/**
 * Toggles chat panel.
 */
UI.toggleChat = () => UI.toggleSidePanel("chat_container");

/**
 * Toggles contact list panel.
 */
UI.toggleContactList = () => UI.toggleSidePanel("contacts_container");

/**
 * Toggles the given side panel.
 *
 * @param {String} sidePanelId the identifier of the side panel to toggle
 */
UI.toggleSidePanel = sidePanelId => SideContainerToggler.toggle(sidePanelId);


/**
 * Handle new user display name.
 */
UI.inputDisplayNameHandler = function (newDisplayName) {
    eventEmitter.emit(UIEvents.NICKNAME_CHANGED, newDisplayName);
};

/**
 * Show custom popup/tooltip for a specified button.
 * @param popupSelectorID the selector id of the popup to show
 * @param show true or false/show or hide the popup
 * @param timeout the time to show the popup
 */
UI.showCustomToolbarPopup = function (popupSelectorID, show, timeout) {
    eventEmitter.emit(UIEvents.SHOW_CUSTOM_TOOLBAR_BUTTON_POPUP,
        popupSelectorID, show, timeout);
};

/**
 * Return the type of the remote video.
 * @param jid the jid for the remote video
 * @returns the video type video or screen.
 */
UI.getRemoteVideoType = function (jid) {
    return VideoLayout.getRemoteVideoType(jid);
};

UI.connectionIndicatorShowMore = function(id) {
    VideoLayout.showMore(id);
    return false;
};

// FIXME check if someone user this
UI.showLoginPopup = function(callback) {
    logger.log('password is required');

    let message = (
        `<input name="username" type="text"
                placeholder="user@domain.net"
                class="input-control" autofocus>
         <input name="password" type="password"
                data-i18n="[placeholder]dialog.userPassword"
                class="input-control"
                placeholder="user password">`
    );

    let submitFunction = (e, v, m, f) => {
        if (v) {
            if (f.username && f.password) {
                callback(f.username, f.password);
            }
        }
    };

    messageHandler.openTwoButtonDialog({
        titleKey : "dialog.passwordRequired",
        msgString: message,
        leftButtonKey: 'dialog.Ok',
        submitFunction,
        focus: ':input:first'
    });
};

UI.askForNickname = function () {
    return window.prompt('Your nickname (optional)');
};

/**
 * Sets muted audio state for participant
 */
UI.setAudioMuted = function (id, muted) {
    VideoLayout.onAudioMute(id, muted);
    if (APP.conference.isLocalId(id)) {
        Toolbar.toggleAudioIcon(muted);
    }
};

/**
 * Sets muted video state for participant
 */
UI.setVideoMuted = function (id, muted) {
    VideoLayout.onVideoMute(id, muted);
    if (APP.conference.isLocalId(id)) {
        Toolbar.toggleVideoIcon(muted);
    }
};

/**
 * Adds a listener that would be notified on the given type of event.
 *
 * @param type the type of the event we're listening for
 * @param listener a function that would be called when notified
 */
UI.addListener = function (type, listener) {
    eventEmitter.on(type, listener);
};

/**
 * Removes the given listener for the given type of event.
 *
 * @param type the type of the event we're listening for
 * @param listener the listener we want to remove
 */
UI.removeListener = function (type, listener) {
    eventEmitter.removeListener(type, listener);
};

/**
 * Emits the event of given type by specifying the parameters in options.
 *
 * @param type the type of the event we're emitting
 * @param options the parameters for the event
 */
UI.emitEvent = function (type, options) {
    eventEmitter.emit(type, options);
};

UI.clickOnVideo = function (videoNumber) {
    let videos = $("#remoteVideos .videocontainer:not(#mixedstream)");
    let videosLength = videos.length;

    if(videosLength <= videoNumber) {
        return;
    }
    let videoIndex = videoNumber === 0 ? 0 : videosLength - videoNumber;
    videos[videoIndex].click();
};

//Used by torture
UI.showToolbar = function (timeout) {
    return ToolbarToggler.showToolbar(timeout);
};

//Used by torture
UI.dockToolbar = function (isDock) {
    ToolbarToggler.dockToolbar(isDock);
};

/**
 * Updates the avatar for participant.
 * @param {string} id user id
 * @param {string} avatarUrl the URL for the avatar
 */
function changeAvatar(id, avatarUrl) {
    VideoLayout.changeUserAvatar(id, avatarUrl);
    if (UI.ContactList)
        UI.ContactList.changeUserAvatar(id, avatarUrl);
    if (APP.conference.isLocalId(id)) {
        Profile.changeAvatar(avatarUrl);
    }
}

/**
 * Update user email.
 * @param {string} id user id
 * @param {string} email user email
 */
UI.setUserEmail = function (id, email) {
    // update avatar
    Avatar.setUserEmail(id, email);

    changeAvatar(id, Avatar.getAvatarUrl(id));
};

/**
 * Update user avtar id.
 * @param {string} id user id
 * @param {string} avatarId user's avatar id
 */
UI.setUserAvatarID = function (id, avatarId) {
    // update avatar
    Avatar.setUserAvatarID(id, avatarId);

    changeAvatar(id, Avatar.getAvatarUrl(id));
};

/**
 * Update user avatar URL.
 * @param {string} id user id
 * @param {string} url user avatar url
 */
UI.setUserAvatarUrl = function (id, url) {
    // update avatar
    Avatar.setUserAvatarUrl(id, url);

    changeAvatar(id, Avatar.getAvatarUrl(id));
};

/**
 * Notify user that connection failed.
 * @param {string} stropheErrorMsg raw Strophe error message
 */
UI.notifyConnectionFailed = function (stropheErrorMsg) {
    var message;
    if (stropheErrorMsg) {
        message = APP.translation.generateTranslationHTML(
            "dialog.connectErrorWithMsg", {msg: stropheErrorMsg});
    } else {
        message = APP.translation.generateTranslationHTML(
            "dialog.connectError");
    }

    messageHandler.openDialog("dialog.error", message, true, {}, () => false);
};


/**
 * Notify user that maximum users limit has been reached.
 */
UI.notifyMaxUsersLimitReached = function () {
    var message = APP.translation.generateTranslationHTML(
            "dialog.maxUsersLimitReached");

    messageHandler.openDialog("dialog.error", message, true, {}, () => false);
};

/**
 * Notify user that he was automatically muted when joned the conference.
 */
UI.notifyInitiallyMuted = function () {
    messageHandler.notify(
        null,
        "notify.mutedTitle",
        "connected",
        "notify.muted",
        null,
        { timeOut: 120000 });
};

/**
 * Mark user as dominant speaker.
 * @param {string} id user id
 */
UI.markDominantSpeaker = function (id) {
    VideoLayout.onDominantSpeakerChanged(id);
};

UI.handleLastNEndpoints = function (ids, enteringIds) {
    VideoLayout.onLastNEndpointsChanged(ids, enteringIds);
};

/**
 * Will handle notification about participant's connectivity status change.
 *
 * @param {string} id the id of remote participant(MUC jid)
 * @param {boolean} isActive true if the connection is ok or false if the user
 * is having connectivity issues.
 */
UI.participantConnectionStatusChanged = function (id, isActive) {
    VideoLayout.onParticipantConnectionStatusChanged(id, isActive);
};

/**
 * Prompt user for nickname.
 */
UI.promptDisplayName = () => {
    const labelKey = 'dialog.enterDisplayName';
    const message = (
        `<div class="form-control">
            <label data-i18n="${labelKey}" class="form-control__label"></label>
            <input name="displayName" type="text"
               data-i18n="[placeholder]defaultNickname"
               class="input-control" autofocus>
         </div>`
    );

    // Don't use a translation string, because we're too early in the call and
    // the translation may not be initialised.
    const buttons = { Ok: true };

    const dialog = messageHandler.openDialog(
        'dialog.displayNameRequired',
        message,
        true,
        buttons,
        (e, v, m, f) => {
            e.preventDefault();
            if (v) {
                const displayName = f.displayName;

                if (displayName) {
                    UI.inputDisplayNameHandler(displayName);
                    dialog.close();
                    return;
                }
            }
        },
        () => {
            const form  = $.prompt.getPrompt();
            const input = form.find("input[name='displayName']");
            const button = form.find("button");

            input.focus();
            button.attr("disabled", "disabled");
            input.keyup(() => {
                if (input.val()) {
                    button.removeAttr("disabled");
                } else {
                    button.attr("disabled", "disabled");
                }
            });
        }
    );
};

/**
 * Update audio level visualization for specified user.
 * @param {string} id user id
 * @param {number} lvl audio level
 */
UI.setAudioLevel = function (id, lvl) {
    VideoLayout.setAudioLevel(id, lvl);
};

/**
 * Update state of desktop sharing buttons.
 */
UI.updateDesktopSharingButtons = function () {
    Toolbar.updateDesktopSharingButtonState();
};

/**
 * Hide connection quality statistics from UI.
 */
UI.hideStats = function () {
    VideoLayout.hideStats();
};

/**
 * Update local connection quality statistics.
 * @param {number} percent
 * @param {object} stats
 */
UI.updateLocalStats = function (percent, stats) {
    VideoLayout.updateLocalConnectionStats(percent, stats);
};

/**
 * Update connection quality statistics for remote user.
 * @param {string} id user id
 * @param {number} percent
 * @param {object} stats
 */
UI.updateRemoteStats = function (id, percent, stats) {
    VideoLayout.updateConnectionStats(id, percent, stats);
};

/**
 * Mark video as interrupted or not.
 * @param {boolean} interrupted if video is interrupted
 */
UI.markVideoInterrupted = function (interrupted) {
    if (interrupted) {
        VideoLayout.onVideoInterrupted();
    } else {
        VideoLayout.onVideoRestored();
    }
};

/**
 * Add chat message.
 * @param {string} from user id
 * @param {string} displayName user nickname
 * @param {string} message message text
 * @param {number} stamp timestamp when message was created
 */
UI.addMessage = function (from, displayName, message, stamp) {
    Chat.updateChatConversation(from, displayName, message, stamp);
};

// eslint-disable-next-line no-unused-vars
UI.updateDTMFSupport = function (isDTMFSupported) {
    //TODO: enable when the UI is ready
    //Toolbar.showDialPadButton(isDTMFSupported);
};

/**
 * Show user feedback dialog if its required and enabled after pressing the
 * hangup button.
 * @returns {Promise} Resolved with value - false if the dialog is enabled and
 * resolved with true if the dialog is disabled or the feedback was already
 * submitted. Rejected if another dialog is already displayed. This values are
 * used to display or not display the thank you dialog from
 * conference.maybeRedirectToWelcomePage method.
 */
UI.requestFeedbackOnHangup = function () {
    if (Feedback.isVisible())
        return Promise.reject(UIErrors.FEEDBACK_REQUEST_IN_PROGRESS);
    // Feedback has been submitted already.
    else if (Feedback.isEnabled() && Feedback.isSubmitted()) {
        return Promise.resolve({
            thankYouDialogVisible : true,
            feedbackSubmitted: true
        });
    }
    else
        return new Promise(function (resolve) {
            if (Feedback.isEnabled()) {
                Feedback.openFeedbackWindow(
                    (options) => {
                        options.thankYouDialogVisible = false;
                        resolve(options);
                    });
            } else {
                // If the feedback functionality isn't enabled we show a thank
                // you dialog. Signaling it (true), so the caller
                // of requestFeedback can act on it
                resolve(
                    {thankYouDialogVisible : true, feedbackSubmitted: false});
            }
        });
};

UI.updateRecordingState = function (state) {
    Recording.updateRecordingState(state);
};

UI.notifyTokenAuthFailed = function () {
    messageHandler.showError(   "dialog.tokenAuthFailedTitle",
                                "dialog.tokenAuthFailed");
};

UI.notifyInternalError = function () {
    messageHandler.showError(   "dialog.internalErrorTitle",
                                "dialog.internalError");
};

UI.notifyFocusDisconnected = function (focus, retrySec) {
    messageHandler.notify(
        null, "notify.focus",
        'disconnected', "notify.focusFail",
        {component: focus, ms: retrySec}
    );
};

/**
 * Updates auth info on the UI.
 * @param {boolean} isAuthEnabled if authentication is enabled
 * @param {string} [login] current login
 */
UI.updateAuthInfo = function (isAuthEnabled, login) {
    let showAuth = isAuthEnabled && UIUtil.isAuthenticationEnabled();
    let loggedIn = !!login;

    Profile.showAuthenticationButtons(showAuth);

    if (showAuth) {
        Profile.setAuthenticatedIdentity(login);

        Profile.showLoginButton(!loggedIn);
        Profile.showLogoutButton(loggedIn);
    }
};

UI.onStartMutedChanged = function (startAudioMuted, startVideoMuted) {
    SettingsMenu.updateStartMutedBox(startAudioMuted, startVideoMuted);
};

/**
 * Notifies interested listeners that the raise hand property has changed.
 *
 * @param {boolean} isRaisedHand indicates the current state of the
 * "raised hand"
 */
UI.onLocalRaiseHandChanged = function (isRaisedHand) {
    eventEmitter.emit(UIEvents.LOCAL_RAISE_HAND_CHANGED, isRaisedHand);
};

/**
 * Update list of available physical devices.
 * @param {object[]} devices new list of available devices
 */
UI.onAvailableDevicesChanged = function (devices) {
    SettingsMenu.changeDevicesList(devices);
};

/**
 * Sets microphone's <select> element to select microphone ID from settings.
 */
UI.setSelectedMicFromSettings = function () {
    SettingsMenu.setSelectedMicFromSettings();
};

/**
 * Sets camera's <select> element to select camera ID from settings.
 */
UI.setSelectedCameraFromSettings = function () {
    SettingsMenu.setSelectedCameraFromSettings();
};

/**
 * Sets audio outputs's <select> element to select audio output ID from
 * settings.
 */
UI.setSelectedAudioOutputFromSettings = function () {
    SettingsMenu.setSelectedAudioOutputFromSettings();
};

/**
 * Returns the id of the current video shown on large.
 * Currently used by tests (torture).
 */
UI.getLargeVideoID = function () {
    return VideoLayout.getLargeVideoID();
};

/**
 * Returns the current video shown on large.
 * Currently used by tests (torture).
 */
UI.getLargeVideo = function () {
    return VideoLayout.getLargeVideo();
};

/**
 * Shows dialog with a link to FF extension.
 */
UI.showExtensionRequiredDialog = function (url) {
    messageHandler.openMessageDialog(
        "dialog.extensionRequired",
        "[html]dialog.firefoxExtensionPrompt",
        {url: url});
};

/**
 * Shows "Please go to chrome webstore to install the desktop sharing extension"
 * 2 button dialog with buttons - cancel and go to web store.
 * @param url {string} the url of the extension.
 */
UI.showExtensionExternalInstallationDialog = function (url) {
    let submitFunction = function(e,v){
        if (v) {
            e.preventDefault();
            eventEmitter.emit(UIEvents.OPEN_EXTENSION_STORE, url);
        }
    };

    let closeFunction = function () {
        eventEmitter.emit(UIEvents.EXTERNAL_INSTALLATION_CANCELED);
    };

    messageHandler.openTwoButtonDialog({
        titleKey: 'dialog.externalInstallationTitle',
        msgKey: 'dialog.externalInstallationMsg',
        leftButtonKey: 'dialog.goToStore',
        submitFunction,
        loadedFunction: $.noop,
        closeFunction
    });
};


/**
 * Shows dialog with combined information about camera and microphone errors.
 * @param {JitsiTrackError} micError
 * @param {JitsiTrackError} cameraError
 */
UI.showDeviceErrorDialog = function (micError, cameraError) {
    let dontShowAgain = {
        id: "doNotShowWarningAgain",
        localStorageKey: "doNotShowErrorAgain",
        textKey: "dialog.doNotShowWarningAgain"
    };
    let isMicJitsiTrackErrorAndHasName = micError && micError.name &&
        micError instanceof JitsiMeetJS.errorTypes.JitsiTrackError;
    let isCameraJitsiTrackErrorAndHasName = cameraError && cameraError.name &&
        cameraError instanceof JitsiMeetJS.errorTypes.JitsiTrackError;
    let showDoNotShowWarning = false;

    if (micError && cameraError && isMicJitsiTrackErrorAndHasName &&
        isCameraJitsiTrackErrorAndHasName) {
        showDoNotShowWarning =  true;
    } else if (micError && isMicJitsiTrackErrorAndHasName && !cameraError) {
        showDoNotShowWarning =  true;
    } else if (cameraError && isCameraJitsiTrackErrorAndHasName && !micError) {
        showDoNotShowWarning =  true;
    }

    if (micError) {
        dontShowAgain.localStorageKey += "-mic-" + micError.name;
    }

    if (cameraError) {
        dontShowAgain.localStorageKey += "-camera-" + cameraError.name;
    }

    let cameraJitsiTrackErrorMsg = cameraError
        ? JITSI_TRACK_ERROR_TO_MESSAGE_KEY_MAP.camera[cameraError.name]
        : undefined;
    let micJitsiTrackErrorMsg = micError
        ? JITSI_TRACK_ERROR_TO_MESSAGE_KEY_MAP.microphone[micError.name]
        : undefined;
    let cameraErrorMsg = cameraError
        ? cameraJitsiTrackErrorMsg ||
            JITSI_TRACK_ERROR_TO_MESSAGE_KEY_MAP.camera[TrackErrors.GENERAL]
        : "";
    let micErrorMsg = micError
        ? micJitsiTrackErrorMsg ||
            JITSI_TRACK_ERROR_TO_MESSAGE_KEY_MAP.microphone[TrackErrors.GENERAL]
        : "";
    let additionalCameraErrorMsg = !cameraJitsiTrackErrorMsg && cameraError &&
        cameraError.message
            ? `<div>${cameraError.message}</div>`
            : ``;
    let additionalMicErrorMsg = !micJitsiTrackErrorMsg && micError &&
        micError.message
            ? `<div>${micError.message}</div>`
            : ``;
    let message = '';

    if (micError) {
        message = `
            ${message}
            <h3 data-i18n='dialog.micErrorPresent'></h3>
            <h4 data-i18n='${micErrorMsg}'></h4>
            ${additionalMicErrorMsg}`;
    }

    if (cameraError) {
        message = `
            ${message}
            <h3 data-i18n='dialog.cameraErrorPresent'></h3>
            <h4 data-i18n='${cameraErrorMsg}'></h4>
            ${additionalCameraErrorMsg}`;
    }

    // To make sure we don't have multiple error dialogs open at the same time,
    // we will just close the previous one if we are going to show a new one.
    deviceErrorDialog && deviceErrorDialog.close();

    deviceErrorDialog = messageHandler.openDialog(
        getTitleKey(),
        message,
        false,
        {Ok: true},
        function () {},
        null,
        function () {
            // Reset dialog reference to null to avoid memory leaks when
            // user closed the dialog manually.
            deviceErrorDialog = null;
        },
        showDoNotShowWarning ? dontShowAgain : undefined
    );

    function getTitleKey() {
        let title = "dialog.error";

        if (micError && micError.name === TrackErrors.PERMISSION_DENIED) {
            if (!cameraError
                    || cameraError.name === TrackErrors.PERMISSION_DENIED) {
                title = "dialog.permissionDenied";
            }
        } else if (cameraError
                && cameraError.name === TrackErrors.PERMISSION_DENIED) {
            title = "dialog.permissionDenied";
        }

        return title;
    }
};

/**
 * Shows error dialog that informs the user that no data is received from the
 * device.
 */
UI.showTrackNotWorkingDialog = function (stream) {
    messageHandler.openMessageDialog(
        "dialog.error",
        stream.isAudioTrack()? "dialog.micNotSendingData" :
            "dialog.cameraNotSendingData");
};

UI.updateDevicesAvailability = function (id, devices) {
    VideoLayout.setDeviceAvailabilityIcons(id, devices);
};

/**
 * Show shared video.
 * @param {string} id the id of the sender of the command
 * @param {string} url video url
 * @param {string} attributes
*/
UI.onSharedVideoStart = function (id, url, attributes) {
    if (sharedVideoManager)
        sharedVideoManager.onSharedVideoStart(id, url, attributes);
};

/**
 * Update shared video.
 * @param {string} id the id of the sender of the command
 * @param {string} url video url
 * @param {string} attributes
 */
UI.onSharedVideoUpdate = function (id, url, attributes) {
    if (sharedVideoManager)
        sharedVideoManager.onSharedVideoUpdate(id, url, attributes);
};

/**
 * Stop showing shared video.
 * @param {string} id the id of the sender of the command
 * @param {string} attributes
 */
UI.onSharedVideoStop = function (id, attributes) {
    if (sharedVideoManager)
        sharedVideoManager.onSharedVideoStop(id, attributes);
};

/**
 * Enables / disables camera toolbar button.
 *
 * @param {boolean} enabled indicates if the camera button should be enabled
 * or disabled
 */
UI.setCameraButtonEnabled = enabled => Toolbar.setVideoIconEnabled(enabled);

/**
 * Enables / disables microphone toolbar button.
 *
 * @param {boolean} enabled indicates if the microphone button should be
 * enabled or disabled
 */
UI.setMicrophoneButtonEnabled = enabled => Toolbar.setAudioIconEnabled(enabled);

UI.showRingOverlay = function () {
    RingOverlay.show(APP.tokenData.callee, interfaceConfig.DISABLE_RINGING);
    FilmStrip.toggleFilmStrip(false, false);
};

UI.hideRingOverLay = function () {
    if (!RingOverlay.hide())
        return;
    FilmStrip.toggleFilmStrip(true, false);
};

/**
 * Indicates if any the "top" overlays are currently visible. The check includes
 * the call overlay, suspended overlay, GUM permissions overlay
 * and a page reload overlay.
 *
 * @returns {*|boolean} {true} if the overlay is visible, {false} otherwise
 */
UI.isOverlayVisible = function () {
    return RingOverlay.isVisible() || this.overlayVisible;
};

/**
 * Indicates if the ring overlay is currently visible.
 *
 * @returns {*|boolean} {true} if the ring overlay is visible, {false} otherwise
 */
UI.isRingOverlayVisible = () => RingOverlay.isVisible();

/**
 * Handles user's features changes.
 */
UI.onUserFeaturesChanged = user => VideoLayout.onUserFeaturesChanged(user);

const UIListeners = new Map([
    [
        UIEvents.ETHERPAD_CLICKED,
        () => etherpadManager && etherpadManager.toggleEtherpad()
    ], [
        UIEvents.SHARED_VIDEO_CLICKED,
        () => sharedVideoManager && sharedVideoManager.toggleSharedVideo()
    ], [
        UIEvents.TOGGLE_FULLSCREEN,
        UI.toggleFullScreen
    ], [
        UIEvents.TOGGLE_CHAT,
        UI.toggleChat
    ], [
        UIEvents.TOGGLE_SETTINGS,
        () => UI.toggleSidePanel("settings_container")
    ], [
        UIEvents.TOGGLE_CONTACT_LIST,
        UI.toggleContactList
    ], [
        UIEvents.TOGGLE_PROFILE,
        () => APP.tokenData.isGuest && UI.toggleSidePanel("profile_container")
    ], [
        UIEvents.TOGGLE_FILM_STRIP,
        UI.handleToggleFilmStrip
    ], [
        UIEvents.FOLLOW_ME_ENABLED,
        enabled => (followMeHandler && followMeHandler.enableFollowMe(enabled))
    ]
]);

module.exports = UI;