@100mslive/roomkit-react 0.3.5-alpha.1 → 0.3.5-alpha.3

package/dist/index.js

@@ -62,7 +62,7 @@ import {
   theme,
   useBorderAudioLevel,
   useTheme
-} from "./chunk-MXPCXPZQ.js";
+} from "./chunk-55X45VYE.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": 329654,
+      "bytes": 330097,
       "imports": [
         {
           "path": "../../node_modules/reselect/es/index.js",
@@ -6301,7 +6301,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/Footer/WhiteboardToggle.tsx": {
-      "bytes": 1360,
+      "bytes": 1272,
       "imports": [
         {
           "path": "react",
@@ -10340,7 +10340,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/LayoutModeSelector.tsx": {
-      "bytes": 3344,
+      "bytes": 3516,
       "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": 3299924
+      "bytes": 3300881
     },
     "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": 18248
+          "bytesInOutput": 18285
         },
         "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
@@ -17330,7 +17320,7 @@
           "bytesInOutput": 1521
         },
         "src/Prebuilt/components/Footer/WhiteboardToggle.tsx": {
-          "bytesInOutput": 1804
+          "bytesInOutput": 1729
         },
         "src/Prebuilt/components/Footer/Footer.tsx": {
           "bytesInOutput": 4294
@@ -17570,7 +17560,7 @@
           "bytesInOutput": 2745
         },
         "src/Prebuilt/components/LayoutModeSelector.tsx": {
-          "bytesInOutput": 3951
+          "bytesInOutput": 4151
         },
         "src/Prebuilt/components/ScreenshareDisplay.tsx": {
           "bytesInOutput": 1707
@@ -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": 1571138
+      "bytes": 1570897
     }
   }
 }

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": 329654,
+      "bytes": 330097,
       "imports": [
         {
           "path": "../../node_modules/reselect/es/index.js",
@@ -6301,7 +6301,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/Footer/WhiteboardToggle.tsx": {
-      "bytes": 1360,
+      "bytes": 1272,
       "imports": [
         {
           "path": "react",
@@ -10340,7 +10340,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/LayoutModeSelector.tsx": {
-      "bytes": 3344,
+      "bytes": 3516,
       "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-MXPCXPZQ.js",
+          "path": "dist/chunk-55X45VYE.js",
           "kind": "import-statement"
         }
       ],
@@ -13863,16 +13858,16 @@
       "inputs": {},
       "bytes": 1822
     },
-    "dist/HLSView-YAR57OPP.js.map": {
+    "dist/HLSView-MS5MU24E.js.map": {
       "imports": [],
       "exports": [],
       "inputs": {},
       "bytes": 99469
     },
-    "dist/HLSView-YAR57OPP.js": {
+    "dist/HLSView-MS5MU24E.js": {
       "imports": [
         {
-          "path": "dist/chunk-MXPCXPZQ.js",
+          "path": "dist/chunk-55X45VYE.js",
           "kind": "import-statement"
         },
         {
@@ -14108,13 +14103,13 @@
       },
       "bytes": 61339
     },
-    "dist/chunk-MXPCXPZQ.js.map": {
+    "dist/chunk-55X45VYE.js.map": {
       "imports": [],
       "exports": [],
       "inputs": {},
-      "bytes": 3195905
+      "bytes": 3197084
     },
-    "dist/chunk-MXPCXPZQ.js": {
+    "dist/chunk-55X45VYE.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-YAR57OPP.js",
+          "path": "dist/HLSView-MS5MU24E.js",
           "kind": "dynamic-import"
         },
         {
@@ -16988,10 +16978,10 @@
       ],
       "inputs": {
         "<define:process.env>": {
-          "bytesInOutput": 18248
+          "bytesInOutput": 18285
         },
         "../../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
@@ -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
@@ -17765,7 +17755,7 @@
           "bytesInOutput": 3506
         },
         "src/Prebuilt/components/VideoLayouts/GridLayout.tsx": {
-          "bytesInOutput": 4521
+          "bytesInOutput": 4550
         },
         "src/Prebuilt/components/VideoLayouts/EqualProminence.tsx": {
           "bytesInOutput": 2019
@@ -17804,7 +17794,7 @@
           "bytesInOutput": 4447
         },
         "src/Prebuilt/components/LayoutModeSelector.tsx": {
-          "bytesInOutput": 3093
+          "bytesInOutput": 3276
         },
         "src/Prebuilt/components/ScreenshareDisplay.tsx": {
           "bytesInOutput": 1226
@@ -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": 1309377
+      "bytes": 1309309
     }
   }
 }

package/package.json

@@ -10,7 +10,7 @@
     "prebuilt",
     "roomkit"
   ],
-  "version": "0.3.5-alpha.1",
+  "version": "0.3.5-alpha.3",
   "author": "100ms",
   "license": "MIT",
   "repository": {
@@ -82,11 +82,11 @@
     "react": ">=17.0.2 <19.0.0"
   },
   "dependencies": {
-    "@100mslive/hls-player": "0.3.5-alpha.1",
+    "@100mslive/hls-player": "0.3.5-alpha.3",
     "@100mslive/hms-noise-cancellation": "0.0.1",
-    "@100mslive/hms-virtual-background": "1.13.5-alpha.1",
-    "@100mslive/react-icons": "0.10.5-alpha.1",
-    "@100mslive/react-sdk": "0.10.5-alpha.1",
+    "@100mslive/hms-virtual-background": "1.13.5-alpha.3",
+    "@100mslive/react-icons": "0.10.5-alpha.3",
+    "@100mslive/react-sdk": "0.10.5-alpha.3",
     "@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": "cbc32d4a832f2752887e91de078493454a49d69f"
+  "gitHead": "5db2a806f46b654133659d7160365b88fcec77ab"
 }

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/Footer/WhiteboardToggle.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { useScreenShare, useWhiteboard } from '@100mslive/react-sdk';
+import { selectPeerScreenSharing, useHMSStore, useWhiteboard } from '@100mslive/react-sdk';
 import { PencilDrawIcon } from '@100mslive/react-icons';
 import { Tooltip } from '../../..';
 // @ts-ignore: No implicit Any
@@ -9,9 +9,8 @@ import { ToastManager } from '../Toast/ToastManager';
 
 export const WhiteboardToggle = () => {
   const { toggle, open, isOwner } = useWhiteboard();
-  const { screenSharingPeerId, amIScreenSharing } = useScreenShare();
-  const remoteScreenShare = screenSharingPeerId && !amIScreenSharing;
-  const disabled = remoteScreenShare || (open && !isOwner);
+  const peerSharing = useHMSStore(selectPeerScreenSharing);
+  const disabled = !!peerSharing || (open && !isOwner);
 
   if (!toggle) {
     return null;
@@ -21,9 +20,7 @@ export const WhiteboardToggle = () => {
     <Tooltip
       key="whiteboard"
       title={
-        remoteScreenShare
-          ? 'Cannot open whiteboard when viewing a shared screen'
-          : `${open ? 'Close' : 'Open'} Whiteboard`
+        peerSharing ? 'Cannot open whiteboard when viewing a shared screen' : `${open ? 'Close' : 'Open'} Whiteboard`
       }
     >
       <IconButton

package/src/Prebuilt/components/LayoutModeSelector.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useCallback, useState } from 'react';
 import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from '@100mslive/react-icons';
 import { LayoutMode, LayoutModeIconMapping, LayoutModeKeys } from './Settings/LayoutSettings';
 import { Flex } from '../../Layout';
@@ -11,7 +11,13 @@ import { UI_SETTINGS } from '../common/constants';
 export const LayoutModeSelector = () => {
   const [open, setOpen] = useState(false);
   const [layoutMode, setLayoutMode] = useSetUiSettings(UI_SETTINGS.layoutMode);
-
+  const updateLayoutMode = useCallback(
+    (value: string) => {
+      setLayoutMode(value);
+      setOpen(false);
+    },
+    [setLayoutMode, setOpen],
+  );
   return (
     <Popover.Root open={open} onOpenChange={setOpen}>
       <Popover.Trigger asChild>
@@ -65,7 +71,7 @@ export const LayoutModeSelector = () => {
           return (
             <Flex
               key={key}
-              onClick={() => setLayoutMode(value)}
+              onClick={() => updateLayoutMode(value)}
               align="center"
               css={{
                 gap: '$4',

package/src/Prebuilt/components/hooks/useCloseScreenshareWhiteboard.tsx

@@ -1,32 +1,17 @@
 import { useEffect } from 'react';
-import { usePrevious } from 'react-use';
-import { useScreenShare, useWhiteboard } from '@100mslive/react-sdk';
+import { selectPeerScreenSharing, useHMSStore, useWhiteboard } from '@100mslive/react-sdk';
 
 /**
- * close existing screenshare or whiteboard when the other is started
+ * close existing whiteboard when a screen is shared
  */
 export const useCloseScreenshareWhiteboard = () => {
-  const { amIScreenSharing, screenSharingPeerId, toggleScreenShare } = useScreenShare();
+  const peerSharing = useHMSStore(selectPeerScreenSharing);
   const { isOwner: isWhiteboardOwner, toggle: toggleWhiteboard } = useWhiteboard();
-  const prevScreenSharer = usePrevious(screenSharingPeerId);
-  const prevWhiteboardOwner = usePrevious(isWhiteboardOwner);
 
-  // if both screenshare and whiteboard are open, close the one that was open earlier
+  // if both screenshare and whiteboard are open, close the whiteboard
   useEffect(() => {
-    if (isWhiteboardOwner && screenSharingPeerId) {
-      if (prevScreenSharer && amIScreenSharing && !prevWhiteboardOwner) {
-        toggleScreenShare?.();
-      } else if (prevWhiteboardOwner && !prevScreenSharer) {
-        toggleWhiteboard?.();
-      }
+    if (isWhiteboardOwner && peerSharing) {
+      toggleWhiteboard?.();
     }
-  }, [
-    isWhiteboardOwner,
-    screenSharingPeerId,
-    amIScreenSharing,
-    prevScreenSharer,
-    prevWhiteboardOwner,
-    toggleScreenShare,
-    toggleWhiteboard,
-  ]);
+  }, [isWhiteboardOwner, toggleWhiteboard, peerSharing]);
 };