agora-appbuilder-core 4.0.0 → 4.0.1

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:

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

@@ -1,112 +1,254 @@
-import {StyleSheet, Text, View, AppState} from 'react-native';
-import React, {useRef, useContext, useState, useEffect} from 'react';
+import {StyleSheet, Text, View} from 'react-native';
+import React, {useRef, useContext, useEffect} from 'react';
 import VideoComponent from './VideoComponent';
 import ActionSheet from './ActionSheet';
 import ThemeConfig from '../../theme';
 import Spacer from '../../atoms/Spacer';
-import {useMeetingInfo} from '../../components/meeting-info/useMeetingInfo';
+import {useRoomInfo} from '../../components/room-info/useRoomInfo';
 
 import {useRecording} from '../../subComponents/recording/useRecording';
-import hexadecimalTransparency from '../../utils/hexadecimalTransparency';
 import ParticipantsCount from '../../atoms/ParticipantsCount';
 import RecordingInfo from '../../atoms/RecordingInfo';
-import {isAndroid, isWebInternal, trimText} from '../../utils/common';
-import {RtcContext, ToggleState, useLocalUid} from '../../../agora-rn-uikit';
-import {useLocalUserInfo, useRender} from 'customization-api';
-
-const VideoCallMobileView = () => {
-  const {
-    data: {meetingTitle},
-  } = useMeetingInfo();
-  const {isRecordingActive} = useRecording();
-  const recordingLabel = 'Recording';
-
-  const appState = useRef(AppState.currentState);
-  const [appStateVisible, setAppStateVisible] = useState(appState.current);
-  const {RtcEngine, dispatch} = useContext(RtcContext);
+import {
+  isAndroid,
+  isIOS,
+  isMobileUA,
+  isValidReactComponent,
+  isWebInternal,
+  trimText,
+} from '../../utils/common';
+import {DispatchContext, RtcContext} from '../../../agora-rn-uikit';
+import {
+  useLocalUserInfo,
+  useContent,
+  ToolbarCustomItem,
+} from 'customization-api';
+import CaptionContainer from '../../subComponents/caption/CaptionContainer';
+import {useScreenContext} from '../../components/contexts/ScreenShareContext';
+import VideoRenderer from './VideoRenderer';
+import {filterObject} from '../../utils';
+import {useScreenshare} from '../../subComponents/screenshare/useScreenshare';
+import useAppState from '../../utils/useAppState';
+import {ToolbarPosition, ToolbarProvider} from '../../utils/useToolbar';
+import {ActionSheetProvider} from '../../utils/useActionSheet';
+import {useCustomization} from 'customization-implementation';
+import NavbarMobile from '../../components/NavbarMobile';
+import {useVB} from '../../components/virtual-background/useVB';
+import VBPanel from '../../components/virtual-background/VBPanel';
+import {WhiteboardListener} from '../../components/Controls';
+import {useWhiteboard} from '../../components/whiteboard/WhiteboardConfigure';
+import WhiteboardView from '../../components/whiteboard/WhiteboardView';
+
+const VideoCallMobileView = props => {
+  const {native = true} = props;
+  const {customContent} = useContent();
+  const {isScreenShareOnFullView, screenShareData} = useScreenContext();
+  const {getWhiteboardUid, isWhiteboardOnFullScreen} = useWhiteboard();
+
+  const {RtcEngineUnsafe} = useContext(RtcContext);
+  const {dispatch} = useContext(DispatchContext);
   const local = useLocalUserInfo();
+  const {defaultContent} = useContent();
+
+  const maxScreenShareData = filterObject(
+    screenShareData,
+    ([k, v]) => v?.isExpanded === true,
+  );
+  const maxScreenShareUid = Object.keys(maxScreenShareData)?.length
+    ? Object.keys(maxScreenShareData)[0]
+    : null;
 
+  const {isScreenshareActive} = useScreenshare();
+  const appStateVisible = useAppState();
   const isCamON = useRef(local.video);
+  const isScreenShareOn = useRef(isScreenshareActive);
+  const {isVBActive, setIsVBActive} = useVB();
+  const isVBAvaialble =
+    $config.ENABLE_VIRTUAL_BACKGROUND && !$config.AUDIO_ROOM && isVBActive;
 
-  // moved below logic to useMuteToggleLocal
-  // useEffect(() => {
-  //   if ($config.AUDIO_ROOM) return;
-  //   const subscription = AppState.addEventListener(
-  //     'change',
-  //     async (nextAppState) => {
-  //       if (nextAppState === 'background') {
-  //         // check if cam was on before app goes to background
-  //         isCamON.current = isAndroid()
-  //           ? local.video === ToggleState.enabled
-  //           : RtcEngine?.isVideoEnabled;
-
-  //         if (isCamON.current || 1) {
-  //           isWebInternal()
-  //             ? await RtcEngine.muteLocalVideoStream(true)
-  //             : await RtcEngine.enableLocalVideo(false);
-
-  //           // dispatch({
-  //           //   type: 'LocalMuteVideo',
-  //           //   value: [0],
-  //           // });
-  //         }
-  //       }
-  //       if (nextAppState === 'active') {
-  //         // enable cam only if cam was on before app goes to background
-  //         console.log('active state 111111 ==>', isCamON.current);
-  //         if (local.video) {
-  //           isWebInternal()
-  //             ? await RtcEngine.muteLocalVideoStream(false)
-  //             : await RtcEngine.enableLocalVideo(true);
-  //           dispatch({
-  //             type: 'LocalMuteVideo',
-  //             value: [1],
-  //           });
-  //         }
-  //       }
-  //       appState.current = nextAppState;
-  //     },
-  //   );
-
-  //   return () => {
-  //     subscription?.remove();
-  //   };
-  // }, []);
+  useEffect(() => {
+    // console.log(`Video State  ${local.video} in Mode  ${appStateVisible}`);
+    //native screenshare use local uid to publish the screenshare stream
+    //so when user minimize the app we shouldnot pause the local video
+    if ($config.AUDIO_ROOM || !isMobileUA()) {
+      return;
+    } else {
+      if (
+        appStateVisible === 'background' &&
+        isScreenshareActive &&
+        (isAndroid() || isIOS())
+      ) {
+        isScreenShareOn.current = true;
+      }
+      if (
+        appStateVisible === 'active' &&
+        !isScreenshareActive &&
+        (isAndroid() || isIOS())
+      ) {
+        isScreenShareOn.current = false;
+      }
+      if (!((isAndroid() || isIOS()) && isScreenshareActive)) {
+        if (appStateVisible === 'background') {
+          isCamON.current =
+            isAndroid() || isIOS()
+              ? local.video && !isScreenShareOn.current
+              : local.video;
+          if (isCamON.current) {
+            isWebInternal()
+              ? RtcEngineUnsafe.muteLocalVideoStream(true)
+              : //@ts-ignore
+                RtcEngineUnsafe.enableLocalVideo(false);
+            dispatch({
+              type: 'LocalMuteVideo',
+              value: [0],
+            });
+          }
+        }
+        if (appStateVisible === 'active' && isCamON.current) {
+          isWebInternal()
+            ? RtcEngineUnsafe.muteLocalVideoStream(false)
+            : //@ts-ignore
+              RtcEngineUnsafe.enableLocalVideo(true);
+          dispatch({
+            type: 'LocalMuteVideo',
+            value: [1],
+          });
+        }
+      }
+    }
+  }, [appStateVisible, isScreenshareActive]);
+
+  if (isVBAvaialble) {
+    return <VBPanel />;
+  }
+
+  if (isWhiteboardOnFullScreen) {
+    return (
+      <>
+        {$config.ENABLE_WHITEBOARD ? <WhiteboardListener /> : <></>}
+        <VideoRenderer
+          user={{
+            uid: customContent[getWhiteboardUid()]?.uid,
+            type: 'whiteboard',
+            video: 0,
+            audio: 0,
+            parentUid: undefined,
+            name: 'Whiteboard',
+            muted: undefined,
+          }}
+          CustomChild={WhiteboardView}
+        />
+      </>
+    );
+  }
+
+  return isScreenShareOnFullView &&
+    maxScreenShareUid &&
+    defaultContent[maxScreenShareUid] &&
+    defaultContent[maxScreenShareUid]?.video ? (
+    <>
+      {$config.ENABLE_WHITEBOARD ? <WhiteboardListener /> : <></>}
+      <VideoRenderer user={defaultContent[maxScreenShareUid]} />
+    </>
+  ) : (
+    <>
+      {$config.ENABLE_WHITEBOARD ? <WhiteboardListener /> : <></>}
+      <VideoCallView />
+    </>
+  );
+};
+
+const VideoCallView = React.memo(() => {
+  //toolbar changes
+  const {BottombarComponent, BottombarProps, TopbarComponent, TopbarProps} =
+    useCustomization(data => {
+      let components: {
+        BottombarComponent: React.ComponentType;
+        BottombarProps?: ToolbarCustomItem[];
+        TopbarComponent: React.ComponentType;
+        TopbarProps?: ToolbarCustomItem[];
+      } = {
+        BottombarComponent: ActionSheet,
+        BottombarProps: [],
+        //@ts-ignore
+        TopbarComponent: NavbarMobile,
+        TopbarProps: [],
+      };
+      if (
+        data?.components?.videoCall &&
+        typeof data?.components?.videoCall === 'object'
+      ) {
+        if (
+          data?.components?.videoCall.bottomToolBar &&
+          typeof data?.components?.videoCall.bottomToolBar !== 'object' &&
+          isValidReactComponent(data?.components?.videoCall.bottomToolBar)
+        ) {
+          components.BottombarComponent =
+            data?.components?.videoCall.bottomToolBar;
+        }
+        if (
+          data?.components?.videoCall.bottomToolBar &&
+          typeof data?.components?.videoCall.bottomToolBar === 'object' &&
+          data?.components?.videoCall.bottomToolBar.length
+        ) {
+          components.BottombarProps = data?.components?.videoCall.bottomToolBar;
+        }
+
+        if (
+          data?.components?.videoCall.topToolBar &&
+          typeof data?.components?.videoCall.topToolBar !== 'object' &&
+          isValidReactComponent(data?.components?.videoCall.topToolBar)
+        ) {
+          components.TopbarComponent = data?.components?.videoCall.topToolBar;
+        }
+
+        if (
+          data?.components?.videoCall.topToolBar &&
+          typeof data?.components?.videoCall.topToolBar === 'object' &&
+          data?.components?.videoCall.topToolBar.length
+        ) {
+          components.TopbarProps = data?.components?.videoCall.topToolBar;
+        }
+      }
+
+      return components;
+    });
 
   return (
     <View style={styles.container}>
-      <View style={styles.titleBar}>
-        <Text style={styles.title}>{trimText(meetingTitle)}</Text>
-        <Spacer size={8} horizontal={false} />
-        <View style={styles.countView}>
-          <View
-            style={{
-              width: 45,
-              height: 35,
-              justifyContent: 'center',
-              alignItems: 'center',
-              alignSelf: 'center',
-              zIndex: isWebInternal() ? 3 : 0,
-
-              //flex: 1,
-            }}>
-            <ParticipantsCount />
-          </View>
-          {isRecordingActive ? (
-            <RecordingInfo recordingLabel={recordingLabel} />
+      <>
+        <ToolbarProvider value={{position: ToolbarPosition.top}}>
+          {TopbarProps?.length ? (
+            <TopbarComponent
+              //@ts-ignore
+              customItems={TopbarProps}
+              includeDefaultItems={false}
+            />
           ) : (
-            <></>
+            <TopbarComponent />
           )}
+        </ToolbarProvider>
+        <View style={styles.videoView}>
+          <VideoComponent />
+          <CaptionContainer />
         </View>
-      </View>
-      <Spacer size={16} />
-      <View style={styles.videoView}>
-        <VideoComponent />
-      </View>
-      <ActionSheet />
+        <ToolbarProvider value={{position: ToolbarPosition.bottom}}>
+          <ActionSheetProvider>
+            {BottombarProps?.length ? (
+              <BottombarComponent
+                //@ts-ignore
+                customItems={BottombarProps}
+                includeDefaultItems={false}
+              />
+            ) : (
+              <BottombarComponent />
+            )}
+          </ActionSheetProvider>
+        </ToolbarProvider>
+      </>
     </View>
   );
-};
+});
 
 export default VideoCallMobileView;