fix: flag for vb

100mslive · Jul 31, 2024 · f175228 · f175228
1 parent 65f3927
commit f175228
Show file tree

Hide file tree

Showing 9 changed files with 25 additions and 3 deletions.
diff --git a/packages/hms-video-store/src/interfaces/room.ts b/packages/hms-video-store/src/interfaces/room.ts
@@ -37,6 +37,10 @@ export interface HMSRoom {
    * @alpha
    */
   isEffectsEnabled?: boolean;
+  /**
+   * @alpha
+   */
+  isVBEnabled?: boolean;
   /**
    * @alpha
    */

diff --git a/packages/hms-video-store/src/reactive-store/adapter.ts b/packages/hms-video-store/src/reactive-store/adapter.ts
@@ -159,6 +159,7 @@ export class SDKToHMS {
       peerCount: sdkRoom.peerCount,
       isLargeRoom: sdkRoom.large_room_optimization,
       isEffectsEnabled: sdkRoom.isEffectsEnabled,
+      isVBEnabled: sdkRoom.isVBEnabled,
       effectsKey: sdkRoom.effectsKey,
       isHipaaEnabled: sdkRoom.isHipaaEnabled,
       isNoiseCancellationEnabled: sdkRoom.isNoiseCancellationEnabled,

diff --git a/packages/hms-video-store/src/schema/room.ts b/packages/hms-video-store/src/schema/room.ts
@@ -40,6 +40,7 @@ export interface HMSRoom {
   peerCount?: number;
   isLargeRoom?: boolean;
   isEffectsEnabled?: boolean;
+  isVBEnabled?: boolean;
   effectsKey?: string;
   isHipaaEnabled?: boolean;
   isNoiseCancellationEnabled?: boolean;

diff --git a/packages/hms-video-store/src/sdk/models/HMSRoom.ts b/packages/hms-video-store/src/sdk/models/HMSRoom.ts
@@ -19,6 +19,10 @@ export default class Room implements HMSRoom {
    * @alpha
    */
   isEffectsEnabled?: boolean;
+  /**
+   * @alpha
+   */
+  isVBEnabled?: boolean;
   /**
    * @alpha
    */

diff --git a/packages/hms-video-store/src/selectors/selectors.ts b/packages/hms-video-store/src/selectors/selectors.ts
@@ -457,6 +457,7 @@ export const selectSessionId = createSelector(selectRoom, room => room.sessionId
 export const selectRoomStartTime = createSelector(selectRoom, room => room.startedAt);
 export const selectIsLargeRoom = createSelector(selectRoom, room => !!room.isLargeRoom);
 export const selectIsEffectsEnabled = createSelector(selectRoom, room => !!room.isEffectsEnabled);
+export const selectIsVBEnabled = createSelector(selectRoom, room => !!room.isVBEnabled);
 export const selectEffectsKey = createSelector(selectRoom, room => room.effectsKey);
 
 export const selectTemplateAppData = (store: HMSStore) => store.templateAppData;

diff --git a/packages/hms-video-store/src/signal/init/models.ts b/packages/hms-video-store/src/signal/init/models.ts
@@ -58,6 +58,7 @@ export enum InitFlags {
   FLAG_DISABLE_VIDEO_TRACK_AUTO_UNSUBSCRIBE = 'disableVideoTrackAutoUnsubscribe',
   FLAG_WHITEBOARD_ENABLED = 'whiteboardEnabled',
   FLAG_EFFECTS_SDK_ENABLED = 'effectsSDKEnabled',
+  FLAG_VB_ENABLED = 'vb',
   FLAG_HIPAA_ENABLED = 'hipaa',
   FLAG_NOISE_CANCELLATION = 'noiseCancellation',
   FLAG_SCALE_SCREENSHARE_BASED_ON_PIXELS = 'scaleScreenshareBasedOnPixels',

diff --git a/packages/hms-video-store/src/transport/index.ts b/packages/hms-video-store/src/transport/index.ts
@@ -944,6 +944,7 @@ export default class HMSTransport {
       if (room) {
         room.effectsKey = this.initConfig.config.vb?.effectsKey;
         room.isEffectsEnabled = this.isFlagEnabled(InitFlags.FLAG_EFFECTS_SDK_ENABLED);
+        room.isVBEnabled = this.isFlagEnabled(InitFlags.FLAG_VB_ENABLED);
         room.isHipaaEnabled = this.isFlagEnabled(InitFlags.FLAG_HIPAA_ENABLED);
         room.isNoiseCancellationEnabled = this.isFlagEnabled(InitFlags.FLAG_NOISE_CANCELLATION);
       }

diff --git a/packages/roomkit-react/src/Prebuilt/components/Preview/PreviewJoin.tsx b/packages/roomkit-react/src/Prebuilt/components/Preview/PreviewJoin.tsx
@@ -4,6 +4,7 @@ import {
   HMSRoomState,
   selectAppData,
   selectIsLocalVideoEnabled,
+  selectIsVBEnabled,
   selectLocalPeer,
   selectRoomState,
   selectVideoTrackByID,
@@ -253,6 +254,7 @@ export const PreviewTile = ({ name, error }: { name: string; error?: boolean })
 
 export const PreviewControls = ({ hideSettings, vbEnabled }: { hideSettings: boolean; vbEnabled: boolean }) => {
   const isMobile = useMedia(cssConfig.media.md);
+  const isVBEnabledForUser = useHMSStore(selectIsVBEnabled);
   return (
     <Flex
       justify={hideSettings && isMobile ? 'center' : 'between'}
@@ -263,7 +265,7 @@ export const PreviewControls = ({ hideSettings, vbEnabled }: { hideSettings: boo
     >
       <Flex css={{ gap: '$4' }}>
         <AudioVideoToggle />
-        {vbEnabled ? <VBToggle /> : null}
+        {vbEnabled && isVBEnabledForUser ? <VBToggle /> : null}
       </Flex>
       <Flex align="center" gap="1">
         {isMobile && <NoiseCancellation iconOnly />}

diff --git a/packages/roomkit-react/src/Prebuilt/components/VirtualBackground/VBToggle.tsx b/packages/roomkit-react/src/Prebuilt/components/VirtualBackground/VBToggle.tsx
@@ -1,5 +1,11 @@
 import React from 'react';
-import { selectAppData, selectIsEffectsEnabled, selectIsLocalVideoEnabled, useHMSStore } from '@100mslive/react-sdk';
+import {
+  selectAppData,
+  selectIsEffectsEnabled,
+  selectIsLocalVideoEnabled,
+  selectIsVBEnabled,
+  useHMSStore,
+} from '@100mslive/react-sdk';
 import { VirtualBackgroundIcon } from '@100mslive/react-icons';
 import { Loading } from '../../../Loading';
 import { Tooltip } from '../../../Tooltip';
@@ -12,10 +18,11 @@ export const VBToggle = () => {
   const toggleVB = useSidepaneToggle(SIDE_PANE_OPTIONS.VB);
   const isVBOpen = useIsSidepaneTypeOpen(SIDE_PANE_OPTIONS.VB);
   const isVideoOn = useHMSStore(selectIsLocalVideoEnabled);
+  const isVBEnabled = useHMSStore(selectIsVBEnabled);
   const isEffectsEnabled = useHMSStore(selectIsEffectsEnabled);
   const loadingEffects = useHMSStore(selectAppData(APP_DATA.loadingEffects));
 
-  if (!isVideoOn || (!isEffectsEnabled && isSafari)) {
+  if (!isVideoOn || (!isEffectsEnabled && isSafari) || !isVBEnabled) {
     return null;
   }