fix: use correct layout prop for vb images

packages/roomkit-react/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

packages/roomkit-react/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(() => {

packages/roomkit-react/src/Prebuilt/provider/roomLayoutProvider/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { Layout } from '@100mslive/types-prebuilt';
-import merge from 'lodash.merge';
+import { isArray, mergeWith } from 'lodash';
 // @ts-ignore: fix types
 import { useAuthToken } from '../../components/AppData/useUISettings';
 import { useFetchRoomLayout, useFetchRoomLayoutResponse } from './hooks/useFetchRoomLayout';
@@ -18,14 +18,22 @@ export const RoomLayoutContext = React.createContext<
   | undefined
 >(undefined);
 
+function customizer(objValue: any, srcValue: any) {
+  if (isArray(objValue) && isArray(srcValue)) {
+    return srcValue;
+  }
+  // default mergeWith behaviour is followed
+  return undefined;
+}
+
 export const RoomLayoutProvider: React.FC<React.PropsWithChildren<RoomLayoutProviderProps>> = ({
   children,
   roomLayoutEndpoint,
   overrideLayout,
 }) => {
   const authToken: string = useAuthToken();
   const { layout, updateRoomLayoutForRole } = useFetchRoomLayout({ authToken, endpoint: roomLayoutEndpoint });
-  const mergedLayout = authToken && layout ? merge(layout, overrideLayout) : layout;
+  const mergedLayout = authToken && layout ? mergeWith(layout, overrideLayout, customizer) : layout;
   return (
     <RoomLayoutContext.Provider value={{ layout: mergedLayout, updateRoomLayoutForRole }}>
       {children}