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

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

@@ -1,42 +1,54 @@
+/* eslint-disable react-native/no-inline-styles */
 import {StyleSheet, Text, TouchableOpacity, View} from 'react-native';
 import React, {useContext} from 'react';
 import ImageIcon from '../../atoms/ImageIcon';
-import LocalAudioMute, {
-  LocalAudioMuteProps,
-} from '../../subComponents/LocalAudioMute';
-import LocalVideoMute, {
-  LocalVideoMuteProps,
-} from '../../subComponents/LocalVideoMute';
-import LocalEndcall, {
-  LocalEndcallProps,
-} from '../../subComponents/LocalEndCall';
+import LocalAudioMute from '../../subComponents/LocalAudioMute';
+import LocalVideoMute from '../../subComponents/LocalVideoMute';
+import LocalEndcall from '../../subComponents/LocalEndCall';
 import CopyJoinInfo from '../../subComponents/CopyJoinInfo';
 import LocalSwitchCamera from '../../subComponents/LocalSwitchCamera';
 import Recording from '../../subComponents/Recording';
 import ChatContext from '../../components/ChatContext';
-import {numFormatter} from '../../utils';
-import IconButton from '../../atoms/IconButton';
-import {useLayout} from '../../utils/useLayout';
-import useLayoutsData from '../../pages/video-call/useLayoutsData';
-import {useChangeDefaultLayout} from '../../pages/video-call/DefaultLayouts';
 import {PropsContext, ToggleState} from '../../../agora-rn-uikit';
-import {ClientRole} from '../../../agora-rn-uikit';
-import {useMeetingInfo} from '../../components/meeting-info/useMeetingInfo';
+import {ClientRoleType} from '../../../agora-rn-uikit';
+import {
+  RoomInfoContextInterface,
+  useRoomInfo,
+} from '../../components/room-info/useRoomInfo';
 import LiveStreamControls from '../../components/livestream/views/LiveStreamControls';
 import LiveStreamContext, {RaiseHandValue} from '../../components/livestream';
 import {
   ChatIconButton,
-  ParticipantsCountView,
   ParticipantsIconButton,
 } from '../../../src/components/Navbar';
 import {useChatNotification} from '../../components/chat-notification/useChatNotification';
 import {SidePanelType} from '../../subComponents/SidePanelEnum';
 import {useSidePanel} from '../../utils/useSidePanel';
-import Settings from '../../components/Settings';
-import {useLocalUserInfo} from 'customization-api';
+import {useContent, useLocalUserInfo, ToolbarItem} from 'customization-api';
 import LayoutIconButton from '../../subComponents/LayoutIconButton';
+import CaptionIcon from '../../../src/subComponents/caption/CaptionIcon';
+import TranscriptIcon from '../../../src/subComponents/caption/TranscriptIcon';
+import useSTTAPI from '../../../src/subComponents/caption/useSTTAPI';
+import Carousel from '../../atoms/Carousel';
+import {useCaption} from '../../subComponents/caption/useCaption';
+import Settings from '../../components/Settings';
 import ScreenshareButton from '../../subComponents/screenshare/ScreenshareButton';
 import {useScreenshare} from '../../subComponents/screenshare/useScreenshare';
+import {EventNames} from '../../rtm-events';
+import events from '../../rtm-events-api';
+import {getLanguageLabel} from '../../subComponents/caption/utils';
+import Toast from '../../../react-native-toast-message';
+import {CustomToolbarSort} from '../../utils/common';
+import {ActionSheetProvider} from '../../utils/useActionSheet';
+import {useWaitingRoomContext} from '../../components/contexts/WaitingRoomContext';
+import {useSetRoomInfo} from '../../components/room-info/useSetRoomInfo';
+import VBButton from '../../components/virtual-background/VBButton';
+import {useVB} from '../../components/virtual-background/useVB';
+import {useString} from '../../utils/useString';
+import {
+  sttSpokenLanguageToastHeading,
+  sttSpokenLanguageToastSubHeading,
+} from '../../language/default-labels/videoCallScreenLabels';
 //Icon for expanding Action Sheet
 interface ShowMoreIconProps {
   isExpanded: boolean;
@@ -46,7 +58,7 @@ interface ShowMoreIconProps {
 const ShowMoreIcon = (props: ShowMoreIconProps) => {
   const {isExpanded, onPress, showNotification} = props;
   return (
-    <View style={styles.iconWithText}>
+    <ToolbarItem>
       <View style={styles.iconContainer}>
         <TouchableOpacity onPress={onPress}>
           <ImageIcon
@@ -56,147 +68,78 @@ const ShowMoreIcon = (props: ShowMoreIconProps) => {
         </TouchableOpacity>
         {showNotification && <View style={styles.notification} />}
       </View>
-    </View>
+    </ToolbarItem>
   );
 };
 
 //Icon for Live Streaming Controls
-interface LiveStreamIconProps {
-  isHandRaised: boolean;
-  showLabel?: boolean;
-}
-const LiveStreamIcon = (props: LiveStreamIconProps) => {
-  const {isHandRaised, showLabel = $config.ICON_TEXT} = props;
-  return (
-    <View style={styles.iconWithText}>
-      <View style={styles.iconContainer}>
-        <LiveStreamControls
-          showControls={true}
-          isDesktop={false}
-          showLabel={false}
-        />
-      </View>
-      {showLabel && (
-        <Text style={styles.iconText}>
-          {isHandRaised ? 'Lower\nHand' : 'Raise\nHand'}
-        </Text>
-      )}
-    </View>
-  );
+const LiveStreamIcon = () => {
+  //toolbaritem wrapped in the LiveStreamControls
+  return <LiveStreamControls showControls={true} />;
 };
 
 //Icon for Chat
-interface ChatIconProps {
-  showLabel?: boolean;
-}
-const ChatIcon = (props: ChatIconProps) => {
-  const {showLabel = $config.ICON_TEXT} = props;
+const ChatIcon = () => {
   return (
-    <View style={styles.iconWithText}>
-      <View style={styles.iconContainer}>
-        <ChatIconButton isOnActionSheet={true} />
-      </View>
-      {showLabel && <Text style={styles.iconText}>Chat</Text>}
-    </View>
+    <ToolbarItem>
+      <ChatIconButton />
+    </ToolbarItem>
   );
 };
 
 //Icon for Participants
-interface ParticipantsIconProps {
-  showNotification: boolean;
-}
-const ParticipantsIcon = (props: ParticipantsIconProps) => {
-  const {showNotification} = props;
+const ParticipantsIcon = () => {
   return (
-    <View style={styles.iconWithText}>
-      <View style={styles.iconContainer}>
-        <ParticipantsIconButton isOnActionSheet={true} />
-      </View>
-      {$config.ICON_TEXT && <Text style={styles.iconText}>People</Text>}
-      {/* {showNotification && <View style={styles.notification} />} */}
-    </View>
+    <ToolbarItem>
+      <ParticipantsIconButton />
+    </ToolbarItem>
   );
 };
 
 //Icon for Recording
-interface RecordingIconProps {
-  showLabel?: boolean;
-}
-const RecordingIcon = (props: RecordingIconProps) => {
-  const {showLabel = $config.ICON_TEXT} = props;
+
+const RecordingIcon = () => {
   return (
-    <View style={styles.iconWithText}>
-      <View style={styles.iconContainer}>
-        <Recording showLabel={false} isOnActionSheet={true} />
-      </View>
-      {showLabel && <Text style={styles.iconText}>Record</Text>}
-    </View>
+    <ToolbarItem>
+      <Recording />
+    </ToolbarItem>
   );
 };
 
-interface SwitchCameraIconProps {
-  disabled: boolean;
-}
-const SwitchCameraIcon = (props: SwitchCameraIconProps) => {
-  const {disabled} = props;
+const VBIcon = () => {
+  const {isVBActive, setIsVBActive} = useVB();
   return (
-    <View style={styles.iconWithText}>
-      <View style={styles.iconContainer}>
-        <LocalSwitchCamera showLabel={false} disabled={disabled} />
-      </View>
-      {$config.ICON_TEXT && (
-        <View>
-          <Text
-            style={[
-              styles.iconText,
-              {
-                color: disabled ? $config.SEMANTIC_NEUTRAL : $config.FONT_COLOR,
-              },
-            ]}>
-            Switch
-          </Text>
-          <Text
-            style={[
-              styles.iconText,
-              {
-                color: disabled ? $config.SEMANTIC_NEUTRAL : $config.FONT_COLOR,
-                marginTop: 0,
-              },
-            ]}>
-            Camera
-          </Text>
-        </View>
-      )}
-    </View>
+    <ToolbarItem>
+      <VBButton
+        isVBOpen={isVBActive}
+        setIsVBOpen={setIsVBActive}
+        showLabel={true}
+      />
+    </ToolbarItem>
   );
 };
 
-interface SettingsIconProps {
-  onPress: () => void;
-}
-const SettingsIcon = (props: SettingsIconProps) => {
-  const {onPress} = props;
+const SwitchCameraIcon = () => {
   return (
-    <View style={styles.iconWithText}>
-      <TouchableOpacity style={styles.iconContainer} onPress={onPress}>
-        <ImageIcon
-          name={'settings'}
-          tintColor={$config.SECONDARY_ACTION_COLOR}
-        />
-      </TouchableOpacity>
-      {$config.ICON_TEXT && <Text style={styles.iconText}>Settings</Text>}
-    </View>
+    <ToolbarItem>
+      <LocalSwitchCamera />
+    </ToolbarItem>
+  );
+};
+
+const SettingsIcon = () => {
+  return (
+    <ToolbarItem>
+      <Settings />
+    </ToolbarItem>
   );
 };
 
 const ShareIcon = () => {
   return (
-    <View style={styles.iconWithText}>
-      <View style={styles.iconContainer}>
-        <CopyJoinInfo showLabel={false} isOnActionSheet={true} />
-      </View>
-      {$config.ICON_TEXT && <Text style={styles.iconText}>Invite</Text>}
-    </View>
+    <ToolbarItem>
+      <CopyJoinInfo />
+    </ToolbarItem>
   );
 };
 const ScreenshareIcon = () => {
@@ -210,124 +153,213 @@ const ScreenshareIcon = () => {
   );
 };
 
-interface AudioIconProps {
-  isMobileView: boolean;
-  isOnActionSheet: boolean;
-  showLabel: boolean;
-  disabled: boolean;
-}
-const AudioIcon = (props: AudioIconProps) => {
+const AudioIcon = () => {
   return (
-    <View style={styles.iconWithText}>
-      <View style={styles.iconContainer}>
-        <LocalAudioMute {...props} />
-      </View>
-    </View>
+    <ToolbarItem>
+      <LocalAudioMute />
+    </ToolbarItem>
   );
 };
 
-interface CamIconProps {
-  isMobileView: boolean;
-  isOnActionSheet: boolean;
-  showLabel: boolean;
-  disabled: boolean;
-}
-const CamIcon = (props: CamIconProps) => {
+const CamIcon = () => {
   return (
-    <View style={styles.iconWithText}>
-      <View style={styles.iconContainer}>
-        <LocalVideoMute {...props} />
-      </View>
-    </View>
+    <ToolbarItem>
+      <LocalVideoMute />
+    </ToolbarItem>
+  );
+};
+
+const EndCallIcon = () => {
+  return (
+    <ToolbarItem>
+      <LocalEndcall />
+    </ToolbarItem>
   );
 };
 
-interface EndCallIconProps {
-  showLabel: boolean;
-  isOnActionSheet: boolean;
+const LayoutIcon = () => {
+  return (
+    <ToolbarItem>
+      <LayoutIconButton />
+    </ToolbarItem>
+  );
+};
+
+interface CaptionIconBtnProps {
+  showLabel?: boolean;
+  onPress?: () => void;
 }
-const EndCallIcon = (props: EndCallIconProps) => {
+
+const CaptionIconBtn = (props: CaptionIconBtnProps) => {
+  const {showLabel = $config.ICON_TEXT, onPress} = props;
+  const {isCaptionON, isSTTActive} = useCaption();
+  const {
+    data: {isHost},
+  } = useRoomInfo();
+  const isDisabled = !(
+    $config.ENABLE_STT &&
+    (isHost || (!isHost && isSTTActive))
+  );
   return (
-    <View style={styles.iconWithText}>
-      <View
-        style={[
-          styles.iconContainer,
-          {backgroundColor: $config.SEMANTIC_ERROR},
-        ]}>
-        <LocalEndcall {...props} />
-      </View>
-    </View>
+    <ToolbarItem>
+      <CaptionIcon
+        isOnActionSheet={true}
+        showLabel={true}
+        closeActionSheet={onPress}
+      />
+    </ToolbarItem>
   );
 };
 
-interface LayoutIconProps {
+interface TranscriptIconProps {
   showLabel?: boolean;
 }
-const LayoutIcon = (props: LayoutIconProps) => {
+
+const TranscriptIconBtn = (props: TranscriptIconProps) => {
   const {showLabel = $config.ICON_TEXT} = props;
+  const {sidePanel} = useSidePanel();
+  const isTranscriptON = sidePanel === SidePanelType.Transcript;
+  const {isSTTActive} = useCaption();
+  const {
+    data: {isHost},
+  } = useRoomInfo();
+  const isDisabled = !(
+    $config.ENABLE_STT &&
+    (isHost || (!isHost && isSTTActive))
+  );
   return (
-    <View style={styles.iconWithText}>
-      <View style={styles.iconContainer}>
-        <LayoutIconButton showLabel={false} />
-      </View>
-      {showLabel && <Text style={styles.iconText}>Layout</Text>}
-    </View>
+    <ToolbarItem>
+      <TranscriptIcon isOnActionSheet={true} showLabel={true} />
+    </ToolbarItem>
   );
 };
 
-type ActionSheetComponentsProps = [
-  (props: AudioIconProps) => JSX.Element,
-  (props: CamIconProps) => JSX.Element,
-  (props: EndCallIconProps) => JSX.Element,
-  (props: ShowMoreIconProps) => JSX.Element,
-  (props: ChatIconProps) => JSX.Element,
-  (props: ParticipantsIconProps) => JSX.Element,
-  (props) => JSX.Element,
-  (props: SwitchCameraIconProps) => JSX.Element,
-  (props: LayoutIconProps) => JSX.Element,
-  (props: SettingsIconProps) => JSX.Element,
-  (props) => JSX.Element,
-];
-
-export const ActionSheetComponentsArray: ActionSheetComponentsProps = [
-  AudioIcon,
-  CamIcon,
-  EndCallIcon,
-  ShowMoreIcon,
-  ChatIcon,
-  ParticipantsIcon,
-  RecordingIcon,
-  SwitchCameraIcon,
-  LayoutIcon,
-  SettingsIcon,
-  ShareIcon,
-];
-
-const ActionSheetContent = (props) => {
-  const {handleSheetChanges, isExpanded, native = false} = props;
-  const {onlineUsersCount, localUid} = useContext(ChatContext);
+const ToastIcon = ({color}) => (
+  <View style={{marginRight: 12, alignSelf: 'center', width: 24, height: 24}}>
+    <ImageIcon iconType="plain" tintColor={color} name={'lang-select'} />
+  </View>
+);
+
+const ActionSheetContent = props => {
+  const heading = useString<'Set' | 'Changed'>(sttSpokenLanguageToastHeading);
+  const subheading = useString<{
+    action: 'Set' | 'Changed';
+    newLanguage: string;
+    oldLanguage: string;
+    username: string;
+  }>(sttSpokenLanguageToastSubHeading);
+
+  const {
+    handleSheetChanges,
+    isExpanded,
+    customItems = [],
+    includeDefaultItems = true,
+    displayCustomBottomSheetContent = false,
+    customBottomSheetContent,
+    native = false,
+  } = props;
+
+  const {localUid} = useContext(ChatContext);
   const {isScreenshareActive} = useScreenshare();
-  const layouts = useLayoutsData();
-  const {currentLayout} = useLayout();
-  const changeLayout = useChangeDefaultLayout();
   const {rtcProps} = useContext(PropsContext);
-  const {sidePanel, setSidePanel} = useSidePanel();
+  const {setSidePanel} = useSidePanel();
+  const {setRoomInfo} = useSetRoomInfo();
   const {
     data: {isHost},
-  } = useMeetingInfo();
+    sttLanguage,
+    isSTTActive,
+  } = useRoomInfo();
   const {isPendingRequestToReview, raiseHandList} =
     useContext(LiveStreamContext);
   const {totalUnreadCount} = useChatNotification();
-  const layout = layouts.findIndex((item) => item.name === currentLayout);
-  const isLiveStream = $config.EVENT_MODE;
-  const isAudience = rtcProps?.role == ClientRole.Audience;
-  const isBroadCasting = rtcProps?.role == ClientRole.Broadcaster;
+  const {setIsSTTActive, setLanguage, setMeetingTranscript} = useCaption();
+  const {defaultContent} = useContent();
+  const {waitingRoomUids} = useWaitingRoomContext();
+  const defaultContentRef = React.useRef(defaultContent);
+
+  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,
+        },
+      ];
+    });
+  }, [sttLanguage]);
+
+  const isLiveStream = $config.EVENT_MODE && !$config.AUDIO_ROOM;
+  const isAudience = rtcProps?.role === ClientRoleType.ClientRoleAudience;
+  const isBroadCasting =
+    rtcProps?.role === ClientRoleType.ClientRoleBroadcaster;
   const isHandRaised = raiseHandList[localUid]?.raised === RaiseHandValue.TRUE;
 
-  const handleLayoutChange = () => {
-    changeLayout();
-  };
-
   const isAudioRoom = $config.AUDIO_ROOM;
   const isVoiceChatHost = !$config.EVENT_MODE && $config.AUDIO_ROOM && isHost;
   const isVoiceChatAudience =
@@ -338,114 +370,256 @@ const ActionSheetContent = (props) => {
 
   const isAudioVideoControlsDisabled =
     isAudience && $config.EVENT_MODE && !$config.RAISE_HAND;
-  const isVideoDisabled = native
-    ? useLocalUserInfo().video === ToggleState.disabled || isScreenshareActive
-    : useLocalUserInfo().video === ToggleState.disabled;
-  return (
-    <View>
-      {/* Row Always Visible */}
-      <View
-        style={[
-          styles.row,
-          {borderBottomWidth: 1, paddingTop: 4, justifyContent: 'center'},
-        ]}>
-        {isAudioVideoControlsDisabled ? null : (
-          <AudioIcon
-            isMobileView={true}
-            isOnActionSheet={true}
-            showLabel={false}
-            disabled={isLiveStream && isAudience && !isBroadCasting}
-          />
-        )}
 
-        {/*For AudioCast Host:Chat ,Attendee:Raise Hand 
-          For VoiceChat Host:Chat, Attendee:Chat
-         */}
+  const isConferencing = !$config.EVENT_MODE && !$config.AUDIO_ROOM;
 
-        {(isAudioCastHost || isVoiceChatHost || isVoiceChatAudience) && (
-          <ChatIcon showLabel={false} />
-        )}
-        {(isAudioCastAudience && isLiveStream && isAudience) ||
+  const localUser = useLocalUserInfo();
+
+  const isVideoDisabled = native
+    ? localUser.video === ToggleState.disabled || isScreenshareActive
+    : localUser.video === ToggleState.disabled;
+
+  const isPendingWaitingRoomApproval = isHost && waitingRoomUids.length > 0;
+
+  const defaultItems = [
+    {
+      default: true,
+      order: 0,
+      hide: 'no',
+      align: 'start',
+      component: isAudioVideoControlsDisabled ? null : <AudioIcon />,
+    },
+    {
+      default: true,
+      order: 0,
+      hide: 'no',
+      align: 'start',
+      /*For AudioCast Host:Chat ,Attendee:Raise Hand 
+            For VoiceChat Host:Chat, Attendee:Chat
+           */
+      component: (isAudioCastHost ||
+        isVoiceChatHost ||
+        isVoiceChatAudience) && <ChatIcon />,
+    },
+
+    {
+      default: true,
+      order: 0,
+      hide: 'no',
+      align: 'start',
+      component:
+        (isAudioCastAudience && isLiveStream && isAudience) ||
         (isBroadCasting && !isHost) ? (
           $config.RAISE_HAND && isAudioRoom ? (
-            <LiveStreamIcon isHandRaised={isHandRaised} showLabel={false} />
+            <LiveStreamIcon />
           ) : null
-        ) : null}
-
-        {!isAudioRoom &&
-          (isAudioVideoControlsDisabled ? null : (
-            <CamIcon
-              isOnActionSheet={true}
-              isMobileView={true}
-              showLabel={false}
-              disabled={isLiveStream && isAudience && !isBroadCasting}
-            />
-          ))}
-
-        <EndCallIcon showLabel={false} isOnActionSheet={true} />
-
-        <ShowMoreIcon
-          isExpanded={isExpanded}
-          showNotification={
-            (!isExpanded && totalUnreadCount !== 0) ||
-            ($config.EVENT_MODE && isPendingRequestToReview)
-          }
-          onPress={() => handleSheetChanges(isExpanded ? 0 : 1)}
-        />
-      </View>
-
-      {/* Rest Of Controls */}
-      <View style={styles.row}>
-        {/**
-         * In event mode when raise hand feature is active
-         * and audience is promoted to host, the audience can also
-         * demote himself
-         */}
-        {(isLiveStream && isAudience) || (isBroadCasting && !isHost) ? (
+        ) : null,
+    },
+    {
+      default: true,
+      order: 1,
+      hide: 'no',
+      align: 'start',
+      component:
+        !isAudioRoom && (isAudioVideoControlsDisabled ? null : <CamIcon />),
+    },
+    {
+      default: true,
+      order: 2,
+      hide: 'no',
+      align: 'start',
+      component: <EndCallIcon />,
+    },
+    //reset of the controls
+    {
+      default: true,
+      order: 4,
+      hide: 'no',
+      align: 'start',
+      component:
+        (isLiveStream && isAudience) || (isBroadCasting && !isHost) ? (
           $config.RAISE_HAND && !isAudioRoom ? (
-            <LiveStreamIcon isHandRaised={isHandRaised} />
+            <LiveStreamIcon />
           ) : null
-        ) : null}
-
-        {/* Layout view */}
-        <LayoutIcon />
-
-        {/* chat */}
-        {!(isAudioCastHost || isVoiceChatHost || isVoiceChatAudience) && (
-          <ChatIcon />
-        )}
-        {/* participants */}
-        <ParticipantsIcon
-          showNotification={$config.EVENT_MODE && isPendingRequestToReview}
+        ) : null,
+    },
+
+    {
+      default: true,
+      order: 5,
+      hide: 'no',
+      align: 'start',
+      component: !(
+        isAudioCastHost ||
+        isVoiceChatHost ||
+        isVoiceChatAudience
+      ) && <ChatIcon />,
+    },
+    {
+      default: true,
+      order: 6,
+      hide: 'no',
+      align: 'start',
+      component: <ParticipantsIcon />,
+    },
+    {
+      default: true,
+      order: 7,
+      hide: 'no',
+      align: 'start',
+      component: isHost && $config.CLOUD_RECORDING ? <RecordingIcon /> : null,
+    },
+    {
+      default: true,
+      order: 7,
+      hide: 'no',
+      align: 'start',
+      component:
+        $config.ENABLE_VIRTUAL_BACKGROUND && !$config.AUDIO_ROOM ? (
+          <VBIcon />
+        ) : null,
+    },
+    {
+      default: true,
+      order: 8,
+      hide: 'no',
+      align: 'start',
+      component:
+        !isAudioRoom &&
+        (isAudioVideoControlsDisabled ? null : <SwitchCameraIcon />),
+    },
+    {
+      default: true,
+      order: 9,
+      hide: 'no',
+      align: 'start',
+      component: <LayoutIcon />,
+    },
+    {
+      default: true,
+      order: 10,
+      hide: 'no',
+      align: 'start',
+      component: <SettingsIcon />,
+    },
+    {
+      default: true,
+      order: 11,
+      hide: 'no',
+      align: 'start',
+      component: <ShareIcon />,
+    },
+    {
+      default: true,
+      order: 12,
+      hide: 'no',
+      align: 'start',
+      component: (
+        <CaptionIconBtn
+          onPress={() => handleSheetChanges(isExpanded ? 0 : 1)}
         />
-        {/* record */}
-        {isHost && $config.CLOUD_RECORDING ? <RecordingIcon /> : null}
-
-        {/* switch camera */}
-        {!isAudioRoom &&
-          (isAudioVideoControlsDisabled ? null : (
-            <SwitchCameraIcon
-              disabled={
-                (isLiveStream && isAudience && !isBroadCasting) ||
-                isVideoDisabled
+      ),
+    },
+    {
+      default: true,
+      order: 13,
+      hide: 'no',
+      align: 'start',
+      component: <TranscriptIconBtn />,
+    },
+  ];
+
+  const isHidden = i => {
+    return i?.hide === 'yes';
+  };
+  const combinedItems = customItems
+    ?.filter(i => !isHidden(i))
+    ?.concat(includeDefaultItems ? defaultItems : [])
+    //to filter empty component because of some condition array will have empty component
+    ?.filter(i => i?.component)
+    ?.sort(CustomToolbarSort);
+
+  if (displayCustomBottomSheetContent) {
+    return <View>{customBottomSheetContent}</View>;
+  }
+  return (
+    <View>
+      {/* Row Always Visible */}
+      <ActionSheetProvider isOnFirstRow={true}>
+        <View
+          style={[
+            styles.row,
+            {borderBottomWidth: 1, paddingTop: 4, justifyContent: 'center'},
+          ]}>
+          {/**If no items more than 4 then render firstrender first 3 items and render show more icon  */}
+          {/**If no items more less or equal to 4 then render n items and don't show more icon  */}
+          {combinedItems
+            ?.slice(0, combinedItems?.length > 4 ? 3 : 4)
+            ?.map(i => {
+              const Component = i?.component;
+              if (Component) {
+                return i?.default ? Component : <Component />;
+              } else {
+                return null;
+              }
+            })}
+          {combinedItems && combinedItems?.length > 4 ? (
+            <ShowMoreIcon
+              isExpanded={isExpanded}
+              showNotification={
+                (!isExpanded && totalUnreadCount !== 0) ||
+                ($config.EVENT_MODE && isPendingRequestToReview) ||
+                isPendingWaitingRoomApproval
               }
+              onPress={() => handleSheetChanges(isExpanded ? 0 : 1)}
             />
-          ))}
+          ) : (
+            <></>
+          )}
+        </View>
+      </ActionSheetProvider>
 
-        {/* settings */}
-        <SettingsIcon
-          onPress={() => {
-            setSidePanel(SidePanelType.Settings);
-          }}
-        />
+      <CarouselWrapper data={combinedItems?.slice(3, combinedItems?.length)} />
+    </View>
+  );
+};
+const CarouselWrapper = ({data}) => {
+  const createSlides = () => {
+    const slides = [];
+    const items = data || [];
+    // one slide can contain max of 8 icons
+    for (let i = 0; i < items.length; i += 8) {
+      const slideItems = items.slice(i, i + 8).map(item => {
+        const Component = item?.component;
+        return Component ? (
+          item.default ? (
+            Component
+          ) : (
+            <Component key={item.id} />
+          )
+        ) : null;
+      });
+
+      slides.push({
+        id: `slide_${Math.floor(i / 8) + 1}`,
+        component: <View style={styles.row}>{slideItems}</View>,
+      });
+    }
+
+    return slides;
+  };
 
-        {native && $config.SCREEN_SHARING ? <ScreenshareIcon /> : <></>}
+  const slides = createSlides();
 
-        {/* invite */}
-        <ShareIcon />
+  const isPaginationRequired = slides.length > 1;
+
+  if (isPaginationRequired)
+    return (
+      <View style={{flexDirection: 'row'}}>
+        <Carousel data={slides} />
       </View>
-    </View>
-  );
+    );
+  return <View style={styles.row}>{slides[0].component}</View>;
 };
 
 export default ActionSheetContent;