@100mslive/roomkit-react 0.1.18-alpha.0 → 0.1.18

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 (38) hide show
  1. package/dist/{HLSView-GYHK4ION.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-75O2M72S.js → chunk-2FX6MFDM.js} +4541 -4502
  13. package/dist/chunk-2FX6MFDM.js.map +7 -0
  14. package/dist/index.cjs.js +5113 -5059
  15. package/dist/index.cjs.js.map +4 -4
  16. package/dist/index.js +1 -1
  17. package/dist/meta.cjs.json +343 -225
  18. package/dist/meta.esbuild.json +353 -235
  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/Leave/DesktopLeaveRoom.tsx +4 -3
  29. package/src/Prebuilt/components/MoreSettings/SplitComponents/MwebOptions.tsx +5 -1
  30. package/src/Prebuilt/components/Polls/common/MultipleChoiceOptions.jsx +1 -1
  31. package/src/Prebuilt/components/SidePaneTabs.tsx +33 -11
  32. package/src/Prebuilt/components/hooks/useChatBlacklist.ts +7 -1
  33. package/src/Prebuilt/components/hooks/useSetPinnedMessages.ts +19 -11
  34. package/src/Prebuilt/components/hooks/useUnreadPollQuizPresent.tsx +20 -0
  35. package/dist/chunk-75O2M72S.js.map +0 -7
  36. package/src/Prebuilt/components/Chat/Chat.jsx +0 -124
  37. package/src/Prebuilt/components/Chat/ChatBody.jsx +0 -726
  38. /package/dist/{HLSView-GYHK4ION.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
- };