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

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

@@ -0,0 +1,72 @@
+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);
+    }
+  };
+}
+
+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 { VirtualBackground, VirtualBackgroundMedia } from '@100mslive/types-prebuilt/elements/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,94 +17,58 @@ 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 = ({ background_media = [] }: VirtualBackground = {}) => {
+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 mediaList = [...background_media.map((media: VirtualBackgroundMedia) => media?.url), ...defaultMedia];
+  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 || '')
+    : 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) {
-      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]);
 
   useEffect(() => {
     if (!isVideoOn) {
@@ -112,10 +76,6 @@ export const VBPicker = ({ background_media = [] }: VirtualBackground = {}) => {
     }
   }, [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' }}>
@@ -138,7 +98,6 @@ export const VBPicker = ({ background_media = [] }: VirtualBackground = {}) => {
           css={{ width: '100%', height: '16rem' }}
         />
       ) : null}
-
       <Box
         css={{
           mt: '$4',
@@ -154,30 +113,36 @@ export const VBPicker = ({ background_media = [] }: VirtualBackground = {}) => {
             {
               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

@@ -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,12 @@ const SidePane = ({
   const activeScreensharePeerId = useHMSStore(selectAppData(APP_DATA.activeScreensharePeerId));
   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) {
@@ -37,7 +46,7 @@ const SidePane = ({
     ViewComponent = <SidePaneTabs hideControls={hideControls} active={sidepane} />;
   }
   if (sidepane === SIDE_PANE_OPTIONS.VB) {
-    ViewComponent = <VBPicker {...elements.virtual_background} />;
+    ViewComponent = <VBPicker backgroundMedia={backgroundMedia} />;
   }
 
   useEffect(() => {

package/src/Prebuilt/provider/roomLayoutProvider/index.tsx

@@ -18,11 +18,14 @@ export const RoomLayoutContext = React.createContext<
   | undefined
 >(undefined);
 
+// The default merge in lodash merges the values of current layout and the changes.
+// This behaviour makes changes in array based values inconsistent since a union happens.
+// The customizer uses the new value provided if one of the values is an array
 function customizer(objValue: any, srcValue: any) {
-  if (isArray(objValue) && isArray(srcValue)) {
+  if (isArray(objValue) || isArray(srcValue)) {
     return srcValue;
   }
-  // default mergeWith behaviour is followed
+  // default merge behaviour is followed
   return undefined;
 }
 
@@ -34,7 +37,6 @@ export const RoomLayoutProvider: React.FC<React.PropsWithChildren<RoomLayoutProv
   const authToken: string = useAuthToken();
   const { layout, updateRoomLayoutForRole } = useFetchRoomLayout({ authToken, endpoint: roomLayoutEndpoint });
   const mergedLayout = authToken && layout ? mergeWith(layout, overrideLayout, customizer) : layout;
-
   return (
     <RoomLayoutContext.Provider value={{ layout: mergedLayout, updateRoomLayoutForRole }}>
       {children}

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)',