-
' + '
';
return message;
@@ -252,10 +252,10 @@ var Feedback = {
{
$('#stars >a >i').each(function(index) {
if (index <= starCount) {
- $(this).removeClass("fa-star-o");
+ $(this).removeClass("icon-star");
}
else
- $(this).addClass("fa-star-o");
+ $(this).addClass("icon-star");
});
},
/**
@@ -280,7 +280,7 @@ var Feedback = {
unhoverStars: function (starCount)
{
$('#stars >a >i').each(function(index) {
- if (index <= starCount && $(this).hasClass("fa-star-o"))
+ if (index <= starCount && $(this).hasClass("icon-star"))
$(this).removeClass("starHover");
});
}
diff --git a/modules/UI/UI.js b/modules/UI/UI.js
index d001722ce..722304fcd 100644
--- a/modules/UI/UI.js
+++ b/modules/UI/UI.js
@@ -5,10 +5,9 @@ var UI = {};
import Chat from "./side_pannels/chat/Chat";
import Toolbar from "./toolbars/Toolbar";
import ToolbarToggler from "./toolbars/ToolbarToggler";
-import BottomToolbar from "./toolbars/BottomToolbar";
import ContactList from "./side_pannels/contactlist/ContactList";
import Avatar from "./avatar/Avatar";
-import PanelToggler from "./side_pannels/SidePanelToggler";
+import SideContainerToggler from "./side_pannels/SideContainerToggler";
import UIUtil from "./util/UIUtil";
import UIEvents from "../../service/UI/UIEvents";
import CQEvents from '../../service/connectionquality/CQEvents';
@@ -20,6 +19,7 @@ import GumPermissionsOverlay from './gum_overlay/UserMediaPermissionsGuidanceOve
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 { reload } from '../util/helpers';
import RingOverlay from "./ring_overlay/RingOverlay";
@@ -134,7 +134,6 @@ function setupChat() {
*/
function setupToolbars() {
Toolbar.init(eventEmitter);
- BottomToolbar.setupListeners(eventEmitter);
}
/**
@@ -142,7 +141,7 @@ function setupToolbars() {
* (a.k.a. presentation mode in Chrome).
* @see https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API
*/
-function toggleFullScreen () {
+UI.toggleFullScreen = function() {
// alternative standard method
let isNotFullScreen = !document.fullscreenElement &&
!document.mozFullScreenElement && // current working methods
@@ -171,7 +170,7 @@ function toggleFullScreen () {
document.webkitExitFullscreen();
}
}
-}
+};
/**
* Notify user that server has shut down.
@@ -253,7 +252,7 @@ UI.changeDisplayName = function (id, displayName) {
VideoLayout.onDisplayNameChanged(id, displayName);
if (APP.conference.isLocalId(id) || id === 'localVideoContainer') {
- SettingsMenu.changeDisplayName(displayName);
+ Profile.changeDisplayName(displayName);
Chat.setChatConversationMode(!!displayName);
}
};
@@ -299,7 +298,7 @@ UI.initConference = function () {
//if local role changes buttons state will be again updated
UI.updateLocalRole(false);
- ToolbarToggler.showToolbar();
+ UI.showToolbar();
let displayName = config.displayJids ? id : Settings.getDisplayName();
@@ -337,7 +336,7 @@ UI.mucJoined = function () {
*/
UI.handleToggleFilmStrip = () => {
UI.toggleFilmStrip();
- VideoLayout.resizeVideoArea(PanelToggler.isVisible(), true, false);
+ VideoLayout.resizeVideoArea(true, false);
};
/**
@@ -357,16 +356,20 @@ function registerListeners() {
}
});
- UI.addListener(UIEvents.FULLSCREEN_TOGGLE, toggleFullScreen);
+ UI.addListener(UIEvents.FULLSCREEN_TOGGLE, UI.toggleFullScreen);
UI.addListener(UIEvents.TOGGLE_CHAT, UI.toggleChat);
UI.addListener(UIEvents.TOGGLE_SETTINGS, function () {
- PanelToggler.toggleSettingsMenu();
+ UI.toggleSidePanel("settings_container");
});
UI.addListener(UIEvents.TOGGLE_CONTACT_LIST, UI.toggleContactList);
+ UI.addListener( UIEvents.TOGGLE_PROFILE, function() {
+ UI.toggleSidePanel("profile_container");
+ });
+
UI.addListener(UIEvents.TOGGLE_FILM_STRIP, UI.handleToggleFilmStrip);
UI.addListener(UIEvents.FOLLOW_ME_ENABLED, function (isEnabled) {
@@ -380,8 +383,8 @@ function registerListeners() {
*/
function bindEvents() {
function onResize() {
- PanelToggler.resizeChat();
- VideoLayout.resizeVideoArea(PanelToggler.isVisible());
+ SideContainerToggler.resize();
+ VideoLayout.resizeVideoArea();
}
// Resize and reposition videos in full screen mode.
@@ -430,22 +433,22 @@ UI.start = function () {
registerListeners();
ToolbarToggler.init();
- BottomToolbar.init();
+ SideContainerToggler.init(eventEmitter);
FilmStrip.init(eventEmitter);
VideoLayout.init(eventEmitter);
if (!interfaceConfig.filmStripOnly) {
- VideoLayout.initLargeVideo(PanelToggler.isVisible());
+ VideoLayout.initLargeVideo();
}
- VideoLayout.resizeVideoArea(PanelToggler.isVisible(), true, true);
+ VideoLayout.resizeVideoArea(true, true);
ContactList.init(eventEmitter);
bindEvents();
sharedVideoManager = new SharedVideoManager(eventEmitter);
if (!interfaceConfig.filmStripOnly) {
- $("#videospace").mousemove(function () {
- return ToolbarToggler.showToolbar();
+ $("#videoconference_page").mousemove(function () {
+ return UI.showToolbar();
});
setupToolbars();
setupChat();
@@ -468,9 +471,8 @@ UI.start = function () {
elem.href = 'data:application/json;charset=utf-8,\n' + data;
});
} else {
- $("#header").css("display", "none");
+ $("#mainToolbarContainer").css("display", "none");
$("#downloadlog").css("display", "none");
- BottomToolbar.hide();
FilmStrip.setupFilmStripOnly();
messageHandler.enableNotifications(false);
$('body').popover("disable");
@@ -499,17 +501,11 @@ UI.start = function () {
"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
};
SettingsMenu.init(eventEmitter);
+ Profile.init(eventEmitter);
}
if(APP.tokenData.callee) {
@@ -727,16 +723,26 @@ UI.isFilmStripVisible = function () {
* Toggles chat panel.
*/
UI.toggleChat = function () {
- PanelToggler.toggleChat();
+ UI.toggleSidePanel("chat_container");
};
/**
* Toggles contact list panel.
*/
UI.toggleContactList = function () {
- PanelToggler.toggleContactList();
+ UI.toggleSidePanel("contacts_container");
};
+/**
+ * Toggles the given side panel.
+ *
+ * @param {String} sidePanelId the identifier of the side panel to toggle
+ */
+UI.toggleSidePanel = function (sidePanelId) {
+ SideContainerToggler.toggle(sidePanelId);
+};
+
+
/**
* Handle new user display name.
*/
@@ -828,6 +834,16 @@ 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) {
var remoteVideos = $(".videocontainer:not(#mixedstream)");
if (remoteVideos.length > videoNumber) {
@@ -854,7 +870,7 @@ function changeAvatar(id, avatarUrl) {
VideoLayout.changeUserAvatar(id, avatarUrl);
ContactList.changeUserAvatar(id, avatarUrl);
if (APP.conference.isLocalId(id)) {
- SettingsMenu.changeAvatar(avatarUrl);
+ Profile.changeAvatar(avatarUrl);
}
}
@@ -1483,6 +1499,15 @@ UI.hideRingOverLay = function () {
FilmStrip.toggleFilmStrip(true);
};
+/**
+ * Indicates if the ring overlay is currently visible.
+ *
+ * @returns {*|boolean} {true} if the ring overlay is visible, {false} otherwise
+ */
+UI.isRingOverlayVisible = function () {
+ return RingOverlay.isVisible();
+};
+
/**
* Shows browser-specific overlay with guidance how to proceed with gUM prompt.
* @param {string} browser - name of browser for which to show the guidance
diff --git a/modules/UI/etherpad/Etherpad.js b/modules/UI/etherpad/Etherpad.js
index 58315c9a9..d5c9e7e4a 100644
--- a/modules/UI/etherpad/Etherpad.js
+++ b/modules/UI/etherpad/Etherpad.js
@@ -4,7 +4,6 @@ import VideoLayout from "../videolayout/VideoLayout";
import LargeContainer from '../videolayout/LargeContainer';
import UIUtil from "../util/UIUtil";
import UIEvents from "../../../service/UI/UIEvents";
-import SidePanelToggler from "../side_pannels/SidePanelToggler";
import FilmStrip from '../videolayout/FilmStrip';
/**
diff --git a/modules/UI/recording/Recording.js b/modules/UI/recording/Recording.js
index 5bea4de59..720b19014 100644
--- a/modules/UI/recording/Recording.js
+++ b/modules/UI/recording/Recording.js
@@ -19,7 +19,6 @@ import UIUtil from '../util/UIUtil';
import VideoLayout from '../videolayout/VideoLayout';
import Feedback from '../Feedback.js';
import Toolbar from '../toolbars/Toolbar';
-import BottomToolbar from '../toolbars/BottomToolbar';
/**
* The dialog for user input.
@@ -260,7 +259,6 @@ var Recording = {
VideoLayout.setLocalVideoVisible(false);
Feedback.enableFeedback(false);
Toolbar.enable(false);
- BottomToolbar.enable(false);
APP.UI.messageHandler.enableNotifications(false);
APP.UI.messageHandler.enablePopups(false);
}
diff --git a/modules/UI/ring_overlay/RingOverlay.js b/modules/UI/ring_overlay/RingOverlay.js
index 6bc9b1645..78b433de3 100644
--- a/modules/UI/ring_overlay/RingOverlay.js
+++ b/modules/UI/ring_overlay/RingOverlay.js
@@ -1,4 +1,5 @@
/* global $ */
+/* jshint -W101 */
/**
* Shows ring overlay
@@ -8,35 +9,39 @@ class RingOverlay {
* @param callee instance of User class from TokenData.js
*/
constructor(callee) {
+ this._containerId = 'ringOverlay';
+ this._audioContainerId = 'ringOverlayRinging';
+
this.callee = callee;
- this._buildHtml();
- this.audio = $("#ring_overlay_ringing");
- this.audio[0].play();
+ this.render();
+ this.audio = document.getElementById(this._audioContainerId);
+ this.audio.play();
this._setAudioTimeout();
}
/**
* Builds and appends the ring overlay to the html document
*/
- _buildHtml() {
- $("body").append("
+
+
+
+ 
+
-
-
-
-
-
@@ -183,96 +246,6 @@
-
-
-
-
-
- ' + '
" +
- "
");
+ _getHtmlStr(callee) {
+ return `
+ " +
- "![](" +
- this.callee.getAvatarUrl() + ")
" +
- "
" +
- "
+
`;
}
/**
- * Sets the interval that is going to play the ringing sound.
+ *
*/
- _setAudioTimeout() {
- this.interval = setInterval( () => {
- this.audio[0].play();
- }, 5000);
+ render() {
+ this.htmlStr = this._getHtmlStr(this.callee);
+ this._attach();
}
/**
@@ -44,9 +49,28 @@ class RingOverlay {
* related to the ring overlay.
*/
destroy() {
- if(this.interval)
+ if (this.interval) {
clearInterval(this.interval);
- $(".overlay_container").remove();
+ }
+
+ this._detach();
+ }
+
+ _attach() {
+ $("body").append(this.htmlStr);
+ }
+
+ _detach() {
+ $(`#${this._containerId}`).remove();
+ }
+
+ /**
+ * Sets the interval that is going to play the ringing sound.
+ */
+ _setAudioTimeout() {
+ this.interval = setInterval( () => {
+ this.audio.play();
+ }, 5000);
}
}
@@ -66,26 +90,30 @@ export default {
if(overlay) {
this.hide();
}
+
overlay = new RingOverlay(callee);
},
+
/**
* Hides the ring overlay. Destroys all the elements related to the ring
* overlay.
*/
hide() {
- if(!overlay)
+ if(!overlay) {
return false;
+ }
overlay.destroy();
overlay = null;
return true;
},
+
/**
* Checks whether or not the ring overlay is currently displayed.
*
* @returns {boolean} true if the ring overlay is currently displayed or
* false otherwise.
*/
- isDisplayed () {
+ isVisible () {
return overlay !== null;
}
};
diff --git a/modules/UI/side_pannels/SideContainerToggler.js b/modules/UI/side_pannels/SideContainerToggler.js
new file mode 100644
index 000000000..d63e8c837
--- /dev/null
+++ b/modules/UI/side_pannels/SideContainerToggler.js
@@ -0,0 +1,127 @@
+/* global $ */
+import UIEvents from "../../../service/UI/UIEvents";
+
+/**
+ * Handles open and close of the extended toolbar side panel
+ * (chat, settings, etc.).
+ *
+ * @type {{init, toggle, isVisible, hide, show, resize}}
+ */
+const SideContainerToggler = {
+ /**
+ * Initialises this toggler by registering the listeners.
+ *
+ * @param eventEmitter
+ */
+ init(eventEmitter) {
+ this.eventEmitter = eventEmitter;
+
+ // Adds a listener for the animation end event that would take care
+ // of hiding all internal containers when the extendedToolbarPanel is
+ // closed.
+ document.getElementById("sideToolbarContainer")
+ .addEventListener("animationend", function(e) {
+ if(e.animationName === "slideOutExt")
+ $("#sideToolbarContainer").children().each(function() {
+ if ($(this).hasClass("show"))
+ SideContainerToggler.hideInnerContainer($(this));
+ });
+ }, false);
+ },
+
+ /**
+ * Toggles the container with the given element id.
+ *
+ * @param {String} elementId the identifier of the container element to
+ * toggle
+ */
+ toggle(elementId) {
+ let elementSelector = $(`#${elementId}`);
+ let isSelectorVisible = elementSelector.hasClass("show");
+
+ if (isSelectorVisible) {
+ this.hide();
+ }
+ else {
+ if (this.isVisible())
+ $("#sideToolbarContainer").children().each(function() {
+ if ($(this).id !== elementId && $(this).hasClass("show"))
+ SideContainerToggler.hideInnerContainer($(this));
+ });
+
+ if (!this.isVisible())
+ this.show();
+
+ this.showInnerContainer(elementSelector);
+ }
+ },
+
+ /**
+ * Returns {true} if the side toolbar panel is currently visible,
+ * otherwise returns {false}.
+ */
+ isVisible() {
+ return $("#sideToolbarContainer").hasClass("slideInExt");
+ },
+
+ /**
+ * Returns {true} if the side toolbar panel is currently hovered and
+ * {false} otherwise.
+ */
+ isHovered() {
+ return $("#sideToolbarContainer:hover").length > 0;
+ },
+
+ /**
+ * Hides the side toolbar panel with a slide out animation.
+ */
+ hide() {
+ $("#sideToolbarContainer")
+ .removeClass("slideInExt").addClass("slideOutExt");
+ },
+
+ /**
+ * Shows the side toolbar panel with a slide in animation.
+ */
+ show() {
+ if (!this.isVisible())
+ $("#sideToolbarContainer")
+ .removeClass("slideOutExt").addClass("slideInExt");
+ },
+
+ /**
+ * Hides the inner container given by the selector.
+ *
+ * @param {Object} containerSelector the jquery selector for the
+ * element to hide
+ */
+ hideInnerContainer(containerSelector) {
+ containerSelector.removeClass("show").addClass("hide");
+
+ this.eventEmitter.emit(UIEvents.SIDE_TOOLBAR_CONTAINER_TOGGLED,
+ containerSelector.attr('id'), false);
+ },
+
+ /**
+ * Shows the inner container given by the selector.
+ *
+ * @param {Object} containerSelector the jquery selector for the
+ * element to show
+ */
+ showInnerContainer(containerSelector) {
+ containerSelector.removeClass("hide").addClass("show");
+
+ this.eventEmitter.emit(UIEvents.SIDE_TOOLBAR_CONTAINER_TOGGLED,
+ containerSelector.attr('id'), true);
+ },
+
+ /**
+ * TO FIX: do we need to resize the chat?
+ */
+ resize () {
+ //let [width, height] = UIUtil.getSidePanelSize();
+ //Chat.resizeChat(width, height);
+ }
+};
+
+export default SideContainerToggler;
\ No newline at end of file
diff --git a/modules/UI/side_pannels/SidePanelToggler.js b/modules/UI/side_pannels/SidePanelToggler.js
deleted file mode 100644
index d5e37fed1..000000000
--- a/modules/UI/side_pannels/SidePanelToggler.js
+++ /dev/null
@@ -1,186 +0,0 @@
-/* global require, $ */
-import Chat from "./chat/Chat";
-import ContactList from "./contactlist/ContactList";
-import Settings from "./../../settings/Settings";
-import SettingsMenu from "./settings/SettingsMenu";
-import VideoLayout from "../videolayout/VideoLayout";
-import ToolbarToggler from "../toolbars/ToolbarToggler";
-import UIUtil from "../util/UIUtil";
-
-const buttons = {
- '#chatspace': '#chatBottomButton',
- '#contactlist': '#contactListButton',
- '#settingsmenu': '#toolbar_button_settings'
-};
-
-var currentlyOpen = null;
-
-/**
- * Toggles the windows in the side panel
- * @param object the window that should be shown
- * @param selector the selector for the element containing the panel
- * @param onOpenComplete function to be called when the panel is opened
- * @param onOpen function to be called if the window is going to be opened
- * @param onClose function to be called if the window is going to be closed
- * @param onVideoResizeComplete function to be called after the video area
- * is resized
- */
-function toggle (object, selector, onOpenComplete,
- onOpen, onClose, onVideoResizeComplete) {
- let isSideBarVisible = object.isVisible();
-
- UIUtil.buttonClick(buttons[selector], "active");
-
- if (isSideBarVisible) {
- $("#toast-container").animate({
- right: 5
- }, {
- queue: false,
- duration: 500
- });
-
- $(selector).hide("slide", {
- direction: "right",
- queue: false,
- duration: 500,
- // Set the size to 0 at the end of the animation to ensure that
- // the is(":visible") function on this selector will return {false}
- // when the element is hidden.
- complete: function() {$(selector).css("width", "0");}
- });
-
- resizeVideoArea(false, onVideoResizeComplete);
-
- if(typeof onClose === "function") {
- onClose();
- }
-
- currentlyOpen = null;
- } else {
- resizeVideoArea(true, onVideoResizeComplete);
-
- // Undock the toolbar when the chat is shown and if we're in a
- // video mode.
- if (VideoLayout.isLargeVideoVisible()) {
- ToolbarToggler.dockToolbar(false);
- }
-
- if (currentlyOpen) {
- var current = $(currentlyOpen);
- UIUtil.buttonClick(buttons[currentlyOpen], "active");
- current.css('z-index', 4);
- setTimeout(function () {
- current.css('display', 'none');
- current.css('z-index', 5);
- }, 500);
- }
-
- $("#toast-container").animate({
- right: (UIUtil.getSidePanelSize()[0] + 5)
- }, {
- queue: false,
- duration: 500
- });
- // Set the size dynamically (not in the css), so that we're sure that
- // when is(":visible") is called on this selector the result is {false}
- // before it's actually visible.
- // (Chrome seems to return {true} for an element which is in the DOM and
- // has non-null size set).
- $(selector).css("width", "20%");
- $(selector).show("slide", {
- direction: "right",
- queue: false,
- duration: 500,
- complete: onOpenComplete
- });
- if(typeof onOpen === "function") {
- onOpen();
- }
-
- currentlyOpen = selector;
- }
-}
-
-function resizeVideoArea(isSidePanelVisible, completeFunction) {
- VideoLayout.resizeVideoArea(isSidePanelVisible,
- false,//don't force thumbnail count update
- true, //animate
- completeFunction);
-}
-
-/**
- * Toggler for the chat, contact list, settings menu, etc..
- */
-var PanelToggler = {
-
- /**
- * Opens / closes the chat area.
- */
- toggleChat () {
- var chatCompleteFunction = Chat.isVisible()
- ? function () {}
- : function () {
- Chat.scrollChatToBottom();
- $('#chatspace').trigger('shown');
- };
-
- toggle(Chat, //Object
- '#chatspace', // Selector
- function () { //onOpenComplete
- // Request the focus in the nickname field or the chat input
- // field.
- if ($('#nickname').css('visibility') === 'visible') {
- $('#nickinput').focus();
- } else {
- $('#usermsg').focus();
- }
- },
- () => this.resizeChat(), //OnOpen
- null,
- chatCompleteFunction); //OnClose
- },
-
- resizeChat () {
- let [width, height] = UIUtil.getSidePanelSize();
- Chat.resizeChat(width, height);
- },
-
- /**
- * Opens / closes the contact list area.
- */
- toggleContactList () {
- var completeFunction = ContactList.isVisible()
- ? function () {}
- : function () {
- $('#contactlist').trigger('shown');
- };
-
- toggle(ContactList,
- '#contactlist',
- null,
- function() {
- ContactList.setVisualNotification(false);
- },
- null,
- completeFunction);
- },
-
- /**
- * Opens / closes the settings menu
- */
- toggleSettingsMenu () {
- toggle(SettingsMenu,
- '#settingsmenu',
- null,
- function() {},
- null);
- },
-
- isVisible () {
- return (Chat.isVisible() ||
- ContactList.isVisible() ||
- SettingsMenu.isVisible());
- }
-};
-
-export default PanelToggler;
diff --git a/modules/UI/side_pannels/chat/Chat.js b/modules/UI/side_pannels/chat/Chat.js
index 76064adf1..713cc1f88 100644
--- a/modules/UI/side_pannels/chat/Chat.js
+++ b/modules/UI/side_pannels/chat/Chat.js
@@ -18,15 +18,11 @@ var unreadMessages = 0;
*/
function setVisualNotification(show) {
var unreadMsgElement = document.getElementById('unreadMessages');
- var unreadMsgBottomElement
- = document.getElementById('bottomUnreadMessages');
var glower = $('#toolbar_button_chat');
- var bottomGlower = $('#chatBottomButton');
if (unreadMessages) {
unreadMsgElement.innerHTML = unreadMessages.toString();
- unreadMsgBottomElement.innerHTML = unreadMessages.toString();
ToolbarToggler.dockToolbar(true);
@@ -42,19 +38,6 @@ function setVisualNotification(show) {
'top:' + topIndent +
'; left:' + leftIndent + ';');
- var chatBottomButtonElement
- = document.getElementById('chatBottomButton').parentNode;
- var bottomLeftIndent = (UIUtil.getTextWidth(chatBottomButtonElement) -
- UIUtil.getTextWidth(unreadMsgBottomElement)) / 2;
- var bottomTopIndent = (UIUtil.getTextHeight(chatBottomButtonElement) -
- UIUtil.getTextHeight(unreadMsgBottomElement)) / 2 - 2;
-
- unreadMsgBottomElement.setAttribute(
- 'style',
- 'top:' + bottomTopIndent +
- '; left:' + bottomLeftIndent + ';');
-
-
if (!glower.hasClass('icon-chat-simple')) {
glower.removeClass('icon-chat');
glower.addClass('icon-chat-simple');
@@ -62,7 +45,6 @@ function setVisualNotification(show) {
}
else {
unreadMsgElement.innerHTML = '';
- unreadMsgBottomElement.innerHTML = '';
glower.removeClass('icon-chat-simple');
glower.addClass('icon-chat');
}
@@ -70,15 +52,12 @@ function setVisualNotification(show) {
if (show && !notificationInterval) {
notificationInterval = window.setInterval(function () {
glower.toggleClass('active');
- bottomGlower.toggleClass('active glowing');
}, 800);
}
else if (!show && notificationInterval) {
window.clearInterval(notificationInterval);
notificationInterval = false;
glower.removeClass('active');
- bottomGlower.removeClass('glowing');
- bottomGlower.addClass('active');
}
}
@@ -144,7 +123,7 @@ function addSmileys() {
smileysContainer.appendChild(smileyContainer);
}
- $("#chatspace").append(smileysContainer);
+ $("#chat_container").append(smileysContainer);
}
/**
@@ -152,7 +131,7 @@ function addSmileys() {
*/
function resizeChatConversation() {
var msgareaHeight = $('#usermsg').outerHeight();
- var chatspace = $('#chatspace');
+ var chatspace = $('#chat_container');
var width = chatspace.width();
var chat = $('#chatconversation');
var smileys = $('#smileysarea');
@@ -208,7 +187,7 @@ var Chat = {
};
usermsg.autosize({callback: onTextAreaResize});
- $("#chatspace").bind("shown",
+ $("#chat_container").bind("shown",
function () {
unreadMessages = 0;
setVisualNotification(false);
@@ -296,7 +275,8 @@ var Chat = {
* conversation mode or not.
*/
setChatConversationMode (isConversationMode) {
- $('#chatspace').toggleClass('is-conversation-mode', isConversationMode);
+ $('#chat_container')
+ .toggleClass('is-conversation-mode', isConversationMode);
if (isConversationMode) {
$('#usermsg').focus();
}
@@ -306,7 +286,7 @@ var Chat = {
* Resizes the chat area.
*/
resizeChat (width, height) {
- $('#chatspace').width(width).height(height);
+ $('#chat_container').width(width).height(height);
resizeChatConversation();
},
@@ -315,7 +295,8 @@ var Chat = {
* Indicates if the chat is currently visible.
*/
isVisible () {
- return UIUtil.isVisible(document.getElementById("chatspace"));
+ return UIUtil.isVisible(
+ document.getElementById("chat_container"));
},
/**
* Shows and hides the window with the smileys
diff --git a/modules/UI/side_pannels/contactlist/ContactList.js b/modules/UI/side_pannels/contactlist/ContactList.js
index bad800786..a1f5298fc 100644
--- a/modules/UI/side_pannels/contactlist/ContactList.js
+++ b/modules/UI/side_pannels/contactlist/ContactList.js
@@ -14,16 +14,19 @@ let notificationInterval;
*/
function updateNumberOfParticipants(delta) {
numberOfContacts += delta;
- if (numberOfContacts === 1) {
- // when the user is alone we don't show the number of participants
- $("#numberOfParticipants").text('');
- ContactList.setVisualNotification(false);
- } else if (numberOfContacts > 1) {
- ContactList.setVisualNotification(!ContactList.isVisible());
- $("#numberOfParticipants").text(numberOfContacts);
- } else {
+
+ if (numberOfContacts <= 0) {
console.error("Invalid number of participants: " + numberOfContacts);
+ return;
}
+
+ let buttonIndicatorText = (numberOfContacts === 1) ? '' : numberOfContacts;
+ $("#numberOfParticipants").text(buttonIndicatorText);
+
+ $("#contacts_container>div.title").text(
+ APP.translation.translateString(
+ "contactlist", {participants: numberOfContacts}
+ ));
}
/**
@@ -131,23 +134,6 @@ var ContactList = {
}
},
- setVisualNotification (show, stopGlowingIn) {
- let glower = $('#contactListButton');
-
- if (show && !notificationInterval) {
- notificationInterval = window.setInterval(function () {
- glower.toggleClass('active glowing');
- }, 800);
- } else if (!show && notificationInterval) {
- stopGlowing(glower);
- }
- if (stopGlowingIn) {
- setTimeout(function () {
- stopGlowing(glower);
- }, stopGlowingIn);
- }
- },
-
setClickable (id, isClickable) {
getContactEl(id).toggleClass('clickable', isClickable);
},
diff --git a/modules/UI/side_pannels/profile/Profile.js b/modules/UI/side_pannels/profile/Profile.js
new file mode 100644
index 000000000..cbd4aeeae
--- /dev/null
+++ b/modules/UI/side_pannels/profile/Profile.js
@@ -0,0 +1,61 @@
+/* global APP, $, JitsiMeetJS */
+import UIUtil from "../../util/UIUtil";
+import UIEvents from "../../../../service/UI/UIEvents";
+import languages from "../../../../service/translation/languages";
+import Settings from '../../../settings/Settings';
+
+export default {
+ init (emitter) {
+ // DISPLAY NAME
+ function updateDisplayName () {
+ emitter.emit(UIEvents.NICKNAME_CHANGED, $('#setDisplayName').val());
+ }
+
+ $('#setDisplayName')
+ .val(Settings.getDisplayName())
+ .keyup(function (event) {
+ if (event.keyCode === 13) { // enter
+ updateDisplayName();
+ }
+ })
+ .focusout(updateDisplayName);
+
+
+ // EMAIL
+ function updateEmail () {
+ emitter.emit(UIEvents.EMAIL_CHANGED, $('#setEmail').val());
+ }
+
+ $('#setEmail')
+ .val(Settings.getEmail())
+ .keyup(function (event) {
+ if (event.keyCode === 13) { // enter
+ updateEmail();
+ }
+ }).focusout(updateEmail);
+ },
+
+ /**
+ * Check if settings menu is visible or not.
+ * @returns {boolean}
+ */
+ isVisible () {
+ return UIUtil.isVisible(document.getElementById("profile_container"));
+ },
+
+ /**
+ * Change user display name in the settings menu.
+ * @param {string} newDisplayName
+ */
+ changeDisplayName (newDisplayName) {
+ $('#setDisplayName').val(newDisplayName);
+ },
+
+ /**
+ * Change user avatar in the settings menu.
+ * @param {string} avatarUrl url of the new avatar
+ */
+ changeAvatar (avatarUrl) {
+ $('#avatar').attr('src', avatarUrl);
+ }
+};
\ No newline at end of file
diff --git a/modules/UI/side_pannels/settings/SettingsMenu.js b/modules/UI/side_pannels/settings/SettingsMenu.js
index 35b5ae1a0..f7182336d 100644
--- a/modules/UI/side_pannels/settings/SettingsMenu.js
+++ b/modules/UI/side_pannels/settings/SettingsMenu.js
@@ -62,34 +62,6 @@ function generateDevicesOptions(items, selectedId, permissionGranted) {
export default {
init (emitter) {
-
- // DISPLAY NAME
- function updateDisplayName () {
- emitter.emit(UIEvents.NICKNAME_CHANGED, $('#setDisplayName').val());
- }
- $('#setDisplayName')
- .val(Settings.getDisplayName())
- .keyup(function (event) {
- if (event.keyCode === 13) { // enter
- updateDisplayName();
- }
- })
- .focusout(updateDisplayName);
-
-
- // EMAIL
- function updateEmail () {
- emitter.emit(UIEvents.EMAIL_CHANGED, $('#setEmail').val());
- }
-
- $('#setEmail')
- .val(Settings.getEmail())
- .keyup(function (event) {
- if (event.keyCode === 13) { // enter
- updateEmail();
- }
- }).focusout(updateEmail);
-
// START MUTED
$("#startMutedOptions").change(function () {
let startAudioMuted = $("#startAudioMuted").is(":checked");
@@ -191,23 +163,7 @@ export default {
* @returns {boolean}
*/
isVisible () {
- return UIUtil.isVisible(document.getElementById("settingsmenu"));
- },
-
- /**
- * Change user display name in the settings menu.
- * @param {string} newDisplayName
- */
- changeDisplayName (newDisplayName) {
- $('#setDisplayName').val(newDisplayName);
- },
-
- /**
- * Change user avatar in the settings menu.
- * @param {string} avatarUrl url of the new avatar
- */
- changeAvatar (avatarUrl) {
- $('#avatar').attr('src', avatarUrl);
+ return UIUtil.isVisible(document.getElementById("settings_container"));
},
/**
@@ -290,6 +246,6 @@ export default {
$('#devicesOptions').show();
- APP.translation.translateElement($('#settingsmenu option'));
+ APP.translation.translateElement($('#settings_container option'));
}
-};
+};
\ No newline at end of file
diff --git a/modules/UI/toolbars/BottomToolbar.js b/modules/UI/toolbars/BottomToolbar.js
deleted file mode 100644
index 70fc17fe2..000000000
--- a/modules/UI/toolbars/BottomToolbar.js
+++ /dev/null
@@ -1,130 +0,0 @@
-/* global $, APP, interfaceConfig, JitsiMeetJS */
-import UIUtil from '../util/UIUtil';
-import UIEvents from '../../../service/UI/UIEvents';
-
-const defaultBottomToolbarButtons = {
- 'chat': {
- id: '#bottom_toolbar_chat'
- },
- 'contacts': {
- id: '#bottom_toolbar_contact_list'
- },
- 'filmstrip': {
- id: '#bottom_toolbar_film_strip',
- shortcut: "F",
- shortcutAttr: "filmstripPopover",
- shortcutFunc: function() {
- JitsiMeetJS.analytics.sendEvent("shortcut.film.toggled");
- APP.UI.handleToggleFilmStrip();
- },
- shortcutDescription: "keyboardShortcuts.toggleFilmstrip"
- }
-};
-
-const BottomToolbar = {
- init () {
- this.toolbar = $('#bottomToolbar');
-
- // The bottom toolbar is enabled by default.
- this.enabled = true;
- },
- /**
- * Enables / disables the bottom toolbar.
- * @param {e} set to {true} to enable the bottom toolbar or {false}
- * to disable it
- */
- enable (e) {
- this.enabled = e;
- if (!e && this.isVisible())
- this.hide(false);
- },
- /**
- * Indicates if the bottom toolbar is currently enabled.
- * @return {this.enabled}
- */
- isEnabled() {
- return this.enabled;
- },
-
- setupListeners (emitter) {
- UIUtil.hideDisabledButtons(defaultBottomToolbarButtons);
-
- const buttonHandlers = {
- "bottom_toolbar_contact_list": function () {
- JitsiMeetJS.analytics.sendEvent(
- 'bottomtoolbar.contacts.toggled');
- emitter.emit(UIEvents.TOGGLE_CONTACT_LIST);
- },
- "bottom_toolbar_film_strip": function () {
- JitsiMeetJS.analytics.sendEvent(
- 'bottomtoolbar.filmstrip.toggled');
- emitter.emit(UIEvents.TOGGLE_FILM_STRIP);
- },
- "bottom_toolbar_chat": function () {
- JitsiMeetJS.analytics.sendEvent('bottomtoolbar.chat.toggled');
- emitter.emit(UIEvents.TOGGLE_CHAT);
- }
- };
-
- Object.keys(defaultBottomToolbarButtons).forEach(
- id => {
- if (UIUtil.isButtonEnabled(id)) {
- var button = defaultBottomToolbarButtons[id];
-
- if (button.shortcut)
- APP.keyboardshortcut.registerShortcut(
- button.shortcut,
- button.shortcutAttr,
- button.shortcutFunc,
- button.shortcutDescription
- );
- }
- }
- );
-
- Object.keys(buttonHandlers).forEach(
- buttonId => $(`#${buttonId}`).click(buttonHandlers[buttonId])
- );
- },
-
- resizeToolbar (thumbWidth, thumbHeight) {
- let bottom = (thumbHeight - this.toolbar.outerHeight())/2 + 18;
- this.toolbar.css({bottom});
- },
-
- /**
- * Returns true if this toolbar is currently visible, or false otherwise.
- * @return true if currently visible, false - otherwise
- */
- isVisible() {
- return this.toolbar.is(":visible");
- },
-
- /**
- * Hides the bottom toolbar with animation or not depending on the animate
- * parameter.
- * @param animate true to hide the bottom toolbar with animation,
- * false or nothing to hide it without animation.
- */
- hide(animate) {
- if (animate)
- this.toolbar.hide("slide", {direction: "right", duration: 300});
- else
- this.toolbar.css("display", "none");
- },
-
- /**
- * Shows the bottom toolbar with animation or not depending on the animate
- * parameter.
- * @param animate true to show the bottom toolbar with animation,
- * false or nothing to show it without animation.
- */
- show(animate) {
- if (animate)
- this.toolbar.show("slide", {direction: "right", duration: 300});
- else
- this.toolbar.css("display", "block");
- }
-};
-
-export default BottomToolbar;
diff --git a/modules/UI/toolbars/Toolbar.js b/modules/UI/toolbars/Toolbar.js
index eb899f478..5225d78d8 100644
--- a/modules/UI/toolbars/Toolbar.js
+++ b/modules/UI/toolbars/Toolbar.js
@@ -2,6 +2,7 @@
/* jshint -W101 */
import UIUtil from '../util/UIUtil';
import UIEvents from '../../../service/UI/UIEvents';
+import SideContainerToggler from "../side_pannels/SideContainerToggler";
let roomUrl = null;
let emitter = null;
@@ -19,9 +20,13 @@ function openLinkDialog () {
} else {
inviteAttributes = "value=\"" + encodeURI(roomUrl) + "\"";
}
+
+ let title = APP.translation.generateTranslationHTML("dialog.shareLink");
APP.UI.messageHandler.openTwoButtonDialog(
- "dialog.shareLink", null, null,
- ``,
+ null, null, null,
+ '
+ })
+
+
+ Calling...
+
+
+ ${callee.getName()}
+