agora-appbuilder-core 4.1.6-beta.2 → 4.1.6-beta.4

package/package.json

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

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

@@ -797,8 +797,11 @@ export default class RtcEngine {
         mediaType,
       );
       if (mediaType === 'audio') {
-        const {audio, ...rest} = this.remoteStreams.get(user.uid);
-        this.remoteStreams.set(user.uid, rest);
+        const data = this.remoteStreams.get(user.uid);
+        try {
+          delete data['audio'];
+        } catch (error) {}
+        this.remoteStreams.set(user.uid, {...data});
         (this.eventsMap.get('onRemoteAudioStateChanged') as callbackType)(
           {},
           user.uid,
@@ -807,8 +810,11 @@ export default class RtcEngine {
           0,
         );
       } else {
-        const {video, ...rest} = this.remoteStreams.get(user.uid);
-        this.remoteStreams.set(user.uid, rest);
+        const data = this.remoteStreams.get(user.uid);
+        try {
+          delete data['video'];
+        } catch (error) {}
+        this.remoteStreams.set(user.uid, {...data});
         (this.eventsMap.get('onRemoteVideoStateChanged') as callbackType)(
           {},
           user.uid,

package/template/defaultConfig.js

@@ -77,8 +77,8 @@ const DefaultConfig = {
   CHAT_ORG_NAME: '',
   CHAT_APP_NAME: '',
   CHAT_URL: '',
-  CLI_VERSION: '3.1.6-beta.2',
-  CORE_VERSION: '4.1.6-beta.2',
+  CLI_VERSION: '3.1.6-beta.4',
+  CORE_VERSION: '4.1.6-beta.4',
   DISABLE_LANDSCAPE_MODE: false,
   STT_AUTO_START: false,
   CLOUD_RECORDING_AUTO_START: false,

package/template/src/ai-agent/ai-interface/AIAgentInterface.tsx

@@ -23,6 +23,17 @@ const AI_ANIMATION_VIDEO = {
   DISCONNECTING: DisconnectingMp4,
 };
 
+const cssHideVideoControls = `
+video {
+  -webkit-appearance: none; /* Remove default styling */
+}
+video::-webkit-media-controls {
+  display: none !important; /* Hide the controls */
+}
+video::-webkit-media-controls-enclosure {
+  display:none !important;
+}`;
+
 export default function AiAgentCustomView({
   connectionState,
 }: CustomAgentInterfaceProps) {
@@ -99,20 +110,42 @@ export default function AiAgentCustomView({
           <Text style={styles.nativeText}>AI Agent...</Text>
         </View>
       ) : (
-        <video
-          autoPlay
-          style={{pointerEvents: 'none'}}
-          loop
-          src={AI_ANIMATION_VIDEO[animation]}
-          width="40%"
-          height="40%"
-        />
+        <div style={styles.videoContainer}>
+          <style type="text/css">{cssHideVideoControls}</style>
+          <video
+            disablePictureInPicture
+            playsInline
+            id="animation-video"
+            autoPlay
+            style={{pointerEvents: 'none'}}
+            loop
+            src={AI_ANIMATION_VIDEO[animation]}
+            width="40%"
+            height="40%"
+          />
+          <div style={styles.overlay} />
+        </div>
       )}
     </View>
   );
 }
 
 const styles = StyleSheet.create({
+  videoContainer: {
+    flex: 1,
+    position: 'relative',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  overlay: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    width: '100%',
+    height: '100%',
+    zIndex: 1,
+  },
   nativeTextContainer: {
     flex: 1,
     justifyContent: 'center',

package/template/src/ai-agent/components/ControlButtons.tsx

@@ -17,7 +17,7 @@ import TranscriptIcon from '../assets/transcript.png';
 //@ts-ignore
 import SettingsIcon from '../assets/settings.png';
 //@ts-ignore
-import DisconnectIcon from '../assets/close.png';
+import LeaveCallIcon from '../assets/leave-call.png';
 
 export const MicButton = () => {
   const {audio} = useLocalUserInfo();
@@ -117,7 +117,7 @@ export const DisconnectButton = () => {
       }}>
       <Image
         style={[styles.iconStyle, {tintColor: $config.FONT_COLOR}]}
-        source={DisconnectIcon}
+        source={LeaveCallIcon}
       />
     </TouchableOpacity>
   );

package/template/src/ai-agent/components/mobile/Bottombar.tsx

@@ -2,13 +2,20 @@ import React from 'react';
 import {ToolbarPreset} from 'customization-api';
 import {AgentControl} from '../AgentControls';
 import {CustomSettingButton, CustomTranscriptButton} from '../Bottombar';
+import {isAndroid, isIOS} from '../../../utils/common';
 
 const Bottombar = () => {
   const AI_LAYOUT = $config.AI_LAYOUT ? $config.AI_LAYOUT : 'LAYOUT_TYPE_1';
   return (
     <ToolbarPreset
       align="bottom"
-      snapPointsMinMax={AI_LAYOUT === 'LAYOUT_TYPE_2' ? [100, 100] : [0, 0]}
+      snapPointsMinMax={
+        isAndroid() || isIOS()
+          ? [100, 100]
+          : AI_LAYOUT === 'LAYOUT_TYPE_2'
+          ? [100, 100]
+          : [0, 0]
+      }
       items={{
         layout: {hide: true},
         invite: {hide: true},

package/template/src/ai-agent/components/mobile/Topbar.tsx

@@ -2,16 +2,26 @@ import React from 'react';
 import {View, StyleSheet, Text} from 'react-native';
 import {useRoomInfo} from 'customization-api';
 import ThemeConfig from '../../../theme';
+import {SettingButton} from '../ControlButtons';
+import {getAILayoutType} from '../../utils';
 
 const MobileTopbar = () => {
   const {
     data: {meetingTitle},
   } = useRoomInfo();
+
   return (
     <View style={style.rootStyle}>
       <View style={style.containerStyle}>
         <Text style={style.textStyle}>{meetingTitle}</Text>
       </View>
+      {getAILayoutType() !== 'LAYOUT_TYPE_2' ? (
+        <View>
+          <SettingButton />
+        </View>
+      ) : (
+        <></>
+      )}
     </View>
   );
 };

package/template/src/ai-agent/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import {CustomizationApiInterface} from 'customization-api';
-import {isMobileUA} from '../utils/common';
+import {isIOS, isAndroid, isMobileUA} from '../utils/common';
 import Bottombar from './components/Bottombar';
 import CustomCreate from './components/CustomCreate';
 import MobileTopBar from './components/mobile/Topbar';
@@ -8,7 +8,7 @@ import MobileBottombar from './components/mobile/Bottombar';
 import CustomChatPanel from './components/CustomChatPanel';
 import CustomSettingsPanel from './components/CustomSettingsPanel';
 import {AgentProvider} from './components/AgentControls/AgentContext';
-
+import {getAILayoutType} from './utils';
 //LAYOUT_TYPE_1
 import NewAnimationLayout from './layout/NewAnimation';
 //LAYOUT_TYPE_2
@@ -20,10 +20,6 @@ const DummyComponent = () => {
   return <></>;
 };
 
-const getAILayoutType = () => {
-  return $config.AI_LAYOUT ? $config.AI_LAYOUT : 'LAYOUT_TYPE_1';
-};
-
 const getTopBarComponent = () => {
   return isMobileUA() || getAILayoutType() !== 'LAYOUT_TYPE_2'
     ? MobileTopBar
@@ -39,7 +35,9 @@ const getBottombarComponent = () => {
 };
 
 const getCustomLayoutComponent = () => {
-  return getAILayoutType() === 'LAYOUT_TYPE_3'
+  return isAndroid() || isIOS()
+    ? AIWithLocalUser
+    : getAILayoutType() === 'LAYOUT_TYPE_3'
     ? ConversationalAILayout
     : getAILayoutType() === 'LAYOUT_TYPE_2'
     ? AIWithLocalUser

package/template/src/ai-agent/layout/ConversationalAI.tsx

@@ -7,18 +7,17 @@ import {
   Image,
   ActivityIndicator,
 } from 'react-native';
-import {useSidePanel, isAndroid, isIOS} from 'customization-api';
+import {useSidePanel} from 'customization-api';
 import ThemeConfig from '../../theme';
 import {AgentContext} from '../components/AgentControls/AgentContext';
 import {AgentState} from '../components/AgentControls/const';
 import {useIsAgentAvailable} from '../components/utils';
-import {isMobileUA} from '../../utils/common';
+import {isMobileUA, isAndroid, isIOS} from '../../utils/common';
 //@ts-ignore
 import JoinCallIcon from '../assets/join-call.png';
 import {
   DisconnectButton,
   MicButton,
-  SettingButton,
   TranscriptButton,
 } from '../components/ControlButtons';
 
@@ -83,7 +82,6 @@ export default function ConversationalAI() {
           <View style={styles.controlsContainer}>
             <MicButton />
             <TranscriptButton />
-            <SettingButton />
             <DisconnectButton />
           </View>
         ) : (

package/template/src/ai-agent/layout/NewAnimation.tsx

@@ -15,7 +15,6 @@ import AiAgentCustomView from '../ai-interface/AIAgentInterface';
 import {
   DisconnectButton,
   MicButton,
-  SettingButton,
   TranscriptButton,
 } from '../components/ControlButtons';
 import {isMobileUA} from '../../utils/common';
@@ -56,7 +55,6 @@ export default function NewAnimation() {
           <View style={styles.controlsContainer}>
             <MicButton />
             <TranscriptButton />
-            <SettingButton />
             <DisconnectButton />
           </View>
         ) : (
@@ -153,6 +151,7 @@ const styles = StyleSheet.create({
     marginRight: 'auto',
     maxWidth: 500,
     bottom: 50,
+    zIndex: 999,
   },
   container: {
     flex: 1,

package/template/src/ai-agent/utils.ts

@@ -1,5 +1,7 @@
 import {IMicrophoneAudioTrack} from 'agora-rtc-sdk-ng';
 import {useState, useEffect} from 'react';
+import {isAndroid, isIOS} from '../utils/common';
+
 //for native its require text decoder to be imported
 const TextDecoder = require('text-encoding').TextDecoder;
 export const useMultibandTrackVolume = (
@@ -131,3 +133,11 @@ export const Base64 = {
     return output;
   },
 };
+
+export const getAILayoutType = () => {
+  return isAndroid() || isIOS()
+    ? 'LAYOUT_TYPE_2'
+    : $config.AI_LAYOUT
+    ? $config.AI_LAYOUT
+    : 'LAYOUT_TYPE_1';
+};

package/template/src/utils/useSpeechToText.ts

@@ -52,7 +52,7 @@ const useSpeechToText = () => {
   useEffect(() => {
     if (!$config.ENABLE_STT) {
       //throw new Error('Speech To Text is not enabled');
-      console.error('Speech To Text is not enabled');
+      console.log('Speech To Text is not enabled');
     }
   }, []);