@100mslive/roomkit-react 0.1.19-alpha.2 → 0.1.19

package/dist/index.js

@@ -61,7 +61,7 @@ import {
   theme,
   useBorderAudioLevel,
   useTheme
-} from "./chunk-H3B4ARYV.js";
+} from "./chunk-NHPPOGUF.js";
 export {
   Accordion,
   AudioLevel,

package/dist/meta.cjs.json

@@ -4434,7 +4434,7 @@
       "format": "cjs"
     },
     "../hms-video-web/dist/index.js": {
-      "bytes": 263156,
+      "bytes": 263148,
       "imports": [
         {
           "path": "uuid",
@@ -4969,7 +4969,7 @@
       "format": "esm"
     },
     "../hms-video-store/dist/index.js": {
-      "bytes": 68804,
+      "bytes": 68788,
       "imports": [
         {
           "path": "../../node_modules/reselect/es/index.js",
@@ -7957,7 +7957,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/Chat/Chat.tsx": {
-      "bytes": 3561,
+      "bytes": 3558,
       "imports": [
         {
           "path": "react",
@@ -8043,7 +8043,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/Footer/PaginatedParticipants.tsx": {
-      "bytes": 4431,
+      "bytes": 4446,
       "imports": [
         {
           "path": "react",
@@ -8648,7 +8648,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/VirtualBackground/VBHandler.tsx": {
-      "bytes": 2086,
+      "bytes": 2178,
       "imports": [
         {
           "path": "@100mslive/hms-virtual-background",
@@ -8680,7 +8680,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/VirtualBackground/VBPicker.tsx": {
-      "bytes": 5515,
+      "bytes": 5568,
       "imports": [
         {
           "path": "react",
@@ -11088,7 +11088,7 @@
       "format": "esm"
     },
     "src/Prebuilt/AppStateContext.tsx": {
-      "bytes": 2560,
+      "bytes": 2655,
       "imports": [
         {
           "path": "react",
@@ -11105,6 +11105,11 @@
           "kind": "import-statement",
           "external": true
         },
+        {
+          "path": "src/Prebuilt/components/VirtualBackground/VBHandler.tsx",
+          "kind": "import-statement",
+          "original": "./components/VirtualBackground/VBHandler"
+        },
         {
           "path": "src/Prebuilt/provider/roomLayoutProvider/index.tsx",
           "kind": "import-statement",
@@ -12463,7 +12468,7 @@
       "imports": [],
       "exports": [],
       "inputs": {},
-      "bytes": 3096905
+      "bytes": 3097254
     },
     "dist/index.cjs.js": {
       "imports": [
@@ -15112,7 +15117,7 @@
       "entryPoint": "src/index.ts",
       "inputs": {
         "<define:process.env>": {
-          "bytesInOutput": 18620
+          "bytesInOutput": 18549
         },
         "src/Theme/base.config.ts": {
           "bytesInOutput": 6104
@@ -15583,7 +15588,7 @@
           "bytesInOutput": 615
         },
         "../hms-video-web/dist/index.js": {
-          "bytesInOutput": 35324
+          "bytesInOutput": 35316
         },
         "src/Prebuilt/common/utils.js": {
           "bytesInOutput": 4395
@@ -15619,7 +15624,7 @@
           "bytesInOutput": 2639
         },
         "../hms-video-store/dist/index.js": {
-          "bytesInOutput": 22065
+          "bytesInOutput": 22049
         },
         "src/Prebuilt/components/hooks/useUnreadPollQuizPresent.tsx": {
           "bytesInOutput": 1005
@@ -15811,10 +15816,10 @@
           "bytesInOutput": 6156
         },
         "src/Prebuilt/components/Chat/Chat.tsx": {
-          "bytesInOutput": 4363
+          "bytesInOutput": 4375
         },
         "src/Prebuilt/components/Footer/PaginatedParticipants.tsx": {
-          "bytesInOutput": 5304
+          "bytesInOutput": 5344
         },
         "src/Prebuilt/components/ChatSettings.tsx": {
           "bytesInOutput": 3060
@@ -15844,13 +15849,13 @@
           "bytesInOutput": 1628
         },
         "src/Prebuilt/components/VirtualBackground/VBHandler.tsx": {
-          "bytesInOutput": 3431
+          "bytesInOutput": 3545
         },
         "src/Prebuilt/components/VirtualBackground/constants.ts": {
           "bytesInOutput": 908
         },
         "src/Prebuilt/components/VirtualBackground/VBPicker.tsx": {
-          "bytesInOutput": 6640
+          "bytesInOutput": 6755
         },
         "src/Prebuilt/layouts/SidePane.tsx": {
           "bytesInOutput": 5399
@@ -16009,7 +16014,7 @@
           "bytesInOutput": 789
         },
         "src/Prebuilt/AppStateContext.tsx": {
-          "bytesInOutput": 2741
+          "bytesInOutput": 2792
         },
         "src/Prebuilt/components/LeaveScreen.tsx": {
           "bytesInOutput": 2925
@@ -16096,7 +16101,7 @@
           "bytesInOutput": 2930
         }
       },
-      "bytes": 1440991
+      "bytes": 1441228
     }
   }
 }

package/dist/meta.esbuild.json

@@ -4434,7 +4434,7 @@
       "format": "cjs"
     },
     "../hms-video-web/dist/index.js": {
-      "bytes": 263156,
+      "bytes": 263148,
       "imports": [
         {
           "path": "uuid",
@@ -4969,7 +4969,7 @@
       "format": "esm"
     },
     "../hms-video-store/dist/index.js": {
-      "bytes": 68804,
+      "bytes": 68788,
       "imports": [
         {
           "path": "../../node_modules/reselect/es/index.js",
@@ -7957,7 +7957,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/Chat/Chat.tsx": {
-      "bytes": 3561,
+      "bytes": 3558,
       "imports": [
         {
           "path": "react",
@@ -8043,7 +8043,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/Footer/PaginatedParticipants.tsx": {
-      "bytes": 4431,
+      "bytes": 4446,
       "imports": [
         {
           "path": "react",
@@ -8648,7 +8648,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/VirtualBackground/VBHandler.tsx": {
-      "bytes": 2086,
+      "bytes": 2178,
       "imports": [
         {
           "path": "@100mslive/hms-virtual-background",
@@ -8680,7 +8680,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/VirtualBackground/VBPicker.tsx": {
-      "bytes": 5515,
+      "bytes": 5568,
       "imports": [
         {
           "path": "react",
@@ -11088,7 +11088,7 @@
       "format": "esm"
     },
     "src/Prebuilt/AppStateContext.tsx": {
-      "bytes": 2560,
+      "bytes": 2655,
       "imports": [
         {
           "path": "react",
@@ -11105,6 +11105,11 @@
           "kind": "import-statement",
           "external": true
         },
+        {
+          "path": "src/Prebuilt/components/VirtualBackground/VBHandler.tsx",
+          "kind": "import-statement",
+          "original": "./components/VirtualBackground/VBHandler"
+        },
         {
           "path": "src/Prebuilt/provider/roomLayoutProvider/index.tsx",
           "kind": "import-statement",
@@ -12468,7 +12473,7 @@
     "dist/index.js": {
       "imports": [
         {
-          "path": "dist/chunk-H3B4ARYV.js",
+          "path": "dist/chunk-NHPPOGUF.js",
           "kind": "import-statement"
         }
       ],
@@ -12540,16 +12545,16 @@
       "inputs": {},
       "bytes": 1798
     },
-    "dist/HLSView-7X5BVAZE.js.map": {
+    "dist/HLSView-4L4OAX2K.js.map": {
       "imports": [],
       "exports": [],
       "inputs": {},
       "bytes": 58021
     },
-    "dist/HLSView-7X5BVAZE.js": {
+    "dist/HLSView-4L4OAX2K.js": {
       "imports": [
         {
-          "path": "dist/chunk-H3B4ARYV.js",
+          "path": "dist/chunk-NHPPOGUF.js",
           "kind": "import-statement"
         },
         {
@@ -12713,13 +12718,13 @@
       },
       "bytes": 36449
     },
-    "dist/chunk-H3B4ARYV.js.map": {
+    "dist/chunk-NHPPOGUF.js.map": {
       "imports": [],
       "exports": [],
       "inputs": {},
-      "bytes": 3034287
+      "bytes": 3034631
     },
-    "dist/chunk-H3B4ARYV.js": {
+    "dist/chunk-NHPPOGUF.js": {
       "imports": [
         {
           "path": "react",
@@ -14922,7 +14927,7 @@
           "external": true
         },
         {
-          "path": "dist/HLSView-7X5BVAZE.js",
+          "path": "dist/HLSView-4L4OAX2K.js",
           "kind": "dynamic-import"
         },
         {
@@ -15333,7 +15338,7 @@
       ],
       "inputs": {
         "<define:process.env>": {
-          "bytesInOutput": 18620
+          "bytesInOutput": 18549
         },
         "../../node_modules/lodash/lodash.js": {
           "bytesInOutput": 224380
@@ -15756,7 +15761,7 @@
           "bytesInOutput": 10019
         },
         "../hms-video-web/dist/index.js": {
-          "bytesInOutput": 32625
+          "bytesInOutput": 32617
         },
         "../../node_modules/webrtc-adapter/src/js/adapter_core.js": {
           "bytesInOutput": 154
@@ -15822,7 +15827,7 @@
           "bytesInOutput": 712
         },
         "../hms-video-store/dist/index.js": {
-          "bytesInOutput": 19867
+          "bytesInOutput": 19851
         },
         "../../node_modules/reselect/es/index.js": {
           "bytesInOutput": 2537
@@ -15969,7 +15974,7 @@
           "bytesInOutput": 7277
         },
         "src/Prebuilt/components/Chat/Chat.tsx": {
-          "bytesInOutput": 3430
+          "bytesInOutput": 3442
         },
         "src/Prebuilt/components/Chat/ChatBody.tsx": {
           "bytesInOutput": 13096
@@ -16020,7 +16025,7 @@
           "bytesInOutput": 543
         },
         "src/Prebuilt/components/Footer/PaginatedParticipants.tsx": {
-          "bytesInOutput": 4165
+          "bytesInOutput": 4205
         },
         "src/Prebuilt/components/ChatSettings.tsx": {
           "bytesInOutput": 2469
@@ -16041,7 +16046,7 @@
           "bytesInOutput": 1050
         },
         "src/Prebuilt/components/VirtualBackground/VBPicker.tsx": {
-          "bytesInOutput": 5417
+          "bytesInOutput": 5520
         },
         "src/Prebuilt/components/VirtualBackground/VBCollection.tsx": {
           "bytesInOutput": 1157
@@ -16050,7 +16055,7 @@
           "bytesInOutput": 1161
         },
         "src/Prebuilt/components/VirtualBackground/VBHandler.tsx": {
-          "bytesInOutput": 2750
+          "bytesInOutput": 2848
         },
         "src/Prebuilt/components/VirtualBackground/constants.ts": {
           "bytesInOutput": 714
@@ -16158,7 +16163,7 @@
           "bytesInOutput": 2185
         },
         "src/Prebuilt/AppStateContext.tsx": {
-          "bytesInOutput": 2132
+          "bytesInOutput": 2157
         },
         "src/Prebuilt/components/hooks/useRedirectToLeave.tsx": {
           "bytesInOutput": 491
@@ -16236,7 +16241,7 @@
           "bytesInOutput": 418
         }
       },
-      "bytes": 1223247
+      "bytes": 1223430
     }
   }
 }

package/package.json

@@ -10,7 +10,7 @@
     "prebuilt",
     "roomkit"
   ],
-  "version": "0.1.19-alpha.2",
+  "version": "0.1.19",
   "author": "100ms",
   "license": "MIT",
   "files": [
@@ -76,10 +76,10 @@
     "react": ">=17.0.2 <19.0.0"
   },
   "dependencies": {
-    "@100mslive/hls-player": "0.1.28-alpha.2",
-    "@100mslive/hms-virtual-background": "1.11.28-alpha.2",
-    "@100mslive/react-icons": "0.8.28-alpha.2",
-    "@100mslive/react-sdk": "0.8.28-alpha.2",
+    "@100mslive/hls-player": "0.1.28",
+    "@100mslive/hms-virtual-background": "1.11.28",
+    "@100mslive/react-icons": "0.8.28",
+    "@100mslive/react-sdk": "0.8.28",
     "@100mslive/types-prebuilt": "0.12.5",
     "@emoji-mart/data": "^1.0.6",
     "@emoji-mart/react": "^1.0.1",
@@ -115,5 +115,5 @@
     "uuid": "^8.3.2",
     "worker-timers": "^7.0.40"
   },
-  "gitHead": "89886ce5263b9ac84ae04737f2c258933eb60280"
+  "gitHead": "2616c7f5408ccbe73ba402514ca7b87b310d377c"
 }

package/src/Prebuilt/AppStateContext.tsx

@@ -1,6 +1,7 @@
 import React, { useContext, useEffect } from 'react';
 import { usePreviousDistinct } from 'react-use';
 import { HMSRoomState, selectRoomState, useHMSStore } from '@100mslive/react-sdk';
+import { VBHandler } from './components/VirtualBackground/VBHandler';
 import { useRoomLayout } from './provider/roomLayoutProvider';
 import { useRedirectToLeave } from './components/hooks/useRedirectToLeave';
 import {
@@ -60,6 +61,7 @@ export const useAppStateManager = () => {
     ) {
       const goTo = isPreviewScreenEnabled ? PrebuiltStates.PREVIEW : PrebuiltStates.MEETING;
       setActiveState(isLeaveScreenEnabled ? PrebuiltStates.LEAVE : goTo);
+      VBHandler.reset();
       redirectToLeave(1000); // to clear toasts after 1 second
     } else if (!prevRoomState && roomState === HMSRoomState.Disconnected) {
       setActiveState(isPreviewScreenEnabled ? PrebuiltStates.PREVIEW : PrebuiltStates.MEETING);

package/src/Prebuilt/components/Chat/Chat.tsx

@@ -70,10 +70,10 @@ const NewMessageIndicator = ({
   }
   // @ts-ignore
   const outerElement = listRef.current._outerRef;
-  // @ts-ignore
-  if (outerElement.scrollHeight === listRef.current.state.scrollOffset + outerElement.offsetHeight) {
+  if (outerElement.clientHeight + outerElement.scrollTop + outerElement.offsetTop >= outerElement.scrollHeight) {
     return null;
   }
+
   return (
     <Flex
       justify="center"

package/src/Prebuilt/components/Footer/PaginatedParticipants.tsx

@@ -69,7 +69,7 @@ const VirtualizedParticipantItem = React.memo(
 export const PaginatedParticipants = ({ roleName, onBack }: { roleName: string; onBack: () => void }) => {
   const { peers, total, hasNext, loadPeers, loadMorePeers } = usePaginatedParticipants({ role: roleName, limit: 20 });
   const [search, setSearch] = useState<string>('');
-  const filteredPeers = peers.filter(p => p.name?.toLowerCase().includes(search));
+  const filteredPeers = peers.filter(p => p.name?.toLowerCase().includes(search?.toLowerCase()));
   const isConnected = useHMSStore(selectIsConnectedToRoom);
   const [ref, { width }] = useMeasure<HTMLDivElement>();
   const height = ROW_HEIGHT * (filteredPeers.length + 1);

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

@@ -67,6 +67,11 @@ export class VBPlugin {
       await this.hmsPlugin?.setBackground(HMSVirtualBackgroundTypes.NONE, HMSVirtualBackgroundTypes.NONE);
     }
   };
+
+  reset = () => {
+    this.effectsPlugin = undefined;
+    this.hmsPlugin = undefined;
+  };
 }
 
 export const VBHandler = new VBPlugin();

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

@@ -53,6 +53,9 @@ export const VBPicker = ({ backgroundMedia = [] }: { backgroundMedia: VirtualBac
   const showVideoTile = isVideoOn && isLargeRoom && !inPreview;
 
   useEffect(() => {
+    if (!track?.id) {
+      return;
+    }
     if (!isPluginAdded) {
       let vbObject = VBHandler.getVBObject();
       if (!vbObject) {
@@ -68,7 +71,7 @@ export const VBPicker = ({ backgroundMedia = [] }: { backgroundMedia: VirtualBac
         }
       }
     }
-  }, [hmsActions, role, isPluginAdded, isEffectsEnabled, effectsKey]);
+  }, [hmsActions, role, isPluginAdded, isEffectsEnabled, effectsKey, track?.id]);
 
   useEffect(() => {
     if (!isVideoOn) {