@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.
Files changed (61) hide show
  1. package/dist/{HLSView-JTO7E2KW.js → HLSView-662T7R7H.js} +2 -2
  2. package/dist/Prebuilt/common/constants.d.ts +1 -0
  3. package/dist/Prebuilt/common/hooks.d.ts +24 -0
  4. package/dist/Prebuilt/components/Chat/{Navigation.d.ts → ArrowNavigation.d.ts} +1 -2
  5. package/dist/Prebuilt/components/Chat/ChatFooter.d.ts +2 -4
  6. package/dist/Prebuilt/components/Chat/ChatSelector.d.ts +5 -0
  7. package/dist/Prebuilt/components/Chat/ChatSelectorContainer.d.ts +2 -0
  8. package/dist/Prebuilt/components/Chat/ChatStates.d.ts +3 -0
  9. package/dist/Prebuilt/components/Chat/StickIndicator.d.ts +5 -0
  10. package/dist/Prebuilt/components/Chat/useUnreadCount.d.ts +4 -0
  11. package/dist/Prebuilt/components/ChatSettings.d.ts +2 -0
  12. package/dist/Prebuilt/components/Preview/PreviewForm.d.ts +2 -1
  13. package/dist/Prebuilt/components/SidePaneTabs.d.ts +0 -2
  14. package/dist/Prebuilt/components/TileMenu/TileMenuContent.d.ts +19 -0
  15. package/dist/Prebuilt/components/VirtualBackground/VBOption.d.ts +2 -1
  16. package/dist/Prebuilt/components/hooks/useChatBlacklist.d.ts +2 -1
  17. package/dist/Prebuilt/components/hooks/useSetPinnedMessages.d.ts +1 -1
  18. package/dist/Prebuilt/layouts/SidePane.d.ts +1 -3
  19. package/dist/{chunk-TOKLXTAS.js → chunk-2B7YYNHQ.js} +1651 -1229
  20. package/dist/chunk-2B7YYNHQ.js.map +7 -0
  21. package/dist/index.cjs.js +2074 -1609
  22. package/dist/index.cjs.js.map +4 -4
  23. package/dist/index.js +1 -1
  24. package/dist/meta.cjs.json +451 -115
  25. package/dist/meta.esbuild.json +457 -121
  26. package/package.json +6 -6
  27. package/src/Prebuilt/common/constants.ts +1 -0
  28. package/src/Prebuilt/common/{hooks.js → hooks.ts} +4 -5
  29. package/src/Prebuilt/components/AppData/AppData.tsx +1 -0
  30. package/src/Prebuilt/components/AppData/useUISettings.js +2 -1
  31. package/src/Prebuilt/components/AuthToken.jsx +16 -8
  32. package/src/Prebuilt/components/Chat/{Navigation.tsx → ArrowNavigation.tsx} +3 -19
  33. package/src/Prebuilt/components/Chat/Chat.jsx +15 -44
  34. package/src/Prebuilt/components/Chat/ChatBody.jsx +114 -69
  35. package/src/Prebuilt/components/Chat/ChatFooter.tsx +128 -130
  36. package/src/Prebuilt/components/Chat/ChatSelector.tsx +225 -0
  37. package/src/Prebuilt/components/Chat/ChatSelectorContainer.tsx +158 -0
  38. package/src/Prebuilt/components/Chat/{ChatStates.jsx → ChatStates.tsx} +4 -4
  39. package/src/Prebuilt/components/Chat/PinnedMessage.tsx +59 -41
  40. package/src/Prebuilt/components/Chat/StickIndicator.tsx +24 -0
  41. package/src/Prebuilt/components/Chat/useUnreadCount.ts +19 -0
  42. package/src/Prebuilt/components/ChatSettings.tsx +68 -0
  43. package/src/Prebuilt/components/Footer/ParticipantList.jsx +2 -1
  44. package/src/Prebuilt/components/Header/ParticipantFilter.jsx +2 -1
  45. package/src/Prebuilt/components/Notifications/ChatNotifications.tsx +1 -1
  46. package/src/Prebuilt/components/Preview/PreviewForm.tsx +3 -0
  47. package/src/Prebuilt/components/Preview/PreviewJoin.tsx +2 -1
  48. package/src/Prebuilt/components/SidePaneTabs.tsx +48 -50
  49. package/src/Prebuilt/components/TileMenu/{TileMenuContent.jsx → TileMenuContent.tsx} +72 -41
  50. package/src/Prebuilt/components/VirtualBackground/VBCollection.tsx +2 -1
  51. package/src/Prebuilt/components/VirtualBackground/VBOption.tsx +3 -0
  52. package/src/Prebuilt/components/VirtualBackground/VBToggle.jsx +1 -1
  53. package/src/Prebuilt/components/hooks/useChatBlacklist.ts +8 -6
  54. package/src/Prebuilt/components/hooks/useSetPinnedMessages.ts +2 -7
  55. package/src/Prebuilt/layouts/SidePane.tsx +1 -5
  56. package/src/Prebuilt/provider/roomLayoutProvider/constants/index.ts +1 -0
  57. package/dist/chunk-TOKLXTAS.js.map +0 -7
  58. package/src/Prebuilt/components/Chat/ChatSelector.jsx +0 -161
  59. package/src/Prebuilt/components/Chat/ChatSelectorContainer.jsx +0 -81
  60. package/src/Prebuilt/components/Chat/useUnreadCount.js +0 -17
  61. /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
- };