@100mslive/roomkit-react 0.3.19-alpha.4 → 0.3.19-alpha.6

package/dist/meta.esbuild.json

@@ -2385,10 +2385,10 @@
       "format": "esm"
     },
     "src/Prebuilt/components/VirtualBackground/VBHandler.tsx": {
-      "bytes": 2719,
+      "bytes": 3223,
       "imports": [
         {
-          "path": "@100mslive/hms-virtual-background",
+          "path": "@100mslive/hms-virtual-background/hmsvbplugin",
           "kind": "import-statement",
           "external": true
         },
@@ -2397,6 +2397,11 @@
           "kind": "import-statement",
           "external": true
         },
+        {
+          "path": "@100mslive/hms-virtual-background/hmseffectsplugin",
+          "kind": "dynamic-import",
+          "external": true
+        },
         {
           "path": "<runtime>",
           "kind": "import-statement",
@@ -6674,7 +6679,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/VirtualBackground/VBToggle.tsx": {
-      "bytes": 1791,
+      "bytes": 1831,
       "imports": [
         {
           "path": "react",
@@ -6682,7 +6687,7 @@
           "external": true
         },
         {
-          "path": "@100mslive/hms-virtual-background",
+          "path": "@100mslive/hms-virtual-background/hmsvbplugin",
           "kind": "import-statement",
           "external": true
         },
@@ -9919,7 +9924,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/VirtualBackground/VBCollection.tsx": {
-      "bytes": 1448,
+      "bytes": 1590,
       "imports": [
         {
           "path": "react",
@@ -9927,7 +9932,7 @@
           "external": true
         },
         {
-          "path": "@100mslive/hms-virtual-background",
+          "path": "@100mslive/hms-virtual-background/hmsvbplugin",
           "kind": "import-statement",
           "external": true
         },
@@ -9960,7 +9965,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/VirtualBackground/VBPicker.tsx": {
-      "bytes": 8341,
+      "bytes": 8800,
       "imports": [
         {
           "path": "react",
@@ -9978,7 +9983,7 @@
           "original": "@100mslive/hms-video-store"
         },
         {
-          "path": "@100mslive/hms-virtual-background",
+          "path": "@100mslive/hms-virtual-background/hmsvbplugin",
           "kind": "import-statement",
           "external": true
         },
@@ -11287,7 +11292,7 @@
       ],
       "format": "esm"
     },
-    "../../../../../../../tmp/tmp-2953-Go9Rxm91Y5IV/191a1c3058f2/tldraw.css": {
+    "../../../../../../../tmp/tmp-2864-zIyGbz3XurZj/191b1a067c52/tldraw.css": {
       "bytes": 80111,
       "imports": [
         {
@@ -11337,7 +11342,7 @@
         }
       ]
     },
-    "../../../../../../../tmp/tmp-2953-Go9Rxm91Y5IV/191a1c3051f0/index.css": {
+    "../../../../../../../tmp/tmp-2864-zIyGbz3XurZj/191b1a067570/index.css": {
       "bytes": 597,
       "imports": [
         {
@@ -11346,7 +11351,7 @@
           "external": true
         },
         {
-          "path": "../../../../../../../tmp/tmp-2953-Go9Rxm91Y5IV/191a1c3058f2/tldraw.css",
+          "path": "../../../../../../../tmp/tmp-2864-zIyGbz3XurZj/191b1a067c52/tldraw.css",
           "kind": "import-rule",
           "original": "@tldraw/tldraw/tldraw.css"
         }
@@ -11421,7 +11426,7 @@
           "original": "../../common/constants"
         },
         {
-          "path": "../../../../../../../tmp/tmp-2953-Go9Rxm91Y5IV/191a1c3051f0/index.css",
+          "path": "../../../../../../../tmp/tmp-2864-zIyGbz3XurZj/191b1a067570/index.css",
           "kind": "import-statement",
           "original": "@100mslive/hms-whiteboard/index.css"
         },
@@ -15409,7 +15414,7 @@
     "dist/index.js": {
       "imports": [
         {
-          "path": "dist/chunk-FZNVIKYB.js",
+          "path": "dist/chunk-KZIOZDJV.js",
           "kind": "import-statement"
         }
       ],
@@ -15485,16 +15490,16 @@
       "inputs": {},
       "bytes": 1882
     },
-    "dist/HLSView-LMQPPX5V.js.map": {
+    "dist/HLSView-2P2FVCEW.js.map": {
       "imports": [],
       "exports": [],
       "inputs": {},
       "bytes": 100275
     },
-    "dist/HLSView-LMQPPX5V.js": {
+    "dist/HLSView-2P2FVCEW.js": {
       "imports": [
         {
-          "path": "dist/chunk-FZNVIKYB.js",
+          "path": "dist/chunk-KZIOZDJV.js",
           "kind": "import-statement"
         },
         {
@@ -15672,7 +15677,7 @@
         "default"
       ],
       "entryPoint": "src/Prebuilt/layouts/HLSView.jsx",
-      "cssBundle": "dist/HLSView-IQOQUTLY.css",
+      "cssBundle": "dist/HLSView-GRUKIJTY.css",
       "inputs": {
         "src/Prebuilt/layouts/HLSView.jsx": {
           "bytesInOutput": 27671
@@ -15731,13 +15736,13 @@
       },
       "bytes": 61702
     },
-    "dist/chunk-FZNVIKYB.js.map": {
+    "dist/chunk-KZIOZDJV.js.map": {
       "imports": [],
       "exports": [],
       "inputs": {},
-      "bytes": 3516573
+      "bytes": 3518013
     },
-    "dist/chunk-FZNVIKYB.js": {
+    "dist/chunk-KZIOZDJV.js": {
       "imports": [
         {
           "path": "react",
@@ -16190,10 +16195,15 @@
           "external": true
         },
         {
-          "path": "@100mslive/hms-virtual-background",
+          "path": "@100mslive/hms-virtual-background/hmsvbplugin",
           "kind": "import-statement",
           "external": true
         },
+        {
+          "path": "@100mslive/hms-virtual-background/hmseffectsplugin",
+          "kind": "dynamic-import",
+          "external": true
+        },
         {
           "path": "react",
           "kind": "import-statement",
@@ -17085,7 +17095,7 @@
           "external": true
         },
         {
-          "path": "@100mslive/hms-virtual-background",
+          "path": "@100mslive/hms-virtual-background/hmsvbplugin",
           "kind": "import-statement",
           "external": true
         },
@@ -17900,7 +17910,7 @@
           "external": true
         },
         {
-          "path": "@100mslive/hms-virtual-background",
+          "path": "@100mslive/hms-virtual-background/hmsvbplugin",
           "kind": "import-statement",
           "external": true
         },
@@ -17925,7 +17935,7 @@
           "external": true
         },
         {
-          "path": "@100mslive/hms-virtual-background",
+          "path": "@100mslive/hms-virtual-background/hmsvbplugin",
           "kind": "import-statement",
           "external": true
         },
@@ -18275,7 +18285,7 @@
           "external": true
         },
         {
-          "path": "dist/HLSView-LMQPPX5V.js",
+          "path": "dist/HLSView-2P2FVCEW.js",
           "kind": "dynamic-import"
         },
         {
@@ -18894,7 +18904,7 @@
       ],
       "inputs": {
         "<define:process.env>": {
-          "bytesInOutput": 18007
+          "bytesInOutput": 18005
         },
         "../../node_modules/lodash/lodash.js": {
           "bytesInOutput": 224301
@@ -19230,7 +19240,7 @@
           "bytesInOutput": 2781
         },
         "src/Prebuilt/components/VirtualBackground/VBHandler.tsx": {
-          "bytesInOutput": 3404
+          "bytesInOutput": 3794
         },
         "src/Prebuilt/components/hooks/useRedirectToLeave.tsx": {
           "bytesInOutput": 489
@@ -19521,7 +19531,7 @@
           "bytesInOutput": 823
         },
         "src/Prebuilt/components/VirtualBackground/VBToggle.tsx": {
-          "bytesInOutput": 1805
+          "bytesInOutput": 1817
         },
         "src/Prebuilt/components/Footer/ChatToggle.tsx": {
           "bytesInOutput": 1564
@@ -19713,13 +19723,13 @@
           "bytesInOutput": 1050
         },
         "src/Prebuilt/components/VirtualBackground/VBPicker.tsx": {
-          "bytesInOutput": 8218
+          "bytesInOutput": 8570
         },
         "src/Prebuilt/components/VirtualBackground/util.tsx": {
           "bytesInOutput": 449
         },
         "src/Prebuilt/components/VirtualBackground/VBCollection.tsx": {
-          "bytesInOutput": 1240
+          "bytesInOutput": 1252
         },
         "src/Prebuilt/components/VirtualBackground/VBOption.tsx": {
           "bytesInOutput": 1156
@@ -19790,7 +19800,7 @@
         "src/Prebuilt/components/VideoLayouts/WhiteboardLayout.tsx": {
           "bytesInOutput": 2830
         },
-        "../../../../../../../tmp/tmp-2953-Go9Rxm91Y5IV/191a1c3051f0/index.css": {
+        "../../../../../../../tmp/tmp-2864-zIyGbz3XurZj/191b1a067570/index.css": {
           "bytesInOutput": 0
         },
         "src/Prebuilt/common/PeersSorter.ts": {
@@ -19959,7 +19969,7 @@
           "bytesInOutput": 2628
         }
       },
-      "bytes": 1458334
+      "bytes": 1459098
     },
     "dist/index.css.map": {
       "imports": [],
@@ -20021,22 +20031,22 @@
         }
       ],
       "inputs": {
-        "../../../../../../../tmp/tmp-2953-Go9Rxm91Y5IV/191a1c3058f2/tldraw.css": {
+        "../../../../../../../tmp/tmp-2864-zIyGbz3XurZj/191b1a067c52/tldraw.css": {
           "bytesInOutput": 75223
         },
-        "../../../../../../../tmp/tmp-2953-Go9Rxm91Y5IV/191a1c3051f0/index.css": {
+        "../../../../../../../tmp/tmp-2864-zIyGbz3XurZj/191b1a067570/index.css": {
           "bytesInOutput": 401
         }
       },
       "bytes": 75901
     },
-    "dist/HLSView-IQOQUTLY.css.map": {
+    "dist/HLSView-GRUKIJTY.css.map": {
       "imports": [],
       "exports": [],
       "inputs": {},
       "bytes": 122402
     },
-    "dist/HLSView-IQOQUTLY.css": {
+    "dist/HLSView-GRUKIJTY.css": {
       "imports": [
         {
           "path": "https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap",
@@ -20090,10 +20100,10 @@
         }
       ],
       "inputs": {
-        "../../../../../../../tmp/tmp-2953-Go9Rxm91Y5IV/191a1c3058f2/tldraw.css": {
+        "../../../../../../../tmp/tmp-2864-zIyGbz3XurZj/191b1a067c52/tldraw.css": {
           "bytesInOutput": 75223
         },
-        "../../../../../../../tmp/tmp-2953-Go9Rxm91Y5IV/191a1c3051f0/index.css": {
+        "../../../../../../../tmp/tmp-2864-zIyGbz3XurZj/191b1a067570/index.css": {
           "bytesInOutput": 401
         }
       },

package/package.json

@@ -10,7 +10,7 @@
     "prebuilt",
     "roomkit"
   ],
-  "version": "0.3.19-alpha.4",
+  "version": "0.3.19-alpha.6",
   "author": "100ms",
   "license": "MIT",
   "repository": {
@@ -75,12 +75,12 @@
     "react": ">=17.0.2 <19.0.0"
   },
   "dependencies": {
-    "@100mslive/hls-player": "0.3.19-alpha.4",
+    "@100mslive/hls-player": "0.3.19-alpha.6",
     "@100mslive/hms-noise-cancellation": "0.0.1",
-    "@100mslive/hms-virtual-background": "1.13.19-alpha.4",
-    "@100mslive/hms-whiteboard": "0.0.9-alpha.4",
-    "@100mslive/react-icons": "0.10.19-alpha.4",
-    "@100mslive/react-sdk": "0.10.19-alpha.4",
+    "@100mslive/hms-virtual-background": "1.13.19-alpha.6",
+    "@100mslive/hms-whiteboard": "0.0.9-alpha.6",
+    "@100mslive/react-icons": "0.10.19-alpha.6",
+    "@100mslive/react-sdk": "0.10.19-alpha.6",
     "@100mslive/types-prebuilt": "0.12.12",
     "@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": "9e4ed31790cb83d42e38f70aaa79aaeb0b9faa05"
+  "gitHead": "bff1ab1173426dcefe0c58e22ac406f01a110443"
 }

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,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,