agora-appbuilder-core 4.0.25-beta-13 → 4.0.25-beta-14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agora-appbuilder-core",
-  "version": "4.0.25-beta-13",
+  "version": "4.0.25-beta-14",
   "description": "React Native template for RTE app builder",
   "main": "index.js",
   "files": [

package/template/_package-lock.json

@@ -14,7 +14,6 @@
         "@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",
@@ -3966,17 +3965,6 @@
       "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",
@@ -35771,12 +35759,6 @@
       "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",

package/template/defaultConfig.js

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

package/template/package-lock.json

@@ -14,7 +14,6 @@
         "@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",
@@ -3966,17 +3965,6 @@
       "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",
@@ -35771,12 +35759,6 @@
       "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",

package/template/package.json

@@ -54,7 +54,6 @@
     "@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",

package/template/src/SDKAppWrapper.tsx

@@ -23,8 +23,6 @@ export interface AppBuilderSdkApiInterface {
     userName?: string,
     preference?: {
       disableShareTile: boolean;
-      showBeautyControls: boolean;
-      showQualityControls: boolean;
     },
   ) => Promise<meetingData>;
   joinPrecall: (
@@ -33,8 +31,6 @@ export interface AppBuilderSdkApiInterface {
     skipPrecall?: boolean,
     preference?: {
       disableShareTile: boolean;
-      showBeautyControls: boolean;
-      showQualityControls: boolean;
     },
   ) => Promise<
     [

package/template/src/app-state/useNoiseSupression.tsx

@@ -42,10 +42,19 @@ export function NoiseSupressionProvider(props) {
 
   useEffect(() => {
     if ($config.ENABLE_NOISE_CANCELLATION) {
-      const denoiserExtension = new AIDenoiserExtension({assetsPath: 'wasm'});
-      AgoraRTC.registerExtensions([denoiserExtension]);
-      processor.current = denoiserExtension.createProcessor();
-      processor.current.disable();
+      try {
+        const denoiserExtension = new AIDenoiserExtension({assetsPath: 'wasm'});
+        AgoraRTC.registerExtensions([denoiserExtension]);
+        processor.current = denoiserExtension.createProcessor();
+        processor.current.disable();
+      } catch (error) {
+        logger.error(
+          LogSource.Internals,
+          'NOISE_CANCELLATION',
+          'Failed to initiate AIDenoiserExtension',
+          error,
+        );
+      }
     }
   }, []);
 
@@ -56,27 +65,45 @@ export function NoiseSupressionProvider(props) {
     //@ts-ignore
     const localAudioTrack = RtcEngineUnsafe?.localStream?.audio;
 
-    if (processor?.current) {
-      localAudioTrack
-        ?.pipe(processor.current)
-        .pipe(localAudioTrack?.processorDestination);
+    try {
+      if (processor?.current) {
+        localAudioTrack
+          ?.pipe(processor.current)
+          .pipe(localAudioTrack?.processorDestination);
 
-      await processor?.current?.enable();
-      logger.log(
+        await processor?.current?.enable();
+        logger.log(
+          LogSource.Internals,
+          'NOISE_CANCELLATION',
+          'noise suppression enabled',
+        );
+      }
+    } catch (error) {
+      logger.error(
         LogSource.Internals,
         'NOISE_CANCELLATION',
-        'noise suppression enabled',
+        'Failed to enable noise suppression',
+        error,
       );
     }
   };
 
   const disableNoiseSuppression = async () => {
-    if (processor?.current) {
-      await processor?.current?.disable();
-      logger.log(
+    try {
+      if (processor?.current) {
+        await processor?.current?.disable();
+        logger.log(
+          LogSource.Internals,
+          'NOISE_CANCELLATION',
+          'noise suppression disabled',
+        );
+      }
+    } catch (error) {
+      logger.error(
         LogSource.Internals,
         'NOISE_CANCELLATION',
-        'noise suppression disabled',
+        'Failed to disable noise suppression',
+        error,
       );
     }
   };

package/template/src/components/Precall.tsx

@@ -59,8 +59,6 @@ import {
   settingsPanelHeading,
 } from '../language/default-labels/precallScreenLabels';
 import {LogSource, logger} from '../logger/AppBuilderLogger';
-import BeautyEffectsControls from './beauty-effect/BeautyEffectsControls';
-import QualityControls from './quality-profiles/QualityControls';
 
 const JoinRoomInputView = ({isDesktop}) => {
   const {rtcProps} = useContext(PropsContext);
@@ -386,8 +384,6 @@ const Precall = () => {
 
   const isDesktop = useIsDesktop();
   const getResponsiveValue = useResponsive();
-  const {roomPreference} = useRoomInfo();
-  const showBeautyControls = roomPreference?.showBeautyControls;
 
   return FpePrecallComponent ? (
     <FpePrecallComponent />
@@ -527,22 +523,6 @@ const Precall = () => {
                     <VirtualBackgroundComponent isOnPrecall={true} />
                   </ScrollView>
                 )}
-
-                {roomPreference?.showQualityControls ? (
-                  <View style={style.deviceSelectContainer}>
-                    <QualityControls />
-                  </View>
-                ) : (
-                  <></>
-                )}
-                <Spacer size={24} />
-                {showBeautyControls ? (
-                  <View style={style.panelContainer}>
-                    <BeautyEffectsControls />
-                  </View>
-                ) : (
-                  <></>
-                )}
               </ScrollView>
             </Card>
           </ScrollView>

package/template/src/components/SdkApiContext.tsx

@@ -29,8 +29,6 @@ type SdkApiContextInterface = {
         skipPrecall: boolean;
         preference: {
           disableShareTile: boolean;
-          showBeautyControls: boolean;
-          showQualityControls: boolean;
         };
         promise: extractPromises<_InternalSDKMethodEventsMap['join']>;
       }

package/template/src/components/SettingsView.tsx

@@ -54,8 +54,6 @@ import {
   settingPanelNameInputLabel,
 } from '../../src/language/default-labels/videoCallScreenLabels';
 import {LogSource, logger} from '../logger/AppBuilderLogger';
-import BeautyEffectsControls from './beauty-effect/BeautyEffectsControls';
-import QualityControls from './quality-profiles/QualityControls';
 
 interface EditNameProps {}
 const EditName: React.FC = (props?: EditNameProps) => {
@@ -284,9 +282,6 @@ const SettingsView = props => {
   const {currentLayout} = useLayout();
   const {transcriptHeight} = useCaptionWidth();
   const {roomPreference} = useRoomInfo();
-  const showBeautyControls = roomPreference?.showBeautyControls;
-
-  const showQualityControls = roomPreference?.showQualityControls;
 
   return (
     <View
@@ -310,15 +305,6 @@ const SettingsView = props => {
         {hideName ? <></> : <EditName />}
         {isWebInternal() && <SelectDevice isIconDropdown />}
         <LanguageSelector />
-        {showBeautyControls ? (
-          <View style={style.panelContainer}>
-            <BeautyEffectsControls />
-          </View>
-        ) : (
-          <></>
-        )}
-        <Spacer size={24} />
-        {showQualityControls ? <QualityControls /> : <></>}
       </ScrollView>
     </View>
   );

package/template/src/components/room-info/useRoomInfo.tsx

@@ -116,8 +116,6 @@ export const RoomInfoDefaultValue: RoomInfoContextInterface = {
   },
   roomPreference: {
     disableShareTile: false,
-    showBeautyControls: false,
-    showQualityControls: false,
   },
 };
 

package/template/src/components/virtual-background/useVB.tsx

@@ -17,6 +17,7 @@ import {PropsContext, ToggleState} from '../../../agora-rn-uikit';
 import {isMobileUA} from '../../utils/common';
 import {retrieveImagesFromStorage} from './VButils';
 import imagePathsArray from './imagePaths';
+import {LogSource, logger} from '../../logger/AppBuilderLogger';
 
 export type VBMode = 'blur' | 'image' | 'custom' | 'none';
 
@@ -38,17 +39,26 @@ let previewViewProcessor: ReturnType<
 
 // fn to initialize processors
 const initializeProcessors = () => {
-  const mainViewExtension = new VirtualBackgroundExtension();
-  AgoraRTC.registerExtensions([mainViewExtension]);
-  mainViewProcessor = mainViewExtension.createProcessor();
-  mainViewProcessor.init(wasm1).then(() => {
-    mainViewProcessor.disable();
-  });
+  try {
+    const mainViewExtension = new VirtualBackgroundExtension();
+    AgoraRTC.registerExtensions([mainViewExtension]);
+    mainViewProcessor = mainViewExtension.createProcessor();
+    mainViewProcessor.init(wasm1).then(() => {
+      mainViewProcessor.disable();
+    });
 
-  previewViewProcessor = mainViewExtension.createProcessor();
-  previewViewProcessor.init(wasm1).then(() => {
-    previewViewProcessor.disable();
-  });
+    previewViewProcessor = mainViewExtension.createProcessor();
+    previewViewProcessor.init(wasm1).then(() => {
+      previewViewProcessor.disable();
+    });
+  } catch (error) {
+    logger.error(
+      LogSource.Internals,
+      'VIRTUAL_BACKGROUND',
+      'Failed to initiate VirtualBackgroundExtension',
+      error,
+    );
+  }
 };
 
 type VirtualBackgroundConfig = {

package/template/src/logger/AppBuilderLogger.tsx

@@ -276,9 +276,7 @@ export default class AppBuilderLogger implements Logger {
       LogSource.Internals,
       'AUTH',
       'App intitialized with config.json',
-      {
-        config: configJSON,
-      },
+      configJSON,
     );
   }
 

package/template/src/logger/transports/customer-transport.ts

@@ -30,12 +30,39 @@ export function getCircularReplacer() {
   //   return value;
   // };
 }
+
+function getTopLevels(obj, level = 1, maxLevel = 4) {
+  if (level > maxLevel || typeof obj !== 'object' || obj === null) {
+    return ['MaxLevelExceeds'];
+  }
+  const result = {};
+  for (const key in obj) {
+    if (obj.hasOwnProperty(key)) {
+      if (typeof obj[key] === 'object' && obj[key] !== null) {
+        if (key === 'logContent') {
+          result[key] = [obj[key]];
+        } else {
+          result[key] = getTopLevels(obj[key], level + 1, maxLevel);
+        }
+      } else {
+        result[key] = obj[key];
+      }
+    }
+  }
+  return result;
+}
+
 const getSafeBody = (p: any[]) => {
   try {
-    return JSON.stringify(p, getCircularReplacer());
+    const logResult = [];
+    for (let index = 0; index < p.length; index++) {
+      const element = p[index];
+      logResult.push(getTopLevels(element));
+    }
+    return JSON.stringify(logResult);
   } catch (error) {
-    console.error('there was an error converting this object', p);
-    return [' object convertion error'];
+    console.error('there was an error converting this object', error, p);
+    return ['object convertion error'];
   }
 };
 
@@ -121,7 +148,7 @@ export const initTransportLayerForCustomers = () => {
       service: 'app-builder-core-frontend-customer',
       logType,
       logMessage,
-      logContent,
+      logContent: getTopLevels(logContent),
       contextInfo,
       ...columns,
     });

package/template/src/utils/SdkMethodEvents.ts

@@ -13,8 +13,6 @@ export interface SdkMethodEvents {
     username?: string,
     preference?: {
       disableShareTile: boolean;
-      showBeautyControls: boolean;
-      showQualityControls: boolean;
     },
   ): RoomInfoContextInterface['data'];
   microphoneDevice: (deviceId: deviceId) => void;

package/template/src/utils/useJoinRoom.ts

@@ -81,8 +81,6 @@ const JOIN_CHANNEL_PHRASE = gql`
 
 export interface joinRoomPreference {
   disableShareTile: boolean;
-  showBeautyControls: boolean;
-  showQualityControls: boolean;
 }
 
 export default function useJoinRoom() {

package/template/src/atoms/CustomSlider.tsx

@@ -1,117 +0,0 @@
-import React from 'react';
-import {Appearance, View, StyleSheet, Platform} from 'react-native';
-import {TextInput} from 'react-native-gesture-handler';
-import {
-  GestureHandlerRootView,
-  GestureDetector,
-  Gesture,
-} from 'react-native-gesture-handler';
-import Animated, {
-  useSharedValue,
-  useAnimatedStyle,
-  useAnimatedProps,
-} from 'react-native-reanimated';
-
-const INITIAL_BOX_SIZE = 50;
-const SLIDER_WIDTH = 300;
-
-const AnimatedTextInput = Animated.createAnimatedComponent(TextInput);
-
-const Slider = () => {
-  const colorScheme = Appearance.getColorScheme();
-  const offset = useSharedValue(0);
-  const boxWidth = useSharedValue(INITIAL_BOX_SIZE);
-  const MAX_VALUE = SLIDER_WIDTH - INITIAL_BOX_SIZE;
-
-  const pan = Gesture.Pan().onChange(event => {
-    offset.value = Math.min(
-      MAX_VALUE,
-      Math.max(0, offset.value + event.changeX),
-    );
-
-    const newWidth = INITIAL_BOX_SIZE + offset.value;
-    boxWidth.value = newWidth;
-  });
-
-  const boxStyle = useAnimatedStyle(() => {
-    return {
-      width: INITIAL_BOX_SIZE + offset.value,
-    };
-  });
-
-  const sliderStyle = useAnimatedStyle(() => {
-    return {
-      transform: [{translateX: offset.value}],
-    };
-  });
-
-  const animatedBoxTextColor = {
-    color: colorScheme === 'light' ? '#001a72' : '#f8f9ff',
-  };
-
-  const animatedProps = useAnimatedProps(() => {
-    return {
-      text: `Box width: ${Math.round(boxWidth.value)}`,
-      defaultValue: `Box width: ${boxWidth.value}`,
-    };
-  });
-
-  return (
-    <GestureHandlerRootView style={styles.container}>
-      {/* Remove the TextInput if you don't want to show the box width */}
-      {/* <AnimatedTextInput
-        animatedProps={animatedProps}
-        style={[animatedBoxTextColor, styles.boxWidthText]}
-        editable={false}
-      /> */}
-      <Animated.View style={[styles.box, boxStyle]} />
-      <View style={styles.sliderTrack}>
-        <GestureDetector gesture={pan}>
-          <Animated.View
-            style={[
-              styles.sliderHandle,
-              sliderStyle,
-              Platform.OS === 'web' && styles.webCursorPointer,
-            ]}
-          />
-        </GestureDetector>
-      </View>
-    </GestureHandlerRootView>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    gap: 32,
-  },
-  sliderTrack: {
-    width: SLIDER_WIDTH,
-    height: 50,
-    backgroundColor: '#82cab2',
-    borderRadius: 25,
-    justifyContent: 'center',
-    padding: 5,
-  },
-  sliderHandle: {
-    width: 40,
-    height: 40,
-    backgroundColor: '#f8f9ff',
-    borderRadius: 20,
-    position: 'absolute',
-    left: 5,
-  },
-  box: {
-    height: INITIAL_BOX_SIZE,
-    backgroundColor: '#b58df1',
-    borderRadius: 10,
-  },
-  // web-specific cursor style
-  webCursorPointer: {
-    cursor: 'pointer',
-  },
-});
-
-export default Slider;

package/template/src/atoms/RangeSlider.tsx

@@ -1,48 +0,0 @@
-import {StyleSheet, Text, View} from 'react-native';
-import React from 'react';
-import {Slider} from '@react-native-assets/slider';
-
-interface RangeSliderProps {
-  value: number;
-  minimumValue: number;
-  maximumValue: number;
-  step: number;
-  onValueChange: (value: number) => void;
-  disabled?: boolean;
-}
-
-const RangeSlider = (props: RangeSliderProps) => {
-  const {value, minimumValue, maximumValue, step, onValueChange, disabled} =
-    props;
-  return (
-    <View>
-      <Slider
-        minimumValue={minimumValue}
-        maximumValue={maximumValue}
-        step={step}
-        value={value}
-        onValueChange={onValueChange}
-        minimumTrackTintColor={
-          disabled
-            ? $config.SEMANTIC_NEUTRAL
-            : $config.PRIMARY_ACTION_BRAND_COLOR
-        }
-        maximumTrackTintColor={$config.SEMANTIC_NEUTRAL}
-        thumbStyle={{backgroundColor: $config.SECONDARY_ACTION_COLOR}}
-        style={styles.slider}
-        enabled={!disabled}
-      />
-    </View>
-  );
-};
-
-export default RangeSlider;
-
-const styles = StyleSheet.create({
-  slider: {
-    // width: 200,
-    height: 40,
-    flexGrow: 1,
-    width: 120,
-  },
-});

package/template/src/components/beauty-effect/BeautyEffectsControls.tsx

@@ -1,158 +0,0 @@
-import {StyleSheet, Text, View, ScrollView} from 'react-native';
-import {
-  useBeautyEffect,
-  type LighteningContrastLevel,
-  type Level,
-} from './useBeautyEffects';
-import React from 'react';
-import Toggle from '../../atoms/Toggle';
-import ThemeConfig from '../../theme';
-import hexadecimalTransparency from '../../utils/hexadecimalTransparency';
-import RangeSlider from '../../atoms/RangeSlider';
-
-const Header = () => (
-  <Text
-    style={{
-      paddingHorizontal: 24,
-      fontWeight: '400',
-      fontSize: ThemeConfig.FontSize.small,
-      color: $config.FONT_COLOR + hexadecimalTransparency['70%'],
-      fontFamily: ThemeConfig.FontFamily.sansPro,
-      paddingVertical: 20,
-      borderBottomWidth: 1,
-      borderBottomColor: $config.INPUT_FIELD_BORDER_COLOR,
-    }}>
-    {'Apply Beauty Effects'}
-  </Text>
-);
-
-const BeautyEffectsControls = () => {
-  const {
-    beautyEffectsOn,
-    setBeautyEffectsOn,
-    lighteningContrastLevel,
-    setLighteningContrastLevel,
-    rednessLevel,
-    setRednessLevel,
-    smoothnessLevel,
-    setSmoothnessLevel,
-    sharpnessLevel,
-    setSharpnessLevel,
-    lighteningLevel,
-    setLighteningLevel,
-  } = useBeautyEffect();
-
-  return (
-    <View>
-      <Header />
-      <ScrollView>
-        <View style={styles.row}>
-          <Text numberOfLines={1} style={styles.label}>
-            Enable Beauty Effects
-          </Text>
-          <View style={styles.toggleContainer}>
-            <Toggle
-              isEnabled={beautyEffectsOn}
-              toggleSwitch={setBeautyEffectsOn}
-            />
-          </View>
-        </View>
-
-        <View style={styles.row}>
-          <Text style={styles.label}>
-            Lightening Contrast: {lighteningContrastLevel}
-          </Text>
-          <RangeSlider
-            minimumValue={0}
-            maximumValue={2}
-            step={1}
-            value={lighteningContrastLevel}
-            onValueChange={value =>
-              setLighteningContrastLevel(value as LighteningContrastLevel)
-            }
-            disabled={!beautyEffectsOn}
-          />
-        </View>
-        <View style={styles.row}>
-          <Text style={styles.label}>
-            Lightening : {lighteningLevel.toFixed(1)}
-          </Text>
-          <RangeSlider
-            minimumValue={0}
-            maximumValue={1}
-            step={0.1}
-            value={lighteningLevel}
-            onValueChange={value => setLighteningLevel(value as Level)}
-            disabled={!beautyEffectsOn}
-          />
-        </View>
-        <View style={styles.row}>
-          <Text style={styles.label}>
-            Smoothness : {smoothnessLevel.toFixed(1)}
-          </Text>
-          <RangeSlider
-            minimumValue={0}
-            maximumValue={1}
-            step={0.1}
-            value={smoothnessLevel}
-            onValueChange={value => setSmoothnessLevel(value as Level)}
-            disabled={!beautyEffectsOn}
-          />
-        </View>
-        <View style={styles.row}>
-          <Text style={styles.label}>
-            Sharpness : {sharpnessLevel.toFixed(1)}
-          </Text>
-
-          <RangeSlider
-            minimumValue={0}
-            maximumValue={1}
-            step={0.1}
-            value={sharpnessLevel}
-            onValueChange={value => setSharpnessLevel(value as Level)}
-            disabled={!beautyEffectsOn}
-          />
-        </View>
-        <View style={styles.row}>
-          <Text style={styles.label}>Redness : {rednessLevel.toFixed(1)}</Text>
-          <RangeSlider
-            minimumValue={0}
-            maximumValue={1}
-            step={0.1}
-            value={rednessLevel}
-            onValueChange={value => setRednessLevel(value as Level)}
-            disabled={!beautyEffectsOn}
-          />
-        </View>
-      </ScrollView>
-    </View>
-  );
-};
-
-export default BeautyEffectsControls;
-
-const styles = StyleSheet.create({
-  row: {
-    flexDirection: 'row',
-    paddingHorizontal: 24,
-    paddingTop: 12,
-    paddingBottom: 12,
-    flex: 1,
-    justifyContent: 'space-between',
-    alignItems: 'center',
-  },
-  toggleContainer: {
-    flex: 0.2,
-    alignItems: 'flex-end',
-    alignSelf: 'center',
-  },
-  RangeSliderContainer: {
-    marginBottom: 20,
-  },
-  label: {
-    fontFamily: ThemeConfig.FontFamily.sansPro,
-    fontWeight: '400',
-    fontSize: ThemeConfig.FontSize.normal,
-    color: $config.FONT_COLOR + hexadecimalTransparency['70%'],
-  },
-});

package/template/src/components/quality-profiles/QualityControls.tsx

@@ -1,76 +0,0 @@
-import {StyleSheet, Text, ScrollView} from 'react-native';
-import React from 'react';
-import ThemeConfig from '../../theme';
-import Dropdown from '../../atoms/Dropdown';
-import {
-  useVideoQuality,
-  videoProfilesArray,
-  screenShareProfilesArray,
-} from '../../app-state/useVideoQuality';
-import Spacer from '../../atoms/Spacer';
-
-const QualityControls = () => {
-  const {
-    currentVideoQuality,
-    setVideoQuality,
-    currentScreenShareQuality,
-    setScreenShareQuality,
-  } = useVideoQuality();
-  const videoProfiles = videoProfilesArray.map(profile => ({
-    label: profile,
-    value: profile,
-  }));
-  const screenShareProfiles = screenShareProfilesArray.map(profile => ({
-    label: profile,
-    value: profile,
-  }));
-
-  const OnVideoProfileChange = ({label, value}) => {
-    setVideoQuality(value);
-  };
-
-  const onScreenShareProfileChange = ({label, value}) => {
-    setScreenShareQuality(value);
-  };
-
-  if (
-    typeof currentVideoQuality !== 'string' ||
-    typeof currentScreenShareQuality !== 'string'
-  ) {
-    return;
-  }
-
-  return (
-    <ScrollView>
-      <Text style={styles.label}>{'Video Profile'}</Text>
-      <Dropdown
-        data={videoProfiles}
-        enabled={true}
-        label={currentVideoQuality}
-        onSelect={OnVideoProfileChange}
-        selectedValue={currentVideoQuality}
-      />
-      <Spacer size={24} />
-      <Text style={styles.label}>{'Screen Share Profile'}</Text>
-      <Dropdown
-        data={screenShareProfiles}
-        enabled={true}
-        label={currentScreenShareQuality}
-        onSelect={onScreenShareProfileChange}
-        selectedValue={currentScreenShareQuality}
-      />
-    </ScrollView>
-  );
-};
-
-export default QualityControls;
-
-const styles = StyleSheet.create({
-  label: {
-    fontWeight: '400',
-    fontSize: ThemeConfig.FontSize.small,
-    color: $config.FONT_COLOR,
-    fontFamily: ThemeConfig.FontFamily.sansPro,
-    marginBottom: 12,
-  },
-});