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

package/src/Prebuilt/components/VideoLayouts/RoleProminence.tsx

@@ -5,7 +5,6 @@ import { config as cssConfig } from '../../../Theme';
 import { InsetTile } from '../InsetTile';
 import { Pagination } from '../Pagination';
 import { SecondaryTiles } from '../SecondaryTiles';
-import { LayoutMode } from '../Settings/LayoutSettings';
 import { Grid } from './Grid';
 import { LayoutProps } from './interface';
 import { ProminenceLayout } from './ProminenceLayout';
@@ -25,7 +24,6 @@ export function RoleProminence({
 }: LayoutProps) {
   const { prominentPeers, secondaryPeers } = useRoleProminencePeers(prominentRoles, peers, isInsetEnabled);
   const localPeer = useHMSStore(selectLocalPeer);
-  const layoutMode = useUISettings(UI_SETTINGS.layoutMode);
   const isMobile = useMedia(cssConfig.media.md);
   let maxTileCount = useUISettings(UI_SETTINGS.maxTileCount);
   maxTileCount = isMobile ? 4 : maxTileCount;
@@ -47,7 +45,7 @@ export function RoleProminence({
   }, [pageSize, onPageSize]);
 
   return (
-    <ProminenceLayout.Root hasSidebar={layoutMode === LayoutMode.SIDEBAR}>
+    <ProminenceLayout.Root>
       <ProminenceLayout.ProminentSection>
         <Grid ref={ref} tiles={pagesWithTiles[page]} />
       </ProminenceLayout.ProminentSection>
@@ -61,12 +59,7 @@ export function RoleProminence({
           numPages={pagesWithTiles.length}
         />
       )}
-      <SecondaryTiles
-        peers={layoutMode === LayoutMode.SPOTLIGHT ? [] : secondaryPeers}
-        isInsetEnabled={isInsetEnabled}
-        edgeToEdge={edgeToEdge}
-        hasSidebar={layoutMode === LayoutMode.SIDEBAR}
-      />
+      <SecondaryTiles peers={secondaryPeers} isInsetEnabled={isInsetEnabled} edgeToEdge={edgeToEdge} />
       {isInsetEnabled && localPeer && prominentPeers.length > 0 && !prominentPeers.includes(localPeer) && <InsetTile />}
     </ProminenceLayout.Root>
   );

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

@@ -1,5 +1,7 @@
 import React from 'react';
-import { HMSVirtualBackgroundTypes } from '@100mslive/hms-virtual-background';
+// Open issue with eslint-plugin-import https://github.com/import-js/eslint-plugin-import/issues/1810
+// eslint-disable-next-line
+import { HMSVirtualBackgroundTypes } from '@100mslive/hms-virtual-background/hmsvbplugin';
 import { Box } from '../../../Layout';
 import { Text } from '../../../Text';
 import { VBOption } from './VBOption';

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

@@ -1,14 +1,25 @@
-import { HMSEffectsPlugin, HMSVBPlugin, HMSVirtualBackgroundTypes } from '@100mslive/hms-virtual-background';
+// Open issue with eslint-plugin-import https://github.com/import-js/eslint-plugin-import/issues/1810
+// eslint-disable-next-line
+import { HMSVBPlugin, HMSVirtualBackgroundTypes } from '@100mslive/hms-virtual-background/hmsvbplugin';
+import { parsedUserAgent } from '@100mslive/react-sdk';
+import { isSafari } from '../../common/constants';
 export class VBPlugin {
   private hmsPlugin?: HMSVBPlugin;
-  private effectsPlugin?: HMSEffectsPlugin;
+  private effectsPlugin?: any;
 
-  initialisePlugin = (effectsSDKKey?: string, onInit?: () => void) => {
+  initialisePlugin = async (effectsSDKKey?: string, onInit?: () => void) => {
     if (this.getVBObject()) {
       return;
     }
     if (effectsSDKKey) {
-      this.effectsPlugin = new HMSEffectsPlugin(effectsSDKKey, onInit);
+      try {
+        // eslint-disable-next-line
+        const effects = await import('@100mslive/hms-virtual-background/hmseffectsplugin');
+        this.effectsPlugin = new effects.HMSEffectsPlugin(effectsSDKKey, onInit);
+      } catch (error) {
+        console.error('Failed to initialise HMSEffectsPlugin:', error, 'Using HMSVBPlugin');
+        this.hmsPlugin = new HMSVBPlugin(HMSVirtualBackgroundTypes.NONE, HMSVirtualBackgroundTypes.NONE);
+      }
     } else {
       this.hmsPlugin = new HMSVBPlugin(HMSVirtualBackgroundTypes.NONE, HMSVirtualBackgroundTypes.NONE);
     }
@@ -91,6 +102,17 @@ export class VBPlugin {
     this.effectsPlugin = undefined;
     this.hmsPlugin = undefined;
   };
+
+  isEffectsSupported = () => {
+    if (!isSafari) {
+      return true;
+    }
+    const browserVersion = parsedUserAgent?.getBrowser()?.version || '16';
+    if (browserVersion && parseInt(browserVersion.split('.')[0]) < 17) {
+      return false;
+    }
+    return true;
+  };
 }
 
 export const VBHandler = new VBPlugin();

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

@@ -1,12 +1,15 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { useMedia } from 'react-use';
 import {
+  HMSMediaStreamPlugin,
   selectAppData,
   selectEffectsKey,
   selectIsEffectsEnabled,
   selectLocalPeerRole,
 } from '@100mslive/hms-video-store';
-import { HMSEffectsPlugin, HMSVBPlugin, HMSVirtualBackgroundTypes } from '@100mslive/hms-virtual-background';
+// Open issue with eslint-plugin-import https://github.com/import-js/eslint-plugin-import/issues/1810
+// eslint-disable-next-line
+import { HMSVBPlugin, HMSVirtualBackgroundTypes } from '@100mslive/hms-virtual-background/hmsvbplugin';
 import { VirtualBackgroundMedia } from '@100mslive/types-prebuilt/elements/virtual_background';
 import {
   HMSRoomState,
@@ -22,7 +25,6 @@ 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
@@ -46,7 +48,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 isEffectsSupported = VBHandler.isEffectsSupported();
   const isEffectsEnabled = useHMSStore(selectIsEffectsEnabled);
   const effectsKey = useHMSStore(selectEffectsKey);
   const isMobile = useMedia(cssConfig.media.md);
@@ -54,54 +56,72 @@ export const VBPicker = ({ backgroundMedia = [] }: { backgroundMedia: VirtualBac
   const isPluginAdded = useHMSStore(selectIsLocalVideoPluginPresent(VBHandler?.getName() || ''));
   const background = useHMSStore(selectAppData(APP_DATA.background));
   const mediaList = backgroundMedia.map((media: VirtualBackgroundMedia) => media.url || '');
+  const pluginLoadingRef = useRef(false);
 
   const inPreview = roomState === HMSRoomState.Preview;
   // Hidden in preview as the effect will be visible in the preview tile
   const showVideoTile = isVideoOn && isLargeRoom && !inPreview;
 
   useEffect(() => {
-    if (!track?.id) {
-      return;
-    }
-    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();
+    const addHMSVBPlugin = async () => {
+      setLoadingEffects(false);
+      if (!role) {
+        return;
+      }
+      await VBHandler.initialisePlugin();
+      await hmsActions.addPluginToVideoTrack(
+        VBHandler.getVBObject() as HMSVBPlugin,
+        Math.floor(role.publishParams.video.frameRate / 2),
+      );
+    };
+    const initializeVirtualBackground = async () => {
+      if (!track?.id || pluginLoadingRef.current || isPluginAdded) {
+        return;
+      }
+
+      try {
+        pluginLoadingRef.current = true;
         if (isEffectsEnabled && isEffectsSupported && effectsKey) {
-          hmsActions.addPluginsToVideoStream([vbObject as HMSEffectsPlugin]);
-        } else {
-          setLoadingEffects(false);
-          if (!role) {
-            return;
+          setLoadingEffects(true);
+          await VBHandler.initialisePlugin(effectsKey, () => {
+            setLoadingEffects(false);
+          });
+          const vbInstance = VBHandler.getVBObject();
+          if (vbInstance.getName() === 'HMSEffects') {
+            hmsActions.addPluginsToVideoStream([VBHandler.getVBObject() as HMSMediaStreamPlugin]);
+          } else {
+            await addHMSVBPlugin();
           }
-          hmsActions.addPluginToVideoTrack(vbObject as HMSVBPlugin, Math.floor(role.publishParams.video.frameRate / 2));
+        } else {
+          await addHMSVBPlugin();
         }
-      }
-      const handleDefaultBackground = async () => {
-        switch (background) {
-          case HMSVirtualBackgroundTypes.NONE: {
-            break;
-          }
-          case HMSVirtualBackgroundTypes.BLUR: {
-            await VBHandler.setBlur(blurAmount);
-            break;
+
+        const handleDefaultBackground = async () => {
+          switch (background) {
+            case HMSVirtualBackgroundTypes.NONE:
+              break;
+            case HMSVirtualBackgroundTypes.BLUR:
+              await VBHandler.setBlur(blurAmount);
+              break;
+            default:
+              await VBHandler.setBackground(background);
           }
-          default:
-            await VBHandler.setBackground(background);
-        }
-      };
-      handleDefaultBackground();
-    }
+        };
+
+        await handleDefaultBackground();
+      } catch (error) {
+        console.error('Error initializing virtual background:', error);
+        setLoadingEffects(false);
+      }
+    };
+
+    initializeVirtualBackground();
   }, [
     hmsActions,
     role,
     isPluginAdded,
     isEffectsEnabled,
+    isEffectsSupported,
     effectsKey,
     track?.id,
     background,
@@ -170,7 +190,7 @@ export const VBPicker = ({ backgroundMedia = [] }: { backgroundMedia: VirtualBac
                 await VBHandler?.setBlur(blurAmount);
                 hmsActions.setAppData(APP_DATA.background, HMSVirtualBackgroundTypes.BLUR);
               },
-              supported: isBlurSupported,
+              supported: isEffectsSupported && isEffectsEnabled,
             },
           ]}
           activeBackground={background}

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

@@ -1,5 +1,6 @@
 import React, { useEffect } from 'react';
-import { HMSVirtualBackgroundTypes } from '@100mslive/hms-virtual-background';
+// eslint-disable-next-line
+import { HMSVirtualBackgroundTypes } from '@100mslive/hms-virtual-background/hmsvbplugin';
 import {
   selectAppData,
   selectIsEffectsEnabled,

package/src/Prebuilt/plugins/CaptionsViewer.tsx

@@ -144,7 +144,10 @@ class Queue {
 }
 
 class CaptionMaintainerQueue {
-  captionData: Queue = new Queue();
+  captionData: Queue;
+  constructor() {
+    this.captionData = new Queue();
+  }
   push(data: HMSTranscript[] = []) {
     data.forEach((value: HMSTranscript) => {
       this.captionData.enqueue(value);

package/src/Prebuilt/provider/roomLayoutProvider/hooks/useRoomLayoutScreen.ts

@@ -77,6 +77,7 @@ export function useRoomLayoutLeaveScreen() {
   const isLeaveScreenEnabled = !!screenProps;
   return {
     isLeaveScreenEnabled,
+    feedback: screenProps?.default?.elements?.feedback,
   };
 }
 

package/dist/Prebuilt/components/VirtualBackground/util.d.ts

@@ -1 +0,0 @@
-export declare const doesBrowserSupportEffectsSDK: () => boolean;