@100mslive/roomkit-react 0.1.19-alpha.0 → 0.1.19-alpha.1

package/dist/index.js

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

package/dist/meta.cjs.json

@@ -3101,7 +3101,7 @@
       "format": "esm"
     },
     "src/Prebuilt/provider/roomLayoutProvider/index.tsx": {
-      "bytes": 1609,
+      "bytes": 1857,
       "imports": [
         {
           "path": "react",
@@ -8577,7 +8577,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/VirtualBackground/VBPicker.tsx": {
-      "bytes": 6551,
+      "bytes": 6579,
       "imports": [
         {
           "path": "react",
@@ -8653,7 +8653,7 @@
       "format": "esm"
     },
     "src/Prebuilt/layouts/SidePane.tsx": {
-      "bytes": 4337,
+      "bytes": 4487,
       "imports": [
         {
           "path": "react",
@@ -12350,7 +12350,7 @@
       "imports": [],
       "exports": [],
       "inputs": {},
-      "bytes": 3083229
+      "bytes": 3083722
     },
     "dist/index.cjs.js": {
       "imports": [
@@ -14984,7 +14984,7 @@
       "entryPoint": "src/index.ts",
       "inputs": {
         "<define:process.env>": {
-          "bytesInOutput": 18673
+          "bytesInOutput": 18674
         },
         "src/Theme/base.config.ts": {
           "bytesInOutput": 6104
@@ -15713,10 +15713,10 @@
           "bytesInOutput": 1222
         },
         "src/Prebuilt/components/VirtualBackground/VBPicker.tsx": {
-          "bytesInOutput": 8609
+          "bytesInOutput": 8620
         },
         "src/Prebuilt/layouts/SidePane.tsx": {
-          "bytesInOutput": 4917
+          "bytesInOutput": 5095
         },
         "src/Prebuilt/components/Chip.tsx": {
           "bytesInOutput": 1118
@@ -15959,7 +15959,7 @@
           "bytesInOutput": 2930
         }
       },
-      "bytes": 1434522
+      "bytes": 1434712
     }
   }
 }

package/dist/meta.esbuild.json

@@ -3101,7 +3101,7 @@
       "format": "esm"
     },
     "src/Prebuilt/provider/roomLayoutProvider/index.tsx": {
-      "bytes": 1609,
+      "bytes": 1857,
       "imports": [
         {
           "path": "react",
@@ -8577,7 +8577,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/VirtualBackground/VBPicker.tsx": {
-      "bytes": 6551,
+      "bytes": 6579,
       "imports": [
         {
           "path": "react",
@@ -8653,7 +8653,7 @@
       "format": "esm"
     },
     "src/Prebuilt/layouts/SidePane.tsx": {
-      "bytes": 4337,
+      "bytes": 4487,
       "imports": [
         {
           "path": "react",
@@ -12355,7 +12355,7 @@
     "dist/index.js": {
       "imports": [
         {
-          "path": "dist/chunk-GXJIUWTP.js",
+          "path": "dist/chunk-VU2CQFCB.js",
           "kind": "import-statement"
         }
       ],
@@ -12427,16 +12427,16 @@
       "inputs": {},
       "bytes": 1798
     },
-    "dist/HLSView-GG4WVUQY.js.map": {
+    "dist/HLSView-UBVLOPNY.js.map": {
       "imports": [],
       "exports": [],
       "inputs": {},
       "bytes": 58021
     },
-    "dist/HLSView-GG4WVUQY.js": {
+    "dist/HLSView-UBVLOPNY.js": {
       "imports": [
         {
-          "path": "dist/chunk-GXJIUWTP.js",
+          "path": "dist/chunk-VU2CQFCB.js",
           "kind": "import-statement"
         },
         {
@@ -12600,13 +12600,13 @@
       },
       "bytes": 36449
     },
-    "dist/chunk-GXJIUWTP.js.map": {
+    "dist/chunk-VU2CQFCB.js.map": {
       "imports": [],
       "exports": [],
       "inputs": {},
-      "bytes": 3020899
+      "bytes": 3021393
     },
-    "dist/chunk-GXJIUWTP.js": {
+    "dist/chunk-VU2CQFCB.js": {
       "imports": [
         {
           "path": "react",
@@ -14794,7 +14794,7 @@
           "external": true
         },
         {
-          "path": "dist/HLSView-GG4WVUQY.js",
+          "path": "dist/HLSView-UBVLOPNY.js",
           "kind": "dynamic-import"
         },
         {
@@ -15205,7 +15205,7 @@
       ],
       "inputs": {
         "<define:process.env>": {
-          "bytesInOutput": 18673
+          "bytesInOutput": 18674
         },
         "../../node_modules/lodash/lodash.js": {
           "bytesInOutput": 224380
@@ -15772,7 +15772,7 @@
           "bytesInOutput": 9825
         },
         "src/Prebuilt/layouts/SidePane.tsx": {
-          "bytesInOutput": 3969
+          "bytesInOutput": 4143
         },
         "src/Prebuilt/components/Polls/Polls.tsx": {
           "bytesInOutput": 723
@@ -15907,7 +15907,7 @@
           "bytesInOutput": 1050
         },
         "src/Prebuilt/components/VirtualBackground/VBPicker.tsx": {
-          "bytesInOutput": 6924
+          "bytesInOutput": 6935
         },
         "src/Prebuilt/components/VirtualBackground/VBCollection.tsx": {
           "bytesInOutput": 1457
@@ -16099,7 +16099,7 @@
           "bytesInOutput": 418
         }
       },
-      "bytes": 1217888
+      "bytes": 1218074
     }
   }
 }

package/package.json

@@ -10,7 +10,7 @@
     "prebuilt",
     "roomkit"
   ],
-  "version": "0.1.19-alpha.0",
+  "version": "0.1.19-alpha.1",
   "author": "100ms",
   "license": "MIT",
   "files": [
@@ -76,10 +76,10 @@
     "react": ">=17.0.2 <19.0.0"
   },
   "dependencies": {
-    "@100mslive/hls-player": "0.1.28-alpha.0",
-    "@100mslive/hms-virtual-background": "1.11.28-alpha.0",
-    "@100mslive/react-icons": "0.8.28-alpha.0",
-    "@100mslive/react-sdk": "0.8.28-alpha.0",
+    "@100mslive/hls-player": "0.1.28-alpha.1",
+    "@100mslive/hms-virtual-background": "1.11.28-alpha.1",
+    "@100mslive/react-icons": "0.8.28-alpha.1",
+    "@100mslive/react-sdk": "0.8.28-alpha.1",
     "@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": "92b555102a4b5f0cc1f2913738c56a8e8cdf4b2b"
+  "gitHead": "5f85c1840b3852eee50dbd94689eac2aa7a1f327"
 }

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

@@ -1,6 +1,6 @@
 import React, { useEffect, useRef, useState } from 'react';
 import { HMSVirtualBackgroundTypes } from '@100mslive/hms-virtual-background';
-import { VirtualBackground, VirtualBackgroundMedia } from '@100mslive/types-prebuilt/elements/virtual_background';
+import { VirtualBackgroundMedia } from '@100mslive/types-prebuilt/elements/virtual_background';
 import {
   HMSRoomState,
   selectIsLargeRoom,
@@ -28,7 +28,7 @@ import { defaultMedia, vbPlugin } from './constants';
 const iconDims = { height: '40px', width: '40px' };
 const MAX_RETRIES = 2;
 
-export const VBPicker = ({ background_media = [] }: VirtualBackground = {}) => {
+export const VBPicker = ({ backgroundMedia = [] }: { backgroundMedia: VirtualBackgroundMedia[] }) => {
   const toggleVB = useSidepaneToggle(SIDE_PANE_OPTIONS.VB);
   const hmsActions = useHMSActions();
   const role = useHMSStore(selectLocalPeerRole);
@@ -46,7 +46,9 @@ export const VBPicker = ({ background_media = [] }: VirtualBackground = {}) => {
   const roomState = useHMSStore(selectRoomState);
   const isLargeRoom = useHMSStore(selectIsLargeRoom);
   const addedPluginToVideoTrack = useRef(false);
-  const mediaList = [...background_media.map((media: VirtualBackgroundMedia) => media?.url), ...defaultMedia];
+  const mediaList = backgroundMedia.length
+    ? backgroundMedia.map((media: VirtualBackgroundMedia) => media?.url)
+    : defaultMedia;
 
   const inPreview = roomState === HMSRoomState.Preview;
   // Hidden in preview as the effect will be visible in the preview tile. Needed inside the room because the peer might not be on-screen

package/src/Prebuilt/layouts/SidePane.tsx

@@ -12,7 +12,10 @@ import { Box, Flex } from '../../Layout';
 import { config as cssConfig } from '../../Theme';
 // @ts-ignore: No implicit Any
 import { useSidepaneReset } from '../components/AppData/useSidepane';
-import { useRoomLayoutConferencingScreen } from '../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
+import {
+  useRoomLayoutConferencingScreen,
+  useRoomLayoutPreviewScreen,
+} from '../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
 import { translateAcross } from '../../utils';
 import { APP_DATA, SIDE_PANE_OPTIONS } from '../common/constants';
 
@@ -28,6 +31,7 @@ const SidePane = ({
   const activeScreensharePeerId = useHMSStore(selectAppData(APP_DATA.activeScreensharePeerId));
   const trackId = useHMSStore(selectVideoTrackByPeerID(activeScreensharePeerId))?.id;
   const { elements } = useRoomLayoutConferencingScreen();
+  const { elements: preview_elements } = useRoomLayoutPreviewScreen();
   const resetSidePane = useSidepaneReset();
   let ViewComponent;
   if (sidepane === SIDE_PANE_OPTIONS.POLLS) {
@@ -37,7 +41,7 @@ const SidePane = ({
     ViewComponent = <SidePaneTabs hideControls={hideControls} active={sidepane} />;
   }
   if (sidepane === SIDE_PANE_OPTIONS.VB) {
-    ViewComponent = <VBPicker {...elements.virtual_background} />;
+    ViewComponent = <VBPicker backgroundMedia={preview_elements?.virtual_background?.background_media || []} />;
   }
 
   useEffect(() => {

package/src/Prebuilt/provider/roomLayoutProvider/index.tsx

@@ -18,11 +18,14 @@ export const RoomLayoutContext = React.createContext<
   | undefined
 >(undefined);
 
+// The default merge in lodash merges the values of current layout and the changes.
+// This behaviour makes changes in array based values inconsistent since a union happens.
+// The customizer uses the new value provided if one of the values is an array
 function customizer(objValue: any, srcValue: any) {
-  if (isArray(objValue) && isArray(srcValue)) {
+  if (isArray(objValue) || isArray(srcValue)) {
     return srcValue;
   }
-  // default mergeWith behaviour is followed
+  // default merge behaviour is followed
   return undefined;
 }
 
@@ -34,7 +37,6 @@ export const RoomLayoutProvider: React.FC<React.PropsWithChildren<RoomLayoutProv
   const authToken: string = useAuthToken();
   const { layout, updateRoomLayoutForRole } = useFetchRoomLayout({ authToken, endpoint: roomLayoutEndpoint });
   const mergedLayout = authToken && layout ? mergeWith(layout, overrideLayout, customizer) : layout;
-
   return (
     <RoomLayoutContext.Provider value={{ layout: mergedLayout, updateRoomLayoutForRole }}>
       {children}