@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.
Files changed (38) hide show
  1. package/dist/{HLSView-5SR3RWXG.css → HLSView-5JM7XVA4.css} +3 -3
  2. package/dist/{HLSView-5SR3RWXG.css.map → HLSView-5JM7XVA4.css.map} +1 -1
  3. package/dist/{HLSView-EYFJ7YDU.js → HLSView-VBMAXHBP.js} +2 -2
  4. package/dist/Prebuilt/components/VirtualBackground/VBHandler.d.ts +1 -0
  5. package/dist/Prebuilt/components/peerTileUtils.d.ts +7 -0
  6. package/dist/{chunk-3FZB2LJY.js → chunk-JCM6FDIX.js} +275 -248
  7. package/dist/chunk-JCM6FDIX.js.map +7 -0
  8. package/dist/index.cjs.css +2 -2
  9. package/dist/index.cjs.css.map +1 -1
  10. package/dist/index.cjs.js +916 -895
  11. package/dist/index.cjs.js.map +4 -4
  12. package/dist/index.css +2 -2
  13. package/dist/index.css.map +1 -1
  14. package/dist/index.js +1 -1
  15. package/dist/meta.cjs.json +94 -93
  16. package/dist/meta.esbuild.json +105 -104
  17. package/package.json +7 -7
  18. package/src/Prebuilt/AppStateContext.tsx +8 -5
  19. package/src/Prebuilt/components/EndCallFeedback/Feedback.tsx +3 -2
  20. package/src/Prebuilt/components/EndCallFeedback/FeedbackForm.tsx +16 -6
  21. package/src/Prebuilt/components/EndCallFeedback/ThankyouView.tsx +1 -1
  22. package/src/Prebuilt/components/InsetTile.tsx +1 -1
  23. package/src/Prebuilt/components/Leave/LeaveSessionContent.tsx +3 -1
  24. package/src/Prebuilt/components/Notifications/TrackUnmuteModal.tsx +1 -1
  25. package/src/Prebuilt/components/PIP/PIPChat.tsx +11 -4
  26. package/src/Prebuilt/components/ScreenshareTile.tsx +2 -2
  27. package/src/Prebuilt/components/Settings/SettingsModal.jsx +1 -2
  28. package/src/Prebuilt/components/TileMenu/TileMenu.tsx +7 -6
  29. package/src/Prebuilt/components/TileMenu/TileMenuContent.tsx +3 -3
  30. package/src/Prebuilt/components/VideoLayouts/EqualProminence.tsx +4 -2
  31. package/src/Prebuilt/components/VideoTile.tsx +2 -2
  32. package/src/Prebuilt/components/VirtualBackground/VBHandler.tsx +15 -3
  33. package/src/Prebuilt/components/VirtualBackground/VBPicker.tsx +21 -16
  34. package/src/Prebuilt/components/{peerTileUtils.jsx → peerTileUtils.tsx} +21 -6
  35. package/dist/Prebuilt/components/VirtualBackground/util.d.ts +0 -1
  36. package/dist/chunk-3FZB2LJY.js.map +0 -7
  37. package/src/Prebuilt/components/VirtualBackground/util.tsx +0 -13
  38. /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: '$12' }}
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="h5"
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="body1"
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="body1"
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!</Text>
30
+ <Text variant="h5">Thank you for your feedback</Text>
31
31
  <Text
32
32
  variant="body1"
33
33
  css={{
@@ -100,7 +100,7 @@ export const InsetTile = ({ peerId }: { peerId?: string }) => {
100
100
  position: 'absolute',
101
101
  bottom: 0,
102
102
  right: 0,
103
- zIndex: 11,
103
+ zIndex: 10,
104
104
  boxShadow: '0 0 8px 0 rgba(0,0,0,0.3)',
105
105
  r: '$2',
106
106
  ...(!minimised
@@ -47,7 +47,9 @@ export const LeaveSessionContent = ({
47
47
  <Button
48
48
  variant="danger"
49
49
  css={{ w: '100%' }}
50
- onClick={async () => await leaveRoom()}
50
+ onClick={async () => {
51
+ await leaveRoom();
52
+ }}
51
53
  id="leaveRoom"
52
54
  data-testid="leave_room"
53
55
  >
@@ -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 = !!elements?.chat?.public_chat_enabled || !!elements?.chat?.roles_whitelist?.length;
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
- <Text variant="sm" style={{ maxWidth: '80%', textAlign: 'center', marginTop: '4px' }}>
118
- There are no messages here yet. Start a conversation by sending a message.
119
- </Text>
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
- py: '$10',
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 first to join"
55
- subtitle="Sit back and relax till others join"
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 { HMSEffectsPlugin } = await import('@100mslive/hms-virtual-background/hmseffectsplugin');
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 [isBlurSupported, setIsBlurSupported] = useState(false);
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
- hmsActions.addPluginsToVideoStream([VBHandler.getVBObject() as HMSMediaStreamPlugin]);
83
- } else {
84
- setLoadingEffects(false);
85
- if (!role) {
86
- return;
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
- await VBHandler.initialisePlugin();
89
- await hmsActions.addPluginToVideoTrack(
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: isBlurSupported,
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 = ({ peerName, isLocal, track }) => {
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 || !track) {
27
+ if (!isPeerPresent || !videoTrack) {
14
28
  // for peers with only audio track
15
- return isPeerPresent ? labelMap.get([isLocal, undefined].toString()).replace(PEER_NAME_PLACEHOLDER, peerName) : '';
29
+ const label = labelMap.get([isLocal, undefined].toString());
30
+ return isPeerPresent && label ? label.replace(PEER_NAME_PLACEHOLDER, peerName) : '';
16
31
  }
17
- const isLocallyMuted = track.volume === 0;
32
+ const isLocallyMuted = audioTrack?.volume === 0;
18
33
  // Map [isLocal, videoSource] to the label to be displayed.
19
- let label = labelMap.get([isLocal, track.source].toString());
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} ${track.source}`;
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;