agora-appbuilder-core 4.0.0-api.7 → 4.0.0-api.9

package/template/src/subComponents/LocalVideoMute.tsx

@@ -14,7 +14,7 @@ import {
   ToggleState,
   PermissionState,
   ImageIcon as UIKitImageIcon,
-  ClientRole,
+  ClientRoleType,
   PropsContext,
   RtcContext,
   DispatchContext,
@@ -42,9 +42,6 @@ import {
   toolbarItemCameraText,
   toolbarItemCameraTooltipText,
 } from '../language/default-labels/videoCallScreenLabels';
-import events from '../rtm-events-api';
-import {controlMessageEnum} from '../components/ChatContext';
-import {MUTE_REMOTE_TYPE} from '../utils/useRemoteMute';
 
 /**
  * A component to mute / unmute the local video
@@ -62,9 +59,6 @@ export interface LocalVideoMuteProps {
 }
 
 function LocalVideoMute(props: LocalVideoMuteProps) {
-  const {dispatch} = useContext(DispatchContext);
-  const {RtcEngineUnsafe} = useContext(RtcContext);
-
   const {rtcProps} = useContext(PropsContext);
   const {isScreenshareActive} = useScreenshare();
   const {setShowStopScreenSharePopup} = useVideoCall();
@@ -73,47 +67,10 @@ function LocalVideoMute(props: LocalVideoMuteProps) {
     data: {isHost},
   } = useRoomInfo();
 
-  const isHostRef = useRef(isHost);
-  useEffect(() => {
-    isHostRef.current = isHost;
-  }, [isHost]);
-
   const local = useLocalUserInfo();
   const isHandRaised = useIsHandRaised();
   const localMute = useMuteToggleLocal();
   const {showToolTip = false, disabled = false, showWarningIcon = true} = props;
-
-  useEffect(() => {
-    events.on(controlMessageEnum.disableButton, async ({payload}) => {
-      try {
-        const data = JSON.parse(payload);
-        if (
-          data &&
-          data?.button === MUTE_REMOTE_TYPE.video &&
-          !isHostRef.current
-        ) {
-          if (data?.action === true) {
-            isWebInternal()
-              ? await RtcEngineUnsafe.muteLocalVideoStream(true)
-              : //@ts-ignore
-                await RtcEngineUnsafe.enableLocalVideo(false);
-            dispatch({
-              type: 'LocalMuteVideo',
-              value: [0, true],
-            });
-          } else {
-            dispatch({
-              type: 'LocalMuteVideo',
-              value: [0, false],
-            });
-          }
-        }
-      } catch (error) {
-        console.log('debugging error on disableButton');
-      }
-    });
-  }, []);
-
   const {isOnActionSheet, isOnFirstRow, showLabel} = useActionSheet();
   const {position} = useToolbar();
   const {
@@ -197,8 +154,9 @@ function LocalVideoMute(props: LocalVideoMuteProps) {
     //   justifyContent: 'center',
     //   alignItems: 'center',
     // };
-    const isAudience = rtcProps?.role == ClientRole.Audience;
-    const isBroadCasting = rtcProps?.role == ClientRole.Broadcaster;
+    const isAudience = rtcProps?.role == ClientRoleType.ClientRoleAudience;
+    const isBroadCasting =
+      rtcProps?.role == ClientRoleType.ClientRoleBroadcaster;
 
     iconButtonProps.disabled =
       permissionDenied || ($config.EVENT_MODE && isAudience && !isBroadCasting)
@@ -234,7 +192,7 @@ function LocalVideoMute(props: LocalVideoMuteProps) {
   }
 
   if (
-    rtcProps.role == ClientRole.Audience &&
+    rtcProps.role == ClientRoleType.ClientRoleAudience &&
     $config.EVENT_MODE &&
     !$config.RAISE_HAND
   ) {
@@ -242,11 +200,11 @@ function LocalVideoMute(props: LocalVideoMuteProps) {
   }
 
   if (
-    (rtcProps.role == ClientRole.Audience &&
+    (rtcProps.role == ClientRoleType.ClientRoleAudience &&
       $config.EVENT_MODE &&
       $config.RAISE_HAND &&
       !isHost) ||
-    local.localVideoForceDisabled
+    local.videoBtnDisabled
   ) {
     iconButtonProps.iconProps = {
       ...iconButtonProps.iconProps,
@@ -254,7 +212,7 @@ function LocalVideoMute(props: LocalVideoMuteProps) {
       tintColor: $config.SEMANTIC_NEUTRAL,
     };
     iconButtonProps.toolTipMessage =
-      showToolTip && !local.localVideoForceDisabled
+      showToolTip && !local.videoBtnDisabled
         ? lstooltip(isHandRaised(local.uid))
         : '';
     iconButtonProps.disabled = true;

package/template/src/subComponents/SelectDevice.tsx

@@ -13,7 +13,7 @@ import React, {useContext, useEffect, useState, useMemo} from 'react';
 import {StyleSheet, View, Text} from 'react-native';
 import {
   PropsContext,
-  ClientRole,
+  ClientRoleType,
   LocalContext,
   PermissionState,
   LocalUserContext,
@@ -68,7 +68,10 @@ const useSelectDevice = (): [boolean, string] => {
   const [isPickerDisabled, setPickerDisabled] = React.useState<boolean>(false);
 
   React.useEffect(() => {
-    if ($config.EVENT_MODE && rtcProps.role === ClientRole.Audience) {
+    if (
+      $config.EVENT_MODE &&
+      rtcProps.role === ClientRoleType.ClientRoleAudience
+    ) {
       setPickerDisabled(true);
       setBtnTheme('rgba(16, 16, 16, 0.3)');
     } else {

package/template/src/subComponents/SelectDeviceSettings.backup.tsx

@@ -11,7 +11,7 @@
 */
 import React, {useContext, useEffect} from 'react';
 import {StyleSheet, View, Text} from 'react-native';
-import {PropsContext, ClientRole} from '../../agora-rn-uikit';
+import {PropsContext, ClientRoleType} from '../../agora-rn-uikit';
 import DeviceContext from '../components/DeviceContext';
 import ColorContext from '../components/ColorContext';
 import {useString} from '../utils/useString';
@@ -30,7 +30,10 @@ const useSelectDevice = (): [boolean, string] => {
   const [btnTheme, setBtnTheme] = React.useState<string>(primaryColor);
   const [isPickerDisabled, setPickerDisabled] = React.useState<boolean>(false);
   React.useEffect(() => {
-    if ($config.EVENT_MODE && rtcProps.role === ClientRole.Audience) {
+    if (
+      $config.EVENT_MODE &&
+      rtcProps.role === ClientRoleType.ClientRoleAudience
+    ) {
       setPickerDisabled(true);
       setBtnTheme('rgba(16, 16, 16, 0.3)');
     } else {
@@ -60,7 +63,7 @@ const SelectVideoDevice = (props: SelectVideoDeviceProps) => {
         return true;
       }
     })
-    ?.map((device) => {
+    ?.map(device => {
       return {
         label: device.label,
         value: device.deviceId,
@@ -102,7 +105,7 @@ const SelectAudioDevice = (props: SelectAudioDeviceProps) => {
   const [isFocussed, setIsFocussed] = React.useState(false);
 
   const data = deviceList
-    .filter((device) => {
+    .filter(device => {
       if (device.kind === 'audioinput') {
         return true;
       }
@@ -140,12 +143,12 @@ const SelectDeviceSettings = () => {
   const {deviceList} = useContext(DeviceContext);
   const {setCameraAvailable, setMicAvailable} = usePreCall();
 
-  const audioDevices = deviceList.filter((device) => {
+  const audioDevices = deviceList.filter(device => {
     if (device.kind === 'audioinput') {
       return true;
     }
   });
-  const videoDevices = deviceList.filter((device) => {
+  const videoDevices = deviceList.filter(device => {
     if (device.kind === 'videoinput') {
       return true;
     }

package/template/src/subComponents/caption/Caption.tsx

@@ -6,11 +6,14 @@ import CaptionText from './CaptionText';
 import Loading from '../Loading';
 import {isWebInternal} from '../../utils/common';
 import useStreamMessageUtils from './useStreamMessageUtils';
-import {StreamMessageCallback} from 'react-native-agora/lib/typescript/common/RtcEvents';
 import hexadecimalTransparency from '../../utils/hexadecimalTransparency';
 import {useString} from '../../utils/useString';
 import {sttSettingSpokenLanguageText} from '../../language/default-labels/videoCallScreenLabels';
 
+type WebStreamMessageArgs = [number, Uint8Array];
+type NativeStreamMessageArgs = [{}, number, number, Uint8Array, number, number];
+type StreamMessageArgs = WebStreamMessageArgs | NativeStreamMessageArgs;
+
 const Caption: React.FC = () => {
   const {RtcEngineUnsafe} = useRtc();
   const {
@@ -28,25 +31,24 @@ const Caption: React.FC = () => {
   const [activelinesAvailable, setActiveLinesAvailable] = React.useState(0);
   const [inActiveLinesAvailable, setInActiveLinesAvaialble] = React.useState(0);
 
-  const handleStreamMessageCallback = (
-    ...args: [number, Uint8Array] | [number, string, Uint8Array]
-  ) => {
+  const handleStreamMessageCallback = (...args: StreamMessageArgs) => {
     setIsSTTListenerAdded(true);
     if (isWebInternal()) {
-      streamMessageCallback(args as [number, Uint8Array]);
+      const [uid, data] = args as WebStreamMessageArgs;
+      streamMessageCallback([uid, data]);
     } else {
-      const [uid, , data] = args;
-      const streamBuffer = Object.values(data);
-      streamMessageCallback([uid, new Uint8Array(streamBuffer)]);
+      const [, uid, , data] = args as NativeStreamMessageArgs;
+      streamMessageCallback([uid, data]);
     }
   };
 
   React.useEffect(() => {
     !isSTTListenerAdded &&
       RtcEngineUnsafe.addListener(
-        'StreamMessage',
-        handleStreamMessageCallback as unknown as StreamMessageCallback,
+        'onStreamMessage',
+        handleStreamMessageCallback,
       );
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   if (isLangChangeInProgress)

package/template/src/subComponents/caption/Transcript.tsx

@@ -31,7 +31,6 @@ import ImageIcon from '../../atoms/ImageIcon';
 import hexadecimalTransparency from '../../../src/utils/hexadecimalTransparency';
 import Spacer from '../../atoms/Spacer';
 import useStreamMessageUtils from './useStreamMessageUtils';
-import {StreamMessageCallback} from 'react-native-agora/lib/typescript/common/RtcEvents';
 import useCaptionWidth from './useCaptionWidth';
 import DownloadTranscriptBtn from './DownloadTranscriptBtn';
 import {useString} from '../../../src/utils/useString';
@@ -45,6 +44,11 @@ import {
 interface TranscriptProps {
   showHeader?: boolean;
 }
+
+type WebStreamMessageArgs = [number, Uint8Array];
+type NativeStreamMessageArgs = [{}, number, number, Uint8Array, number, number];
+type StreamMessageArgs = WebStreamMessageArgs | NativeStreamMessageArgs;
+
 const Transcript = (props: TranscriptProps) => {
   const settingSpokenLanguageLabel = useString(sttSettingSpokenLanguageText)();
   const searchText = useString(sttTranscriptPanelSearchText)();
@@ -175,26 +179,25 @@ const Transcript = (props: TranscriptProps) => {
     return <Text style={styles.emptyMsg}>{noresults}</Text>;
   };
 
-  const handleStreamMessageCallback = (
-    ...args: [number, Uint8Array] | [number, string, Uint8Array]
-  ) => {
+  const handleStreamMessageCallback = (...args: StreamMessageArgs) => {
     setIsSTTListenerAdded(true);
     if (isWebInternal()) {
-      streamMessageCallback(args as [number, Uint8Array]);
+      const [uid, data] = args as WebStreamMessageArgs;
+      streamMessageCallback([uid, data]);
     } else {
-      const [uid, , data] = args;
-      const streamBuffer = Object.values(data);
-      streamMessageCallback([uid, new Uint8Array(streamBuffer)]);
+      const [, uid, , data] = args as NativeStreamMessageArgs;
+      streamMessageCallback([uid, data]);
     }
   };
 
   React.useEffect(() => {
     if (!isSTTListenerAdded) {
       RtcEngineUnsafe.addListener(
-        'StreamMessage',
-        handleStreamMessageCallback as unknown as StreamMessageCallback,
+        'onStreamMessage',
+        handleStreamMessageCallback,
       );
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   return (

package/template/src/subComponents/caption/useTranscriptDownload.native.ts

@@ -33,22 +33,17 @@ const useTranscriptDownload = (): {
           .writeFile(filePath, finalContent, 'utf8')
           .then(() => {
             console.warn('Content downloaded successfully on native.');
-            // display preview of the document and option to share
-            if (isIOS()) {
-              RNFetchBlob.ios.previewDocument(filePath);
-            } else if (isAndroid()) {
-              console.warn('android download complete !');
-              // need to show the preview of downloaded file
-              Share.open({url: `file://${filePath}`, type: 'text/plain'})
-                .then(res => {
-                  console.warn('File shared successfully:', res);
-                  resolve(filePath);
-                })
-                .catch(error => {
-                  console.error('Error sharing file:', error);
-                  reject(error);
-                });
-            }
+            // need to show the preview of downloaded file
+            Share.open({url: `file://${filePath}`, type: 'text/plain'})
+              .then(res => {
+                //  console.warn('File shared successfully:', res);
+                resolve(filePath);
+              })
+              .catch(error => {
+                // console.error('Error sharing file:', error);
+                reject(error);
+              });
+
             resolve(filePath);
           })
           .catch(error => {

package/template/src/subComponents/caption/utils.ts

@@ -101,6 +101,7 @@ export const formatTranscriptContent = (
     .filter(
       arr =>
         arr[1].type === 'rtc' &&
+        arr[0] !== '100000' && // exclude recording bot
         (arr[1]?.isInWaitingRoom === true ? false : true),
     )
     .map(arr => arr[1].name)

package/template/src/subComponents/livestream/ApprovedLiveStreamControlsView.tsx

@@ -2,7 +2,7 @@ import React, {useContext} from 'react';
 import {View} from 'react-native';
 import RemoteLiveStreamApprovedRequestRecall from './controls/RemoteLiveStreamApprovedRequestRecall';
 import LiveStreamContext, {RaiseHandValue} from '../../components/livestream';
-import {ClientRole} from '../../../agora-rn-uikit';
+import {ClientRoleType} from '../../../agora-rn-uikit';
 
 const ApprovedLiveStreamControlsView = (props: {
   uid: number;
@@ -13,7 +13,7 @@ const ApprovedLiveStreamControlsView = (props: {
 
   if (
     raiseHandList[uid]?.raised === RaiseHandValue.TRUE &&
-    raiseHandList[uid]?.role == ClientRole.Broadcaster
+    raiseHandList[uid]?.role == ClientRoleType.ClientRoleBroadcaster
   ) {
     return (
       <View style={[p_styles.actionBtnIcon, {marginRight: 10}]}>

package/template/src/subComponents/livestream/CurrentLiveStreamRequestsView.tsx

@@ -6,7 +6,7 @@ import LiveStreamContext, {RaiseHandValue} from '../../components/livestream';
 import {filterObject} from '../../utils/index';
 import ParticipantSectionTitle from '../../components/participants/ParticipantSectionTitle';
 import {useString} from '../../utils/useString';
-import {ClientRole} from '../../../agora-rn-uikit';
+import {ClientRoleType} from '../../../agora-rn-uikit';
 import {useContent} from 'customization-api';
 import UserAvatar from '../../atoms/UserAvatar';
 import Spacer from '../../atoms/Spacer';
@@ -31,7 +31,8 @@ const CurrentLiveStreamRequestsView = (props: any) => {
       filterObject(
         raiseHandList,
         ([k, v]) =>
-          v?.raised === RaiseHandValue.TRUE && v?.role == ClientRole.Audience,
+          v?.raised === RaiseHandValue.TRUE &&
+          v?.role == ClientRoleType.ClientRoleAudience,
       ),
     );
   }, [raiseHandList]);

package/template/src/subComponents/livestream/controls/LocalRaiseHand.tsx

@@ -18,7 +18,7 @@ import Styles from '../../../components/styles';
 import ChatContext from '../../../components/ChatContext';
 import IconButton from '../../../atoms/IconButton';
 import ThemeConfig from '../../../theme';
-import {ClientRole, PropsContext} from '../../../../agora-rn-uikit';
+import {PropsContext} from '../../../../agora-rn-uikit';
 import {useContent} from 'customization-api';
 import {isMobileUA} from '../../../utils/common';
 import {IconButtonProps} from '../../../atoms/IconButton';

package/template/src/subComponents/recording/useIsRecordingBot.tsx

@@ -0,0 +1,38 @@
+import {useSearchParams} from '../../utils/useSearchParams';
+
+interface RecordingBotUIConfig {
+  chat: boolean;
+  topBar: boolean;
+  bottomBar: boolean;
+  stt: boolean;
+}
+
+const regexPattern = new RegExp('true');
+
+export function useIsRecordingBot() {
+  // Reading and setting URL params
+  const isRecordingBot = useSearchParams().get('bot');
+  const recordingBotToken = useSearchParams().get('token');
+  const recordingBotName = useSearchParams().get('user_name');
+  const isRecordingBotRoute = isRecordingBot && recordingBotToken;
+
+  const chatParam = useSearchParams().get('chat');
+  const topBarParam = useSearchParams().get('topBar');
+  const bottomBarParam = useSearchParams().get('bottomBar');
+  const sttParam = useSearchParams().get('stt');
+
+  const recordingBotUIConfig: RecordingBotUIConfig = {
+    chat: chatParam ? regexPattern.test(chatParam) : true,
+    topBar: topBarParam ? regexPattern.test(topBarParam) : false,
+    bottomBar: bottomBarParam ? regexPattern.test(bottomBarParam) : false,
+    stt: sttParam ? regexPattern.test(sttParam) : false,
+  };
+
+  return {
+    isRecordingBotRoute,
+    isRecordingBot,
+    recordingBotToken,
+    recordingBotName,
+    recordingBotUIConfig,
+  };
+}