agora-appbuilder-core 4.0.25-beta-7 → 4.0.25-beta-9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agora-appbuilder-core",
-  "version": "4.0.25-beta-7",
+  "version": "4.0.25-beta-9",
   "description": "React Native template for RTE app builder",
   "main": "index.js",
   "files": [
@@ -9,7 +9,7 @@
   ],
   "scripts": {
     "vercel-build": "npm run dev-setup && cd template && npm run web:build && cd .. && npm run copy-vercel",
-    "uikit": "rm -rf template/agora-rn-uikit && git clone https://github.com/AgoraIO-Community/ReactNative-UIKit.git template/agora-rn-uikit && cd template/agora-rn-uikit && git checkout uikit-sdk-update-with-api-changes",
+    "uikit": "rm -rf template/agora-rn-uikit && git clone https://github.com/AgoraIO-Community/ReactNative-UIKit.git template/agora-rn-uikit && cd template/agora-rn-uikit && git checkout uikit-sdk-update-with-api-changes-profiles",
     "deps": "cd template && npm i --force",
     "dev-setup": "npm run uikit && npm run deps && node devSetup.js",
     "web-build": "cd template && npm run web:build && cd .. && npm run copy-vercel",

package/template/_package-lock.json

@@ -14,6 +14,7 @@
         "@gorhom/bottom-sheet": "4.4.7",
         "@netless/react-native-whiteboard": "^0.0.14",
         "@openspacelabs/react-native-zoomable-view": "^2.1.1",
+        "@react-native-assets/slider": "^7.2.1",
         "@react-native-async-storage/async-storage": "1.19.2",
         "@react-native-community/checkbox": "0.5.16",
         "@react-native-community/clipboard": "1.5.1",
@@ -21,6 +22,7 @@
         "add": "^2.0.6",
         "agora-chat": "^1.2.1",
         "agora-extension-ai-denoiser": "1.1.0",
+        "agora-extension-beauty-effect": "^1.0.2-beta",
         "agora-extension-virtual-background": "^1.1.3",
         "agora-react-native-rtm": "1.5.1",
         "agora-rtc-sdk-ng": "4.20.1-1",
@@ -3964,6 +3966,17 @@
       "resolved": "https://registry.npmjs.org/@protobufjs/utf8/-/utf8-1.1.0.tgz",
       "integrity": "sha512-Vvn3zZrhQZkkBE8LSuW3em98c0FwgO4nxzv6OdSxPKJIEKY2bGbHn+mhGIPerzI4twdxaP8/0+06HBpwf345Lw=="
     },
+    "node_modules/@react-native-assets/slider": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/@react-native-assets/slider/-/slider-7.2.1.tgz",
+      "integrity": "sha512-8n1IBQ6QSBMwL+GasCEgHctsjcJwpZ3eioTgL7nyOSteOnmDTsyNVjUU5zQ80YeZOvSWQTeIQ7g30ikfbK4t1A==",
+      "peerDependencies": {
+        "react": ">=16.13.1",
+        "react-dom": ">=16.13.1",
+        "react-native": ">=0.61.4",
+        "react-native-web": ">=0.13.4"
+      }
+    },
     "node_modules/@react-native-async-storage/async-storage": {
       "version": "1.19.2",
       "resolved": "https://registry.npmjs.org/@react-native-async-storage/async-storage/-/async-storage-1.19.2.tgz",
@@ -7761,6 +7774,11 @@
         "agora-rtc-sdk-ng": ">=4.15.0"
       }
     },
+    "node_modules/agora-extension-beauty-effect": {
+      "version": "1.0.2-beta",
+      "resolved": "https://registry.npmjs.org/agora-extension-beauty-effect/-/agora-extension-beauty-effect-1.0.2-beta.tgz",
+      "integrity": "sha512-nCEznllqgZiLmyzvUF4RxWdHXuFrVUWYlKhyl3ianvfF/9DY2551QQBuiRv6uPVsy4TEEWMwBX91EwxPX7v4Ig=="
+    },
     "node_modules/agora-extension-virtual-background": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/agora-extension-virtual-background/-/agora-extension-virtual-background-1.2.0.tgz",
@@ -35753,6 +35771,12 @@
       "resolved": "https://registry.npmjs.org/@protobufjs/utf8/-/utf8-1.1.0.tgz",
       "integrity": "sha512-Vvn3zZrhQZkkBE8LSuW3em98c0FwgO4nxzv6OdSxPKJIEKY2bGbHn+mhGIPerzI4twdxaP8/0+06HBpwf345Lw=="
     },
+    "@react-native-assets/slider": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/@react-native-assets/slider/-/slider-7.2.1.tgz",
+      "integrity": "sha512-8n1IBQ6QSBMwL+GasCEgHctsjcJwpZ3eioTgL7nyOSteOnmDTsyNVjUU5zQ80YeZOvSWQTeIQ7g30ikfbK4t1A==",
+      "requires": {}
+    },
     "@react-native-async-storage/async-storage": {
       "version": "1.19.2",
       "resolved": "https://registry.npmjs.org/@react-native-async-storage/async-storage/-/async-storage-1.19.2.tgz",
@@ -38688,6 +38712,11 @@
       "integrity": "sha512-g4klzzz7IQblNt0c+gJ/DM7sa5oMZ/7GWE4c9aqs3snHRAo+CjDieT84iAc1KUhAiY84RrfhyFdtpvbbEoYBcA==",
       "requires": {}
     },
+    "agora-extension-beauty-effect": {
+      "version": "1.0.2-beta",
+      "resolved": "https://registry.npmjs.org/agora-extension-beauty-effect/-/agora-extension-beauty-effect-1.0.2-beta.tgz",
+      "integrity": "sha512-nCEznllqgZiLmyzvUF4RxWdHXuFrVUWYlKhyl3ianvfF/9DY2551QQBuiRv6uPVsy4TEEWMwBX91EwxPX7v4Ig=="
+    },
     "agora-extension-virtual-background": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/agora-extension-virtual-background/-/agora-extension-virtual-background-1.2.0.tgz",

package/template/agora-rn-uikit/src/Contexts/PropsContext.tsx

@@ -136,6 +136,7 @@ export interface RtcPropsInterface {
   token?: string | null;
   dual?: boolean | null;
   profile?: VideoProfile;
+  screenShareProfile?: string;
   initialDualStreamMode?: DualStreamMode;
   role?: ClientRoleType /* Set local user's role between audience and host. Use with mode set to livestreaming. (default: host) */;
   callActive?: boolean;

package/template/agora-rn-uikit/src/Rtc/Create.tsx

@@ -257,6 +257,10 @@ const Create = ({
               // move this to bridge?
               // @ts-ignore
               await engine.current.setVideoProfile(rtcProps.profile);
+              // @ts-ignore
+              await engine.current.setScreenShareProfile(
+                rtcProps.screenShareProfile,
+              );
             } else {
               if (rtcProps && rtcProps?.profile) {
                 const config: VideoEncoderConfiguration =
@@ -266,6 +270,7 @@ const Create = ({
                   ...config,
                   bitrate: 0,
                 });
+                //TODO set for native
               }
             }
           }

package/template/bridge/rtc/webNg/RtcEngine.ts

@@ -40,6 +40,11 @@ import {LOG_ENABLED, GEO_FENCING} from '../../../config.json';
 import {Platform} from 'react-native';
 import isMobileOrTablet from '../../../src/utils/isMobileOrTablet';
 import {LogSource, logger} from '../../../src/logger/AppBuilderLogger';
+import {
+  type VideoEncoderConfigurationPreset,
+  type ScreenEncoderConfigurationPreset,
+  type VideoEncoderConfiguration,
+} from '../../../src/app-state/useVideoQuality';
 
 interface MediaDeviceInfo {
   readonly deviceId: string;
@@ -232,7 +237,12 @@ export default class RtcEngine {
   public screenStream: ScreenStream = {};
   public remoteStreams = new Map<UID, RemoteStream>();
   private inScreenshare: Boolean = false;
-  private videoProfile: VideoProfile = '480p_9';
+  private videoProfile:
+    | VideoEncoderConfigurationPreset
+    | VideoEncoderConfiguration;
+  private screenShareProfile:
+    | ScreenEncoderConfigurationPreset
+    | VideoEncoderConfiguration;
   private isPublished = false;
   private isAudioEnabled = false;
   private isVideoEnabled = false;
@@ -252,6 +262,25 @@ export default class RtcEngine {
     logger.log(LogSource.AgoraSDK, 'Log', 'RTC engine initialized');
     this.appId = appId;
   }
+  getLocalVideoStats() {
+    try {
+      logger.log(
+        LogSource.AgoraSDK,
+        'API',
+        'RTC [getLocalVideoStats] getting local video stats',
+      );
+      const data = this.client?.getLocalVideoStats();
+      logger.log(
+        LogSource.AgoraSDK,
+        'API',
+        'RTC [getLocalVideoStats] got local video stats successfully',
+        data,
+      );
+      return data;
+    } catch (error) {
+      return error;
+    }
+  }
 
   getRemoteVideoStats(id: string) {
     try {
@@ -261,7 +290,7 @@ export default class RtcEngine {
         'RTC [getRemoteVideoStats] getting remote video stats',
       );
       const data = this.client.getRemoteVideoStats();
-      logger.debug(
+      logger.log(
         LogSource.AgoraSDK,
         'API',
         'RTC [getRemoteVideoStats] got remote video stats successfully',
@@ -279,25 +308,57 @@ export default class RtcEngine {
     }
   }
 
-  async setVideoProfile(profile: VideoProfile): Promise<void> {
+  async setVideoProfile(
+    profile: VideoEncoderConfigurationPreset | VideoEncoderConfiguration,
+  ): Promise<void> {
     try {
       this.videoProfile = profile;
       logger.log(
         LogSource.AgoraSDK,
         'API',
-        `RTC [setEncoderConfiguration] setting video profile to - ${profile}`,
+        `RTC [setEncoderConfiguration] setting video profile.`,
+        profile,
+      );
+      await this.localStream?.video?.setEncoderConfiguration(profile);
+      logger.log(
+        LogSource.AgoraSDK,
+        'API',
+        `RTC [setEncoderConfiguration] video profile is set successfully`,
+        profile,
+      );
+    } catch (error) {
+      logger.error(
+        LogSource.AgoraSDK,
+        'API',
+        `RTC [setEncoderConfiguration] Error while setting video profile.`,
+        error,
       );
-      this.localStream?.video?.setEncoderConfiguration(profile);
+    }
+  }
+
+  async setScreenShareProfile(
+    profile: ScreenEncoderConfigurationPreset | VideoEncoderConfiguration,
+  ): Promise<void> {
+    try {
+      this.screenShareProfile = profile;
       logger.log(
         LogSource.AgoraSDK,
         'API',
-        `RTC [setEncoderConfiguration] set video profile to - ${profile} successfully`,
+        `RTC [setEncoderConfiguration] set screen share profile.`,
+        profile,
+      );
+      await this.screenStream?.video?.setEncoderConfiguration(profile);
+      logger.log(
+        LogSource.AgoraSDK,
+        'API',
+        `RTC [setEncoderConfiguration] screen share profile is set successfully.`,
+        profile,
       );
     } catch (error) {
       logger.error(
         LogSource.AgoraSDK,
         'API',
-        'RTC [setEncoderConfiguration] Error while setting video profile',
+        `RTC [setEncoderConfiguration] Error while setting screen share profile.`,
         error,
       );
     }
@@ -357,6 +418,7 @@ export default class RtcEngine {
       bypassWebAudio: Platform.OS == 'web' && isMobileOrTablet(),
       microphoneId: preferredMicrophoneId,
     };
+
     const videoConfig: CameraVideoTrackInitConfig = {
       encoderConfig: this.videoProfile,
       cameraId: preferredCameraId,
@@ -1512,9 +1574,15 @@ export default class RtcEngine {
       mode: RnEncryptionEnum;
       salt: string;
     },
-    config: ScreenVideoTrackInitConfig = {},
+    screenShareConfig: ScreenVideoTrackInitConfig = {
+      encoderConfig: this.screenShareProfile,
+    },
     audio: 'enable' | 'disable' | 'auto' = 'auto',
   ): Promise<void> {
+    const config: ScreenVideoTrackInitConfig = {
+      ...screenShareConfig,
+      encoderConfig: this.screenShareProfile,
+    };
     if (!this.inScreenshare) {
       try {
         logger.debug(

package/template/customization-api/app-state.ts

@@ -59,3 +59,4 @@ export {
 } from '../src/components/chat-ui/useChatUIControls';
 export type {ChatUIControlsInterface} from '../src/components/chat-ui/useChatUIControls';
 export {useVirtualBackground} from '../src/app-state/useVirtualBackground';
+export {useBeautyEffects} from '../src/app-state/useBeautyEffects';

package/template/customization-api/types.ts

@@ -37,3 +37,9 @@ export {
   type Option as VBOption,
 } from '../src/components/virtual-background/useVB';
 export {type VBCardProps} from '../src/components/virtual-background/VBCard';
+export {type BeautyEffects} from '../src/components/beauty-effect/useBeautyEffects';
+export {
+  type VideoEncoderConfigurationPreset,
+  type ScreenEncoderConfigurationPreset,
+  type VideoEncoderConfiguration,
+} from '../src/app-state/useVideoQuality';

package/template/defaultConfig.js

@@ -33,7 +33,8 @@ const DefaultConfig = {
   BG: '',
   PRIMARY_FONT_COLOR: '#363636',
   SECONDARY_FONT_COLOR: '#FFFFFF',
-  PROFILE: '720p_7',
+  PROFILE: "720p_3",
+  SCREEN_SHARE_PROFILE: "1080p_2",
   ICON_TEXT: true,
   PRIMARY_ACTION_BRAND_COLOR: '#099DFD',
   PRIMARY_ACTION_TEXT_COLOR: '#FFFFFF',
@@ -75,8 +76,8 @@ const DefaultConfig = {
   CHAT_ORG_NAME: '',
   CHAT_APP_NAME: '',
   CHAT_URL: '',
-  CLI_VERSION: '',
-  CORE_VERSION: '',
+  CLI_VERSION: '4.0.25-beta-9',
+  CORE_VERSION: '3.0.25-beta-9',
 };
 
 module.exports = DefaultConfig;

package/template/global.d.ts

@@ -10,7 +10,7 @@
 *********************************************
 */
 // import statements are not allowed in global configs
-type VideoProfile =
+type VideoProfilePreset =
   | '120p_1'
   | '120p_3'
   | '180p_1'
@@ -42,6 +42,50 @@ type VideoProfile =
   | '720p_5'
   | '720p_6';
 
+type ScreenShareProfilePreset =
+  | '480p_1'
+  | '480p_2'
+  | '480p_3'
+  | '720p'
+  | '720p_1'
+  | '720p_2'
+  | '720p_3'
+  | '1080p'
+  | '1080p_1'
+  | '1080p_2'
+  | '1080p_3';
+
+interface AudioEncoderConfiguration {
+  /**
+   * Sample rate of the audio (Hz).
+   */
+  sampleRate?: number;
+  /**
+   * Sample size of the audio.
+   */
+  sampleSize?: number;
+  /**
+   * Whether to enable stereo.
+   */
+  stereo?: boolean;
+  /**
+   * Bitrate of the audio (Kbps).
+   */
+  bitrate?: number;
+}
+
+declare const AUDIO_ENCODER_CONFIG_SETTINGS: {
+  speech_low_quality: AudioEncoderConfiguration;
+  speech_standard: AudioEncoderConfiguration;
+  music_standard: AudioEncoderConfiguration;
+  standard_stereo: AudioEncoderConfiguration;
+  high_quality: AudioEncoderConfiguration;
+  high_quality_stereo: AudioEncoderConfiguration;
+};
+
+type AudioEncoderConfigurationPreset =
+  keyof typeof AUDIO_ENCODER_CONFIG_SETTINGS;
+
 interface ConfigInterface {
   PRODUCT_ID: string;
   APP_NAME: string;
@@ -58,7 +102,8 @@ interface ConfigInterface {
   CLIENT_ID: string;
   LANDING_SUB_HEADING: string;
   ENCRYPTION_ENABLED: boolean;
-  PROFILE: VideoProfile;
+  PROFILE: VideoProfilePreset;
+  SCREEN_SHARE_PROFILE: ScreenShareProfilePreset;
   ENABLE_GOOGLE_OAUTH: boolean;
   ENABLE_SLACK_OAUTH: boolean;
   ENABLE_MICROSOFT_OAUTH: boolean;

package/template/package-lock.json

@@ -14,6 +14,7 @@
         "@gorhom/bottom-sheet": "4.4.7",
         "@netless/react-native-whiteboard": "^0.0.14",
         "@openspacelabs/react-native-zoomable-view": "^2.1.1",
+        "@react-native-assets/slider": "^7.2.1",
         "@react-native-async-storage/async-storage": "1.19.2",
         "@react-native-community/checkbox": "0.5.16",
         "@react-native-community/clipboard": "1.5.1",
@@ -21,6 +22,7 @@
         "add": "^2.0.6",
         "agora-chat": "^1.2.1",
         "agora-extension-ai-denoiser": "1.1.0",
+        "agora-extension-beauty-effect": "^1.0.2-beta",
         "agora-extension-virtual-background": "^1.1.3",
         "agora-react-native-rtm": "1.5.1",
         "agora-rtc-sdk-ng": "4.20.1-1",
@@ -3964,6 +3966,17 @@
       "resolved": "https://registry.npmjs.org/@protobufjs/utf8/-/utf8-1.1.0.tgz",
       "integrity": "sha512-Vvn3zZrhQZkkBE8LSuW3em98c0FwgO4nxzv6OdSxPKJIEKY2bGbHn+mhGIPerzI4twdxaP8/0+06HBpwf345Lw=="
     },
+    "node_modules/@react-native-assets/slider": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/@react-native-assets/slider/-/slider-7.2.1.tgz",
+      "integrity": "sha512-8n1IBQ6QSBMwL+GasCEgHctsjcJwpZ3eioTgL7nyOSteOnmDTsyNVjUU5zQ80YeZOvSWQTeIQ7g30ikfbK4t1A==",
+      "peerDependencies": {
+        "react": ">=16.13.1",
+        "react-dom": ">=16.13.1",
+        "react-native": ">=0.61.4",
+        "react-native-web": ">=0.13.4"
+      }
+    },
     "node_modules/@react-native-async-storage/async-storage": {
       "version": "1.19.2",
       "resolved": "https://registry.npmjs.org/@react-native-async-storage/async-storage/-/async-storage-1.19.2.tgz",
@@ -7761,6 +7774,11 @@
         "agora-rtc-sdk-ng": ">=4.15.0"
       }
     },
+    "node_modules/agora-extension-beauty-effect": {
+      "version": "1.0.2-beta",
+      "resolved": "https://registry.npmjs.org/agora-extension-beauty-effect/-/agora-extension-beauty-effect-1.0.2-beta.tgz",
+      "integrity": "sha512-nCEznllqgZiLmyzvUF4RxWdHXuFrVUWYlKhyl3ianvfF/9DY2551QQBuiRv6uPVsy4TEEWMwBX91EwxPX7v4Ig=="
+    },
     "node_modules/agora-extension-virtual-background": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/agora-extension-virtual-background/-/agora-extension-virtual-background-1.2.0.tgz",
@@ -35753,6 +35771,12 @@
       "resolved": "https://registry.npmjs.org/@protobufjs/utf8/-/utf8-1.1.0.tgz",
       "integrity": "sha512-Vvn3zZrhQZkkBE8LSuW3em98c0FwgO4nxzv6OdSxPKJIEKY2bGbHn+mhGIPerzI4twdxaP8/0+06HBpwf345Lw=="
     },
+    "@react-native-assets/slider": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/@react-native-assets/slider/-/slider-7.2.1.tgz",
+      "integrity": "sha512-8n1IBQ6QSBMwL+GasCEgHctsjcJwpZ3eioTgL7nyOSteOnmDTsyNVjUU5zQ80YeZOvSWQTeIQ7g30ikfbK4t1A==",
+      "requires": {}
+    },
     "@react-native-async-storage/async-storage": {
       "version": "1.19.2",
       "resolved": "https://registry.npmjs.org/@react-native-async-storage/async-storage/-/async-storage-1.19.2.tgz",
@@ -38688,6 +38712,11 @@
       "integrity": "sha512-g4klzzz7IQblNt0c+gJ/DM7sa5oMZ/7GWE4c9aqs3snHRAo+CjDieT84iAc1KUhAiY84RrfhyFdtpvbbEoYBcA==",
       "requires": {}
     },
+    "agora-extension-beauty-effect": {
+      "version": "1.0.2-beta",
+      "resolved": "https://registry.npmjs.org/agora-extension-beauty-effect/-/agora-extension-beauty-effect-1.0.2-beta.tgz",
+      "integrity": "sha512-nCEznllqgZiLmyzvUF4RxWdHXuFrVUWYlKhyl3ianvfF/9DY2551QQBuiRv6uPVsy4TEEWMwBX91EwxPX7v4Ig=="
+    },
     "agora-extension-virtual-background": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/agora-extension-virtual-background/-/agora-extension-virtual-background-1.2.0.tgz",

package/template/package.json

@@ -54,6 +54,7 @@
     "@gorhom/bottom-sheet": "4.4.7",
     "@netless/react-native-whiteboard": "^0.0.14",
     "@openspacelabs/react-native-zoomable-view": "^2.1.1",
+    "@react-native-assets/slider": "^7.2.1",
     "@react-native-async-storage/async-storage": "1.19.2",
     "@react-native-community/checkbox": "0.5.16",
     "@react-native-community/clipboard": "1.5.1",
@@ -61,6 +62,7 @@
     "add": "^2.0.6",
     "agora-chat": "^1.2.1",
     "agora-extension-ai-denoiser": "1.1.0",
+    "agora-extension-beauty-effect": "^1.0.2-beta",
     "agora-extension-virtual-background": "^1.1.3",
     "agora-react-native-rtm": "1.5.1",
     "agora-rtc-sdk-ng": "4.20.1-1",

package/template/src/AppRoutes.tsx

@@ -26,8 +26,8 @@ import {LogSource, logger} from './logger/AppBuilderLogger';
 import {isValidReactComponent} from './utils/common';
 
 function VideoCallWrapper(props) {
-  const {isRecordingBotRoute} = useIsRecordingBot();
-  return isRecordingBotRoute ? (
+  const {isRecordingBot} = useIsRecordingBot();
+  return isRecordingBot ? (
     <RecordingBotRoute history={props.history}>
       <VideoCall />
     </RecordingBotRoute>

package/template/src/AppWrapper.tsx

@@ -35,6 +35,7 @@ import ToastComponent from './components/ToastComponent';
 import {ToastContext, ToastProvider} from './components/useToast';
 import {SdkApiContext} from './components/SdkApiContext';
 import isSDK from './utils/isSDK';
+import BlockUI from './subComponents/BlockUI';
 
 interface AppWrapperProps {
   children: React.ReactNode;
@@ -85,6 +86,7 @@ const AppWrapper = (props: AppWrapperProps) => {
           // @ts-ignore textAlign not supported by TS definitions but is applied to web regardless
           style={[{flex: 1}, Platform.select({web: {textAlign: 'left'}})]}>
           <StatusBar hidden={true} />
+          <BlockUI />
           <StorageProvider>
             <LanguageProvider>
               <GraphQLProvider>

package/template/src/SDKAppWrapper.tsx

@@ -21,13 +21,21 @@ export interface AppBuilderSdkApiInterface {
   joinRoom: (
     roomDetails: string | meetingData,
     userName?: string,
-    preference?: {disableShareTile: boolean},
+    preference?: {
+      disableShareTile: boolean;
+      showBeautyControls: boolean;
+      showQualityControls: boolean;
+    },
   ) => Promise<meetingData>;
   joinPrecall: (
     roomDetails: string | meetingData,
     userName?: string,
     skipPrecall?: boolean,
-    preference?: {disableShareTile: boolean},
+    preference?: {
+      disableShareTile: boolean;
+      showBeautyControls: boolean;
+      showQualityControls: boolean;
+    },
   ) => Promise<
     [
       meetingData,
@@ -73,7 +81,7 @@ export const AppBuilderSdkApi: AppBuilderSdkApiInterface = {
     logger.log(LogSource.SDK, 'Event', 'emiting event for joinRoom - join', {
       room: roomDetails,
       userName: userName,
-      preference: preference
+      preference: preference,
     });
     return await SDKMethodEventsManager.emit(
       'join',
@@ -87,7 +95,7 @@ export const AppBuilderSdkApi: AppBuilderSdkApiInterface = {
     logger.log(LogSource.SDK, 'Event', 'emiting event for joinPrecall - join', {
       room: roomDetails,
       userName: userName,
-      preference: preference
+      preference: preference,
     });
     if (!$config.PRECALL) {
       logger.error(

package/template/src/app-state/useBeautyEffects.ts

@@ -0,0 +1,38 @@
+import {type BeautyEffects} from 'customization-api';
+import {useBeautyEffect} from '../components/beauty-effect/useBeautyEffects';
+import {isWeb} from '../utils/common';
+
+export interface BeautyEffectInterface {
+  isBeautyEffectsON: boolean;
+  beautyEffects: BeautyEffects;
+  applyBeautyEffect: (config: BeautyEffects) => void;
+  removeBeautyEffect: () => void;
+}
+
+export const useBeautyEffects: () => BeautyEffectInterface = () => {
+  const {
+    rednessLevel,
+    lighteningContrastLevel,
+    lighteningLevel,
+    smoothnessLevel,
+    sharpnessLevel,
+    applyBeautyEffect,
+    removeBeautyEffect,
+    beautyEffectsOn,
+  } = useBeautyEffect();
+
+  const beautyEffects = {
+    lighteningContrastLevel,
+    lighteningLevel,
+    smoothnessLevel,
+    sharpnessLevel,
+    rednessLevel,
+  };
+
+  return {
+    isBeautyEffectsON: beautyEffectsOn,
+    beautyEffects,
+    applyBeautyEffect,
+    removeBeautyEffect,
+  };
+};