From 1eee20dd5a925c734441d0cbb782bc008ec8b752 Mon Sep 17 00:00:00 2001 From: Leonard Kim Date: Mon, 9 Apr 2018 20:16:43 -0700 Subject: [PATCH] ref(toolbar): remove contact list --- css/_contact_list.scss | 59 --------- css/_side_toolbar_container.scss | 2 +- css/main.scss | 1 - doc/api.md | 5 - interface_config.js | 8 +- lang/main.json | 6 - modules/API/API.js | 4 - modules/API/external/external_api.js | 2 - modules/UI/UI.js | 8 -- modules/UI/side_pannels/SidePanels.js | 6 - .../contactlist/ContactListView.js | 56 -------- modules/UI/videolayout/VideoLayout.js | 17 --- .../transport/PostMessageTransportBackend.js | 1 - .../components/ContactListItem.native.js | 0 .../components/ContactListItem.web.js | 101 --------------- .../components/ContactListPanel.native.js | 0 .../components/ContactListPanel.web.js | 122 ------------------ .../components/ParticipantCounter.native.js | 0 .../components/ParticipantCounter.web.js | 59 --------- .../features/contact-list/components/index.js | 2 - react/features/contact-list/index.js | 1 - service/UI/UIEvents.js | 2 - 22 files changed, 2 insertions(+), 460 deletions(-) delete mode 100644 css/_contact_list.scss delete mode 100644 modules/UI/side_pannels/contactlist/ContactListView.js delete mode 100644 react/features/contact-list/components/ContactListItem.native.js delete mode 100644 react/features/contact-list/components/ContactListItem.web.js delete mode 100644 react/features/contact-list/components/ContactListPanel.native.js delete mode 100644 react/features/contact-list/components/ContactListPanel.web.js delete mode 100644 react/features/contact-list/components/ParticipantCounter.native.js delete mode 100644 react/features/contact-list/components/ParticipantCounter.web.js delete mode 100644 react/features/contact-list/components/index.js delete mode 100644 react/features/contact-list/index.js diff --git a/css/_contact_list.scss b/css/_contact_list.scss deleted file mode 100644 index 889bad79b..000000000 --- a/css/_contact_list.scss +++ /dev/null @@ -1,59 +0,0 @@ -#contacts_container { - cursor: default; - - #contacts { - font-size: 12px; - bottom: 0px; - margin: 0; - margin-top: 12px; - padding: 0px; - width: 100%; - } - - .clickable { - cursor: pointer; - } -} - -#contacts { - .contact-list-item { - align-items: center; - border-radius: 3px; - color: $baseLight; - display: flex; - font-size: 14px; - height: 36px; - list-style-type: none; - padding: 0 10%; - text-align: left; - white-space: nowrap; - - &:hover, - &:active { - background: $toolbarSelectBackground; - } - - .contact-list-item-name { - overflow: hidden; - text-overflow: ellipsis; - } - - .avatar { - cursor: pointer; - height: 24px; - margin: 0 8px 0 4px; - width: 24px; - } - } -} - - -.avatar { - padding: 0px; - margin-right: 10px; - vertical-align: middle; - font-size: 22pt; - border-radius: 20px; - max-height: 30px; - max-width: 30px; -} diff --git a/css/_side_toolbar_container.scss b/css/_side_toolbar_container.scss index 2bb785bab..c54792bbd 100644 --- a/css/_side_toolbar_container.scss +++ b/css/_side_toolbar_container.scss @@ -75,7 +75,7 @@ } /** - * Inner container, for example contact list, settings or profile. + * Inner container, for example settings or profile. */ .sideToolbarContainer__inner { display: none; diff --git a/css/main.scss b/css/main.scss index ee7fe227d..4e31c7108 100644 --- a/css/main.scss +++ b/css/main.scss @@ -48,7 +48,6 @@ @import 'popup_menu'; @import 'recording'; @import 'login_menu'; -@import 'contact_list'; @import 'chat'; @import 'ringing/ringing'; @import 'welcome_page'; diff --git a/doc/api.md b/doc/api.md index 929f26747..a5157a7bb 100644 --- a/doc/api.md +++ b/doc/api.md @@ -97,11 +97,6 @@ api.executeCommand('toggleFilmStrip') api.executeCommand('toggleChat') ``` -* **toggleContactList** - Hides / shows the contact list. No arguments are required. -```javascript -api.executeCommand('toggleContactList') -``` - * **toggleShareScreen** - Starts / stops screen sharing. No arguments are required. ```javascript api.executeCommand('toggleShareScreen') diff --git a/interface_config.js b/interface_config.js index b3290d352..bfa96ae17 100644 --- a/interface_config.js +++ b/interface_config.js @@ -44,16 +44,11 @@ var interfaceConfig = { 'microphone', 'camera', 'desktop', 'fullscreen', 'fodeviceselection', 'hangup', // extended toolbar - 'profile', 'contacts', 'info', 'chat', 'recording', 'etherpad', + 'profile', 'info', 'chat', 'recording', 'etherpad', 'sharedvideo', 'settings', 'raisehand', 'videoquality', 'filmstrip', 'invite', 'feedback', 'stats', 'shortcuts' ], - /** - * Main Toolbar Buttons - * All of them should be in TOOLBAR_BUTTONS - */ - MAIN_TOOLBAR_BUTTONS: [ 'microphone', 'camera', 'desktop', 'fullscreen', 'fodeviceselection', 'hangup' ], SETTINGS_SECTIONS: [ 'language', 'devices', 'moderator' ], INVITE_OPTIONS: [ 'invite', 'dialout', 'addtocall' ], @@ -62,7 +57,6 @@ var interfaceConfig = { // screen, 'width' would fit the original video width to the width of the // screen respecting ratio. VIDEO_LAYOUT_FIT: 'both', - SHOW_CONTACTLIST_AVATARS: true, /** * Whether to only show the filmstrip (and hide the toolbar). diff --git a/lang/main.json b/lang/main.json index 7bc6a69d9..5032d66fb 100644 --- a/lang/main.json +++ b/lang/main.json @@ -1,5 +1,4 @@ { - "contactlist": "__count__ Member", "contactlist_plural": "__count__ Members", "passwordSetRemotely": "set by another member", "poweredby": "powered by", @@ -114,11 +113,6 @@ "downloadApp": "Download the app", "openApp": "Continue to __app__" }, - "bottomtoolbar": { - "chat": "Open / close chat", - "filmstrip": "Show / hide videos", - "contactlist": "View and invite members" - }, "chat":{ "nickname": { "title": "Enter a nickname in the box below", diff --git a/modules/API/API.js b/modules/API/API.js index 7bed8149a..2b8f32e9b 100644 --- a/modules/API/API.js +++ b/modules/API/API.js @@ -81,10 +81,6 @@ function initCommands() { sendAnalytics(createApiEvent('chat.toggled')); APP.UI.toggleChat(); }, - 'toggle-contact-list': () => { - sendAnalytics(createApiEvent('contact.list.toggled')); - APP.UI.toggleContactList(); - }, 'toggle-share-screen': () => { sendAnalytics(createApiEvent('screen.sharing.toggled')); toggleScreenSharing(); diff --git a/modules/API/external/external_api.js b/modules/API/external/external_api.js index 22286a5f4..7e837def1 100644 --- a/modules/API/external/external_api.js +++ b/modules/API/external/external_api.js @@ -24,7 +24,6 @@ const commands = { submitFeedback: 'submit-feedback', toggleAudio: 'toggle-audio', toggleChat: 'toggle-chat', - toggleContactList: 'toggle-contact-list', toggleFilmStrip: 'toggle-film-strip', toggleShareScreen: 'toggle-share-screen', toggleVideo: 'toggle-video' @@ -551,7 +550,6 @@ export default class JitsiMeetExternalAPI extends EventEmitter { * toggleVideo - mutes / unmutes video. no arguments * toggleFilmStrip - hides / shows the filmstrip. no arguments * toggleChat - hides / shows chat. no arguments. - * toggleContactList - hides / shows contact list. no arguments. * toggleShareScreen - starts / stops screen sharing. no arguments. * * @param {Object} commandList - The object with commands to be executed. diff --git a/modules/UI/UI.js b/modules/UI/UI.js index 9be1dad3b..510b16f4a 100644 --- a/modules/UI/UI.js +++ b/modules/UI/UI.js @@ -111,9 +111,6 @@ const UIListeners = new Map([ UI.toggleSidePanel('settings_container'); } } - ], [ - UIEvents.TOGGLE_CONTACT_LIST, - () => UI.toggleContactList() ], [ UIEvents.TOGGLE_PROFILE, () => UI.toggleSidePanel('profile_container') @@ -628,11 +625,6 @@ UI.isChatVisible = () => Chat.isVisible(); */ UI.toggleChat = () => UI.toggleSidePanel('chat_container'); -/** - * Toggles contact list panel. - */ -UI.toggleContactList = () => UI.toggleSidePanel('contacts_container'); - /** * Toggles the given side panel. * diff --git a/modules/UI/side_pannels/SidePanels.js b/modules/UI/side_pannels/SidePanels.js index 37c9d9330..5cac47d8c 100644 --- a/modules/UI/side_pannels/SidePanels.js +++ b/modules/UI/side_pannels/SidePanels.js @@ -1,7 +1,6 @@ import Chat from './chat/Chat'; import SettingsMenu from './settings/SettingsMenu'; import Profile from './profile/Profile'; -import ContactListView from './contactlist/ContactListView'; import { isButtonEnabled } from '../../../react/features/toolbox'; const SidePanels = { @@ -20,11 +19,6 @@ const SidePanels = { if (isButtonEnabled('profile')) { Profile.init(eventEmitter); } - - // Initialize contact list view - if (isButtonEnabled('contacts')) { - ContactListView.init(); - } } }; diff --git a/modules/UI/side_pannels/contactlist/ContactListView.js b/modules/UI/side_pannels/contactlist/ContactListView.js deleted file mode 100644 index dc3099e17..000000000 --- a/modules/UI/side_pannels/contactlist/ContactListView.js +++ /dev/null @@ -1,56 +0,0 @@ -/* global $, APP */ - -/* eslint-disable no-unused-vars */ -import React from 'react'; -import ReactDOM from 'react-dom'; -import { I18nextProvider } from 'react-i18next'; -import { Provider } from 'react-redux'; - -import { i18next } from '../../../../react/features/base/i18n'; -import { ContactListPanel } from '../../../../react/features/contact-list'; -/* eslint-enable no-unused-vars */ - -import UIUtil from '../../util/UIUtil'; - -/** - * Contact list. - * - * FIXME: One day this view should no longer be called "contact list" because - * the term "contact" is not used elsewhere. Normally people in the conference - * are internally refered to as "participants" or externally as "members". - */ -const ContactListView = { - /** - * Creates and appends the contact list to the side panel. - * - * @returns {void} - */ - init() { - const contactListPanelContainer = document.createElement('div'); - - contactListPanelContainer.id = 'contacts_container'; - contactListPanelContainer.className = 'sideToolbarContainer__inner'; - - $('#sideToolbarContainer').append(contactListPanelContainer); - - ReactDOM.render( - - - - - , - contactListPanelContainer - ); - }, - - /** - * Indicates if the contact list is currently visible. - * - * @return {boolean) true if the contact list is currently visible. - */ - isVisible() { - return UIUtil.isVisible(document.getElementById('contactlist')); - } -}; - -export default ContactListView; diff --git a/modules/UI/videolayout/VideoLayout.js b/modules/UI/videolayout/VideoLayout.js index 3407dea77..857fefadc 100644 --- a/modules/UI/videolayout/VideoLayout.js +++ b/modules/UI/videolayout/VideoLayout.js @@ -66,9 +66,6 @@ const VideoLayout = { init(emitter) { eventEmitter = emitter; - // Unregister listeners in case of reinitialization - this.unregisterListeners(); - localVideoThumbnail = new LocalVideo(VideoLayout, emitter); // sets default video type of local video @@ -104,20 +101,6 @@ const VideoLayout = { registerListeners() { eventEmitter.addListener(UIEvents.LOCAL_FLIPX_CHANGED, onLocalFlipXChanged); - eventEmitter.addListener(UIEvents.CONTACT_CLICKED, - this.handleVideoThumbClicked); - }, - - /** - * Unregistering listeners for UI events in Video layout component. - * - * @returns {void} - */ - unregisterListeners() { - if (this._onContactClicked) { - eventEmitter.removeListener(UIEvents.CONTACT_CLICKED, - this.handleVideoThumbClicked); - } }, initLargeVideo() { diff --git a/modules/transport/PostMessageTransportBackend.js b/modules/transport/PostMessageTransportBackend.js index ba918721b..1caa65beb 100644 --- a/modules/transport/PostMessageTransportBackend.js +++ b/modules/transport/PostMessageTransportBackend.js @@ -22,7 +22,6 @@ const LEGACY_INCOMING_METHODS = [ 'email', 'toggle-audio', 'toggle-chat', - 'toggle-contact-list', 'toggle-film-strip', 'toggle-share-screen', 'toggle-video', diff --git a/react/features/contact-list/components/ContactListItem.native.js b/react/features/contact-list/components/ContactListItem.native.js deleted file mode 100644 index e69de29bb..000000000 diff --git a/react/features/contact-list/components/ContactListItem.web.js b/react/features/contact-list/components/ContactListItem.web.js deleted file mode 100644 index b38aac6a4..000000000 --- a/react/features/contact-list/components/ContactListItem.web.js +++ /dev/null @@ -1,101 +0,0 @@ -/* global APP */ - -import PropTypes from 'prop-types'; -import React, { Component } from 'react'; - -import UIEvents from '../../../../service/UI/UIEvents'; - -import { Avatar } from '../../base/participants'; - -/** - * Implements a React {@code Component} for showing a participant's avatar and - * name and emits an event when it has been clicked. - * - * @extends Component - */ -class ContactListItem extends Component { - /** - * Default values for {@code ContactListItem} component's properties. - * - * @static - */ - static propTypes = { - /** - * The link to the participant's avatar image. - */ - avatarURI: PropTypes.string, - - /** - * An id attribute to set on the root of {@code ContactListItem}. Used - * by the torture tests. - */ - id: PropTypes.string, - - /** - * The participant's display name. - */ - name: PropTypes.string - }; - - /** - * Initializes new {@code ContactListItem} instance. - * - * @param {Object} props - The read-only properties with which the new - * instance is to be initialized. - */ - constructor(props) { - super(props); - - // Bind event handler so it is only bound once for every instance. - this._onClick = this._onClick.bind(this); - } - - /** - * Implements React's {@link Component#render()}. - * - * @inheritdoc - * @returns {ReactElement} - */ - render() { - return ( -
  • - { this.props.avatarURI ? this._renderAvatar() : null } -

    - { this.props.name } -

    -
    • - ); - } - - /** - * Emits an event notifying the contact list item for the passed in - * participant ID has been clicked. - * - * @private - * @returns {void} - */ - _onClick() { - // FIXME move this call to a pinning action, which is what's happening - // on the listener end, when the listener is properly hooked into redux. - APP.UI.emitEvent(UIEvents.CONTACT_CLICKED, this.props.id); - } - - /** - * Renders the React Element for displaying the participant's avatar image. - * - * @private - * @returns {ReactElement} - */ - _renderAvatar() { - return ( - - ); - } -} - -export default ContactListItem; diff --git a/react/features/contact-list/components/ContactListPanel.native.js b/react/features/contact-list/components/ContactListPanel.native.js deleted file mode 100644 index e69de29bb..000000000 diff --git a/react/features/contact-list/components/ContactListPanel.web.js b/react/features/contact-list/components/ContactListPanel.web.js deleted file mode 100644 index 968b9cc31..000000000 --- a/react/features/contact-list/components/ContactListPanel.web.js +++ /dev/null @@ -1,122 +0,0 @@ -/* @flow */ - -import PropTypes from 'prop-types'; -import React, { Component } from 'react'; -import { connect } from 'react-redux'; - -import { translate } from '../../base/i18n'; -import { getAvatarURL, getParticipants } from '../../base/participants'; - -import ContactListItem from './ContactListItem'; - -declare var interfaceConfig: Object; - -/** - * React component for showing a list of current conference participants. - * - * @extends Component - */ -class ContactListPanel extends Component<*> { - /** - * Default values for {@code ContactListPanel} component's properties. - * - * @static - */ - static propTypes = { - /** - * The participants to show in the contact list. - */ - _participants: PropTypes.array, - - /** - * Whether or not participant avatars should be displayed. - */ - _showAvatars: PropTypes.bool, - - /** - * Invoked to obtain translated strings. - */ - t: PropTypes.func - }; - - /** - * Implements React's {@link Component#render()}. - * - * @inheritdoc - */ - render() { - const { _participants, t } = this.props; - - return ( -
    -
    - { t('contactlist', { count: _participants.length }) } -
    -
      - { this._renderContacts() } -
    -
    - ); - } - - /** - * Renders React Elements for displaying information about each participant - * in the contact list. - * - * @private - * @returns {ReactElement[]} - */ - _renderContacts() { - const { t } = this.props; - const meString = t('me'); - - return this.props._participants.map(participant => { - const { id, local, name } = participant; - let displayName; - - // FIXME this duplicates the logic from SpeakerStats.js, but - // currently it seems that the - // interfaceConfig.DEFAULT_REMOTE_DISPLAY_NAME is freely used in - // multiple other places. A proper fix should take care of all - // usages. Also conference.js has getParticipantDisplayName which - // generates HTML span making things even harder to be cleaned up - // properly. - if (local) { - displayName - = name ? `${name} (${meString})` : meString; - } else { - displayName - = name ? name : interfaceConfig.DEFAULT_REMOTE_DISPLAY_NAME; - } - - return ( - - ); - }); - } -} - -/** - * Maps (parts of) the Redux state to the associated {@code ContactListPanel}'s - * props. - * - * @param {Object} state - The Redux state. - * @private - * @returns {{ - * _locked: boolean, - * _participants: Array - * }} - */ -function _mapStateToProps(state) { - return { - _participants: getParticipants(state), - _showAvatars: interfaceConfig.SHOW_CONTACTLIST_AVATARS - }; -} - -export default translate(connect(_mapStateToProps)(ContactListPanel)); diff --git a/react/features/contact-list/components/ParticipantCounter.native.js b/react/features/contact-list/components/ParticipantCounter.native.js deleted file mode 100644 index e69de29bb..000000000 diff --git a/react/features/contact-list/components/ParticipantCounter.web.js b/react/features/contact-list/components/ParticipantCounter.web.js deleted file mode 100644 index 2b7af4944..000000000 --- a/react/features/contact-list/components/ParticipantCounter.web.js +++ /dev/null @@ -1,59 +0,0 @@ -import PropTypes from 'prop-types'; -import React, { Component } from 'react'; -import { connect } from 'react-redux'; - -import { getParticipantCount } from '../../base/participants'; - -/** - * React component for showing a badge with the current count of conference - * participants. - * - * @extends Component - */ -class ParticipantCounter extends Component { - /** - * {@code ParticipantCounter} component's property types. - * - * @static - */ - static propTypes = { - /** - * The number of participants in the conference. - */ - _count: PropTypes.number - }; - - /** - * Implements React's {@link Component#render()}. - * - * @inheritdoc - * @returns {ReactElement} - */ - render() { - return ( - - - { this.props._count } - - - ); - } -} - -/** - * Maps (parts of) the Redux state to the associated - * {@code ParticipantCounter}'s props. - * - * @param {Object} state - The Redux state. - * @private - * @returns {{ - * _count: number - * }} - */ -function _mapStateToProps(state) { - return { - _count: getParticipantCount(state) - }; -} - -export default connect(_mapStateToProps)(ParticipantCounter); diff --git a/react/features/contact-list/components/index.js b/react/features/contact-list/components/index.js deleted file mode 100644 index 130f52806..000000000 --- a/react/features/contact-list/components/index.js +++ /dev/null @@ -1,2 +0,0 @@ -export { default as ContactListPanel } from './ContactListPanel'; -export { default as ParticipantCounter } from './ParticipantCounter'; diff --git a/react/features/contact-list/index.js b/react/features/contact-list/index.js deleted file mode 100644 index 07635cbbc..000000000 --- a/react/features/contact-list/index.js +++ /dev/null @@ -1 +0,0 @@ -export * from './components'; diff --git a/service/UI/UIEvents.js b/service/UI/UIEvents.js index fb99426d9..82dc7c3bf 100644 --- a/service/UI/UIEvents.js +++ b/service/UI/UIEvents.js @@ -38,7 +38,6 @@ export default { TOGGLE_AUDIO_ONLY: 'UI.toggle_audioonly', TOGGLE_CHAT: 'UI.toggle_chat', TOGGLE_SETTINGS: 'UI.toggle_settings', - TOGGLE_CONTACT_LIST: 'UI.toggle_contact_list', /** * Notifies that the profile toolbar button has been clicked. @@ -69,7 +68,6 @@ export default { TOGGLE_RECORDING: 'UI.toggle_recording', TOGGLE_SCREENSHARING: 'UI.toggle_screensharing', TOGGLED_SHARED_DOCUMENT: 'UI.toggled_shared_document', - CONTACT_CLICKED: 'UI.contact_clicked', HANGUP: 'UI.hangup', LOGOUT: 'UI.logout', RECORDING_TOGGLED: 'UI.recording_toggled',