agora-appbuilder-core 4.1.10-beta.1 → 4.1.11

package/template/src/components/Controls.tsx

@@ -58,13 +58,19 @@ import {
 import {useVideoCall} from './useVideoCall';
 import {useScreenshare} from '../subComponents/screenshare/useScreenshare';
 import LayoutIconDropdown from '../subComponents/LayoutIconDropdown';
-import {useCaption} from '../../src/subComponents/caption/useCaption';
+import {
+  LanguageTranslationConfig,
+  useCaption,
+} from '../../src/subComponents/caption/useCaption';
 import LanguageSelectorPopup from '../../src/subComponents/caption/LanguageSelectorPopup';
-import useSTTAPI from '../../src/subComponents/caption/useSTTAPI';
 import {EventNames} from '../rtm-events';
 import events, {PersistanceLevel} from '../rtm-events-api';
 import Toast from '../../react-native-toast-message';
-import {getLanguageLabel} from '../../src/subComponents/caption/utils';
+import {
+  getLanguageLabel,
+  LanguageType,
+  TranslateConfig,
+} from '../../src/subComponents/caption/utils';
 import Toolbar from '../atoms/Toolbar';
 import ToolbarItem, {useToolbarProps} from '../atoms/ToolbarItem';
 import {
@@ -104,7 +110,6 @@ import {
   toolbarItemVirtualBackgroundText,
   toolbarItemWhiteboardText,
   toolbarItemManageTextTracksText,
-  toolbarItemBreakoutRoomText,
 } from '../language/default-labels/videoCallScreenLabels';
 import {LogSource, logger} from '../logger/AppBuilderLogger';
 import {useModal} from '../utils/useModal';
@@ -118,8 +123,6 @@ import {
   ScreenshareToolbarItem,
 } from './controls/toolbar-items';
 import ViewTextTracksModal from './text-tracks/ViewTextTracksModal';
-import {useBreakoutRoom} from './breakout-room/context/BreakoutRoomContext';
-import {ExitBreakoutRoomToolbarItem} from './controls/toolbar-items/ExitBreakoutRoomToolbarItem';
 
 export const useToggleWhiteboard = () => {
   const {
@@ -288,7 +291,6 @@ const MoreButton = (props: {fields: ToolbarMoreButtonDefaultFields}) => {
   const virtualBackgroundLabel = useString(toolbarItemVirtualBackgroundText)();
   const chatLabel = useString(toolbarItemChatText)();
   const inviteLabel = useString(toolbarItemInviteText)();
-  const breakoutRoomLabel = useString(toolbarItemBreakoutRoomText)();
   const peopleLabel = useString(toolbarItemPeopleText)();
   const layoutLabel = useString(toolbarItemLayoutText)();
   const {dispatch} = useContext(DispatchContext);
@@ -316,20 +318,21 @@ const MoreButton = (props: {fields: ToolbarMoreButtonDefaultFields}) => {
   const {
     isCaptionON,
     setIsCaptionON,
-    language: prevLang,
+    // language: prevLang,
     isSTTActive,
-    setIsSTTActive,
+    // setIsSTTActive,
     isSTTError,
+    handleTranslateConfigChange,
   } = useCaption();
 
   const isTranscriptON = sidePanel === SidePanelType.Transcript;
 
   const [isLanguagePopupOpen, setLanguagePopup] =
     React.useState<boolean>(false);
-  const isFirstTimePopupOpen = React.useRef(false);
+  // const isFirstTimePopupOpen = React.useRef(false);
   const STT_clicked = React.useRef(null);
 
-  const {start, restart} = useSTTAPI();
+  // const {start, restart} = useSTTAPI();
   const {
     data: {isHost},
   } = useRoomInfo();
@@ -486,8 +489,7 @@ const MoreButton = (props: {fields: ToolbarMoreButtonDefaultFields}) => {
       : false;
 
   // 2. whiteboard ends
-  const canAccessWhiteboard = useControlPermissionMatrix('whiteboardControl');
-  if (canAccessWhiteboard) {
+  if (isHost && $config.ENABLE_WHITEBOARD && isWebInternal()) {
     actionMenuitems.push({
       componentName: 'whiteboard',
       order: 2,
@@ -529,40 +531,29 @@ const MoreButton = (props: {fields: ToolbarMoreButtonDefaultFields}) => {
   }
 
   // 3. host can see stt options and attendee can view only when stt is enabled by a host in the channel
-  const canAccessCaption = useControlPermissionMatrix('captionsControl');
-  const canAccessTranscripts = useControlPermissionMatrix('transcriptsControl');
-  if (canAccessCaption) {
+  if ($config.ENABLE_STT && $config.ENABLE_CAPTION) {
     actionMenuitems.push({
       componentName: 'caption',
       order: 3,
       icon: `${isCaptionON ? 'captions-off' : 'captions'}`,
       iconColor: $config.SECONDARY_ACTION_COLOR,
       textColor: $config.FONT_COLOR,
-      disabled: !(
-        $config.ENABLE_STT &&
-        $config.ENABLE_CAPTION &&
-        (isHost || (!isHost && isSTTActive))
-      ),
+      disabled: !($config.ENABLE_STT && $config.ENABLE_CAPTION),
       title: captionLabel(isCaptionON),
       onPress: () => {
         setActionMenuVisible(false);
         STT_clicked.current = !isCaptionON ? 'caption' : null;
-        if (isSTTError) {
-          setIsCaptionON(prev => !prev);
-          return;
-        }
-        if (isSTTActive) {
-          setIsCaptionON(prev => !prev);
-          // is lang popup has been shown once for any user in meeting
-        } else {
-          isFirstTimePopupOpen.current = true;
+        if (isSTTError || !isSTTActive) {
+          // Show popup when error or STT not active
           setLanguagePopup(true);
+        } else {
+          // STT is active and no error
+          setIsCaptionON(prev => !prev);
         }
       },
     });
     // 4. Meeting transcript
-
-    if (canAccessTranscripts) {
+    if ($config.ENABLE_MEETING_TRANSCRIPT) {
       actionMenuitems.push({
         componentName: 'transcript',
         order: 4,
@@ -572,26 +563,19 @@ const MoreButton = (props: {fields: ToolbarMoreButtonDefaultFields}) => {
         disabled: !(
           $config.ENABLE_STT &&
           $config.ENABLE_CAPTION &&
-          $config.ENABLE_MEETING_TRANSCRIPT &&
-          (isHost || (!isHost && isSTTActive))
+          $config.ENABLE_MEETING_TRANSCRIPT
         ),
         title: transcriptLabel(isTranscriptON),
         onPress: () => {
           setActionMenuVisible(false);
           STT_clicked.current = !isTranscriptON ? 'transcript' : null;
-          if (isSTTError) {
-            !isTranscriptON
-              ? setSidePanel(SidePanelType.Transcript)
-              : setSidePanel(SidePanelType.None);
-            return;
-          }
-          if (isSTTActive) {
+          if (isSTTError || !isSTTActive) {
+            setLanguagePopup(true);
+          } else {
             !isTranscriptON
               ? setSidePanel(SidePanelType.Transcript)
               : setSidePanel(SidePanelType.None);
-          } else {
-            isFirstTimePopupOpen.current = true;
-            setLanguagePopup(true);
+            // isFirstTimePopupOpen.current = true;
           }
         },
       });
@@ -599,8 +583,7 @@ const MoreButton = (props: {fields: ToolbarMoreButtonDefaultFields}) => {
   }
 
   // 5. view recordings
-  const canAccessViewRecording = useControlPermissionMatrix('recordingControl');
-  if (canAccessViewRecording && isWeb()) {
+  if (isHost && $config.CLOUD_RECORDING && isWeb()) {
     actionMenuitems.push({
       componentName: 'view-recordings',
       order: 5,
@@ -686,12 +669,6 @@ const MoreButton = (props: {fields: ToolbarMoreButtonDefaultFields}) => {
   }
 
   // 8. Screenshare
-  const {permissions} = useBreakoutRoom();
-  const canAccessBreakoutRoom = useControlPermissionMatrix(
-    'breakoutRoomControl',
-  );
-  const canScreenshareInBreakoutRoom = permissions?.canScreenshare;
-
   const canAccessScreenshare = useControlPermissionMatrix('screenshareControl');
   if (canAccessScreenshare) {
     if (
@@ -708,16 +685,13 @@ const MoreButton = (props: {fields: ToolbarMoreButtonDefaultFields}) => {
         componentName: 'screenshare',
         order: 8,
         disabled:
-          (rtcProps.role == ClientRoleType.ClientRoleAudience &&
-            $config.EVENT_MODE &&
-            $config.RAISE_HAND &&
-            !isHost) ||
-          !canScreenshareInBreakoutRoom,
+          rtcProps.role == ClientRoleType.ClientRoleAudience &&
+          $config.EVENT_MODE &&
+          $config.RAISE_HAND &&
+          !isHost,
         icon: isScreenshareActive ? 'stop-screen-share' : 'screen-share',
         iconColor: isScreenshareActive
           ? $config.SEMANTIC_ERROR
-          : !canScreenshareInBreakoutRoom
-          ? $config.SEMANTIC_NEUTRAL
           : $config.SECONDARY_ACTION_COLOR,
         textColor: isScreenshareActive
           ? $config.SEMANTIC_ERROR
@@ -732,8 +706,7 @@ const MoreButton = (props: {fields: ToolbarMoreButtonDefaultFields}) => {
   }
 
   // 9. Recording
-  const canAccessRecording = useControlPermissionMatrix('recordingControl');
-  if (canAccessRecording) {
+  if (isHost && $config.CLOUD_RECORDING) {
     actionMenuitems.push({
       hide: w => {
         return w >= BREAKPOINTS.sm ? true : false;
@@ -836,9 +809,9 @@ const MoreButton = (props: {fields: ToolbarMoreButtonDefaultFields}) => {
   }
 
   // 13. Text-tracks to download
-  const canAccessAllTextTracks = useControlPermissionMatrix(
-    'viewAllTextTracksControl',
-  );
+  const canAccessAllTextTracks =
+    useControlPermissionMatrix('viewAllTextTracks');
+
   if (canAccessAllTextTracks) {
     actionMenuitems.push({
       componentName: 'view-all-text-tracks',
@@ -853,22 +826,6 @@ const MoreButton = (props: {fields: ToolbarMoreButtonDefaultFields}) => {
     });
   }
 
-  // 14. Breakout Room
-  if (canAccessBreakoutRoom) {
-    actionMenuitems.push({
-      componentName: 'breakoutRoom',
-      order: 14,
-      icon: 'breakout-room',
-      iconColor: $config.SECONDARY_ACTION_COLOR,
-      textColor: $config.FONT_COLOR,
-      title: isHost ? breakoutRoomLabel : 'View Breakout Rooms',
-      onPress: () => {
-        setActionMenuVisible(false);
-        setSidePanel(SidePanelType.BreakoutRoom);
-      },
-    });
-  }
-
   useEffect(() => {
     if (isHovered) {
       setActionMenuVisible(true);
@@ -880,39 +837,51 @@ const MoreButton = (props: {fields: ToolbarMoreButtonDefaultFields}) => {
     setActionMenuVisible(false);
   }, [currentLayout]);
 
-  const onConfirm = async (langChanged, language) => {
+  const onConfirm = async (inputTranslateConfig: LanguageTranslationConfig) => {
+    console.log(
+      '[STT_PER_USER_BOT] Controls onConfirm called',
+      inputTranslateConfig,
+    );
     const isCaptionClicked = STT_clicked.current === 'caption';
     const isTranscriptClicked = STT_clicked.current === 'transcript';
     setLanguagePopup(false);
-    isFirstTimePopupOpen.current = false;
-    const method = isCaptionClicked
-      ? isCaptionON
-      : isTranscriptON
-      ? 'stop'
-      : 'start';
-    if (isTranscriptClicked) {
-      if (!isTranscriptON) {
-        setSidePanel(SidePanelType.Transcript);
-      } else {
-        setSidePanel(SidePanelType.None);
-      }
-    }
-    if (method === 'stop') return; // not closing the stt service as it will stop for whole channel
-    if (method === 'start' && isSTTActive === true) return; // not triggering the start service if STT Service already started by anyone else in the channel
+    // isFirstTimePopupOpen.current = false;
+    // const method = isCaptionClicked
+    //   ? isCaptionON
+    //   : isTranscriptON
+    //   ? 'stop'
+    //   : 'start';
 
-    if (isCaptionClicked) {
-      setIsCaptionON(prev => !prev);
-    } else {
-    }
+    // if (method === 'stop') return; // not closing the stt service as it will stop for whole channel
+    // if (method === 'start' && isSTTActive === true) return; // not triggering the start service if STT Service already started by anyone else in the channel
 
     try {
-      const res = await start(language);
-      if (res?.message.includes('STARTED')) {
-        // channel is already started now restart
-        await restart(language);
+      // const res = await start(language, language);
+      // if (res?.message.includes('STARTED')) {
+      //   // channel is already started now restart
+      //   await restart(language, language);
+      // }
+      if (isTranscriptClicked) {
+        if (!isTranscriptON) {
+          setSidePanel(SidePanelType.Transcript);
+        } else {
+          setSidePanel(SidePanelType.None);
+        }
+      }
+      if (isCaptionClicked) {
+        setIsCaptionON(prev => !prev);
+      } else {
       }
+      await handleTranslateConfigChange(inputTranslateConfig);
     } catch (error) {
-      logger.error(LogSource.Internals, 'STT', 'error in starting stt', error);
+      setIsCaptionON(false);
+      setSidePanel(SidePanelType.None);
+      logger.error(
+        LogSource.Internals,
+        'STT',
+        'error in starting caption',
+        error,
+      );
     }
   };
 
@@ -987,12 +956,14 @@ const MoreButton = (props: {fields: ToolbarMoreButtonDefaultFields}) => {
 
   return (
     <>
-      <LanguageSelectorPopup
-        modalVisible={isLanguagePopupOpen}
-        setModalVisible={setLanguagePopup}
-        onConfirm={onConfirm}
-        isFirstTimePopupOpen={isFirstTimePopupOpen.current}
-      />
+      {isLanguagePopupOpen && (
+        <LanguageSelectorPopup
+          modalVisible={isLanguagePopupOpen}
+          setModalVisible={setLanguagePopup}
+          onConfirm={onConfirm}
+          // isFirstTimePopupOpen={isFirstTimePopupOpen.current}
+        />
+      )}
       {$config.CLOUD_RECORDING && isHost && isWeb() && (
         <>
           <RecordingDeletePopup
@@ -1168,18 +1139,16 @@ export const MoreButtonToolbarItem = (props?: {
     forceUpdate();
   }, [isHost]);
 
-  const canAccessRecording = useControlPermissionMatrix('recordingControl');
-  const canAccessWhiteboard = useControlPermissionMatrix('whiteboardControl');
-  const canAccessCaptions = useControlPermissionMatrix('captionsControl');
   return width < BREAKPOINTS.lg ||
-    (canAccessCaptions && (isHost || (!isHost && isSTTActive))) ||
+    ($config.ENABLE_STT && $config.ENABLE_CAPTION) ||
     $config.ENABLE_NOISE_CANCELLATION ||
-    (canAccessRecording && isWeb()) ||
+    (isHost && $config.CLOUD_RECORDING && isWeb()) ||
     ($config.ENABLE_VIRTUAL_BACKGROUND && !$config.AUDIO_ROOM) ||
-    canAccessWhiteboard ? (
+    (isHost && $config.ENABLE_WHITEBOARD && isWebInternal()) ? (
     <ToolbarItem testID="more-btn" toolbarProps={props}>
       {((!$config.AUTO_CONNECT_RTM && !isHost) || $config.AUTO_CONNECT_RTM) &&
-      canAccessWhiteboard ? (
+      $config.ENABLE_WHITEBOARD &&
+      isWebInternal() ? (
         <WhiteboardListener />
       ) : (
         <></>
@@ -1214,7 +1183,7 @@ const Controls = (props: ControlsProps) => {
   const {items = {}, includeDefaultItems = true} = props;
   const {width, height} = useWindowDimensions();
   const {defaultContent} = useContent();
-  const {setLanguage, setMeetingTranscript, setIsSTTActive} = useCaption();
+  const {setMeetingTranscript} = useCaption();
   const defaultContentRef = React.useRef(defaultContent);
   const {setRoomInfo} = useSetRoomInfo();
   const heading = useString<'Set' | 'Changed'>(sttSpokenLanguageToastHeading);
@@ -1225,87 +1194,87 @@ const Controls = (props: ControlsProps) => {
     username: string;
   }>(sttSpokenLanguageToastSubHeading);
 
-  const {sttLanguage, isSTTActive} = useRoomInfo();
-  const {addStreamMessageListener} = useSpeechToText();
-  const {permissions} = useBreakoutRoom();
+  // const {sttLanguage} = useRoomInfo();
+  // const {addStreamMessageListener} = useSpeechToText();
 
   React.useEffect(() => {
     defaultContentRef.current = defaultContent;
   }, [defaultContent]);
 
-  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 = `${
-    //   //@ts-ignore
-    //   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]);
-
-  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 = `${
+  //   //   //@ts-ignore
+  //   //   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]);
+
+  // Ask bhupendra
+  // React.useEffect(() => {
+  //   setIsSTTActive(isSTTActive);
+  // }, [isSTTActive]);
 
   const isHidden = (hide: ToolbarItemHide = false) => {
     try {
@@ -1322,9 +1291,6 @@ const Controls = (props: ControlsProps) => {
 
   const canAccessInvite = useControlPermissionMatrix('inviteControl');
   const canAccessScreenshare = useControlPermissionMatrix('screenshareControl');
-  const canAccessRecordings = useControlPermissionMatrix('recordingControl');
-
-  const canAccessExitBreakoutRoomBtn = permissions?.canExitRoom;
 
   const defaultItems: ToolbarPresetProps['items'] = React.useMemo(() => {
     return {
@@ -1374,7 +1340,7 @@ const Controls = (props: ControlsProps) => {
       },
       recording: {
         align: 'center',
-        component: canAccessRecordings ? RecordingToolbarItem : null,
+        component: RecordingToolbarItem,
         order: 5,
         hide: w => {
           return w < BREAKPOINTS.sm ? true : false;
@@ -1385,20 +1351,13 @@ const Controls = (props: ControlsProps) => {
         component: MoreButtonToolbarItem,
         order: 6,
       },
-      'exit-breakout-room': {
-        align: 'center',
-        component: canAccessExitBreakoutRoomBtn
-          ? ExitBreakoutRoomToolbarItem
-          : null,
-        order: 7,
-      },
       'end-call': {
         align: 'center',
         component: LocalEndcallToolbarItem,
-        order: 8,
+        order: 7,
       },
     };
-  }, [canAccessInvite, canAccessScreenshare, canAccessExitBreakoutRoomBtn]);
+  }, [canAccessInvite, canAccessScreenshare]);
 
   const mergedItems = CustomToolbarMerge(
     includeDefaultItems ? defaultItems : {},

package/template/src/components/DeviceConfigure.tsx

@@ -50,7 +50,7 @@ const log = (...args: any[]) => {
 type WebRtcEngineInstance = InstanceType<typeof RtcEngine>;
 
 interface Props {
-  userRole?: ClientRoleType;
+  userRole: ClientRoleType;
 }
 export type deviceInfo = MediaDeviceInfo;
 export type deviceId = deviceInfo['deviceId'];