define([ 'jquery', '/customize/application_config.js', '/api/config', '/api/broadcast', '/common/common-ui-elements.js', '/common/common-interface.js', '/common/common-hash.js', '/common/common-util.js', '/common/common-feedback.js', '/common/inner/common-mediatag.js', '/common/hyperscript.js', '/common/messenger-ui.js', '/customize/messages.js', ], function ($, Config, ApiConfig, Broadcast, UIElements, UI, Hash, Util, Feedback, MT, h, MessengerUI, Messages) { var Common; var Bar = { constants: {}, }; var SPINNER_DISAPPEAR_TIME = 1000; // Toolbar parts var TOOLBAR_CLS = Bar.constants.toolbar = 'cp-toolbar'; var TOP_CLS = Bar.constants.top = 'cp-toolbar-top'; var BOTTOM_CLS = Bar.constants.bottom = 'cp-toolbar-bottom'; var BOTTOM_LEFT_CLS = Bar.constants.bottomL = 'cp-toolbar-bottom-left'; var BOTTOM_MID_CLS = Bar.constants.bottomM = 'cp-toolbar-bottom-mid'; var BOTTOM_RIGHT_CLS = Bar.constants.bottomR = 'cp-toolbar-bottom-right'; var LEFTSIDE_CLS = Bar.constants.leftside = 'cp-toolbar-leftside'; var RIGHTSIDE_CLS = Bar.constants.rightside = 'cp-toolbar-rightside'; var FILE_CLS = Bar.constants.file = 'cp-toolbar-file'; var DRAWER_CLS = Bar.constants.drawer = 'cp-toolbar-drawer-content'; var HISTORY_CLS = Bar.constants.history = 'cp-toolbar-history'; var SNAPSHOTS_CLS = Bar.constants.history = 'cp-toolbar-snapshots'; // Userlist var USERLIST_CLS = Bar.constants.userlist = "cp-toolbar-users"; // Top parts var USER_CLS = Bar.constants.userAdmin = "cp-toolbar-user"; var SPINNER_CLS = Bar.constants.spinner = 'cp-toolbar-spinner'; var LIMIT_CLS = Bar.constants.limit = 'cp-toolbar-limit'; var TITLE_CLS = Bar.constants.title = "cp-toolbar-title"; var LINK_CLS = Bar.constants.link = "cp-toolbar-link"; var NOTIFICATIONS_CLS = Bar.constants.user = 'cp-toolbar-notifications'; var MAINTENANCE_CLS = Bar.constants.user = 'cp-toolbar-maintenance'; // User admin menu var USERADMIN_CLS = Bar.constants.user = 'cp-toolbar-user-dropdown'; var USERNAME_CLS = Bar.constants.username = 'cp-toolbar-user-name'; /*var READONLY_CLS = */Bar.constants.readonly = 'cp-toolbar-readonly'; var USERBUTTON_CLS = Bar.constants.changeUsername = "cp-toolbar-user-rename"; // Create the toolbar element var uid = function () { return 'cp-toolbar-uid-' + String(Math.random()).substring(2); }; var createRealtimeToolbar = function (config) { if (!config.$container) { return; } var $container = config.$container; var isEmbed = Bar.isEmbed = config.metadataMgr.getPrivateData().isEmbed; if (isEmbed) { $container.hide(); } var $toolbar = $('
', { 'class': TOOLBAR_CLS, id: uid(), }); var $topContainer = $('
', {'class': TOP_CLS}); $('', {'class': 'cp-toolbar-top-filler'}).appendTo($topContainer); var $userContainer = $('', { 'class': USER_CLS }).appendTo($topContainer); $('', {'class': LIMIT_CLS}).hide().appendTo($userContainer); $('', {'class': MAINTENANCE_CLS + ' cp-dropdown-container'}).hide().appendTo($userContainer); $('', {'class': NOTIFICATIONS_CLS + ' cp-dropdown-container'}).hide().appendTo($userContainer); $('', {'class': USERADMIN_CLS + ' cp-dropdown-container'}).hide().appendTo($userContainer); $toolbar.append($topContainer); var $bottom = $(h('div.'+BOTTOM_CLS, [ h('div.'+BOTTOM_LEFT_CLS), h('div.'+BOTTOM_MID_CLS), h('div.'+BOTTOM_RIGHT_CLS) ])).appendTo($toolbar); $toolbar.append(h('div.'+HISTORY_CLS)); $toolbar.append(h('div.'+SNAPSHOTS_CLS)); var $file = $toolbar.find('.'+BOTTOM_LEFT_CLS); if (!config.hideDrawer) { var $drawer = $(h('button.' + FILE_CLS, [ h('i.fa.fa-file-o'), h('span.cp-button-name', Messages.toolbar_file) ])).appendTo($file).hide(); var $drawerContent = $('
', { 'class': DRAWER_CLS, 'tabindex': 1 }).hide(); UI.createDrawer($drawer, $drawerContent); } // The 'notitle' class removes the line added for the title with a small screen if (!config.title || typeof config.title !== "object") { $toolbar.addClass('cp-toolbar-notitle'); } $container.prepend($toolbar); $container.on('drop dragover', function (e) { e.preventDefault(); e.stopPropagation(); }); return $toolbar; }; // Userlist elements var getOtherUsers = function(config) { //var userList = config.userList.getUserlist(); var userData = config.metadataMgr.getMetadata().users; var i = 0; // duplicates counter var list = []; // Display only one time each user (if he is connected in multiple tabs) var uids = []; Object.keys(userData).forEach(function(user) { //if (user !== userNetfluxId) { var data = userData[user] || {}; var userId = data.uid; if (!userId) { return; } //data.netfluxId = user; if (uids.indexOf(userId) === -1) {// && (!myUid || userId !== myUid)) { uids.push(userId); list.push(data); } else { i++; } //} }); return { list: list, duplicates: i }; }; var editingUserName = { state: false }; var setDisplayName = function (newName) { Common.setDisplayName(newName, function (err) { if (err) { console.log("Couldn't set username"); console.error(err); return; } }); }; var showColors = false; var updateUserList = function (toolbar, config, forceOffline) { if (!config.displayed || config.displayed.indexOf('userlist') === -1) { return; } // Make sure the elements are displayed var $userButtons = toolbar.userlist; var $userlistContent = toolbar.userlistContent; var metadataMgr = config.metadataMgr; var online = !forceOffline && metadataMgr.isConnected(); var userData = metadataMgr.getMetadata().users; var viewers = metadataMgr.getViewers(); var priv = metadataMgr.getPrivateData(); var origin = priv.origin; var friends = priv.friends; var user = metadataMgr.getUserData(); // If we are using old pads (readonly unavailable), only editing users are in userList. // With new pads, we also have readonly users in userList, so we have to intersect with // the userData to have only the editing users. We can't use userData directly since it // may contain data about users that have already left the channel. //userList = config.readOnly === -1 ? userList : arrayIntersect(userList, Object.keys(userData)); // Names of editing users var others = getOtherUsers(config); var editUsersNames = others.list; var duplicates = others.duplicates; // Number of duplicates editUsersNames.sort(function (a, b) { var na = a.name || Messages.anonymous; var nb = b.name || Messages.anonymous; return na.toLowerCase() > nb.toLowerCase(); }); var numberOfEditUsers = Object.keys(userData).length - duplicates; var numberOfViewUsers = viewers; // If the user was changing his username, do not reste the input, store the current value // and cursor if (editingUserName.state) { var $input = $userlistContent.find('.cp-toolbar-userlist-name-input'); editingUserName.value = $input.val(); editingUserName.select = [$input[0].selectionStart, $input[0].selectionEnd]; } // Update the userlist var $editUsers = $userlistContent.find('.' + USERLIST_CLS).html(''); var $editUsersList = $('
', {'class': 'cp-toolbar-userlist-others'}) .appendTo($editUsers); var degradedLimit = Config.degradedLimit || 8; if (toolbar.isDeleted) { $('').text(Messages.deletedFromServer).appendTo($editUsersList); numberOfEditUsers = '?'; numberOfViewUsers = '?'; } else if (!online) { $('').text(Messages.userlist_offline).appendTo($editUsersList); numberOfEditUsers = '?'; numberOfViewUsers = '?'; } else if (metadataMgr.isDegraded() === true) { numberOfEditUsers = Math.max(metadataMgr.getChannelMembers().length - 1, 0); numberOfViewUsers = ''; $('').text(Messages._getKey('toolbar_degraded', [degradedLimit])).appendTo($editUsersList); } // Update the buttons var fa_editusers = ''; var fa_viewusers = numberOfViewUsers === '' ? '' : ''; var $spansmall = $('').html(fa_editusers + ' ' + numberOfEditUsers + '   ' + fa_viewusers + ' ' + numberOfViewUsers); $userButtons.find('.cp-dropdown-button-title').html('').append($spansmall); if (!online || toolbar.isDeleted) { return; } if (metadataMgr.isDegraded() === true) { return; } // Display the userlist // Editors var pendingFriends = Common.getPendingFriends(); // Friend requests sent var friendRequests = Common.getFriendRequests(); // Friend requests received editUsersNames.forEach(function (data) { var name = data.name || Messages.anonymous; var $span = $('', {'class': 'cp-avatar'}); if (data.color && showColors) { $span.css('border-color', data.color); } var $rightCol = $('', {'class': 'cp-toolbar-userlist-rightcol'}); var $nameSpan = $('', {'class': 'cp-toolbar-userlist-name'}).appendTo($rightCol); var $nameValue = $('', { 'class': 'cp-toolbar-userlist-name-value' }).text(name).appendTo($nameSpan); var isMe = data.uid === user.uid; if (isMe && !priv.readOnly) { if (!Config.disableProfile) { var $button = $('