74 lines
3.0 KiB
JavaScript
74 lines
3.0 KiB
JavaScript
// @flow
|
|
|
|
import React, { useCallback } from 'react';
|
|
import { useSelector } from 'react-redux';
|
|
|
|
import useContextMenu from '../../../base/components/context-menu/useContextMenu';
|
|
import { getParticipantCount, isLocalParticipantModerator } from '../../../base/participants';
|
|
import { equals } from '../../../base/redux';
|
|
import { showOverflowDrawer } from '../../../toolbox/functions.web';
|
|
import { getBreakoutRooms, isInBreakoutRoom, getCurrentRoomId } from '../../functions';
|
|
|
|
import { AutoAssignButton } from './AutoAssignButton';
|
|
import { CollapsibleRoom } from './CollapsibleRoom';
|
|
import JoinActionButton from './JoinQuickActionButton';
|
|
import { LeaveButton } from './LeaveButton';
|
|
import RoomActionEllipsis from './RoomActionEllipsis';
|
|
import { RoomContextMenu } from './RoomContextMenu';
|
|
|
|
type Props = {
|
|
|
|
/**
|
|
* Participants search string.
|
|
*/
|
|
searchString: string
|
|
}
|
|
|
|
export const RoomList = ({ searchString }: Props) => {
|
|
const currentRoomId = useSelector(getCurrentRoomId);
|
|
const rooms = Object.values(useSelector(getBreakoutRooms, equals))
|
|
.filter((room: Object) => room.id !== currentRoomId)
|
|
.sort((p1: Object, p2: Object) => (p1?.name || '').localeCompare(p2?.name || ''));
|
|
const inBreakoutRoom = useSelector(isInBreakoutRoom);
|
|
const isLocalModerator = useSelector(isLocalParticipantModerator);
|
|
const participantsCount = useSelector(getParticipantCount);
|
|
const _overflowDrawer = useSelector(showOverflowDrawer);
|
|
const [ lowerMenu, raiseMenu, toggleMenu, menuEnter, menuLeave, raiseContext ] = useContextMenu();
|
|
|
|
const onRaiseMenu = useCallback(room => target => raiseMenu(room, target), [ raiseMenu ]);
|
|
|
|
return (
|
|
<>
|
|
{inBreakoutRoom && <LeaveButton />}
|
|
{!inBreakoutRoom
|
|
&& isLocalModerator
|
|
&& participantsCount > 2
|
|
&& rooms.length > 1
|
|
&& <AutoAssignButton />}
|
|
<div id = 'breakout-rooms-list'>
|
|
{rooms.map((room: Object) => (
|
|
<React.Fragment key = { room.id }>
|
|
<CollapsibleRoom
|
|
isHighlighted = { raiseContext.entity === room }
|
|
onLeave = { lowerMenu }
|
|
onRaiseMenu = { onRaiseMenu(room) }
|
|
room = { room }
|
|
searchString = { searchString }>
|
|
{!_overflowDrawer && <>
|
|
<JoinActionButton room = { room } />
|
|
{isLocalModerator && !room.isMainRoom
|
|
&& <RoomActionEllipsis onClick = { toggleMenu(room) } />}
|
|
</>}
|
|
</CollapsibleRoom>
|
|
</React.Fragment>
|
|
))}
|
|
</div>
|
|
<RoomContextMenu
|
|
onEnter = { menuEnter }
|
|
onLeave = { menuLeave }
|
|
onSelect = { lowerMenu }
|
|
{ ...raiseContext } />
|
|
</>
|
|
);
|
|
};
|