"Fossies" - the Fresh Open Source Software Archive

Member "jitsi-meet-7305/react/features/participants-pane/components/native/RoomParticipantMenu.tsx" (26 May 2023, 4056 Bytes) of package /linux/misc/jitsi-meet-7305.tar.gz:

As a special service "Fossies" has tried to format the requested source page into HTML format using (guessed) TSX (TypeScript with React) source code syntax highlighting (style: standard) with prefixed line numbers. Alternatively you can here view or download the uninterpreted source code file. See also the last Fossies "Diffs" side-by-side code changes report for "RoomParticipantMenu.tsx": jitsi-meet_8319_vs_jitsi-meet_8615.

    1 import React, { PureComponent } from 'react';
    2 import { WithTranslation } from 'react-i18next';
    3 import { Text, TextStyle, View, ViewStyle } from 'react-native';
    4 import { connect } from 'react-redux';
    5 
    6 import { IReduxState, IStore } from '../../../app/types';
    7 import Avatar from '../../../base/avatar/components/Avatar';
    8 import { hideSheet } from '../../../base/dialog/actions';
    9 import BottomSheet from '../../../base/dialog/components/native/BottomSheet';
   10 import { bottomSheetStyles } from '../../../base/dialog/components/native/styles';
   11 import { translate } from '../../../base/i18n/functions';
   12 import { getBreakoutRooms } from '../../../breakout-rooms/functions';
   13 // eslint-disable-next-line lines-around-comment
   14 // @ts-ignore
   15 import SendToBreakoutRoom from '../../../video-menu/components/native/SendToBreakoutRoom';
   16 import styles from '../../../video-menu/components/native/styles';
   17 
   18 /**
   19  * Size of the rendered avatar in the menu.
   20  */
   21 const AVATAR_SIZE = 24;
   22 
   23 interface IProps extends WithTranslation {
   24 
   25     /**
   26      * The list of all breakout rooms.
   27      */
   28     _rooms: Array<any>;
   29 
   30     /**
   31      * The Redux dispatch function.
   32      */
   33     dispatch: IStore['dispatch'];
   34 
   35     /**
   36      * The jid of the selected participant.
   37      */
   38     participantJid: string;
   39 
   40     /**
   41      * The display name of the selected participant.
   42      */
   43     participantName: string;
   44 
   45     /**
   46      * The room the participant is in.
   47      */
   48     room: any;
   49 }
   50 
   51 /**
   52  * Class to implement a popup menu that opens upon long pressing a thumbnail.
   53  */
   54 class RoomParticipantMenu extends PureComponent<IProps> {
   55     /**
   56      * Constructor of the component.
   57      *
   58      * @inheritdoc
   59      */
   60     constructor(props: IProps) {
   61         super(props);
   62 
   63         this._onCancel = this._onCancel.bind(this);
   64         this._renderMenuHeader = this._renderMenuHeader.bind(this);
   65     }
   66 
   67     /**
   68      * Implements {@code Component#render}.
   69      *
   70      * @inheritdoc
   71      */
   72     render() {
   73         const { _rooms, participantJid, room, t } = this.props;
   74         const buttonProps = {
   75             afterClick: this._onCancel,
   76             showLabel: true,
   77             participantID: participantJid,
   78             styles: bottomSheetStyles.buttons
   79         };
   80 
   81         return (
   82             <BottomSheet
   83                 renderHeader = { this._renderMenuHeader }
   84                 showSlidingView = { true }>
   85                 <View style = { styles.contextMenuItem as ViewStyle }>
   86                     <Text style = { styles.contextMenuItemText as ViewStyle }>
   87                         {t('breakoutRooms.actions.sendToBreakoutRoom')}
   88                     </Text>
   89                 </View>
   90                 {_rooms.map(r => room.id !== r.id && (<SendToBreakoutRoom
   91                     key = { r.id }
   92                     room = { r }
   93                     { ...buttonProps } />))}
   94             </BottomSheet>
   95         );
   96     }
   97 
   98     /**
   99      * Callback to hide the {@code RemoteVideoMenu}.
  100      *
  101      * @private
  102      * @returns {boolean}
  103      */
  104     _onCancel() {
  105         this.props.dispatch(hideSheet());
  106     }
  107 
  108     /**
  109      * Function to render the menu's header.
  110      *
  111      * @returns {React$Element}
  112      */
  113     _renderMenuHeader() {
  114         const { participantName } = this.props;
  115 
  116         return (
  117             <View
  118                 style = { [
  119                     bottomSheetStyles.sheet,
  120                     styles.participantNameContainer ] as ViewStyle[] }>
  121                 <Avatar
  122                     displayName = { participantName }
  123                     size = { AVATAR_SIZE } />
  124                 <Text style = { styles.participantNameLabel as TextStyle }>
  125                     { participantName }
  126                 </Text>
  127             </View>
  128         );
  129     }
  130 }
  131 
  132 /**
  133  * Function that maps parts of Redux state tree into component props.
  134  *
  135  * @param {Object} state - Redux state.
  136  * @private
  137  * @returns {IProps}
  138  */
  139 function _mapStateToProps(state: IReduxState) {
  140     return {
  141         _rooms: Object.values(getBreakoutRooms(state))
  142     };
  143 }
  144 
  145 export default translate(connect(_mapStateToProps)(RoomParticipantMenu));