@100mslive/roomkit-react 0.3.19-alpha.9 → 0.3.20-alpha.0
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-5SR3RWXG.css → HLSView-5JM7XVA4.css} +3 -3
- package/dist/{HLSView-5SR3RWXG.css.map → HLSView-5JM7XVA4.css.map} +1 -1
- package/dist/{HLSView-EYFJ7YDU.js → HLSView-VBMAXHBP.js} +2 -2
- package/dist/Prebuilt/components/VirtualBackground/VBHandler.d.ts +1 -0
- package/dist/Prebuilt/components/peerTileUtils.d.ts +7 -0
- package/dist/{chunk-3FZB2LJY.js → chunk-JCM6FDIX.js} +275 -248
- package/dist/chunk-JCM6FDIX.js.map +7 -0
- package/dist/index.cjs.css +2 -2
- package/dist/index.cjs.css.map +1 -1
- package/dist/index.cjs.js +916 -895
- package/dist/index.cjs.js.map +4 -4
- package/dist/index.css +2 -2
- package/dist/index.css.map +1 -1
- package/dist/index.js +1 -1
- package/dist/meta.cjs.json +94 -93
- package/dist/meta.esbuild.json +105 -104
- package/package.json +7 -7
- package/src/Prebuilt/AppStateContext.tsx +8 -5
- package/src/Prebuilt/components/EndCallFeedback/Feedback.tsx +3 -2
- package/src/Prebuilt/components/EndCallFeedback/FeedbackForm.tsx +16 -6
- package/src/Prebuilt/components/EndCallFeedback/ThankyouView.tsx +1 -1
- package/src/Prebuilt/components/InsetTile.tsx +1 -1
- package/src/Prebuilt/components/Leave/LeaveSessionContent.tsx +3 -1
- package/src/Prebuilt/components/Notifications/TrackUnmuteModal.tsx +1 -1
- package/src/Prebuilt/components/PIP/PIPChat.tsx +11 -4
- package/src/Prebuilt/components/ScreenshareTile.tsx +2 -2
- package/src/Prebuilt/components/Settings/SettingsModal.jsx +1 -2
- package/src/Prebuilt/components/TileMenu/TileMenu.tsx +7 -6
- package/src/Prebuilt/components/TileMenu/TileMenuContent.tsx +3 -3
- package/src/Prebuilt/components/VideoLayouts/EqualProminence.tsx +4 -2
- package/src/Prebuilt/components/VideoTile.tsx +2 -2
- package/src/Prebuilt/components/VirtualBackground/VBHandler.tsx +15 -3
- package/src/Prebuilt/components/VirtualBackground/VBPicker.tsx +21 -16
- package/src/Prebuilt/components/{peerTileUtils.jsx → peerTileUtils.tsx} +21 -6
- package/dist/Prebuilt/components/VirtualBackground/util.d.ts +0 -1
- package/dist/chunk-3FZB2LJY.js.map +0 -7
- package/src/Prebuilt/components/VirtualBackground/util.tsx +0 -13
- /package/dist/{HLSView-EYFJ7YDU.js.map → HLSView-VBMAXHBP.js.map} +0 -0
@@ -39,7 +39,7 @@ export const FeedbackModal = ({
|
|
39
39
|
return (
|
40
40
|
<Sheet.Root open={index !== FEEBACK_INDEX.INIT} onOpenChange={onOpenChange}>
|
41
41
|
<Sheet.Content
|
42
|
-
css={{ bg: '$surface_dim', p: '$
|
42
|
+
css={{ bg: '$surface_dim', p: '$10', overflowY: 'auto' }}
|
43
43
|
onPointerDownOutside={avoidDefaultDomBehavior}
|
44
44
|
onInteractOutside={avoidDefaultDomBehavior}
|
45
45
|
>
|
@@ -75,6 +75,7 @@ export const FeedbackContent = ({
|
|
75
75
|
}) => {
|
76
76
|
const { feedback } = useRoomLayoutLeaveScreen();
|
77
77
|
const { endpoints } = useHMSPrebuiltContext();
|
78
|
+
const isMobile = useMedia(cssConfig.media.md);
|
78
79
|
const hmsActions = useHMSActions();
|
79
80
|
const [comment, setComment] = useState('');
|
80
81
|
const [selectedReasons, setSelectedReasons] = useState(new Set<number>());
|
@@ -95,7 +96,7 @@ export const FeedbackContent = ({
|
|
95
96
|
const reasons = [...selectedReasons].map((value: number) => ratings[indexSelected]?.reasons?.[value] || '');
|
96
97
|
await hmsActions.submitSessionFeedback(
|
97
98
|
{
|
98
|
-
question: ratings[indexSelected].question
|
99
|
+
question: `${feedback?.title} | ${ratings[indexSelected].question || ''}`,
|
99
100
|
rating: ratings[indexSelected].value || 1,
|
100
101
|
min_rating: 1,
|
101
102
|
max_rating: ratings.length,
|
@@ -139,7 +140,7 @@ export const FeedbackContent = ({
|
|
139
140
|
type="submit"
|
140
141
|
icon
|
141
142
|
css={{
|
142
|
-
alignSelf: 'end',
|
143
|
+
alignSelf: isMobile ? '' : 'end',
|
143
144
|
}}
|
144
145
|
onClick={submitFeedback}
|
145
146
|
>
|
@@ -157,6 +158,7 @@ export const FeedbackHeader = ({
|
|
157
158
|
ratings: Rating[];
|
158
159
|
indexSelected?: number;
|
159
160
|
}) => {
|
161
|
+
const isMobile = useMedia(cssConfig.media.md);
|
160
162
|
const { feedback } = useRoomLayoutLeaveScreen();
|
161
163
|
return (
|
162
164
|
<>
|
@@ -168,7 +170,7 @@ export const FeedbackHeader = ({
|
|
168
170
|
}}
|
169
171
|
>
|
170
172
|
<Text
|
171
|
-
variant=
|
173
|
+
variant={isMobile ? 'h6' : 'h5'}
|
172
174
|
css={{
|
173
175
|
c: '$on_surface_high',
|
174
176
|
fontStyle: 'normal',
|
@@ -177,7 +179,7 @@ export const FeedbackHeader = ({
|
|
177
179
|
{feedback?.title || 'How was your experience?'}
|
178
180
|
</Text>
|
179
181
|
<Text
|
180
|
-
variant=
|
182
|
+
variant={isMobile ? 'body2' : 'body1'}
|
181
183
|
css={{
|
182
184
|
c: '$on_surface_medium',
|
183
185
|
opacity: 0.9,
|
@@ -192,9 +194,13 @@ export const FeedbackHeader = ({
|
|
192
194
|
) : null}
|
193
195
|
</Flex>
|
194
196
|
<Flex
|
197
|
+
justify="between"
|
195
198
|
css={{
|
196
199
|
gap: '$17',
|
197
200
|
c: '$on_surface_high',
|
201
|
+
'@md': {
|
202
|
+
gap: '0',
|
203
|
+
},
|
198
204
|
}}
|
199
205
|
>
|
200
206
|
{ratings.map((element, index) => {
|
@@ -219,12 +225,15 @@ export const FeedbackHeader = ({
|
|
219
225
|
pb: '$1',
|
220
226
|
cursor: 'pointer',
|
221
227
|
opacity: indexSelected === index || indexSelected === FEEBACK_INDEX.INIT ? 1 : 0.2,
|
228
|
+
'@md': {
|
229
|
+
fontSize: '$h5',
|
230
|
+
},
|
222
231
|
}}
|
223
232
|
>
|
224
233
|
{element.emoji}
|
225
234
|
</Text>
|
226
235
|
<Text
|
227
|
-
variant=
|
236
|
+
variant={isMobile ? 'body2' : 'body1'}
|
228
237
|
css={{
|
229
238
|
c:
|
230
239
|
indexSelected === index || indexSelected === FEEBACK_INDEX.INIT
|
@@ -319,6 +328,7 @@ export const FeedbackForm = ({
|
|
319
328
|
</Checkbox.Indicator>
|
320
329
|
</Checkbox.Root>
|
321
330
|
<Label
|
331
|
+
htmlFor={`${option}-${index}`}
|
322
332
|
css={{
|
323
333
|
color: '$on_surface_high',
|
324
334
|
fontSize: '$sm',
|
@@ -27,7 +27,7 @@ export const ThankyouView = () => {
|
|
27
27
|
>
|
28
28
|
<UserMusicIcon width="64px" height="64px" />
|
29
29
|
<Flex direction="column" align={isMobile ? 'center' : 'start'}>
|
30
|
-
<Text variant="h5">Thank you for your feedback
|
30
|
+
<Text variant="h5">Thank you for your feedback</Text>
|
31
31
|
<Text
|
32
32
|
variant="body1"
|
33
33
|
css={{
|
@@ -44,7 +44,7 @@ export const TrackUnmuteModal = () => {
|
|
44
44
|
<RequestDialog
|
45
45
|
title={`Unmute your ${track.type}?`}
|
46
46
|
onOpenChange={(value: boolean) => !value && setMuteNotification(null)}
|
47
|
-
body={`${peer?.name}is requesting you to unmute your ${track?.type}.`}
|
47
|
+
body={`${peer?.name} is requesting you to unmute your ${track?.type}.`}
|
48
48
|
onAction={() => {
|
49
49
|
hmsActions.setEnabledTrack(track.id, enabled);
|
50
50
|
setMuteNotification(null);
|
@@ -50,7 +50,10 @@ export const PIPChat = () => {
|
|
50
50
|
const isLocalPeerBlacklisted = useIsPeerBlacklisted({ local: true });
|
51
51
|
const { elements } = useRoomLayoutConferencingScreen();
|
52
52
|
const message_placeholder = elements?.chat?.message_placeholder || 'Send a message';
|
53
|
-
const canSendChatMessages =
|
53
|
+
const canSendChatMessages =
|
54
|
+
!!elements?.chat?.public_chat_enabled ||
|
55
|
+
!!elements?.chat?.roles_whitelist?.length ||
|
56
|
+
!!elements?.chat?.private_chat_enabled;
|
54
57
|
|
55
58
|
const getChatStatus = useCallback(() => {
|
56
59
|
if (isLocalPeerBlacklisted) return "You've been blocked from sending messages";
|
@@ -114,9 +117,13 @@ export const PIPChat = () => {
|
|
114
117
|
<Text variant="h5" css={{ mt: '$8', c: '$on_surface_high' }}>
|
115
118
|
{canSendChatMessages ? 'Start a conversation' : 'No messages yet'}
|
116
119
|
</Text>
|
117
|
-
|
118
|
-
|
119
|
-
|
120
|
+
{canSendChatMessages ? (
|
121
|
+
<Text variant="sm" style={{ maxWidth: '80%', textAlign: 'center', marginTop: '4px' }}>
|
122
|
+
There are no messages here yet. Start a conversation by sending a message.
|
123
|
+
</Text>
|
124
|
+
) : (
|
125
|
+
''
|
126
|
+
)}
|
120
127
|
</div>
|
121
128
|
) : (
|
122
129
|
filteredMessages.map(message => (
|
@@ -16,7 +16,6 @@ import { config as cssConfig, useTheme } from '../../Theme';
|
|
16
16
|
import { Video } from '../../Video';
|
17
17
|
import { StyledVideoTile } from '../../VideoTile';
|
18
18
|
import { LayoutModeSelector } from './LayoutModeSelector';
|
19
|
-
// @ts-ignore: No implicit Any
|
20
19
|
import { getVideoTileLabel } from './peerTileUtils';
|
21
20
|
import { ScreenshareDisplay } from './ScreenshareDisplay';
|
22
21
|
// @ts-ignore: No implicit Any
|
@@ -62,7 +61,8 @@ const Tile = ({ peerId, width = '100%', height = '100%' }: { peerId: string; wid
|
|
62
61
|
const label = getVideoTileLabel({
|
63
62
|
peerName: peer?.name,
|
64
63
|
isLocal: false,
|
65
|
-
track,
|
64
|
+
videoTrack: track,
|
65
|
+
audioTrack,
|
66
66
|
});
|
67
67
|
|
68
68
|
return (
|
@@ -140,7 +140,6 @@ const MobileSettingModal = ({
|
|
140
140
|
<Flex
|
141
141
|
direction="column"
|
142
142
|
css={{
|
143
|
-
px: '$8',
|
144
143
|
pb: '$8',
|
145
144
|
overflowY: 'auto',
|
146
145
|
}}
|
@@ -159,7 +158,7 @@ const MobileSettingModal = ({
|
|
159
158
|
css={{
|
160
159
|
all: 'unset',
|
161
160
|
fontFamily: '$sans',
|
162
|
-
|
161
|
+
p: '$10 $8',
|
163
162
|
display: 'flex',
|
164
163
|
alignItems: 'center',
|
165
164
|
fontSize: '$sm',
|
@@ -1,6 +1,7 @@
|
|
1
1
|
import React, { useState } from 'react';
|
2
2
|
import { useMedia } from 'react-use';
|
3
3
|
import {
|
4
|
+
HMSAudioTrack,
|
4
5
|
HMSVideoTrack,
|
5
6
|
selectLocalPeerID,
|
6
7
|
selectPeerByID,
|
@@ -17,6 +18,7 @@ import { Text } from '../../../Text';
|
|
17
18
|
import { config as cssConfig, useTheme } from '../../../Theme';
|
18
19
|
import { StyledMenuTile } from '../../../TileMenu';
|
19
20
|
import { ChangeNameModal } from '../MoreSettings/ChangeNameModal';
|
21
|
+
import { getVideoTileLabel } from '../peerTileUtils';
|
20
22
|
import { RoleChangeModal } from '../RoleChangeModal';
|
21
23
|
import { TileMenuContent } from './TileMenuContent';
|
22
24
|
import { useDropdownList } from '../hooks/useDropdownList';
|
@@ -52,7 +54,8 @@ const TileMenu = ({
|
|
52
54
|
const isPrimaryVideoTrack = useHMSStore(selectVideoTrackByPeerID(peerID))?.id === videoTrackID;
|
53
55
|
const showPinAction = !!(audioTrackID || (videoTrackID && isPrimaryVideoTrack));
|
54
56
|
|
55
|
-
const track = useHMSStore(selectTrackByID(videoTrackID)) as HMSVideoTrack;
|
57
|
+
const track = useHMSStore(selectTrackByID(videoTrackID)) as HMSVideoTrack | null;
|
58
|
+
const audioTrack = useHMSStore(selectTrackByID(audioTrackID)) as HMSAudioTrack | null;
|
56
59
|
const hideSimulcastLayers = !track?.layerDefinitions?.length || track.degraded || !track.enabled;
|
57
60
|
const isMobile = useMedia(cssConfig.media.md);
|
58
61
|
const peer = useHMSStore(selectPeerByID(peerID));
|
@@ -61,20 +64,19 @@ const TileMenu = ({
|
|
61
64
|
useDropdownList({ open, name: 'TileMenu' });
|
62
65
|
const dragClassName = getDragClassName();
|
63
66
|
|
64
|
-
if (!(removeOthers || toggleAudio || toggleVideo || setVolume || showPinAction) && hideSimulcastLayers) {
|
67
|
+
if (!peer || (!(removeOthers || toggleAudio || toggleVideo || setVolume || showPinAction) && hideSimulcastLayers)) {
|
65
68
|
return null;
|
66
69
|
}
|
67
70
|
|
68
71
|
const openNameChangeModal = () => setShowNameChangeModal(true);
|
69
72
|
const openRoleChangeModal = () => setShowRoleChangeModal(true);
|
70
73
|
|
71
|
-
const props = {
|
74
|
+
const props: React.ComponentPropsWithoutRef<typeof TileMenuContent> = {
|
72
75
|
isLocal,
|
73
76
|
isScreenshare,
|
74
77
|
audioTrackID,
|
75
78
|
videoTrackID,
|
76
79
|
peerID,
|
77
|
-
isPrimaryVideoTrack,
|
78
80
|
showSpotlight,
|
79
81
|
showPinAction,
|
80
82
|
canMinimise,
|
@@ -111,8 +113,7 @@ const TileMenu = ({
|
|
111
113
|
>
|
112
114
|
<Box>
|
113
115
|
<Text css={{ color: '$on_surface_high', fontWeight: '$semiBold' }}>
|
114
|
-
{peer?.name}
|
115
|
-
{isLocal ? ` (You)` : null}
|
116
|
+
{getVideoTileLabel({ peerName: peer?.name, isLocal, audioTrack, videoTrack: track })}
|
116
117
|
</Text>
|
117
118
|
{peer?.roleName ? (
|
118
119
|
<Text variant="xs" css={{ color: '$on_surface_low', mt: '$2' }}>
|
@@ -41,7 +41,7 @@ import { useSetAppDataByKey } from '../AppData/useUISettings';
|
|
41
41
|
// @ts-ignore
|
42
42
|
import { useDropdownSelection } from '../hooks/useDropdownSelection';
|
43
43
|
import { getDragClassName } from './utils';
|
44
|
-
import { APP_DATA, REMOTE_STOP_SCREENSHARE_TYPE, SESSION_STORE_KEY } from '../../common/constants';
|
44
|
+
import { APP_DATA, isIOS, REMOTE_STOP_SCREENSHARE_TYPE, SESSION_STORE_KEY } from '../../common/constants';
|
45
45
|
|
46
46
|
export const isSameTile = ({
|
47
47
|
trackId,
|
@@ -317,7 +317,7 @@ export const TileMenuContent = ({
|
|
317
317
|
</StyledMenuTile.ItemButton>
|
318
318
|
) : null}
|
319
319
|
|
320
|
-
{canChangeRole && roles.length > 1 ? (
|
320
|
+
{!isScreenshare && canChangeRole && roles.length > 1 ? (
|
321
321
|
<StyledMenuTile.ItemButton
|
322
322
|
className={dragClassName}
|
323
323
|
css={spacingCSS}
|
@@ -332,7 +332,7 @@ export const TileMenuContent = ({
|
|
332
332
|
</StyledMenuTile.ItemButton>
|
333
333
|
) : null}
|
334
334
|
|
335
|
-
{audioTrackID ? (
|
335
|
+
{!isIOS && audioTrackID ? (
|
336
336
|
<StyledMenuTile.VolumeItem data-testid="participant_volume_slider" css={{ ...spacingCSS, mb: '$0' }}>
|
337
337
|
<Flex align="center" gap={1}>
|
338
338
|
<SpeakerIcon height={20} width={20} />
|
@@ -1,5 +1,6 @@
|
|
1
1
|
import React, { useEffect, useState } from 'react';
|
2
2
|
import { useMedia } from 'react-use';
|
3
|
+
import { selectPeerCount, useHMSStore } from '@100mslive/react-sdk';
|
3
4
|
import { PeopleAddIcon } from '@100mslive/react-icons';
|
4
5
|
import { Flex } from '../../../Layout';
|
5
6
|
import { config as cssConfig } from '../../../Theme';
|
@@ -17,6 +18,7 @@ export function EqualProminence({ isInsetEnabled = false, peers, onPageChange, o
|
|
17
18
|
const isMobile = useMedia(cssConfig.media.md);
|
18
19
|
let maxTileCount = useUISettings(UI_SETTINGS.maxTileCount);
|
19
20
|
maxTileCount = isMobile ? Math.min(maxTileCount, 6) : maxTileCount;
|
21
|
+
const peerCount = useHMSStore(selectPeerCount);
|
20
22
|
const pageList = usePagesWithTiles({
|
21
23
|
peers,
|
22
24
|
maxTileCount,
|
@@ -51,8 +53,8 @@ export function EqualProminence({ isInsetEnabled = false, peers, onPageChange, o
|
|
51
53
|
)}
|
52
54
|
{pageList.length === 0 ? (
|
53
55
|
<WaitingView
|
54
|
-
title="You're the
|
55
|
-
subtitle=
|
56
|
+
title={peerCount <= 1 ? "You're the only one here" : 'Glad to have you here'}
|
57
|
+
subtitle={peerCount <= 1 ? 'Sit back and relax till others join' : ''}
|
56
58
|
icon={<PeopleAddIcon width="56px" height="56px" style={{ color: 'white' }} />}
|
57
59
|
/>
|
58
60
|
) : null}
|
@@ -20,7 +20,6 @@ import { VideoTileStats } from '../../Stats';
|
|
20
20
|
import { CSS } from '../../Theme';
|
21
21
|
import { Video } from '../../Video';
|
22
22
|
import { StyledVideoTile } from '../../VideoTile';
|
23
|
-
// @ts-ignore: No implicit Any
|
24
23
|
import { getVideoTileLabel } from './peerTileUtils';
|
25
24
|
// @ts-ignore: No implicit Any
|
26
25
|
import { useSetAppDataByKey, useUISettings } from './AppData/useUISettings';
|
@@ -101,8 +100,9 @@ const Tile = ({
|
|
101
100
|
});
|
102
101
|
const label = getVideoTileLabel({
|
103
102
|
peerName,
|
104
|
-
track,
|
105
103
|
isLocal,
|
104
|
+
videoTrack: track,
|
105
|
+
audioTrack,
|
106
106
|
});
|
107
107
|
const onHoverHandler = useCallback((event: React.MouseEvent) => {
|
108
108
|
setIsMouseHovered(event.type === 'mouseenter');
|
@@ -1,7 +1,8 @@
|
|
1
1
|
// Open issue with eslint-plugin-import https://github.com/import-js/eslint-plugin-import/issues/1810
|
2
2
|
// eslint-disable-next-line
|
3
3
|
import { HMSVBPlugin, HMSVirtualBackgroundTypes } from '@100mslive/hms-virtual-background/hmsvbplugin';
|
4
|
-
|
4
|
+
import { parsedUserAgent } from '@100mslive/react-sdk';
|
5
|
+
import { isSafari } from '../../common/constants';
|
5
6
|
export class VBPlugin {
|
6
7
|
private hmsPlugin?: HMSVBPlugin;
|
7
8
|
private effectsPlugin?: any;
|
@@ -13,8 +14,8 @@ export class VBPlugin {
|
|
13
14
|
if (effectsSDKKey) {
|
14
15
|
try {
|
15
16
|
// eslint-disable-next-line
|
16
|
-
const
|
17
|
-
this.effectsPlugin = new HMSEffectsPlugin(effectsSDKKey, onInit);
|
17
|
+
const effects = await import('@100mslive/hms-virtual-background/hmseffectsplugin');
|
18
|
+
this.effectsPlugin = new effects.HMSEffectsPlugin(effectsSDKKey, onInit);
|
18
19
|
} catch (error) {
|
19
20
|
console.error('Failed to initialise HMSEffectsPlugin:', error, 'Using HMSVBPlugin');
|
20
21
|
this.hmsPlugin = new HMSVBPlugin(HMSVirtualBackgroundTypes.NONE, HMSVirtualBackgroundTypes.NONE);
|
@@ -101,6 +102,17 @@ export class VBPlugin {
|
|
101
102
|
this.effectsPlugin = undefined;
|
102
103
|
this.hmsPlugin = undefined;
|
103
104
|
};
|
105
|
+
|
106
|
+
isEffectsSupported = () => {
|
107
|
+
if (!isSafari) {
|
108
|
+
return true;
|
109
|
+
}
|
110
|
+
const browserVersion = parsedUserAgent?.getBrowser()?.version || '16';
|
111
|
+
if (browserVersion && parseInt(browserVersion.split('.')[0]) < 17) {
|
112
|
+
return false;
|
113
|
+
}
|
114
|
+
return true;
|
115
|
+
};
|
104
116
|
}
|
105
117
|
|
106
118
|
export const VBHandler = new VBPlugin();
|
@@ -25,7 +25,6 @@ import {
|
|
25
25
|
import { BlurPersonHighIcon, CrossCircleIcon, CrossIcon } from '@100mslive/react-icons';
|
26
26
|
import { Box, config as cssConfig, Flex, Loading, Slider, Video } from '../../../index';
|
27
27
|
import { Text } from '../../../Text';
|
28
|
-
import { doesBrowserSupportEffectsSDK } from './util';
|
29
28
|
import { VBCollection } from './VBCollection';
|
30
29
|
import { VBHandler } from './VBHandler';
|
31
30
|
// @ts-ignore
|
@@ -49,7 +48,7 @@ export const VBPicker = ({ backgroundMedia = [] }: { backgroundMedia: VirtualBac
|
|
49
48
|
const [blurAmount, setBlurAmount] = useState(VBHandler.getBlurAmount() || 0.5);
|
50
49
|
const roomState = useHMSStore(selectRoomState);
|
51
50
|
const isLargeRoom = useHMSStore(selectIsLargeRoom);
|
52
|
-
const
|
51
|
+
const isEffectsSupported = VBHandler.isEffectsSupported();
|
53
52
|
const isEffectsEnabled = useHMSStore(selectIsEffectsEnabled);
|
54
53
|
const effectsKey = useHMSStore(selectEffectsKey);
|
55
54
|
const isMobile = useMedia(cssConfig.media.md);
|
@@ -64,14 +63,22 @@ export const VBPicker = ({ backgroundMedia = [] }: { backgroundMedia: VirtualBac
|
|
64
63
|
const showVideoTile = isVideoOn && isLargeRoom && !inPreview;
|
65
64
|
|
66
65
|
useEffect(() => {
|
66
|
+
const addHMSVBPlugin = async () => {
|
67
|
+
setLoadingEffects(false);
|
68
|
+
if (!role) {
|
69
|
+
return;
|
70
|
+
}
|
71
|
+
await VBHandler.initialisePlugin();
|
72
|
+
await hmsActions.addPluginToVideoTrack(
|
73
|
+
VBHandler.getVBObject() as HMSVBPlugin,
|
74
|
+
Math.floor(role.publishParams.video.frameRate / 2),
|
75
|
+
);
|
76
|
+
};
|
67
77
|
const initializeVirtualBackground = async () => {
|
68
78
|
if (!track?.id || pluginLoadingRef.current || isPluginAdded) {
|
69
79
|
return;
|
70
80
|
}
|
71
81
|
|
72
|
-
const isEffectsSupported = doesBrowserSupportEffectsSDK();
|
73
|
-
setIsBlurSupported(isEffectsSupported);
|
74
|
-
|
75
82
|
try {
|
76
83
|
pluginLoadingRef.current = true;
|
77
84
|
if (isEffectsEnabled && isEffectsSupported && effectsKey) {
|
@@ -79,17 +86,14 @@ export const VBPicker = ({ backgroundMedia = [] }: { backgroundMedia: VirtualBac
|
|
79
86
|
await VBHandler.initialisePlugin(effectsKey, () => {
|
80
87
|
setLoadingEffects(false);
|
81
88
|
});
|
82
|
-
|
83
|
-
|
84
|
-
|
85
|
-
|
86
|
-
|
89
|
+
const vbInstance = VBHandler.getVBObject();
|
90
|
+
if (vbInstance.getName() === 'HMSEffects') {
|
91
|
+
hmsActions.addPluginsToVideoStream([VBHandler.getVBObject() as HMSMediaStreamPlugin]);
|
92
|
+
} else {
|
93
|
+
await addHMSVBPlugin();
|
87
94
|
}
|
88
|
-
|
89
|
-
await
|
90
|
-
VBHandler.getVBObject() as HMSVBPlugin,
|
91
|
-
Math.floor(role.publishParams.video.frameRate / 2),
|
92
|
-
);
|
95
|
+
} else {
|
96
|
+
await addHMSVBPlugin();
|
93
97
|
}
|
94
98
|
|
95
99
|
const handleDefaultBackground = async () => {
|
@@ -117,6 +121,7 @@ export const VBPicker = ({ backgroundMedia = [] }: { backgroundMedia: VirtualBac
|
|
117
121
|
role,
|
118
122
|
isPluginAdded,
|
119
123
|
isEffectsEnabled,
|
124
|
+
isEffectsSupported,
|
120
125
|
effectsKey,
|
121
126
|
track?.id,
|
122
127
|
background,
|
@@ -185,7 +190,7 @@ export const VBPicker = ({ backgroundMedia = [] }: { backgroundMedia: VirtualBac
|
|
185
190
|
await VBHandler?.setBlur(blurAmount);
|
186
191
|
hmsActions.setAppData(APP_DATA.background, HMSVirtualBackgroundTypes.BLUR);
|
187
192
|
},
|
188
|
-
supported:
|
193
|
+
supported: isEffectsSupported && isEffectsEnabled,
|
189
194
|
},
|
190
195
|
]}
|
191
196
|
activeBackground={background}
|
@@ -1,4 +1,8 @@
|
|
1
|
+
import { HMSAudioTrack, HMSVideoTrack } from '@100mslive/react-sdk';
|
2
|
+
|
1
3
|
const PEER_NAME_PLACEHOLDER = 'peerName';
|
4
|
+
|
5
|
+
// Map [isLocal, videoSource] to the label to be displayed.
|
2
6
|
const labelMap = new Map([
|
3
7
|
[[true, 'screen'].toString(), 'Your Screen'],
|
4
8
|
[[true, 'regular'].toString(), `You (${PEER_NAME_PLACEHOLDER})`],
|
@@ -8,19 +12,30 @@ const labelMap = new Map([
|
|
8
12
|
[[false, undefined].toString(), `${PEER_NAME_PLACEHOLDER}`],
|
9
13
|
]);
|
10
14
|
|
11
|
-
export const getVideoTileLabel = ({
|
15
|
+
export const getVideoTileLabel = ({
|
16
|
+
peerName,
|
17
|
+
isLocal,
|
18
|
+
videoTrack,
|
19
|
+
audioTrack,
|
20
|
+
}: {
|
21
|
+
isLocal: boolean;
|
22
|
+
peerName?: string;
|
23
|
+
videoTrack?: HMSVideoTrack | null;
|
24
|
+
audioTrack?: HMSAudioTrack | null;
|
25
|
+
}) => {
|
12
26
|
const isPeerPresent = peerName !== undefined;
|
13
|
-
if (!isPeerPresent || !
|
27
|
+
if (!isPeerPresent || !videoTrack) {
|
14
28
|
// for peers with only audio track
|
15
|
-
|
29
|
+
const label = labelMap.get([isLocal, undefined].toString());
|
30
|
+
return isPeerPresent && label ? label.replace(PEER_NAME_PLACEHOLDER, peerName) : '';
|
16
31
|
}
|
17
|
-
const isLocallyMuted =
|
32
|
+
const isLocallyMuted = audioTrack?.volume === 0;
|
18
33
|
// Map [isLocal, videoSource] to the label to be displayed.
|
19
|
-
let label = labelMap.get([isLocal,
|
34
|
+
let label = labelMap.get([isLocal, videoTrack.source].toString());
|
20
35
|
if (label) {
|
21
36
|
label = label.replace(PEER_NAME_PLACEHOLDER, peerName);
|
22
37
|
} else {
|
23
|
-
label = `${peerName} ${
|
38
|
+
label = `${peerName} ${videoTrack.source}`;
|
24
39
|
}
|
25
40
|
// label = `${label}${track.degraded ? '(Degraded)' : ''}`;
|
26
41
|
return `${label}${isLocallyMuted ? ' (Muted for you)' : ''}`;
|
@@ -1 +0,0 @@
|
|
1
|
-
export declare const doesBrowserSupportEffectsSDK: () => boolean;
|