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

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 (30) hide show
  1. package/dist/{HLSView-AIPLCDXY.js → HLSView-IENE4HRP.js} +2 -2
  2. package/dist/Prebuilt/components/Notifications/ChatNotifications.d.ts +2 -0
  3. package/dist/{chunk-5DCII2TP.js → chunk-U4AB6X6M.js} +945 -911
  4. package/dist/chunk-U4AB6X6M.js.map +7 -0
  5. package/dist/index.cjs.js +1450 -1400
  6. package/dist/index.cjs.js.map +4 -4
  7. package/dist/index.js +1 -1
  8. package/dist/meta.cjs.json +227 -148
  9. package/dist/meta.esbuild.json +232 -153
  10. package/package.json +6 -6
  11. package/src/Prebuilt/components/AuthToken.jsx +12 -2
  12. package/src/Prebuilt/components/Chat/Chat.jsx +5 -7
  13. package/src/Prebuilt/components/Chat/ChatBody.jsx +53 -34
  14. package/src/Prebuilt/components/Chat/ChatFooter.tsx +13 -7
  15. package/src/Prebuilt/components/Chat/ChatStates.jsx +8 -6
  16. package/src/Prebuilt/components/Chat/Navigation.tsx +1 -1
  17. package/src/Prebuilt/components/Chat/PinnedMessage.tsx +15 -17
  18. package/src/Prebuilt/components/Notifications/ChatNotifications.tsx +34 -0
  19. package/src/Prebuilt/components/Notifications/Notifications.tsx +2 -0
  20. package/src/Prebuilt/components/Polls/Voting/QuestionCard.jsx +6 -4
  21. package/src/Prebuilt/components/Polls/Voting/TimedVoting.jsx +3 -2
  22. package/src/Prebuilt/components/Polls/common/VoteCount.jsx +6 -4
  23. package/src/Prebuilt/components/Preview/PreviewJoin.tsx +1 -1
  24. package/src/Prebuilt/components/Toast/ToastConfig.jsx +0 -19
  25. package/src/Prebuilt/components/VirtualBackground/VBPicker.tsx +46 -35
  26. package/src/Prebuilt/components/hooks/useSetPinnedMessages.ts +1 -2
  27. package/src/Prebuilt/components/hooks/useUserPreferences.jsx +1 -0
  28. package/src/Prebuilt/layouts/VideoStreamingSection.tsx +10 -30
  29. package/dist/chunk-5DCII2TP.js.map +0 -7
  30. /package/dist/{HLSView-AIPLCDXY.js.map → HLSView-IENE4HRP.js.map} +0 -0
@@ -48,8 +48,9 @@ export const VBPicker = ({ background_media = [] }: VirtualBackground = {}) => {
48
48
  const addedPluginToVideoTrack = useRef(false);
49
49
  const mediaList = [...background_media.map((media: VirtualBackgroundMedia) => media?.url), ...defaultMedia];
50
50
 
51
+ const inPreview = roomState === HMSRoomState.Preview;
51
52
  // Hidden in preview as the effect will be visible in the preview tile. Needed inside the room because the peer might not be on-screen
52
- const showVideoTile = isVideoOn && isLargeRoom && roomState !== HMSRoomState.Preview;
53
+ const showVideoTile = isVideoOn && isLargeRoom && !inPreview;
53
54
 
54
55
  const clearVBState = () => {
55
56
  setBackground(HMSVirtualBackgroundTypes.NONE);
@@ -116,8 +117,8 @@ export const VBPicker = ({ background_media = [] }: VirtualBackground = {}) => {
116
117
  }
117
118
 
118
119
  return (
119
- <Box css={{ maxHeight: '100%', overflowY: 'auto', pr: '$6' }}>
120
- <Flex align="center" justify="between" css={{ w: '100%', position: 'sticky', top: 0 }}>
120
+ <Flex css={{ pr: '$6', size: '100%' }} direction="column">
121
+ <Flex align="center" justify="between" css={{ w: '100%', background: '$surface_dim', pb: '$4' }}>
121
122
  <Text variant="h6" css={{ color: '$on_surface_high' }}>
122
123
  Virtual Background
123
124
  </Text>
@@ -134,41 +135,51 @@ export const VBPicker = ({ background_media = [] }: VirtualBackground = {}) => {
134
135
  mirror={track?.facingMode !== 'environment' && mirrorLocalVideo}
135
136
  trackId={localPeer?.videoTrack}
136
137
  data-testid="preview_tile"
137
- css={{ width: '100%', height: '16rem', position: 'sticky', top: '$17' }}
138
+ css={{ width: '100%', height: '16rem' }}
138
139
  />
139
140
  ) : null}
140
141
 
141
- <VBCollection
142
- title="Effects"
143
- options={[
144
- {
145
- title: 'No effect',
146
- icon: <CrossCircleIcon style={iconDims} />,
147
- type: HMSVirtualBackgroundTypes.NONE,
148
- onClick: async () => await disableEffects(),
149
- },
150
- {
151
- title: 'Blur',
152
- icon: <BlurPersonHighIcon style={iconDims} />,
153
- type: HMSVirtualBackgroundTypes.BLUR,
154
- onClick: async () => await addPlugin({ blurPower: 0.5 }),
155
- },
156
- ]}
157
- activeBackgroundType={backgroundType || HMSVirtualBackgroundTypes.NONE}
158
- // @ts-ignore
159
- activeBackground={vbPlugin.background?.src || vbPlugin.background || HMSVirtualBackgroundTypes.NONE}
160
- />
142
+ <Box
143
+ css={{
144
+ mt: '$4',
145
+ overflowY: 'auto',
146
+ flex: '1 1 0',
147
+ mr: '-$10',
148
+ pr: '$10',
149
+ }}
150
+ >
151
+ <VBCollection
152
+ title="Effects"
153
+ options={[
154
+ {
155
+ title: 'No effect',
156
+ icon: <CrossCircleIcon style={iconDims} />,
157
+ type: HMSVirtualBackgroundTypes.NONE,
158
+ onClick: async () => await disableEffects(),
159
+ },
160
+ {
161
+ title: 'Blur',
162
+ icon: <BlurPersonHighIcon style={iconDims} />,
163
+ type: HMSVirtualBackgroundTypes.BLUR,
164
+ onClick: async () => await addPlugin({ blurPower: 0.5 }),
165
+ },
166
+ ]}
167
+ activeBackgroundType={backgroundType || HMSVirtualBackgroundTypes.NONE}
168
+ // @ts-ignore
169
+ activeBackground={vbPlugin.background?.src || vbPlugin.background || HMSVirtualBackgroundTypes.NONE}
170
+ />
161
171
 
162
- <VBCollection
163
- title="Backgrounds"
164
- options={mediaList.map(mediaURL => ({
165
- type: HMSVirtualBackgroundTypes.IMAGE,
166
- mediaURL,
167
- onClick: async () => await addPlugin({ mediaURL }),
168
- }))}
169
- activeBackgroundType={backgroundType || HMSVirtualBackgroundTypes.NONE}
170
- activeBackground={background?.src || background || HMSVirtualBackgroundTypes.NONE}
171
- />
172
- </Box>
172
+ <VBCollection
173
+ title="Backgrounds"
174
+ options={mediaList.map(mediaURL => ({
175
+ type: HMSVirtualBackgroundTypes.IMAGE,
176
+ mediaURL,
177
+ onClick: async () => await addPlugin({ mediaURL }),
178
+ }))}
179
+ activeBackgroundType={backgroundType || HMSVirtualBackgroundTypes.NONE}
180
+ activeBackground={background?.src || background || HMSVirtualBackgroundTypes.NONE}
181
+ />
182
+ </Box>
183
+ </Flex>
173
184
  );
174
185
  };
@@ -18,12 +18,11 @@ type PinnedMessage = {
18
18
  export const useSetPinnedMessages = () => {
19
19
  const hmsActions = useHMSActions();
20
20
  const vanillaStore = useHMSVanillaStore();
21
- // const pinnedMessages: PinnedMessage[] = useHMSStore(selectSessionStore(SESSION_STORE_KEY.PINNED_MESSAGES)) || [];
22
21
 
23
22
  const setPinnedMessages = useCallback(
24
23
  async (pinnedMessages: PinnedMessage[] = [], message: HMSMessage, pinnedBy: string) => {
25
24
  const peerName = vanillaStore.getState(selectPeerNameByID(message?.sender)) || message?.senderName;
26
- const newPinnedMessage = { text: '', id: message.id, pinnedBy, authorId: message?.sender || '' };
25
+ const newPinnedMessage = { text: '', id: message.id, pinnedBy, authorId: message?.senderUserId || '' };
27
26
 
28
27
  if (message && peerName) {
29
28
  newPinnedMessage['text'] = `${peerName}: ${message.message}`;
@@ -6,6 +6,7 @@ export const UserPreferencesKeys = {
6
6
  NOTIFICATIONS: 'notifications',
7
7
  UI_SETTINGS: 'uiSettings',
8
8
  RTMP_URLS: 'rtmpUrls',
9
+ USER_ID: 'userId',
9
10
  };
10
11
 
11
12
  export const defaultPreviewPreference = {
@@ -4,21 +4,11 @@ import {
4
4
  DefaultConferencingScreen_Elements,
5
5
  HLSLiveStreamingScreen_Elements,
6
6
  } from '@100mslive/types-prebuilt';
7
- import { v4 as uuid } from 'uuid';
8
- import {
9
- selectIsConnectedToRoom,
10
- selectLocalPeerName,
11
- selectLocalPeerRoleName,
12
- selectSessionStore,
13
- useHMSActions,
14
- useHMSStore,
15
- } from '@100mslive/react-sdk';
7
+ import { selectIsConnectedToRoom, selectLocalPeerRoleName, useHMSActions, useHMSStore } from '@100mslive/react-sdk';
16
8
  // @ts-ignore: No implicit Any
17
9
  import FullPageProgress from '../components/FullPageProgress';
18
- // @ts-ignore: No implicit Any
19
- import { ToastBatcher } from '../components/Toast/ToastBatcher';
20
10
  import { GridLayout } from '../components/VideoLayouts/GridLayout';
21
- import { Flex } from '../../Layout';
11
+ import { Box, Flex } from '../../Layout';
22
12
  // @ts-ignore: No implicit Any
23
13
  import { EmbedView } from './EmbedView';
24
14
  // @ts-ignore: No implicit Any
@@ -56,9 +46,6 @@ export const VideoStreamingSection = ({
56
46
  const waitingViewerRole = useWaitingViewerRole();
57
47
  const urlToIframe = useUrlToEmbed();
58
48
  const pdfAnnotatorActive = usePDFConfig();
59
- const localPeerName = useHMSStore(selectLocalPeerName);
60
- const { enabled: isChatEnabled = true, updatedBy: chatStateUpdatedBy = '' } =
61
- useHMSStore(selectSessionStore(SESSION_STORE_KEY.CHAT_STATE)) || {};
62
49
 
63
50
  useEffect(() => {
64
51
  if (!isConnected) {
@@ -74,15 +61,6 @@ export const VideoStreamingSection = ({
74
61
  // eslint-disable-next-line react-hooks/exhaustive-deps
75
62
  }, [isConnected, hmsActions]);
76
63
 
77
- useEffect(() => {
78
- if (!chatStateUpdatedBy || chatStateUpdatedBy === localPeerName) {
79
- return;
80
- }
81
- const type = isChatEnabled ? 'CHAT_RESUMED' : 'CHAT_PAUSED';
82
- const notification = { id: uuid(), message: '', type, data: { name: localPeerName } };
83
- ToastBatcher.showToast({ notification, type });
84
- }, [isChatEnabled, chatStateUpdatedBy, localPeerName]);
85
-
86
64
  if (!localPeerRole) {
87
65
  // we don't know the role yet to decide how to render UI
88
66
  return null;
@@ -112,12 +90,14 @@ export const VideoStreamingSection = ({
112
90
  }}
113
91
  >
114
92
  {ViewComponent}
115
- <SidePane
116
- screenType={screenType}
117
- // @ts-ignore
118
- tileProps={(elements as DefaultConferencingScreen_Elements)?.video_tile_layout?.grid}
119
- hideControls={hideControls}
120
- />
93
+ <Box css={{ height: '100%', maxHeight: '100%', overflowY: 'clip' }}>
94
+ <SidePane
95
+ screenType={screenType}
96
+ // @ts-ignore
97
+ tileProps={(elements as DefaultConferencingScreen_Elements)?.video_tile_layout?.grid}
98
+ hideControls={hideControls}
99
+ />
100
+ </Box>
121
101
  </Flex>
122
102
  </Suspense>
123
103
  );