@100mslive/roomkit-react 0.3.5-alpha.0 → 0.3.5-alpha.2

package/dist/index.js

@@ -62,7 +62,7 @@ import {
   theme,
   useBorderAudioLevel,
   useTheme
-} from "./chunk-7O27GQEH.js";
+} from "./chunk-ZE5KXBZW.js";
 export {
   Accordion,
   AudioLevel,

package/dist/meta.cjs.json

@@ -2241,7 +2241,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/AppData/AppData.tsx": {
-      "bytes": 5853,
+      "bytes": 6063,
       "imports": [
         {
           "path": "react",
@@ -4696,7 +4696,7 @@
       "format": "cjs"
     },
     "../hms-video-store/dist/index.js": {
-      "bytes": 329600,
+      "bytes": 330097,
       "imports": [
         {
           "path": "../../node_modules/reselect/es/index.js",
@@ -5873,7 +5873,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/Connection/ConnectionIndicator.tsx": {
-      "bytes": 3582,
+      "bytes": 3707,
       "imports": [
         {
           "path": "react",
@@ -6164,7 +6164,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/Footer/ParticipantList.tsx": {
-      "bytes": 12936,
+      "bytes": 12898,
       "imports": [
         {
           "path": "react",
@@ -6301,7 +6301,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/Footer/WhiteboardToggle.tsx": {
-      "bytes": 1360,
+      "bytes": 1272,
       "imports": [
         {
           "path": "react",
@@ -8059,7 +8059,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/Chat/ChatSelector.tsx": {
-      "bytes": 6998,
+      "bytes": 7068,
       "imports": [
         {
           "path": "react",
@@ -10890,18 +10890,13 @@
       "format": "esm"
     },
     "src/Prebuilt/components/hooks/useCloseScreenshareWhiteboard.tsx": {
-      "bytes": 1121,
+      "bytes": 617,
       "imports": [
         {
           "path": "react",
           "kind": "import-statement",
           "external": true
         },
-        {
-          "path": "react-use",
-          "kind": "import-statement",
-          "external": true
-        },
         {
           "path": "@100mslive/react-sdk",
           "kind": "import-statement",
@@ -13329,7 +13324,7 @@
       "format": "esm"
     },
     "src/Prebuilt/App.tsx": {
-      "bytes": 10658,
+      "bytes": 10657,
       "imports": [
         {
           "path": "react",
@@ -13785,7 +13780,7 @@
       "imports": [],
       "exports": [],
       "inputs": {},
-      "bytes": 3299608
+      "bytes": 3300552
     },
     "dist/index.cjs.js": {
       "imports": [
@@ -16124,11 +16119,6 @@
           "kind": "require-call",
           "external": true
         },
-        {
-          "path": "react-use",
-          "kind": "require-call",
-          "external": true
-        },
         {
           "path": "@100mslive/react-sdk",
           "kind": "require-call",
@@ -16739,7 +16729,7 @@
       "entryPoint": "src/index.ts",
       "inputs": {
         "<define:process.env>": {
-          "bytesInOutput": 18225
+          "bytesInOutput": 18229
         },
         "src/Theme/base.config.ts": {
           "bytesInOutput": 6104
@@ -17015,7 +17005,7 @@
           "bytesInOutput": 3450
         },
         "../../node_modules/lodash/lodash.js": {
-          "bytesInOutput": 224307
+          "bytesInOutput": 224317
         },
         "src/Prebuilt/provider/roomLayoutProvider/constants/index.ts": {
           "bytesInOutput": 1887
@@ -17036,7 +17026,7 @@
           "bytesInOutput": 3258
         },
         "src/Prebuilt/components/AppData/AppData.tsx": {
-          "bytesInOutput": 6542
+          "bytesInOutput": 6751
         },
         "src/Prebuilt/AppContext.tsx": {
           "bytesInOutput": 840
@@ -17183,13 +17173,13 @@
           "bytesInOutput": 6467
         },
         "../../node_modules/webrtc-adapter/src/js/chrome/getusermedia.js": {
-          "bytesInOutput": 6260
+          "bytesInOutput": 6253
         },
         "../../node_modules/webrtc-adapter/src/js/chrome/getdisplaymedia.js": {
           "bytesInOutput": 1396
         },
         "../../node_modules/webrtc-adapter/src/js/chrome/chrome_shim.js": {
-          "bytesInOutput": 22882
+          "bytesInOutput": 22897
         },
         "../../node_modules/webrtc-adapter/src/js/firefox/getusermedia.js": {
           "bytesInOutput": 2277
@@ -17201,13 +17191,13 @@
           "bytesInOutput": 9352
         },
         "../../node_modules/webrtc-adapter/src/js/safari/safari_shim.js": {
-          "bytesInOutput": 12019
+          "bytesInOutput": 12026
         },
         "../../node_modules/sdp/sdp.js": {
           "bytesInOutput": 22295
         },
         "../../node_modules/webrtc-adapter/src/js/common_shim.js": {
-          "bytesInOutput": 12625
+          "bytesInOutput": 12630
         },
         "../../node_modules/webrtc-adapter/src/js/adapter_factory.js": {
           "bytesInOutput": 4575
@@ -17228,7 +17218,7 @@
           "bytesInOutput": 615
         },
         "../hms-video-store/dist/index.js": {
-          "bytesInOutput": 53502
+          "bytesInOutput": 53501
         },
         "src/Prebuilt/components/hooks/usePlaylistMusic.js": {
           "bytesInOutput": 1384
@@ -17306,7 +17296,7 @@
           "bytesInOutput": 974
         },
         "src/Prebuilt/components/Connection/ConnectionIndicator.tsx": {
-          "bytesInOutput": 4490
+          "bytesInOutput": 4653
         },
         "src/Prebuilt/components/RemoveParticipant.tsx": {
           "bytesInOutput": 1694
@@ -17324,13 +17314,13 @@
           "bytesInOutput": 2181
         },
         "src/Prebuilt/components/Footer/ParticipantList.tsx": {
-          "bytesInOutput": 14946
+          "bytesInOutput": 14891
         },
         "src/Prebuilt/components/Footer/PollsToggle.tsx": {
           "bytesInOutput": 1521
         },
         "src/Prebuilt/components/Footer/WhiteboardToggle.tsx": {
-          "bytesInOutput": 1804
+          "bytesInOutput": 1729
         },
         "src/Prebuilt/components/Footer/Footer.tsx": {
           "bytesInOutput": 4294
@@ -17447,7 +17437,7 @@
           "bytesInOutput": 17543
         },
         "src/Prebuilt/components/Chat/ChatSelector.tsx": {
-          "bytesInOutput": 8560
+          "bytesInOutput": 8614
         },
         "src/Prebuilt/components/Chat/ChatSelectorContainer.tsx": {
           "bytesInOutput": 6701
@@ -17600,7 +17590,7 @@
           "bytesInOutput": 1943
         },
         "src/Prebuilt/components/hooks/useCloseScreenshareWhiteboard.tsx": {
-          "bytesInOutput": 1488
+          "bytesInOutput": 849
         },
         "src/Prebuilt/components/HlsStatsOverlay.jsx": {
           "bytesInOutput": 4195
@@ -17744,7 +17734,7 @@
           "bytesInOutput": 2248
         },
         "src/Prebuilt/components/Notifications/Notifications.tsx": {
-          "bytesInOutput": 8889
+          "bytesInOutput": 8886
         },
         "src/Prebuilt/components/Notifications/index.tsx": {
           "bytesInOutput": 173
@@ -17792,7 +17782,7 @@
           "bytesInOutput": 2980
         }
       },
-      "bytes": 1570953
+      "bytes": 1570641
     }
   }
 }

package/dist/meta.esbuild.json

@@ -2241,7 +2241,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/AppData/AppData.tsx": {
-      "bytes": 5853,
+      "bytes": 6063,
       "imports": [
         {
           "path": "react",
@@ -4696,7 +4696,7 @@
       "format": "cjs"
     },
     "../hms-video-store/dist/index.js": {
-      "bytes": 329600,
+      "bytes": 330097,
       "imports": [
         {
           "path": "../../node_modules/reselect/es/index.js",
@@ -5873,7 +5873,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/Connection/ConnectionIndicator.tsx": {
-      "bytes": 3582,
+      "bytes": 3707,
       "imports": [
         {
           "path": "react",
@@ -6164,7 +6164,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/Footer/ParticipantList.tsx": {
-      "bytes": 12936,
+      "bytes": 12898,
       "imports": [
         {
           "path": "react",
@@ -6301,7 +6301,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/Footer/WhiteboardToggle.tsx": {
-      "bytes": 1360,
+      "bytes": 1272,
       "imports": [
         {
           "path": "react",
@@ -8059,7 +8059,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/Chat/ChatSelector.tsx": {
-      "bytes": 6998,
+      "bytes": 7068,
       "imports": [
         {
           "path": "react",
@@ -10890,18 +10890,13 @@
       "format": "esm"
     },
     "src/Prebuilt/components/hooks/useCloseScreenshareWhiteboard.tsx": {
-      "bytes": 1121,
+      "bytes": 617,
       "imports": [
         {
           "path": "react",
           "kind": "import-statement",
           "external": true
         },
-        {
-          "path": "react-use",
-          "kind": "import-statement",
-          "external": true
-        },
         {
           "path": "@100mslive/react-sdk",
           "kind": "import-statement",
@@ -13329,7 +13324,7 @@
       "format": "esm"
     },
     "src/Prebuilt/App.tsx": {
-      "bytes": 10658,
+      "bytes": 10657,
       "imports": [
         {
           "path": "react",
@@ -13790,7 +13785,7 @@
     "dist/index.js": {
       "imports": [
         {
-          "path": "dist/chunk-7O27GQEH.js",
+          "path": "dist/chunk-ZE5KXBZW.js",
           "kind": "import-statement"
         }
       ],
@@ -13863,16 +13858,16 @@
       "inputs": {},
       "bytes": 1822
     },
-    "dist/HLSView-GF23J3TJ.js.map": {
+    "dist/HLSView-I6DCFRWE.js.map": {
       "imports": [],
       "exports": [],
       "inputs": {},
       "bytes": 99469
     },
-    "dist/HLSView-GF23J3TJ.js": {
+    "dist/HLSView-I6DCFRWE.js": {
       "imports": [
         {
-          "path": "dist/chunk-7O27GQEH.js",
+          "path": "dist/chunk-ZE5KXBZW.js",
           "kind": "import-statement"
         },
         {
@@ -14108,13 +14103,13 @@
       },
       "bytes": 61339
     },
-    "dist/chunk-7O27GQEH.js.map": {
+    "dist/chunk-ZE5KXBZW.js.map": {
       "imports": [],
       "exports": [],
       "inputs": {},
-      "bytes": 3195440
+      "bytes": 3196714
     },
-    "dist/chunk-7O27GQEH.js": {
+    "dist/chunk-ZE5KXBZW.js": {
       "imports": [
         {
           "path": "react",
@@ -16496,18 +16491,13 @@
           "kind": "import-statement",
           "external": true
         },
-        {
-          "path": "react-use",
-          "kind": "import-statement",
-          "external": true
-        },
         {
           "path": "@100mslive/react-sdk",
           "kind": "import-statement",
           "external": true
         },
         {
-          "path": "dist/HLSView-GF23J3TJ.js",
+          "path": "dist/HLSView-I6DCFRWE.js",
           "kind": "dynamic-import"
         },
         {
@@ -16988,10 +16978,10 @@
       ],
       "inputs": {
         "<define:process.env>": {
-          "bytesInOutput": 18225
+          "bytesInOutput": 18229
         },
         "../../node_modules/lodash/lodash.js": {
-          "bytesInOutput": 224300
+          "bytesInOutput": 224310
         },
         "../../node_modules/ua-parser-js/src/ua-parser.js": {
           "bytesInOutput": 42491
@@ -17243,7 +17233,7 @@
           "bytesInOutput": 7828
         },
         "src/Prebuilt/components/AppData/AppData.tsx": {
-          "bytesInOutput": 5383
+          "bytesInOutput": 5582
         },
         "src/Prebuilt/components/Settings/LayoutSettings.tsx": {
           "bytesInOutput": 2705
@@ -17384,7 +17374,7 @@
           "bytesInOutput": 2509
         },
         "src/Prebuilt/components/RoleChangeModal.jsx": {
-          "bytesInOutput": 6096
+          "bytesInOutput": 6098
         },
         "src/Prebuilt/components/Settings/StartRecording.jsx": {
           "bytesInOutput": 4547
@@ -17426,7 +17416,7 @@
           "bytesInOutput": 10031
         },
         "../hms-video-store/dist/index.js": {
-          "bytesInOutput": 48907
+          "bytesInOutput": 48906
         },
         "../../node_modules/reselect/es/index.js": {
           "bytesInOutput": 2537
@@ -17441,10 +17431,10 @@
           "bytesInOutput": 6313
         },
         "../../node_modules/webrtc-adapter/src/js/chrome/chrome_shim.js": {
-          "bytesInOutput": 22678
+          "bytesInOutput": 22693
         },
         "../../node_modules/webrtc-adapter/src/js/chrome/getusermedia.js": {
-          "bytesInOutput": 6094
+          "bytesInOutput": 6087
         },
         "../../node_modules/webrtc-adapter/src/js/chrome/getdisplaymedia.js": {
           "bytesInOutput": 1256
@@ -17459,10 +17449,10 @@
           "bytesInOutput": 842
         },
         "../../node_modules/webrtc-adapter/src/js/safari/safari_shim.js": {
-          "bytesInOutput": 11868
+          "bytesInOutput": 11875
         },
         "../../node_modules/webrtc-adapter/src/js/common_shim.js": {
-          "bytesInOutput": 12465
+          "bytesInOutput": 12470
         },
         "src/Prebuilt/components/Header/AdditionalRoomState.jsx": {
           "bytesInOutput": 6823
@@ -17528,10 +17518,10 @@
           "bytesInOutput": 1445
         },
         "src/Prebuilt/components/Footer/ParticipantList.tsx": {
-          "bytesInOutput": 12180
+          "bytesInOutput": 12161
         },
         "src/Prebuilt/components/Connection/ConnectionIndicator.tsx": {
-          "bytesInOutput": 3749
+          "bytesInOutput": 3876
         },
         "src/Prebuilt/components/Connection/connectionQualityUtils.js": {
           "bytesInOutput": 700
@@ -17555,7 +17545,7 @@
           "bytesInOutput": 1073
         },
         "src/Prebuilt/components/Footer/WhiteboardToggle.tsx": {
-          "bytesInOutput": 1291
+          "bytesInOutput": 1222
         },
         "src/Prebuilt/components/Notifications/HLSFailureModal.tsx": {
           "bytesInOutput": 2414
@@ -17660,7 +17650,7 @@
           "bytesInOutput": 4926
         },
         "src/Prebuilt/components/Chat/ChatBody.tsx": {
-          "bytesInOutput": 14726
+          "bytesInOutput": 14728
         },
         "src/Prebuilt/components/Chat/ChatActions.tsx": {
           "bytesInOutput": 9785
@@ -17690,7 +17680,7 @@
           "bytesInOutput": 5318
         },
         "src/Prebuilt/components/Chat/ChatSelector.tsx": {
-          "bytesInOutput": 6999
+          "bytesInOutput": 7066
         },
         "src/Prebuilt/components/AppData/useChatState.js": {
           "bytesInOutput": 666
@@ -17720,7 +17710,7 @@
           "bytesInOutput": 6608
         },
         "src/Prebuilt/components/Connection/TileConnection.tsx": {
-          "bytesInOutput": 2380
+          "bytesInOutput": 2404
         },
         "src/Prebuilt/components/TileMenu/TileMenu.tsx": {
           "bytesInOutput": 4507
@@ -17765,7 +17755,7 @@
           "bytesInOutput": 3506
         },
         "src/Prebuilt/components/VideoLayouts/GridLayout.tsx": {
-          "bytesInOutput": 4521
+          "bytesInOutput": 4550
         },
         "src/Prebuilt/components/VideoLayouts/EqualProminence.tsx": {
           "bytesInOutput": 2019
@@ -17825,7 +17815,7 @@
           "bytesInOutput": 1415
         },
         "src/Prebuilt/components/hooks/useCloseScreenshareWhiteboard.tsx": {
-          "bytesInOutput": 1097
+          "bytesInOutput": 619
         },
         "src/Prebuilt/components/Header/index.tsx": {
           "bytesInOutput": 27
@@ -17870,7 +17860,7 @@
           "bytesInOutput": 27
         },
         "src/Prebuilt/components/Notifications/Notifications.tsx": {
-          "bytesInOutput": 7974
+          "bytesInOutput": 7971
         },
         "src/Prebuilt/components/Notifications/AutoplayBlockedModal.tsx": {
           "bytesInOutput": 1053
@@ -17948,7 +17938,7 @@
           "bytesInOutput": 651
         }
       },
-      "bytes": 1309155
+      "bytes": 1309070
     }
   }
 }

package/package.json

@@ -10,7 +10,7 @@
     "prebuilt",
     "roomkit"
   ],
-  "version": "0.3.5-alpha.0",
+  "version": "0.3.5-alpha.2",
   "author": "100ms",
   "license": "MIT",
   "repository": {
@@ -82,11 +82,11 @@
     "react": ">=17.0.2 <19.0.0"
   },
   "dependencies": {
-    "@100mslive/hls-player": "0.3.5-alpha.0",
+    "@100mslive/hls-player": "0.3.5-alpha.2",
     "@100mslive/hms-noise-cancellation": "0.0.1",
-    "@100mslive/hms-virtual-background": "1.13.5-alpha.0",
-    "@100mslive/react-icons": "0.10.5-alpha.0",
-    "@100mslive/react-sdk": "0.10.5-alpha.0",
+    "@100mslive/hms-virtual-background": "1.13.5-alpha.2",
+    "@100mslive/react-icons": "0.10.5-alpha.2",
+    "@100mslive/react-sdk": "0.10.5-alpha.2",
     "@100mslive/types-prebuilt": "0.12.8",
     "@emoji-mart/data": "^1.0.6",
     "@emoji-mart/react": "^1.0.1",
@@ -122,5 +122,5 @@
     "uuid": "^8.3.2",
     "worker-timers": "^7.0.40"
   },
-  "gitHead": "ff505981427628881b2c9c601640319966773bd2"
+  "gitHead": "2612f221c9a7a7705261bf50d57fbca61aee6386"
 }

package/src/Prebuilt/App.tsx

@@ -285,7 +285,6 @@ function AppRoutes({
   const roomLayout = useRoomLayout();
   const isNotificationsDisabled = useIsNotificationDisabled();
   const { activeState, rejoin } = useAppStateManager();
-
   return (
     <AppStateContext.Provider value={{ rejoin }}>
       <>

package/src/Prebuilt/components/AppData/AppData.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useMemo, useRef } from 'react';
 import { useMedia } from 'react-use';
 import {
   HMSRoomState,
@@ -79,6 +79,17 @@ export const AppData = React.memo(() => {
   const toggleVB = useSidepaneToggle(SIDE_PANE_OPTIONS.VB);
   const isMobile = useMedia(cssConfig.media.md);
   const { isLocalVideoEnabled } = useAVToggle();
+  const sidepaneOpenedRef = useRef(false);
+
+  const defaultMediaURL = useMemo(() => {
+    const media = elements?.virtual_background?.background_media || [];
+    for (let i = 0; i < media.length; i++) {
+      if (media[i].default && media[i].url) {
+        return media[i].url;
+      }
+    }
+    return '';
+  }, [elements?.virtual_background?.background_media]);
 
   useEffect(() => {
     hmsActions.initAppData({
@@ -112,19 +123,12 @@ export const AppData = React.memo(() => {
   }, [preferences.subscribedNotifications, hmsActions]);
 
   useEffect(() => {
-    let defaultMediaURL;
-    elements?.virtual_background?.background_media?.forEach(media => {
-      if (media.default && media.url) {
-        defaultMediaURL = media.url;
-      }
-    });
-    if (defaultMediaURL) {
+    if (defaultMediaURL && !sidepaneOpenedRef.current && !isMobile && isLocalVideoEnabled) {
       hmsActions.setAppData(APP_DATA.background, defaultMediaURL);
-      if (isLocalVideoEnabled && !isMobile) {
-        toggleVB();
-      }
+      sidepaneOpenedRef.current = true;
+      toggleVB();
     }
-  }, [hmsActions, elements?.virtual_background?.background_media, toggleVB, isLocalVideoEnabled, isMobile]);
+  }, [hmsActions, toggleVB, isLocalVideoEnabled, isMobile, defaultMediaURL]);
 
   return <ResetStreamingStart />;
 });

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

@@ -2,6 +2,7 @@ import React, { useMemo, useState } from 'react';
 import { useMedia } from 'react-use';
 import {
   HMSPeer,
+  HMSPeerType,
   selectMessagesUnreadCountByPeerID,
   selectMessagesUnreadCountByRole,
   selectRemotePeers,
@@ -158,7 +159,9 @@ const VirtualizedSelectItemList = ({
     () =>
       peers.filter(
         // search should be empty or search phrase should be included in name
-        peer => !searchValue || peer.name.toLowerCase().includes(searchValue.toLowerCase()),
+        peer =>
+          (!searchValue || peer.name.toLowerCase().includes(searchValue.toLowerCase())) &&
+          peer.type !== HMSPeerType.SIP,
       ),
     [peers, searchValue],
   );

package/src/Prebuilt/components/Connection/ConnectionIndicator.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { selectConnectionQualityByPeerID, useHMSStore } from '@100mslive/react-sdk';
+import { HMSPeerType, selectConnectionQualityByPeerID, selectPeerTypeByID, useHMSStore } from '@100mslive/react-sdk';
 import { PoorConnectivityIcon } from '@100mslive/react-icons';
 import { styled, Tooltip, useTheme } from '../../..';
 // @ts-ignore
@@ -32,9 +32,10 @@ export const ConnectionIndicator = ({
   hideBg?: boolean;
 }) => {
   const downlinkQuality = useHMSStore(selectConnectionQualityByPeerID(peerId))?.downlinkQuality;
+  const peerType = useHMSStore(selectPeerTypeByID(peerId));
   const { theme } = useTheme();
   const defaultColor = theme.colors.on_surface_low;
-  if (downlinkQuality === -1 || downlinkQuality === undefined) {
+  if (downlinkQuality === -1 || downlinkQuality === undefined || peerType === HMSPeerType.SIP) {
     return null;
   }
   if (downlinkQuality === 0) {

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

@@ -295,7 +295,7 @@ const ParticipantActions = React.memo(
           <HandRaisedAccordionParticipantActions peerId={peerId} role={role} />
         ) : (
           <>
-            {peerType === HMSPeerType.REGULAR && <ConnectionIndicator peerId={peerId} />}
+            <ConnectionIndicator peerId={peerId} />
             {peerType === HMSPeerType.SIP && (
               <Flex
                 align="center"