/* 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.toggleFilmStrip(); }, 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;