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

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

@@ -35,12 +35,12 @@ import events, {PersistanceLevel} from '../../rtm-events-api';
 import VideoCallMobileView from './VideoCallMobileView';
 import CaptionContainer from '../../subComponents/caption/CaptionContainer';
 import Transcript from '../../subComponents/caption/Transcript';
-
 import Spacer from '../../atoms/Spacer';
 import Leftbar, {LeftbarProps} from '../../components/Leftbar';
 import Rightbar, {RightbarProps} from '../../components/Rightbar';
 import useFindActiveSpeaker from '../../utils/useFindActiveSpeaker';
 import VBPanel from '../../components/virtual-background/VBPanel';
+import {useIsRecordingBot} from '../../subComponents/recording/useIsRecordingBot';
 
 const VideoCallScreen = () => {
   useFindActiveSpeaker();
@@ -231,6 +231,8 @@ const VideoCallScreen = () => {
   const isDesktop = useIsDesktop();
   const isSmall = useIsSmall();
 
+  const {isRecordingBot, recordingBotUIConfig} = useIsRecordingBot();
+
   return VideocallComponent ? (
     <VideocallComponent />
   ) : // ) : !isDesktop ? (
@@ -255,16 +257,23 @@ const VideoCallScreen = () => {
             )}
           </ToolbarProvider>
           <View style={style.full}>
-            <ToolbarProvider value={{position: ToolbarPosition.top}}>
-              {TopbarProps?.length ? (
-                <TopbarComponent
-                  customItems={TopbarProps}
-                  includeDefaultItems={false}
-                />
-              ) : (
-                <TopbarComponent />
-              )}
-            </ToolbarProvider>
+            <View
+              style={
+                isRecordingBot &&
+                !recordingBotUIConfig.topBar &&
+                style.zeroHeight
+              }>
+              <ToolbarProvider value={{position: ToolbarPosition.top}}>
+                {TopbarProps?.length ? (
+                  <TopbarComponent
+                    customItems={TopbarProps}
+                    includeDefaultItems={false}
+                  />
+                ) : (
+                  <TopbarComponent />
+                )}
+              </ToolbarProvider>
+            </View>
             <View
               style={[
                 style.videoView,
@@ -316,7 +325,14 @@ const VideoCallScreen = () => {
                   <>
                     <CaptionContainer />
                     <Spacer size={10} />
-                    <BottombarComponent />
+                    <View
+                      style={
+                        isRecordingBot &&
+                        !recordingBotUIConfig.bottomBar &&
+                        style.zeroHeight
+                      }>
+                      <BottombarComponent />
+                    </View>
                   </>
                 )}
               </ToolbarProvider>
@@ -362,4 +378,8 @@ const style = StyleSheet.create({
     flex: 12,
     flexDirection: 'row',
   },
+  zeroHeight: {
+    height: 0,
+    visibility: 'hidden',
+  },
 });

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

@@ -0,0 +1,41 @@
+import React, {useContext, useEffect} from 'react';
+import {PropsContext} from '../../../agora-rn-uikit';
+import VideoCallScreen from '../video-call/VideoCallScreen';
+import {isWebInternal} from '../../utils/common';
+import {useLocation} from '../../components/Router';
+import {getParamFromURL} from '../../utils/common';
+import {useUserPreference} from '../../components/useUserPreference';
+import WhiteboardConfigure from '../../components/whiteboard/WhiteboardConfigure';
+
+const VideoCallScreenWithRecordingBot: React.FC = () => {
+  const location = useLocation();
+  const {setDisplayName} = useUserPreference();
+
+  const recordingBotName = getParamFromURL(location?.search, 'user_name');
+
+  useEffect(() => {
+    setDisplayName(recordingBotName);
+  }, []);
+  return <VideoCallScreen />;
+};
+
+const VideoCallScreenWrapper: React.FC = () => {
+  const {rtcProps} = useContext(PropsContext);
+
+  if ($config.ENABLE_WHITEBOARD) {
+    return (
+      <WhiteboardConfigure>
+        {rtcProps?.recordingBot ? (
+          <VideoCallScreenWithRecordingBot />
+        ) : (
+          <VideoCallScreen />
+        )}
+      </WhiteboardConfigure>
+    );
+  } else if (rtcProps?.recordingBot) {
+    return <VideoCallScreenWithRecordingBot />;
+  }
+  return <VideoCallScreen />;
+};
+
+export default VideoCallScreenWrapper;

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

@@ -2,7 +2,7 @@ import React, {useContext, useEffect, useRef, useState} from 'react';
 import {View} from 'react-native';
 import useLayoutsData from './useLayoutsData';
 import {isArray, useIsDesktop, isValidReactComponent} from '../../utils/common';
-import {PropsContext, ClientRole} from '../../../agora-rn-uikit';
+import {PropsContext, ClientRoleType} from '../../../agora-rn-uikit';
 import {useLayout} from '../../utils/useLayout';
 import {useContent} from 'customization-api';
 import {getGridLayoutName} from './DefaultLayouts';
@@ -53,7 +53,10 @@ const VideoComponent = () => {
   }, [currentLayout]);
 
   const showInviteTile = () => {
-    if ($config.EVENT_MODE && rtcProps.role == ClientRole.Audience) {
+    if (
+      $config.EVENT_MODE &&
+      rtcProps.role == ClientRoleType.ClientRoleAudience
+    ) {
       return false;
     }
     if (activeUids.length == 1) return true;

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

@@ -68,7 +68,12 @@ const VideoRenderer: React.FC<VideoRendererProps> = ({
   const videoMoreMenuRef = useRef(null);
   const [actionMenuVisible, setActionMenuVisible] = React.useState(false);
   const {setVideoTileInViewPortState} = useVideoCall();
-  const {getWhiteboardUid = () => 0} = useWhiteboard();
+  const {
+    getWhiteboardUid = () => 0,
+    isWhiteboardOnFullScreen,
+    setWhiteboardOnFullScreen,
+    whiteboardActive,
+  } = useWhiteboard();
   const [landscapeMode, setLandscapeMode] = useState(
     isAndroid() || isIOS() ? true : false,
   );
@@ -90,22 +95,19 @@ const VideoRenderer: React.FC<VideoRendererProps> = ({
     //if screenshare is on fullscreen then get the width/height to set landscape mode
     if (isScreenShareOnFullView) {
       if (isAndroid() || isIOS()) {
-        const cb = args => {
+        const cb = (connection, stats) => {
           if (
-            args?.uid == user.uid &&
-            args?.width &&
-            args?.height &&
-            args.height > args.width
+            stats?.uid == user.uid &&
+            stats?.width &&
+            stats?.height &&
+            stats.height > stats.width
           ) {
             landscapeModeRef.current.landscapeMode && setLandscapeMode(false);
           }
         };
-        const subscription = RtcEngineUnsafe.addListener(
-          'RemoteVideoStats',
-          cb,
-        );
+        RtcEngineUnsafe.addListener('onRemoteVideoStats', cb);
         setTimeout(() => {
-          subscription.remove();
+          RtcEngineUnsafe.removeAllListeners('onRemoteVideoStats');
         }, 5000);
       } else {
         if (screenShareData && screenShareData?.[user.uid] && isMobileUA()) {
@@ -125,8 +127,13 @@ const VideoRenderer: React.FC<VideoRendererProps> = ({
   }, [screenShareData, isScreenShareOnFullView]);
 
   const isNativeScreenShareActive =
-    (isAndroid() || isIOS()) && isScreenshareActive;
-  const enableExpandButton = isNativeScreenShareActive ? false : true;
+    (isAndroid() || isIOS() || isMobileUA()) && user?.type === 'screenshare';
+
+  const isNativeWhiteboardActive =
+    (isAndroid() || isIOS() || isMobileUA()) && whiteboardActive;
+
+  const enableExpandButton =
+    isNativeScreenShareActive || isNativeWhiteboardActive ? true : false;
 
   const {enablePinForMe} = useVideoCall();
 
@@ -191,13 +198,15 @@ const VideoRenderer: React.FC<VideoRendererProps> = ({
           ) : (
             <></>
           )}
-          {enableExpandButton &&
-          screenShareData &&
-          screenShareData?.[user.uid] &&
-          isMobileUA() ? (
+          {(enableExpandButton &&
+            screenShareData &&
+            screenShareData?.[user.uid] &&
+            isMobileUA()) ||
+          (isMobileUA() && enableExpandButton && user?.type == 'whiteboard') ? (
             <IconButton
               containerStyle={
-                isScreenShareOnFullView && landscapeMode
+                (isScreenShareOnFullView || isWhiteboardOnFullScreen) &&
+                landscapeMode
                   ? {
                       position: 'absolute',
                       top: 8,
@@ -206,6 +215,14 @@ const VideoRenderer: React.FC<VideoRendererProps> = ({
                       zIndex: 999,
                       elevation: 999,
                     }
+                  : user?.type == 'whiteboard'
+                  ? {
+                      position: 'absolute',
+                      top: 8,
+                      left: 8,
+                      zIndex: 999,
+                      elevation: 999,
+                    }
                   : {
                       position: 'absolute',
                       top: 8,
@@ -220,18 +237,22 @@ const VideoRenderer: React.FC<VideoRendererProps> = ({
                     }
               }
               onPress={() => {
-                setScreenShareOnFullView(
-                  !screenShareData[user.uid]?.isExpanded,
-                );
-                setScreenShareData(prevState => {
-                  return {
-                    ...prevState,
-                    [user.uid]: {
-                      ...prevState[user.uid],
-                      isExpanded: !prevState[user.uid]?.isExpanded,
-                    },
-                  };
-                });
+                if (user?.type == 'whiteboard') {
+                  setWhiteboardOnFullScreen(!isWhiteboardOnFullScreen);
+                } else {
+                  setScreenShareOnFullView(
+                    !screenShareData[user.uid]?.isExpanded,
+                  );
+                  setScreenShareData(prevState => {
+                    return {
+                      ...prevState,
+                      [user.uid]: {
+                        ...prevState[user.uid],
+                        isExpanded: !prevState[user.uid]?.isExpanded,
+                      },
+                    };
+                  });
+                }
               }}
               iconProps={{
                 iconContainerStyle: {
@@ -241,6 +262,7 @@ const VideoRenderer: React.FC<VideoRendererProps> = ({
                   transform: [{rotate: '-45deg'}],
                 },
                 name:
+                  isWhiteboardOnFullScreen ||
                   screenShareData?.[user?.uid]?.isExpanded === true
                     ? 'collapse'
                     : 'expand',
@@ -284,7 +306,7 @@ const VideoRenderer: React.FC<VideoRendererProps> = ({
                       avatarSize,
                     );
                   }}
-                  user={isNativeScreenShareActive ? {...user, video: 0} : user}
+                  user={user}
                   containerStyle={{
                     width:
                       landscapeMode && isScreenShareOnFullView
@@ -292,8 +314,6 @@ const VideoRenderer: React.FC<VideoRendererProps> = ({
                         : '100%',
                     height:
                       landscapeMode && isScreenShareOnFullView ? width : '100%',
-                    // width: '100%',
-                    // height: '100%',
                     borderRadius: 4,
                     overflow: 'hidden',
                   }}
@@ -307,6 +327,7 @@ const VideoRenderer: React.FC<VideoRendererProps> = ({
           </ZoomableWrapper>
           {(!isScreenShareOnFullView && !CustomChild) ||
           (CustomChild &&
+            !isWhiteboardOnFullScreen &&
             (pinnedUid !== getWhiteboardUid() || currentLayout === 'grid')) ? (
             <VideoContainerProvider value={{videoTileWidth}}>
               <NameWithMicIcon
@@ -325,7 +346,7 @@ const VideoRenderer: React.FC<VideoRendererProps> = ({
           ) : (
             <></>
           )}
-          {!isScreenShareOnFullView &&
+          {!(isScreenShareOnFullView || isWhiteboardOnFullScreen) &&
           // user.uid !== rtcProps?.screenShareUid &&
           (isHovered || actionMenuVisible || isMobileUA()) ? (
             <MoreMenu

package/template/src/rtm-events/constants.ts

@@ -2,7 +2,6 @@
 //  1. RECORDING
 const RECORDING_STARTED = 'RECORDING_STARTED';
 const RECORDING_STOPPED = 'RECORDING_STOPPED';
-const RECORDING_STOP_REQUEST = 'RECORDING_STOP_REQUEST';
 // 2. SCREENSHARE
 const SCREENSHARE_STARTED = 'SCREENSHARE_STARTED';
 const SCREENSHARE_STOPPED = 'SCREENSHARE_STOPPED';
@@ -10,7 +9,6 @@ const SCREENSHARE_STOPPED = 'SCREENSHARE_STOPPED';
 const EventActions = {
   RECORDING_STARTED,
   RECORDING_STOPPED,
-  RECORDING_STOP_REQUEST,
   SCREENSHARE_STARTED,
   SCREENSHARE_STOPPED,
 };

package/template/src/subComponents/ChatBubble.tsx

@@ -170,6 +170,7 @@ const style = StyleSheet.create({
     borderBottomRightRadius: 8,
     borderTopLeftRadius: 0,
     borderTopRightRadius: 8,
+    maxWidth: '88%',
   },
   chatBubbleRemoteViewLayer2: {
     backgroundColor: 'transparent',
@@ -204,6 +205,7 @@ const style = StyleSheet.create({
     borderBottomRightRadius: 8,
     borderTopLeftRadius: 8,
     borderTopRightRadius: 0,
+    maxWidth: '88%',
   },
   messageStyle: {
     fontFamily: ThemeConfig.FontFamily.sansPro,

package/template/src/subComponents/LocalAudioMute.tsx

@@ -14,7 +14,7 @@ import {
   ToggleState,
   PermissionState,
   ImageIcon as UIKitImageIcon,
-  ClientRole,
+  ClientRoleType,
   PropsContext,
   useLocalUid,
   DispatchContext,
@@ -140,8 +140,9 @@ function LocalAudioMute(props: LocalAudioMuteProps) {
     //   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)
@@ -178,7 +179,7 @@ function LocalAudioMute(props: LocalAudioMuteProps) {
   }
 
   if (
-    rtcProps.role == ClientRole.Audience &&
+    rtcProps.role == ClientRoleType.ClientRoleAudience &&
     $config.EVENT_MODE &&
     !$config.RAISE_HAND
   ) {
@@ -186,7 +187,7 @@ function LocalAudioMute(props: LocalAudioMuteProps) {
   }
 
   if (
-    (rtcProps.role == ClientRole.Audience &&
+    (rtcProps.role == ClientRoleType.ClientRoleAudience &&
       $config.EVENT_MODE &&
       $config.RAISE_HAND &&
       !isHost) ||

package/template/src/subComponents/LocalSwitchCamera.tsx

@@ -1,7 +1,7 @@
 import React, {useContext} from 'react';
 import {Text, ViewStyle} from 'react-native';
 import {useString} from '../utils/useString';
-import {ClientRole, PropsContext, ToggleState} from '../../agora-rn-uikit';
+import {ClientRoleType, PropsContext, ToggleState} from '../../agora-rn-uikit';
 import Styles from '../components/styles';
 import {isAndroid, isIOS, useLocalUserInfo, useRtc} from 'customization-api';
 import IconButton, {IconButtonProps} from '../atoms/IconButton';
@@ -37,8 +37,8 @@ function LocalSwitchCamera(props: LocalSwitchCameraProps) {
 
   const {rtcProps} = useContext(PropsContext);
   const isLiveStream = $config.EVENT_MODE;
-  const isAudience = rtcProps?.role == ClientRole.Audience;
-  const isBroadCasting = rtcProps?.role == ClientRole.Broadcaster;
+  const isAudience = rtcProps?.role == ClientRoleType.ClientRoleAudience;
+  const isBroadCasting = rtcProps?.role == ClientRoleType.ClientRoleBroadcaster;
   const showTitle = showText ? showLabel : false;
   const onPress = () => {
     RtcEngineUnsafe.switchCamera();

package/template/src/subComponents/LocalVideoMute.tsx

@@ -14,7 +14,7 @@ import {
   ToggleState,
   PermissionState,
   ImageIcon as UIKitImageIcon,
-  ClientRole,
+  ClientRoleType,
   PropsContext,
   RtcContext,
   DispatchContext,
@@ -154,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)
@@ -191,7 +192,7 @@ function LocalVideoMute(props: LocalVideoMuteProps) {
   }
 
   if (
-    rtcProps.role == ClientRole.Audience &&
+    rtcProps.role == ClientRoleType.ClientRoleAudience &&
     $config.EVENT_MODE &&
     !$config.RAISE_HAND
   ) {
@@ -199,7 +200,7 @@ function LocalVideoMute(props: LocalVideoMuteProps) {
   }
 
   if (
-    (rtcProps.role == ClientRole.Audience &&
+    (rtcProps.role == ClientRoleType.ClientRoleAudience &&
       $config.EVENT_MODE &&
       $config.RAISE_HAND &&
       !isHost) ||

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 => {