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

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 (46) hide show
  1. package/dist/{HLSView-IQRPLYNH.js → HLSView-DDGPZHA2.js} +3 -3
  2. package/dist/Prebuilt/App.d.ts +1 -0
  3. package/dist/Prebuilt/AppContext.d.ts +1 -0
  4. package/dist/Prebuilt/components/Footer/PaginatedParticipants.d.ts +5 -0
  5. package/dist/Prebuilt/components/Footer/RoleAccordion.d.ts +10 -3
  6. package/dist/Prebuilt/components/Notifications/HeadlessEndRoomListener.d.ts +2 -0
  7. package/dist/Prebuilt/components/PrebuiltTileElements.d.ts +2198 -0
  8. package/dist/{VirtualBackground-GP4ATXD3.js → VirtualBackground-UVZJVOA2.js} +3 -3
  9. package/dist/{chunk-Z3O2WGWV.js → chunk-6SQTFOK6.js} +2 -2
  10. package/dist/{chunk-Z3O2WGWV.js.map → chunk-6SQTFOK6.js.map} +1 -1
  11. package/dist/{chunk-2H5NIZB7.js → chunk-HUMNPIYI.js} +2 -2
  12. package/dist/{chunk-GLYGPYNS.js → chunk-PRM33R4R.js} +286 -251
  13. package/dist/chunk-PRM33R4R.js.map +7 -0
  14. package/dist/{conference-JD35TNH4.js → conference-N7S47TDK.js} +484 -385
  15. package/dist/conference-N7S47TDK.js.map +7 -0
  16. package/dist/index.cjs.js +1895 -1727
  17. package/dist/index.cjs.js.map +4 -4
  18. package/dist/index.js +2 -2
  19. package/dist/meta.cjs.json +234 -42
  20. package/dist/meta.esbuild.json +267 -74
  21. package/package.json +6 -6
  22. package/src/AudioLevel/AudioLevel.tsx +1 -1
  23. package/src/Prebuilt/App.tsx +5 -0
  24. package/src/Prebuilt/AppContext.tsx +2 -0
  25. package/src/Prebuilt/common/constants.js +1 -1
  26. package/src/Prebuilt/components/AppData/AppData.jsx +1 -1
  27. package/src/Prebuilt/components/AppData/useUISettings.js +1 -1
  28. package/src/Prebuilt/components/Chip.tsx +6 -2
  29. package/src/Prebuilt/components/Footer/PaginatedParticipants.tsx +94 -0
  30. package/src/Prebuilt/components/Footer/ParticipantList.jsx +53 -23
  31. package/src/Prebuilt/components/Footer/RoleAccordion.tsx +86 -84
  32. package/src/Prebuilt/components/Footer/RoleOptions.tsx +1 -1
  33. package/src/Prebuilt/components/Notifications/HeadlessEndRoomListener.tsx +23 -0
  34. package/src/Prebuilt/components/Notifications/Notifications.jsx +1 -1
  35. package/src/Prebuilt/components/PrebuiltTileElements.tsx +5 -0
  36. package/src/Prebuilt/components/Preview/PreviewJoin.tsx +9 -6
  37. package/src/Prebuilt/components/SidePaneTabs.tsx +31 -5
  38. package/src/Prebuilt/components/VideoTile.jsx +19 -34
  39. package/src/Prebuilt/components/conference.jsx +4 -3
  40. package/src/Prebuilt/components/hooks/useDropdownSelection.jsx +1 -1
  41. package/src/Prebuilt/layouts/SidePane.tsx +1 -0
  42. package/dist/chunk-GLYGPYNS.js.map +0 -7
  43. package/dist/conference-JD35TNH4.js.map +0 -7
  44. /package/dist/{HLSView-IQRPLYNH.js.map → HLSView-DDGPZHA2.js.map} +0 -0
  45. /package/dist/{VirtualBackground-GP4ATXD3.js.map → VirtualBackground-UVZJVOA2.js.map} +0 -0
  46. /package/dist/{chunk-2H5NIZB7.js.map → chunk-HUMNPIYI.js.map} +0 -0
@@ -11,7 +11,9 @@ import {
11
11
  useParticipants,
12
12
  usePreviewJoin,
13
13
  useRecordingStreaming,
14
+ // @ts-ignore: No implicit Any
14
15
  } from '@100mslive/react-sdk';
16
+ // @ts-ignore: No implicit Any
15
17
  import { MicOffIcon, SettingsIcon } from '@100mslive/react-icons';
16
18
  import { Avatar, Box, config as cssConfig, Flex, flexCenter, styled, StyledVideoTile, Text, Video } from '../../..';
17
19
  import { AudioLevel } from '../../../AudioLevel';
@@ -29,6 +31,7 @@ import TileConnection from '../Connection/TileConnection';
29
31
  import FullPageProgress from '../FullPageProgress';
30
32
  // @ts-ignore: No implicit Any
31
33
  import { Logo } from '../Header/HeaderComponents';
34
+ import { PrebuiltAudioIndicator } from '../PrebuiltTileElements';
32
35
  // @ts-ignore: No implicit Any
33
36
  import SettingsModal from '../Settings/SettingsModal';
34
37
  // @ts-ignore: No implicit Any
@@ -232,7 +235,7 @@ export const PreviewTile = ({ name, error }: { name: string; error?: boolean })
232
235
 
233
236
  {!isVideoOn ? (
234
237
  <StyledVideoTile.AvatarContainer>
235
- <Avatar name={name} data-testid="preview_avatar_tile" />
238
+ <Avatar name={name} data-testid="preview_avatar_tile" size="medium" />
236
239
  </StyledVideoTile.AvatarContainer>
237
240
  ) : null}
238
241
  </>
@@ -241,13 +244,13 @@ export const PreviewTile = ({ name, error }: { name: string; error?: boolean })
241
244
  ) : null}
242
245
 
243
246
  {showMuteIcon ? (
244
- <StyledVideoTile.AudioIndicator>
245
- <MicOffIcon />
246
- </StyledVideoTile.AudioIndicator>
247
+ <PrebuiltAudioIndicator>
248
+ <MicOffIcon height={16} width={16} />
249
+ </PrebuiltAudioIndicator>
247
250
  ) : (
248
- <StyledVideoTile.AudioIndicator size="medium">
251
+ <PrebuiltAudioIndicator>
249
252
  <AudioLevel trackId={localPeer?.audioTrack} />
250
- </StyledVideoTile.AudioIndicator>
253
+ </PrebuiltAudioIndicator>
251
254
  )}
252
255
  </StyledVideoTile.Container>
253
256
  );
@@ -1,13 +1,14 @@
1
1
  import React, { useEffect, useState } from 'react';
2
2
  import { useMedia } from 'react-use';
3
- import { ConferencingScreen } from '@100mslive/types-prebuilt';
3
+ import { ConferencingScreen, DefaultConferencingScreen_Elements } from '@100mslive/types-prebuilt';
4
4
  import { selectPeerCount, useHMSStore } from '@100mslive/react-sdk';
5
5
  import { CrossIcon } from '@100mslive/react-icons';
6
6
  // @ts-ignore: No implicit Any
7
7
  import { Chat } from './Chat/Chat';
8
+ import { PaginatedParticipants } from './Footer/PaginatedParticipants';
8
9
  // @ts-ignore: No implicit Any
9
10
  import { ParticipantList } from './Footer/ParticipantList';
10
- import { config as cssConfig, Flex, IconButton, Tabs, Text } from '../..';
11
+ import { Box, config as cssConfig, Flex, IconButton, Tabs, Text } from '../..';
11
12
  import { Tooltip } from '../../Tooltip';
12
13
  // @ts-ignore: No implicit Any
13
14
  import { useRoomLayoutConferencingScreen } from '../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
@@ -46,6 +47,7 @@ export const SidePaneTabs = React.memo<{
46
47
  const toggleParticipants = useSidepaneToggle(SIDE_PANE_OPTIONS.PARTICIPANTS);
47
48
  const resetSidePane = useSidepaneReset();
48
49
  const [activeTab, setActiveTab] = useState(active);
50
+ const [activeRole, setActiveRole] = useState('');
49
51
  const peerCount = useHMSStore(selectPeerCount);
50
52
  const { elements } = useRoomLayoutConferencingScreen();
51
53
  const showChat = !!elements?.chat;
@@ -53,6 +55,7 @@ export const SidePaneTabs = React.memo<{
53
55
  const hideTabs = !(showChat && showParticipants);
54
56
  const isMobile = useMedia(cssConfig.media.md);
55
57
  const isOverlayChat = !!elements?.chat?.is_overlay && isMobile;
58
+ const { off_stage_roles = [] } = (elements as DefaultConferencingScreen_Elements)?.on_stage_exp || {};
56
59
  const isChatOpen = useIsSidepaneTypeOpen(SIDE_PANE_OPTIONS.CHAT);
57
60
 
58
61
  useEffect(() => {
@@ -69,6 +72,25 @@ export const SidePaneTabs = React.memo<{
69
72
  setActiveTab(active);
70
73
  }, [active]);
71
74
 
75
+ if (activeRole) {
76
+ return (
77
+ <Flex
78
+ direction="column"
79
+ css={{
80
+ color: '$on_primary_high',
81
+ h: '100%',
82
+ marginTop: hideControls && isOverlayChat ? '$17' : '0',
83
+ transition: 'margin 0.3s ease-in-out',
84
+ position: 'relative',
85
+ }}
86
+ >
87
+ <Box css={{ position: 'absolute', left: 0, top: 0, size: '100%', zIndex: 21, bg: '$surface_dim' }}>
88
+ <PaginatedParticipants roleName={activeRole} onBack={() => setActiveRole('')} />
89
+ </Box>
90
+ </Flex>
91
+ );
92
+ }
93
+
72
94
  return (
73
95
  <Flex
74
96
  direction="column"
@@ -95,7 +117,11 @@ export const SidePaneTabs = React.memo<{
95
117
  )}
96
118
  </Text>
97
119
 
98
- {showChat ? <Chat screenType={screenType} /> : <ParticipantList />}
120
+ {showChat ? (
121
+ <Chat screenType={screenType} />
122
+ ) : (
123
+ <ParticipantList offStageRoles={off_stage_roles} onActive={setActiveRole} />
124
+ )}
99
125
  </>
100
126
  ) : (
101
127
  <Tabs.Root
@@ -129,7 +155,7 @@ export const SidePaneTabs = React.memo<{
129
155
  </Tabs.Trigger>
130
156
  </Tabs.List>
131
157
  <Tabs.Content value={SIDE_PANE_OPTIONS.PARTICIPANTS} css={{ p: 0 }}>
132
- <ParticipantList />
158
+ <ParticipantList offStageRoles={off_stage_roles} onActive={setActiveRole} />
133
159
  </Tabs.Content>
134
160
  <Tabs.Content value={SIDE_PANE_OPTIONS.CHAT} css={{ p: 0 }}>
135
161
  <Chat screenType={screenType} />
@@ -141,7 +167,7 @@ export const SidePaneTabs = React.memo<{
141
167
 
142
168
  {isOverlayChat && isChatOpen ? null : (
143
169
  <IconButton
144
- css={{ position: 'absolute', right: '$10', top: '$11', '@md': { top: '$8', right: '$8' } }}
170
+ css={{ position: 'absolute', right: '$9', top: '$11', '@md': { top: '$8', right: '$6' } }}
145
171
  onClick={e => {
146
172
  e.stopPropagation();
147
173
  if (activeTab === SIDE_PANE_OPTIONS.CHAT) {
@@ -1,4 +1,4 @@
1
- import React, { Fragment, useCallback, useMemo, useRef, useState } from 'react';
1
+ import React, { Fragment, useCallback, useRef, useState } from 'react';
2
2
  import { useMedia } from 'react-use';
3
3
  import {
4
4
  selectAudioTrackByPeerID,
@@ -22,9 +22,12 @@ import { config as cssConfig } from '../../Theme';
22
22
  import { Video } from '../../Video';
23
23
  import { StyledVideoTile } from '../../VideoTile';
24
24
  import { getVideoTileLabel } from './peerTileUtils';
25
+ import { PrebuiltAttributeBox, PrebuiltAudioIndicator } from './PrebuiltTileElements';
25
26
  import { useSetAppDataByKey, useUISettings } from './AppData/useUISettings';
26
27
  import { APP_DATA, SESSION_STORE_KEY, UI_SETTINGS } from '../common/constants';
27
28
 
29
+ const iconDims = { height: '1rem', width: '1rem' };
30
+
28
31
  const Tile = ({
29
32
  peerId,
30
33
  trackId,
@@ -74,26 +77,8 @@ const Tile = ({
74
77
  const ref = useRef(null);
75
78
  const calculatedHeight = ref.current?.clientHeight || '';
76
79
  const calculatedWidth = ref.current?.clientWidth || '';
77
-
78
80
  const isTileBigEnoughToShowStats = calculatedHeight >= 180 && calculatedWidth >= 180;
79
-
80
- const [avatarSize, attribBoxSize] = useMemo(() => {
81
- if (!calculatedWidth || !calculatedHeight) {
82
- return [undefined, undefined];
83
- }
84
- let avatarSize = 'large';
85
- if (calculatedWidth <= 150 || calculatedHeight <= 150) {
86
- avatarSize = 'small';
87
- } else if (calculatedWidth <= 300 || calculatedHeight <= 300) {
88
- avatarSize = 'medium';
89
- }
90
- let attribBoxSize = 'medium';
91
- if (calculatedWidth <= 180 || calculatedHeight <= 180) {
92
- attribBoxSize = 'small';
93
- }
94
-
95
- return [avatarSize, attribBoxSize];
96
- }, [calculatedWidth, calculatedHeight]);
81
+ const avatarSize = 'medium';
97
82
 
98
83
  return (
99
84
  <StyledVideoTile.Root
@@ -142,13 +127,13 @@ const Tile = ({
142
127
 
143
128
  {!hideAudioMuteOnTile ? (
144
129
  isAudioMuted ? (
145
- <StyledVideoTile.AudioIndicator data-testid="participant_audio_mute_icon" size={attribBoxSize}>
146
- <MicOffIcon />
147
- </StyledVideoTile.AudioIndicator>
130
+ <PrebuiltAudioIndicator data-testid="participant_audio_mute_icon">
131
+ <MicOffIcon style={iconDims} />
132
+ </PrebuiltAudioIndicator>
148
133
  ) : (
149
- <StyledVideoTile.AudioIndicator size={attribBoxSize}>
150
- <AudioLevel trackId={audioTrack?.id} size={attribBoxSize} />
151
- </StyledVideoTile.AudioIndicator>
134
+ <PrebuiltAudioIndicator>
135
+ <AudioLevel trackId={audioTrack?.id} />
136
+ </PrebuiltAudioIndicator>
152
137
  )
153
138
  ) : null}
154
139
  {isMouseHovered || (isDragabble && isMobile) ? (
@@ -160,7 +145,7 @@ const Tile = ({
160
145
  enableSpotlightingPeer={enableSpotlightingPeer}
161
146
  />
162
147
  ) : null}
163
- {!hideMetadataOnTile && <PeerMetadata peerId={peerId} size={attribBoxSize} />}
148
+ {!hideMetadataOnTile && <PeerMetadata peerId={peerId} />}
164
149
 
165
150
  <TileConnection
166
151
  hideLabel={hideParticipantNameOnTile}
@@ -177,7 +162,7 @@ const Tile = ({
177
162
  );
178
163
  };
179
164
 
180
- const PeerMetadata = ({ peerId, size }) => {
165
+ const PeerMetadata = ({ peerId }) => {
181
166
  const metaData = useHMSStore(selectPeerMetadata(peerId));
182
167
  const isBRB = metaData?.isBRBOn || false;
183
168
  const isHandRaised = useHMSStore(selectHasPeerHandRaised(peerId));
@@ -185,14 +170,14 @@ const PeerMetadata = ({ peerId, size }) => {
185
170
  return (
186
171
  <Fragment>
187
172
  {isHandRaised ? (
188
- <StyledVideoTile.AttributeBox size={size} data-testid="raiseHand_icon_onTile">
189
- <HandIcon width={24} height={24} />
190
- </StyledVideoTile.AttributeBox>
173
+ <PrebuiltAttributeBox data-testid="raiseHand_icon_onTile">
174
+ <HandIcon style={iconDims} />
175
+ </PrebuiltAttributeBox>
191
176
  ) : null}
192
177
  {isBRB ? (
193
- <StyledVideoTile.AttributeBox size={size} data-testid="brb_icon_onTile">
194
- <BrbTileIcon width={22} height={22} />
195
- </StyledVideoTile.AttributeBox>
178
+ <PrebuiltAttributeBox data-testid="brb_icon_onTile">
179
+ <BrbTileIcon style={iconDims} />
180
+ </PrebuiltAttributeBox>
196
181
  ) : null}
197
182
  </Fragment>
198
183
  );
@@ -29,7 +29,7 @@ import { APP_DATA, isAndroid, isIOS, isIPadOS } from '../common/constants';
29
29
  const Conference = () => {
30
30
  const navigate = useNavigate();
31
31
  const { roomId, role } = useParams();
32
- const { userName, endpoints } = useHMSPrebuiltContext();
32
+ const { userName, endpoints, onJoin: onJoinFunc } = useHMSPrebuiltContext();
33
33
  const screenProps = useRoomLayoutConferencingScreen();
34
34
  const { isPreviewScreenEnabled } = useRoomLayoutPreviewScreen();
35
35
  const roomState = useHMSStore(selectRoomState);
@@ -109,13 +109,14 @@ const Conference = () => {
109
109
  }, [authTokenInAppData, endpoints?.init, hmsActions, isConnectedToRoom, isPreviewScreenEnabled, roomState, userName]);
110
110
 
111
111
  useEffect(() => {
112
+ onJoinFunc?.();
112
113
  return () => {
113
114
  PictureInPicture.stop().catch(error => console.error('stopping pip', error));
114
115
  };
115
116
  }, []);
116
117
 
117
- if (!isConnectedToRoom) {
118
- return <FullPageProgress text="Joining..." />;
118
+ if (!isConnectedToRoom && ![HMSRoomState.Reconnecting, HMSRoomState.Disconnected].includes(roomState)) {
119
+ return <FullPageProgress text={roomState === HMSRoomState.Connecting ? 'Joining...' : ''} />;
119
120
  }
120
121
 
121
122
  return (
@@ -1,3 +1,3 @@
1
1
  export const useDropdownSelection = () => {
2
- return '$primary_dim';
2
+ return '$surface_bright';
3
3
  };
@@ -64,6 +64,7 @@ const SidePane = ({
64
64
  <VideoTile
65
65
  peerId={activeScreensharePeerId}
66
66
  trackId={trackId}
67
+ width="100%"
67
68
  height={225}
68
69
  rootCSS={{ p: 0, alignSelf: 'start', flexShrink: 0 }}
69
70
  {...tileLayout}