@100mslive/roomkit-react 0.1.18-alpha.1 → 0.1.18
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/{HLSView-MR7RYQZB.js → HLSView-XU2WQ4VV.js} +2 -2
- package/dist/Prebuilt/components/Chat/Chat.d.ts +2 -0
- package/dist/Prebuilt/components/Chat/ChatActions.d.ts +12 -0
- package/dist/Prebuilt/components/Chat/ChatBody.d.ts +8 -0
- package/dist/Prebuilt/components/Chat/ChatFooter.d.ts +2 -2
- package/dist/Prebuilt/components/Chat/ChatStates.d.ts +1 -1
- package/dist/Prebuilt/components/Chat/MwebChatOption.d.ts +1 -1
- package/dist/Prebuilt/components/Chat/PinnedMessage.d.ts +1 -3
- package/dist/Prebuilt/components/hooks/useChatBlacklist.d.ts +1 -0
- package/dist/Prebuilt/components/hooks/useSetPinnedMessages.d.ts +3 -10
- package/dist/Prebuilt/components/hooks/useUnreadPollQuizPresent.d.ts +5 -0
- package/dist/{chunk-WFHOR7AP.js → chunk-2FX6MFDM.js} +4535 -4495
- package/dist/chunk-2FX6MFDM.js.map +7 -0
- package/dist/index.cjs.js +5110 -5055
- package/dist/index.cjs.js.map +4 -4
- package/dist/index.js +1 -1
- package/dist/meta.cjs.json +341 -223
- package/dist/meta.esbuild.json +351 -233
- package/package.json +6 -6
- package/src/Prebuilt/components/Chat/Chat.tsx +108 -0
- package/src/Prebuilt/components/Chat/ChatActions.tsx +295 -0
- package/src/Prebuilt/components/Chat/ChatBody.tsx +444 -0
- package/src/Prebuilt/components/Chat/ChatFooter.tsx +9 -3
- package/src/Prebuilt/components/Chat/ChatStates.tsx +5 -0
- package/src/Prebuilt/components/Chat/MwebChatOption.tsx +1 -1
- package/src/Prebuilt/components/Chat/PinnedMessage.tsx +4 -2
- package/src/Prebuilt/components/Footer/PollsToggle.tsx +12 -3
- package/src/Prebuilt/components/MoreSettings/SplitComponents/MwebOptions.tsx +5 -1
- package/src/Prebuilt/components/Polls/common/MultipleChoiceOptions.jsx +1 -1
- package/src/Prebuilt/components/SidePaneTabs.tsx +33 -11
- package/src/Prebuilt/components/hooks/useChatBlacklist.ts +7 -1
- package/src/Prebuilt/components/hooks/useSetPinnedMessages.ts +19 -11
- package/src/Prebuilt/components/hooks/useUnreadPollQuizPresent.tsx +20 -0
- package/dist/chunk-WFHOR7AP.js.map +0 -7
- package/src/Prebuilt/components/Chat/Chat.jsx +0 -124
- package/src/Prebuilt/components/Chat/ChatBody.jsx +0 -726
- /package/dist/{HLSView-MR7RYQZB.js.map → HLSView-XU2WQ4VV.js.map} +0 -0
@@ -1,124 +0,0 @@
|
|
1
|
-
import React, { useCallback, useRef, useState } from 'react';
|
2
|
-
import { useMedia } from 'react-use';
|
3
|
-
import { selectLocalPeer, selectSessionStore, selectUnreadHMSMessagesCount } from '@100mslive/hms-video-store';
|
4
|
-
import { selectHMSMessagesCount, useHMSActions, useHMSStore } from '@100mslive/react-sdk';
|
5
|
-
import { ChevronDownIcon } from '@100mslive/react-icons';
|
6
|
-
import { Button } from '../../../Button';
|
7
|
-
import { Flex } from '../../../Layout';
|
8
|
-
import { config as cssConfig } from '../../../Theme';
|
9
|
-
import { ChatBody } from './ChatBody';
|
10
|
-
import { ChatFooter } from './ChatFooter';
|
11
|
-
import { ChatBlocked, ChatPaused } from './ChatStates';
|
12
|
-
import { PinnedMessage } from './PinnedMessage';
|
13
|
-
import { useRoomLayoutConferencingScreen } from '../../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
|
14
|
-
import { useSetPinnedMessages } from '../hooks/useSetPinnedMessages';
|
15
|
-
import { SESSION_STORE_KEY } from '../../common/constants';
|
16
|
-
|
17
|
-
export const Chat = () => {
|
18
|
-
const { elements, screenType } = useRoomLayoutConferencingScreen();
|
19
|
-
const localPeer = useHMSStore(selectLocalPeer);
|
20
|
-
const [isSelectorOpen] = useState(false);
|
21
|
-
const listRef = useRef(null);
|
22
|
-
const hmsActions = useHMSActions();
|
23
|
-
const { removePinnedMessage } = useSetPinnedMessages();
|
24
|
-
const pinnedMessages = useHMSStore(selectSessionStore(SESSION_STORE_KEY.PINNED_MESSAGES)) || [];
|
25
|
-
|
26
|
-
const blacklistedPeerIDs = useHMSStore(selectSessionStore(SESSION_STORE_KEY.CHAT_PEER_BLACKLIST)) || [];
|
27
|
-
const blacklistedPeerIDSet = new Set(blacklistedPeerIDs);
|
28
|
-
const isLocalPeerBlacklisted = blacklistedPeerIDSet.has(localPeer?.customerUserId);
|
29
|
-
const storeMessageSelector = selectHMSMessagesCount;
|
30
|
-
const { enabled: isChatEnabled = true } = useHMSStore(selectSessionStore(SESSION_STORE_KEY.CHAT_STATE)) || {};
|
31
|
-
const isMobile = useMedia(cssConfig.media.md);
|
32
|
-
|
33
|
-
let isScrolledToBottom = false;
|
34
|
-
if (listRef.current) {
|
35
|
-
const currentRef = listRef.current._outerRef;
|
36
|
-
isScrolledToBottom = currentRef.scrollHeight - currentRef.clientHeight - currentRef.scrollTop < 10;
|
37
|
-
}
|
38
|
-
|
39
|
-
const messagesCount = useHMSStore(storeMessageSelector) || 0;
|
40
|
-
const scrollToBottom = useCallback(
|
41
|
-
(unreadCount = 0) => {
|
42
|
-
if (listRef.current && listRef.current.scrollToItem && unreadCount > 0) {
|
43
|
-
listRef.current?.scrollToItem(messagesCount, 'end');
|
44
|
-
requestAnimationFrame(() => {
|
45
|
-
listRef.current?.scrollToItem(messagesCount, 'end');
|
46
|
-
});
|
47
|
-
hmsActions.setMessageRead(true);
|
48
|
-
}
|
49
|
-
},
|
50
|
-
[hmsActions, messagesCount],
|
51
|
-
);
|
52
|
-
|
53
|
-
return (
|
54
|
-
<Flex
|
55
|
-
direction="column"
|
56
|
-
css={{
|
57
|
-
size: '100%',
|
58
|
-
gap: '$4',
|
59
|
-
}}
|
60
|
-
>
|
61
|
-
{isMobile && elements?.chat?.is_overlay ? null : (
|
62
|
-
<>
|
63
|
-
<PinnedMessage clearPinnedMessage={index => removePinnedMessage(pinnedMessages, index)} />
|
64
|
-
</>
|
65
|
-
)}
|
66
|
-
|
67
|
-
<ChatBody ref={listRef} scrollToBottom={scrollToBottom} screenType={screenType} />
|
68
|
-
|
69
|
-
<ChatPaused />
|
70
|
-
|
71
|
-
{isLocalPeerBlacklisted ? <ChatBlocked /> : null}
|
72
|
-
|
73
|
-
{isMobile && elements?.chat?.is_overlay ? (
|
74
|
-
<PinnedMessage clearPinnedMessage={index => removePinnedMessage(pinnedMessages, index)} />
|
75
|
-
) : null}
|
76
|
-
|
77
|
-
{isChatEnabled && !isLocalPeerBlacklisted ? (
|
78
|
-
<ChatFooter onSend={() => scrollToBottom(1)} screenType={screenType}>
|
79
|
-
{!isSelectorOpen && !isScrolledToBottom && <NewMessageIndicator scrollToBottom={scrollToBottom} />}
|
80
|
-
</ChatFooter>
|
81
|
-
) : null}
|
82
|
-
</Flex>
|
83
|
-
);
|
84
|
-
};
|
85
|
-
|
86
|
-
const NewMessageIndicator = ({ scrollToBottom }) => {
|
87
|
-
const unreadCount = useHMSStore(selectUnreadHMSMessagesCount);
|
88
|
-
if (!unreadCount) {
|
89
|
-
return null;
|
90
|
-
}
|
91
|
-
return (
|
92
|
-
<Flex
|
93
|
-
justify="center"
|
94
|
-
css={{
|
95
|
-
width: '100%',
|
96
|
-
left: 0,
|
97
|
-
bottom: '100%',
|
98
|
-
position: 'absolute',
|
99
|
-
}}
|
100
|
-
>
|
101
|
-
<Button
|
102
|
-
variant="standard"
|
103
|
-
onClick={() => {
|
104
|
-
scrollToBottom(unreadCount);
|
105
|
-
}}
|
106
|
-
icon
|
107
|
-
css={{
|
108
|
-
p: '$3 $4',
|
109
|
-
pl: '$6',
|
110
|
-
'& > svg': { ml: '$4' },
|
111
|
-
borderRadius: '$round',
|
112
|
-
position: 'relative',
|
113
|
-
bottom: '$16',
|
114
|
-
fontSize: '$xs',
|
115
|
-
fontWeight: '$semiBold',
|
116
|
-
c: '$on_secondary_high',
|
117
|
-
}}
|
118
|
-
>
|
119
|
-
New {unreadCount === 1 ? 'message' : 'messages'}
|
120
|
-
<ChevronDownIcon height={16} width={16} />
|
121
|
-
</Button>
|
122
|
-
</Flex>
|
123
|
-
);
|
124
|
-
};
|