agora-appbuilder-core 4.1.14-beta.1 → 4.1.14

package/package.json

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

package/template/defaultConfig.js

@@ -77,8 +77,8 @@ const DefaultConfig = {
   CHAT_ORG_NAME: '',
   CHAT_APP_NAME: '',
   CHAT_URL: '',
-  CLI_VERSION: '3.1.14-beta.1',
-  CORE_VERSION: '4.1.14-beta.1',
+  CLI_VERSION: '3.1.14',
+  CORE_VERSION: '4.1.14',
   DISABLE_LANDSCAPE_MODE: false,
   STT_AUTO_START: false,
   CLOUD_RECORDING_AUTO_START: false,

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

@@ -160,33 +160,8 @@ const AdvancedSettings = () => {
   );
 };
 
-const ASRSettings = () => {
-  const {agentId} = useContext(AgentContext);
-  const {
-    data: {agents},
-  } = useRoomInfo();
-
-  // Get the selected agent and check if ASR vendor is "ares"
-  const selectedAgent = agents?.find(a => a.id === agentId);
-  const isAresASR = selectedAgent?.asr?.vendor === 'ares';
-
-  // Only render ASR settings if the agent uses "ares" as ASR vendor
-  if (!isAresASR) {
-    return null;
-  }
-
-  return (
-    <>
-      <SelectUserLanguage />
-      <Spacer size={16} />
-      <AdvancedSettings />
-    </>
-  );
-};
-
 const CustomSettingsPanel = () => {
   const isAgentAvailable = useIsAgentAvailable();
-
   return (
     <View style={styles.container}>
       <ScrollView style={styles.contentContainer}>
@@ -199,7 +174,9 @@ const CustomSettingsPanel = () => {
               <Spacer size={16} />
               <UserPrompt />
               <Spacer size={16} />
-              <ASRSettings />
+              <SelectUserLanguage />
+              <Spacer size={16} />
+              <AdvancedSettings />
             </>
           ) : (
             <></>

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

@@ -85,10 +85,6 @@ export interface AIAgentInterface {
       region: string;
     };
   };
-  asr: {
-    vendor: string;
-    params: Record<string, any>;
-  };
 }
 
 export interface RoomInfoContextInterface {

package/template/src/subComponents/BlockUI.tsx

@@ -1,11 +1,11 @@
 import React, {useState} from 'react';
 import {View, Text, StyleSheet} from 'react-native';
-import {useOrientation} from '../utils/useOrientation';
+import {useOrientation, getDeviceClass} from '../utils/useOrientation';
 import ThemeConfig from '../theme';
-import {isMobileUA} from '../utils/common';
 import Popup from './../atoms/Popup';
 import {useString} from '../utils/useString';
 import {blockLandscapeModeMessageText} from '../language/default-labels/videoCallScreenLabels';
+import {logger, LogSource} from '../logger/AppBuilderLogger';
 
 export default function BlockUI() {
   const blockLandscapeModeMessageTextLabel = useString(
@@ -15,10 +15,20 @@ export default function BlockUI() {
   const [isBlockModalVisible, setBlockModalVisible] = useState(true);
 
   const orientation = useOrientation();
-  if (!isMobileUA()) {
-    return <></>;
-  }
-  if (orientation === 'PORTRAIT') {
+  const deviceClass = getDeviceClass();
+  const shouldBlock = deviceClass === 'phone' && orientation === 'LANDSCAPE';
+
+  logger.log(
+    LogSource.Internals,
+    'CREATE_MEETING',
+    'current device orientation is',
+    {
+      orientation,
+      device: deviceClass,
+      shouldBlockLandscape: shouldBlock,
+    },
+  );
+  if (!shouldBlock) {
     return <></>;
   }
   return (

package/template/src/utils/useOrientation.native.tsx

@@ -1,3 +1,20 @@
+import {Dimensions} from 'react-native';
+
+export type DeviceClass = 'phone' | 'tablet' | 'desktop';
+
+export const getDeviceClass = (): DeviceClass => {
+  // Get the physical screen dimensions for native devices
+  const {width, height} = Dimensions.get('screen');
+  const minDim = Math.min(width, height);
+
+  // Touch + small screen → phone
+  if (minDim < 600) {
+    return 'phone';
+  }
+  // Touch + large screen → tablet
+  return 'tablet';
+};
+
 export function useOrientation() {
   return 'PORTRAIT';
 }

package/template/src/utils/useOrientation.tsx

@@ -1,59 +1,53 @@
-import {useState, useEffect} from 'react';
-import {Keyboard, Platform} from 'react-native';
+import {useEffect, useState} from 'react';
+
+type Orientation = 'PORTRAIT' | 'LANDSCAPE';
+export type DeviceClass = 'phone' | 'tablet' | 'desktop';
+
+// https://developer.mozilla.org/en-US/docs/Web/API/Screen_Orientation_API
+
+const getOrientation = (): Orientation => {
+  // This gives the device hardware orientation
+  const type = window.screen?.orientation?.type;
+  if (type) {
+    return type.startsWith('portrait') ? 'PORTRAIT' : 'LANDSCAPE';
+  }
+  // In case above api does not exist -> use the physical device height and width
+  return window.screen.height >= window.screen.width ? 'PORTRAIT' : 'LANDSCAPE';
+};
+
+export const getDeviceClass = (): DeviceClass => {
+  const minDim = Math.min(screen.width, screen.height);
+
+  // Phones only
+  if (minDim < 600) {
+    return 'phone';
+  }
+
+  // Everything else (tablet + desktop)
+  return 'tablet';
+};
 
 export function useOrientation() {
-  const [orientation, setOrientation] = useState<'PORTRAIT' | 'LANDSCAPE'>(
-    window.matchMedia('(orientation: portrait)').matches
-      ? 'PORTRAIT'
-      : 'LANDSCAPE',
-  );
-  const [keyboardVisible, setKeyboardVisible] = useState(false);
+  const [orientation, setOrientation] = useState<Orientation>(getOrientation());
 
   useEffect(() => {
     console.log('screen orientation changed', orientation);
   }, [orientation]);
 
   useEffect(() => {
-    const handleOrientationChange = () => {
-      if (keyboardVisible && Platform.OS === 'ios') {
-        return; // Avoid changing orientation if the keyboard is visible on iOS
-      }
-      setOrientation(
-        window.matchMedia('(orientation: portrait)').matches
-          ? 'PORTRAIT'
-          : 'LANDSCAPE',
-      );
-    };
-
-    const handleResize = () => {
-      if (!keyboardVisible) {
-        handleOrientationChange();
-      }
-    };
-
-    const keyboardDidShowListener = Keyboard.addListener(
-      'keyboardDidShow',
-      () => {
-        setKeyboardVisible(true);
-      },
-    );
+    const update = () => setOrientation(getOrientation());
 
-    const keyboardDidHideListener = Keyboard.addListener(
-      'keyboardDidHide',
-      () => {
-        setKeyboardVisible(false);
-        handleOrientationChange(); // Recheck orientation after the keyboard is hidden
-      },
-    );
+    window.addEventListener('resize', update);
 
-    window.addEventListener('resize', handleResize);
+    // https://developer.mozilla.org/en-US/docs/Web/API/ScreenOrientation/change_event
+    const screenOrientation = window.screen?.orientation;
+    screenOrientation?.addEventListener?.('change', update);
 
     return () => {
-      keyboardDidShowListener.remove();
-      keyboardDidHideListener.remove();
-      window.removeEventListener('resize', handleResize);
+      window.removeEventListener('resize', update);
+      screenOrientation?.removeEventListener?.('change', update);
     };
-  }, [keyboardVisible]);
+  }, []);
 
   return orientation;
 }