haskal
/
jiti-meet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

open drawer for breakout rooms

This commit is contained in:
Horatiu Muresan 2023-01-18 14:07:42 +02:00
parent 20fd9f55ab
commit 739cf5627b
4 changed files with 7 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
react/features/base/ui/components/web/ContextMenu.tsx
View File

@ -2,13 +2,11 @@ import React, { ReactNode, useEffect, useLayoutEffect, useRef, useState } from '
import { useSelector } from 'react-redux'; import { useSelector } from 'react-redux';
import { makeStyles } from 'tss-react/mui'; import { makeStyles } from 'tss-react/mui';
import { IReduxState } from '../../../../app/types';
// eslint-disable-next-line lines-around-comment // eslint-disable-next-line lines-around-comment
// @ts-ignore // @ts-ignore
import { Drawer, JitsiPortal } from '../../../../toolbox/components/web'; import { Drawer, JitsiPortal } from '../../../../toolbox/components/web';
import { showOverflowDrawer } from '../../../../toolbox/functions.web'; import { showOverflowDrawer } from '../../../../toolbox/functions.web';
import participantsPaneTheme from '../../../components/themes/participantsPaneTheme.json'; import participantsPaneTheme from '../../../components/themes/participantsPaneTheme.json';
import { isMobileBrowser } from '../../../environment/utils';
import { withPixelLineHeight } from '../../../styles/functions.web'; import { withPixelLineHeight } from '../../../styles/functions.web';
/** /**
@ -161,7 +159,7 @@ const ContextMenu = ({
const [ isHidden, setIsHidden ] = useState(true); const [ isHidden, setIsHidden ] = useState(true);
const containerRef = useRef<HTMLDivElement | null>(null); const containerRef = useRef<HTMLDivElement | null>(null);
const { classes: styles, cx } = useStyles(); const { classes: styles, cx } = useStyles();
const _overflowDrawer = useSelector((state: IReduxState) => showOverflowDrawer(state) && isMobileBrowser()); const _overflowDrawer = useSelector(showOverflowDrawer);
useLayoutEffect(() => { useLayoutEffect(() => {
if (_overflowDrawer) { if (_overflowDrawer) {

3
react/features/participants-pane/components/breakout-rooms/components/web/CollapsibleRoom.tsx
View File

@ -5,7 +5,6 @@ import { makeStyles } from 'tss-react/mui';
import { IReduxState } from '../../../../../app/types'; import { IReduxState } from '../../../../../app/types';
import ListItem from '../../../../../base/components/participants-pane-list/ListItem'; import ListItem from '../../../../../base/components/participants-pane-list/ListItem';
import { isMobileBrowser } from '../../../../../base/environment/utils';
import Icon from '../../../../../base/icons/components/Icon'; import Icon from '../../../../../base/icons/components/Icon';
import { IconArrowDown, IconArrowUp } from '../../../../../base/icons/svg'; import { IconArrowDown, IconArrowUp } from '../../../../../base/icons/svg';
import { isLocalParticipantModerator } from '../../../../../base/participants/functions'; import { isLocalParticipantModerator } from '../../../../../base/participants/functions';
@ -129,7 +128,7 @@ export const CollapsibleRoom = ({
onRaiseMenu(target); onRaiseMenu(target);
}, [ onRaiseMenu ]); }, [ onRaiseMenu ]);
const { defaultRemoteDisplayName } = useSelector((state: IReduxState) => state['features/base/config']); const { defaultRemoteDisplayName } = useSelector((state: IReduxState) => state['features/base/config']);
const overflowDrawer: boolean = useSelector((state: IReduxState) => showOverflowDrawer(state) && isMobileBrowser()); const overflowDrawer: boolean = useSelector(showOverflowDrawer);
const moderator = useSelector(isLocalParticipantModerator); const moderator = useSelector(isLocalParticipantModerator);
const arrow = (<div className = { styles.arrowContainer }> const arrow = (<div className = { styles.arrowContainer }>

7
react/features/participants-pane/components/breakout-rooms/components/web/RoomList.js
View File

@ -41,10 +41,11 @@ export const RoomList = ({ searchString }: Props) => {
const isLocalModerator = useSelector(isLocalParticipantModerator); const isLocalModerator = useSelector(isLocalParticipantModerator);
const showAutoAssign = useSelector(isAutoAssignParticipantsVisible); const showAutoAssign = useSelector(isAutoAssignParticipantsVisible);
const { hideJoinRoomButton } = useSelector(getBreakoutRoomsConfig); const { hideJoinRoomButton } = useSelector(getBreakoutRoomsConfig);
const _overflowDrawer = useSelector(state => showOverflowDrawer(state) && isMobileBrowser()); const overflowDrawer = useSelector(showOverflowDrawer);
const [ lowerMenu, raiseMenu, toggleMenu, menuEnter, menuLeave, raiseContext ] = useContextMenu(); const [ lowerMenu, raiseMenu, toggleMenu, menuEnter, menuLeave, raiseContext ] = useContextMenu();
const [ lowerParticipantMenu, raiseParticipantMenu, toggleParticipantMenu, const [ lowerParticipantMenu, raiseParticipantMenu, toggleParticipantMenu,
participantMenuEnter, participantMenuLeave, raiseParticipantContext ] = useContextMenu(); participantMenuEnter, participantMenuLeave, raiseParticipantContext ] = useContextMenu();
const hideMenu = useCallback(() => !overflowDrawer && lowerMenu(), [ overflowDrawer, lowerMenu ]);
const onRaiseMenu = useCallback(room => target => raiseMenu(room, target), [ raiseMenu ]); const onRaiseMenu = useCallback(room => target => raiseMenu(room, target), [ raiseMenu ]);
return ( return (
@ -56,14 +57,14 @@ export const RoomList = ({ searchString }: Props) => {
<React.Fragment key = { room.id }> <React.Fragment key = { room.id }>
<CollapsibleRoom <CollapsibleRoom
isHighlighted = { raiseContext.entity === room } isHighlighted = { raiseContext.entity === room }
onLeave = { lowerMenu } onLeave = { hideMenu }
onRaiseMenu = { onRaiseMenu(room) } onRaiseMenu = { onRaiseMenu(room) }
participantContextEntity = { raiseParticipantContext.entity } participantContextEntity = { raiseParticipantContext.entity }
raiseParticipantContextMenu = { raiseParticipantMenu } raiseParticipantContextMenu = { raiseParticipantMenu }
room = { room } room = { room }
searchString = { searchString } searchString = { searchString }
toggleParticipantMenu = { toggleParticipantMenu }> toggleParticipantMenu = { toggleParticipantMenu }>
{!_overflowDrawer && <> {!isMobileBrowser() && <>
{!hideJoinRoomButton && <JoinActionButton room = { room } />} {!hideJoinRoomButton && <JoinActionButton room = { room } />}
{isLocalModerator && !room.isMainRoom {isLocalModerator && !room.isMainRoom
&& <RoomActionEllipsis onClick = { toggleMenu(room) } />} && <RoomActionEllipsis onClick = { toggleMenu(room) } />}

3
react/features/participants-pane/components/web/MeetingParticipants.tsx
View File

@ -8,7 +8,6 @@ import { IReduxState } from '../../../app/types';
import { rejectParticipantAudio } from '../../../av-moderation/actions'; import { rejectParticipantAudio } from '../../../av-moderation/actions';
import participantsPaneTheme from '../../../base/components/themes/participantsPaneTheme.json'; import participantsPaneTheme from '../../../base/components/themes/participantsPaneTheme.json';
import { isToolbarButtonEnabled } from '../../../base/config/functions.web'; import { isToolbarButtonEnabled } from '../../../base/config/functions.web';
import { isMobileBrowser } from '../../../base/environment/utils';
import { MEDIA_TYPE } from '../../../base/media/constants'; import { MEDIA_TYPE } from '../../../base/media/constants';
import { getParticipantById, isScreenShareParticipant } from '../../../base/participants/functions'; import { getParticipantById, isScreenShareParticipant } from '../../../base/participants/functions';
import { connect } from '../../../base/redux/functions'; import { connect } from '../../../base/redux/functions';
@ -171,7 +170,7 @@ function _mapStateToProps(state: IReduxState): Object {
const participantsCount = sortedParticipantIds.length; const participantsCount = sortedParticipantIds.length;
const showInviteButton = shouldRenderInviteButton(state) && isToolbarButtonEnabled('invite', state); const showInviteButton = shouldRenderInviteButton(state) && isToolbarButtonEnabled('invite', state);
const overflowDrawer = showOverflowDrawer(state) && isMobileBrowser(); const overflowDrawer = showOverflowDrawer(state);
const currentRoomId = getCurrentRoomId(state); const currentRoomId = getCurrentRoomId(state);
const currentRoom = getBreakoutRooms(state)[currentRoomId]; const currentRoom = getBreakoutRooms(state)[currentRoomId];