agora-appbuilder-core 4.0.0-beta.8 → 4.0.0

package/package.json

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

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/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';
@@ -115,6 +115,7 @@ function BaseToast({
                 {...primaryBtn}
                 onPress={(e) => {
                   primaryBtn.onPress(checked, e);
+                  setChecked(false);
                 }}
               />
             )}
@@ -127,6 +128,10 @@ function BaseToast({
                   paddingVertical: 0
                 }}
                 {...secondaryBtn}
+                onPress={(e) => {
+                  secondaryBtn.onPress(checked, e);
+                  setChecked(false);
+                }}
               />
             )}
           </View>
@@ -144,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/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/components/DeviceConfigure.tsx

@@ -239,7 +239,7 @@ const DeviceConfigure: React.FC<Props> = (props: any) => {
 
     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');
@@ -416,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);
@@ -434,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);
@@ -452,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/pages/video-call/ActionSheetContent.tsx

@@ -180,7 +180,7 @@ const SettingsIcon = (props: SettingsIconProps) => {
       <TouchableOpacity style={styles.iconContainer} onPress={onPress}>
         <ImageIcon
           name={'settings'}
-          tintColor={$config.PRIMARY_ACTION_TEXT_COLOR}
+          tintColor={$config.SECONDARY_ACTION_COLOR}
         />
       </TouchableOpacity>
       {$config.ICON_TEXT && <Text style={styles.iconText}>Settings</Text>}

package/template/src/subComponents/LocalSwitchCamera.tsx

@@ -30,16 +30,13 @@ function LocalSwitchCamera(props: LocalSwitchCameraProps) {
       name: 'switch-camera',
       tintColor:
         isVideoEnabled || !disabled
-          ? $config.PRIMARY_ACTION_TEXT_COLOR
+          ? $config.SECONDARY_ACTION_COLOR
           : $config.SEMANTIC_NEUTRAL,
     },
     disabled: !isVideoEnabled || disabled ? true : false,
     onPress: onPress,
   };
 
-  iconButtonProps.style = Styles.localButton as Object;
-  iconButtonProps.btnTextProps = showLabel ? switchCameraButtonText : '';
-
   return props?.render ? (
     props.render(onPress, isVideoEnabled)
   ) : (

package/template/src/subComponents/SelectDevice.tsx

@@ -107,9 +107,9 @@ const SelectVideoDevice = (props: SelectVideoDeviceProps) => {
     if (isPendingUpdate) {
       selectedDeviceExists && setIsPendingUpdate(false);
     } else {
-      !selectedDeviceExists && setIsPendingUpdate(true);
+      !selectedDeviceExists && data?.length && setIsPendingUpdate(true);
     }
-  }, [selectedCam, deviceList]);
+  }, [selectedCam, data]);
 
   const isPermissionGranted =
     local.permissionStatus === PermissionState.GRANTED_FOR_CAM_AND_MIC ||
@@ -121,7 +121,7 @@ const SelectVideoDevice = (props: SelectVideoDeviceProps) => {
       <Text style={style.label}>Camera</Text>
       <Dropdown
         icon={
-          isPendingUpdate
+          isPendingUpdate && isPermissionGranted
             ? 'connection-loading'
             : props?.isIconDropdown
             ? 'video-on'
@@ -133,7 +133,7 @@ const SelectVideoDevice = (props: SelectVideoDeviceProps) => {
             ? 'No Camera Detected'
             : isPendingUpdate
             ? 'Updating'
-            : ''
+            : 'No Camera Selected'
         }
         data={isPermissionGranted ? data : []}
         onSelect={({label, value}) => {
@@ -194,9 +194,9 @@ const SelectAudioDevice = (props: SelectAudioDeviceProps) => {
     if (isPendingUpdate) {
       selectedDeviceExists && setIsPendingUpdate(false);
     } else {
-      !selectedDeviceExists && setIsPendingUpdate(true);
+      !selectedDeviceExists && data?.length && setIsPendingUpdate(true);
     }
-  }, [selectedMic, deviceList]);
+  }, [selectedMic, data]);
 
   const isPermissionGranted =
     local.permissionStatus === PermissionState.GRANTED_FOR_CAM_AND_MIC ||
@@ -208,7 +208,7 @@ const SelectAudioDevice = (props: SelectAudioDeviceProps) => {
       <Text style={style.label}>Microphone</Text>
       <Dropdown
         icon={
-          isPendingUpdate
+          isPendingUpdate && isPermissionGranted
             ? 'connection-loading'
             : props?.isIconDropdown
             ? 'mic-on'
@@ -221,7 +221,7 @@ const SelectAudioDevice = (props: SelectAudioDeviceProps) => {
             ? 'No Microphone Detected'
             : isPendingUpdate
             ? 'Updating'
-            : ''
+            : 'No Microphone Selected'
         }
         data={isPermissionGranted ? data : []}
         onSelect={({label, value}) => {
@@ -283,9 +283,9 @@ const SelectSpeakerDevice = (props: SelectSpeakerDeviceProps) => {
     if (isPendingUpdate) {
       selectedDeviceExists && setIsPendingUpdate(false);
     } else {
-      !selectedDeviceExists && setIsPendingUpdate(true);
+      !selectedDeviceExists && data?.length && setIsPendingUpdate(true);
     }
-  }, [selectedSpeaker, deviceList]);
+  }, [selectedSpeaker, data]);
 
   return props?.render ? (
     props.render(

package/template/src/utils/useMuteToggleLocal.ts

@@ -13,7 +13,7 @@ import {useLocalUserInfo, useRtc} from 'customization-api';
 import {useContext, useEffect, useRef, useState} from 'react';
 
 import {ToggleState} from '../../agora-rn-uikit/src/Contexts/PropsContext';
-import {isWebInternal} from './common';
+import {isMobileUA, isWebInternal} from './common';
 import {AppState} from 'react-native';
 
 export enum MUTE_LOCAL_TYPE {
@@ -32,7 +32,7 @@ function useMuteToggleLocal() {
   const isCamON = useRef(local.video);
 
   useEffect(() => {
-    if ($config.AUDIO_ROOM) return;
+    if ($config.AUDIO_ROOM || !isMobileUA()) return;
     const subscription = AppState.addEventListener('change', (nextAppState) => {
       appState.current = nextAppState;
       setAppStateVisible(appState.current);

package/template/web/index.html

@@ -5,7 +5,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600;700&display=swap" rel="stylesheet">
+    <!-- moved to template/src/assets/font-styles.css as it was not available for sdks-->
+    <!-- <link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600;700&display=swap" rel="stylesheet"> -->
 
     <base href="/">
     <title><%= htmlWebpackPlugin.options.title %></title>