@100mslive/roomkit-react 0.3.17-alpha.16 → 0.3.17-alpha.18

package/dist/meta.esbuild.json

@@ -9815,6 +9815,27 @@
       ],
       "format": "esm"
     },
+    "src/Prebuilt/components/VirtualBackground/util.tsx": {
+      "bytes": 384,
+      "imports": [
+        {
+          "path": "@100mslive/react-sdk",
+          "kind": "import-statement",
+          "external": true
+        },
+        {
+          "path": "src/Prebuilt/common/constants.ts",
+          "kind": "import-statement",
+          "original": "../../common/constants"
+        },
+        {
+          "path": "<define:process.env>",
+          "kind": "import-statement",
+          "external": true
+        }
+      ],
+      "format": "esm"
+    },
     "src/Prebuilt/components/VirtualBackground/VBOption.tsx": {
       "bytes": 1248,
       "imports": [
@@ -9847,7 +9868,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/VirtualBackground/VBCollection.tsx": {
-      "bytes": 1333,
+      "bytes": 1448,
       "imports": [
         {
           "path": "react",
@@ -9909,7 +9930,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/VirtualBackground/VBPicker.tsx": {
-      "bytes": 7990,
+      "bytes": 8341,
       "imports": [
         {
           "path": "react",
@@ -9956,6 +9977,11 @@
           "kind": "import-statement",
           "original": "../../../Text"
         },
+        {
+          "path": "src/Prebuilt/components/VirtualBackground/util.tsx",
+          "kind": "import-statement",
+          "original": "./util"
+        },
         {
           "path": "src/Prebuilt/components/VirtualBackground/VBCollection.tsx",
           "kind": "import-statement",
@@ -11231,7 +11257,7 @@
       ],
       "format": "esm"
     },
-    "../../../../../../../tmp/tmp-2891-EX2gc4z4skDp/1914182eec72/tldraw.css": {
+    "../../../../../../../tmp/tmp-2900-ECS5JLRSbwsK/1914bc5f8513/tldraw.css": {
       "bytes": 80111,
       "imports": [
         {
@@ -11281,7 +11307,7 @@
         }
       ]
     },
-    "../../../../../../../tmp/tmp-2891-EX2gc4z4skDp/1914182eeaa1/index.css": {
+    "../../../../../../../tmp/tmp-2900-ECS5JLRSbwsK/1914bc5f7ec1/index.css": {
       "bytes": 597,
       "imports": [
         {
@@ -11290,7 +11316,7 @@
           "external": true
         },
         {
-          "path": "../../../../../../../tmp/tmp-2891-EX2gc4z4skDp/1914182eec72/tldraw.css",
+          "path": "../../../../../../../tmp/tmp-2900-ECS5JLRSbwsK/1914bc5f8513/tldraw.css",
           "kind": "import-rule",
           "original": "@tldraw/tldraw/tldraw.css"
         }
@@ -11365,7 +11391,7 @@
           "original": "../../common/constants"
         },
         {
-          "path": "../../../../../../../tmp/tmp-2891-EX2gc4z4skDp/1914182eeaa1/index.css",
+          "path": "../../../../../../../tmp/tmp-2900-ECS5JLRSbwsK/1914bc5f7ec1/index.css",
           "kind": "import-statement",
           "original": "@100mslive/hms-whiteboard/index.css"
         },
@@ -15247,7 +15273,7 @@
     "dist/index.js": {
       "imports": [
         {
-          "path": "dist/chunk-YYL6ON5H.js",
+          "path": "dist/chunk-5PGZVXOM.js",
           "kind": "import-statement"
         }
       ],
@@ -15323,16 +15349,16 @@
       "inputs": {},
       "bytes": 1882
     },
-    "dist/HLSView-4BRVWYBO.js.map": {
+    "dist/HLSView-TGKNWZ4F.js.map": {
       "imports": [],
       "exports": [],
       "inputs": {},
       "bytes": 100275
     },
-    "dist/HLSView-4BRVWYBO.js": {
+    "dist/HLSView-TGKNWZ4F.js": {
       "imports": [
         {
-          "path": "dist/chunk-YYL6ON5H.js",
+          "path": "dist/chunk-5PGZVXOM.js",
           "kind": "import-statement"
         },
         {
@@ -15510,7 +15536,7 @@
         "default"
       ],
       "entryPoint": "src/Prebuilt/layouts/HLSView.jsx",
-      "cssBundle": "dist/HLSView-DBGJFTBH.css",
+      "cssBundle": "dist/HLSView-JLT2FIVT.css",
       "inputs": {
         "src/Prebuilt/layouts/HLSView.jsx": {
           "bytesInOutput": 27671
@@ -15569,13 +15595,13 @@
       },
       "bytes": 61702
     },
-    "dist/chunk-YYL6ON5H.js.map": {
+    "dist/chunk-5PGZVXOM.js.map": {
       "imports": [],
       "exports": [],
       "inputs": {},
-      "bytes": 3488268
+      "bytes": 3489707
     },
-    "dist/chunk-YYL6ON5H.js": {
+    "dist/chunk-5PGZVXOM.js": {
       "imports": [
         {
           "path": "react",
@@ -17742,6 +17768,11 @@
           "kind": "import-statement",
           "external": true
         },
+        {
+          "path": "@100mslive/react-sdk",
+          "kind": "import-statement",
+          "external": true
+        },
         {
           "path": "react",
           "kind": "import-statement",
@@ -18103,7 +18134,7 @@
           "external": true
         },
         {
-          "path": "dist/HLSView-4BRVWYBO.js",
+          "path": "dist/HLSView-TGKNWZ4F.js",
           "kind": "dynamic-import"
         },
         {
@@ -18702,7 +18733,7 @@
       ],
       "inputs": {
         "<define:process.env>": {
-          "bytesInOutput": 17988
+          "bytesInOutput": 17989
         },
         "../../node_modules/lodash/lodash.js": {
           "bytesInOutput": 224289
@@ -19518,10 +19549,13 @@
           "bytesInOutput": 1050
         },
         "src/Prebuilt/components/VirtualBackground/VBPicker.tsx": {
-          "bytesInOutput": 7926
+          "bytesInOutput": 8218
+        },
+        "src/Prebuilt/components/VirtualBackground/util.tsx": {
+          "bytesInOutput": 449
         },
         "src/Prebuilt/components/VirtualBackground/VBCollection.tsx": {
-          "bytesInOutput": 1157
+          "bytesInOutput": 1209
         },
         "src/Prebuilt/components/VirtualBackground/VBOption.tsx": {
           "bytesInOutput": 1156
@@ -19595,7 +19629,7 @@
         "src/Prebuilt/components/VideoLayouts/WhiteboardLayout.tsx": {
           "bytesInOutput": 2830
         },
-        "../../../../../../../tmp/tmp-2891-EX2gc4z4skDp/1914182eeaa1/index.css": {
+        "../../../../../../../tmp/tmp-2900-ECS5JLRSbwsK/1914bc5f7ec1/index.css": {
           "bytesInOutput": 0
         },
         "src/Prebuilt/common/PeersSorter.ts": {
@@ -19761,7 +19795,7 @@
           "bytesInOutput": 2632
         }
       },
-      "bytes": 1445543
+      "bytes": 1446392
     },
     "dist/index.css.map": {
       "imports": [],
@@ -19823,22 +19857,22 @@
         }
       ],
       "inputs": {
-        "../../../../../../../tmp/tmp-2891-EX2gc4z4skDp/1914182eec72/tldraw.css": {
+        "../../../../../../../tmp/tmp-2900-ECS5JLRSbwsK/1914bc5f8513/tldraw.css": {
           "bytesInOutput": 75223
         },
-        "../../../../../../../tmp/tmp-2891-EX2gc4z4skDp/1914182eeaa1/index.css": {
+        "../../../../../../../tmp/tmp-2900-ECS5JLRSbwsK/1914bc5f7ec1/index.css": {
           "bytesInOutput": 401
         }
       },
       "bytes": 75901
     },
-    "dist/HLSView-DBGJFTBH.css.map": {
+    "dist/HLSView-JLT2FIVT.css.map": {
       "imports": [],
       "exports": [],
       "inputs": {},
       "bytes": 122402
     },
-    "dist/HLSView-DBGJFTBH.css": {
+    "dist/HLSView-JLT2FIVT.css": {
       "imports": [
         {
           "path": "https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap",
@@ -19892,10 +19926,10 @@
         }
       ],
       "inputs": {
-        "../../../../../../../tmp/tmp-2891-EX2gc4z4skDp/1914182eec72/tldraw.css": {
+        "../../../../../../../tmp/tmp-2900-ECS5JLRSbwsK/1914bc5f8513/tldraw.css": {
           "bytesInOutput": 75223
         },
-        "../../../../../../../tmp/tmp-2891-EX2gc4z4skDp/1914182eeaa1/index.css": {
+        "../../../../../../../tmp/tmp-2900-ECS5JLRSbwsK/1914bc5f7ec1/index.css": {
           "bytesInOutput": 401
         }
       },

package/package.json

@@ -10,7 +10,7 @@
     "prebuilt",
     "roomkit"
   ],
-  "version": "0.3.17-alpha.16",
+  "version": "0.3.17-alpha.18",
   "author": "100ms",
   "license": "MIT",
   "repository": {
@@ -75,12 +75,12 @@
     "react": ">=17.0.2 <19.0.0"
   },
   "dependencies": {
-    "@100mslive/hls-player": "0.3.17-alpha.16",
+    "@100mslive/hls-player": "0.3.17-alpha.18",
     "@100mslive/hms-noise-cancellation": "0.0.1",
-    "@100mslive/hms-virtual-background": "1.13.17-alpha.16",
-    "@100mslive/hms-whiteboard": "0.0.7-alpha.16",
-    "@100mslive/react-icons": "0.10.17-alpha.16",
-    "@100mslive/react-sdk": "0.10.17-alpha.16",
+    "@100mslive/hms-virtual-background": "1.13.17-alpha.18",
+    "@100mslive/hms-whiteboard": "0.0.7-alpha.18",
+    "@100mslive/react-icons": "0.10.17-alpha.18",
+    "@100mslive/react-sdk": "0.10.17-alpha.18",
     "@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": "6b9bec2f5b82629807bd10d46cba98fa43f3babc"
+  "gitHead": "e1735243c4f74ff028a5ac81cf1524db1edfd86b"
 }

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/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,6 +63,8 @@ export const VBPicker = ({ backgroundMedia = [] }: { backgroundMedia: VirtualBac
     if (!track?.id) {
       return;
     }
+    const isEffectsSupported = doesBrowserSupportEffectsSDK();
+    setIsBlurSupported(isEffectsSupported);
     const vbObject = VBHandler.getVBObject();
     if (!isPluginAdded && !vbObject) {
       setLoadingEffects(true);
@@ -68,7 +72,7 @@ export const VBPicker = ({ backgroundMedia = [] }: { backgroundMedia: VirtualBac
       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);
@@ -156,6 +160,7 @@ export const VBPicker = ({ backgroundMedia = [] }: { backgroundMedia: VirtualBac
                 await VBHandler.removeEffects();
                 hmsActions.setAppData(APP_DATA.background, HMSVirtualBackgroundTypes.NONE);
               },
+              supported: true,
             },
             {
               title: 'Blur',
@@ -165,6 +170,7 @@ export const VBPicker = ({ backgroundMedia = [] }: { backgroundMedia: VirtualBac
                 await VBHandler?.setBlur(blurAmount);
                 hmsActions.setAppData(APP_DATA.background, HMSVirtualBackgroundTypes.BLUR);
               },
+              supported: isBlurSupported,
             },
           ]}
           activeBackground={background}
@@ -209,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/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;
+};