refactor BottomToolbar
This commit is contained in:
isymchych
parent
cf578b7732
commit
e23dd62d86
|
|
@ -188,10 +188,6 @@ function registerListeners() {
|
|||
AudioLevels.init();
|
||||
});
|
||||
|
||||
UI.addListener(UIEvents.FILM_STRIP_TOGGLED, function (isToggled) {
|
||||
VideoLayout.onFilmStripToggled(isToggled);
|
||||
});
|
||||
|
||||
UI.addListener(UIEvents.EMAIL_CHANGED, function (email) {
|
||||
UI.setUserAvatar(APP.conference.localId, email);
|
||||
});
|
||||
|
|
@ -215,6 +211,10 @@ function registerListeners() {
|
|||
UI.addListener(UIEvents.TOGGLE_SETTINGS, function () {
|
||||
PanelToggler.toggleSettingsMenu();
|
||||
});
|
||||
|
||||
UI.addListener(UIEvents.TOGGLE_CONTACT_LIST, UI.toggleContactList);
|
||||
|
||||
UI.addListener(UIEvents.TOGGLE_FILM_STRIP, UI.toggleFilmStrip);
|
||||
}
|
||||
|
||||
function bindEvents() {
|
||||
|
|
@ -446,14 +446,15 @@ UI.getSettings = function () {
|
|||
|
||||
UI.toggleFilmStrip = function () {
|
||||
BottomToolbar.toggleFilmStrip();
|
||||
VideoLayout.updateLargeVideoSize();
|
||||
};
|
||||
|
||||
UI.toggleChat = function () {
|
||||
BottomToolbar.toggleChat();
|
||||
PanelToggler.toggleChat();
|
||||
};
|
||||
|
||||
UI.toggleContactList = function () {
|
||||
BottomToolbar.toggleContactList();
|
||||
PanelToggler.toggleContactList();
|
||||
};
|
||||
|
||||
UI.inputDisplayNameHandler = function (value) {
|
||||
|
|
|
|||
|
|
@ -1,66 +1,48 @@
|
|||
/* global $ */
|
||||
var PanelToggler = require("../side_pannels/SidePanelToggler");
|
||||
var UIUtil = require("../util/UIUtil");
|
||||
var AnalyticsAdapter = require("../../statistics/AnalyticsAdapter");
|
||||
var UIEvents = require("../../../service/UI/UIEvents");
|
||||
import UIUtil from '../util/UIUtil';
|
||||
import UIEvents from '../../../service/UI/UIEvents';
|
||||
import AnalyticsAdapter from '../../statistics/AnalyticsAdapter';
|
||||
|
||||
var eventEmitter = null;
|
||||
|
||||
var buttonHandlers = {
|
||||
"bottom_toolbar_contact_list": function () {
|
||||
AnalyticsAdapter.sendEvent('bottomtoolbar.contacts.toggled');
|
||||
BottomToolbar.toggleContactList();
|
||||
},
|
||||
"bottom_toolbar_film_strip": function () {
|
||||
AnalyticsAdapter.sendEvent('bottomtoolbar.filmstrip.toggled');
|
||||
BottomToolbar.toggleFilmStrip();
|
||||
},
|
||||
"bottom_toolbar_chat": function () {
|
||||
AnalyticsAdapter.sendEvent('bottomtoolbar.chat.toggled');
|
||||
BottomToolbar.toggleChat();
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
var defaultBottomToolbarButtons = {
|
||||
const defaultBottomToolbarButtons = {
|
||||
'chat': '#bottom_toolbar_chat',
|
||||
'contacts': '#bottom_toolbar_contact_list',
|
||||
'filmstrip': '#bottom_toolbar_film_strip'
|
||||
};
|
||||
|
||||
|
||||
var BottomToolbar = (function (my) {
|
||||
my.init = function (emitter) {
|
||||
eventEmitter = emitter;
|
||||
UIUtil.hideDisabledButtons(defaultBottomToolbarButtons);
|
||||
|
||||
for(var k in buttonHandlers)
|
||||
$("#" + k).click(buttonHandlers[k]);
|
||||
};
|
||||
|
||||
my.toggleChat = function() {
|
||||
PanelToggler.toggleChat();
|
||||
};
|
||||
|
||||
my.toggleContactList = function() {
|
||||
PanelToggler.toggleContactList();
|
||||
};
|
||||
|
||||
my.toggleFilmStrip = function() {
|
||||
var filmstrip = $("#remoteVideos");
|
||||
filmstrip.toggleClass("hidden");
|
||||
|
||||
eventEmitter.emit( UIEvents.FILM_STRIP_TOGGLED,
|
||||
filmstrip.hasClass("hidden"));
|
||||
};
|
||||
|
||||
$(document).bind("remotevideo.resized", function (event, width, height) {
|
||||
var bottom = (height - $('#bottomToolbar').outerHeight())/2 + 18;
|
||||
let toolbar = $('#bottomToolbar');
|
||||
let bottom = (height - toolbar.outerHeight())/2 + 18;
|
||||
|
||||
$('#bottomToolbar').css({bottom: bottom + 'px'});
|
||||
toolbar.css({bottom});
|
||||
});
|
||||
|
||||
return my;
|
||||
}(BottomToolbar || {}));
|
||||
const BottomToolbar = {
|
||||
init (emitter) {
|
||||
UIUtil.hideDisabledButtons(defaultBottomToolbarButtons);
|
||||
|
||||
module.exports = BottomToolbar;
|
||||
const buttonHandlers = {
|
||||
"bottom_toolbar_contact_list": function () {
|
||||
AnalyticsAdapter.sendEvent('bottomtoolbar.contacts.toggled');
|
||||
emitter.emit(UIEvents.TOGGLE_CONTACT_LIST);
|
||||
},
|
||||
"bottom_toolbar_film_strip": function () {
|
||||
AnalyticsAdapter.sendEvent('bottomtoolbar.filmstrip.toggled');
|
||||
emitter.emit(UIEvents.TOGGLE_FILM_STRIP);
|
||||
},
|
||||
"bottom_toolbar_chat": function () {
|
||||
AnalyticsAdapter.sendEvent('bottomtoolbar.chat.toggled');
|
||||
emitter.emit(UIEvents.TOGGLE_CHAT);
|
||||
}
|
||||
};
|
||||
|
||||
Object.keys(buttonHandlers).forEach(
|
||||
buttonId => $(`#${buttonId}`).click(buttonHandlers[buttonId])
|
||||
);
|
||||
},
|
||||
|
||||
toggleFilmStrip () {
|
||||
$("#remoteVideos").toggleClass("hidden");
|
||||
}
|
||||
};
|
||||
|
||||
export default BottomToolbar;
|
||||
|
|
|
|||
|
|
@ -1,20 +1,20 @@
|
|||
/* global APP, $, config, interfaceConfig */
|
||||
/* jshint -W101 */
|
||||
var messageHandler = require("../util/MessageHandler");
|
||||
var UIUtil = require("../util/UIUtil");
|
||||
var AnalyticsAdapter = require("../../statistics/AnalyticsAdapter");
|
||||
var UIEvents = require("../../../service/UI/UIEvents");
|
||||
import messageHandler from '../util/MessageHandler';
|
||||
import UIUtil from '../util/UIUtil';
|
||||
import AnalyticsAdapter from '../../statistics/AnalyticsAdapter';
|
||||
import UIEvents from '../../../service/UI/UIEvents';
|
||||
|
||||
var roomUrl = null;
|
||||
var recordingToaster = null;
|
||||
var emitter = null;
|
||||
let roomUrl = null;
|
||||
let recordingToaster = null;
|
||||
let emitter = null;
|
||||
|
||||
|
||||
/**
|
||||
* Opens the invite link dialog.
|
||||
*/
|
||||
function openLinkDialog () {
|
||||
var inviteAttributes;
|
||||
let inviteAttributes;
|
||||
|
||||
if (roomUrl === null) {
|
||||
inviteAttributes = 'data-i18n="[value]roomUrlDefaultMsg" value="' +
|
||||
|
|
@ -181,7 +181,7 @@ const buttonHandlers = {
|
|||
);
|
||||
}
|
||||
};
|
||||
var defaultToolbarButtons = {
|
||||
const defaultToolbarButtons = {
|
||||
'microphone': '#toolbar_button_mute',
|
||||
'camera': '#toolbar_button_camera',
|
||||
'desktop': '#toolbar_button_desktopsharing',
|
||||
|
|
@ -222,10 +222,12 @@ function showSipNumberInput () {
|
|||
const Toolbar = {
|
||||
init (eventEmitter) {
|
||||
emitter = eventEmitter;
|
||||
|
||||
UIUtil.hideDisabledButtons(defaultToolbarButtons);
|
||||
|
||||
for(var k in buttonHandlers)
|
||||
$("#" + k).click(buttonHandlers[k]);
|
||||
Object.keys(buttonHandlers).forEach(
|
||||
buttonId => $(`#${buttonId}`).click(buttonHandlers[buttonId])
|
||||
);
|
||||
},
|
||||
|
||||
/**
|
||||
|
|
@ -235,7 +237,7 @@ const Toolbar = {
|
|||
roomUrl = newRoomUrl;
|
||||
|
||||
// If the invite dialog has been already opened we update the information.
|
||||
var inviteLink = document.getElementById('inviteLinkRef');
|
||||
let inviteLink = document.getElementById('inviteLinkRef');
|
||||
if (inviteLink) {
|
||||
inviteLink.value = roomUrl;
|
||||
inviteLink.select();
|
||||
|
|
@ -333,7 +335,7 @@ const Toolbar = {
|
|||
*/
|
||||
setAuthenticatedIdentity (authIdentity) {
|
||||
if (authIdentity) {
|
||||
var selector = $('#toolbar_auth_identity');
|
||||
let selector = $('#toolbar_auth_identity');
|
||||
selector.css({display: "list-item"});
|
||||
selector.text(authIdentity);
|
||||
} else {
|
||||
|
|
@ -371,7 +373,7 @@ const Toolbar = {
|
|||
* @param active the state of the desktop streaming.
|
||||
*/
|
||||
changeDesktopSharingButtonState (active) {
|
||||
var button = $("#toolbar_button_desktopsharing");
|
||||
let button = $("#toolbar_button_desktopsharing");
|
||||
if (active) {
|
||||
button.addClass("glow");
|
||||
} else {
|
||||
|
|
|
|||
|
|
@ -900,12 +900,9 @@ var VideoLayout = (function (my) {
|
|||
};
|
||||
|
||||
/**
|
||||
* Updates the video size and position when the film strip is toggled.
|
||||
*
|
||||
* @param isToggled indicates if the film strip is toggled or not. True
|
||||
* would mean that the film strip is hidden, false would mean it's shown
|
||||
* Updates the video size and position.
|
||||
*/
|
||||
my.onFilmStripToggled = function(isToggled) {
|
||||
my.updateLargeVideoSize = function () {
|
||||
LargeVideo.updateVideoSizeAndPosition();
|
||||
LargeVideo.position(null, null, null, null, true);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -29,12 +29,9 @@ export default {
|
|||
AUTH_CLICKED: "UI.auth_clicked",
|
||||
TOGGLE_CHAT: "UI.toggle_chat",
|
||||
TOGGLE_SETTINGS: "UI.toggle_settings",
|
||||
TOGGLE_CONTACT_LIST: "UI.toggle_contact_list",
|
||||
TOGGLE_FILM_STRIP: "UI.toggle_film_strip",
|
||||
HANGUP: "UI.hangup",
|
||||
LOGOUT: "UI.logout",
|
||||
RECORDING_TOGGLE: "UI.recording_toggle",
|
||||
/**
|
||||
* Notifies interested parties when the film strip (remote video's panel)
|
||||
* is hidden (toggled) or shown (un-toggled).
|
||||
*/
|
||||
FILM_STRIP_TOGGLED: "UI.filmstrip_toggled"
|
||||
RECORDING_TOGGLE: "UI.recording_toggle"
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in New Issue