From 8562d3d55d0c019f6ff70592c4b40d35c69dbfd4 Mon Sep 17 00:00:00 2001 From: yanas Date: Thu, 8 Sep 2016 13:16:23 -0500 Subject: [PATCH] Remove bottom toolbar and change side panel position and behavior --- modules/UI/UI.js | 37 ++-- modules/UI/recording/Recording.js | 2 - .../UI/side_pannels/ExtendedToolbarToggler.js | 70 +++++++ modules/UI/side_pannels/SidePanelToggler.js | 186 ------------------ modules/UI/side_pannels/chat/Chat.js | 21 -- .../side_pannels/contactlist/ContactList.js | 23 ++- modules/UI/toolbars/BottomToolbar.js | 130 ------------ modules/UI/toolbars/Toolbar.js | 48 ++++- modules/UI/toolbars/ToolbarToggler.js | 9 - modules/UI/util/UIUtil.js | 21 +- modules/UI/videolayout/FilmStrip.js | 6 +- modules/UI/videolayout/LargeVideo.js | 7 +- modules/UI/videolayout/VideoLayout.js | 23 +-- 13 files changed, 152 insertions(+), 431 deletions(-) create mode 100644 modules/UI/side_pannels/ExtendedToolbarToggler.js delete mode 100644 modules/UI/side_pannels/SidePanelToggler.js delete mode 100644 modules/UI/toolbars/BottomToolbar.js diff --git a/modules/UI/UI.js b/modules/UI/UI.js index 8cb112d86..113d6f042 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 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/side_pannels/ExtendedToolbarToggler.js b/modules/UI/side_pannels/ExtendedToolbarToggler.js new file mode 100644 index 000000000..e12ee9210 --- /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 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..058343104 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 bad800786..f2e260852 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 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..e6d691717 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 313defda0..b43198e75 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 1c621349f..019586a6f 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 27c3b4875..db74044f0 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 7c2595bb0..93f7407d6 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 47fc05729..712ecae2b 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({