@100mslive/roomkit-react 0.3.17-alpha.9 → 0.3.18-alpha.0

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;
+};