"Fossies" - the Fresh Open Source Software Archive

Member "jitsi-meet-7315/react/features/participants-pane/components/breakout-rooms/components/web/RoomParticipantContextMenu.tsx" (2 Jun 2023, 3659 Bytes) of package /linux/misc/jitsi-meet-7315.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 "RoomParticipantContextMenu.tsx": jitsi-meet_8319_vs_jitsi-meet_8615.

    1 import React, { useCallback, useMemo } from 'react';
    2 import { useTranslation } from 'react-i18next';
    3 import { useSelector } from 'react-redux';
    4 import { makeStyles } from 'tss-react/mui';
    5 
    6 import Avatar from '../../../../../base/avatar/components/Avatar';
    7 import { isLocalParticipantModerator } from '../../../../../base/participants/functions';
    8 import ContextMenu from '../../../../../base/ui/components/web/ContextMenu';
    9 import ContextMenuItemGroup from '../../../../../base/ui/components/web/ContextMenuItemGroup';
   10 import { getBreakoutRooms } from '../../../../../breakout-rooms/functions';
   11 import { showOverflowDrawer } from '../../../../../toolbox/functions.web';
   12 import SendToRoomButton from '../../../../../video-menu/components/web/SendToRoomButton';
   13 import { AVATAR_SIZE } from '../../../../constants';
   14 
   15 
   16 interface IProps {
   17 
   18     /**
   19      * Room and participant jid reference.
   20      */
   21     entity?: {
   22         jid: string;
   23         participantName: string;
   24         room: any;
   25     };
   26 
   27     /**
   28      * Target elements against which positioning calculations are made.
   29      */
   30     offsetTarget?: HTMLElement | null;
   31 
   32     /**
   33      * Callback for the mouse entering the component.
   34      */
   35     onEnter: () => void;
   36 
   37     /**
   38      * Callback for the mouse leaving the component.
   39      */
   40     onLeave: () => void;
   41 
   42     /**
   43      * Callback for making a selection in the menu.
   44      */
   45     onSelect: (force?: any) => void;
   46 }
   47 
   48 const useStyles = makeStyles()(theme => {
   49     return {
   50         text: {
   51             color: theme.palette.text02,
   52             padding: '10px 16px',
   53             height: '40px',
   54             overflow: 'hidden',
   55             display: 'flex',
   56             alignItems: 'center',
   57             boxSizing: 'border-box'
   58         }
   59     };
   60 });
   61 
   62 export const RoomParticipantContextMenu = ({
   63     entity,
   64     offsetTarget,
   65     onEnter,
   66     onLeave,
   67     onSelect
   68 }: IProps) => {
   69     const { classes: styles } = useStyles();
   70     const { t } = useTranslation();
   71     const isLocalModerator = useSelector(isLocalParticipantModerator);
   72     const lowerMenu = useCallback(() => onSelect(true), [ onSelect ]);
   73     const rooms: Object = useSelector(getBreakoutRooms);
   74     const overflowDrawer = useSelector(showOverflowDrawer);
   75 
   76     const breakoutRoomsButtons = useMemo(() => Object.values(rooms || {}).map((room: any) => {
   77         if (room.id !== entity?.room?.id) {
   78             return (<SendToRoomButton
   79                 key = { room.id }
   80                 onClick = { lowerMenu }
   81                 participantID = { entity?.jid ?? '' }
   82                 room = { room } />);
   83         }
   84 
   85         return null;
   86     })
   87     .filter(Boolean), [ entity, rooms ]);
   88 
   89     return isLocalModerator ? (
   90         <ContextMenu
   91             entity = { entity }
   92             isDrawerOpen = { Boolean(entity) }
   93             offsetTarget = { offsetTarget }
   94             onClick = { lowerMenu }
   95             onDrawerClose = { onSelect }
   96             onMouseEnter = { onEnter }
   97             onMouseLeave = { onLeave }>
   98             {overflowDrawer && entity?.jid && <ContextMenuItemGroup
   99                 actions = { [ {
  100                     accessibilityLabel: entity?.participantName,
  101                     customIcon: <Avatar
  102                         displayName = { entity?.participantName }
  103                         size = { AVATAR_SIZE } />,
  104                     text: entity?.participantName
  105                 } ] } />}
  106             <ContextMenuItemGroup>
  107                 <div className = { styles.text }>
  108                     {t('breakoutRooms.actions.sendToBreakoutRoom')}
  109                 </div>
  110                 {breakoutRoomsButtons}
  111             </ContextMenuItemGroup>
  112         </ContextMenu>
  113     ) : null;
  114 };