agora-appbuilder-core 4.0.0-beta.32 → 4.0.0-beta.33

package/package.json

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

package/template/agora-rn-uikit/src/Views/MaxVideoView.tsx

@@ -13,13 +13,18 @@ interface MaxViewInterface {
   fallback?: React.ComponentType;
   containerStyle?: ViewStyle;
   landscapeMode?: boolean;
+  isPrecallScreen?: boolean;
 }
 
 const MaxVideoView: React.FC<MaxViewInterface> = (props) => {
   const {styleProps, rtcProps} = useContext(PropsContext);
   const {maxViewStyles} = styleProps || {};
   const Fallback = props.fallback;
-  const {containerStyle = {}, landscapeMode = false} = props;
+  const {
+    containerStyle = {},
+    landscapeMode = false,
+    isPrecallScreen = false,
+  } = props;
   const localUid = useLocalUid();
   const uid = props.user.uid === rtcProps?.screenShareUid ? 1 : props.user.uid;
   let landscapeModeStyle = {};
@@ -32,7 +37,12 @@ const MaxVideoView: React.FC<MaxViewInterface> = (props) => {
   }
   return uid === localUid ? (
     props.user.video ? (
-      <LocalView style={containerStyle} renderMode={VideoRenderMode.Fit} />
+      <LocalView
+        style={containerStyle}
+        renderMode={
+          isPrecallScreen ? VideoRenderMode.FILL : VideoRenderMode.Fit
+        }
+      />
     ) : Fallback ? (
       <Fallback />
     ) : (

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

@@ -320,7 +320,33 @@ export default class RtcEngine {
           localVideo = await AgoraRTC.createCameraVideoTrack(videoConfig);
         } catch (e) {
           videoConfig.cameraId = '';
-          localVideo = await AgoraRTC.createCameraVideoTrack(videoConfig);
+          try {
+            localVideo = await AgoraRTC.createCameraVideoTrack(videoConfig);
+          } catch (e) {
+            console.log(
+              '[RTCEngineBridge]: Provided cameraId and default camera failed, trying other available devices',
+            );
+            const devices = await navigator.mediaDevices.enumerateDevices();
+            for (let device of devices) {
+              if (device.kind === 'videoinput') {
+                videoConfig.cameraId = device.deviceId;
+                try {
+                  localVideo = await AgoraRTC.createCameraVideoTrack(
+                    videoConfig,
+                  );
+                  break;
+                } catch (e) {
+                  videoError = e;
+                  console.log(
+                    '[RTCEngineBridge]:',
+                    'Camera not available with deviceId' + device,
+                    'Reason: ',
+                    e,
+                  );
+                }
+              }
+            }
+          }
         }
         this.localStream.video = localVideo;
         this.videoDeviceId = localVideo

package/template/react-native-toast-message/index.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ViewStyle, TextStyle, ImageSourcePropType } from 'react-native';
-
+import { IconsInterface } from '../src/atoms/CustomIcon';
 declare module 'react-native-toast-message' {
   interface AnyObject {
     [key: string]: any;
@@ -57,6 +57,7 @@ declare module 'react-native-toast-message' {
       onHide?: () => void;
       onPress?: () => void;
       leadingIcon?: React.ReactNode;
+      leadingIconName?: keyof IconsInterface;
     }): void;
 
     static hide(): void;

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

@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
 import Icon from '../icon';
 import { icons } from '../../assets';
 import { stylePropType } from '../../utils/prop-types';
-import styles, { HEIGHT } from './styles';
+import styles from './styles';
 
 function BaseToast({
   leadingIcon,
@@ -26,7 +26,7 @@ function BaseToast({
   return (
     <TouchableOpacity
       testID='rootView'
-      style={[styles.base, styles.borderTop, style]}
+      style={[styles.base, style]}
       onPress={onPress}
       activeOpacity={onPress ? activeOpacity : 1}>
       <View
@@ -37,43 +37,31 @@ function BaseToast({
             style={{
               flex: 1,
               flexDirection: 'row',
-              justifyContent: 'space-between'
+              alignItems: 'center'
             }}>
-            <View
-              style={{
-                flexDirection: 'row',
-                flex: 1
-              }}>
-              {leadingIcon ? leadingIcon : <></>}
-              <Text
-                testID='text1'
-                style={[styles.text1, text1Style]}
-                numberOfLines={text1NumberOfLines}>
-                {text1}
-              </Text>
-            </View>
-            <View style={{ justifyContent: 'flex-start', alignSelf: 'center' }}>
-              {trailingIcon ? trailingIcon : <></>}
-            </View>
-          </View>
-        )}
-        {(text2 || text2?.length > 0) && (
-          <View>
+            {leadingIcon ? leadingIcon : <></>}
+
             <Text
-              testID='text2'
-              style={[styles.text2, text2Style]}
-              numberOfLines={text2NumberOfLines}>
-              {text2}
+              testID='text1'
+              style={[styles.text1, text1Style]}
+              numberOfLines={text1NumberOfLines}>
+              {text1}
             </Text>
           </View>
         )}
+        {(text2 || text2?.length > 0) && (
+          <Text
+            testID='text2'
+            style={[styles.text2, text2Style]}
+            numberOfLines={text2NumberOfLines}>
+            {text2}
+          </Text>
+        )}
         {primaryBtn || secondaryBtn ? (
           <View
             style={{
-              flex: 1,
               flexDirection: 'row',
-              paddingTop: 32,
-              paddingBottom: 24
+              paddingTop: 16
             }}>
             {primaryBtn ? primaryBtn : <></>}
             {secondaryBtn ? secondaryBtn : <></>}
@@ -82,12 +70,11 @@ function BaseToast({
           <></>
         )}
       </View>
+      {trailingIcon ? trailingIcon : <></>}
     </TouchableOpacity>
   );
 }
 
-BaseToast.HEIGHT = HEIGHT;
-
 BaseToast.propTypes = {
   leadingIcon: PropTypes.node,
   trailingIcon: PropTypes.node,
@@ -106,6 +93,7 @@ BaseToast.propTypes = {
 BaseToast.defaultProps = {
   leadingIcon: null,
   trailingIcon: null,
+  leadingIconName: null,
   text1: undefined,
   text2: undefined,
   onPress: undefined,

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

@@ -1,40 +1,37 @@
-import { StyleSheet } from 'react-native';
-import colors from '../../colors';
-
-export const HEIGHT = 105;
+import { StyleSheet, Platform } from 'react-native';
 
 export default StyleSheet.create({
   base: {
     flexDirection: 'row',
-    height: HEIGHT,
-    borderRadius: 6,
-    backgroundColor: colors.white,
+    borderRadius: 4,
+    borderTopWidth: 4,
+    backgroundColor: $config.CARD_LAYER_4_COLOR,
+    width: '100%',
+    paddingHorizontal: Platform.OS === 'android' ? 16 : 24,
+    paddingVertical: 16,
+    height: 'auto',
     shadowOffset: { width: 0, height: 0 },
     shadowOpacity: 0.1,
     shadowRadius: 6,
     elevation: 2
   },
-  borderTop: {
-    borderTopWidth: 5,
-    borderTopColor: colors.alto
-  },
   contentContainer: {
-    paddingLeft: 20,
     flex: 1,
-    flexDirection: 'row',
+    overflow: 'hidden',
+    flexDirection: 'column',
     justifyContent: 'flex-start'
   },
   text1: {
-    fontSize: 15,
+    fontSize: 14,
+    lineHeight: 22,
     fontFamily: 'Source Sans Pro',
-    width: '100%',
-    fontWeight: '600',
-    marginRight: 2
+    fontWeight: '700'
   },
   text2: {
-    fontSize: 15,
-    fontFamily: 'Source Sans Pro',
-    width: '100%',
-    fontWeight: '400'
+    marginTop: 4,
+    fontSize: 14,
+    lineHeight: 22,
+    fontWeight: '400',
+    fontFamily: 'Source Sans Pro'
   }
 });

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

@@ -2,7 +2,7 @@ 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';
-import styles, { HEIGHT } from './base/styles';
+import styles from './base/styles';
 import Checkbox from '../../../src/subComponents/Checkbox';
 import PrimaryButton from '../../../src/atoms/PrimaryButton';
 import TertiaryButton from '../../../src/atoms/TertiaryButton';
@@ -30,7 +30,7 @@ function BaseToast({
   return (
     <TouchableOpacity
       testID='rootView'
-      style={[styles.base, styles.borderTop, style]}
+      style={[styles.base, style]}
       onPress={onPress}
       activeOpacity={onPress ? activeOpacity : 1}>
       <View
@@ -76,9 +76,7 @@ function BaseToast({
             style={{
               flex: 1,
               flexDirection: 'row',
-              paddingTop: 16,
-              paddingBottom: 8,
-              marginLeft: 4
+              paddingTop: 12
             }}
             onPress={() => {
               setChecked((e) => !e);
@@ -97,19 +95,22 @@ function BaseToast({
         {primaryBtn || secondaryBtn ? (
           <View
             style={{
-              flex: 1,
               flexDirection: 'row',
-              paddingTop: 16,
-              paddingBottom: 24
+              marginTop: 16
             }}>
             {primaryBtn && (
               <PrimaryButton
-                textStyle={{ fontWeight: '600', fontSize: 16, paddingLeft: 0 }}
+                textStyle={{
+                  fontWeight: '600',
+                  fontSize: 14,
+                  lineHeight: 14,
+                  paddingLeft: 0
+                }}
                 containerStyle={{
-                  height: 40,
+                  height: 32,
                   borderRadius: 4,
-                  paddingVertical: 0,
-                  paddingHorizontal: 12,
+                  paddingVertical: 9,
+                  paddingHorizontal: 20,
                   minWidth: 'unset'
                 }}
                 {...primaryBtn}
@@ -121,11 +122,17 @@ function BaseToast({
             )}
             {secondaryBtn && (
               <TertiaryButton
-                textStyle={{ fontWeight: '600', fontSize: 16, paddingLeft: 0 }}
+                textStyle={{
+                  fontWeight: '600',
+                  fontSize: 14,
+                  paddingLeft: 0,
+                  lineHeight: 14
+                }}
                 containerStyle={{
-                  height: 40,
-                  marginLeft: 16,
-                  paddingVertical: 0
+                  height: 32,
+                  marginLeft: 12,
+                  paddingVertical: 9,
+                  paddingHorizontal: 20
                 }}
                 {...secondaryBtn}
                 onPress={(e) => {
@@ -143,8 +150,6 @@ function BaseToast({
   );
 }
 
-BaseToast.HEIGHT = HEIGHT;
-
 BaseToast.propTypes = {
   leadingIcon: PropTypes.node,
   trailingIcon: PropTypes.node,

package/template/react-native-toast-message/src/index.js

@@ -255,8 +255,9 @@ class Toast extends Component {
   }
 
   async show(options = {}) {
+    const { update = false } = options;
     const { inProgress, isVisible } = this.state;
-    if (inProgress || isVisible) {
+    if ((inProgress || isVisible) && !update) {
       await this.hide();
     }
 
@@ -381,6 +382,7 @@ class Toast extends Component {
           'text1',
           'text2',
           'leadingIcon',
+          'leadingIconName',
           'hide',
           'show',
           'onPress',

package/template/react-native-toast-message/src/index.sdk.tsx

@@ -254,8 +254,9 @@ class Toast extends Component {
   }
 
   async show(options = {}) {
+    const { update = false } = options;
     const { inProgress, isVisible } = this.state;
-    if (inProgress || isVisible) {
+    if ((inProgress || isVisible) && !update) {
       await this.hide();
     }
 
@@ -379,6 +380,8 @@ class Toast extends Component {
           'isVisible',
           'text1',
           'text2',
+          'leadingIcon',
+          'leadingIconName',
           'hide',
           'show',
           'onPress',