@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.
Files changed (37) hide show
  1. package/dist/{HLSView-MR7RYQZB.js → HLSView-XU2WQ4VV.js} +2 -2
  2. package/dist/Prebuilt/components/Chat/Chat.d.ts +2 -0
  3. package/dist/Prebuilt/components/Chat/ChatActions.d.ts +12 -0
  4. package/dist/Prebuilt/components/Chat/ChatBody.d.ts +8 -0
  5. package/dist/Prebuilt/components/Chat/ChatFooter.d.ts +2 -2
  6. package/dist/Prebuilt/components/Chat/ChatStates.d.ts +1 -1
  7. package/dist/Prebuilt/components/Chat/MwebChatOption.d.ts +1 -1
  8. package/dist/Prebuilt/components/Chat/PinnedMessage.d.ts +1 -3
  9. package/dist/Prebuilt/components/hooks/useChatBlacklist.d.ts +1 -0
  10. package/dist/Prebuilt/components/hooks/useSetPinnedMessages.d.ts +3 -10
  11. package/dist/Prebuilt/components/hooks/useUnreadPollQuizPresent.d.ts +5 -0
  12. package/dist/{chunk-WFHOR7AP.js → chunk-2FX6MFDM.js} +4535 -4495
  13. package/dist/chunk-2FX6MFDM.js.map +7 -0
  14. package/dist/index.cjs.js +5110 -5055
  15. package/dist/index.cjs.js.map +4 -4
  16. package/dist/index.js +1 -1
  17. package/dist/meta.cjs.json +341 -223
  18. package/dist/meta.esbuild.json +351 -233
  19. package/package.json +6 -6
  20. package/src/Prebuilt/components/Chat/Chat.tsx +108 -0
  21. package/src/Prebuilt/components/Chat/ChatActions.tsx +295 -0
  22. package/src/Prebuilt/components/Chat/ChatBody.tsx +444 -0
  23. package/src/Prebuilt/components/Chat/ChatFooter.tsx +9 -3
  24. package/src/Prebuilt/components/Chat/ChatStates.tsx +5 -0
  25. package/src/Prebuilt/components/Chat/MwebChatOption.tsx +1 -1
  26. package/src/Prebuilt/components/Chat/PinnedMessage.tsx +4 -2
  27. package/src/Prebuilt/components/Footer/PollsToggle.tsx +12 -3
  28. package/src/Prebuilt/components/MoreSettings/SplitComponents/MwebOptions.tsx +5 -1
  29. package/src/Prebuilt/components/Polls/common/MultipleChoiceOptions.jsx +1 -1
  30. package/src/Prebuilt/components/SidePaneTabs.tsx +33 -11
  31. package/src/Prebuilt/components/hooks/useChatBlacklist.ts +7 -1
  32. package/src/Prebuilt/components/hooks/useSetPinnedMessages.ts +19 -11
  33. package/src/Prebuilt/components/hooks/useUnreadPollQuizPresent.tsx +20 -0
  34. package/dist/chunk-WFHOR7AP.js.map +0 -7
  35. package/src/Prebuilt/components/Chat/Chat.jsx +0 -124
  36. package/src/Prebuilt/components/Chat/ChatBody.jsx +0 -726
  37. /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
- };