@100mslive/roomkit-react 0.3.17-alpha.2 → 0.3.17-alpha.21

package/package.json

@@ -10,7 +10,7 @@
     "prebuilt",
     "roomkit"
   ],
-  "version": "0.3.17-alpha.2",
+  "version": "0.3.17-alpha.21",
   "author": "100ms",
   "license": "MIT",
   "repository": {
@@ -75,12 +75,12 @@
     "react": ">=17.0.2 <19.0.0"
   },
   "dependencies": {
-    "@100mslive/hls-player": "0.3.17-alpha.2",
+    "@100mslive/hls-player": "0.3.17-alpha.21",
     "@100mslive/hms-noise-cancellation": "0.0.1",
-    "@100mslive/hms-virtual-background": "1.13.17-alpha.2",
-    "@100mslive/hms-whiteboard": "0.0.7-alpha.2",
-    "@100mslive/react-icons": "0.10.17-alpha.2",
-    "@100mslive/react-sdk": "0.10.17-alpha.2",
+    "@100mslive/hms-virtual-background": "1.13.17-alpha.21",
+    "@100mslive/hms-whiteboard": "0.0.7-alpha.21",
+    "@100mslive/react-icons": "0.10.17-alpha.21",
+    "@100mslive/react-sdk": "0.10.17-alpha.21",
     "@100mslive/types-prebuilt": "0.12.11",
     "@emoji-mart/data": "^1.0.6",
     "@emoji-mart/react": "^1.0.1",
@@ -117,5 +117,5 @@
     "uuid": "^8.3.2",
     "worker-timers": "^7.0.40"
   },
-  "gitHead": "4eac5aec26328f724b6b1a7c9d7df52ed701e193"
+  "gitHead": "6763867d8efe03ea0c654002d8f828011c6c919e"
 }

package/src/Prebuilt/components/AppData/AppData.tsx

@@ -1,4 +1,5 @@
 import React, { useEffect, useMemo, useRef } from 'react';
+import { useMedia } from 'react-use';
 import {
   HMSRoomState,
   selectFullAppData,
@@ -10,6 +11,7 @@ import {
   useHMSStore,
   useRecordingStreaming,
 } from '@100mslive/react-sdk';
+import { config as cssConfig } from '../../../Theme';
 import { LayoutMode } from '../Settings/LayoutSettings';
 import { useRoomLayoutConferencingScreen } from '../../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
 //@ts-ignore
@@ -26,6 +28,7 @@ import {
   UI_MODE_GRID,
   UI_SETTINGS,
 } from '../../common/constants';
+import { DEFAULT_TILES_IN_VIEW } from '../MoreSettings/constants';
 
 const initialAppData = {
   [APP_DATA.uiSettings]: {
@@ -80,6 +83,7 @@ export const AppData = React.memo(() => {
   const { isLocalVideoEnabled } = useAVToggle();
   const sidepaneOpenedRef = useRef(false);
   const [, setNoiseCancellationEnabled] = useSetNoiseCancellation();
+  const isMobile = useMedia(cssConfig.media.md);
 
   useEffect(() => {
     if (elements?.noise_cancellation?.enabled_by_default) {
@@ -117,10 +121,12 @@ export const AppData = React.memo(() => {
       ...uiSettings,
       [UI_SETTINGS.isAudioOnly]: undefined,
       [UI_SETTINGS.uiViewMode]: uiSettings.uiViewMode || UI_MODE_GRID,
-      [UI_SETTINGS.maxTileCount]: elements?.video_tile_layout?.grid?.tiles_in_view || 9,
+      [UI_SETTINGS.maxTileCount]: isMobile
+        ? DEFAULT_TILES_IN_VIEW.MWEB
+        : Number(elements?.video_tile_layout?.grid?.tiles_in_view) || DEFAULT_TILES_IN_VIEW.DESKTOP,
     };
-    hmsActions.setAppData(APP_DATA.uiSettings, updatedSettings, true);
-  }, [preferences, hmsActions, elements?.video_tile_layout]);
+    hmsActions.setAppData(APP_DATA.uiSettings, updatedSettings, false);
+  }, [preferences, hmsActions, elements?.video_tile_layout, isMobile]);
 
   useEffect(() => {
     if (!preferences.subscribedNotifications) {

package/src/Prebuilt/components/AudioVideoToggle.tsx

@@ -1,4 +1,4 @@
-import React, { Fragment, useEffect, useState } from 'react';
+import React, { Fragment, useCallback, useEffect, useState } from 'react';
 import { HMSKrispPlugin } from '@100mslive/hms-noise-cancellation';
 import {
   DeviceType,
@@ -14,6 +14,7 @@ import {
   useDevices,
   useHMSActions,
   useHMSStore,
+  useHMSVanillaStore,
 } from '@100mslive/react-sdk';
 import {
   AudioLevelIcon,
@@ -105,22 +106,26 @@ const useNoiseCancellationWithPlugin = () => {
   const actions = useHMSActions();
   const [inProgress, setInProgress] = useState(false);
   const [, setNoiseCancellationEnabled] = useSetNoiseCancellation();
-  const setNoiseCancellationWithPlugin = async (enabled: boolean) => {
-    if (inProgress) {
-      return;
-    }
-    if (!krispPlugin.checkSupport().isSupported) {
-      throw Error('Krisp plugin is not supported');
-    }
-    setInProgress(true);
-    if (enabled) {
-      await actions.addPluginToAudioTrack(krispPlugin);
-    } else {
-      await actions.removePluginFromAudioTrack(krispPlugin);
-    }
-    setNoiseCancellationEnabled(enabled);
-    setInProgress(false);
-  };
+  const isEnabledForRoom = useHMSStore(selectRoom)?.isNoiseCancellationEnabled;
+  const setNoiseCancellationWithPlugin = useCallback(
+    async (enabled: boolean) => {
+      if (!isEnabledForRoom || inProgress) {
+        return;
+      }
+      if (!krispPlugin.checkSupport().isSupported) {
+        throw Error('Krisp plugin is not supported');
+      }
+      setInProgress(true);
+      if (enabled) {
+        await actions.addPluginToAudioTrack(krispPlugin);
+      } else {
+        await actions.removePluginFromAudioTrack(krispPlugin);
+      }
+      setNoiseCancellationEnabled(enabled);
+      setInProgress(false);
+    },
+    [actions, inProgress, isEnabledForRoom, setNoiseCancellationEnabled],
+  );
   return {
     setNoiseCancellationWithPlugin,
     inProgress,
@@ -274,6 +279,7 @@ export const AudioVideoToggle = ({ hideOptions = false }: { hideOptions?: boolea
   const localPeer = useHMSStore(selectLocalPeer);
   const { isLocalVideoEnabled, isLocalAudioEnabled, toggleAudio, toggleVideo } = useAVToggle();
   const actions = useHMSActions();
+  const vanillaStore = useHMSVanillaStore();
   const videoTrackId = useHMSStore(selectLocalVideoTrackID);
   const localVideoTrack = useHMSStore(selectVideoTrackByID(videoTrackId));
   const roomState = useHMSStore(selectRoomState);
@@ -289,7 +295,14 @@ export const AudioVideoToggle = ({ hideOptions = false }: { hideOptions?: boolea
 
   useEffect(() => {
     (async () => {
-      if (isNoiseCancellationEnabled && !isKrispPluginAdded && !inProgress && localPeer?.audioTrack) {
+      const isEnabledForRoom = vanillaStore.getState(selectRoom)?.isNoiseCancellationEnabled;
+      if (
+        isEnabledForRoom &&
+        isNoiseCancellationEnabled &&
+        !isKrispPluginAdded &&
+        !inProgress &&
+        localPeer?.audioTrack
+      ) {
         try {
           await setNoiseCancellationWithPlugin(true);
           ToastManager.addToast({

package/src/Prebuilt/components/MoreSettings/constants.ts

@@ -10,3 +10,5 @@ export const trackTypeOptions = [
   { label: 'audio', value: 'audio' },
   { label: 'video', value: 'video' },
 ];
+
+export const DEFAULT_TILES_IN_VIEW = { MWEB: 4, DESKTOP: 9 };

package/src/Prebuilt/components/Notifications/ReconnectNotifications.tsx

@@ -1,6 +1,5 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useRef } from 'react';
 import { HMSNotificationTypes, useHMSNotifications } from '@100mslive/react-sdk';
-import { Dialog, Flex, Loading, Text } from '../../..';
 // @ts-ignore: No implicit Any
 import { ToastConfig } from '../Toast/ToastConfig';
 // @ts-ignore: No implicit Any
@@ -15,50 +14,24 @@ let notificationId: string | null = null;
 
 export const ReconnectNotifications = () => {
   const notification = useHMSNotifications(notificationTypes);
-  const [open, setOpen] = useState(false);
+  const prevErrorCode = useRef(0);
   useEffect(() => {
     if (!notification) {
       return;
     }
-    if (notification.type === HMSNotificationTypes.ERROR && notification.data?.isTerminal) {
-      setOpen(false);
-    } else if (notification.type === HMSNotificationTypes.RECONNECTED) {
-      notificationId = ToastManager.replaceToast(notificationId, ToastConfig.RECONNECTED.single());
-      setOpen(false);
+    if (notification.type === HMSNotificationTypes.RECONNECTED) {
+      notificationId = ToastManager.replaceToast(
+        notificationId,
+        ToastConfig.RECONNECTED.single([4005, 4006].includes(prevErrorCode.current)),
+      );
     } else if (notification.type === HMSNotificationTypes.RECONNECTING) {
+      prevErrorCode.current = notification.data?.code || 0;
       notificationId = ToastManager.replaceToast(
         notificationId,
         ToastConfig.RECONNECTING.single(notification.data?.message),
       );
     }
   }, [notification]);
-  if (!open) return null;
-  return (
-    <Dialog.Root open={open} modal={true}>
-      <Dialog.Portal container={document.getElementById('conferencing')}>
-        <Dialog.Overlay />
-        <Dialog.Content
-          css={{
-            width: 'fit-content',
-            maxWidth: '80%',
-            p: '$4 $8',
-            position: 'relative',
-            top: 'unset',
-            bottom: '$9',
-            transform: 'translate(-50%, -100%)',
-            animation: 'none !important',
-          }}
-        >
-          <Flex align="center">
-            <div style={{ display: 'inline', margin: '0.25rem' }}>
-              <Loading size={16} />
-            </div>
-            <Text css={{ fontSize: '$space$8', color: '$on_surface_high' }}>
-              You lost your network connection. Trying to reconnect.
-            </Text>
-          </Flex>
-        </Dialog.Content>
-      </Dialog.Portal>
-    </Dialog.Root>
-  );
+
+  return null;
 };

package/src/Prebuilt/components/Preview/PreviewJoin.tsx

@@ -4,6 +4,7 @@ import {
   HMSRoomState,
   selectAppData,
   selectIsLocalVideoEnabled,
+  selectIsVBEnabled,
   selectLocalPeer,
   selectRoomState,
   selectVideoTrackByID,
@@ -253,6 +254,7 @@ export const PreviewTile = ({ name, error }: { name: string; error?: boolean })
 
 export const PreviewControls = ({ hideSettings, vbEnabled }: { hideSettings: boolean; vbEnabled: boolean }) => {
   const isMobile = useMedia(cssConfig.media.md);
+  const isVBEnabledForUser = useHMSStore(selectIsVBEnabled);
   return (
     <Flex
       justify={hideSettings && isMobile ? 'center' : 'between'}
@@ -263,7 +265,7 @@ export const PreviewControls = ({ hideSettings, vbEnabled }: { hideSettings: boo
     >
       <Flex css={{ gap: '$4' }}>
         <AudioVideoToggle />
-        {vbEnabled ? <VBToggle /> : null}
+        {vbEnabled && isVBEnabledForUser ? <VBToggle /> : null}
       </Flex>
       <Flex align="center" gap="1">
         {isMobile && <NoiseCancellation iconOnly />}

package/src/Prebuilt/components/Settings/LayoutSettings.tsx

@@ -41,34 +41,6 @@ export const LayoutSettings = () => {
 
   return (
     <Box className={settingOverflow()}>
-      <Box>
-        {/* <Text variant="md" css={{ fontWeight: '$semiBold' }}>
-          Layout Modes
-        </Text>
-         <RadioGroup.Root
-          css={{ flexDirection: 'column', alignItems: 'start', gap: '$10', my: '$2', py: '$8' }}
-          value={layoutMode}
-          onValueChange={value =>
-            setUISettings({
-              [UI_SETTINGS.layoutMode]: value,
-            })
-          }
-        >
-          {Object.keys(LayoutMode).map(key => {
-            return (
-              <Flex align="center" key={key} css={{ mr: '$8', gap: '$8' }}>
-                <RadioGroup.Item value={LayoutMode[key as LayoutModeKeys]} id={`layoutMode-${key}`} css={{ mr: '$4' }}>
-                  <RadioGroup.Indicator />
-                </RadioGroup.Item>
-                <Label htmlFor={`layoutMode-${key}`} css={{ display: 'flex', gap: '$8', cursor: 'pointer' }}>
-                  {LayoutModeIconMapping[LayoutMode[key as LayoutModeKeys]]}
-                  {LayoutMode[key as LayoutModeKeys]}
-                </Label>
-              </Flex>
-            );
-          })}
-        </RadioGroup.Root> */}
-      </Box>
       <Flex align="center" css={{ w: '100%', my: '$2', py: '$8', '@md': { display: 'none' } }}>
         <Text variant="md" css={{ fontWeight: '$semiBold' }}>
           Tiles In View({maxTileCount})

package/src/Prebuilt/components/Toast/ToastConfig.jsx

@@ -153,9 +153,9 @@ export const ToastConfig = {
     },
   },
   RECONNECTED: {
-    single: () => {
+    single: online => {
       return {
-        title: `You are now connected`,
+        title: `You are now ${online ? 'online' : 'connected'}`,
         icon: <ConnectivityIcon />,
         variant: 'success',
         duration: 3000,

package/src/Prebuilt/components/VirtualBackground/VBCollection.tsx

@@ -15,6 +15,7 @@ export const VBCollection = ({
     onClick?: () => Promise<void>;
     mediaURL?: string;
     value: string | HMSVirtualBackgroundTypes;
+    supported?: boolean;
   }[];
   title: string;
   activeBackground: string;
@@ -28,17 +29,21 @@ export const VBCollection = ({
         {title}
       </Text>
       <Box css={{ py: '$4', display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: '$8' }}>
-        {options.map((option, index) => (
-          <VBOption.Root
-            key={option.value}
-            testid={option.value === HMSVirtualBackgroundTypes.IMAGE ? `virtual_bg_option-${index}` : option.value}
-            {...option}
-            isActive={activeBackground === option.value}
-          >
-            <VBOption.Icon>{option?.icon}</VBOption.Icon>
-            <VBOption.Title>{option?.title}</VBOption.Title>
-          </VBOption.Root>
-        ))}
+        {options.map((option, index) =>
+          option.supported ? (
+            <VBOption.Root
+              key={option.value}
+              testid={option.value === HMSVirtualBackgroundTypes.IMAGE ? `virtual_bg_option-${index}` : option.value}
+              {...option}
+              isActive={activeBackground === option.value}
+            >
+              <VBOption.Icon>{option?.icon}</VBOption.Icon>
+              <VBOption.Title>{option?.title}</VBOption.Title>
+            </VBOption.Root>
+          ) : (
+            ''
+          ),
+        )}
       </Box>
     </Box>
   );

package/src/Prebuilt/components/VirtualBackground/VBHandler.tsx

@@ -1,8 +1,7 @@
 import { HMSEffectsPlugin, HMSVBPlugin, HMSVirtualBackgroundTypes } from '@100mslive/hms-virtual-background';
-
 export class VBPlugin {
   private hmsPlugin?: HMSVBPlugin;
-  private effectsPlugin?: HMSEffectsPlugin | undefined;
+  private effectsPlugin?: HMSEffectsPlugin;
 
   initialisePlugin = (effectsSDKKey?: string, onInit?: () => void) => {
     if (this.getVBObject()) {

package/src/Prebuilt/components/VirtualBackground/VBPicker.tsx

@@ -22,6 +22,7 @@ import {
 import { BlurPersonHighIcon, CrossCircleIcon, CrossIcon } from '@100mslive/react-icons';
 import { Box, config as cssConfig, Flex, Loading, Slider, Video } from '../../../index';
 import { Text } from '../../../Text';
+import { doesBrowserSupportEffectsSDK } from './util';
 import { VBCollection } from './VBCollection';
 import { VBHandler } from './VBHandler';
 // @ts-ignore
@@ -45,6 +46,7 @@ export const VBPicker = ({ backgroundMedia = [] }: { backgroundMedia: VirtualBac
   const [blurAmount, setBlurAmount] = useState(VBHandler.getBlurAmount() || 0.5);
   const roomState = useHMSStore(selectRoomState);
   const isLargeRoom = useHMSStore(selectIsLargeRoom);
+  const [isBlurSupported, setIsBlurSupported] = useState(false);
   const isEffectsEnabled = useHMSStore(selectIsEffectsEnabled);
   const effectsKey = useHMSStore(selectEffectsKey);
   const isMobile = useMedia(cssConfig.media.md);
@@ -61,13 +63,16 @@ export const VBPicker = ({ backgroundMedia = [] }: { backgroundMedia: VirtualBac
     if (!track?.id) {
       return;
     }
-    if (!isPluginAdded) {
+    const isEffectsSupported = doesBrowserSupportEffectsSDK();
+    setIsBlurSupported(isEffectsSupported);
+    const vbObject = VBHandler.getVBObject();
+    if (!isPluginAdded && !vbObject) {
       setLoadingEffects(true);
       let vbObject = VBHandler.getVBObject();
       if (!vbObject) {
         VBHandler.initialisePlugin(isEffectsEnabled && effectsKey ? effectsKey : '', () => setLoadingEffects(false));
         vbObject = VBHandler.getVBObject();
-        if (isEffectsEnabled && effectsKey) {
+        if (isEffectsEnabled && isEffectsSupported && effectsKey) {
           hmsActions.addPluginsToVideoStream([vbObject as HMSEffectsPlugin]);
         } else {
           setLoadingEffects(false);
@@ -155,6 +160,7 @@ export const VBPicker = ({ backgroundMedia = [] }: { backgroundMedia: VirtualBac
                 await VBHandler.removeEffects();
                 hmsActions.setAppData(APP_DATA.background, HMSVirtualBackgroundTypes.NONE);
               },
+              supported: true,
             },
             {
               title: 'Blur',
@@ -164,6 +170,7 @@ export const VBPicker = ({ backgroundMedia = [] }: { backgroundMedia: VirtualBac
                 await VBHandler?.setBlur(blurAmount);
                 hmsActions.setAppData(APP_DATA.background, HMSVirtualBackgroundTypes.BLUR);
               },
+              supported: isBlurSupported,
             },
           ]}
           activeBackground={background}
@@ -208,6 +215,7 @@ export const VBPicker = ({ backgroundMedia = [] }: { backgroundMedia: VirtualBac
               await VBHandler?.setBackground(mediaURL);
               hmsActions.setAppData(APP_DATA.background, mediaURL);
             },
+            supported: true,
           }))}
           activeBackground={background}
         />

package/src/Prebuilt/components/VirtualBackground/VBToggle.tsx

@@ -1,5 +1,11 @@
 import React from 'react';
-import { selectAppData, selectIsEffectsEnabled, selectIsLocalVideoEnabled, useHMSStore } from '@100mslive/react-sdk';
+import {
+  selectAppData,
+  selectIsEffectsEnabled,
+  selectIsLocalVideoEnabled,
+  selectIsVBEnabled,
+  useHMSStore,
+} from '@100mslive/react-sdk';
 import { VirtualBackgroundIcon } from '@100mslive/react-icons';
 import { Loading } from '../../../Loading';
 import { Tooltip } from '../../../Tooltip';
@@ -12,10 +18,11 @@ export const VBToggle = () => {
   const toggleVB = useSidepaneToggle(SIDE_PANE_OPTIONS.VB);
   const isVBOpen = useIsSidepaneTypeOpen(SIDE_PANE_OPTIONS.VB);
   const isVideoOn = useHMSStore(selectIsLocalVideoEnabled);
+  const isVBEnabled = useHMSStore(selectIsVBEnabled);
   const isEffectsEnabled = useHMSStore(selectIsEffectsEnabled);
   const loadingEffects = useHMSStore(selectAppData(APP_DATA.loadingEffects));
 
-  if (!isVideoOn || (!isEffectsEnabled && isSafari)) {
+  if (!isVideoOn || (!isEffectsEnabled && isSafari) || !isVBEnabled) {
     return null;
   }
 

package/src/Prebuilt/components/VirtualBackground/util.tsx

@@ -0,0 +1,13 @@
+import { parsedUserAgent } from '@100mslive/react-sdk';
+import { isSafari } from '../../common/constants';
+
+export const doesBrowserSupportEffectsSDK = () => {
+  if (!isSafari) {
+    return true;
+  }
+  const browserVersion = parsedUserAgent?.getBrowser()?.version || '16';
+  if (browserVersion && parseInt(browserVersion.split('.')[0]) < 17) {
+    return false;
+  }
+  return true;
+};