@100mslive/roomkit-react 0.3.17-alpha.10 → 0.3.17-alpha.11

package/dist/meta.esbuild.json

@@ -5616,7 +5616,7 @@
       "format": "cjs"
     },
     "../hms-video-store/dist/index.js": {
-      "bytes": 361757,
+      "bytes": 362197,
       "imports": [
         {
           "path": "../../node_modules/reselect/es/index.js",
@@ -6633,7 +6633,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/VirtualBackground/VBToggle.tsx": {
-      "bytes": 1253,
+      "bytes": 1353,
       "imports": [
         {
           "path": "react",
@@ -9888,7 +9888,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/VirtualBackground/VBHandler.tsx": {
-      "bytes": 2732,
+      "bytes": 2719,
       "imports": [
         {
           "path": "@100mslive/hms-virtual-background",
@@ -9909,7 +9909,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/VirtualBackground/VBPicker.tsx": {
-      "bytes": 7931,
+      "bytes": 7990,
       "imports": [
         {
           "path": "react",
@@ -10239,7 +10239,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/Preview/PreviewJoin.tsx": {
-      "bytes": 10002,
+      "bytes": 10106,
       "imports": [
         {
           "path": "react",
@@ -11231,7 +11231,7 @@
       ],
       "format": "esm"
     },
-    "../../../../../../../tmp/tmp-2833-M4d9noIFuBRI/191217092dd2/tldraw.css": {
+    "../../../../../../../tmp/tmp-2805-53IzBWEMg269/19122804f952/tldraw.css": {
       "bytes": 80111,
       "imports": [
         {
@@ -11281,7 +11281,7 @@
         }
       ]
     },
-    "../../../../../../../tmp/tmp-2833-M4d9noIFuBRI/191217092780/index.css": {
+    "../../../../../../../tmp/tmp-2805-53IzBWEMg269/19122804f1c0/index.css": {
       "bytes": 597,
       "imports": [
         {
@@ -11290,7 +11290,7 @@
           "external": true
         },
         {
-          "path": "../../../../../../../tmp/tmp-2833-M4d9noIFuBRI/191217092dd2/tldraw.css",
+          "path": "../../../../../../../tmp/tmp-2805-53IzBWEMg269/19122804f952/tldraw.css",
           "kind": "import-rule",
           "original": "@tldraw/tldraw/tldraw.css"
         }
@@ -11365,7 +11365,7 @@
           "original": "../../common/constants"
         },
         {
-          "path": "../../../../../../../tmp/tmp-2833-M4d9noIFuBRI/191217092780/index.css",
+          "path": "../../../../../../../tmp/tmp-2805-53IzBWEMg269/19122804f1c0/index.css",
           "kind": "import-statement",
           "original": "@100mslive/hms-whiteboard/index.css"
         },
@@ -13259,7 +13259,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/Toast/ToastConfig.jsx": {
-      "bytes": 5213,
+      "bytes": 5242,
       "imports": [
         {
           "path": "react",
@@ -13508,7 +13508,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/Notifications/ReconnectNotifications.tsx": {
-      "bytes": 2240,
+      "bytes": 1248,
       "imports": [
         {
           "path": "react",
@@ -13520,11 +13520,6 @@
           "kind": "import-statement",
           "external": true
         },
-        {
-          "path": "src/index.ts",
-          "kind": "import-statement",
-          "original": "../../.."
-        },
         {
           "path": "src/Prebuilt/components/Toast/ToastConfig.jsx",
           "kind": "import-statement",
@@ -15252,7 +15247,7 @@
     "dist/index.js": {
       "imports": [
         {
-          "path": "dist/chunk-GCTIXYTC.js",
+          "path": "dist/chunk-Y4ZC5NAS.js",
           "kind": "import-statement"
         }
       ],
@@ -15328,16 +15323,16 @@
       "inputs": {},
       "bytes": 1882
     },
-    "dist/HLSView-NMG7P72A.js.map": {
+    "dist/HLSView-42EL65Z3.js.map": {
       "imports": [],
       "exports": [],
       "inputs": {},
       "bytes": 100275
     },
-    "dist/HLSView-NMG7P72A.js": {
+    "dist/HLSView-42EL65Z3.js": {
       "imports": [
         {
-          "path": "dist/chunk-GCTIXYTC.js",
+          "path": "dist/chunk-Y4ZC5NAS.js",
           "kind": "import-statement"
         },
         {
@@ -15515,7 +15510,7 @@
         "default"
       ],
       "entryPoint": "src/Prebuilt/layouts/HLSView.jsx",
-      "cssBundle": "dist/HLSView-2TQQHGUX.css",
+      "cssBundle": "dist/HLSView-7NVZOZKG.css",
       "inputs": {
         "src/Prebuilt/layouts/HLSView.jsx": {
           "bytesInOutput": 27671
@@ -15574,13 +15569,13 @@
       },
       "bytes": 61702
     },
-    "dist/chunk-GCTIXYTC.js.map": {
+    "dist/chunk-Y4ZC5NAS.js.map": {
       "imports": [],
       "exports": [],
       "inputs": {},
-      "bytes": 3487531
+      "bytes": 3487199
     },
-    "dist/chunk-GCTIXYTC.js": {
+    "dist/chunk-Y4ZC5NAS.js": {
       "imports": [
         {
           "path": "react",
@@ -18108,7 +18103,7 @@
           "external": true
         },
         {
-          "path": "dist/HLSView-NMG7P72A.js",
+          "path": "dist/HLSView-42EL65Z3.js",
           "kind": "dynamic-import"
         },
         {
@@ -18707,7 +18702,7 @@
       ],
       "inputs": {
         "<define:process.env>": {
-          "bytesInOutput": 17991
+          "bytesInOutput": 17968
         },
         "../../node_modules/lodash/lodash.js": {
           "bytesInOutput": 224289
@@ -19241,7 +19236,7 @@
           "bytesInOutput": 9486
         },
         "../hms-video-store/dist/index.js": {
-          "bytesInOutput": 50264
+          "bytesInOutput": 50318
         },
         "../../node_modules/reselect/es/index.js": {
           "bytesInOutput": 2539
@@ -19331,7 +19326,7 @@
           "bytesInOutput": 823
         },
         "src/Prebuilt/components/VirtualBackground/VBToggle.tsx": {
-          "bytesInOutput": 1179
+          "bytesInOutput": 1280
         },
         "src/Prebuilt/components/Footer/ChatToggle.tsx": {
           "bytesInOutput": 1564
@@ -19376,7 +19371,7 @@
           "bytesInOutput": 3077
         },
         "src/Prebuilt/components/Preview/PreviewJoin.tsx": {
-          "bytesInOutput": 9964
+          "bytesInOutput": 10093
         },
         "src/Prebuilt/layouts/SidePane.tsx": {
           "bytesInOutput": 6436
@@ -19523,7 +19518,7 @@
           "bytesInOutput": 1050
         },
         "src/Prebuilt/components/VirtualBackground/VBPicker.tsx": {
-          "bytesInOutput": 7862
+          "bytesInOutput": 7926
         },
         "src/Prebuilt/components/VirtualBackground/VBCollection.tsx": {
           "bytesInOutput": 1157
@@ -19600,7 +19595,7 @@
         "src/Prebuilt/components/VideoLayouts/WhiteboardLayout.tsx": {
           "bytesInOutput": 2830
         },
-        "../../../../../../../tmp/tmp-2833-M4d9noIFuBRI/191217092780/index.css": {
+        "../../../../../../../tmp/tmp-2805-53IzBWEMg269/19122804f1c0/index.css": {
           "bytesInOutput": 0
         },
         "src/Prebuilt/common/PeersSorter.ts": {
@@ -19676,7 +19671,7 @@
           "bytesInOutput": 1983
         },
         "src/Prebuilt/components/Toast/ToastConfig.jsx": {
-          "bytesInOutput": 6412
+          "bytesInOutput": 6443
         },
         "src/Prebuilt/components/Notifications/InitErrorModal.tsx": {
           "bytesInOutput": 1596
@@ -19694,7 +19689,7 @@
           "bytesInOutput": 11963
         },
         "src/Prebuilt/components/Notifications/ReconnectNotifications.tsx": {
-          "bytesInOutput": 2284
+          "bytesInOutput": 1243
         },
         "src/Prebuilt/components/Notifications/TrackBulkUnmuteModal.tsx": {
           "bytesInOutput": 1867
@@ -19766,7 +19761,7 @@
           "bytesInOutput": 2632
         }
       },
-      "bytes": 1446300
+      "bytes": 1445615
     },
     "dist/index.css.map": {
       "imports": [],
@@ -19828,22 +19823,22 @@
         }
       ],
       "inputs": {
-        "../../../../../../../tmp/tmp-2833-M4d9noIFuBRI/191217092dd2/tldraw.css": {
+        "../../../../../../../tmp/tmp-2805-53IzBWEMg269/19122804f952/tldraw.css": {
           "bytesInOutput": 75223
         },
-        "../../../../../../../tmp/tmp-2833-M4d9noIFuBRI/191217092780/index.css": {
+        "../../../../../../../tmp/tmp-2805-53IzBWEMg269/19122804f1c0/index.css": {
           "bytesInOutput": 401
         }
       },
       "bytes": 75901
     },
-    "dist/HLSView-2TQQHGUX.css.map": {
+    "dist/HLSView-7NVZOZKG.css.map": {
       "imports": [],
       "exports": [],
       "inputs": {},
       "bytes": 122402
     },
-    "dist/HLSView-2TQQHGUX.css": {
+    "dist/HLSView-7NVZOZKG.css": {
       "imports": [
         {
           "path": "https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap",
@@ -19897,10 +19892,10 @@
         }
       ],
       "inputs": {
-        "../../../../../../../tmp/tmp-2833-M4d9noIFuBRI/191217092dd2/tldraw.css": {
+        "../../../../../../../tmp/tmp-2805-53IzBWEMg269/19122804f952/tldraw.css": {
           "bytesInOutput": 75223
         },
-        "../../../../../../../tmp/tmp-2833-M4d9noIFuBRI/191217092780/index.css": {
+        "../../../../../../../tmp/tmp-2805-53IzBWEMg269/19122804f1c0/index.css": {
           "bytesInOutput": 401
         }
       },

package/package.json

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

package/src/Prebuilt/components/Notifications/ReconnectNotifications.tsx

@@ -1,6 +1,5 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useRef } from 'react';
 import { HMSNotificationTypes, useHMSNotifications } from '@100mslive/react-sdk';
-import { Dialog, Flex, Loading, Text } from '../../..';
 // @ts-ignore: No implicit Any
 import { ToastConfig } from '../Toast/ToastConfig';
 // @ts-ignore: No implicit Any
@@ -15,50 +14,24 @@ let notificationId: string | null = null;
 
 export const ReconnectNotifications = () => {
   const notification = useHMSNotifications(notificationTypes);
-  const [open, setOpen] = useState(false);
+  const prevErrorCode = useRef(0);
   useEffect(() => {
     if (!notification) {
       return;
     }
-    if (notification.type === HMSNotificationTypes.ERROR && notification.data?.isTerminal) {
-      setOpen(false);
-    } else if (notification.type === HMSNotificationTypes.RECONNECTED) {
-      notificationId = ToastManager.replaceToast(notificationId, ToastConfig.RECONNECTED.single());
-      setOpen(false);
+    if (notification.type === HMSNotificationTypes.RECONNECTED) {
+      notificationId = ToastManager.replaceToast(
+        notificationId,
+        ToastConfig.RECONNECTED.single([4005, 4006].includes(prevErrorCode.current)),
+      );
     } else if (notification.type === HMSNotificationTypes.RECONNECTING) {
+      prevErrorCode.current = notification.data?.code || 0;
       notificationId = ToastManager.replaceToast(
         notificationId,
         ToastConfig.RECONNECTING.single(notification.data?.message),
       );
     }
   }, [notification]);
-  if (!open) return null;
-  return (
-    <Dialog.Root open={open} modal={true}>
-      <Dialog.Portal container={document.getElementById('conferencing')}>
-        <Dialog.Overlay />
-        <Dialog.Content
-          css={{
-            width: 'fit-content',
-            maxWidth: '80%',
-            p: '$4 $8',
-            position: 'relative',
-            top: 'unset',
-            bottom: '$9',
-            transform: 'translate(-50%, -100%)',
-            animation: 'none !important',
-          }}
-        >
-          <Flex align="center">
-            <div style={{ display: 'inline', margin: '0.25rem' }}>
-              <Loading size={16} />
-            </div>
-            <Text css={{ fontSize: '$space$8', color: '$on_surface_high' }}>
-              You lost your network connection. Trying to reconnect.
-            </Text>
-          </Flex>
-        </Dialog.Content>
-      </Dialog.Portal>
-    </Dialog.Root>
-  );
+
+  return null;
 };

package/src/Prebuilt/components/Preview/PreviewJoin.tsx

@@ -4,6 +4,7 @@ import {
   HMSRoomState,
   selectAppData,
   selectIsLocalVideoEnabled,
+  selectIsVBEnabled,
   selectLocalPeer,
   selectRoomState,
   selectVideoTrackByID,
@@ -253,6 +254,7 @@ export const PreviewTile = ({ name, error }: { name: string; error?: boolean })
 
 export const PreviewControls = ({ hideSettings, vbEnabled }: { hideSettings: boolean; vbEnabled: boolean }) => {
   const isMobile = useMedia(cssConfig.media.md);
+  const isVBEnabledForUser = useHMSStore(selectIsVBEnabled);
   return (
     <Flex
       justify={hideSettings && isMobile ? 'center' : 'between'}
@@ -263,7 +265,7 @@ export const PreviewControls = ({ hideSettings, vbEnabled }: { hideSettings: boo
     >
       <Flex css={{ gap: '$4' }}>
         <AudioVideoToggle />
-        {vbEnabled ? <VBToggle /> : null}
+        {vbEnabled && isVBEnabledForUser ? <VBToggle /> : null}
       </Flex>
       <Flex align="center" gap="1">
         {isMobile && <NoiseCancellation iconOnly />}

package/src/Prebuilt/components/Toast/ToastConfig.jsx

@@ -153,9 +153,9 @@ export const ToastConfig = {
     },
   },
   RECONNECTED: {
-    single: () => {
+    single: online => {
       return {
-        title: `You are now connected`,
+        title: `You are now ${online ? 'online' : 'connected'}`,
         icon: <ConnectivityIcon />,
         variant: 'success',
         duration: 3000,

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

@@ -1,8 +1,7 @@
 import { HMSEffectsPlugin, HMSVBPlugin, HMSVirtualBackgroundTypes } from '@100mslive/hms-virtual-background';
-
 export class VBPlugin {
   private hmsPlugin?: HMSVBPlugin;
-  private effectsPlugin?: HMSEffectsPlugin | undefined;
+  private effectsPlugin?: HMSEffectsPlugin;
 
   initialisePlugin = (effectsSDKKey?: string, onInit?: () => void) => {
     if (this.getVBObject()) {

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

@@ -61,7 +61,8 @@ export const VBPicker = ({ backgroundMedia = [] }: { backgroundMedia: VirtualBac
     if (!track?.id) {
       return;
     }
-    if (!isPluginAdded) {
+    const vbObject = VBHandler.getVBObject();
+    if (!isPluginAdded && !vbObject) {
       setLoadingEffects(true);
       let vbObject = VBHandler.getVBObject();
       if (!vbObject) {

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

@@ -1,5 +1,11 @@
 import React from 'react';
-import { selectAppData, selectIsEffectsEnabled, selectIsLocalVideoEnabled, useHMSStore } from '@100mslive/react-sdk';
+import {
+  selectAppData,
+  selectIsEffectsEnabled,
+  selectIsLocalVideoEnabled,
+  selectIsVBEnabled,
+  useHMSStore,
+} from '@100mslive/react-sdk';
 import { VirtualBackgroundIcon } from '@100mslive/react-icons';
 import { Loading } from '../../../Loading';
 import { Tooltip } from '../../../Tooltip';
@@ -12,10 +18,11 @@ export const VBToggle = () => {
   const toggleVB = useSidepaneToggle(SIDE_PANE_OPTIONS.VB);
   const isVBOpen = useIsSidepaneTypeOpen(SIDE_PANE_OPTIONS.VB);
   const isVideoOn = useHMSStore(selectIsLocalVideoEnabled);
+  const isVBEnabled = useHMSStore(selectIsVBEnabled);
   const isEffectsEnabled = useHMSStore(selectIsEffectsEnabled);
   const loadingEffects = useHMSStore(selectAppData(APP_DATA.loadingEffects));
 
-  if (!isVideoOn || (!isEffectsEnabled && isSafari)) {
+  if (!isVideoOn || (!isEffectsEnabled && isSafari) || !isVBEnabled) {
     return null;
   }