diff --git a/modules/UI/UI.js b/modules/UI/UI.js
index 8cb112d86b..113d6f0428 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 ExtendedToolbarToggler from "./side_pannels/ExtendedToolbarToggler";
import UIUtil from "./util/UIUtil";
import UIEvents from "../../service/UI/UIEvents";
import CQEvents from '../../service/connectionquality/CQEvents';
@@ -134,7 +133,6 @@ function setupChat() {
*/
function setupToolbars() {
Toolbar.init(eventEmitter);
- BottomToolbar.setupListeners(eventEmitter);
}
/**
@@ -299,7 +297,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 +335,7 @@ UI.mucJoined = function () {
*/
UI.handleToggleFilmStrip = () => {
UI.toggleFilmStrip();
- VideoLayout.resizeVideoArea(PanelToggler.isVisible(), true, false);
+ VideoLayout.resizeVideoArea(true, false);
};
/**
@@ -362,7 +360,7 @@ function registerListeners() {
UI.addListener(UIEvents.TOGGLE_CHAT, UI.toggleChat);
UI.addListener(UIEvents.TOGGLE_SETTINGS, function () {
- PanelToggler.toggleSettingsMenu();
+ ExtendedToolbarToggler.toggle("settingsmenu");
});
UI.addListener(UIEvents.TOGGLE_CONTACT_LIST, UI.toggleContactList);
@@ -380,8 +378,7 @@ function registerListeners() {
*/
function bindEvents() {
function onResize() {
- PanelToggler.resizeChat();
- VideoLayout.resizeVideoArea(PanelToggler.isVisible());
+ ExtendedToolbarToggler.resize();
}
// Resize and reposition videos in full screen mode.
@@ -430,22 +427,22 @@ UI.start = function () {
registerListeners();
ToolbarToggler.init();
- BottomToolbar.init();
+ ExtendedToolbarToggler.init();
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 +465,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,13 +495,6 @@ 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
};
@@ -727,14 +716,14 @@ UI.isFilmStripVisible = function () {
* Toggles chat panel.
*/
UI.toggleChat = function () {
- PanelToggler.toggleChat();
+ ExtendedToolbarToggler.toggle("chatspace");
};
/**
* Toggles contact list panel.
*/
UI.toggleContactList = function () {
- PanelToggler.toggleContactList();
+ ExtendedToolbarToggler.toggle("contactlist");
};
/**
diff --git a/modules/UI/recording/Recording.js b/modules/UI/recording/Recording.js
index 5bea4de596..720b19014c 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/side_pannels/ExtendedToolbarToggler.js b/modules/UI/side_pannels/ExtendedToolbarToggler.js
new file mode 100644
index 0000000000..e12ee92106
--- /dev/null
+++ b/modules/UI/side_pannels/ExtendedToolbarToggler.js
@@ -0,0 +1,70 @@
+/* global $ */
+
+const ExtendedToolbarToggler = {
+ init() {
+ document.getElementById("extendedToolbarPanel")
+ .addEventListener("animationend", function(e) {
+ console.log("ANIM NAME", e.animationName);
+ if(e.animationName === "slideOutExt")
+ $("#extendedToolbarPanel").children().each(function() {
+ if ($(this).hasClass("show"))
+ $(this).removeClass("show").addClass("hide");
+ });
+ }, false);
+ },
+
+ toggle(elementId) {
+ let elementSelector = $(`#${elementId}`);
+ let isSelectorVisible = elementSelector.hasClass("show");
+
+ if (isSelectorVisible) {
+ this.hide();
+ }
+ else {
+ if (this.isVisible())
+ $("#extendedToolbarPanel").children().each(function() {
+ if ($(this).id !== elementId && $(this).hasClass("show"))
+ $(this).removeClass("show").addClass("hide");
+ });
+
+ if (!this.isVisible())
+ this.show();
+
+ elementSelector.removeClass("hide").addClass("show");
+ }
+ },
+
+ /**
+ * Returns true if this toolbar is currently visible, or false otherwise.
+ * @return true if currently visible, false - otherwise
+ */
+ isVisible() {
+ return $("#extendedToolbarPanel").hasClass("slideInExt");
+ },
+
+ /**
+ * Hides the toolbar with animation or not depending on the animate
+ * parameter.
+ */
+ hide(elementId) {
+ $("#extendedToolbarPanel")
+ .removeClass("slideInExt").addClass("slideOutExt");
+ },
+
+ /**
+ * Shows the toolbar with animation or not depending on the animate
+ * parameter.
+ */
+ show(elementId) {
+ if (!this.isVisible())
+ $("#extendedToolbarPanel")
+ .removeClass("slideOutExt").addClass("slideInExt");
+ },
+
+ resize () {
+ //let [width, height] = UIUtil.getSidePanelSize();
+ //Chat.resizeChat(width, height);
+ }
+};
+
+export default ExtendedToolbarToggler;
\ 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 d5e37fed11..0000000000
--- 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 76064adf11..0583431046 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');
}
}
diff --git a/modules/UI/side_pannels/contactlist/ContactList.js b/modules/UI/side_pannels/contactlist/ContactList.js
index bad800786c..f2e2608524 100644
--- a/modules/UI/side_pannels/contactlist/ContactList.js
+++ b/modules/UI/side_pannels/contactlist/ContactList.js
@@ -14,16 +14,23 @@ 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);
+
+ let showVisualNotification
+ = (numberOfContacts === 1) ? false : !ContactList.isVisible();
+ ContactList.setVisualNotification(showVisualNotification);
+
+ $("#contactlist>div.title").text(
+ APP.translation.translateString(
+ "contactlist", {participants: numberOfContacts}
+ ));
}
/**
diff --git a/modules/UI/toolbars/BottomToolbar.js b/modules/UI/toolbars/BottomToolbar.js
deleted file mode 100644
index 70fc17fe2f..0000000000
--- 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 eb899f478f..e6d6917172 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 ExtendedToolbarToggler from "../side_pannels/ExtendedToolbarToggler.js";
let roomUrl = null;
let emitter = null;
@@ -92,6 +93,11 @@ const buttonHandlers = {
JitsiMeetJS.analytics.sendEvent('toolbar.chat.toggled');
emitter.emit(UIEvents.TOGGLE_CHAT);
},
+ "toolbar_contact_list": function () {
+ JitsiMeetJS.analytics.sendEvent(
+ 'toolbar.contacts.toggled');
+ emitter.emit(UIEvents.TOGGLE_CONTACT_LIST);
+ },
"toolbar_button_etherpad": function () {
JitsiMeetJS.analytics.sendEvent('toolbar.etherpad.clicked');
emitter.emit(UIEvents.ETHERPAD_CLICKED);
@@ -150,6 +156,11 @@ const buttonHandlers = {
}
}
);
+ },
+ "toolbar_film_strip": function () {
+ JitsiMeetJS.analytics.sendEvent(
+ 'bottomtoolbar.filmstrip.toggled');
+ emitter.emit(UIEvents.TOGGLE_FILM_STRIP);
}
};
const defaultToolbarButtons = {
@@ -199,6 +210,9 @@ const defaultToolbarButtons = {
},
shortcutDescription: "keyboardShortcuts.toggleChat"
},
+ 'contacts': {
+ id: '#toolbar_contact_list'
+ },
'etherpad': {
id: '#toolbar_button_etherpad'
},
@@ -210,6 +224,16 @@ const defaultToolbarButtons = {
},
'hangup': {
id: '#toolbar_button_hangup'
+ },
+ 'filmstrip': {
+ id: '#toolbar_film_strip',
+ shortcut: "F",
+ shortcutAttr: "filmstripPopover",
+ shortcutFunc: function() {
+ JitsiMeetJS.analytics.sendEvent("shortcut.film.toggled");
+ APP.UI.toggleFilmStrip();
+ },
+ shortcutDescription: "keyboardShortcuts.toggleFilmstrip"
}
};
@@ -242,7 +266,8 @@ const Toolbar = {
emitter = eventEmitter;
// The toolbar is enabled by default.
this.enabled = true;
- this.toolbarSelector = $("#header");
+ this.toolbarSelector = $("#mainToolbarContainer");
+ this.extendedToolbarSelector = $("#extendedToolbar");
UIUtil.hideDisabledButtons(defaultToolbarButtons);
@@ -507,7 +532,9 @@ const Toolbar = {
});
if (hovered)
return true;
- if ($("#bottomToolbar:hover").length > 0) {
+ if ($("#bottomToolbar:hover").length > 0
+ || $("#extendedToolbar:hover").length > 0
+ || ExtendedToolbarToggler.isVisible()) {
return true;
}
return false;
@@ -518,7 +545,7 @@ const Toolbar = {
* @return true if currently visible, false - otherwise
*/
isVisible() {
- return this.toolbarSelector.is(":visible");
+ return this.toolbarSelector.hasClass("slideInY");
},
/**
@@ -526,8 +553,9 @@ const Toolbar = {
* parameter.
*/
hide() {
- this.toolbarSelector.hide(
- "slide", { direction: "up", duration: 300});
+ this.toolbarSelector.toggleClass("slideInY").toggleClass("slideOutY");
+ this.extendedToolbarSelector.toggleClass("slideInX")
+ .toggleClass("slideOutX");
},
/**
@@ -535,8 +563,14 @@ const Toolbar = {
* parameter.
*/
show() {
- this.toolbarSelector.show(
- "slide", { direction: "up", duration: 300});
+ if (this.toolbarSelector.hasClass("slideOutY"))
+ this.toolbarSelector.toggleClass("slideOutY");
+
+ if (this.extendedToolbarSelector.hasClass("slideOutX"))
+ this.extendedToolbarSelector.toggleClass("slideOutX");
+
+ this.toolbarSelector.toggleClass("slideInY");
+ this.extendedToolbarSelector.toggleClass("slideInX");
}
};
diff --git a/modules/UI/toolbars/ToolbarToggler.js b/modules/UI/toolbars/ToolbarToggler.js
index 313defda06..b43198e75f 100644
--- a/modules/UI/toolbars/ToolbarToggler.js
+++ b/modules/UI/toolbars/ToolbarToggler.js
@@ -1,7 +1,6 @@
/* global APP, config, $, interfaceConfig */
import UIUtil from '../util/UIUtil';
-import BottomToolbar from './BottomToolbar';
import Toolbar from './Toolbar';
import FilmStrip from '../videolayout/FilmStrip.js';
@@ -37,9 +36,6 @@ function hideToolbar() {
} else {
Toolbar.hide();
$('#subject').animate({top: "-=40"}, 300);
- if (!FilmStrip.isFilmStripVisible()) {
- BottomToolbar.hide(true);
- }
}
}
@@ -78,11 +74,6 @@ const ToolbarToggler = {
updateTimeout = true;
}
- if (BottomToolbar.isEnabled() && !BottomToolbar.isVisible()) {
- BottomToolbar.show(true);
- updateTimeout = true;
- }
-
if (updateTimeout) {
if (toolbarTimeoutObject) {
clearTimeout(toolbarTimeoutObject);
diff --git a/modules/UI/util/UIUtil.js b/modules/UI/util/UIUtil.js
index 1c621349f0..019586a6f1 100644
--- a/modules/UI/util/UIUtil.js
+++ b/modules/UI/util/UIUtil.js
@@ -5,31 +5,12 @@
*/
var UIUtil = {
- /**
- * Returns the size of the side panel.
- */
- getSidePanelSize () {
- var availableHeight = window.innerHeight;
- var availableWidth = window.innerWidth;
-
- var panelWidth = 200;
- if (availableWidth * 0.2 < 200) {
- panelWidth = availableWidth * 0.2;
- }
-
- return [panelWidth, availableHeight];
- },
-
/**
* Returns the available video width.
*/
- getAvailableVideoWidth: function (isSidePanelVisible) {
+ getAvailableVideoWidth: function () {
let rightPanelWidth = 0;
- if (isSidePanelVisible) {
- rightPanelWidth = UIUtil.getSidePanelSize()[0];
- }
-
return window.innerWidth - rightPanelWidth;
},
diff --git a/modules/UI/videolayout/FilmStrip.js b/modules/UI/videolayout/FilmStrip.js
index 27c3b48753..db74044f0f 100644
--- a/modules/UI/videolayout/FilmStrip.js
+++ b/modules/UI/videolayout/FilmStrip.js
@@ -68,10 +68,8 @@ const FilmStrip = {
/**
* Calculates the thumbnail size.
- * @param videoAreaAvailableWidth the currently available video area width
- * that we want to take into account when calculating the film strip width.
*/
- calculateThumbnailSize (isSideBarVisible) {
+ calculateThumbnailSize () {
let availableHeight = interfaceConfig.FILM_STRIP_MAX_HEIGHT;
let numvids = this.getThumbs(true).length;
@@ -84,7 +82,7 @@ const FilmStrip = {
* film strip size hasn't been updated yet, but it will be.
*/
let videoAreaAvailableWidth
- = UIUtil.getAvailableVideoWidth(isSideBarVisible)
+ = UIUtil.getAvailableVideoWidth()
- UIUtil.parseCssInt(this.filmStrip.css('right'), 10)
- UIUtil.parseCssInt(this.filmStrip.css('paddingLeft'), 10)
- UIUtil.parseCssInt(this.filmStrip.css('paddingRight'), 10)
diff --git a/modules/UI/videolayout/LargeVideo.js b/modules/UI/videolayout/LargeVideo.js
index 7c2595bb08..93f7407d68 100644
--- a/modules/UI/videolayout/LargeVideo.js
+++ b/modules/UI/videolayout/LargeVideo.js
@@ -536,11 +536,10 @@ export default class LargeVideoManager {
}
/**
- * Update container size optionally taking side bar size into account.
- * @param {boolean} isSideBarVisible if side bar is visible.
+ * Update container size.
*/
- updateContainerSize (isSideBarVisible) {
- this.width = UIUtil.getAvailableVideoWidth(isSideBarVisible);
+ updateContainerSize () {
+ this.width = UIUtil.getAvailableVideoWidth();
this.height = window.innerHeight;
}
diff --git a/modules/UI/videolayout/VideoLayout.js b/modules/UI/videolayout/VideoLayout.js
index 47fc057293..712ecae2bd 100644
--- a/modules/UI/videolayout/VideoLayout.js
+++ b/modules/UI/videolayout/VideoLayout.js
@@ -3,7 +3,6 @@
import AudioLevels from "../audio_levels/AudioLevels";
import Avatar from "../avatar/Avatar";
-import BottomToolbar from "../toolbars/BottomToolbar";
import FilmStrip from "./FilmStrip";
import UIEvents from "../../../service/UI/UIEvents";
import UIUtil from "../util/UIUtil";
@@ -12,7 +11,6 @@ import RemoteVideo from "./RemoteVideo";
import LargeVideoManager, {VIDEO_CONTAINER_TYPE} from "./LargeVideo";
import {SHARED_VIDEO_CONTAINER_TYPE} from '../shared_video/SharedVideo';
import LocalVideo from "./LocalVideo";
-import PanelToggler from "../side_pannels/SidePanelToggler";
const RTCUIUtil = JitsiMeetJS.util.RTCUIHelper;
@@ -115,12 +113,12 @@ var VideoLayout = {
this.lastNCount = config.channelLastN;
},
- initLargeVideo (isSideBarVisible) {
+ initLargeVideo () {
largeVideo = new LargeVideoManager();
if(localFlipX) {
largeVideo.onLocalFlipXChange(localFlipX);
}
- largeVideo.updateContainerSize(isSideBarVisible);
+ largeVideo.updateContainerSize();
AudioLevels.init();
},
@@ -487,21 +485,16 @@ var VideoLayout = {
*/
resizeThumbnails ( animate = false,
forceUpdate = false,
- isSideBarVisible = null,
onComplete = null) {
- isSideBarVisible
- = (isSideBarVisible !== null)
- ? isSideBarVisible : PanelToggler.isVisible();
let {thumbWidth, thumbHeight}
- = FilmStrip.calculateThumbnailSize(isSideBarVisible);
+ = FilmStrip.calculateThumbnailSize();
$('.userAvatar').css('left', (thumbWidth - thumbHeight) / 2);
FilmStrip.resizeThumbnails(thumbWidth, thumbHeight,
animate, forceUpdate)
.then(function () {
- BottomToolbar.resizeToolbar(thumbWidth, thumbHeight);
AudioLevels.updateCanvasSize(thumbWidth, thumbHeight);
if (onComplete && typeof onComplete === "function")
onComplete();
@@ -891,31 +884,29 @@ var VideoLayout = {
/**
* Resizes the video area.
*
- * @param isSideBarVisible indicates if the side bar is currently visible
* @param forceUpdate indicates that hidden thumbnails will be shown
* @param completeFunction a function to be called when the video area is
* resized.
*/
- resizeVideoArea (isSideBarVisible,
- forceUpdate = false,
+ resizeVideoArea (forceUpdate = false,
animate = false,
completeFunction = null) {
if (largeVideo) {
- largeVideo.updateContainerSize(isSideBarVisible);
+ largeVideo.updateContainerSize();
largeVideo.resize(animate);
}
// Calculate available width and height.
let availableHeight = window.innerHeight;
- let availableWidth = UIUtil.getAvailableVideoWidth(isSideBarVisible);
+ let availableWidth = UIUtil.getAvailableVideoWidth();
if (availableWidth < 0 || availableHeight < 0) {
return;
}
// Resize the thumbnails first.
- this.resizeThumbnails(false, forceUpdate, isSideBarVisible);
+ this.resizeThumbnails(false, forceUpdate);
// Resize the video area element.
$('#videospace').animate({