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

package/src/Prebuilt/components/TileMenu/TileMenuContent.tsx

@@ -1,7 +1,7 @@
 import React, { Fragment } from 'react';
 import { useMedia } from 'react-use';
-import { HMSException } from '@100mslive/hms-video';
 import {
+  HMSException,
   HMSSimulcastLayerDefinition,
   HMSTrackID,
   HMSVideoTrack,

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

@@ -7,7 +7,6 @@ import { VBOption } from './VBOption';
 export const VBCollection = ({
   options,
   title,
-  activeBackgroundType = HMSVirtualBackgroundTypes.NONE,
   activeBackground = '',
 }: {
   options: {
@@ -15,11 +14,10 @@ export const VBCollection = ({
     icon?: React.JSX.Element;
     onClick?: () => Promise<void>;
     mediaURL?: string;
-    type: string;
+    value: string | HMSVirtualBackgroundTypes;
   }[];
   title: string;
-  activeBackground: HTMLImageElement | string;
-  activeBackgroundType: HMSVirtualBackgroundTypes;
+  activeBackground: string;
 }) => {
   if (options.length === 0) {
     return null;
@@ -32,14 +30,10 @@ export const VBCollection = ({
       <Box css={{ py: '$4', display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: '$8' }}>
         {options.map((option, index) => (
           <VBOption.Root
-            testid={option.type === HMSVirtualBackgroundTypes.IMAGE ? `virtual_bg_option-${index}` : option.type}
-            key={option?.mediaURL || option?.title}
+            key={option.value}
+            testid={option.value === HMSVirtualBackgroundTypes.IMAGE ? `virtual_bg_option-${index}` : option.value}
             {...option}
-            isActive={
-              ([HMSVirtualBackgroundTypes.NONE, HMSVirtualBackgroundTypes.BLUR].includes(activeBackgroundType) &&
-                option.type === activeBackgroundType) ||
-              activeBackground === option?.mediaURL
-            }
+            isActive={activeBackground === option.value}
           >
             <VBOption.Icon>{option?.icon}</VBOption.Icon>
             <VBOption.Title>{option?.title}</VBOption.Title>

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

@@ -0,0 +1,77 @@
+import { HMSEffectsPlugin, HMSVBPlugin, HMSVirtualBackgroundTypes } from '@100mslive/hms-virtual-background';
+
+export class VBPlugin {
+  private hmsPlugin?: HMSVBPlugin;
+  private effectsPlugin?: HMSEffectsPlugin | undefined;
+
+  initialisePlugin = (effectsSDKKey?: string) => {
+    if (this.getVBObject()) {
+      return;
+    }
+    if (effectsSDKKey) {
+      this.effectsPlugin = new HMSEffectsPlugin(effectsSDKKey);
+    } else {
+      this.hmsPlugin = new HMSVBPlugin(HMSVirtualBackgroundTypes.NONE, HMSVirtualBackgroundTypes.NONE);
+    }
+  };
+
+  getBackground = () => {
+    if (this.effectsPlugin) {
+      return this.effectsPlugin?.getBackground();
+    } else {
+      // @ts-ignore
+      return this.hmsPlugin?.background?.src || this.hmsPlugin?.background;
+    }
+  };
+
+  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);
+        }
+      }
+    }
+  };
+
+  removeEffects = async () => {
+    if (this.effectsPlugin) {
+      this.effectsPlugin?.removeEffects();
+    } else {
+      await this.hmsPlugin?.setBackground(HMSVirtualBackgroundTypes.NONE, HMSVirtualBackgroundTypes.NONE);
+    }
+  };
+
+  reset = () => {
+    this.effectsPlugin = undefined;
+    this.hmsPlugin = undefined;
+  };
+}
+
+export const VBHandler = new VBPlugin();

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

@@ -1,13 +1,13 @@
-import React, { useEffect, useRef, useState } from 'react';
-import { HMSVirtualBackgroundTypes } from '@100mslive/hms-virtual-background';
+import React, { useEffect, useState } from 'react';
+import { selectEffectsKey, selectIsEffectsEnabled, selectLocalPeerRole } from '@100mslive/hms-video-store';
+import { HMSEffectsPlugin, HMSVBPlugin, HMSVirtualBackgroundTypes } from '@100mslive/hms-virtual-background';
 import { VirtualBackgroundMedia } from '@100mslive/types-prebuilt/elements/virtual_background';
 import {
   HMSRoomState,
   selectIsLargeRoom,
   selectIsLocalVideoEnabled,
+  selectIsLocalVideoPluginPresent,
   selectLocalPeer,
-  selectLocalPeerRole,
-  selectLocalVideoTrackID,
   selectRoomState,
   selectVideoTrackByID,
   useHMSActions,
@@ -17,96 +17,61 @@ import { BlurPersonHighIcon, CloseIcon, CrossCircleIcon } from '@100mslive/react
 import { Box, Flex, Video } from '../../../index';
 import { Text } from '../../../Text';
 import { VBCollection } from './VBCollection';
+import { VBHandler } from './VBHandler';
 // @ts-ignore
 import { useSidepaneToggle } from '../AppData/useSidepane';
 // @ts-ignore
 import { useUISettings } from '../AppData/useUISettings';
-// @ts-ignore
 import { SIDE_PANE_OPTIONS, UI_SETTINGS } from '../../common/constants';
-import { defaultMedia, vbPlugin } from './constants';
+import { defaultMedia } from './constants';
 
 const iconDims = { height: '40px', width: '40px' };
-const MAX_RETRIES = 2;
 
 export const VBPicker = ({ backgroundMedia = [] }: { backgroundMedia: VirtualBackgroundMedia[] }) => {
   const toggleVB = useSidepaneToggle(SIDE_PANE_OPTIONS.VB);
   const hmsActions = useHMSActions();
-  const role = useHMSStore(selectLocalPeerRole);
-  const [isVBSupported, setIsVBSupported] = useState(false);
-  const localPeerVideoTrackID = useHMSStore(selectLocalVideoTrackID);
   const localPeer = useHMSStore(selectLocalPeer);
-  // @ts-ignore
-  const [background, setBackground] = useState(vbPlugin.background);
-  // @ts-ignore
-  const [backgroundType, setBackgroundType] = useState(vbPlugin.backgroundType);
+  const role = useHMSStore(selectLocalPeerRole);
   const isVideoOn = useHMSStore(selectIsLocalVideoEnabled);
   const mirrorLocalVideo = useUISettings(UI_SETTINGS.mirrorLocalVideo);
   const trackSelector = selectVideoTrackByID(localPeer?.videoTrack);
   const track = useHMSStore(trackSelector);
   const roomState = useHMSStore(selectRoomState);
   const isLargeRoom = useHMSStore(selectIsLargeRoom);
-  const addedPluginToVideoTrack = useRef(false);
+  const isEffectsEnabled = useHMSStore(selectIsEffectsEnabled);
+  const effectsKey = useHMSStore(selectEffectsKey);
+  const isPluginAdded = useHMSStore(selectIsLocalVideoPluginPresent(VBHandler?.getName() || ''));
+  const [activeBackground, setActiveBackground] = useState<string | HMSVirtualBackgroundTypes>(
+    (VBHandler?.getBackground() as string | HMSVirtualBackgroundTypes) || HMSVirtualBackgroundTypes.NONE,
+  );
   const mediaList = backgroundMedia.length
-    ? backgroundMedia.map((media: VirtualBackgroundMedia) => media?.url)
+    ? 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
+  // Hidden in preview as the effect will be visible in the preview tile
   const showVideoTile = isVideoOn && isLargeRoom && !inPreview;
 
-  const clearVBState = () => {
-    setBackground(HMSVirtualBackgroundTypes.NONE);
-    setBackgroundType(HMSVirtualBackgroundTypes.NONE);
-  };
-
   useEffect(() => {
-    if (!localPeerVideoTrackID) {
+    if (!track?.id) {
       return;
     }
-
-    //check support of plugin
-    if (vbPlugin) {
-      const pluginSupport = hmsActions.validateVideoPluginSupport(vbPlugin);
-      setIsVBSupported(pluginSupport.isSupported);
-    }
-  }, [hmsActions, localPeerVideoTrackID]);
-
-  async function disableEffects() {
-    if (vbPlugin) {
-      vbPlugin.setBackground(HMSVirtualBackgroundTypes.NONE, HMSVirtualBackgroundTypes.NONE);
-      clearVBState();
-    }
-  }
-
-  async function addPlugin({ mediaURL = '', blurPower = 0 }) {
-    let retries = 0;
-    try {
-      if (mediaURL) {
-        const img = document.createElement('img');
-        img.alt = 'VB';
-        img.src = mediaURL;
-        try {
-          await vbPlugin.setBackground(img, HMSVirtualBackgroundTypes.IMAGE);
-        } catch (e) {
-          console.error(e);
-          if (retries++ < MAX_RETRIES) {
-            await vbPlugin.setBackground(img, HMSVirtualBackgroundTypes.IMAGE);
+    if (!isPluginAdded) {
+      let vbObject = VBHandler.getVBObject();
+      if (!vbObject) {
+        VBHandler.initialisePlugin(isEffectsEnabled && effectsKey ? effectsKey : '');
+        vbObject = VBHandler.getVBObject();
+        if (isEffectsEnabled && effectsKey) {
+          hmsActions.addPluginsToVideoStream([vbObject as HMSEffectsPlugin]);
+        } else {
+          if (!role) {
+            return;
           }
+          hmsActions.addPluginToVideoTrack(vbObject as HMSVBPlugin, Math.floor(role.publishParams.video.frameRate / 2));
         }
-      } else if (blurPower) {
-        await vbPlugin.setBackground(HMSVirtualBackgroundTypes.BLUR, HMSVirtualBackgroundTypes.BLUR);
-      }
-      setBackground(mediaURL || HMSVirtualBackgroundTypes.BLUR);
-      setBackgroundType(mediaURL ? HMSVirtualBackgroundTypes.IMAGE : HMSVirtualBackgroundTypes.BLUR);
-      if (role && !addedPluginToVideoTrack.current) {
-        await hmsActions.addPluginToVideoTrack(vbPlugin, Math.floor(role.publishParams.video.frameRate / 2));
-        addedPluginToVideoTrack.current = true;
       }
-    } catch (err) {
-      console.error('Failed to apply VB', err);
-      disableEffects();
     }
-  }
+  }, [hmsActions, role, isPluginAdded, isEffectsEnabled, effectsKey, track?.id]);
 
   useEffect(() => {
     if (!isVideoOn) {
@@ -114,10 +79,6 @@ export const VBPicker = ({ backgroundMedia = [] }: { backgroundMedia: VirtualBac
     }
   }, [isVideoOn, toggleVB]);
 
-  if (!isVBSupported) {
-    return null;
-  }
-
   return (
     <Flex css={{ pr: '$6', size: '100%' }} direction="column">
       <Flex align="center" justify="between" css={{ w: '100%', background: '$surface_dim', pb: '$4' }}>
@@ -140,7 +101,6 @@ export const VBPicker = ({ backgroundMedia = [] }: { backgroundMedia: VirtualBac
           css={{ width: '100%', height: '16rem' }}
         />
       ) : null}
-
       <Box
         css={{
           mt: '$4',
@@ -156,30 +116,36 @@ export const VBPicker = ({ backgroundMedia = [] }: { backgroundMedia: VirtualBac
             {
               title: 'No effect',
               icon: <CrossCircleIcon style={iconDims} />,
-              type: HMSVirtualBackgroundTypes.NONE,
-              onClick: async () => await disableEffects(),
+              value: HMSVirtualBackgroundTypes.NONE,
+              onClick: async () => {
+                await VBHandler.removeEffects();
+                setActiveBackground(HMSVirtualBackgroundTypes.NONE);
+              },
             },
             {
               title: 'Blur',
               icon: <BlurPersonHighIcon style={iconDims} />,
-              type: HMSVirtualBackgroundTypes.BLUR,
-              onClick: async () => await addPlugin({ blurPower: 0.5 }),
+              value: HMSVirtualBackgroundTypes.BLUR,
+              onClick: async () => {
+                await VBHandler?.setBlur(0.5);
+                setActiveBackground(HMSVirtualBackgroundTypes.BLUR);
+              },
             },
           ]}
-          activeBackgroundType={backgroundType || HMSVirtualBackgroundTypes.NONE}
-          // @ts-ignore
-          activeBackground={vbPlugin.background?.src || vbPlugin.background || HMSVirtualBackgroundTypes.NONE}
+          activeBackground={activeBackground}
         />
 
         <VBCollection
           title="Backgrounds"
           options={mediaList.map(mediaURL => ({
-            type: HMSVirtualBackgroundTypes.IMAGE,
             mediaURL,
-            onClick: async () => await addPlugin({ mediaURL }),
+            value: mediaURL,
+            onClick: async () => {
+              await VBHandler?.setBackground(mediaURL);
+              setActiveBackground(mediaURL);
+            },
           }))}
-          activeBackgroundType={backgroundType || HMSVirtualBackgroundTypes.NONE}
-          activeBackground={background?.src || background || HMSVirtualBackgroundTypes.NONE}
+          activeBackground={activeBackground}
         />
       </Box>
     </Flex>

package/src/Prebuilt/components/VirtualBackground/constants.ts

@@ -1,5 +1,3 @@
-import { HMSVBPlugin, HMSVirtualBackgroundTypes } from '@100mslive/hms-virtual-background';
-
 export const defaultMedia = [
   'https://assets.100ms.live/webapp/vb-mini/vb-1.jpg',
   'https://assets.100ms.live/webapp/vb-mini/vb-2.jpg',
@@ -14,5 +12,3 @@ export const defaultMedia = [
   'https://assets.100ms.live/webapp/vb-mini/vb-11.jpg',
   'https://assets.100ms.live/webapp/vb-mini/vb-12.jpg',
 ];
-
-export const vbPlugin = new HMSVBPlugin(HMSVirtualBackgroundTypes.NONE, HMSVirtualBackgroundTypes.NONE);

package/src/Prebuilt/layouts/SidePane.tsx

@@ -32,6 +32,11 @@ const SidePane = ({
   const trackId = useHMSStore(selectVideoTrackByPeerID(activeScreensharePeerId))?.id;
   const { elements } = useRoomLayoutConferencingScreen();
   const { elements: preview_elements } = useRoomLayoutPreviewScreen();
+
+  const backgroundMedia = preview_elements?.virtual_background?.background_media?.length
+    ? preview_elements?.virtual_background?.background_media
+    : elements?.virtual_background?.background_media || [];
+
   const resetSidePane = useSidepaneReset();
   let ViewComponent;
   if (sidepane === SIDE_PANE_OPTIONS.POLLS) {
@@ -41,7 +46,7 @@ const SidePane = ({
     ViewComponent = <SidePaneTabs hideControls={hideControls} active={sidepane} />;
   }
   if (sidepane === SIDE_PANE_OPTIONS.VB) {
-    ViewComponent = <VBPicker backgroundMedia={preview_elements?.virtual_background?.background_media || []} />;
+    ViewComponent = <VBPicker backgroundMedia={backgroundMedia} />;
   }
 
   useEffect(() => {

package/src/Theme/stitches.config.ts

@@ -2,6 +2,7 @@ import type * as Stitches from '@stitches/react';
 import { createStitches } from '@stitches/react';
 import merge from 'lodash.merge';
 import { baseConfig, defaultMedia, defaultThemeMap, defaultUtils } from './base.config';
+import { DEFAULT_PORTAL_CONTAINER } from '../Prebuilt/common/constants';
 
 const HmsStitches = createStitches({
   prefix: 'hms-ui',
@@ -28,18 +29,9 @@ export const {
 } = HmsStitches;
 
 export const globalStyles = globalCss({
-  '*': {
+  [`${DEFAULT_PORTAL_CONTAINER} *`]: {
     fontFamily: '$sans',
     boxSizing: 'border-box',
-    borderWidth: 0,
-    borderStyle: 'solid',
-  },
-  body: {
-    margin: 0,
-  },
-  '#root': {
-    height: '100%',
-    overscrollBehaviorY: 'none',
   },
   '::-webkit-scrollbar-track': {
     WebkitBoxShadow: 'inset 0 0 6px rgba(0, 0, 0, 0.3)',