@100mslive/roomkit-react 0.3.23-alpha.0 → 0.3.24-alpha.0

package/dist/VBPicker-2CQ3IIO7.js

@@ -0,0 +1,322 @@
+import {
+  useSidepaneResetOnLayoutUpdate
+} from "./chunk-LXJGCRKM.js";
+import {
+  Dm,
+  Loading,
+  Nm,
+  Slider,
+  VBHandler,
+  Video,
+  Ym,
+  at,
+  useSidepaneToggle
+} from "./chunk-MG3UGW66.js";
+import {
+  Text
+} from "./chunk-MUKUP7JU.js";
+import "./chunk-DANANDDE.js";
+import {
+  Box,
+  Flex
+} from "./chunk-GOXRTCTY.js";
+import {
+  useSetAppDataByKey,
+  useUISettings
+} from "./chunk-BGSYLCVD.js";
+import {
+  APP_DATA,
+  SIDE_PANE_OPTIONS,
+  UI_SETTINGS,
+  __async,
+  __spreadProps,
+  __spreadValues,
+  config,
+  init_define_process_env
+} from "./chunk-GLAJUP3O.js";
+
+// src/Prebuilt/components/VirtualBackground/VBPicker.tsx
+init_define_process_env();
+import React3, { useEffect, useRef, useState } from "react";
+import { useMedia } from "react-use";
+import { HMSVirtualBackgroundTypes as HMSVirtualBackgroundTypes2 } from "@100mslive/hms-virtual-background/hmsvbplugin";
+import {
+  HMSRoomState,
+  selectIsLargeRoom,
+  selectIsLocalVideoEnabled,
+  selectIsLocalVideoPluginPresent,
+  selectLocalPeer,
+  selectRoomState,
+  selectVideoTrackByID,
+  useHMSActions,
+  useHMSStore
+} from "@100mslive/react-sdk";
+import { BlurPersonHighIcon, CrossCircleIcon, CrossIcon } from "@100mslive/react-icons";
+
+// src/Prebuilt/components/VirtualBackground/VBCollection.tsx
+init_define_process_env();
+import React2 from "react";
+import { HMSVirtualBackgroundTypes } from "@100mslive/hms-virtual-background/hmsvbplugin";
+
+// src/Prebuilt/components/VirtualBackground/VBOption.tsx
+init_define_process_env();
+import React from "react";
+var Root = ({
+  onClick,
+  mediaURL,
+  isActive,
+  children,
+  testid = ""
+}) => /* @__PURE__ */ React.createElement(
+  Flex,
+  {
+    "data-testid": testid,
+    direction: "column",
+    align: "center",
+    css: __spreadValues({
+      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(void 0, null, function* () {
+      yield onClick == null ? void 0 : onClick();
+    })
+  },
+  children
+);
+var Title = ({ children }) => {
+  return children ? /* @__PURE__ */ React.createElement(Text, { variant: "xs", css: { color: "$on_surface_medium" } }, children) : null;
+};
+var Icon = ({ children }) => {
+  return children ? /* @__PURE__ */ React.createElement(Box, { css: { color: "$on_surface_high" } }, children) : null;
+};
+var VBOption = {
+  Root,
+  Title,
+  Icon
+};
+
+// src/Prebuilt/components/VirtualBackground/VBCollection.tsx
+var VBCollection = ({
+  options,
+  title,
+  activeBackground = ""
+}) => {
+  if (options.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ React2.createElement(Box, { css: { mt: "$10" } }, /* @__PURE__ */ React2.createElement(Text, { variant: "sm", css: { color: "$on_surface_high", fontWeight: "$semiBold" } }, title), /* @__PURE__ */ React2.createElement(Box, { css: { py: "$4", display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: "$8" } }, options.map(
+    (option, index) => option.supported ? /* @__PURE__ */ React2.createElement(
+      VBOption.Root,
+      __spreadProps(__spreadValues({
+        key: option.value,
+        testid: option.value === HMSVirtualBackgroundTypes.IMAGE ? `virtual_bg_option-${index}` : option.value
+      }, option), {
+        isActive: activeBackground === option.value
+      }),
+      /* @__PURE__ */ React2.createElement(VBOption.Icon, null, option == null ? void 0 : option.icon),
+      /* @__PURE__ */ React2.createElement(VBOption.Title, null, option == null ? void 0 : option.title)
+    ) : ""
+  )));
+};
+
+// src/Prebuilt/components/VirtualBackground/VBPicker.tsx
+var iconDims = { height: "40px", width: "40px" };
+var VBPicker = ({ backgroundMedia = [] }) => {
+  var _a, _b;
+  const toggleVB = useSidepaneToggle(SIDE_PANE_OPTIONS.VB);
+  const hmsActions = useHMSActions();
+  const localPeer = useHMSStore(selectLocalPeer);
+  const role = useHMSStore(at);
+  const isVideoOn = useHMSStore(selectIsLocalVideoEnabled);
+  const mirrorLocalVideo = useUISettings(UI_SETTINGS.mirrorLocalVideo);
+  const trackSelector = selectVideoTrackByID(localPeer == null ? void 0 : 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(Dm);
+  const effectsKey = useHMSStore(Nm);
+  const isMobile = useMedia(config.media.md);
+  const [loadingEffects, setLoadingEffects] = useSetAppDataByKey(APP_DATA.loadingEffects);
+  const isPluginAdded = useHMSStore(selectIsLocalVideoPluginPresent(((_a = VBHandler) == null ? void 0 : _a.getName()) || ""));
+  const background = useHMSStore(Ym(APP_DATA.background));
+  const mediaList = backgroundMedia.map((media) => media.url || "");
+  const pluginLoadingRef = useRef(false);
+  const isBlurSupported = (_b = VBHandler) == null ? void 0 : _b.isBlurSupported();
+  const inPreview = roomState === HMSRoomState.Preview;
+  const showVideoTile = isVideoOn && isLargeRoom && !inPreview;
+  useEffect(() => {
+    const addHMSVBPlugin = () => __async(void 0, null, function* () {
+      setLoadingEffects(false);
+      if (!role) {
+        return;
+      }
+      yield VBHandler.initialisePlugin();
+      yield hmsActions.addPluginToVideoTrack(
+        VBHandler.getVBObject(),
+        Math.floor(role.publishParams.video.frameRate / 2)
+      );
+    });
+    const initializeVirtualBackground = () => __async(void 0, null, function* () {
+      if (!(track == null ? void 0 : track.id) || pluginLoadingRef.current || isPluginAdded) {
+        return;
+      }
+      try {
+        pluginLoadingRef.current = true;
+        if (isEffectsEnabled && isEffectsSupported && effectsKey) {
+          setLoadingEffects(true);
+          yield VBHandler.initialisePlugin(effectsKey, () => {
+            setLoadingEffects(false);
+          });
+          const vbInstance = VBHandler.getVBObject();
+          if (vbInstance.getName() === "HMSEffects") {
+            hmsActions.addPluginsToVideoStream([VBHandler.getVBObject()]);
+          } else {
+            yield addHMSVBPlugin();
+          }
+        } else {
+          yield addHMSVBPlugin();
+        }
+        const handleDefaultBackground = () => __async(void 0, null, function* () {
+          switch (background) {
+            case HMSVirtualBackgroundTypes2.NONE:
+              break;
+            case HMSVirtualBackgroundTypes2.BLUR:
+              yield VBHandler.setBlur(blurAmount);
+              break;
+            default:
+              yield VBHandler.setBackground(background);
+          }
+        });
+        yield handleDefaultBackground();
+      } catch (error) {
+        console.error("Error initializing virtual background:", error);
+        setLoadingEffects(false);
+      }
+    });
+    initializeVirtualBackground();
+  }, [
+    hmsActions,
+    role,
+    isPluginAdded,
+    isEffectsEnabled,
+    isEffectsSupported,
+    effectsKey,
+    track == null ? void 0 : track.id,
+    background,
+    blurAmount,
+    setLoadingEffects
+  ]);
+  useEffect(() => {
+    if (!isVideoOn) {
+      toggleVB();
+    }
+    return () => setLoadingEffects(false);
+  }, [isVideoOn, setLoadingEffects, toggleVB]);
+  useSidepaneResetOnLayoutUpdate("virtual_background", SIDE_PANE_OPTIONS.VB);
+  return /* @__PURE__ */ React3.createElement(Flex, { css: { pr: "$6", size: "100%" }, direction: "column" }, /* @__PURE__ */ React3.createElement(Flex, { align: "center", justify: "between", css: { w: "100%", background: "$surface_dim", pb: "$4" } }, /* @__PURE__ */ React3.createElement(Text, { variant: "h6", css: { color: "$on_surface_high", display: "flex", alignItems: "center" } }, "Virtual Background ", isMobile && loadingEffects ? /* @__PURE__ */ React3.createElement(Loading, { size: 18, style: { marginLeft: "0.5rem" } }) : ""), /* @__PURE__ */ React3.createElement(
+    Box,
+    {
+      css: { color: "$on_surface_high", "&:hover": { color: "$on_surface_medium" }, cursor: "pointer" },
+      onClick: toggleVB
+    },
+    /* @__PURE__ */ React3.createElement(CrossIcon, null)
+  )), showVideoTile ? /* @__PURE__ */ React3.createElement(
+    Video,
+    {
+      mirror: (track == null ? void 0 : track.facingMode) !== "environment" && mirrorLocalVideo,
+      trackId: localPeer == null ? void 0 : localPeer.videoTrack,
+      "data-testid": "preview_tile",
+      css: { width: "100%", height: "16rem" }
+    }
+  ) : null, /* @__PURE__ */ React3.createElement(
+    Box,
+    {
+      css: {
+        mt: "$4",
+        overflowY: "auto",
+        flex: "1 1 0",
+        mr: "-$10",
+        pr: "$10"
+      }
+    },
+    /* @__PURE__ */ React3.createElement(
+      VBCollection,
+      {
+        title: "Effects",
+        options: [
+          {
+            title: "No effect",
+            icon: /* @__PURE__ */ React3.createElement(CrossCircleIcon, { style: iconDims }),
+            value: HMSVirtualBackgroundTypes2.NONE,
+            onClick: () => __async(void 0, null, function* () {
+              yield VBHandler.removeEffects();
+              hmsActions.setAppData(APP_DATA.background, HMSVirtualBackgroundTypes2.NONE);
+              if (isMobile) {
+                toggleVB();
+              }
+            }),
+            supported: true
+          },
+          {
+            title: "Blur",
+            icon: /* @__PURE__ */ React3.createElement(BlurPersonHighIcon, { style: iconDims }),
+            value: HMSVirtualBackgroundTypes2.BLUR,
+            onClick: () => __async(void 0, null, function* () {
+              var _a2;
+              yield (_a2 = VBHandler) == null ? void 0 : _a2.setBlur(blurAmount);
+              hmsActions.setAppData(APP_DATA.background, HMSVirtualBackgroundTypes2.BLUR);
+            }),
+            supported: isBlurSupported
+          }
+        ],
+        activeBackground: background
+      }
+    ),
+    /* @__PURE__ */ React3.createElement(Flex, { direction: "column", css: { w: "100%", gap: "$8", mt: "$8" } }, background === HMSVirtualBackgroundTypes2.BLUR && isBlurSupported ? /* @__PURE__ */ React3.createElement(Box, null, /* @__PURE__ */ React3.createElement(Text, { variant: "sm", css: { color: "$on_surface_high", fontWeight: "$semiBold", mb: "$4" } }, "Blur intensity"), /* @__PURE__ */ React3.createElement(Flex, { css: { w: "100%", justifyContent: "space-between", alignItems: "center", gap: "$4" } }, /* @__PURE__ */ React3.createElement(Text, { variant: "caption", css: { fontWeight: "$medium", color: "$on_surface_medium" } }, "Low"), /* @__PURE__ */ React3.createElement(
+      Slider,
+      {
+        showTooltip: false,
+        value: [blurAmount],
+        onValueChange: (e) => __async(void 0, null, function* () {
+          setBlurAmount(e[0]);
+          yield VBHandler.setBlur(e[0]);
+        }),
+        step: 0.1,
+        min: 0.1,
+        max: 1
+      }
+    ), /* @__PURE__ */ React3.createElement(Text, { variant: "caption", css: { fontWeight: "$medium", color: "$on_surface_medium" } }, "High"))) : null),
+    /* @__PURE__ */ React3.createElement(
+      VBCollection,
+      {
+        title: "Backgrounds",
+        options: mediaList.map((mediaURL) => ({
+          mediaURL,
+          value: mediaURL,
+          onClick: () => __async(void 0, null, function* () {
+            var _a2;
+            yield (_a2 = VBHandler) == null ? void 0 : _a2.setBackground(mediaURL);
+            hmsActions.setAppData(APP_DATA.background, mediaURL);
+            if (isMobile) {
+              toggleVB();
+            }
+          }),
+          supported: true
+        })),
+        activeBackground: background
+      }
+    )
+  ));
+};
+export {
+  VBPicker
+};
+//# sourceMappingURL=VBPicker-2CQ3IIO7.js.map

package/dist/VBPicker-2CQ3IIO7.js.map

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