diff --git a/react/features/remote-video-menu/components/native/RemoteVideoMenu.js b/react/features/remote-video-menu/components/native/RemoteVideoMenu.js index 83191cf60..317ee450e 100644 --- a/react/features/remote-video-menu/components/native/RemoteVideoMenu.js +++ b/react/features/remote-video-menu/components/native/RemoteVideoMenu.js @@ -1,6 +1,6 @@ // @flow -import React, { Component } from 'react'; +import React, { PureComponent } from 'react'; import { Text, View } from 'react-native'; import { Avatar } from '../../../base/avatar'; @@ -68,7 +68,7 @@ let RemoteVideoMenu_; /** * Class to implement a popup menu that opens upon long pressing a thumbnail. */ -class RemoteVideoMenu extends Component { +class RemoteVideoMenu extends PureComponent { /** * Constructor of the component. * @@ -78,6 +78,7 @@ class RemoteVideoMenu extends Component { super(props); this._onCancel = this._onCancel.bind(this); + this._renderMenuHeader = this._renderMenuHeader.bind(this); } /** @@ -94,32 +95,15 @@ class RemoteVideoMenu extends Component { styles: this.props._bottomSheetStyles.buttons }; - const buttons = []; - - if (!_disableRemoteMute) { - buttons.push(); - } - - buttons.push(); - - if (!_disableKick) { - buttons.push(); - } - - buttons.push(); - buttons.push(); - return ( - - - - - { this.props._participantDisplayName } - - - { buttons } + + { !_disableRemoteMute && } + { !_disableKick && } + + + ); } @@ -141,6 +125,31 @@ class RemoteVideoMenu extends Component { return false; } + + _renderMenuHeader: () => React$Element; + + /** + * Function to render the menu's header. + * + * @returns {React$Element} + */ + _renderMenuHeader() { + const { _bottomSheetStyles, participant } = this.props; + + return ( + + + + { this.props._participantDisplayName } + + + ); + } } /** diff --git a/react/features/remote-video-menu/components/native/styles.js b/react/features/remote-video-menu/components/native/styles.js index 24225ca82..212e39def 100644 --- a/react/features/remote-video-menu/components/native/styles.js +++ b/react/features/remote-video-menu/components/native/styles.js @@ -10,10 +10,13 @@ import { ColorPalette, createStyleSheet } from '../../../base/styles'; export default createStyleSheet({ participantNameContainer: { alignItems: 'center', - borderBottomColor: ColorPalette.darkGrey, + borderBottomColor: ColorPalette.lightGrey, borderBottomWidth: 1, + borderTopLeftRadius: 16, + borderTopRightRadius: 16, flexDirection: 'row', - height: MD_ITEM_HEIGHT + height: MD_ITEM_HEIGHT, + paddingLeft: MD_ITEM_MARGIN_PADDING }, participantNameLabel: {