@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.
- package/dist/{HLSView-IQRPLYNH.js → HLSView-DDGPZHA2.js} +3 -3
- package/dist/Prebuilt/App.d.ts +1 -0
- package/dist/Prebuilt/AppContext.d.ts +1 -0
- package/dist/Prebuilt/components/Footer/PaginatedParticipants.d.ts +5 -0
- package/dist/Prebuilt/components/Footer/RoleAccordion.d.ts +10 -3
- package/dist/Prebuilt/components/Notifications/HeadlessEndRoomListener.d.ts +2 -0
- package/dist/Prebuilt/components/PrebuiltTileElements.d.ts +2198 -0
- package/dist/{VirtualBackground-GP4ATXD3.js → VirtualBackground-UVZJVOA2.js} +3 -3
- package/dist/{chunk-Z3O2WGWV.js → chunk-6SQTFOK6.js} +2 -2
- package/dist/{chunk-Z3O2WGWV.js.map → chunk-6SQTFOK6.js.map} +1 -1
- package/dist/{chunk-2H5NIZB7.js → chunk-HUMNPIYI.js} +2 -2
- package/dist/{chunk-GLYGPYNS.js → chunk-PRM33R4R.js} +286 -251
- package/dist/chunk-PRM33R4R.js.map +7 -0
- package/dist/{conference-JD35TNH4.js → conference-N7S47TDK.js} +484 -385
- package/dist/conference-N7S47TDK.js.map +7 -0
- package/dist/index.cjs.js +1895 -1727
- package/dist/index.cjs.js.map +4 -4
- package/dist/index.js +2 -2
- package/dist/meta.cjs.json +234 -42
- package/dist/meta.esbuild.json +267 -74
- package/package.json +6 -6
- package/src/AudioLevel/AudioLevel.tsx +1 -1
- package/src/Prebuilt/App.tsx +5 -0
- package/src/Prebuilt/AppContext.tsx +2 -0
- package/src/Prebuilt/common/constants.js +1 -1
- package/src/Prebuilt/components/AppData/AppData.jsx +1 -1
- package/src/Prebuilt/components/AppData/useUISettings.js +1 -1
- package/src/Prebuilt/components/Chip.tsx +6 -2
- package/src/Prebuilt/components/Footer/PaginatedParticipants.tsx +94 -0
- package/src/Prebuilt/components/Footer/ParticipantList.jsx +53 -23
- package/src/Prebuilt/components/Footer/RoleAccordion.tsx +86 -84
- package/src/Prebuilt/components/Footer/RoleOptions.tsx +1 -1
- package/src/Prebuilt/components/Notifications/HeadlessEndRoomListener.tsx +23 -0
- package/src/Prebuilt/components/Notifications/Notifications.jsx +1 -1
- package/src/Prebuilt/components/PrebuiltTileElements.tsx +5 -0
- package/src/Prebuilt/components/Preview/PreviewJoin.tsx +9 -6
- package/src/Prebuilt/components/SidePaneTabs.tsx +31 -5
- package/src/Prebuilt/components/VideoTile.jsx +19 -34
- package/src/Prebuilt/components/conference.jsx +4 -3
- package/src/Prebuilt/components/hooks/useDropdownSelection.jsx +1 -1
- package/src/Prebuilt/layouts/SidePane.tsx +1 -0
- package/dist/chunk-GLYGPYNS.js.map +0 -7
- package/dist/conference-JD35TNH4.js.map +0 -7
- /package/dist/{HLSView-IQRPLYNH.js.map → HLSView-DDGPZHA2.js.map} +0 -0
- /package/dist/{VirtualBackground-GP4ATXD3.js.map → VirtualBackground-UVZJVOA2.js.map} +0 -0
- /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
|
-
<
|
245
|
-
<MicOffIcon />
|
246
|
-
</
|
247
|
+
<PrebuiltAudioIndicator>
|
248
|
+
<MicOffIcon height={16} width={16} />
|
249
|
+
</PrebuiltAudioIndicator>
|
247
250
|
) : (
|
248
|
-
<
|
251
|
+
<PrebuiltAudioIndicator>
|
249
252
|
<AudioLevel trackId={localPeer?.audioTrack} />
|
250
|
-
</
|
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 ?
|
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: '$
|
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,
|
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
|
-
<
|
146
|
-
<MicOffIcon />
|
147
|
-
</
|
130
|
+
<PrebuiltAudioIndicator data-testid="participant_audio_mute_icon">
|
131
|
+
<MicOffIcon style={iconDims} />
|
132
|
+
</PrebuiltAudioIndicator>
|
148
133
|
) : (
|
149
|
-
<
|
150
|
-
<AudioLevel trackId={audioTrack?.id}
|
151
|
-
</
|
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}
|
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
|
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
|
-
<
|
189
|
-
<HandIcon
|
190
|
-
</
|
173
|
+
<PrebuiltAttributeBox data-testid="raiseHand_icon_onTile">
|
174
|
+
<HandIcon style={iconDims} />
|
175
|
+
</PrebuiltAttributeBox>
|
191
176
|
) : null}
|
192
177
|
{isBRB ? (
|
193
|
-
<
|
194
|
-
<BrbTileIcon
|
195
|
-
</
|
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=
|
118
|
+
if (!isConnectedToRoom && ![HMSRoomState.Reconnecting, HMSRoomState.Disconnected].includes(roomState)) {
|
119
|
+
return <FullPageProgress text={roomState === HMSRoomState.Connecting ? 'Joining...' : ''} />;
|
119
120
|
}
|
120
121
|
|
121
122
|
return (
|