feat: feature flags

__mocks__/config.mock.ts

@@ -16,4 +16,16 @@ export const MOCK_CONFIG: Configuration = {
   limits: LIMITS_MOCK,
   waterMark: WATERMARK_MOCK,
   colors: MOCK_COLORS,
+  features: {
+    realtime: true,
+    presence: true,
+    videoConference: true,
+    comments: true,
+    whoIsOnline: true,
+    presence3dMatterport: true,
+    presence3dAutodesk: true,
+    presence3dThreejs: true,
+    formElements: true,
+    transcriptLangs: ['en-US'],
+  },
 };

src/components/base/index.ts

@@ -11,7 +11,6 @@ import { AblyRealtimeService } from '../../services/realtime';
 import { ComponentNames } from '../types';
 
 import { DefaultAttachComponentOptions } from './types';
-import { useGlobalStore } from '../../services/stores';
 
 export abstract class BaseComponent extends Observable {
   public abstract name: ComponentNames;

src/core/index.ts

@@ -96,9 +96,10 @@ const init = async (apiKey: string, options: SuperVizSdkOptions): Promise<Launch
     debug.disable();
   }
 
-  const { apiUrl, conferenceLayerUrl } = await RemoteConfigService.getRemoteConfig(
-    options.environment as EnvironmentTypes,
-  );
+  const [{ apiUrl, conferenceLayerUrl }, features] = await Promise.all([
+    RemoteConfigService.getRemoteConfig(options.environment as EnvironmentTypes),
+    RemoteConfigService.getFeatures(apiKey),
+  ]);
 
   const isValid = await AuthService(apiUrl, apiKey);
 
@@ -132,6 +133,7 @@ const init = async (apiKey: string, options: SuperVizSdkOptions): Promise<Launch
     limits,
     waterMark,
     colors: options.customColors,
+    features,
   });
 
   setColorVariables(options.customColors);

src/core/launcher/index.ts

@@ -197,10 +197,15 @@ export class Launcher extends Observable implements DefaultLauncher {
    * @returns {boolean}
    */
   private canAddComponent = (component: Partial<BaseComponent>): boolean => {
+    const isProvidedFeature = config.get<boolean>(`features.${component.name}`);
     const hasComponentLimit = LimitsService.checkComponentLimit(component.name);
     const isComponentActive = this.activeComponents.includes(component.name);
 
     const verifications = [
+      {
+        isValid: isProvidedFeature,
+        message: `Component ${component.name} is not enabled in the room`,
+      },
       {
         isValid: !this.isDestroyed,
         message:

src/services/config/index.ts

@@ -1,8 +1,8 @@
-import _ from 'lodash';
+import { get } from 'lodash';
 
 import { Nullable } from '../../common/types/global.types';
 
-import type { Configuration } from './types';
+import type { Configuration, Key } from './types';
 
 export class ConfigurationService {
   public configuration: Nullable<Configuration>;
@@ -11,14 +11,10 @@ export class ConfigurationService {
     this.configuration = config;
   }
 
-  public get<T>(key: keyof Configuration, defaultValue?: T): T {
+  public get<T>(key: Key, defaultValue?: T): T {
     if (!this.configuration) return defaultValue;
 
-    return _.get<Configuration, keyof Configuration, T>(
-      this.configuration,
-      key,
-      defaultValue as T,
-    ) as T;
+    return get<Configuration, any, T>(this.configuration, key, defaultValue as T) as T;
   }
 }
 

src/services/config/types.ts

@@ -1,6 +1,7 @@
 import { ColorsVariables } from '../../common/types/colors.types';
 import { EnvironmentTypes } from '../../common/types/sdk-options.types';
 import { ComponentLimits } from '../limits/types';
+import { FeatureFlags } from '../remote-config-service/types';
 
 export interface Configuration {
   roomId: string;
@@ -13,4 +14,13 @@ export interface Configuration {
   limits: ComponentLimits;
   waterMark: boolean;
   colors?: ColorsVariables;
+  features: FeatureFlags;
 }
+
+type Paths<T> = T extends object
+  ? {
+      [K in keyof T]: `${Exclude<K, symbol>}${'' | `.${Paths<T[K]>}`}`;
+    }[keyof T]
+  : never;
+
+export type Key = Paths<Configuration>;

src/services/remote-config-service/index.ts

@@ -2,10 +2,10 @@ import { RemoteConfigParams } from '../../common/types/remote-config.types';
 import { EnvironmentTypes } from '../../common/types/sdk-options.types';
 import { doRequest } from '../../common/utils';
 
-import { RemoteConfig } from './types';
+import { FeatureFlags, RemoteConfig } from './types';
 
 export default class RemoteConfigService {
-  static REMOTE_CONFIG_BASE_URL: string = 'https://remote-config.superviz.com/sdk';
+  static REMOTE_CONFIG_BASE_URL: string = 'https://remote-config.superviz.com';
 
   /**
    * @function getRemoteConfig
@@ -31,6 +31,14 @@ export default class RemoteConfigService {
     return doRequest(url, 'GET', null) as Promise<RemoteConfig>;
   }
 
+  static async getFeatures(apiKey: string): Promise<FeatureFlags> {
+    return doRequest(
+      `${this.REMOTE_CONFIG_BASE_URL}/features/${apiKey}`,
+      'GET',
+      undefined,
+    ) as Promise<FeatureFlags>;
+  }
+
   /**
    * @function createUrl
    * @description
@@ -39,7 +47,7 @@ export default class RemoteConfigService {
    * @param {RemoteConfigParams} params - The parameters for creating the URL.
    * @returns {string} The URL for fetching remote configuration data.
    */
-  static createUrl({ version, environment }: RemoteConfigParams) {
-    return `${this.REMOTE_CONFIG_BASE_URL}/${version}?env=${environment}`;
+  static createUrl({ version, environment }: RemoteConfigParams): string {
+    return `${this.REMOTE_CONFIG_BASE_URL}/sdk/${version}?env=${environment}`;
   }
 }

src/services/remote-config-service/types.ts

@@ -2,3 +2,16 @@ export type RemoteConfig = {
   apiUrl: string;
   conferenceLayerUrl: string;
 };
+
+export interface FeatureFlags {
+  realtime: boolean;
+  presence: boolean;
+  videoConference: boolean;
+  comments: boolean;
+  whoIsOnline: boolean;
+  presence3dMatterport: boolean;
+  presence3dAutodesk: boolean;
+  presence3dThreejs: boolean;
+  formElements: boolean;
+  transcriptLangs: string[];
+}

src/services/video-conference-manager/index.ts

@@ -129,6 +129,7 @@ export default class VideoConfereceManager {
       layoutMode,
       skipMeetingSettings,
       layoutPosition: positions.layoutPosition,
+      transcriptLangs: config.get<string[]>('features.transcriptLangs'),
     };
 
     this.customColors = customColors;

src/services/video-conference-manager/types.ts

@@ -85,6 +85,7 @@ export interface FrameConfig {
   layoutPosition: LayoutPosition;
   layoutMode?: LayoutMode;
   collaborationMode: boolean;
+  transcriptLangs: string[];
 }
 
 export interface DevicesConfig {