agora-appbuilder-core 4.1.9 → 4.1.11-beta.2

package/template/src/components/precall/joinCallBtn.native.tsx

@@ -33,7 +33,7 @@ export interface PreCallJoinCallBtnProps {
 
 const JoinCallBtn = (props: PreCallJoinCallBtnProps) => {
   const {rtcProps} = useContext(PropsContext);
-  const {setCallActive} = usePreCall();
+  const {setCallActive, setIsNameIsEmpty} = usePreCall();
   const username = useGetName();
   const {isJoinDataFetched} = useRoomInfo();
   const joinRoomButton =
@@ -58,12 +58,17 @@ const JoinCallBtn = (props: PreCallJoinCallBtnProps) => {
   }, [rtcProps?.role]);
 
   const onSubmit = () => {
+    if (!username || (username && username?.trim() === '')) {
+      setIsNameIsEmpty(true);
+      return;
+    }
+    setIsNameIsEmpty(false);
     setCallActive(true);
   };
 
   const title = buttonText;
   const onPress = () => onSubmit();
-  const disabled = !isJoinDataFetched || username === '';
+  const disabled = !isJoinDataFetched;
   return props?.render ? (
     props.render(onPress, title, disabled)
   ) : (

package/template/src/components/precall/joinCallBtn.tsx

@@ -42,7 +42,7 @@ export interface PreCallJoinCallBtnProps {
 
 const JoinCallBtn = (props: PreCallJoinCallBtnProps) => {
   const {rtcProps} = useContext(PropsContext);
-  const {setCallActive} = usePreCall();
+  const {setCallActive, setIsNameIsEmpty} = usePreCall();
   const username = useGetName();
   const setUsername = useSetName();
   const {isJoinDataFetched} = useRoomInfo();
@@ -59,6 +59,11 @@ const JoinCallBtn = (props: PreCallJoinCallBtnProps) => {
   );
 
   const onSubmit = () => {
+    if (!username || (username && username?.trim() === '')) {
+      setIsNameIsEmpty(true);
+      return;
+    }
+    setIsNameIsEmpty(false);
     logger.log(
       LogSource.Internals,
       'PRECALL_SCREEN',
@@ -95,7 +100,7 @@ const JoinCallBtn = (props: PreCallJoinCallBtnProps) => {
 
   const title = buttonText;
   const onPress = () => onSubmit();
-  const disabled = !isJoinDataFetched || username?.trim() === '';
+  const disabled = !isJoinDataFetched;
   return props?.render ? (
     props.render(onPress, title, disabled)
   ) : (

package/template/src/components/precall/joinWaitingRoomBtn.native.tsx

@@ -58,7 +58,7 @@ const JoinWaitingRoomBtn = (props: PreCallJoinWaitingRoomBtnProps) => {
   const waitingRoomUsersInCallText = useString(waitingRoomUsersInCall);
   let pollingTimeout = React.useRef(null);
   const {rtcProps} = useContext(PropsContext);
-  const {setCallActive, callActive} = usePreCall();
+  const {setCallActive, callActive, setIsNameIsEmpty} = usePreCall();
   const username = useGetName();
   const {isJoinDataFetched, isInWaitingRoom} = useRoomInfo();
   const {setRoomInfo} = useSetRoomInfo();
@@ -212,6 +212,11 @@ const JoinWaitingRoomBtn = (props: PreCallJoinWaitingRoomBtnProps) => {
   };
 
   const onSubmit = () => {
+    if (!username || (username && username?.trim() === '')) {
+      setIsNameIsEmpty(true);
+      return;
+    }
+    setIsNameIsEmpty(false);
     shouldWaitingRoomPoll = true;
     // Enter waiting rooom;
     setRoomInfo(prev => {
@@ -232,8 +237,8 @@ const JoinWaitingRoomBtn = (props: PreCallJoinWaitingRoomBtnProps) => {
   const title = buttonText;
   const onPress = () => onSubmit();
   const disabled = $config.ENABLE_WAITING_ROOM_AUTO_REQUEST
-    ? !hasHostJoined || isInWaitingRoom || username?.trim() === ''
-    : isInWaitingRoom || username?.trim() === '';
+    ? !hasHostJoined || isInWaitingRoom
+    : isInWaitingRoom;
   return props?.render ? (
     props.render(onPress, title, disabled)
   ) : (

package/template/src/components/precall/joinWaitingRoomBtn.tsx

@@ -45,6 +45,8 @@ import {
   waitingRoomHostNotJoined,
   waitingRoomUsersInCall,
 } from '../../language/default-labels/videoCallScreenLabels';
+import SDKEvents from '../../utils/SdkEvents';
+import isSDK from '../../utils/isSDK';
 
 const audio = new Audio(
   'https://dl.dropboxusercontent.com/s/1cdwpm3gca9mlo0/kick.mp3',
@@ -69,7 +71,7 @@ const JoinWaitingRoomBtn = (props: PreCallJoinWaitingRoomBtnProps) => {
   const waitingRoomUsersInCallText = useString(waitingRoomUsersInCall);
   let pollingTimeout = React.useRef(null);
   const {rtcProps} = useContext(PropsContext);
-  const {setCallActive, callActive} = usePreCall();
+  const {setCallActive, callActive, setIsNameIsEmpty} = usePreCall();
   const username = useGetName();
   const setUsername = useSetName();
   const {isJoinDataFetched, isInWaitingRoom} = useRoomInfo();
@@ -150,6 +152,10 @@ const JoinWaitingRoomBtn = (props: PreCallJoinWaitingRoomBtnProps) => {
       });
 
       if (approved) {
+        if (isSDK()) {
+          //emit SDKEvent waiting-room-approval-granted
+          SDKEvents.emit('waiting-room-approval-granted');
+        }
         setRoomInfo(prev => {
           return {
             ...prev,
@@ -189,6 +195,10 @@ const JoinWaitingRoomBtn = (props: PreCallJoinWaitingRoomBtnProps) => {
           };
         });
       } else {
+        if (isSDK()) {
+          //emit SDKEvent waiting-room-approval-rejected
+          SDKEvents.emit('waiting-room-approval-rejected');
+        }
         setRoomInfo(prev => {
           return {
             ...prev,
@@ -236,6 +246,11 @@ const JoinWaitingRoomBtn = (props: PreCallJoinWaitingRoomBtnProps) => {
   };
 
   const onSubmit = () => {
+    if (!username || (username && username?.trim() === '')) {
+      setIsNameIsEmpty(true);
+      return;
+    }
+    setIsNameIsEmpty(false);
     shouldWaitingRoomPoll = true;
     setUsername(username.trim());
     //setCallActive(true);
@@ -252,7 +267,10 @@ const JoinWaitingRoomBtn = (props: PreCallJoinWaitingRoomBtnProps) => {
 
     // join request API to server, server will send RTM message to all hosts regarding request from this user,
     requestServerToJoinRoom();
-
+    if (isSDK()) {
+      //emit SDKEvent waiting for approval
+      SDKEvents.emit('waiting-room-approval-requested');
+    }
     // Play a sound to avoid autoblocking in safari
     if (isWebInternal() || isMobileOrTablet()) {
       audio.volume = 0;
@@ -281,8 +299,8 @@ const JoinWaitingRoomBtn = (props: PreCallJoinWaitingRoomBtnProps) => {
   const title = buttonText;
   const onPress = () => onSubmit();
   const disabled = $config.ENABLE_WAITING_ROOM_AUTO_REQUEST
-    ? !hasHostJoined || isInWaitingRoom ||  username?.trim() === ''
-    : isInWaitingRoom || username?.trim() === '';
+    ? !hasHostJoined || isInWaitingRoom
+    : isInWaitingRoom;
   return props?.render ? (
     props.render(onPress, title, disabled)
   ) : (

package/template/src/components/precall/textInput.tsx

@@ -11,7 +11,7 @@
 */
 
 import React from 'react';
-import {TextStyle} from 'react-native';
+import {TextStyle, Text} from 'react-native';
 import TextInput from '../../atoms/TextInput';
 import {useString} from '../../utils/useString';
 import {useRoomInfo} from '../room-info/useRoomInfo';
@@ -25,6 +25,7 @@ import {
   precallNameInputPlaceholderText,
   precallYouAreJoiningAsHeading,
 } from '../../language/default-labels/precallScreenLabels';
+import {usePreCall} from './usePreCall';
 
 export interface PreCallTextInputProps {
   labelStyle?: TextStyle;
@@ -39,30 +40,52 @@ const PreCallTextInput = (props?: PreCallTextInputProps) => {
   const username = useGetName();
   const setUsername = useSetName();
   const {isJoinDataFetched, isInWaitingRoom} = useRoomInfo();
+  const {isNameIsEmpty, setIsNameIsEmpty} = usePreCall();
   const {isDesktop = false, isOnPrecall = false} = props;
 
   return (
-    <Input
-      maxLength={maxInputLimit}
-      label={isOnPrecall ? '' : isDesktop ? joiningAs : ''}
-      labelStyle={
-        props?.labelStyle
-          ? props.labelStyle
-          : {
-              fontFamily: ThemeConfig.FontFamily.sansPro,
-              fontWeight: '400',
-              fontSize: ThemeConfig.FontSize.small,
-              lineHeight: ThemeConfig.FontSize.small,
-              color: $config.FONT_COLOR,
-            }
-      }
-      value={username}
-      autoFocus
-      onChangeText={text => setUsername(text ? text : '')}
-      onSubmitEditing={() => {}}
-      placeholder={isJoinDataFetched ? placeHolder : fetchingNamePlaceholder}
-      editable={!isInWaitingRoom && isJoinDataFetched}
-    />
+    <>
+      <Input
+        maxLength={maxInputLimit}
+        label={isOnPrecall ? '' : isDesktop ? joiningAs : ''}
+        labelStyle={
+          props?.labelStyle
+            ? props.labelStyle
+            : {
+                fontFamily: ThemeConfig.FontFamily.sansPro,
+                fontWeight: '400',
+                fontSize: ThemeConfig.FontSize.small,
+                lineHeight: ThemeConfig.FontSize.small,
+                color: $config.FONT_COLOR,
+              }
+        }
+        value={username}
+        autoFocus
+        onChangeText={text => {
+          setUsername(text ? text : '');
+          if (text && text.trim() === '') {
+            setIsNameIsEmpty(true);
+          } else {
+            setIsNameIsEmpty(false);
+          }
+        }}
+        onSubmitEditing={() => {}}
+        placeholder={isJoinDataFetched ? placeHolder : fetchingNamePlaceholder}
+        editable={!isInWaitingRoom && isJoinDataFetched}
+        style={isNameIsEmpty ? {borderColor: $config.SEMANTIC_ERROR} : {}}
+      />
+      {isNameIsEmpty && (
+        <Text
+          style={{
+            color: $config.SEMANTIC_ERROR,
+            fontFamily: ThemeConfig.FontFamily.sansPro,
+            marginTop: 4,
+            marginLeft: 4,
+          }}>
+          {'Name is required'}
+        </Text>
+      )}
+    </>
   );
 };
 

package/template/src/components/precall/usePreCall.tsx

@@ -29,6 +29,8 @@ export interface PreCallContextInterface {
   setSpeakerAvailable: React.Dispatch<React.SetStateAction<boolean>>;
   isPermissionRequested: boolean;
   setIsPermissionRequested: React.Dispatch<React.SetStateAction<boolean>>;
+  isNameIsEmpty: boolean;
+  setIsNameIsEmpty: React.Dispatch<React.SetStateAction<boolean>>;
 }
 
 const PreCallContext = createContext<PreCallContextInterface>({
@@ -42,6 +44,8 @@ const PreCallContext = createContext<PreCallContextInterface>({
   setSpeakerAvailable: () => {},
   isPermissionRequested: false,
   setIsPermissionRequested: () => {},
+  isNameIsEmpty: false,
+  setIsNameIsEmpty: () => {},
 });
 
 interface PreCallProviderProps {
@@ -54,6 +58,7 @@ const PreCallProvider = (props: PreCallProviderProps) => {
   const roomInfo = useRoomInfo();
   const {deviceList} = useContext(DeviceContext);
   const setUsername = useSetName();
+  const [isNameIsEmpty, setIsNameIsEmpty] = useState(false);
   const [isCameraAvailable, setCameraAvailable] = useState(false);
   const [isMicAvailable, setMicAvailable] = useState(false);
   const [isSpeakerAvailable, setSpeakerAvailable] = useState(false);
@@ -69,6 +74,8 @@ const PreCallProvider = (props: PreCallProviderProps) => {
     setSpeakerAvailable,
     isPermissionRequested,
     setIsPermissionRequested,
+    isNameIsEmpty,
+    setIsNameIsEmpty,
   };
 
   useEffect(() => {

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

@@ -103,6 +103,11 @@ export interface RoomInfoContextInterface {
     newLang?: LanguageType[];
     uid?: UidType;
     langChanged?: boolean;
+    remoteLang?: LanguageType[];
+    translateConfig?: {
+      target_lang: string[];
+      source_lang: string;
+    }[];
   };
   isSTTActive?: boolean;
   roomPreference?: joinRoomPreference;

package/template/src/language/default-labels/videoCallScreenLabels.ts

@@ -197,8 +197,15 @@ export const sttChangeLanguagePopupPrimaryBtnText =
 
 export const sttChangeSpokenLanguageText =
   `${stt}ChangeSpokenLanguageText` as const;
+export const sttStopTranslationText = `${stt}StopTranslationText` as const;
+export const sttOriginalTranslatedText =
+  `${stt}sttOriginalTranslatedText` as const;
 export const sttSettingSpokenLanguageText =
   `${stt}SettingSpokenLanguageText` as const;
+export const sttSettingTranslationLanguageText =
+  `${stt}SettingTranslationLanguageText` as const;
+export const sttChangeTranslationLanguageText =
+  `${stt}ChangeTranslationLanguageText` as const;
 export const sttTranscriptPanelHeaderText =
   `${stt}TranscriptPanelHeaderText` as const;
 export const sttDownloadBtnText = `${stt}DownloadBtnText` as const;
@@ -206,6 +213,8 @@ export const sttDownloadTranscriptBtnText =
   `${stt}DownloadTranscriptBtnText` as const;
 export const sttLanguageChangeInProgress =
   `${stt}LanguageChangeInProgress` as const;
+export const sttStartError = `${stt}StartError` as const;
+export const sttUpdateError = `${stt}UpdateError` as const;
 
 export const chatPanelGroupTabText = 'chatPanelGroupTabText';
 export const chatPanelPrivateTabText = 'chatPanelPrivateTabText';
@@ -637,11 +646,17 @@ export interface I18nVideoCallScreenLabelsInterface {
   [sttChangeLanguagePopupPrimaryBtnText]?: I18nBaseType;
 
   [sttChangeSpokenLanguageText]?: I18nBaseType;
+  [sttStopTranslationText]?: I18nBaseType;
+  [sttOriginalTranslatedText]?: I18nBaseType;
   [sttSettingSpokenLanguageText]?: I18nBaseType;
+  [sttSettingTranslationLanguageText]?: I18nConditionalType;
+  [sttChangeTranslationLanguageText]?: I18nBaseType;
   [sttTranscriptPanelHeaderText]?: I18nBaseType;
   [sttDownloadBtnText]?: I18nBaseType;
   [sttDownloadTranscriptBtnText]?: I18nBaseType;
   [sttLanguageChangeInProgress]?: I18nBaseType;
+  [sttStartError]?: I18nBaseType;
+  [sttUpdateError]?: I18nBaseType;
 
   [peoplePanelHeaderText]?: I18nBaseType;
 
@@ -1027,21 +1042,29 @@ export const VideoCallScreenLabels: I18nVideoCallScreenLabelsInterface = {
 
   [textTrackModalTitleIntn]: 'Text Tracks',
   [sttChangeLanguagePopupHeading]: isFirstTimeOpened =>
-    isFirstTimeOpened ? 'Set Spoken Language' : 'Change Spoken Language',
+    isFirstTimeOpened
+      ? 'Setup Captions & Translation'
+      : 'Modify Captions & Translation',
   [sttChangeLanguagePopupSubHeading]:
-    'What language(s) are being spoken by everyone in this meeting?',
+    'Please select your preferred language as the source language and up to 10 target languages to translate into. You can update these settings at any time by returning to this page.',
   [sttChangeLanguagePopupPrimaryBtnText]: 'CONFIRM',
   [sttChangeLanguagePopupDropdownInfo]:
-    'You can choose a maximum of two languages',
+    'You can choose a maximum of ten languages',
   [sttChangeLanguagePopupDropdownError]:
     'Choose at least one language to proceed',
   [sttChangeSpokenLanguageText]: 'Change Spoken Language',
-
+  [sttStopTranslationText]: 'Stop Translation',
+  [sttOriginalTranslatedText]: 'Show Original and translated',
   [sttTranscriptPanelHeaderText]: 'Meeting Transcript',
   [sttDownloadBtnText]: 'Download',
   [sttDownloadTranscriptBtnText]: 'Download Transcript',
   [sttSettingSpokenLanguageText]: 'Setting Spoken Language',
+  [sttSettingTranslationLanguageText]: (isUpdate: boolean) =>
+    isUpdate ? 'Updating Translation Language' : 'Setting Translation Language',
+  [sttChangeTranslationLanguageText]: 'Change Translation Language',
   [sttLanguageChangeInProgress]: 'Language Change is in progress...',
+  [sttStartError]: 'Failed to start captions',
+  [sttUpdateError]: 'Failed to update caption settings',
 
   [peoplePanelHeaderText]: 'People',
 

package/template/src/pages/video-call/ActionSheetContent.tsx

@@ -207,7 +207,7 @@ const ActionSheetContent = props => {
 
   const {localUid} = useContext(ChatContext);
   const {rtcProps} = useContext(PropsContext);
-  const {setRoomInfo} = useSetRoomInfo();
+  // const {setRoomInfo} = useSetRoomInfo();
   const {
     data: {isHost},
     sttLanguage,
@@ -216,90 +216,90 @@ const ActionSheetContent = props => {
   const {isPendingRequestToReview, raiseHandList} =
     useContext(LiveStreamContext);
   const {totalUnreadCount} = useChatNotification();
-  const {setIsSTTActive, setLanguage, setMeetingTranscript} = useCaption();
+  // const {setIsSTTActive, setLanguage, setMeetingTranscript} = useCaption();
   const {defaultContent} = useContent();
   const {waitingRoomUids} = useWaitingRoomContext();
   const defaultContentRef = React.useRef(defaultContent);
-  const {addStreamMessageListener} = useSpeechToText();
+  // const {addStreamMessageListener} = useSpeechToText();
 
   React.useEffect(() => {
     defaultContentRef.current = defaultContent;
   }, [defaultContent]);
 
-  //STT events on mount
-
-  React.useEffect(() => {
-    setIsSTTActive(isSTTActive);
-  }, [isSTTActive]);
-
-  React.useEffect(() => {
-    // for mobile events are set in ActionSheetContent
-    if (!sttLanguage) return;
-    const {
-      username,
-      prevLang,
-      newLang,
-      uid,
-      langChanged,
-    }: RoomInfoContextInterface['sttLanguage'] = sttLanguage;
-    if (!langChanged) return;
-    const actionText =
-      prevLang.indexOf('') !== -1
-        ? `has set the spoken language to  "${getLanguageLabel(newLang)}" `
-        : `changed the spoken language from "${getLanguageLabel(
-            prevLang,
-          )}" to "${getLanguageLabel(newLang)}" `;
-    const msg = `${
-      defaultContentRef.current[uid]?.name || username
-    } ${actionText} `;
-
-    let subheadingObj: any = {};
-    if (prevLang.indexOf('') !== -1) {
-      subheadingObj = {
-        username: defaultContentRef.current[uid]?.name || username,
-        action: prevLang.indexOf('') !== -1 ? 'Set' : 'Changed',
-        newLanguage: getLanguageLabel(newLang),
-      };
-    } else {
-      subheadingObj = {
-        username: defaultContentRef.current[uid]?.name || username,
-        action: prevLang.indexOf('') !== -1 ? 'Set' : 'Changed',
-        newLanguage: getLanguageLabel(newLang),
-        oldLanguage: getLanguageLabel(prevLang),
-      };
-    }
-    Toast.show({
-      leadingIconName: 'lang-select',
-      type: 'info',
-      text1: heading(prevLang.indexOf('') !== -1 ? 'Set' : 'Changed'),
-      visibilityTime: 3000,
-      primaryBtn: null,
-      secondaryBtn: null,
-      text2: subheading(subheadingObj),
-    });
-    setRoomInfo(prev => {
-      return {
-        ...prev,
-        sttLanguage: {...sttLanguage, langChanged: false},
-      };
-    });
-    // syncing local set language
-    newLang && setLanguage(newLang);
-    // add spoken lang msg to transcript
-    setMeetingTranscript(prev => {
-      return [
-        ...prev,
-        {
-          name: 'langUpdate',
-          time: new Date().getTime(),
-          uid: `langUpdate-${uid}`,
-          text: actionText,
-        },
-      ];
-    });
-    // start listening to stream Message callback
-    addStreamMessageListener();
-  }, [sttLanguage]);
+  // STT events on mount
+
+  //  React.useEffect(() => {
+  //   setIsSTTActive(isSTTActive);
+  // }, [isSTTActive]);
+
+  // React.useEffect(() => {
+  //   // for mobile events are set in ActionSheetContent
+  //   if (!sttLanguage) return;
+  //   const {
+  //     username,
+  //     prevLang,
+  //     newLang,
+  //     uid,
+  //     langChanged,
+  //   }: RoomInfoContextInterface['sttLanguage'] = sttLanguage;
+  //   if (!langChanged) return;
+  //   const actionText =
+  //     prevLang.indexOf('') !== -1
+  //       ? `has set the spoken language to  "${getLanguageLabel(newLang)}" `
+  //       : `changed the spoken language from "${getLanguageLabel(
+  //           prevLang,
+  //         )}" to "${getLanguageLabel(newLang)}" `;
+  //   const msg = `${
+  //     defaultContentRef.current[uid]?.name || username
+  //   } ${actionText} `;
+
+  //   let subheadingObj: any = {};
+  //   if (prevLang.indexOf('') !== -1) {
+  //     subheadingObj = {
+  //       username: defaultContentRef.current[uid]?.name || username,
+  //       action: prevLang.indexOf('') !== -1 ? 'Set' : 'Changed',
+  //       newLanguage: getLanguageLabel(newLang),
+  //     };
+  //   } else {
+  //     subheadingObj = {
+  //       username: defaultContentRef.current[uid]?.name || username,
+  //       action: prevLang.indexOf('') !== -1 ? 'Set' : 'Changed',
+  //       newLanguage: getLanguageLabel(newLang),
+  //       oldLanguage: getLanguageLabel(prevLang),
+  //     };
+  //   }
+  //   Toast.show({
+  //     leadingIconName: 'lang-select',
+  //     type: 'info',
+  //     text1: heading(prevLang.indexOf('') !== -1 ? 'Set' : 'Changed'),
+  //     visibilityTime: 3000,
+  //     primaryBtn: null,
+  //     secondaryBtn: null,
+  //     text2: subheading(subheadingObj),
+  //   });
+  //   setRoomInfo(prev => {
+  //     return {
+  //       ...prev,
+  //       sttLanguage: {...sttLanguage, langChanged: false},
+  //     };
+  //   });
+  //   // syncing local set language
+  //   // newLang && setLanguage(newLang);
+  //   // add spoken lang msg to transcript
+  //   setMeetingTranscript(prev => {
+  //     return [
+  //       ...prev,
+  //       {
+  //         name: 'langUpdate',
+  //         time: new Date().getTime(),
+  //         uid: `langUpdate-${uid}`,
+  //         text: actionText,
+  //       },
+  //     ];
+  //   });
+  //   // start listening to stream Message callback
+  //   addStreamMessageListener();
+  // }, [sttLanguage]);
 
   const isLiveStream = $config.EVENT_MODE && !$config.AUDIO_ROOM;
   const isAudience = rtcProps?.role === ClientRoleType.ClientRoleAudience;