@100mslive/roomkit-react 0.3.19-alpha.0 → 0.3.19-alpha.10

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,24 @@
-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';
+
 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 { HMSEffectsPlugin } = await import('@100mslive/hms-virtual-background/hmseffectsplugin');
+        this.effectsPlugin = new 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);
     }

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,
@@ -54,49 +57,61 @@ 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 initializeVirtualBackground = async () => {
+      if (!track?.id || pluginLoadingRef.current || isPluginAdded) {
+        return;
+      }
+
+      const isEffectsSupported = doesBrowserSupportEffectsSDK();
+      setIsBlurSupported(isEffectsSupported);
+
+      try {
+        pluginLoadingRef.current = true;
         if (isEffectsEnabled && isEffectsSupported && effectsKey) {
-          hmsActions.addPluginsToVideoStream([vbObject as HMSEffectsPlugin]);
+          setLoadingEffects(true);
+          await VBHandler.initialisePlugin(effectsKey, () => {
+            setLoadingEffects(false);
+          });
+          hmsActions.addPluginsToVideoStream([VBHandler.getVBObject() as HMSMediaStreamPlugin]);
         } else {
           setLoadingEffects(false);
           if (!role) {
             return;
           }
-          hmsActions.addPluginToVideoTrack(vbObject as HMSVBPlugin, Math.floor(role.publishParams.video.frameRate / 2));
+          await VBHandler.initialisePlugin();
+          await hmsActions.addPluginToVideoTrack(
+            VBHandler.getVBObject() as HMSVBPlugin,
+            Math.floor(role.publishParams.video.frameRate / 2),
+          );
         }
-      }
-      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,

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

@@ -1,15 +1,20 @@
-import React from 'react';
+import React, { useEffect } from 'react';
+// eslint-disable-next-line
+import { HMSVirtualBackgroundTypes } from '@100mslive/hms-virtual-background/hmsvbplugin';
 import {
   selectAppData,
   selectIsEffectsEnabled,
   selectIsLocalVideoEnabled,
   selectIsVBEnabled,
+  useAVToggle,
+  useHMSActions,
   useHMSStore,
 } from '@100mslive/react-sdk';
 import { VirtualBackgroundIcon } from '@100mslive/react-icons';
 import { Loading } from '../../../Loading';
 import { Tooltip } from '../../../Tooltip';
 import IconButton from '../../IconButton';
+import { VBHandler } from './VBHandler';
 // @ts-ignore
 import { useIsSidepaneTypeOpen, useSidepaneToggle } from '../AppData/useSidepane';
 import { APP_DATA, isSafari, SIDE_PANE_OPTIONS } from '../../common/constants';
@@ -21,6 +26,15 @@ export const VBToggle = () => {
   const isVBEnabled = useHMSStore(selectIsVBEnabled);
   const isEffectsEnabled = useHMSStore(selectIsEffectsEnabled);
   const loadingEffects = useHMSStore(selectAppData(APP_DATA.loadingEffects));
+  const hmsActions = useHMSActions();
+  const { toggleVideo } = useAVToggle();
+
+  useEffect(() => {
+    if (!toggleVideo) {
+      VBHandler?.reset();
+      hmsActions.setAppData(APP_DATA.background, HMSVirtualBackgroundTypes.NONE);
+    }
+  }, [hmsActions, toggleVideo]);
 
   if (!isVideoOn || (!isEffectsEnabled && isSafari) || !isVBEnabled) {
     return null;

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/src/Video/Video.tsx

@@ -57,5 +57,5 @@ interface Props {
 
 export const Video: React.FC<Props & StyledProps> = ({ trackId, attach, ...props }) => {
   const { videoRef } = useVideo({ trackId, attach });
-  return <StyledVideo autoPlay muted playsInline controls={false} ref={videoRef} {...props} />;
+  return <StyledVideo ref={videoRef} {...props} />;
 };