Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: add participants to mweb options #1654

Merged
merged 4 commits into from
Aug 21, 2023
Merged

fix: add participants to mweb options #1654

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
1fe10e4
fix: add participants to bottom sheet
KaustubhKumar05 Aug 18, 2023
dad78fa
fix: add participants to options
KaustubhKumar05 Aug 18, 2023
5f12f09
refactor: action tile
KaustubhKumar05 Aug 19, 2023
e9f4e78
fix: lint
KaustubhKumar05 Aug 19, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
78 changes: 50 additions & 28 deletions packages/roomkit-react/src/Prebuilt/components/MoreSettings/ActionTile.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,33 +1,55 @@
import React from 'react';
import { Flex } from '../../../Layout';
import { Text } from '../../../Text';
import { styled } from '../../../Theme';

export const ActionTile = ({ icon, title, active, onClick, disabled = false, setOpenOptionsSheet }) => {
return (
<Flex
direction="column"
align="center"
onClick={() => {
if (!disabled) {
onClick();
setOpenOptionsSheet(false);
}
}}
css={{
p: '$4 $2',
bg: active ? '$surface_bright' : '',
color: disabled ? '$on_surface_low' : '$on_surface_high',
gap: '$4',
r: '$1',
'&:hover': {
bg: '$surface_bright',
},
}}
>
{icon}
<Text variant="xs" css={{ fontWeight: '$semiBold', color: 'inherit', textAlign: 'center' }}>
{title}
</Text>
</Flex>
);
const ActionTileRoot = ({ active, disabled = false, children, onClick, ...props }) => (
<Flex
{...props}
css={{
flexDirection: 'column',
alignItems: 'center',
p: '$4 $2',
position: 'relative',
bg: active ? '$surface_bright' : '',
color: disabled ? '$on_surface_low' : '$on_surface_high',
gap: '$4',
r: '$1',
'&:hover': {
bg: '$surface_bright',
},
}}
onClick={() => {
if (!disabled) {
onClick();
}
}}
>
{children}
</Flex>
);

const ActionTileCount = styled(Text, {
position: 'absolute',
top: 0,
right: 0,
fontWeight: '$semiBold',
color: '$on_surface_high',
p: '$1 $2',
bg: '$surface_bright',
r: '$round',
fontSize: '$tiny !important',
});

const ActionTileTitle = styled(Text, {
fontWeight: '$semiBold',
color: 'inherit',
textAlign: 'center',
fontSize: '$xs !important',
});

export const ActionTile = {
Root: ActionTileRoot,
Title: ActionTileTitle,
Count: ActionTileCount,
};
116 changes: 78 additions & 38 deletions packages/roomkit-react/src/Prebuilt/components/MoreSettings/SplitComponents/MwebOptions.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { useClickAway } from 'react-use';
import {
selectIsConnectedToRoom,
selectIsLocalVideoEnabled,
selectPeerCount,
selectPermissions,
useHMSActions,
useHMSStore,
Expand All @@ -15,6 +16,7 @@ import {
EmojiIcon,
HandIcon,
PencilIcon,
PeopleIcon,
RecordIcon,
SettingsIcon,
} from '@100mslive/react-icons';
Expand All @@ -28,10 +30,12 @@ import { ToastManager } from '../../Toast/ToastManager';
import { ActionTile } from '.././ActionTile';
import { ChangeNameModal } from '.././ChangeNameModal';
import { MuteAllModal } from '.././MuteAllModal';
import { useSidepaneToggle } from '../../AppData/useSidepane';
import { useDropdownList } from '../../hooks/useDropdownList';
import { useIsFeatureEnabled } from '../../hooks/useFeatures';
import { useMyMetadata } from '../../hooks/useMetadata';
import { FEATURE_LIST } from '../../../common/constants';
import { getFormattedCount } from '../../../common/utils';
import { FEATURE_LIST, SIDE_PANE_OPTIONS } from '../../../common/constants';

const VirtualBackground = React.lazy(() => import('../../../plugins/VirtualBackground/VirtualBackground'));

Expand Down Expand Up @@ -62,6 +66,8 @@ export const MwebOptions = () => {
const [openSettingsSheet, setOpenSettingsSheet] = useState(false);
const [showEmojiCard, setShowEmojiCard] = useState(false);
const [showRecordingOn, setShowRecordingOn] = useState(false);
const toggleParticipants = useSidepaneToggle(SIDE_PANE_OPTIONS.PARTICIPANTS);
const peerCount = useHMSStore(selectPeerCount);

const emojiCardRef = useRef(null);
const isVideoOn = useHMSStore(selectIsLocalVideoEnabled);
Expand Down Expand Up @@ -125,53 +131,82 @@ export const MwebOptions = () => {
px: '$9',
}}
>
<ActionTile.Root
onClick={() => {
toggleParticipants();
setOpenOptionsSheet(false);
}}
>
<ActionTile.Count>{getFormattedCount(peerCount)}</ActionTile.Count>
<PeopleIcon />
<ActionTile.Title>Participants</ActionTile.Title>
</ActionTile.Root>

{isHandRaiseEnabled ? (
<ActionTile
title="Raise Hand"
icon={<HandIcon />}
onClick={toggleHandRaise}
<ActionTile.Root
active={isHandRaised}
setOpenOptionsSheet={setOpenOptionsSheet}
/>
onClick={() => {
toggleHandRaise();
setOpenOptionsSheet(false);
}}
>
<HandIcon />
<ActionTile.Title>Raise Hand</ActionTile.Title>
</ActionTile.Root>
) : null}

{isBRBEnabled ? (
<ActionTile
title="Be Right Back"
icon={<BrbIcon />}
onClick={toggleBRB}
<ActionTile.Root
active={isBRBOn}
setOpenOptionsSheet={setOpenOptionsSheet}
/>
onClick={() => {
toggleBRB();
setOpenOptionsSheet(false);
}}
>
<BrbIcon />
<ActionTile.Title>Be Right Back</ActionTile.Title>
</ActionTile.Root>
) : null}
<ActionTile
title="Change Name"
icon={<PencilIcon />}
onClick={() => updateState(MODALS.CHANGE_NAME, true)}
setOpenOptionsSheet={setOpenOptionsSheet}
/>

<ActionTile.Root
onClick={() => {
updateState(MODALS.CHANGE_NAME, true);
setOpenOptionsSheet(false);
}}
>
<PencilIcon />
<ActionTile.Title>Change Name</ActionTile.Title>
</ActionTile.Root>

{isVideoOn ? (
<Suspense fallback="">
<VirtualBackground asActionTile onVBClick={() => setOpenOptionsSheet(false)} />
</Suspense>
) : null}
<ActionTile
title="Emoji Reactions"
icon={<EmojiIcon />}
onClick={() => setShowEmojiCard(true)}
setOpenOptionsSheet={setOpenOptionsSheet}
/>
<ActionTile
title="Settings"
icon={<SettingsIcon />}
onClick={() => setOpenSettingsSheet(true)}
setOpenOptionsSheet={setOpenOptionsSheet}
/>

{isConnected && permissions?.browserRecording && (
<ActionTile
title={isBrowserRecordingOn ? 'Recording On' : 'Start Recording'}
<ActionTile.Root
onClick={() => {
setShowEmojiCard(true);
setOpenOptionsSheet(false);
}}
>
<EmojiIcon />
<ActionTile.Title>Emoji Reactions</ActionTile.Title>
</ActionTile.Root>

<ActionTile.Root
onClick={() => {
setOpenSettingsSheet(true);
setOpenOptionsSheet(false);
}}
>
<SettingsIcon />
<ActionTile.Title>Settings</ActionTile.Title>
</ActionTile.Root>

{isConnected && permissions?.browserRecording ? (
<ActionTile.Root
disabled={isHLSRunning}
icon={<RecordIcon />}
onClick={async () => {
if (isBrowserRecordingOn || isStreamingOn) {
setShowRecordingOn(true);
Expand All @@ -196,10 +231,15 @@ export const MwebOptions = () => {
}
}
}
if (isHLSRunning) {
setOpenOptionsSheet(false);
}
}}
setOpenOptionsSheet={setOpenOptionsSheet}
/>
)}
>
<RecordIcon />
<ActionTile.Title>{isBrowserRecordingOn ? 'Recording On' : 'Start Recording'}</ActionTile.Title>
</ActionTile.Root>
) : null}
</Box>
</Sheet.Content>
</Sheet.Root>
Expand Down
15 changes: 8 additions & 7 deletions packages/roomkit-react/src/Prebuilt/plugins/VirtualBackground/VirtualBackground.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,18 +77,19 @@ export const VirtualBackground = ({
}
if (asActionTile) {
return (
<ActionTile
title="Virtual Background"
icon={<VirtualBackgroundIcon />}
<ActionTile.Root
data-testid="virtual_bg_btn"
active={isVBPresent}
disabled={isVBLoading}
onClick={() => {
setIsVBOn(!isVBOn);
!isVBPresent ? addPlugin() : removePlugin();
onVBClick();
}}
active={isVBPresent}
disabled={isVBLoading}
data-testid="virtual_bg_btn"
/>
>
<VirtualBackgroundIcon />
<ActionTile.Title>Virtual Background</ActionTile.Title>
</ActionTile.Root>
);
}

Expand Down