@100mslive/roomkit-react 0.1.14-alpha.1 → 0.1.14
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/{HLSView-JTO7E2KW.js → HLSView-662T7R7H.js} +2 -2
- package/dist/Prebuilt/common/constants.d.ts +1 -0
- package/dist/Prebuilt/common/hooks.d.ts +24 -0
- package/dist/Prebuilt/components/Chat/{Navigation.d.ts → ArrowNavigation.d.ts} +1 -2
- package/dist/Prebuilt/components/Chat/ChatFooter.d.ts +2 -4
- package/dist/Prebuilt/components/Chat/ChatSelector.d.ts +5 -0
- package/dist/Prebuilt/components/Chat/ChatSelectorContainer.d.ts +2 -0
- package/dist/Prebuilt/components/Chat/ChatStates.d.ts +3 -0
- package/dist/Prebuilt/components/Chat/StickIndicator.d.ts +5 -0
- package/dist/Prebuilt/components/Chat/useUnreadCount.d.ts +4 -0
- package/dist/Prebuilt/components/ChatSettings.d.ts +2 -0
- package/dist/Prebuilt/components/Preview/PreviewForm.d.ts +2 -1
- package/dist/Prebuilt/components/SidePaneTabs.d.ts +0 -2
- package/dist/Prebuilt/components/TileMenu/TileMenuContent.d.ts +19 -0
- package/dist/Prebuilt/components/VirtualBackground/VBOption.d.ts +2 -1
- package/dist/Prebuilt/components/hooks/useChatBlacklist.d.ts +2 -1
- package/dist/Prebuilt/components/hooks/useSetPinnedMessages.d.ts +1 -1
- package/dist/Prebuilt/layouts/SidePane.d.ts +1 -3
- package/dist/{chunk-TOKLXTAS.js → chunk-2B7YYNHQ.js} +1651 -1229
- package/dist/chunk-2B7YYNHQ.js.map +7 -0
- package/dist/index.cjs.js +2074 -1609
- package/dist/index.cjs.js.map +4 -4
- package/dist/index.js +1 -1
- package/dist/meta.cjs.json +451 -115
- package/dist/meta.esbuild.json +457 -121
- package/package.json +6 -6
- package/src/Prebuilt/common/constants.ts +1 -0
- package/src/Prebuilt/common/{hooks.js → hooks.ts} +4 -5
- package/src/Prebuilt/components/AppData/AppData.tsx +1 -0
- package/src/Prebuilt/components/AppData/useUISettings.js +2 -1
- package/src/Prebuilt/components/AuthToken.jsx +16 -8
- package/src/Prebuilt/components/Chat/{Navigation.tsx → ArrowNavigation.tsx} +3 -19
- package/src/Prebuilt/components/Chat/Chat.jsx +15 -44
- package/src/Prebuilt/components/Chat/ChatBody.jsx +114 -69
- package/src/Prebuilt/components/Chat/ChatFooter.tsx +128 -130
- package/src/Prebuilt/components/Chat/ChatSelector.tsx +225 -0
- package/src/Prebuilt/components/Chat/ChatSelectorContainer.tsx +158 -0
- package/src/Prebuilt/components/Chat/{ChatStates.jsx → ChatStates.tsx} +4 -4
- package/src/Prebuilt/components/Chat/PinnedMessage.tsx +59 -41
- package/src/Prebuilt/components/Chat/StickIndicator.tsx +24 -0
- package/src/Prebuilt/components/Chat/useUnreadCount.ts +19 -0
- package/src/Prebuilt/components/ChatSettings.tsx +68 -0
- package/src/Prebuilt/components/Footer/ParticipantList.jsx +2 -1
- package/src/Prebuilt/components/Header/ParticipantFilter.jsx +2 -1
- package/src/Prebuilt/components/Notifications/ChatNotifications.tsx +1 -1
- package/src/Prebuilt/components/Preview/PreviewForm.tsx +3 -0
- package/src/Prebuilt/components/Preview/PreviewJoin.tsx +2 -1
- package/src/Prebuilt/components/SidePaneTabs.tsx +48 -50
- package/src/Prebuilt/components/TileMenu/{TileMenuContent.jsx → TileMenuContent.tsx} +72 -41
- package/src/Prebuilt/components/VirtualBackground/VBCollection.tsx +2 -1
- package/src/Prebuilt/components/VirtualBackground/VBOption.tsx +3 -0
- package/src/Prebuilt/components/VirtualBackground/VBToggle.jsx +1 -1
- package/src/Prebuilt/components/hooks/useChatBlacklist.ts +8 -6
- package/src/Prebuilt/components/hooks/useSetPinnedMessages.ts +2 -7
- package/src/Prebuilt/layouts/SidePane.tsx +1 -5
- package/src/Prebuilt/provider/roomLayoutProvider/constants/index.ts +1 -0
- package/dist/chunk-TOKLXTAS.js.map +0 -7
- package/src/Prebuilt/components/Chat/ChatSelector.jsx +0 -161
- package/src/Prebuilt/components/Chat/ChatSelectorContainer.jsx +0 -81
- package/src/Prebuilt/components/Chat/useUnreadCount.js +0 -17
- /package/dist/{HLSView-JTO7E2KW.js.map → HLSView-662T7R7H.js.map} +0 -0
@@ -1,161 +0,0 @@
|
|
1
|
-
import React, { useMemo, useState } from 'react';
|
2
|
-
import {
|
3
|
-
selectMessagesUnreadCountByPeerID,
|
4
|
-
selectMessagesUnreadCountByRole,
|
5
|
-
selectRemotePeers,
|
6
|
-
selectUnreadHMSMessagesCount,
|
7
|
-
useHMSStore,
|
8
|
-
} from '@100mslive/react-sdk';
|
9
|
-
import { CheckIcon } from '@100mslive/react-icons';
|
10
|
-
import { Box, Dropdown, Flex, HorizontalDivider, Text, Tooltip } from '../../../';
|
11
|
-
import { ParticipantSearch } from '../Footer/ParticipantList';
|
12
|
-
import { useFilteredRoles } from '../../common/hooks';
|
13
|
-
|
14
|
-
const ChatDotIcon = () => {
|
15
|
-
return <Box css={{ size: '$6', bg: '$primary_default', mx: '$2', r: '$round' }} />;
|
16
|
-
};
|
17
|
-
|
18
|
-
const SelectorItem = ({ value, active, onClick, unreadCount }) => {
|
19
|
-
return (
|
20
|
-
<Dropdown.Item
|
21
|
-
data-testid="chat_members"
|
22
|
-
css={{ align: 'center', px: '$10', bg: '$surface_default' }}
|
23
|
-
onClick={onClick}
|
24
|
-
>
|
25
|
-
<Text variant="sm">{value}</Text>
|
26
|
-
<Flex align="center" css={{ ml: 'auto', color: '$on_primary_high' }}>
|
27
|
-
{unreadCount > 0 && (
|
28
|
-
<Tooltip title={`${unreadCount} unread`}>
|
29
|
-
<Box css={{ mr: active ? '$3' : 0 }}>
|
30
|
-
<ChatDotIcon />
|
31
|
-
</Box>
|
32
|
-
</Tooltip>
|
33
|
-
)}
|
34
|
-
{active && <CheckIcon width={16} height={16} />}
|
35
|
-
</Flex>
|
36
|
-
</Dropdown.Item>
|
37
|
-
);
|
38
|
-
};
|
39
|
-
|
40
|
-
const SelectorHeader = React.memo(({ children }) => {
|
41
|
-
return (
|
42
|
-
<Box css={{ flexShrink: 0 }}>
|
43
|
-
<HorizontalDivider space={4} />
|
44
|
-
<Text variant="md" css={{ p: '$4 $10', fontWeight: '$semiBold' }}>
|
45
|
-
{children}
|
46
|
-
</Text>
|
47
|
-
</Box>
|
48
|
-
);
|
49
|
-
});
|
50
|
-
|
51
|
-
const Everyone = React.memo(({ onSelect, active }) => {
|
52
|
-
const unreadCount = useHMSStore(selectUnreadHMSMessagesCount);
|
53
|
-
return (
|
54
|
-
<SelectorItem
|
55
|
-
value="Everyone"
|
56
|
-
active={active}
|
57
|
-
unreadCount={unreadCount}
|
58
|
-
onClick={() => {
|
59
|
-
onSelect({ role: '', peerId: '', selection: 'Everyone' });
|
60
|
-
}}
|
61
|
-
/>
|
62
|
-
);
|
63
|
-
});
|
64
|
-
|
65
|
-
const RoleItem = React.memo(({ onSelect, role, active }) => {
|
66
|
-
const unreadCount = useHMSStore(selectMessagesUnreadCountByRole(role));
|
67
|
-
return (
|
68
|
-
<SelectorItem
|
69
|
-
value={role}
|
70
|
-
active={active}
|
71
|
-
unreadCount={unreadCount}
|
72
|
-
onClick={() => {
|
73
|
-
onSelect({ role: role, selection: role });
|
74
|
-
}}
|
75
|
-
/>
|
76
|
-
);
|
77
|
-
});
|
78
|
-
|
79
|
-
const PeerItem = ({ onSelect, peerId, name, active }) => {
|
80
|
-
const unreadCount = useHMSStore(selectMessagesUnreadCountByPeerID(peerId));
|
81
|
-
return (
|
82
|
-
<SelectorItem
|
83
|
-
value={name}
|
84
|
-
active={active}
|
85
|
-
unreadCount={unreadCount}
|
86
|
-
onClick={() => {
|
87
|
-
onSelect({ role: '', peerId, selection: name });
|
88
|
-
}}
|
89
|
-
/>
|
90
|
-
);
|
91
|
-
};
|
92
|
-
|
93
|
-
const VirtualizedSelectItemList = ({ peers, selectedRole, selectedPeerId, searchValue, onSelect }) => {
|
94
|
-
const roles = useFilteredRoles();
|
95
|
-
const filteredPeers = useMemo(
|
96
|
-
() =>
|
97
|
-
peers.filter(
|
98
|
-
// search should be empty or search phrase should be included in name
|
99
|
-
peer => !searchValue || peer.name.toLowerCase().includes(searchValue.toLowerCase()),
|
100
|
-
),
|
101
|
-
[peers, searchValue],
|
102
|
-
);
|
103
|
-
|
104
|
-
const listItems = useMemo(() => {
|
105
|
-
const selectItems = [<Everyone onSelect={onSelect} active={!selectedRole && !selectedPeerId} />];
|
106
|
-
|
107
|
-
roles.length > 0 && selectItems.push(<SelectorHeader>Roles</SelectorHeader>);
|
108
|
-
roles.forEach(userRole =>
|
109
|
-
selectItems.push(
|
110
|
-
<RoleItem key={userRole} active={selectedRole === userRole} role={userRole} onSelect={onSelect} />,
|
111
|
-
),
|
112
|
-
);
|
113
|
-
|
114
|
-
filteredPeers.length > 0 && selectItems.push(<SelectorHeader>Participants</SelectorHeader>);
|
115
|
-
filteredPeers.forEach(peer =>
|
116
|
-
selectItems.push(
|
117
|
-
<PeerItem
|
118
|
-
key={peer.id}
|
119
|
-
name={peer.name}
|
120
|
-
peerId={peer.id}
|
121
|
-
active={peer.id === selectedPeerId}
|
122
|
-
onSelect={onSelect}
|
123
|
-
/>,
|
124
|
-
),
|
125
|
-
);
|
126
|
-
|
127
|
-
return selectItems;
|
128
|
-
}, [onSelect, selectedRole, selectedPeerId, roles, filteredPeers]);
|
129
|
-
|
130
|
-
return (
|
131
|
-
<Dropdown.Group css={{ overflowY: 'auto', maxHeight: '$64', bg: '$surface_default' }}>
|
132
|
-
<Box>
|
133
|
-
{listItems.map((item, index) => (
|
134
|
-
<Box key={index}>{item}</Box>
|
135
|
-
))}
|
136
|
-
</Box>
|
137
|
-
</Dropdown.Group>
|
138
|
-
);
|
139
|
-
};
|
140
|
-
|
141
|
-
export const ChatSelector = ({ role, peerId, onSelect }) => {
|
142
|
-
const peers = useHMSStore(selectRemotePeers);
|
143
|
-
const [search, setSearch] = useState('');
|
144
|
-
|
145
|
-
return (
|
146
|
-
<>
|
147
|
-
{peers.length > 0 && (
|
148
|
-
<Box css={{ px: '$4' }}>
|
149
|
-
<ParticipantSearch onSearch={setSearch} placeholder="Search for participants" />
|
150
|
-
</Box>
|
151
|
-
)}
|
152
|
-
<VirtualizedSelectItemList
|
153
|
-
selectedRole={role}
|
154
|
-
selectedPeerId={peerId}
|
155
|
-
onSelect={onSelect}
|
156
|
-
peers={peers}
|
157
|
-
searchValue={search}
|
158
|
-
/>
|
159
|
-
</>
|
160
|
-
);
|
161
|
-
};
|
@@ -1,81 +0,0 @@
|
|
1
|
-
import React, { useState } from 'react';
|
2
|
-
import { useMedia } from 'react-use';
|
3
|
-
import { ChevronDownIcon, ChevronUpIcon, CrossIcon } from '@100mslive/react-icons';
|
4
|
-
import { Dropdown } from '../../../Dropdown';
|
5
|
-
import { Flex } from '../../../Layout';
|
6
|
-
import { Sheet } from '../../../Sheet';
|
7
|
-
import { Text } from '../../../Text';
|
8
|
-
import { config as cssConfig } from '../../../Theme';
|
9
|
-
import { ChatSelector } from './ChatSelector';
|
10
|
-
import { textEllipsis } from '../../../utils';
|
11
|
-
|
12
|
-
export const ChatSelectorContainer = ({ onSelect, role, peerId, selection }) => {
|
13
|
-
const [open, setOpen] = useState(false);
|
14
|
-
const isMobile = useMedia(cssConfig.media.md);
|
15
|
-
|
16
|
-
return (
|
17
|
-
<Flex align="center" css={{ mb: '$8' }}>
|
18
|
-
<Text variant="tiny" css={{ color: '$on_surface_medium', textTransform: 'uppercase' }}>
|
19
|
-
Send To
|
20
|
-
</Text>
|
21
|
-
|
22
|
-
<Dropdown.Root open={open} onOpenChange={value => setOpen(value)}>
|
23
|
-
<Dropdown.Trigger
|
24
|
-
asChild
|
25
|
-
data-testid="participant_list_filter"
|
26
|
-
css={{
|
27
|
-
border: '1px solid $border_bright',
|
28
|
-
r: '$0',
|
29
|
-
p: '$1 $2',
|
30
|
-
ml: '$8',
|
31
|
-
}}
|
32
|
-
tabIndex={0}
|
33
|
-
>
|
34
|
-
<Flex align="center" css={{ c: '$on_surface_medium' }}>
|
35
|
-
<Text variant="tiny" css={{ ...textEllipsis(80), textTransform: 'uppercase', c: '$on_surface_high' }}>
|
36
|
-
{selection}
|
37
|
-
</Text>
|
38
|
-
{open ? <ChevronUpIcon width={16} height={16} /> : <ChevronDownIcon width={16} height={16} />}
|
39
|
-
</Flex>
|
40
|
-
</Dropdown.Trigger>
|
41
|
-
|
42
|
-
<Dropdown.Content
|
43
|
-
css={{
|
44
|
-
w: '$64',
|
45
|
-
overflow: 'hidden',
|
46
|
-
maxHeight: 'unset',
|
47
|
-
bg: '$surface_default',
|
48
|
-
}}
|
49
|
-
align="start"
|
50
|
-
sideOffset={8}
|
51
|
-
>
|
52
|
-
{isMobile ? (
|
53
|
-
<Sheet.Root open={open} onOpenChange={value => setOpen(value)}>
|
54
|
-
<Sheet.Content css={{ pt: '$8' }}>
|
55
|
-
<Sheet.Title
|
56
|
-
css={{
|
57
|
-
display: 'flex',
|
58
|
-
w: '100%',
|
59
|
-
justifyContent: 'space-between',
|
60
|
-
px: '$10',
|
61
|
-
pb: '$4',
|
62
|
-
mb: '$8',
|
63
|
-
borderBottom: '1px solid $border_bright',
|
64
|
-
}}
|
65
|
-
>
|
66
|
-
<Text css={{ color: '$on_surface_medium', fontWeight: '$semiBold' }}>Send message to</Text>
|
67
|
-
<Sheet.Close css={{ color: '$on_surface_medium' }}>
|
68
|
-
<CrossIcon />
|
69
|
-
</Sheet.Close>
|
70
|
-
</Sheet.Title>
|
71
|
-
<ChatSelector onSelect={onSelect} role={role} peerId={peerId} />
|
72
|
-
</Sheet.Content>
|
73
|
-
</Sheet.Root>
|
74
|
-
) : (
|
75
|
-
<ChatSelector onSelect={onSelect} role={role} peerId={peerId} />
|
76
|
-
)}
|
77
|
-
</Dropdown.Content>
|
78
|
-
</Dropdown.Root>
|
79
|
-
</Flex>
|
80
|
-
);
|
81
|
-
};
|
@@ -1,17 +0,0 @@
|
|
1
|
-
import {
|
2
|
-
selectMessagesUnreadCountByPeerID,
|
3
|
-
selectMessagesUnreadCountByRole,
|
4
|
-
selectUnreadHMSMessagesCount,
|
5
|
-
useHMSStore,
|
6
|
-
} from '@100mslive/react-sdk';
|
7
|
-
|
8
|
-
export const useUnreadCount = ({ role, peerId }) => {
|
9
|
-
const unreadCountSelector = role
|
10
|
-
? selectMessagesUnreadCountByRole(role)
|
11
|
-
: peerId
|
12
|
-
? selectMessagesUnreadCountByPeerID(peerId)
|
13
|
-
: selectUnreadHMSMessagesCount;
|
14
|
-
|
15
|
-
const unreadCount = useHMSStore(unreadCountSelector);
|
16
|
-
return unreadCount;
|
17
|
-
};
|
File without changes
|