agora-appbuilder-core 4.0.0-test.2 → 4.0.1

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

@@ -3,7 +3,12 @@ import React from 'react';
 
 import {SidePanelType} from '../../subComponents/SidePanelEnum';
 
-import {ChatHeader, PeopleHeader, SettingsHeader} from './SidePanelHeader';
+import {
+  ChatHeader,
+  PeopleHeader,
+  SettingsHeader,
+  TranscriptHeader,
+} from './SidePanelHeader';
 
 const ActionSheetHandle = (props: {sidePanel: SidePanelType}) => {
   const Header = null;
@@ -17,6 +22,7 @@ const ActionSheetHandle = (props: {sidePanel: SidePanelType}) => {
       {sidePanel === SidePanelType.Participants && <PeopleHeader />}
       {sidePanel === SidePanelType.Chat && <ChatHeader />}
       {sidePanel === SidePanelType.Settings && <SettingsHeader />}
+      {sidePanel === SidePanelType.Transcript && <TranscriptHeader />}
     </View>
   );
 };

package/template/src/pages/video-call/DefaultLayouts.ts

@@ -1,24 +1,36 @@
-import {layoutObjectType} from 'customization-api';
+import {LayoutItem} from 'customization-api';
 import GridVideo from '../../components/GridVideo';
 import PinnedVideo from '../../components/PinnedVideo';
 import useLayoutsData from './useLayoutsData';
 import {useLayout} from '../../utils/useLayout';
-
-export const DefaultLayouts: layoutObjectType[] = [
+import {isMobileUA} from '../../utils/common';
+import {
+  toolbarItemLayoutOptionGridText,
+  toolbarItemLayoutOptionSidebarText,
+} from '../../language/default-labels/videoCallScreenLabels';
+const isMobileView = isMobileUA();
+const DefaultLayouts: LayoutItem[] = [
   {
     name: 'grid',
     label: 'Grid',
-    iconName: 'grid',
+    translationKey: toolbarItemLayoutOptionGridText,
+    //iconName: 'grid',
+    icon: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABICAYAAABV7bNHAAAACXBIWXMAACE4AAAhOAFFljFgAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAFOSURBVHgB7drBTcNAEIXhWVeQEkwJVIDohA6gA2iBigIVhA6cEuhgGGNfd1+kZK1x9H/SyidbT0/ry+6YAQBwt9z9EOs91tFv4xTrZW8ZasHGWJP3Mc3fz56hiHBTPEbr5xzrsZTya0kzDLW3fNmCo/U1xnqzxBmG+nv2att4ssQZqr/Y/IPaRmJ7l6wZBkMTBQkUJFCQQEECBQkUJFCQQEECBQkUJFCQQEECBQkUJFCQ0Croy7bxY4kztAr6tm18WuIMrSPXQzxO1vlGIU46HyxxhuoOWq9Bnm25FunhvH7fMme4yHz94stt5C0cY32su2NXGQAAuDPOAFUzGANUIhwDVLW3nAGqfwxQiQwMUIkMnCgKFCRQkEBBAgUJFCRQkEBBAgUJFCRQkEBBAgUJFCRQkEBBAgNUIgMDVCIDA1QMUF2X4SLOABUAADv0Bxz9l6sMoGOZAAAAAElFTkSuQmCC',
     component: GridVideo,
   },
   {
     name: 'pinned',
-    label: 'Pinned',
-    iconName: 'pinned',
+    label: 'Sidebar',
+    translationKey: toolbarItemLayoutOptionSidebarText,
+    //iconName: 'pinned',
+    //for mobile view top pinned icon and desktop left pinned icon
+    icon: isMobileView
+      ? 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABICAYAAABV7bNHAAAACXBIWXMAACE4AAAhOAFFljFgAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAFFSURBVHgB7dzhTcJQFEDhWybQDeoIjuAoTqKO4ASOAk6gG9gNZIN6TTUhhvdOAo9Iy/mSF3689JKeFH40lAhJkhZpHMc+1zrX53igP/OaaDjzJVdfa9DV4uTLOlcfR+jSzswxGmg8c8h1myO3+zZXlQMf4sg4M9Hneixt1q6gj2gQaAZX0Ldtjrze+16lI874ZE4+c9cqVGUgYCBgIGAgYCBgIGAgYCBgIGAgYCBgIEn/6eQ3zObCG2YHMhAwEDAQMBAwEDAQMBAwEDAQMBAwEDAQMBAwEDAQMBAwEDAQMBAwEDAQMBAwEDAQMBAwEDAQMBAwEDAQMBAwEKgF2sTleC9t1AK9xuV4Lm3UfqN4lS9vsfxHw4eu625Km8Ur6OdB+7uYHrxfqiGmcyyqfklnpN+691H5nM7QJtdTTP+4MIQkSYv0BZfkCSDYSwACAAAAAElFTkSuQmCC'
+      : 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABICAYAAABV7bNHAAAACXBIWXMAACE4AAAhOAFFljFgAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAGCSURBVHgB7drdTYRAFIbhM1SwJWAJVmC2E61AO1BLsCKwgrUDKMEOxkPAS+a7YeCweZ9ksle7OXn3jzBjBgDA3co5X3y9++ryNm6+ns82w9pgra8h1zFMrx99hiSGG/yhtXpGX48ppV8LOkOz9qw8fwRbq6v19WaBZ2jWn2evto8nCzzD6lds+oLaTvzjnaLO0BiKCCQQSCCQQCCBQAKBBAIJBBIIJBBIIJBAIIFAAoEEAgmlQL3t48cCKwX6tn18WWClW64Xf7hZ5R0Fv9P5YOszxL3lumyDXG3eFqlhXF4/tOKPtEf6f4dfbLvfit7Xp817UaMFlywwdjVOgEACgQQCCQQSZKAc9fDSTtT5oNYfOqtzNT36upauhSL8zYc+QBX6OijC4aUIoh+gOhwHqMQM/M0LBBIIJBBIIJBAIIFAAoEEAgkEEggkEEggkEAggUACgYToB6h6O3iG6AeoDp8h+gGqw2cIfYDqNIe4pi2gZUd0C52vj+XTcaoZAAA4lz9x+tmcZ0GmbAAAAABJRU5ErkJggg==',
     component: PinnedVideo,
   },
 ];
-
+export {DefaultLayouts};
 export const getPinnedLayoutName = () => DefaultLayouts[1].name;
 export const getGridLayoutName = () => DefaultLayouts[0].name;
 
@@ -28,7 +40,7 @@ export const useSetPinnedLayout = () => {
   const pinnedLayoutName = getPinnedLayoutName();
   let checkPinnedLayoutExist = false;
   if (layouts && Array.isArray(layouts) && layouts.length) {
-    let data = layouts.filter((item) => item.name === pinnedLayoutName);
+    let data = layouts.filter(item => item.name === pinnedLayoutName);
     if (data && data.length) {
       checkPinnedLayoutExist = true;
     }

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

@@ -1,88 +1,60 @@
-import React, {useContext, useEffect} from 'react';
-import {View, StyleSheet, useWindowDimensions, Text} from 'react-native';
-import {RFValue} from 'react-native-responsive-fontsize';
+import React from 'react';
+import {View, StyleSheet, Text} from 'react-native';
 import ThemeConfig from '../../theme';
-import {RenderInterface} from '../../../agora-rn-uikit';
 import ImageIcon from '../../atoms/ImageIcon';
-import TextWithTooltip from '../../subComponents/TextWithTooltip';
+import {useLayout, useContent} from 'customization-api';
+import {isMobileUA, isWeb, useIsSmall} from '../../utils/common';
+import {getGridLayoutName} from './DefaultLayouts';
+import {useVideoContainer} from './VideoRenderer';
+import hexadecimalTransparency from '../../utils/hexadecimalTransparency';
 import {useString} from '../../utils/useString';
-import {useLayout, useRender} from 'customization-api';
-import useIsActiveSpeaker from '../../utils/useIsActiveSpeaker';
-import {isMobileUA, isWeb, isWebInternal, useIsSmall} from '../../utils/common';
-import AnimatedActiveSpeaker from '../../atoms/AnimatedActiveSpeaker';
-import {getGridLayoutName, getPinnedLayoutName} from './DefaultLayouts';
+import {videoRoomUserFallbackText} from '../../language/default-labels/videoCallScreenLabels';
 
-interface NameWithMicIconProps {
-  user: RenderInterface;
-  isMax: boolean;
-  videoTileWidth: number;
+export interface NameWithMicIconProps {
+  name: string;
+  muted?: boolean;
+  customBgColor?: string;
+  customTextColor?: string;
 }
 
 const NameWithMicIcon = (props: NameWithMicIconProps) => {
-  const {activeUids} = useRender();
+  const {activeUids, customContent} = useContent();
+  const {videoTileWidth} = useVideoContainer();
   const {currentLayout} = useLayout();
+  const activeUidsLen = activeUids?.filter(i => !customContent[i])?.length;
   const reduceSpace =
     isMobileUA() &&
     activeUids.length > 4 &&
     currentLayout === getGridLayoutName();
-  const {user} = props;
-  const {height, width} = useWindowDimensions();
-  const isActiveSpeaker = useIsActiveSpeaker();
-  const isSpeaking = isActiveSpeaker(user.uid);
-  //commented for v1 release
-  //const remoteUserDefaultLabel = useString('remoteUserDefaultLabel')();
-  const remoteUserDefaultLabel = 'User';
+  const {name, muted} = props;
+  const remoteUserDefaultLabel = useString(videoRoomUserFallbackText)();
   const isSmall = useIsSmall();
   return (
     <View
       style={[
         style.container,
         {
-          maxWidth:
-            props.videoTileWidth * 0.6 > 180 ? 180 : props.videoTileWidth * 0.6,
+          maxWidth: videoTileWidth * 0.6 > 180 ? 180 : videoTileWidth * 0.6,
         },
         reduceSpace ? {left: 2, bottom: 2} : {},
-        reduceSpace && activeUids.length > 12 ? {padding: 2} : {},
+        reduceSpace && activeUidsLen > 12 ? {padding: 2} : {},
+        props?.customBgColor ? {backgroundColor: props?.customBgColor} : {},
       ]}>
-      {/* {user.audio ? (
-          <AnimatedActiveSpeaker isSpeaking={isSpeaking} />
-        ) : ( */}
-      <ImageIcon
-        iconType="plain"
-        name={
-          user.audio && isSpeaking
-            ? 'active-speaker'
-            : user.audio
-            ? 'mic-on'
-            : 'mic-off'
-        }
-        tintColor={
-          user.audio
-            ? $config.PRIMARY_ACTION_BRAND_COLOR
-            : $config.SEMANTIC_ERROR
-        }
-        iconSize={20}
-      />
-      {/* )} */}
-      {/* <ImageIcon
-          name={
-            isSpeaking ? 'active-speaker' : user.audio ? 'mic-on' : 'mic-off'
-          }
+      {muted !== undefined ? (
+        <ImageIcon
+          iconType="plain"
+          name={!muted ? 'mic-on' : 'mic-off'}
           tintColor={
-            isSpeaking
-              ? $config.PRIMARY_ACTION_BRAND_COLOR
-              : user.audio
-              ? $config.PRIMARY_ACTION_BRAND_COLOR
-              : $config.SEMANTIC_ERROR
+            !muted ? $config.PRIMARY_ACTION_BRAND_COLOR : $config.SEMANTIC_ERROR
           }
-          iconSize={'small'}
-        /> */}
+          iconSize={20}
+        />
+      ) : (
+        <></>
+      )}
       {(isMobileUA() || (!isMobileUA() && isSmall())) &&
       currentLayout === getGridLayoutName() &&
-      activeUids.length > 6 ? (
-        //  ||  (isMobileUA() &&
-        //     currentLayout !== getPinnedLayoutName() &&
-        //     !props?.isMax)
+      activeUidsLen > 6 ? (
         <></>
       ) : (
         <PlatformWrapper>
@@ -90,8 +62,11 @@ const NameWithMicIcon = (props: NameWithMicIconProps) => {
             numberOfLines={1}
             textBreakStrategy="simple"
             ellipsizeMode="tail"
-            style={style.name}>
-            {user.name || remoteUserDefaultLabel}
+            style={[
+              style.name,
+              props?.customTextColor ? {color: props?.customTextColor} : {},
+            ]}>
+            {name || remoteUserDefaultLabel}
           </Text>
         </PlatformWrapper>
       )}
@@ -120,7 +95,8 @@ const PlatformWrapper = ({children}) => {
 
 const style = StyleSheet.create({
   container: {
-    backgroundColor: $config.VIDEO_AUDIO_TILE_OVERLAY_COLOR,
+    backgroundColor:
+      $config.VIDEO_AUDIO_TILE_OVERLAY_COLOR + hexadecimalTransparency['25%'],
     position: 'absolute',
     alignItems: 'center',
     padding: 8,
@@ -129,7 +105,8 @@ const style = StyleSheet.create({
     bottom: 8,
     borderRadius: 4,
     flexDirection: 'row',
-    zIndex: 5,
+    zIndex: 999,
+    elevation: 5,
   },
   name: {
     color: $config.VIDEO_AUDIO_TILE_TEXT_COLOR,

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

@@ -1,7 +1,7 @@
-import React from 'react';
+import React, {useEffect} from 'react';
 import VideoRenderer from './VideoRenderer';
 import {UidType} from '../../../agora-rn-uikit';
-import {renderComponentObjectInterface, useRender} from 'customization-api';
+import {useContent} from 'customization-api';
 import {useCustomization} from 'customization-implementation';
 import {isValidReactComponent} from '../../utils/common';
 
@@ -16,35 +16,19 @@ interface RenderComponentProps {
   isMax?: boolean;
 }
 const RenderComponent = ({uid, isMax = false}: RenderComponentProps) => {
-  const {renderList} = useRender();
-  const FpeRenderComponent = useCustomization((config) =>
-    typeof config?.components?.videoCall === 'object' &&
-    typeof config?.components?.videoCall?.customContent === 'object'
-      ? config?.components?.videoCall?.customContent
-      : undefined,
-  );
+  const {defaultContent, customContent, activeUids} = useContent();
+  const RenderComp = DefaultRenderComponent['rtc'];
 
-  const getRenderComponent = (type: keyof renderComponentObjectInterface) => {
-    //checking FPE providing the render component and whether its valid react element
-    const FPEComp =
-      FpeRenderComponent &&
-      FpeRenderComponent[type] &&
-      isValidReactComponent(FpeRenderComponent[type])
-        ? FpeRenderComponent[type]
-        : false;
-    //if its valid element then return fpe comp other return the default component
-    if (FPEComp) {
-      return FPEComp;
-    } else {
-      return DefaultRenderComponent[type]
-        ? DefaultRenderComponent[type]
-        : DefaultRenderComponent['rtc'];
-    }
-  };
-
-  const RenderComp = getRenderComponent(renderList[uid]?.type);
-
-  return <RenderComp user={renderList[uid]} isMax={isMax} />;
+  if (customContent && customContent[uid] && customContent[uid]?.component) {
+    const CustomComponent = customContent[uid]?.component;
+    const CustomComponentProps = customContent[uid]?.props;
+    //@ts-ignore
+    return <CustomComponent {...CustomComponentProps} />;
+  } else if (defaultContent[uid]) {
+    return <RenderComp user={defaultContent[uid]} isMax={isMax} />;
+  } else {
+    return null;
+  }
 };
 
 export default RenderComponent;

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

@@ -1,4 +1,10 @@
-import {StyleSheet, Text, TouchableOpacity, View} from 'react-native';
+import {
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  useWindowDimensions,
+  View,
+} from 'react-native';
 import React, {useContext} from 'react';
 import SidePanelHeader, {
   SidePanelStyles,
@@ -8,13 +14,42 @@ import ThemeConfig from '../../theme';
 import {useChatNotification} from '../../components/chat-notification/useChatNotification';
 import {useSidePanel} from '../../utils/useSidePanel';
 import {SidePanelType} from '../../subComponents/SidePanelEnum';
-import {useChatUIControl} from '../../components/chat-ui/useChatUIControl';
+import {
+  ChatType,
+  useChatUIControls,
+} from '../../components/chat-ui/useChatUIControls';
 import {numFormatter} from '../../utils';
 import ChatContext from '../../components/ChatContext';
+import {useCaption} from '../../subComponents/caption/useCaption';
+import ActionMenu, {ActionMenuItem} from '../../atoms/ActionMenu';
+import {calculatePosition} from '../../utils/common';
+import LanguageSelectorPopup from '../../subComponents/caption/LanguageSelectorPopup';
+import useSTTAPI from '../../subComponents/caption/useSTTAPI';
+import useGetName from '../../utils/useGetName';
+import {LanguageType} from '../../subComponents/caption/utils';
+import {useRoomInfo, usePreCall} from 'customization-api';
+import useTranscriptDownload from '../../subComponents/caption/useTranscriptDownload';
+import {useVB} from '../../components/virtual-background/useVB';
+import {PropsContext} from '../../../agora-rn-uikit';
+import useLiveStreamingUids from '../../utils/useLiveStreamingUids';
+import {useString} from '../../utils/useString';
+import {
+  settingsPanelHeading,
+  vbPanelHeading,
+} from '../../language/default-labels/precallScreenLabels';
+import {
+  chatPanelGroupTabText,
+  chatPanelPrivateTabText,
+  peoplePanelHeaderText,
+  sttChangeSpokenLanguageText,
+  sttDownloadTranscriptBtnText,
+  sttTranscriptPanelHeaderText,
+} from '../../language/default-labels/videoCallScreenLabels';
 
-export const SettingsHeader = (props) => {
+export const SettingsHeader = props => {
   const {setSidePanel} = useSidePanel();
-  const settingsLabel = 'Settings';
+  const settingsLabel = useString(settingsPanelHeading)();
+
   return (
     <SidePanelHeader
       centerComponent={
@@ -31,7 +66,12 @@ export const SettingsHeader = (props) => {
 
 export const PeopleHeader = () => {
   const {onlineUsersCount} = useContext(ChatContext);
-  const participantsLabel = `People (${numFormatter(onlineUsersCount)})`;
+  const {hostUids, audienceUids} = useLiveStreamingUids();
+  const count = $config.EVENT_MODE
+    ? hostUids.length + audienceUids.length
+    : onlineUsersCount;
+  const participantsLabel = useString(peoplePanelHeaderText)();
+
   const {setSidePanel} = useSidePanel();
   return (
     <SidePanelHeader
@@ -57,39 +97,32 @@ export const ChatHeader = () => {
   } = useChatNotification();
 
   const {setSidePanel} = useSidePanel();
-  const groupChatLabel = 'Group';
-  const privateChatLabel = 'Private';
+  const groupChatLabel = useString(chatPanelGroupTabText)();
+  const privateChatLabel = useString(chatPanelPrivateTabText)();
 
-  const {
-    groupActive,
-    setGroupActive,
-    privateActive,
-    setPrivateActive,
-    setSelectedChatUserId: setSelectedUser,
-  } = useChatUIControl();
+  const {chatType, setChatType, setPrivateChatUser} = useChatUIControls();
 
   const selectGroup = () => {
-    setPrivateActive(false);
-    setGroupActive(true);
+    setChatType(ChatType.Group);
     //move this logic into ChatContainer
     //setUnreadGroupMessageCount(0);
-    setSelectedUser(0);
+    setPrivateChatUser(0);
   };
   const selectPrivate = () => {
-    setGroupActive(false);
-    setSelectedUser(0);
-    setPrivateActive(false);
+    setPrivateChatUser(0);
+    setChatType(ChatType.MemberList);
   };
-
+  const isPrivateActive = chatType === ChatType.Private;
+  const isGroupActive = chatType === ChatType.Group;
   return (
     <SidePanelHeader
       isChat={true}
-      leadingIconName={privateActive ? 'back-btn' : null}
+      leadingIconName={isPrivateActive ? 'back-btn' : null}
       leadingIconOnPress={
-        privateActive
+        isPrivateActive
           ? () => {
-              setSelectedUser(0);
-              setPrivateActive(false);
+              setPrivateChatUser(0);
+              setChatType(ChatType.MemberList);
             }
           : () => {}
       }
@@ -98,20 +131,20 @@ export const ChatHeader = () => {
           <TouchableOpacity
             onPress={selectGroup}
             style={
-              groupActive ? styles.activeContainer : styles.nonActiveContainer
+              isGroupActive ? styles.activeContainer : styles.nonActiveContainer
             }>
             {unreadGroupMessageCount !== 0 ? (
               <View style={styles.chatNotification} />
             ) : null}
             <Text
-              style={groupActive ? styles.activeText : styles.nonActiveText}>
+              style={isGroupActive ? styles.activeText : styles.nonActiveText}>
               {groupChatLabel}
             </Text>
           </TouchableOpacity>
           <TouchableOpacity
             onPress={selectPrivate}
             style={
-              !groupActive
+              !isGroupActive
                 ? [styles.activeContainer]
                 : [styles.nonActiveContainer]
             }>
@@ -119,7 +152,7 @@ export const ChatHeader = () => {
               <View style={styles.chatNotification} />
             ) : null}
             <Text
-              style={!groupActive ? styles.activeText : styles.nonActiveText}>
+              style={!isGroupActive ? styles.activeText : styles.nonActiveText}>
               {privateChatLabel}
             </Text>
           </TouchableOpacity>
@@ -133,6 +166,171 @@ export const ChatHeader = () => {
   );
 };
 
+export const VBHeader = () => {
+  const label = useString(vbPanelHeading)();
+  const {setSidePanel} = useSidePanel();
+  const {setIsVBActive} = useVB();
+
+  const {
+    rtcProps: {callActive},
+  } = useContext(PropsContext);
+  const trailingIconName = 'close';
+  return (
+    <SidePanelHeader
+      centerComponent={<Text style={SidePanelStyles.heading}>{label}</Text>}
+      trailingIconName={trailingIconName}
+      trailingIconOnPress={() => {
+        setSidePanel(SidePanelType.None);
+        setIsVBActive(false);
+      }}
+    />
+  );
+};
+
+export const TranscriptHeader = props => {
+  const {setSidePanel} = useSidePanel();
+  const moreIconRef = React.useRef<View>(null);
+  const [actionMenuVisible, setActionMenuVisible] =
+    React.useState<boolean>(false);
+
+  const label = useString(sttTranscriptPanelHeaderText)();
+
+  return (
+    <SidePanelHeader
+      centerComponent={<Text style={SidePanelStyles.heading}>{label}</Text>}
+      trailingIconName={'more-menu'}
+      ref={moreIconRef}
+      trailingIconOnPress={() => {
+        setActionMenuVisible(true);
+      }}
+      trailingIconName2={'close'}
+      trailingIconOnPress2={() => {
+        setSidePanel(SidePanelType.None);
+      }}>
+      <TranscriptHeaderActionMenu
+        actionMenuVisible={actionMenuVisible}
+        setActionMenuVisible={setActionMenuVisible}
+        btnRef={moreIconRef}
+      />
+    </SidePanelHeader>
+  );
+};
+
+interface TranscriptHeaderActionMenuProps {
+  actionMenuVisible: boolean;
+  setActionMenuVisible: (actionMenuVisible: boolean) => void;
+  btnRef: React.RefObject<View>;
+}
+
+const TranscriptHeaderActionMenu = (props: TranscriptHeaderActionMenuProps) => {
+  const {actionMenuVisible, setActionMenuVisible, btnRef} = props;
+  const {
+    language: prevLang,
+    meetingTranscript,
+    isLangChangeInProgress,
+    setLanguage,
+  } = useCaption();
+  const {downloadTranscript} = useTranscriptDownload();
+  const [modalPosition, setModalPosition] = React.useState({});
+  const [isPosCalculated, setIsPosCalculated] = React.useState(false);
+  const {width: globalWidth, height: globalHeight} = useWindowDimensions();
+  const [isLanguagePopupOpen, setLanguagePopup] =
+    React.useState<boolean>(false);
+  const {restart} = useSTTAPI();
+  const username = useGetName();
+  const actionMenuitems: ActionMenuItem[] = [];
+  const {
+    data: {isHost},
+  } = useRoomInfo();
+
+  const downloadTranscriptLabel = useString(sttDownloadTranscriptBtnText)();
+  const changeSpokenLanguage = useString<boolean>(
+    sttChangeSpokenLanguageText,
+  )();
+  isHost &&
+    actionMenuitems.push({
+      icon: 'lang-select',
+      iconColor: $config.SECONDARY_ACTION_COLOR,
+      textColor: $config.FONT_COLOR,
+      title: changeSpokenLanguage + ' ',
+      disabled: isLangChangeInProgress,
+      callback: () => {
+        setActionMenuVisible(false);
+        setLanguagePopup(true);
+      },
+    });
+
+  actionMenuitems.push({
+    icon: 'download',
+    iconColor: $config.SECONDARY_ACTION_COLOR,
+    textColor: $config.FONT_COLOR,
+    title: downloadTranscriptLabel,
+    disabled: meetingTranscript.length === 0,
+    callback: () => {
+      downloadTranscript();
+      setActionMenuVisible(false);
+    },
+  });
+
+  const onLanguageChange = (langChanged = false, language: LanguageType[]) => {
+    setLanguagePopup(false);
+    if (langChanged) {
+      restart(language)
+        .then(() => {
+          console.log('stt restarted successfully');
+        })
+        .catch(error => {
+          console.log('Error in restarting', error);
+          // Handle the error case
+        });
+    }
+  };
+
+  React.useEffect(() => {
+    if (actionMenuVisible) {
+      //getting btnRef x,y
+      btnRef?.current?.measure(
+        (
+          _fx: number,
+          _fy: number,
+          localWidth: number,
+          localHeight: number,
+          px: number,
+          py: number,
+        ) => {
+          const data = calculatePosition({
+            px,
+            py,
+            localWidth,
+            localHeight,
+            globalHeight,
+            globalWidth,
+          });
+          setModalPosition(data);
+          setIsPosCalculated(true);
+        },
+      );
+    }
+  }, [actionMenuVisible]);
+  return (
+    <>
+      <ActionMenu
+        from={'transcript-header'}
+        actionMenuVisible={actionMenuVisible && isPosCalculated}
+        setActionMenuVisible={setActionMenuVisible}
+        modalPosition={modalPosition}
+        items={actionMenuitems}
+      />
+
+      <LanguageSelectorPopup
+        modalVisible={isLanguagePopupOpen}
+        setModalVisible={setLanguagePopup}
+        onConfirm={onLanguageChange}
+      />
+    </>
+  );
+};
+
 const styles = StyleSheet.create({
   buttonHolder: {
     backgroundColor: