@100mslive/roomkit-react 0.4.3-alpha.3 → 0.4.3-alpha.4

package/src/Prebuilt/components/VideoTile.tsx

@@ -1,203 +0,0 @@
-import React, { useCallback, useMemo, useState } from 'react';
-import { useMeasure } from 'react-use';
-import {
-  selectAudioTrackByPeerID,
-  selectHasPeerHandRaised,
-  selectIsPeerAudioEnabled,
-  selectLocalPeerID,
-  selectPeerMetadata,
-  selectPeerNameByID,
-  selectVideoTrackByID,
-  selectVideoTrackByPeerID,
-  useHMSStore,
-} from '@100mslive/react-sdk';
-import { BrbTileIcon, HandIcon, MicOffIcon } from '@100mslive/react-icons';
-import TileConnection from './Connection/TileConnection';
-import TileMenu, { isSameTile } from './TileMenu/TileMenu';
-import { AudioLevel } from '../../AudioLevel';
-import { Avatar } from '../../Avatar';
-import { VideoTileStats } from '../../Stats';
-import { CSS } from '../../Theme';
-import { Video } from '../../Video';
-import { StyledVideoTile } from '../../VideoTile';
-import { getVideoTileLabel } from './peerTileUtils';
-// @ts-ignore: No implicit Any
-import { useSetAppDataByKey, useUISettings } from './AppData/useUISettings';
-// @ts-ignore: No implicit Any
-import { calculateAvatarAndAttribBoxSize } from '../common/utils';
-import { APP_DATA, UI_SETTINGS } from '../common/constants';
-
-const PeerMetadata = ({ peerId, size }: { peerId: string; size?: 'medium' | 'small' }) => {
-  const metaData = useHMSStore(selectPeerMetadata(peerId));
-  const isBRB = metaData?.isBRBOn || false;
-  const isHandRaised = useHMSStore(selectHasPeerHandRaised(peerId));
-
-  return (
-    <>
-      {isHandRaised ? (
-        <StyledVideoTile.AttributeBox size={size} data-testid="raiseHand_icon_onTile">
-          <HandIcon width={24} height={24} />
-        </StyledVideoTile.AttributeBox>
-      ) : null}
-      {isBRB ? (
-        <StyledVideoTile.AttributeBox size={size} data-testid="brb_icon_onTile">
-          <BrbTileIcon width={22} height={22} />
-        </StyledVideoTile.AttributeBox>
-      ) : null}
-    </>
-  );
-};
-
-const Tile = ({
-  peerId = '',
-  trackId = '',
-  width,
-  height,
-  objectFit = 'cover',
-  canMinimise = false,
-  isDragabble = false,
-  rootCSS = {},
-  containerCSS = {},
-  enableSpotlightingPeer = true,
-  hideParticipantNameOnTile = false,
-  roundedVideoTile = true,
-  hideAudioMuteOnTile = false,
-  hideMetadataOnTile = false,
-}: {
-  peerId?: string;
-  trackId?: string;
-  width?: string | number;
-  height?: string | number;
-  objectFit?: string;
-  canMinimise?: boolean;
-  isDragabble?: boolean;
-  rootCSS?: CSS;
-  containerCSS?: CSS;
-  enableSpotlightingPeer?: boolean;
-  hideParticipantNameOnTile?: boolean;
-  roundedVideoTile?: boolean;
-  hideAudioMuteOnTile?: boolean;
-  hideMetadataOnTile?: boolean;
-}) => {
-  const trackSelector = trackId ? selectVideoTrackByID(trackId) : selectVideoTrackByPeerID(peerId);
-  const track = useHMSStore(trackSelector);
-  const peerName = useHMSStore(selectPeerNameByID(peerId));
-  const audioTrack = useHMSStore(selectAudioTrackByPeerID(peerId));
-  const localPeerID = useHMSStore(selectLocalPeerID);
-  const isAudioOnly = useUISettings(UI_SETTINGS.isAudioOnly);
-  const mirrorLocalVideo = useUISettings(UI_SETTINGS.mirrorLocalVideo);
-  const showStatsOnTiles = useUISettings(UI_SETTINGS.showStatsOnTiles);
-  const isAudioMuted = !useHMSStore(selectIsPeerAudioEnabled(peerId));
-  const isVideoMuted = !track?.enabled;
-  const [isMouseHovered, setIsMouseHovered] = useState(false);
-  const isVideoDegraded = track?.degraded;
-  const isLocal = localPeerID === peerId;
-  const [pinnedTrackId] = useSetAppDataByKey(APP_DATA.pinnedTrackId);
-  const pinned = isSameTile({
-    trackId: pinnedTrackId,
-    videoTrackID: track?.id,
-    audioTrackID: audioTrack?.id,
-  });
-  const label = getVideoTileLabel({
-    peerName,
-    isLocal,
-    videoTrack: track,
-    audioTrack,
-  });
-  const onHoverHandler = useCallback((event: React.MouseEvent) => {
-    setIsMouseHovered(event.type === 'mouseenter');
-  }, []);
-
-  const [ref, { width: calculatedWidth, height: calculatedHeight }] = useMeasure<HTMLDivElement>();
-
-  const isTileBigEnoughToShowStats = calculatedHeight >= 180 && calculatedWidth >= 180;
-
-  const [avatarSize, attribBoxSize] = useMemo(
-    () => calculateAvatarAndAttribBoxSize(calculatedWidth, calculatedHeight),
-    [calculatedWidth, calculatedHeight],
-  );
-
-  return (
-    <StyledVideoTile.Root
-      ref={ref}
-      css={{
-        width,
-        height,
-        ...rootCSS,
-      }}
-      data-testid={`participant_tile_${peerName}`}
-    >
-      {peerName !== undefined ? (
-        <StyledVideoTile.Container
-          onMouseEnter={onHoverHandler}
-          onMouseLeave={onHoverHandler}
-          noRadius={!roundedVideoTile}
-          css={containerCSS}
-        >
-          {showStatsOnTiles && isTileBigEnoughToShowStats ? (
-            <VideoTileStats audioTrackID={audioTrack?.id} videoTrackID={track?.id} peerID={peerId} isLocal={isLocal} />
-          ) : null}
-
-          <Video
-            trackId={track?.id}
-            attach={isLocal ? undefined : !isAudioOnly}
-            mirror={
-              mirrorLocalVideo &&
-              peerId === localPeerID &&
-              track?.source === 'regular' &&
-              track?.facingMode !== 'environment'
-            }
-            noRadius={!roundedVideoTile}
-            data-testid="participant_video_tile"
-            css={{
-              objectFit,
-              filter: isVideoDegraded ? 'blur($space$2)' : undefined,
-              bg: 'transparent',
-            }}
-          />
-          {calculatedWidth > 0 && calculatedHeight > 0 ? (
-            <>
-              {isVideoMuted || (!isLocal && isAudioOnly) ? (
-                <StyledVideoTile.AvatarContainer>
-                  <Avatar name={peerName || ''} data-testid="participant_avatar_icon" size={avatarSize} />
-                </StyledVideoTile.AvatarContainer>
-              ) : null}
-              {!hideAudioMuteOnTile && isAudioMuted ? (
-                <StyledVideoTile.AudioIndicator data-testid="participant_audio_mute_icon" size={attribBoxSize}>
-                  <MicOffIcon />
-                </StyledVideoTile.AudioIndicator>
-              ) : null}
-              {!hideAudioMuteOnTile && !isAudioMuted ? (
-                <StyledVideoTile.AudioIndicator size={attribBoxSize}>
-                  <AudioLevel trackId={audioTrack?.id} size={attribBoxSize} />
-                </StyledVideoTile.AudioIndicator>
-              ) : null}
-              {!hideMetadataOnTile && <PeerMetadata peerId={peerId} size={attribBoxSize} />}
-            </>
-          ) : null}
-          {isMouseHovered || (isDragabble && navigator.maxTouchPoints > 0) ? (
-            <TileMenu
-              peerID={peerId}
-              audioTrackID={audioTrack?.id || ''}
-              videoTrackID={track?.id || ''}
-              canMinimise={canMinimise}
-              enableSpotlightingPeer={enableSpotlightingPeer}
-            />
-          ) : null}
-
-          <TileConnection
-            hideLabel={hideParticipantNameOnTile}
-            name={label}
-            peerId={peerId}
-            width={width}
-            pinned={pinned}
-          />
-        </StyledVideoTile.Container>
-      ) : null}
-    </StyledVideoTile.Root>
-  );
-};
-
-const VideoTile = React.memo(Tile);
-
-export default VideoTile;

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

@@ -1,52 +0,0 @@
-import React from 'react';
-// Open issue with eslint-plugin-import https://github.com/import-js/eslint-plugin-import/issues/1810
-// eslint-disable-next-line
-import { HMSVirtualBackgroundTypes } from '@100mslive/hms-virtual-background/hmsvbplugin';
-import { Box } from '../../../Layout';
-import { Text } from '../../../Text';
-import { VBOption } from './VBOption';
-
-export const VBCollection = ({
-  options,
-  title,
-  activeBackground = '',
-}: {
-  options: {
-    title?: string;
-    icon?: React.JSX.Element;
-    onClick?: () => Promise<void>;
-    mediaURL?: string;
-    value: string | HMSVirtualBackgroundTypes;
-    supported?: boolean;
-  }[];
-  title: string;
-  activeBackground: string;
-}) => {
-  if (options.length === 0) {
-    return null;
-  }
-  return (
-    <Box css={{ mt: '$10' }}>
-      <Text variant="sm" css={{ color: '$on_surface_high', fontWeight: '$semiBold' }}>
-        {title}
-      </Text>
-      <Box css={{ py: '$4', display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: '$8' }}>
-        {options.map((option, index) =>
-          option.supported ? (
-            <VBOption.Root
-              key={option.value}
-              testid={option.value === HMSVirtualBackgroundTypes.IMAGE ? `virtual_bg_option-${index}` : option.value}
-              {...option}
-              isActive={activeBackground === option.value}
-            >
-              <VBOption.Icon>{option?.icon}</VBOption.Icon>
-              <VBOption.Title>{option?.title}</VBOption.Title>
-            </VBOption.Root>
-          ) : (
-            ''
-          ),
-        )}
-      </Box>
-    </Box>
-  );
-};

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

@@ -1,130 +0,0 @@
-// Open issue with eslint-plugin-import https://github.com/import-js/eslint-plugin-import/issues/1810
-// eslint-disable-next-line
-import { HMSVBPlugin, HMSVirtualBackgroundTypes } from '@100mslive/hms-virtual-background/hmsvbplugin';
-import { parsedUserAgent } from '@100mslive/react-sdk';
-import { isIOS, isSafari } from '../../common/constants';
-export class VBPlugin {
-  private hmsPlugin?: HMSVBPlugin;
-  private effectsPlugin?: any;
-
-  initialisePlugin = async (effectsSDKKey?: string, onInit?: () => void) => {
-    if (this.getVBObject()) {
-      return;
-    }
-    if (effectsSDKKey) {
-      try {
-        // eslint-disable-next-line
-        const effects = await import('@100mslive/hms-virtual-background/hmseffectsplugin');
-        this.effectsPlugin = new effects.HMSEffectsPlugin(effectsSDKKey, onInit);
-      } catch (error) {
-        console.error('Failed to initialise HMSEffectsPlugin:', error, 'Using HMSVBPlugin');
-        this.hmsPlugin = new HMSVBPlugin(HMSVirtualBackgroundTypes.NONE, HMSVirtualBackgroundTypes.NONE);
-      }
-    } else {
-      this.hmsPlugin = new HMSVBPlugin(HMSVirtualBackgroundTypes.NONE, HMSVirtualBackgroundTypes.NONE);
-    }
-  };
-
-  getBackground = () => {
-    if (this.effectsPlugin) {
-      return this.effectsPlugin?.getBackground();
-    } else {
-      const background = this.hmsPlugin?.getBackground();
-      // @ts-ignore
-      return background?.src || background;
-    }
-  };
-
-  getBlurAmount = () => {
-    if (this.effectsPlugin) {
-      return this.effectsPlugin.getBlurAmount();
-    } else {
-      // Treating HMS VB intensity as a fixed value
-      return this.hmsPlugin?.getBackground() === HMSVirtualBackgroundTypes.BLUR ? 1 : 0;
-    }
-  };
-
-  getVBObject = () => {
-    return this.effectsPlugin || this.hmsPlugin;
-  };
-
-  getName = () => {
-    return this.effectsPlugin ? this.effectsPlugin?.getName() : this.hmsPlugin?.getName();
-  };
-
-  setBlur = async (blurPower: number) => {
-    if (this.effectsPlugin) {
-      this.effectsPlugin?.setBlur(blurPower);
-    } else {
-      await this.hmsPlugin?.setBackground(HMSVirtualBackgroundTypes.BLUR, HMSVirtualBackgroundTypes.BLUR);
-    }
-  };
-
-  setBackground = async (mediaURL: string) => {
-    if (this.effectsPlugin) {
-      this.effectsPlugin?.setBackground(mediaURL);
-    } else {
-      const img = document.createElement('img');
-      let retries = 0;
-      const MAX_RETRIES = 3;
-      img.alt = 'VB';
-      img.src = mediaURL;
-      try {
-        await this.hmsPlugin?.setBackground(img, HMSVirtualBackgroundTypes.IMAGE);
-      } catch (e) {
-        console.error(e);
-        if (retries++ < MAX_RETRIES) {
-          await this.hmsPlugin?.setBackground(img, HMSVirtualBackgroundTypes.IMAGE);
-        }
-      }
-    }
-  };
-
-  setPreset = async (preset: 'quality' | 'balanced') => {
-    if (this.effectsPlugin) {
-      await this.effectsPlugin.setPreset(preset);
-    }
-  };
-
-  getPreset = () => {
-    return this.effectsPlugin?.getPreset() || '';
-  };
-
-  removeEffects = async () => {
-    if (this.effectsPlugin) {
-      this.effectsPlugin?.removeEffects();
-    } else {
-      await this.hmsPlugin?.setBackground(HMSVirtualBackgroundTypes.NONE, HMSVirtualBackgroundTypes.NONE);
-    }
-  };
-
-  reset = () => {
-    this.effectsPlugin = undefined;
-    this.hmsPlugin = undefined;
-  };
-
-  isBlurSupported = () => {
-    if ((isSafari || isIOS) && this.hmsPlugin) {
-      return false;
-    }
-
-    if (this.effectsPlugin) {
-      return true;
-    }
-
-    return false;
-  };
-
-  isEffectsSupported = () => {
-    if (!isSafari) {
-      return true;
-    }
-    const browserVersion = parsedUserAgent?.getBrowser()?.version || '16';
-    if (browserVersion && parseInt(browserVersion.split('.')[0]) < 17) {
-      return false;
-    }
-    return true;
-  };
-}
-
-export const VBHandler = new VBPlugin();

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

@@ -1,57 +0,0 @@
-import React from 'react';
-import { Box, Flex } from '../../../Layout';
-import { Text } from '../../../Text';
-
-const Root = ({
-  onClick,
-  mediaURL,
-  isActive,
-  children,
-  testid = '',
-}: {
-  onClick?: () => Promise<void>;
-  mediaURL?: string;
-  isActive: boolean;
-  children?: React.JSX.Element[];
-  testid: string;
-}) => (
-  <Flex
-    data-testid={testid}
-    direction="column"
-    align="center"
-    css={{
-      p: '$5',
-      borderRadius: '$1',
-      bg: '$surface_bright',
-      border: `4px solid ${isActive ? '$primary_default' : '$surface_dim'}`,
-      cursor: 'pointer',
-      '@media (hover:hover)': {
-        '&:hover': { border: '4px solid $primary_dim' },
-      },
-      ...(mediaURL ? { height: '$20', backgroundImage: `url("${mediaURL}")`, backgroundSize: 'cover' } : {}),
-    }}
-    onClick={async () => {
-      await onClick?.();
-    }}
-  >
-    {children}
-  </Flex>
-);
-
-const Title = ({ children }: { children?: string }) => {
-  return children ? (
-    <Text variant="xs" css={{ color: '$on_surface_medium' }}>
-      {children}
-    </Text>
-  ) : null;
-};
-
-const Icon = ({ children }: { children?: React.JSX.Element }) => {
-  return children ? <Box css={{ color: '$on_surface_high' }}>{children}</Box> : null;
-};
-
-export const VBOption = {
-  Root,
-  Title,
-  Icon,
-};

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

@@ -1,252 +0,0 @@
-import React, { useEffect, useRef, useState } from 'react';
-import { useMedia } from 'react-use';
-import {
-  HMSMediaStreamPlugin,
-  selectAppData,
-  selectEffectsKey,
-  selectIsEffectsEnabled,
-  selectLocalPeerRole,
-} from '@100mslive/hms-video-store';
-// Open issue with eslint-plugin-import https://github.com/import-js/eslint-plugin-import/issues/1810
-// eslint-disable-next-line
-import { HMSVBPlugin, HMSVirtualBackgroundTypes } from '@100mslive/hms-virtual-background/hmsvbplugin';
-import { VirtualBackgroundMedia } from '@100mslive/types-prebuilt/elements/virtual_background';
-import {
-  HMSRoomState,
-  selectIsLargeRoom,
-  selectIsLocalVideoEnabled,
-  selectIsLocalVideoPluginPresent,
-  selectLocalPeer,
-  selectRoomState,
-  selectVideoTrackByID,
-  useHMSActions,
-  useHMSStore,
-} from '@100mslive/react-sdk';
-import { BlurPersonHighIcon, CrossCircleIcon, CrossIcon } from '@100mslive/react-icons';
-import { Box, config as cssConfig, Flex, Loading, Slider, Video } from '../../../index';
-import { Text } from '../../../Text';
-import { VBCollection } from './VBCollection';
-import { VBHandler } from './VBHandler';
-// @ts-ignore
-import { useSidepaneToggle } from '../AppData/useSidepane';
-import { useSidepaneResetOnLayoutUpdate } from '../AppData/useSidepaneResetOnLayoutUpdate';
-// @ts-ignore
-import { useSetAppDataByKey, useUISettings } from '../AppData/useUISettings';
-import { APP_DATA, SIDE_PANE_OPTIONS, UI_SETTINGS } from '../../common/constants';
-
-const iconDims = { height: '40px', width: '40px' };
-
-export const VBPicker = ({ backgroundMedia = [] }: { backgroundMedia: VirtualBackgroundMedia[] }) => {
-  const toggleVB = useSidepaneToggle(SIDE_PANE_OPTIONS.VB);
-  const hmsActions = useHMSActions();
-  const localPeer = useHMSStore(selectLocalPeer);
-  const role = useHMSStore(selectLocalPeerRole);
-  const isVideoOn = useHMSStore(selectIsLocalVideoEnabled);
-  const mirrorLocalVideo = useUISettings(UI_SETTINGS.mirrorLocalVideo);
-  const trackSelector = selectVideoTrackByID(localPeer?.videoTrack);
-  const track = useHMSStore(trackSelector);
-  const [blurAmount, setBlurAmount] = useState(VBHandler.getBlurAmount() || 0.5);
-  const roomState = useHMSStore(selectRoomState);
-  const isLargeRoom = useHMSStore(selectIsLargeRoom);
-  const isEffectsSupported = VBHandler.isEffectsSupported();
-  const isEffectsEnabled = useHMSStore(selectIsEffectsEnabled);
-  const effectsKey = useHMSStore(selectEffectsKey);
-  const isMobile = useMedia(cssConfig.media.md);
-  const [loadingEffects, setLoadingEffects] = useSetAppDataByKey(APP_DATA.loadingEffects);
-  const isPluginAdded = useHMSStore(selectIsLocalVideoPluginPresent(VBHandler?.getName() || ''));
-  const background = useHMSStore(selectAppData(APP_DATA.background));
-  const mediaList = backgroundMedia.map((media: VirtualBackgroundMedia) => media.url || '');
-  const pluginLoadingRef = useRef(false);
-  const isBlurSupported = VBHandler?.isBlurSupported();
-
-  const inPreview = roomState === HMSRoomState.Preview;
-  // Hidden in preview as the effect will be visible in the preview tile
-  const showVideoTile = isVideoOn && isLargeRoom && !inPreview;
-
-  useEffect(() => {
-    const addHMSVBPlugin = async () => {
-      setLoadingEffects(false);
-      if (!role) {
-        return;
-      }
-      await VBHandler.initialisePlugin();
-      await hmsActions.addPluginToVideoTrack(
-        VBHandler.getVBObject() as HMSVBPlugin,
-        Math.floor(role.publishParams.video.frameRate / 2),
-      );
-    };
-    const initializeVirtualBackground = async () => {
-      if (!track?.id || pluginLoadingRef.current || isPluginAdded) {
-        return;
-      }
-
-      try {
-        pluginLoadingRef.current = true;
-        if (isEffectsEnabled && isEffectsSupported && effectsKey) {
-          setLoadingEffects(true);
-          await VBHandler.initialisePlugin(effectsKey, () => {
-            setLoadingEffects(false);
-          });
-          const vbInstance = VBHandler.getVBObject();
-          if (vbInstance.getName() === 'HMSEffects') {
-            hmsActions.addPluginsToVideoStream([VBHandler.getVBObject() as HMSMediaStreamPlugin]);
-          } else {
-            await addHMSVBPlugin();
-          }
-        } else {
-          await addHMSVBPlugin();
-        }
-
-        const handleDefaultBackground = async () => {
-          switch (background) {
-            case HMSVirtualBackgroundTypes.NONE:
-              break;
-            case HMSVirtualBackgroundTypes.BLUR:
-              await VBHandler.setBlur(blurAmount);
-              break;
-            default:
-              await VBHandler.setBackground(background);
-          }
-        };
-
-        await handleDefaultBackground();
-      } catch (error) {
-        console.error('Error initializing virtual background:', error);
-        setLoadingEffects(false);
-      }
-    };
-
-    initializeVirtualBackground();
-  }, [
-    hmsActions,
-    role,
-    isPluginAdded,
-    isEffectsEnabled,
-    isEffectsSupported,
-    effectsKey,
-    track?.id,
-    background,
-    blurAmount,
-    setLoadingEffects,
-  ]);
-
-  useEffect(() => {
-    if (!isVideoOn) {
-      toggleVB();
-    }
-    return () => setLoadingEffects(false);
-  }, [isVideoOn, setLoadingEffects, toggleVB]);
-
-  useSidepaneResetOnLayoutUpdate('virtual_background', SIDE_PANE_OPTIONS.VB);
-
-  return (
-    <Flex css={{ pr: '$6', size: '100%' }} direction="column">
-      <Flex align="center" justify="between" css={{ w: '100%', background: '$surface_dim', pb: '$4' }}>
-        <Text variant="h6" css={{ color: '$on_surface_high', display: 'flex', alignItems: 'center' }}>
-          Virtual Background {isMobile && loadingEffects ? <Loading size={18} style={{ marginLeft: '0.5rem' }} /> : ''}
-        </Text>
-        <Box
-          css={{ color: '$on_surface_high', '&:hover': { color: '$on_surface_medium' }, cursor: 'pointer' }}
-          onClick={toggleVB}
-        >
-          <CrossIcon />
-        </Box>
-      </Flex>
-
-      {showVideoTile ? (
-        <Video
-          mirror={track?.facingMode !== 'environment' && mirrorLocalVideo}
-          trackId={localPeer?.videoTrack}
-          data-testid="preview_tile"
-          css={{ width: '100%', height: '16rem' }}
-        />
-      ) : null}
-      <Box
-        css={{
-          mt: '$4',
-          overflowY: 'auto',
-          flex: '1 1 0',
-          mr: '-$10',
-          pr: '$10',
-        }}
-      >
-        <VBCollection
-          title="Effects"
-          options={[
-            {
-              title: 'No effect',
-              icon: <CrossCircleIcon style={iconDims} />,
-              value: HMSVirtualBackgroundTypes.NONE,
-              onClick: async () => {
-                await VBHandler.removeEffects();
-                hmsActions.setAppData(APP_DATA.background, HMSVirtualBackgroundTypes.NONE);
-                if (isMobile) {
-                  toggleVB();
-                }
-              },
-              supported: true,
-            },
-            {
-              title: 'Blur',
-              icon: <BlurPersonHighIcon style={iconDims} />,
-              value: HMSVirtualBackgroundTypes.BLUR,
-              onClick: async () => {
-                await VBHandler?.setBlur(blurAmount);
-                hmsActions.setAppData(APP_DATA.background, HMSVirtualBackgroundTypes.BLUR);
-              },
-              supported: isBlurSupported,
-            },
-          ]}
-          activeBackground={background}
-        />
-
-        {/* Slider */}
-        <Flex direction="column" css={{ w: '100%', gap: '$8', mt: '$8' }}>
-          {background === HMSVirtualBackgroundTypes.BLUR && isBlurSupported ? (
-            <Box>
-              <Text variant="sm" css={{ color: '$on_surface_high', fontWeight: '$semiBold', mb: '$4' }}>
-                Blur intensity
-              </Text>
-              <Flex css={{ w: '100%', justifyContent: 'space-between', alignItems: 'center', gap: '$4' }}>
-                <Text variant="caption" css={{ fontWeight: '$medium', color: '$on_surface_medium' }}>
-                  Low
-                </Text>
-                <Slider
-                  showTooltip={false}
-                  value={[blurAmount]}
-                  onValueChange={async e => {
-                    setBlurAmount(e[0]);
-                    await VBHandler.setBlur(e[0]);
-                  }}
-                  step={0.1}
-                  min={0.1}
-                  max={1}
-                />
-                <Text variant="caption" css={{ fontWeight: '$medium', color: '$on_surface_medium' }}>
-                  High
-                </Text>
-              </Flex>
-            </Box>
-          ) : null}
-        </Flex>
-
-        <VBCollection
-          title="Backgrounds"
-          options={mediaList.map(mediaURL => ({
-            mediaURL,
-            value: mediaURL,
-            onClick: async () => {
-              await VBHandler?.setBackground(mediaURL);
-              hmsActions.setAppData(APP_DATA.background, mediaURL);
-              if (isMobile) {
-                toggleVB();
-              }
-            },
-            supported: true,
-          }))}
-          activeBackground={background}
-        />
-      </Box>
-    </Flex>
-  );
-};