@100mslive/roomkit-react 0.3.22-alpha.0 → 0.3.22-alpha.2

package/dist/VBPicker-TQLIL3NC.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"]
+}

package/dist/Video/Video.d.ts

@@ -282,167 +282,73 @@ export declare const StyledVideo: import("@stitches/react/types/styled-component
     transition: "transitions";
     zIndex: "zIndices";
 }, {
-    bg: (value: {
-        readonly [$$PropertyValue]: "backgroundColor";
-    }) => {
-        backgroundColor: {
-            readonly [$$PropertyValue]: "backgroundColor";
-        };
+    bg: (value: import("@stitches/react/types/css-util").WithPropertyValue<"backgroundColor">) => {
+        backgroundColor: import("@stitches/react/types/css-util").WithPropertyValue<"backgroundColor">;
     };
-    c: (value: {
-        readonly [$$PropertyValue]: "color";
-    }) => {
-        color: {
-            readonly [$$PropertyValue]: "color";
-        };
+    c: (value: import("@stitches/react/types/css-util").WithPropertyValue<"color">) => {
+        color: import("@stitches/react/types/css-util").WithPropertyValue<"color">;
     };
-    r: (value: {
-        readonly [$$ScaleValue]: "radii";
-    }) => {
-        borderRadius: {
-            readonly [$$ScaleValue]: "radii";
-        };
+    r: (value: import("@stitches/react/types/css-util").WithScaleValue<"radii">) => {
+        borderRadius: import("@stitches/react/types/css-util").WithScaleValue<"radii">;
     };
-    fs: (value: string | number | {
-        readonly [$$PropertyValue]: "fontSize";
-    }) => {
-        fontSize: string | number | {
-            readonly [$$PropertyValue]: "fontSize";
-        };
+    fs: (value: string | number | import("@stitches/react/types/css-util").WithPropertyValue<"fontSize">) => {
+        fontSize: string | number | import("@stitches/react/types/css-util").WithPropertyValue<"fontSize">;
     };
-    size: (value: string | number | {
-        readonly [$$ScaleValue]: "space";
-    }) => {
-        height: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
-        width: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
+    size: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
+        height: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+        width: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
     };
-    w: (value: string | number | {
-        readonly [$$ScaleValue]: "space";
-    }) => {
-        width: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
+    w: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
+        width: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
     };
-    h: (value: string | number | {
-        readonly [$$ScaleValue]: "space";
-    }) => {
-        height: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
+    h: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
+        height: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
     };
-    p: (value: string | number | {
-        readonly [$$ScaleValue]: "space";
-    }) => {
-        padding: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
+    p: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
+        padding: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
     };
-    pt: (value: string | number | {
-        readonly [$$ScaleValue]: "space";
-    }) => {
-        paddingTop: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
+    pt: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
+        paddingTop: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
     };
-    pr: (value: string | number | {
-        readonly [$$ScaleValue]: "space";
-    }) => {
-        paddingRight: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
+    pr: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
+        paddingRight: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
     };
-    pb: (value: string | number | {
-        readonly [$$ScaleValue]: "space";
-    }) => {
-        paddingBottom: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
+    pb: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
+        paddingBottom: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
     };
-    pl: (value: string | number | {
-        readonly [$$ScaleValue]: "space";
-    }) => {
-        paddingLeft: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
+    pl: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
+        paddingLeft: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
     };
-    px: (value: string | number | {
-        readonly [$$ScaleValue]: "space";
-    }) => {
-        paddingLeft: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
-        paddingRight: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
+    px: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
+        paddingLeft: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+        paddingRight: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
     };
-    py: (value: string | number | {
-        readonly [$$ScaleValue]: "space";
-    }) => {
-        paddingTop: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
-        paddingBottom: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
+    py: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
+        paddingTop: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+        paddingBottom: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
     };
-    m: (value: string | number | {
-        readonly [$$ScaleValue]: "space";
-    }) => {
-        margin: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
+    m: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
+        margin: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
     };
-    mt: (value: string | number | {
-        readonly [$$ScaleValue]: "space";
-    }) => {
-        marginTop: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
+    mt: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
+        marginTop: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
     };
-    mr: (value: string | number | {
-        readonly [$$ScaleValue]: "space";
-    }) => {
-        marginRight: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
+    mr: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
+        marginRight: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
     };
-    mb: (value: string | number | {
-        readonly [$$ScaleValue]: "space";
-    }) => {
-        marginBottom: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
+    mb: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
+        marginBottom: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
     };
-    ml: (value: string | number | {
-        readonly [$$ScaleValue]: "space";
-    }) => {
-        marginLeft: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
+    ml: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
+        marginLeft: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
     };
-    mx: (value: string | number | {
-        readonly [$$ScaleValue]: "space";
-    }) => {
-        marginLeft: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
-        marginRight: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
+    mx: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
+        marginLeft: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+        marginRight: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
     };
-    my: (value: string | number | {
-        readonly [$$ScaleValue]: "space";
-    }) => {
-        marginTop: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
-        marginBottom: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
+    my: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
+        marginTop: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+        marginBottom: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
     };
 }>>;
 declare type StyledProps = VariantProps<typeof StyledVideo> & React.ComponentProps<typeof StyledVideo>;