agora-appbuilder-core 4.0.0-beta.0 → 4.0.0-beta.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agora-appbuilder-core",
-  "version": "4.0.0-beta.0",
+  "version": "4.0.0-beta.10",
   "description": "React Native template for RTE app builder",
   "main": "index.js",
   "files": [
@@ -10,7 +10,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 feature/redesign/ui-kit",
-    "deps": "cd template && npm i && npx react-native link",
+    "deps": "cd template && npm i",
     "dev-setup": "npm run uikit && npm run deps && node devSetup.js",
     "web-build": "cd template && npm run web:build && cd .. && npm run copy-vercel",
     "copy-vercel": "cp -r Builds/web template/dist && cp vercel.json template/dist",

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

@@ -331,31 +331,34 @@ const Create = ({
         });
 
         engine.current.addListener('AudioVolumeIndication', (...args) => {
-          const [remoteUserVolumes, localUserVolume] = args;
-          const localUserObj = {
-            uid: rtcProps.uid,
-            volume: localUserVolume,
-          };
-          const volumes = [...remoteUserVolumes, localUserObj];
-          /* finding obj with highest volume level from local & remote users*/
-          const highestvolumeObj = volumes.reduce(function (prev, current) {
-            return prev.volume > current.volume ? prev : current;
-          });
-
-          const activeSpeakerUid = highestvolumeObj
-            ? highestvolumeObj.uid
-            : undefined;
-          // console.log('highest volume obj', highestvolumeObj);
-
-          highestvolumeObj.volume > 0 &&
-            dispatch({
-              type: 'ActiveSpeakerDetected',
-              value: [activeSpeakerUid],
-            });
+          // console.log('-- AudioVolumeCallback', args);
+          const [speakers, totalVolume] = args;
+          if (speakers[0]?.uid === 0) {
+            //callback for local user
+            const isLocalUserSpeaking = speakers[0].vad; //1-speaking ,  0-not speaking
+            const localUserVolumeLevel = speakers[0].volume;
+            // vad value is not consistent while speaking so using volume level
+            if (localUserVolumeLevel > 0) {
+              dispatch({
+                type: 'ActiveSpeakerDetected',
+                value: [rtcProps.uid],
+              });
+            } else {
+              dispatch({
+                type: 'ActiveSpeakerDetected',
+                value: [undefined],
+              });
+            }
+          } else {
+            // remote users callback, this will be handeled in ActiveSpeaker callback(367)
+            // const highestvolumeObj = speakers.reduce(function (prev, current) {
+            //   return prev.volume > current.volume ? prev : current;
+            // }, null);
+          }
         });
 
         engine.current.addListener('ActiveSpeaker', (...args) => {
-          // used as a callback from the web bridge
+          // used as a callback from the web bridge as well remote users
           dispatch({
             type: 'ActiveSpeakerDetected',
             value: args,

package/template/android/app/src/main/AndroidManifest.xml

@@ -1,40 +1,34 @@
-<manifest xmlns:android="http://schemas.android.com/apk/res/android"
+<manifest
+	xmlns:android="http://schemas.android.com/apk/res/android"
   package="com.helloworld">
-
-    <uses-permission android:name="android.permission.INTERNET" />
-     <!-- for bg audio , foreground service -->
-    <uses-permission android:name="android.permission.FOREGROUND_SERVICE" />
-    <uses-permission android:name="android.permission.WAKE_LOCK" />
-
-    <application
+	<uses-permission android:name="android.permission.INTERNET" />
+	<uses-permission android:name="android.permission.FOREGROUND_SERVICE" />
+	<uses-permission android:name="android.permission.WAKE_LOCK" />
+	<application
       android:name=".MainApplication"
       android:label="@string/app_name"
       android:icon="@mipmap/ic_launcher"
       android:roundIcon="@mipmap/ic_launcher_round"
       android:allowBackup="false"
       android:theme="@style/AppTheme">
-      
-       <!-- for bg audio , foreground service -->
-      <meta-data android:name="com.supersami.foregroundservice.notification_channel_name" 	android:value="AppBuilder"/> 
-      <meta-data  android:name="com.supersami.foregroundservice.notification_channel_description" android:value="AppBuilder is running"/> 
-      <meta-data  android:name="com.supersami.foregroundservice.notification_color"      android:resource="@color/blue"/> 
-      <service android:name="com.supersami.foregroundservice.ForegroundService"></service> 
-      <service android:name="com.supersami.foregroundservice.ForegroundServiceTask"></service>
-
-      <activity
+		<activity
         android:name=".MainActivity"
         android:label="@string/app_name"
         android:configChanges="keyboard|keyboardHidden|orientation|screenSize|uiMode"
         android:launchMode="singleTask"
         android:windowSoftInputMode="adjustResize"
         android:screenOrientation="portrait"
-          android:exported="true">
-        <intent-filter>
-            <action android:name="android.intent.action.MAIN" />
-            <category android:name="android.intent.category.LAUNCHER" />
-        </intent-filter>
-      </activity>
-      <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
-    </application>
-
+        android:exported="true">
+			<intent-filter>
+				<action android:name="android.intent.action.MAIN" />
+				<category android:name="android.intent.category.LAUNCHER" />
+			</intent-filter>
+		</activity>
+		<activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
+		<meta-data android:name="com.supersami.foregroundservice.notification_channel_name" android:value="AppBuilder"/>
+		<meta-data android:name="com.supersami.foregroundservice.notification_channel_description" android:value="AppBuilder is running"/>
+		<meta-data android:name="com.supersami.foregroundservice.notification_color" android:resource="@color/blue"/>
+		<service android:name="com.supersami.foregroundservice.ForegroundService" />
+		<service android:name="com.supersami.foregroundservice.ForegroundServiceTask" />
+	</application>
 </manifest>

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

@@ -192,8 +192,8 @@ export default class RtcEngine {
   private inScreenshare: Boolean = false;
   private videoProfile: VideoProfile = '480p_9';
   private isPublished = false;
-  private isAudioEnabled = true;
-  private isVideoEnabled = true;
+  private isAudioEnabled = false;
+  private isVideoEnabled = false;
   private isAudioPublished = false;
   private isVideoPublished = false;
   private isJoined = false;
@@ -229,6 +229,10 @@ export default class RtcEngine {
     try {
       let localAudio = await AgoraRTC.createMicrophoneAudioTrack(audioConfig);
       this.localStream.audio = localAudio;
+      this.audioDeviceId = localAudio
+        ?.getMediaStreamTrack()
+        .getSettings().deviceId;
+      this.isAudioEnabled = true;
     } catch (e) {
       let audioError = e;
       e.status = {audioError};
@@ -262,6 +266,14 @@ export default class RtcEngine {
         );
       this.localStream.audio = localAudio;
       this.localStream.video = localVideo;
+      this.audioDeviceId = localAudio
+        ?.getMediaStreamTrack()
+        .getSettings().deviceId;
+      this.videoDeviceId = localVideo
+        ?.getMediaStreamTrack()
+        .getSettings().deviceId;
+      this.isVideoEnabled = true;
+      this.isAudioEnabled = true;
     } catch (e) {
       let audioError = false;
       let videoError = false;
@@ -269,12 +281,20 @@ export default class RtcEngine {
         let localAudio = await AgoraRTC.createMicrophoneAudioTrack(audioConfig);
 
         this.localStream.audio = localAudio;
+        this.audioDeviceId = localAudio
+          ?.getMediaStreamTrack()
+          .getSettings().deviceId;
+        this.isAudioEnabled = true;
       } catch (error) {
         audioError = error;
       }
       try {
         let localVideo = await AgoraRTC.createCameraVideoTrack(videoConfig);
         this.localStream.video = localVideo;
+        this.videoDeviceId = localVideo
+          ?.getMediaStreamTrack()
+          .getSettings().deviceId;
+        this.isVideoEnabled = true;
       } catch (error) {
         videoError = error;
       }

package/template/global.d.ts

@@ -76,7 +76,7 @@ interface ConfigInterface {
   PRIMARY_ACTION_TEXT_COLOR: string;
   SECONDARY_ACTION_COLOR: string;
   FONT_COLOR: string;
-  BACKGROUND_IMAGE: string;
+  BG: string;
   BACKGROUND_COLOR: string;
   VIDEO_AUDIO_TILE_COLOR: string;
   VIDEO_AUDIO_TILE_OVERLAY_COLOR: string;
@@ -85,7 +85,7 @@ interface ConfigInterface {
   SEMANTIC_ERROR: string;
   SEMANTIC_SUCCESS: string;
   SEMANTIC_WARNING: string;
-  SEMANTIC_NETRUAL: string;
+  SEMANTIC_NEUTRAL: string;
   INPUT_FIELD_BACKGROUND_COLOR: string;
   INPUT_FIELD_BORDER_COLOR: string;
   CARD_LAYER_1_COLOR: string;

package/template/index.rsdk.tsx

@@ -18,6 +18,7 @@ import SDKAppWrapper, {
 } from './src/SDKAppWrapper';
 import React from 'react';
 import * as RN from 'react-native-web';
+import './src/assets/font-styles.css';
 
 export * from 'customization-api';
 export * from 'customization-implementation';

package/template/index.wsdk.tsx

@@ -6,7 +6,7 @@ import SDKAppWrapper, {
 import SDKEvents from './src/utils/SdkEvents';
 import React from 'react';
 import * as RN from 'react-native-web';
-
+import './src/assets/font-styles.css';
 export * from 'customization-api';
 export * from 'customization-implementation';
 

package/template/ios/HelloWorld/Info.plist

@@ -53,7 +53,7 @@
 	<key>NSCameraUsageDescription</key>
 	<string>Camera access</string>
 	<key>NSLocationWhenInUseUsageDescription</key>
-	<string></string>
+	<string/>
 	<key>NSMicrophoneUsageDescription</key>
 	<string>Mic access</string>
 	<key>UIAppFonts</key>

package/template/ios/HelloWorld.xcodeproj/project.pbxproj

@@ -18,6 +18,8 @@
 		65580BB1266EDC8000B310B6 /* File.swift in Sources */ = {isa = PBXBuildFile; fileRef = 65580BB0266EDC8000B310B6 /* File.swift */; };
 		65580BB3266EDD6300B310B6 /* HelloWorld.entitlements in Resources */ = {isa = PBXBuildFile; fileRef = 65580BB2266EDCA400B310B6 /* HelloWorld.entitlements */; };
 		81AB9BB82411601600AC10FF /* LaunchScreen.storyboard in Resources */ = {isa = PBXBuildFile; fileRef = 81AB9BB72411601600AC10FF /* LaunchScreen.storyboard */; };
+		49B7B61E43464F098E87335F /* icomoon.ttf in Resources */ = {isa = PBXBuildFile; fileRef = FF34150ABA37458FB48221FB /* icomoon.ttf */; };
+		76624C45E19C435BACC727C7 /* SourceSansPro-Regular.ttf in Resources */ = {isa = PBXBuildFile; fileRef = E72FF36D2A984B10BA9C6F91 /* SourceSansPro-Regular.ttf */; };
 /* End PBXBuildFile section */
 
 /* Begin PBXContainerItemProxy section */
@@ -56,6 +58,8 @@
 		81AB9BB72411601600AC10FF /* LaunchScreen.storyboard */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = file.storyboard; name = LaunchScreen.storyboard; path = HelloWorld/LaunchScreen.storyboard; sourceTree = "<group>"; };
 		ED297162215061F000B7C4FE /* JavaScriptCore.framework */ = {isa = PBXFileReference; lastKnownFileType = wrapper.framework; name = JavaScriptCore.framework; path = System/Library/Frameworks/JavaScriptCore.framework; sourceTree = SDKROOT; };
 		ED2971642150620600B7C4FE /* JavaScriptCore.framework */ = {isa = PBXFileReference; lastKnownFileType = wrapper.framework; name = JavaScriptCore.framework; path = Platforms/AppleTVOS.platform/Developer/SDKs/AppleTVOS12.0.sdk/System/Library/Frameworks/JavaScriptCore.framework; sourceTree = DEVELOPER_DIR; };
+		FF34150ABA37458FB48221FB /* icomoon.ttf */ = {isa = PBXFileReference; name = "icomoon.ttf"; path = "../src/assets/fonts/icomoon.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
+		E72FF36D2A984B10BA9C6F91 /* SourceSansPro-Regular.ttf */ = {isa = PBXFileReference; name = "SourceSansPro-Regular.ttf"; path = "../src/assets/fonts/SourceSansPro-Regular.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
 /* End PBXFileReference section */
 
 /* Begin PBXFrameworksBuildPhase section */
@@ -148,6 +152,7 @@
 				00E356EF1AD99517003FC87E /* HelloWorldTests */,
 				83CBBA001A601CBA00E9B192 /* Products */,
 				2D16E6871FA4F8E400B85C8A /* Frameworks */,
+				A87D6475B3A64BB58397D417 /* Resources */,
 			);
 			indentWidth = 2;
 			sourceTree = "<group>";
@@ -165,6 +170,16 @@
 			name = Products;
 			sourceTree = "<group>";
 		};
+		A87D6475B3A64BB58397D417 /* Resources */ = {
+			isa = "PBXGroup";
+			children = (
+				FF34150ABA37458FB48221FB /* icomoon.ttf */,
+				E72FF36D2A984B10BA9C6F91 /* SourceSansPro-Regular.ttf */,
+			);
+			name = Resources;
+			sourceTree = "<group>";
+			path = "";
+		};
 /* End PBXGroup section */
 
 /* Begin PBXNativeTarget section */
@@ -304,6 +319,8 @@
 				65580BB3266EDD6300B310B6 /* HelloWorld.entitlements in Resources */,
 				81AB9BB82411601600AC10FF /* LaunchScreen.storyboard in Resources */,
 				13B07FBF1A68108700A75B9A /* Images.xcassets in Resources */,
+				49B7B61E43464F098E87335F /* icomoon.ttf in Resources */,
+				76624C45E19C435BACC727C7 /* SourceSansPro-Regular.ttf in Resources */,
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 		};

package/template/react-native-toast-message/src/components/checkbox.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { View, TouchableOpacity, Text, Pressable } from 'react-native';
 import PropTypes from 'prop-types';
 import { stylePropType } from '../utils/prop-types';
@@ -17,6 +17,7 @@ function BaseToast({
   contentContainerStyle,
   text1Style,
   text2Style,
+  subTextStyle,
   activeOpacity,
   text1NumberOfLines,
   text2NumberOfLines,
@@ -90,7 +91,7 @@ function BaseToast({
                 marginRight: 8
               }}
             />
-            <Text style={{ color: 'white' }}>{checkbox.text}</Text>
+            <Text style={subTextStyle}>{checkbox.text}</Text>
           </Pressable>
         )}
         {primaryBtn || secondaryBtn ? (
@@ -114,6 +115,7 @@ function BaseToast({
                 {...primaryBtn}
                 onPress={(e) => {
                   primaryBtn.onPress(checked, e);
+                  setChecked(false);
                 }}
               />
             )}
@@ -126,6 +128,10 @@ function BaseToast({
                   paddingVertical: 0
                 }}
                 {...secondaryBtn}
+                onPress={(e) => {
+                  secondaryBtn.onPress(checked, e);
+                  setChecked(false);
+                }}
               />
             )}
           </View>
@@ -143,7 +149,7 @@ BaseToast.propTypes = {
   leadingIcon: PropTypes.node,
   trailingIcon: PropTypes.node,
   text1: PropTypes.string,
-  text2: PropTypes.string || PropTypes.element,
+  text2: PropTypes.string || PropTypes.element || PropTypes.any,
   onPress: PropTypes.func,
   style: stylePropType,
   contentContainerStyle: stylePropType,

package/template/src/AppWrapper.tsx

@@ -75,9 +75,7 @@ const AppWrapper = (props: AppWrapperProps) => {
 
   return (
     <AppRoot>
-      <ImageBackgroundComp
-        bg={$config.BACKGROUND_IMAGE}
-        color={$config.BACKGROUND_COLOR}>
+      <ImageBackgroundComp bg={$config.BG} color={$config.BACKGROUND_COLOR}>
         <SafeAreaView
           // @ts-ignore textAlign not supported by TS definitions but is applied to web regardless
           style={[{flex: 1}, Platform.select({web: {textAlign: 'left'}})]}>

package/template/src/assets/font-styles.css

@@ -1,6 +1,8 @@
+@import url("https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600;700&display=swap");
+
 @font-face {
   font-family: 'icomoon';
-  src: url('fonts/icomoon.ttf?6qgqxy') format('truetype');
+  src: url('https://dbudicf5k4as1.cloudfront.net/10/icomoon.ttf') format('truetype');
   font-weight: normal;
   font-style: normal;
   font-display: block;

package/template/src/atoms/Dropdown.tsx

@@ -169,7 +169,7 @@ const Dropdown: FC<Props> = ({
               iconType="plain"
               name={icon}
               iconSize={20}
-              tintColor={$config.SEMANTIC_NETRUAL}
+              tintColor={$config.SEMANTIC_NEUTRAL}
             />
           </View>
         ) : (

package/template/src/atoms/PrimaryButton.tsx

@@ -38,7 +38,7 @@ export default function PrimaryButton(props: PrimaryButtonProps) {
       style={[
         styles.container,
         props?.disabled
-          ? {backgroundColor: $config.SEMANTIC_NETRUAL}
+          ? {backgroundColor: $config.SEMANTIC_NEUTRAL}
           : {backgroundColor: $config.PRIMARY_ACTION_BRAND_COLOR},
         containerStyle ? containerStyle : {},
       ]}

package/template/src/atoms/Toggle.tsx

@@ -20,7 +20,7 @@ const Toggle = (props: SwitchProps) => {
         onValueChange={toggleSwitch}
         disabled={false}
         backgroundActive={$config.PRIMARY_ACTION_BRAND_COLOR}
-        backgroundInactive={$config.SEMANTIC_NETRUAL}
+        backgroundInactive={$config.SEMANTIC_NEUTRAL}
         circleActiveColor={$config.CARD_LAYER_1_COLOR}
         circleInActiveColor={$config.CARD_LAYER_1_COLOR}
         // renderInsideCircle={() => <CustomComponent />} // custom component to render inside the Switch circle (Text, Image, etc.)

package/template/src/components/Controls.tsx

@@ -423,6 +423,7 @@ const style = StyleSheet.create({
     alignItems: 'center',
   },
   centerContent: {
+    zIndex: 2,
     flex: 1,
     flexDirection: 'row',
     justifyContent: 'center',

package/template/src/components/DeviceConfigure.tsx

@@ -224,13 +224,22 @@ const DeviceConfigure: React.FC<Props> = (props: any) => {
     }
   };
 
+  useEffect(() => {
+    const interval = setInterval(() => {
+      navigator.mediaDevices.enumerateDevices();
+    }, 2000);
+    return () => {
+      clearInterval(interval);
+    };
+  }, []);
+
   useEffect(() => {
     // Labels are empty in firefox when permission is granted first time
     // refresh device list if labels are empty
 
     const logTag = 'useEffect[rtc,store]';
 
-    if (activeDeviceId && deviceList.length !== 0) {
+    if (activeDeviceId && deviceList.length > 0) {
       // If stream exists and selected devices are empty, check for devices again
       if (!selectedCam || selectedCam.trim().length == 0) {
         log(logTag, 'cam: Device list populated but No selected cam');
@@ -307,6 +316,7 @@ const DeviceConfigure: React.FC<Props> = (props: any) => {
   const commonOnChangedEvent = async (changedDeviceData: DeviceInfo) => {
     // Extracted devicelist because we want to perform fallback with
     // the most current version.
+    const previousDeviceList = deviceList;
     const updatedDeviceList = await refreshDeviceList();
     const changedDevice = changedDeviceData.device;
 
@@ -330,7 +340,40 @@ const DeviceConfigure: React.FC<Props> = (props: any) => {
 
     log(logTag, changedDeviceData);
 
-    if (changedDeviceData.state === 'ACTIVE') {
+    if (currentDevice === 'default') {
+      // const previousDefaultDevice = previousDeviceList.find(
+      //   (device) => device.deviceId === 'default',
+      // );
+      // const currentDefaultDevice = updatedDeviceList.find(
+      //   (device) => device.deviceId === 'default',
+      // );
+      //   log(logTag, 'current Default device', {
+      //     changedDeviceData,
+      //     previousDeviceList,
+      //     updatedDeviceList,
+      //     previousDefaultDevice,
+      //     currentDefaultDevice,
+      //   });
+      // if (previousDefaultDevice.groupId !== currentDefaultDevice.groupId) {
+      //   log(logTag, 'Default device changed', {
+      //     changedDeviceData,
+      //     previousDeviceList,
+      //     updatedDeviceList,
+      //     previousDefaultDevice,
+      //     currentDefaultDevice,
+      //   });
+      //   setCurrentDevice('default');
+      // }
+      setCurrentDevice('default');
+    }
+
+    const didChangeDeviceExistBefore = previousDeviceList.find(
+      (device) => device.deviceId === changedDevice.deviceId,
+    )
+      ? true
+      : false;
+
+    if (changedDeviceData.state === 'ACTIVE' && !didChangeDeviceExistBefore) {
       const rememberedDevice =
         rememberedDevicesList[changedDevice.kind][changedDevice.deviceId];
 
@@ -348,24 +391,22 @@ const DeviceConfigure: React.FC<Props> = (props: any) => {
         return;
       }
     }
-    if (selectedMic === 'default') {
-      setCurrentDevice('default');
-    }
   };
 
   // Port this to useEffectEvent(https://beta.reactjs.org/reference/react/useEffectEvent) when
   // released
   useEffect(() => {
+    log('previous devicelist updated', deviceList);
     AgoraRTC.onMicrophoneChanged = commonOnChangedEvent;
-  }, [selectedMic]);
+  }, [selectedMic, deviceList]);
 
   useEffect(() => {
     AgoraRTC.onPlaybackDeviceChanged = commonOnChangedEvent;
-  }, [selectedSpeaker]);
+  }, [selectedSpeaker, deviceList]);
 
   useEffect(() => {
     AgoraRTC.onCameraChanged = commonOnChangedEvent;
-  }, [selectedCam]);
+  }, [selectedCam, deviceList]);
 
   const setSelectedMic = (deviceId: deviceId) => {
     log('mic: setting to', deviceId);
@@ -375,7 +416,7 @@ const DeviceConfigure: React.FC<Props> = (props: any) => {
         () => {
           syncSelectedDeviceUi('audioinput');
           updateActiveDeviceId('audioinput', deviceId);
-          res();
+          res(null);
         },
         (e: any) => {
           console.error('DeviceConfigure: Error setting mic', e);
@@ -393,7 +434,7 @@ const DeviceConfigure: React.FC<Props> = (props: any) => {
         () => {
           syncSelectedDeviceUi('videoinput');
           updateActiveDeviceId('videoinput', deviceId);
-          res();
+          res(null);
         },
         (e: any) => {
           console.error('Device Configure: Error setting webcam', e);
@@ -411,7 +452,7 @@ const DeviceConfigure: React.FC<Props> = (props: any) => {
         () => {
           setUiSelectedSpeaker(deviceId);
           updateActiveDeviceId('audiooutput', deviceId);
-          res();
+          res(null);
         },
         (e: any) => {
           console.error('Device Configure: Error setting speaker', e);

package/template/src/components/DeviceContext.tsx

@@ -13,11 +13,11 @@ import {createContext} from 'react';
 
 interface DeviceContext {
   selectedCam: string;
-  setSelectedCam: (cam: string) => void;
+  setSelectedCam: (cam: string) => Promise<any>;
   selectedMic: string;
-  setSelectedMic: (mic: string) => void;
+  setSelectedMic: (mic: string) => Promise<any>;
   selectedSpeaker: string;
-  setSelectedSpeaker: (speaker: string) => void;
+  setSelectedSpeaker: (speaker: string) => Promise<any>;
   deviceList: MediaDeviceInfo[];
   setDeviceList: (devices: MediaDeviceInfo[]) => void;
 }
@@ -27,9 +27,9 @@ const DeviceContext = createContext<DeviceContext>({
   selectedMic: '',
   selectedSpeaker: '',
   deviceList: [],
-  setSelectedCam: () => {},
-  setSelectedMic: () => {},
-  setSelectedSpeaker: () => {},
+  setSelectedCam: async () => {},
+  setSelectedMic: async () => {},
+  setSelectedSpeaker: async () => {},
   setDeviceList: () => {},
 });
 export default DeviceContext;

package/template/src/components/NetworkQualityContext.tsx

@@ -37,7 +37,7 @@ export const networkIconsObject: {
 } = {
   0: {
     icon: 'connection-unsupported',
-    tint: $config.SEMANTIC_NETRUAL,
+    tint: $config.SEMANTIC_NEUTRAL,
     text: 'unknown',
   },
   1: {
@@ -72,12 +72,12 @@ export const networkIconsObject: {
   },
   7: {
     icon: 'connection-unpublished',
-    tint: $config.SEMANTIC_NETRUAL,
+    tint: $config.SEMANTIC_NEUTRAL,
     text: 'unpublished',
   },
   8: {
     icon: 'connection-loading',
-    tint: $config.SEMANTIC_NETRUAL,
+    tint: $config.SEMANTIC_NEUTRAL,
     text: 'loading',
   },
 };

package/template/src/components/PinnedVideo.tsx

@@ -127,10 +127,18 @@ const PinnedVideo: layoutComponent = ({renderData}) => {
             }
             return (
               <Pressable
+                //old
                 //if user pinned somebody then side panel items should not be clickable - swap video should be called
                 //instead we will show replace pin button on hovering the video tile
+                //old
                 disabled={
-                  activeSpeaker || pinnedUid || screenShareOn ? true : false
+                  //old fix
+                  //activeSpeaker || pinnedUid || screenShareOn ? true : false
+                  //old fix
+
+                  //latest fix : pinned video sidepanel layout should not be clickable
+                  //if user hover on it we will show pin for me/replace pin(if someone already pinned) button
+                  true
                 }
                 style={
                   isSidePinnedlayout

package/template/src/components/Precall.native.tsx

@@ -379,7 +379,7 @@ const style = StyleSheet.create({
     fontWeight: '400',
     fontSize: ThemeConfig.FontSize.small,
     lineHeight: 18,
-    color: $config.SEMANTIC_NETRUAL,
+    color: $config.SEMANTIC_NEUTRAL,
     textAlign: 'left',
   },
   btnContainerStyle: {maxWidth: 337, alignSelf: 'center', marginTop: 50},

package/template/src/components/Precall.tsx

@@ -382,7 +382,7 @@ const style = StyleSheet.create({
     fontWeight: '400',
     fontSize: ThemeConfig.FontSize.small,
     lineHeight: 18,
-    color: $config.SEMANTIC_NETRUAL,
+    color: $config.SEMANTIC_NEUTRAL,
     textAlign: 'left',
   },
   btnContainerStyle: {maxWidth: 337, alignSelf: 'center', marginTop: 50},

package/template/src/components/SettingsView.tsx

@@ -116,7 +116,7 @@ const EditName: React.FC = (props?: EditNameProps) => {
             name="person"
             iconSize={20}
             iconType="plain"
-            tintColor={$config.SEMANTIC_NETRUAL}
+            tintColor={$config.SEMANTIC_NEUTRAL}
           />
           <TextInput
             maxLength={maxInputLimit}