@100mslive/roomkit-react 0.3.19-alpha.9 → 0.3.19

package/dist/meta.esbuild.json

@@ -2390,13 +2390,23 @@
       "format": "esm"
     },
     "src/Prebuilt/components/VirtualBackground/VBHandler.tsx": {
-      "bytes": 3223,
+      "bytes": 3598,
       "imports": [
         {
           "path": "@100mslive/hms-virtual-background/hmsvbplugin",
           "kind": "import-statement",
           "external": true
         },
+        {
+          "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",
@@ -2515,7 +2525,7 @@
       "format": "esm"
     },
     "src/Prebuilt/AppStateContext.tsx": {
-      "bytes": 3380,
+      "bytes": 3531,
       "imports": [
         {
           "path": "react",
@@ -3561,7 +3571,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/Leave/LeaveSessionContent.tsx": {
-      "bytes": 1759,
+      "bytes": 1786,
       "imports": [
         {
           "path": "react",
@@ -4342,7 +4352,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/PIP/PIPChat.tsx": {
-      "bytes": 10270,
+      "bytes": 10417,
       "imports": [
         {
           "path": "react",
@@ -5739,7 +5749,7 @@
       "format": "cjs"
     },
     "../hms-video-store/dist/index.js": {
-      "bytes": 367247,
+      "bytes": 367512,
       "imports": [
         {
           "path": "../../node_modules/reselect/es/index.js",
@@ -9876,27 +9886,6 @@
       ],
       "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": [
@@ -9970,7 +9959,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/VirtualBackground/VBPicker.tsx": {
-      "bytes": 8800,
+      "bytes": 8900,
       "imports": [
         {
           "path": "react",
@@ -10017,11 +10006,6 @@
           "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",
@@ -11292,7 +11276,7 @@
       ],
       "format": "esm"
     },
-    "../../../../../../../tmp/tmp-2772-2s8rzpDYVCAU/191b73188d32/tldraw.css": {
+    "../../../../../../../tmp/tmp-2799-ZYtx9hL3ahhi/191d74314533/tldraw.css": {
       "bytes": 80111,
       "imports": [
         {
@@ -11342,7 +11326,7 @@
         }
       ]
     },
-    "../../../../../../../tmp/tmp-2772-2s8rzpDYVCAU/191b73188510/index.css": {
+    "../../../../../../../tmp/tmp-2799-ZYtx9hL3ahhi/191d74314391/index.css": {
       "bytes": 597,
       "imports": [
         {
@@ -11351,7 +11335,7 @@
           "external": true
         },
         {
-          "path": "../../../../../../../tmp/tmp-2772-2s8rzpDYVCAU/191b73188d32/tldraw.css",
+          "path": "../../../../../../../tmp/tmp-2799-ZYtx9hL3ahhi/191d74314533/tldraw.css",
           "kind": "import-rule",
           "original": "@tldraw/tldraw/tldraw.css"
         }
@@ -11426,7 +11410,7 @@
           "original": "../../common/constants"
         },
         {
-          "path": "../../../../../../../tmp/tmp-2772-2s8rzpDYVCAU/191b73188510/index.css",
+          "path": "../../../../../../../tmp/tmp-2799-ZYtx9hL3ahhi/191d74314391/index.css",
           "kind": "import-statement",
           "original": "@100mslive/hms-whiteboard/index.css"
         },
@@ -13034,7 +13018,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/EndCallFeedback/FeedbackForm.tsx": {
-      "bytes": 10793,
+      "bytes": 11240,
       "imports": [
         {
           "path": "react",
@@ -13130,7 +13114,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/EndCallFeedback/ThankyouView.tsx": {
-      "bytes": 1230,
+      "bytes": 1229,
       "imports": [
         {
           "path": "react",
@@ -13171,7 +13155,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/EndCallFeedback/Feedback.tsx": {
-      "bytes": 1775,
+      "bytes": 1839,
       "imports": [
         {
           "path": "react",
@@ -15414,7 +15398,7 @@
     "dist/index.js": {
       "imports": [
         {
-          "path": "dist/chunk-3FZB2LJY.js",
+          "path": "dist/chunk-DIIFM6TW.js",
           "kind": "import-statement"
         }
       ],
@@ -15490,16 +15474,16 @@
       "inputs": {},
       "bytes": 1882
     },
-    "dist/HLSView-EYFJ7YDU.js.map": {
+    "dist/HLSView-GYB2QDIN.js.map": {
       "imports": [],
       "exports": [],
       "inputs": {},
       "bytes": 100275
     },
-    "dist/HLSView-EYFJ7YDU.js": {
+    "dist/HLSView-GYB2QDIN.js": {
       "imports": [
         {
-          "path": "dist/chunk-3FZB2LJY.js",
+          "path": "dist/chunk-DIIFM6TW.js",
           "kind": "import-statement"
         },
         {
@@ -15677,7 +15661,7 @@
         "default"
       ],
       "entryPoint": "src/Prebuilt/layouts/HLSView.jsx",
-      "cssBundle": "dist/HLSView-5SR3RWXG.css",
+      "cssBundle": "dist/HLSView-LNJLFWK4.css",
       "inputs": {
         "src/Prebuilt/layouts/HLSView.jsx": {
           "bytesInOutput": 27671
@@ -15736,13 +15720,13 @@
       },
       "bytes": 61702
     },
-    "dist/chunk-3FZB2LJY.js.map": {
+    "dist/chunk-DIIFM6TW.js.map": {
       "imports": [],
       "exports": [],
       "inputs": {},
-      "bytes": 3518349
+      "bytes": 3520614
     },
-    "dist/chunk-3FZB2LJY.js": {
+    "dist/chunk-DIIFM6TW.js": {
       "imports": [
         {
           "path": "react",
@@ -16199,6 +16183,11 @@
           "kind": "import-statement",
           "external": true
         },
+        {
+          "path": "@100mslive/react-sdk",
+          "kind": "import-statement",
+          "external": true
+        },
         {
           "path": "@100mslive/hms-virtual-background/hmseffectsplugin",
           "kind": "dynamic-import",
@@ -17924,11 +17913,6 @@
           "kind": "import-statement",
           "external": true
         },
-        {
-          "path": "@100mslive/react-sdk",
-          "kind": "import-statement",
-          "external": true
-        },
         {
           "path": "react",
           "kind": "import-statement",
@@ -18285,7 +18269,7 @@
           "external": true
         },
         {
-          "path": "dist/HLSView-EYFJ7YDU.js",
+          "path": "dist/HLSView-GYB2QDIN.js",
           "kind": "dynamic-import"
         },
         {
@@ -18904,7 +18888,7 @@
       ],
       "inputs": {
         "<define:process.env>": {
-          "bytesInOutput": 18008
+          "bytesInOutput": 17932
         },
         "../../node_modules/lodash/lodash.js": {
           "bytesInOutput": 224301
@@ -18931,7 +18915,7 @@
           "bytesInOutput": 615
         },
         "../../node_modules/prop-types/node_modules/react-is/cjs/react-is.production.min.js": {
-          "bytesInOutput": 3852
+          "bytesInOutput": 3855
         },
         "../../node_modules/prop-types/node_modules/react-is/cjs/react-is.development.js": {
           "bytesInOutput": 7632
@@ -19237,10 +19221,10 @@
           "bytesInOutput": 577
         },
         "src/Prebuilt/AppStateContext.tsx": {
-          "bytesInOutput": 2781
+          "bytesInOutput": 2958
         },
         "src/Prebuilt/components/VirtualBackground/VBHandler.tsx": {
-          "bytesInOutput": 3794
+          "bytesInOutput": 4246
         },
         "src/Prebuilt/components/hooks/useRedirectToLeave.tsx": {
           "bytesInOutput": 489
@@ -19330,7 +19314,7 @@
           "bytesInOutput": 645
         },
         "src/Prebuilt/components/Leave/LeaveSessionContent.tsx": {
-          "bytesInOutput": 1790
+          "bytesInOutput": 1783
         },
         "src/Prebuilt/components/Leave/MwebLeaveRoom.tsx": {
           "bytesInOutput": 4835
@@ -19351,7 +19335,7 @@
           "bytesInOutput": 2509
         },
         "src/Prebuilt/components/PIP/PIPChat.tsx": {
-          "bytesInOutput": 10026
+          "bytesInOutput": 10156
         },
         "src/TextArea/index.tsx": {
           "bytesInOutput": 27
@@ -19447,7 +19431,7 @@
           "bytesInOutput": 9861
         },
         "../hms-video-store/dist/index.js": {
-          "bytesInOutput": 52067
+          "bytesInOutput": 52063
         },
         "../../node_modules/reselect/es/index.js": {
           "bytesInOutput": 2539
@@ -19723,10 +19707,7 @@
           "bytesInOutput": 1050
         },
         "src/Prebuilt/components/VirtualBackground/VBPicker.tsx": {
-          "bytesInOutput": 8570
-        },
-        "src/Prebuilt/components/VirtualBackground/util.tsx": {
-          "bytesInOutput": 449
+          "bytesInOutput": 8754
         },
         "src/Prebuilt/components/VirtualBackground/VBCollection.tsx": {
           "bytesInOutput": 1252
@@ -19800,7 +19781,7 @@
         "src/Prebuilt/components/VideoLayouts/WhiteboardLayout.tsx": {
           "bytesInOutput": 2830
         },
-        "../../../../../../../tmp/tmp-2772-2s8rzpDYVCAU/191b73188510/index.css": {
+        "../../../../../../../tmp/tmp-2799-ZYtx9hL3ahhi/191d74314391/index.css": {
           "bytesInOutput": 0
         },
         "src/Prebuilt/common/PeersSorter.ts": {
@@ -19849,13 +19830,13 @@
           "bytesInOutput": 2245
         },
         "src/Prebuilt/components/EndCallFeedback/Feedback.tsx": {
-          "bytesInOutput": 1602
+          "bytesInOutput": 1664
         },
         "src/Prebuilt/components/EndCallFeedback/FeedbackForm.tsx": {
-          "bytesInOutput": 10143
+          "bytesInOutput": 10583
         },
         "src/Prebuilt/components/EndCallFeedback/ThankyouView.tsx": {
-          "bytesInOutput": 1290
+          "bytesInOutput": 1289
         },
         "src/Prebuilt/components/MwebLandscapePrompt.tsx": {
           "bytesInOutput": 2928
@@ -19969,7 +19950,7 @@
           "bytesInOutput": 2628
         }
       },
-      "bytes": 1459163
+      "bytes": 1460019
     },
     "dist/index.css.map": {
       "imports": [],
@@ -20031,22 +20012,22 @@
         }
       ],
       "inputs": {
-        "../../../../../../../tmp/tmp-2772-2s8rzpDYVCAU/191b73188d32/tldraw.css": {
+        "../../../../../../../tmp/tmp-2799-ZYtx9hL3ahhi/191d74314533/tldraw.css": {
           "bytesInOutput": 75223
         },
-        "../../../../../../../tmp/tmp-2772-2s8rzpDYVCAU/191b73188510/index.css": {
+        "../../../../../../../tmp/tmp-2799-ZYtx9hL3ahhi/191d74314391/index.css": {
           "bytesInOutput": 401
         }
       },
       "bytes": 75901
     },
-    "dist/HLSView-5SR3RWXG.css.map": {
+    "dist/HLSView-LNJLFWK4.css.map": {
       "imports": [],
       "exports": [],
       "inputs": {},
       "bytes": 122402
     },
-    "dist/HLSView-5SR3RWXG.css": {
+    "dist/HLSView-LNJLFWK4.css": {
       "imports": [
         {
           "path": "https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap",
@@ -20100,10 +20081,10 @@
         }
       ],
       "inputs": {
-        "../../../../../../../tmp/tmp-2772-2s8rzpDYVCAU/191b73188d32/tldraw.css": {
+        "../../../../../../../tmp/tmp-2799-ZYtx9hL3ahhi/191d74314533/tldraw.css": {
           "bytesInOutput": 75223
         },
-        "../../../../../../../tmp/tmp-2772-2s8rzpDYVCAU/191b73188510/index.css": {
+        "../../../../../../../tmp/tmp-2799-ZYtx9hL3ahhi/191d74314391/index.css": {
           "bytesInOutput": 401
         }
       },

package/package.json

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

package/src/Prebuilt/AppStateContext.tsx

@@ -68,12 +68,15 @@ export const useAppStateManager = () => {
         [HMSRoomState.Disconnected, HMSRoomState.Connecting],
         [HMSRoomState.Disconnected, HMSRoomState.Reconnecting],
         () => {
-          setActiveState(
-            match({ isLeaveScreenEnabled, isPreviewScreenEnabled })
-              .with({ isLeaveScreenEnabled: true }, () => PrebuiltStates.LEAVE)
+          setActiveState(prevState => {
+            return match({ isLeaveScreenEnabled, isPreviewScreenEnabled, prevState })
+              .when(
+                ({ isLeaveScreenEnabled, prevState }) => isLeaveScreenEnabled && prevState !== PrebuiltStates.LEAVE,
+                () => PrebuiltStates.LEAVE,
+              )
               .with({ isPreviewScreenEnabled: true }, () => PrebuiltStates.PREVIEW)
-              .otherwise(() => PrebuiltStates.MEETING),
-          );
+              .otherwise(() => PrebuiltStates.MEETING);
+          });
           VBHandler.reset();
           redirectToLeave(1000); // to clear toasts after 1 second
         },

package/src/Prebuilt/components/EndCallFeedback/Feedback.tsx

@@ -42,13 +42,13 @@ export const Feedback = () => {
       justify="center"
       css={{
         pt: '$16',
-        w: '528px',
+        w: isMobile ? '100%' : '528px',
       }}
     >
       {index === FEEBACK_INDEX.INIT ? (
         <Flex
           css={{
-            p: '$12',
+            p: isMobile ? '$10' : '$12',
             border: '1px solid $border_default',
             bg: '$surface_dim',
             borderRadius: !isMobile ? '$3' : '$3 $3 0 0',
@@ -56,6 +56,7 @@ export const Feedback = () => {
             '@md': {
               position: 'absolute',
               bottom: '0',
+              w: '100%',
             },
           }}
           direction="column"

package/src/Prebuilt/components/EndCallFeedback/FeedbackForm.tsx

@@ -39,7 +39,7 @@ export const FeedbackModal = ({
     return (
       <Sheet.Root open={index !== FEEBACK_INDEX.INIT} onOpenChange={onOpenChange}>
         <Sheet.Content
-          css={{ bg: '$surface_dim', p: '$12' }}
+          css={{ bg: '$surface_dim', p: '$10', overflowY: 'auto' }}
           onPointerDownOutside={avoidDefaultDomBehavior}
           onInteractOutside={avoidDefaultDomBehavior}
         >
@@ -75,6 +75,7 @@ export const FeedbackContent = ({
 }) => {
   const { feedback } = useRoomLayoutLeaveScreen();
   const { endpoints } = useHMSPrebuiltContext();
+  const isMobile = useMedia(cssConfig.media.md);
   const hmsActions = useHMSActions();
   const [comment, setComment] = useState('');
   const [selectedReasons, setSelectedReasons] = useState(new Set<number>());
@@ -95,7 +96,7 @@ export const FeedbackContent = ({
       const reasons = [...selectedReasons].map((value: number) => ratings[indexSelected]?.reasons?.[value] || '');
       await hmsActions.submitSessionFeedback(
         {
-          question: ratings[indexSelected].question,
+          question: `${feedback?.title} | ${ratings[indexSelected].question || ''}`,
           rating: ratings[indexSelected].value || 1,
           min_rating: 1,
           max_rating: ratings.length,
@@ -139,7 +140,7 @@ export const FeedbackContent = ({
         type="submit"
         icon
         css={{
-          alignSelf: 'end',
+          alignSelf: isMobile ? '' : 'end',
         }}
         onClick={submitFeedback}
       >
@@ -157,6 +158,7 @@ export const FeedbackHeader = ({
   ratings: Rating[];
   indexSelected?: number;
 }) => {
+  const isMobile = useMedia(cssConfig.media.md);
   const { feedback } = useRoomLayoutLeaveScreen();
   return (
     <>
@@ -168,7 +170,7 @@ export const FeedbackHeader = ({
           }}
         >
           <Text
-            variant="h5"
+            variant={isMobile ? 'h6' : 'h5'}
             css={{
               c: '$on_surface_high',
               fontStyle: 'normal',
@@ -177,7 +179,7 @@ export const FeedbackHeader = ({
             {feedback?.title || 'How was your experience?'}
           </Text>
           <Text
-            variant="body1"
+            variant={isMobile ? 'body2' : 'body1'}
             css={{
               c: '$on_surface_medium',
               opacity: 0.9,
@@ -192,9 +194,13 @@ export const FeedbackHeader = ({
         ) : null}
       </Flex>
       <Flex
+        justify="between"
         css={{
           gap: '$17',
           c: '$on_surface_high',
+          '@md': {
+            gap: '0',
+          },
         }}
       >
         {ratings.map((element, index) => {
@@ -219,12 +225,15 @@ export const FeedbackHeader = ({
                   pb: '$1',
                   cursor: 'pointer',
                   opacity: indexSelected === index || indexSelected === FEEBACK_INDEX.INIT ? 1 : 0.2,
+                  '@md': {
+                    fontSize: '$h5',
+                  },
                 }}
               >
                 {element.emoji}
               </Text>
               <Text
-                variant="body1"
+                variant={isMobile ? 'body2' : 'body1'}
                 css={{
                   c:
                     indexSelected === index || indexSelected === FEEBACK_INDEX.INIT
@@ -319,6 +328,7 @@ export const FeedbackForm = ({
                     </Checkbox.Indicator>
                   </Checkbox.Root>
                   <Label
+                    htmlFor={`${option}-${index}`}
                     css={{
                       color: '$on_surface_high',
                       fontSize: '$sm',

package/src/Prebuilt/components/EndCallFeedback/ThankyouView.tsx

@@ -27,7 +27,7 @@ export const ThankyouView = () => {
     >
       <UserMusicIcon width="64px" height="64px" />
       <Flex direction="column" align={isMobile ? 'center' : 'start'}>
-        <Text variant="h5">Thank you for your feedback!</Text>
+        <Text variant="h5">Thank you for your feedback</Text>
         <Text
           variant="body1"
           css={{

package/src/Prebuilt/components/InsetTile.tsx

@@ -100,7 +100,7 @@ export const InsetTile = ({ peerId }: { peerId?: string }) => {
           position: 'absolute',
           bottom: 0,
           right: 0,
-          zIndex: 11,
+          zIndex: 10,
           boxShadow: '0 0 8px 0 rgba(0,0,0,0.3)',
           r: '$2',
           ...(!minimised

package/src/Prebuilt/components/Leave/LeaveSessionContent.tsx

@@ -47,7 +47,9 @@ export const LeaveSessionContent = ({
         <Button
           variant="danger"
           css={{ w: '100%' }}
-          onClick={async () => await leaveRoom()}
+          onClick={async () => {
+            await leaveRoom();
+          }}
           id="leaveRoom"
           data-testid="leave_room"
         >

package/src/Prebuilt/components/PIP/PIPChat.tsx

@@ -50,7 +50,10 @@ export const PIPChat = () => {
   const isLocalPeerBlacklisted = useIsPeerBlacklisted({ local: true });
   const { elements } = useRoomLayoutConferencingScreen();
   const message_placeholder = elements?.chat?.message_placeholder || 'Send a message';
-  const canSendChatMessages = !!elements?.chat?.public_chat_enabled || !!elements?.chat?.roles_whitelist?.length;
+  const canSendChatMessages =
+    !!elements?.chat?.public_chat_enabled ||
+    !!elements?.chat?.roles_whitelist?.length ||
+    !!elements?.chat?.private_chat_enabled;
 
   const getChatStatus = useCallback(() => {
     if (isLocalPeerBlacklisted) return "You've been blocked from sending messages";
@@ -114,9 +117,13 @@ export const PIPChat = () => {
             <Text variant="h5" css={{ mt: '$8', c: '$on_surface_high' }}>
               {canSendChatMessages ? 'Start a conversation' : 'No messages yet'}
             </Text>
-            <Text variant="sm" style={{ maxWidth: '80%', textAlign: 'center', marginTop: '4px' }}>
-              There are no messages here yet. Start a conversation by sending a message.
-            </Text>
+            {canSendChatMessages ? (
+              <Text variant="sm" style={{ maxWidth: '80%', textAlign: 'center', marginTop: '4px' }}>
+                There are no messages here yet. Start a conversation by sending a message.
+              </Text>
+            ) : (
+              ''
+            )}
           </div>
         ) : (
           filteredMessages.map(message => (

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

@@ -1,7 +1,8 @@
 // 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?: any;
@@ -13,8 +14,8 @@ export class VBPlugin {
     if (effectsSDKKey) {
       try {
         // eslint-disable-next-line
-        const { HMSEffectsPlugin } = await import('@100mslive/hms-virtual-background/hmseffectsplugin');
-        this.effectsPlugin = new HMSEffectsPlugin(effectsSDKKey, onInit);
+        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);
@@ -101,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();