agora-appbuilder-core 4.0.31 → 4.0.32

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agora-appbuilder-core",
-  "version": "4.0.31",
+  "version": "4.0.32",
   "description": "React Native template for RTE app builder",
   "main": "index.js",
   "files": [

package/template/Gulpfile.js

@@ -288,7 +288,7 @@ const webSdk = {
       .pipe(concat('index.d.ts'))
       .pipe(
         replace(
-          `declare module "${config.PRODUCT_ID}/index.wsdk"`,
+          'declare module "index.wsdk"',
           `declare module "${PACKAGE_NAME}"`,
         ),
       )

package/template/bridge/rtc/webNg/RtcEngine.ts

@@ -1170,14 +1170,14 @@ export default class RtcEngine {
         `RTC [createClient] creating user and screen client with profile ${profile}`,
       );
       this.client = AgoraRTC.createClient({
-        codec: 'vp9',
+        codec: 'vp8',
         mode:
           profile === ChannelProfileType.ChannelProfileLiveBroadcasting
             ? mode.live
             : mode.rtc,
       });
       this.screenClient = AgoraRTC.createClient({
-        codec: 'vp9',
+        codec: 'vp8',
         mode:
           profile === ChannelProfileType.ChannelProfileLiveBroadcasting
             ? mode.live

package/template/defaultConfig.js

@@ -76,8 +76,8 @@ const DefaultConfig = {
   CHAT_ORG_NAME: '',
   CHAT_APP_NAME: '',
   CHAT_URL: '',
-  CLI_VERSION: '3.0.31',
-  CORE_VERSION: '4.0.31',
+  CLI_VERSION: '3.0.32',
+  CORE_VERSION: '4.0.32',
   DISABLE_LANDSCAPE_MODE: false,
   STT_AUTO_START: false,
   CLOUD_RECORDING_AUTO_START: false,

package/template/src/components/Controls.tsx

@@ -55,6 +55,7 @@ import {
   useLayout,
   useRecording,
   useSidePanel,
+  useSpeechToText,
 } from 'customization-api';
 import {useVideoCall} from './useVideoCall';
 import {useScreenshare} from '../subComponents/screenshare/useScreenshare';
@@ -110,6 +111,7 @@ import {useModal} from '../utils/useModal';
 import ViewRecordingsModal from './recordings/ViewRecordingsModal';
 import {filterObject} from '../utils/index';
 import {useLanguage} from '../language/useLanguage';
+import RecordingDeletePopup from './recordings/RecordingDeletePopup';
 
 export const useToggleWhiteboard = () => {
   const {
@@ -253,6 +255,12 @@ export const WhiteboardListener = () => {
 };
 
 const MoreButton = (props: {fields: ToolbarMoreButtonDefaultFields}) => {
+  //recording delete
+  const [isRecordingDeletePopupVisible, setRecordingDeletePopupVisible] =
+    React.useState<boolean>(false);
+  const [recordingIdToDelete, setRecordingIdToDelete] = useState(0);
+  //recording delete
+
   const {label} = useToolbarProps();
   const {data} = useRoomInfo();
   const noiseCancellationLabel = useString(toolbarItemNoiseCancellationText)();
@@ -312,7 +320,8 @@ const MoreButton = (props: {fields: ToolbarMoreButtonDefaultFields}) => {
     useVideoCall();
   const {isScreenshareActive, startScreenshare, stopScreenshare} =
     useScreenshare();
-  const {isRecordingActive, startRecording, inProgress} = useRecording();
+  const {isRecordingActive, startRecording, inProgress, deleteRecording} =
+    useRecording();
   const {setChatType} = useChatUIControls();
   const actionMenuitems: ActionMenuItem[] = [];
 
@@ -849,6 +858,51 @@ const MoreButton = (props: {fields: ToolbarMoreButtonDefaultFields}) => {
     ?.filter(i => !isHidden(i))
     ?.sort(CustomToolbarSort);
 
+  const onRecordingDeleteConfirmation = () => {
+    setRecordingDeletePopupVisible(false);
+    deleteRecording(recordingIdToDelete)
+      .then(() => {
+        //To inform other user -> refresh the recording list
+        //in case recording list opened
+        events.send(
+          EventNames.RECORDING_DELETED,
+          JSON.stringify({recordingId: recordingIdToDelete}),
+          PersistanceLevel.None,
+        );
+        Toast.show({
+          leadingIconName: 'alert',
+          type: 'success',
+          text1: 'Recording has been deleted successfully.',
+          visibilityTime: 3000,
+          primaryBtn: null,
+          secondaryBtn: null,
+          leadingIcon: null,
+        });
+        setRecordingIdToDelete(0);
+        //to reopen recording list again
+        setTimeout(() => {
+          setVRModalOpen(true);
+        }, 3000);
+      })
+      .catch(() => {
+        Toast.show({
+          leadingIconName: 'alert',
+          type: 'error',
+          text1: 'Failed to delete the recording. Please try again later',
+          visibilityTime: 1000 * 10,
+          primaryBtn: null,
+          secondaryBtn: null,
+          leadingIcon: null,
+        });
+        setRecordingIdToDelete(0);
+      });
+  };
+
+  const onRecordingDeleteCancel = () => {
+    setRecordingIdToDelete(0);
+    toggleVRModal();
+  };
+
   return (
     <>
       <LanguageSelectorPopup
@@ -857,8 +911,27 @@ const MoreButton = (props: {fields: ToolbarMoreButtonDefaultFields}) => {
         onConfirm={onConfirm}
         isFirstTimePopupOpen={isFirstTimePopupOpen.current}
       />
-      {$config.CLOUD_RECORDING && isHost && isWeb() && isVRModalOpen && (
-        <ViewRecordingsModal setModalOpen={setVRModalOpen} />
+      {$config.CLOUD_RECORDING && isHost && isWeb() && (
+        <>
+          <RecordingDeletePopup
+            modalVisible={isRecordingDeletePopupVisible}
+            setModalVisible={setRecordingDeletePopupVisible}
+            onConfirm={onRecordingDeleteConfirmation}
+            onCancel={onRecordingDeleteCancel}
+          />
+          {isVRModalOpen ? (
+            <ViewRecordingsModal
+              setModalOpen={setVRModalOpen}
+              onDeleteAction={id => {
+                setRecordingIdToDelete(id);
+                toggleVRModal();
+                setRecordingDeletePopupVisible(true);
+              }}
+            />
+          ) : (
+            <></>
+          )}
+        </>
       )}
       <ActionMenu
         containerStyle={globalWidth < 720 ? {width: 180} : {width: 260}}
@@ -1141,6 +1214,7 @@ const Controls = (props: ControlsProps) => {
   }>(sttSpokenLanguageToastSubHeading);
 
   const {sttLanguage, isSTTActive} = useRoomInfo();
+  const {addStreamMessageListener} = useSpeechToText();
 
   React.useEffect(() => {
     defaultContentRef.current = defaultContent;
@@ -1212,6 +1286,8 @@ const Controls = (props: ControlsProps) => {
         },
       ];
     });
+    // start listening to stream Message callback
+    addStreamMessageListener();
   }, [sttLanguage]);
 
   React.useEffect(() => {

package/template/src/components/EventsConfigure.tsx

@@ -268,7 +268,8 @@ const EventsConfigure: React.FC<Props> = ({
   }, [permissionStatus]);
 
   const {hasUserJoinedRTM, isInitialQueueCompleted} = useContext(ChatContext);
-  const {startSpeechToText} = useSpeechToText();
+  const {startSpeechToText, addStreamMessageListener} = useSpeechToText();
+
   //auto start stt
   useEffect(() => {
     if (
@@ -285,6 +286,10 @@ const EventsConfigure: React.FC<Props> = ({
         logger.log(LogSource.Internals, 'STT', 'STT_AUTO_START triggered', {
           uidWhoTriggered: localUid,
         });
+
+        // add stream message callback listener
+        addStreamMessageListener();
+
         //start with default language
         startSpeechToText(['en-US'])
           .then(() => {

package/template/src/components/recordings/RecordingDeletePopup.tsx

@@ -0,0 +1,115 @@
+import React, {SetStateAction} from 'react';
+import {StyleSheet, Text, View} from 'react-native';
+import Spacer from '../../atoms/Spacer';
+import Popup from '../../atoms/Popup';
+import TertiaryButton from '../../atoms/TertiaryButton';
+import PrimaryButton from '../../atoms/PrimaryButton';
+import ThemeConfig from '../../theme';
+import {useIsDesktop} from '../../utils/common';
+import {useString} from '../../utils/useString';
+import {cancelText} from '../../language/default-labels/commonLabels';
+
+interface RecordingDeletePopupProps {
+  modalVisible: boolean;
+  setModalVisible: React.Dispatch<SetStateAction<boolean>>;
+  onConfirm: () => void;
+  onCancel: () => void;
+}
+const RecordingDeletePopup = (props: RecordingDeletePopupProps) => {
+  const isDesktop = useIsDesktop()('popup');
+  const heading = 'DELETE';
+  const subheading =
+    "Are you sure want to delete the recording? This action can't be undone.";
+
+  const cancelBtnLabel = useString(cancelText)();
+  const deleteBtnLabel = 'DELETE';
+  return (
+    <Popup
+      modalVisible={props.modalVisible}
+      setModalVisible={props.setModalVisible}
+      showCloseIcon={false}
+      contentContainerStyle={styles.contentContainer}>
+      <Text style={styles.heading}>{heading}</Text>
+      <Spacer size={8} />
+      <Text style={styles.subHeading}>{subheading}</Text>
+      <Spacer size={32} />
+      <View style={isDesktop ? styles.btnContainer : styles.btnContainerMobile}>
+        <View style={isDesktop && {flex: 1}}>
+          <TertiaryButton
+            containerStyle={{
+              width: '100%',
+              height: 48,
+              paddingVertical: 12,
+              paddingHorizontal: 12,
+              borderRadius: ThemeConfig.BorderRadius.medium,
+            }}
+            textStyle={styles.btnText}
+            text={cancelBtnLabel}
+            onPress={() => {
+              props?.setModalVisible(false);
+              props?.onCancel();
+            }}
+          />
+        </View>
+        <Spacer
+          size={isDesktop ? 10 : 20}
+          horizontal={isDesktop ? true : false}
+        />
+        <View style={isDesktop && {flex: 1}}>
+          <PrimaryButton
+            containerStyle={{
+              minWidth: 'auto',
+              width: '100%',
+              borderRadius: ThemeConfig.BorderRadius.medium,
+              height: 48,
+              backgroundColor: $config.SEMANTIC_ERROR,
+              paddingVertical: 12,
+              paddingHorizontal: 12,
+            }}
+            textStyle={styles.btnText}
+            text={deleteBtnLabel}
+            onPress={() => {
+              props?.setModalVisible(false);
+              props?.onConfirm();
+            }}
+          />
+        </View>
+      </View>
+    </Popup>
+  );
+};
+
+export default RecordingDeletePopup;
+
+const styles = StyleSheet.create({
+  btnContainer: {
+    flex: 1,
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  contentContainer: {
+    padding: 24,
+    maxWidth: 342,
+  },
+  btnText: {
+    fontWeight: '600',
+    fontSize: 16,
+    lineHeight: 24,
+  },
+  btnContainerMobile: {
+    flexDirection: 'column-reverse',
+  },
+  heading: {
+    fontFamily: ThemeConfig.FontFamily.sansPro,
+    fontWeight: '600',
+    fontSize: 22,
+    color: $config.SEMANTIC_ERROR,
+  },
+  subHeading: {
+    fontFamily: ThemeConfig.FontFamily.sansPro,
+    fontWeight: '400',
+    fontSize: 14,
+    color: $config.FONT_COLOR,
+  },
+});

package/template/src/components/recordings/RecordingsDateTable.tsx

@@ -3,8 +3,10 @@ import {View, Text} from 'react-native';
 import {style} from './style';
 import {RTableHeader, RTableBody, RTableFooter} from './recording-table';
 import {useRecording} from '../../subComponents/recording/useRecording';
+import events from '../../rtm-events-api';
+import {EventNames} from '../../rtm-events';
 
-function RecordingsDateTable() {
+function RecordingsDateTable(props) {
   const [state, setState] = React.useState({
     status: 'idle',
     data: {
@@ -21,11 +23,24 @@ function RecordingsDateTable() {
 
   const {fetchRecordings} = useRecording();
 
-  const [currentPage, setCurrentPage] = useState(1);
+  const defaultPageNumber = 1;
+  const [currentPage, setCurrentPage] = useState(defaultPageNumber);
+
+  const onRecordingDeleteCallback = () => {
+    setCurrentPage(defaultPageNumber);
+    getRecordings(defaultPageNumber);
+  };
 
   useEffect(() => {
+    events.on(EventNames.RECORDING_DELETED, onRecordingDeleteCallback);
+    return () => {
+      events.off(EventNames.RECORDING_DELETED, onRecordingDeleteCallback);
+    };
+  }, []);
+
+  const getRecordings = pageNumber => {
     setState(prev => ({...prev, status: 'pending'}));
-    fetchRecordings(currentPage).then(
+    fetchRecordings(pageNumber).then(
       response =>
         setState(prev => ({
           ...prev,
@@ -37,7 +52,11 @@ function RecordingsDateTable() {
         })),
       error => setState(prev => ({...prev, status: 'rejected', error})),
     );
-  }, [fetchRecordings, currentPage]);
+  };
+
+  useEffect(() => {
+    getRecordings(currentPage);
+  }, [currentPage]);
 
   if (status === 'rejected') {
     return (
@@ -49,7 +68,11 @@ function RecordingsDateTable() {
   return (
     <View style={style.ttable}>
       <RTableHeader />
-      <RTableBody status={status} recordings={recordings} />
+      <RTableBody
+        status={status}
+        recordings={recordings}
+        onDeleteAction={props?.onDeleteAction}
+      />
       <RTableFooter
         currentPage={currentPage}
         setCurrentPage={setCurrentPage}

package/template/src/components/recordings/ViewRecordingsModal.tsx

@@ -8,6 +8,7 @@ import {recordingModalTitleIntn} from '../../language/default-labels/videoCallSc
 
 interface ViewRecordingsModalProps {
   setModalOpen: Dispatch<SetStateAction<boolean>>;
+  onDeleteAction: (recordingId: number) => void;
 }
 
 // interface FetchRecordingResponse {
@@ -31,7 +32,7 @@ interface ViewRecordingsModalProps {
 //   error: null;
 // }
 export default function ViewRecordingsModal(props: ViewRecordingsModalProps) {
-  const {setModalOpen} = props;
+  const {setModalOpen, onDeleteAction} = props;
 
   const recordingModalTitle = useString(recordingModalTitleIntn)();
 
@@ -44,7 +45,7 @@ export default function ViewRecordingsModal(props: ViewRecordingsModalProps) {
       cancelable={false}
       contentContainerStyle={style.mContainer}>
       <View style={style.mbody}>
-        <RecordingsDateTable />
+        <RecordingsDateTable onDeleteAction={onDeleteAction} />
       </View>
     </RecordingsModal>
   );

package/template/src/components/recordings/recording-table.tsx

@@ -32,7 +32,7 @@ function RTableHeader() {
   );
 }
 
-function RTableBody({status, recordings}) {
+function RTableBody({status, recordings, onDeleteAction}) {
   const renderTableBodyContent = () => {
     if (status === 'idle' || status === 'pending') {
       return <Loading background="transparent" text="Fetching recordings.." />;
@@ -104,97 +104,121 @@ function RTableBody({status, recordings}) {
                     </Text>
                   </View>
                 ) : item?.download_url?.length > 0 ? (
-                  item?.download_url?.map((link: string, i: number) => (
-                    <View style={style.tactions} key={i}>
-                      <View>
-                        <IconButtonWithToolTip
-                          hoverEffect={true}
-                          hoverEffectStyle={style.iconButtonHoverEffect}
-                          containerStyle={style.iconButton}
-                          iconProps={{
-                            name: 'download',
-                            iconType: 'plain',
-                            iconSize: 20,
-                            tintColor: `${$config.SECONDARY_ACTION_COLOR}`,
-                          }}
-                          onPress={() => {
-                            downloadRecording(link);
-                          }}
-                        />
-                      </View>
-                      <View style={style.pl15}>
-                        <IconButtonWithToolTip
-                          // placement="bottom"
-                          // toolTipMessage="Share"
-                          hoverEffect={true}
-                          hoverEffectStyle={style.iconButtonHoverEffect}
-                          containerStyle={style.iconButton}
-                          iconProps={{
-                            name: 'link-share',
-                            iconType: 'plain',
-                            iconSize: 20,
-                            tintColor: `${$config.SECONDARY_ACTION_COLOR}`,
-                          }}
-                          onPress={async () => {
-                            if (await Linking.canOpenURL(link)) {
-                              await Linking.openURL(link);
-                            }
-                          }}
-                        />
-                      </View>
-                      <View style={[style.pl15]}>
-                        <View>
-                          <Tooltip
-                            isClickable
-                            placement="left"
-                            toolTipMessage="Link Copied"
-                            onPress={() => {
-                              Clipboard.setString(link);
-                            }}
-                            toolTipIcon={
-                              <>
-                                <ImageIcon
-                                  iconType="plain"
-                                  name="tick-fill"
-                                  tintColor={$config.SEMANTIC_SUCCESS}
-                                  iconSize={20}
-                                />
-                                <Spacer size={8} horizontal={true} />
-                              </>
-                            }
-                            fontSize={12}
-                            renderContent={() => {
-                              return (
-                                <PlatformWrapper>
-                                  {(isHovered: boolean) => (
-                                    <TouchableOpacity
-                                      style={[
-                                        isHovered
-                                          ? style.iconButtonHoverEffect
-                                          : {},
-                                        style.iconShareLink,
-                                      ]}
-                                      onPress={() => {
-                                        Clipboard.setString(link);
-                                      }}>
-                                      <ImageIcon
-                                        iconType="plain"
-                                        name="copy-link"
-                                        iconSize={20}
-                                        tintColor={
-                                          $config.SECONDARY_ACTION_COLOR
-                                        }
-                                      />
-                                    </TouchableOpacity>
-                                  )}
-                                </PlatformWrapper>
-                              );
-                            }}
-                          />
+                  <View style={style.tactions}>
+                    <View>
+                      {item?.download_url?.map((link: string, i: number) => (
+                        <View
+                          style={[
+                            style.tactions,
+                            //if recording contains multiple parts then we need to add some space each row
+                            i >= 1 ? {marginTop: 8} : {},
+                          ]}>
+                          <View>
+                            <IconButtonWithToolTip
+                              hoverEffect={true}
+                              hoverEffectStyle={style.iconButtonHoverEffect}
+                              containerStyle={style.iconButton}
+                              iconProps={{
+                                name: 'download',
+                                iconType: 'plain',
+                                iconSize: 20,
+                                tintColor: `${$config.SECONDARY_ACTION_COLOR}`,
+                              }}
+                              onPress={() => {
+                                downloadRecording(link);
+                              }}
+                            />
+                          </View>
+                          <View style={style.pl10}>
+                            <IconButtonWithToolTip
+                              // placement="bottom"
+                              // toolTipMessage="Share"
+                              hoverEffect={true}
+                              hoverEffectStyle={style.iconButtonHoverEffect}
+                              containerStyle={style.iconButton}
+                              iconProps={{
+                                name: 'link-share',
+                                iconType: 'plain',
+                                iconSize: 20,
+                                tintColor: `${$config.SECONDARY_ACTION_COLOR}`,
+                              }}
+                              onPress={async () => {
+                                if (await Linking.canOpenURL(link)) {
+                                  await Linking.openURL(link);
+                                }
+                              }}
+                            />
+                          </View>
+                          <View style={[style.pl10]}>
+                            <Tooltip
+                              isClickable
+                              placement="left"
+                              toolTipMessage="Link Copied"
+                              onPress={() => {
+                                Clipboard.setString(link);
+                              }}
+                              toolTipIcon={
+                                <>
+                                  <ImageIcon
+                                    iconType="plain"
+                                    name="tick-fill"
+                                    tintColor={$config.SEMANTIC_SUCCESS}
+                                    iconSize={20}
+                                  />
+                                  <Spacer size={8} horizontal={true} />
+                                </>
+                              }
+                              fontSize={12}
+                              renderContent={() => {
+                                return (
+                                  <PlatformWrapper>
+                                    {(isHovered: boolean) => (
+                                      <TouchableOpacity
+                                        style={[
+                                          isHovered
+                                            ? style.iconButtonHoverEffect
+                                            : {},
+                                          style.iconShareLink,
+                                        ]}
+                                        onPress={() => {
+                                          Clipboard.setString(link);
+                                        }}>
+                                        <ImageIcon
+                                          iconType="plain"
+                                          name="copy-link"
+                                          iconSize={20}
+                                          tintColor={
+                                            $config.SECONDARY_ACTION_COLOR
+                                          }
+                                        />
+                                      </TouchableOpacity>
+                                    )}
+                                  </PlatformWrapper>
+                                );
+                              }}
+                            />
+                          </View>
                         </View>
-                      </View>
+                      ))}
                     </View>
-                  ))
+                    <View style={[style.pl10]}>
+                      <IconButtonWithToolTip
+                        hoverEffect={true}
+                        hoverEffectStyle={style.iconButtonHoverEffect}
+                        containerStyle={style.iconButton}
+                        iconProps={{
+                          name: 'delete',
+                          iconType: 'plain',
+                          iconSize: 20,
+                          tintColor: `${$config.SEMANTIC_ERROR}`,
+                        }}
+                        onPress={() => {
+                          //show confirmation popup
+                          onDeleteAction && onDeleteAction(item.id);
+                        }}
+                      />
+                    </View>
+                  </View>
                 ) : (
                   <View style={(style.tactions, {marginTop: 0})}>
                     <Text style={style.placeHolder}>No recordings found</Text>

package/template/src/components/recordings/style.ts

@@ -13,7 +13,7 @@ export const style = StyleSheet.create({
     flexShrink: 0,
     // width: 620,
     width: '100%',
-    maxWidth: 620,
+    maxWidth: 680,
     minWidth: 340,
     height: 620,
     maxHeight: 620,
@@ -98,9 +98,8 @@ export const style = StyleSheet.create({
   },
   td: {
     flex: 1,
-    alignSelf: 'flex-start',
+    alignSelf: 'center',
     justifyContent: 'center',
-    paddingHorizontal: 12,
     // height: 100,
     gap: 10,
   },
@@ -127,7 +126,6 @@ export const style = StyleSheet.create({
   tactions: {
     display: 'flex',
     flexDirection: 'row',
-    marginTop: -8,
   },
   tlink: {
     color: $config.PRIMARY_ACTION_BRAND_COLOR,

package/template/src/logger/AppBuilderLogger.tsx

@@ -102,7 +102,8 @@ type LogType = {
     | 'whiteboard_screenshot'
     | 'recording_start'
     | 'recording_stop'
-    | 'recordings_get';
+    | 'recordings_get'
+    | 'recording_delete';
   [LogSource.Events]: 'CUSTOM_EVENTS' | 'RTM_EVENTS';
   [LogSource.CustomizationAPI]: 'Log';
   [LogSource.SDK]: 'Log' | 'Event';

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

@@ -34,6 +34,7 @@ import {
   ToolbarItem,
   ToolbarItemHide,
   ToolbarItemLabel,
+  useSpeechToText,
 } from 'customization-api';
 import LayoutIconButton from '../../subComponents/LayoutIconButton';
 import CaptionIcon from '../../../src/subComponents/caption/CaptionIcon';
@@ -259,6 +260,7 @@ const ActionSheetContent = props => {
   const {defaultContent} = useContent();
   const {waitingRoomUids} = useWaitingRoomContext();
   const defaultContentRef = React.useRef(defaultContent);
+  const {addStreamMessageListener} = useSpeechToText();
 
   React.useEffect(() => {
     defaultContentRef.current = defaultContent;
@@ -335,6 +337,8 @@ const ActionSheetContent = props => {
         },
       ];
     });
+    // start listening to stream Message callback
+    addStreamMessageListener();
   }, [sttLanguage]);
 
   const isLiveStream = $config.EVENT_MODE && !$config.AUDIO_ROOM;

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

@@ -38,7 +38,7 @@ const WAITING_ROOM_STATUS_UPDATE = 'WAITING_ROOM_STATUS_UPDATE';
 const WHITEBOARD_ACTIVE = 'WHITEBOARD_ACTIVE';
 const BOARD_COLOR_CHANGED = 'BOARD_COLOR_CHANGED';
 const WHITEBOARD_LAST_IMAGE_UPLOAD_POSITION = 'WHITEBOARD_L_I_U_P';
-
+const RECORDING_DELETED = 'RECORDING_DELETED';
 const EventNames = {
   RECORDING_STATE_ATTRIBUTE,
   RECORDING_STARTED_BY_ATTRIBUTE,
@@ -58,6 +58,7 @@ const EventNames = {
   WHITEBOARD_ACTIVE,
   BOARD_COLOR_CHANGED,
   WHITEBOARD_LAST_IMAGE_UPLOAD_POSITION,
+  RECORDING_DELETED,
 };
 /** ***** EVENT NAMES ENDS ***** */
 

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

@@ -10,9 +10,16 @@ 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;
+export type WebStreamMessageArgs = [number, Uint8Array];
+export type NativeStreamMessageArgs = [
+  {},
+  number,
+  number,
+  Uint8Array,
+  number,
+  number,
+];
+export type StreamMessageArgs = WebStreamMessageArgs | NativeStreamMessageArgs;
 
 interface CaptionProps {
   captionTextStyle?: TextStyle;

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

@@ -76,6 +76,7 @@ export interface RecordingContextInterface {
   isRecordingActive: boolean;
   inProgress: boolean;
   fetchRecordings?: (page: number) => Promise<RecordingsData>;
+  deleteRecording?: (id: number) => Promise<boolean>;
 }
 
 const RecordingContext = createContext<RecordingContextInterface>({
@@ -625,6 +626,85 @@ const RecordingProvider = (props: RecordingProviderProps) => {
     [roomId?.host, store.token],
   );
 
+  const deleteRecording = useCallback(
+    (recordingId: number) => {
+      const requestId = getUniqueID();
+      const startReqTs = Date.now();
+      logger.debug(
+        LogSource.NetworkRest,
+        'recording_delete',
+        'Trying to delete recording recording id:' + recordingId,
+        {
+          recordingId,
+        },
+      );
+      return fetch(
+        `${$config.BACKEND_ENDPOINT}/v1/recording/${recordingId}?passphrase=${roomId?.host}`,
+        {
+          method: 'DELETE',
+          headers: {
+            'Content-Type': 'application/json',
+            authorization: store.token ? `Bearer ${store.token}` : '',
+            'X-Request-Id': requestId,
+            'X-Session-Id': logger.getSessionId(),
+          },
+        },
+      )
+        .then(async response => {
+          const endReqTs = Date.now();
+          if (response.ok) {
+            logger.debug(
+              LogSource.NetworkRest,
+              'recording_delete',
+              'delete recording successfull',
+              response,
+              {
+                recordingId,
+                startReqTs,
+                endReqTs,
+                latency: endReqTs - startReqTs,
+                requestId,
+              },
+            );
+            return Promise.resolve(true);
+          } else {
+            logger.error(
+              LogSource.NetworkRest,
+              'recording_delete',
+              'Error while deleting recording',
+              response,
+              {
+                recordingId,
+                startReqTs,
+                endReqTs,
+                latency: endReqTs - startReqTs,
+                requestId,
+              },
+            );
+            return Promise.reject(false);
+          }
+        })
+        .catch(error => {
+          const endReqTs = Date.now();
+          logger.error(
+            LogSource.NetworkRest,
+            'recording_delete',
+            'Error while deleting recording',
+            error,
+            {
+              recordingId,
+              startReqTs,
+              endReqTs,
+              latency: endReqTs - startReqTs,
+              requestId,
+            },
+          );
+          return Promise.reject(false);
+        });
+    },
+    [roomId?.host, store.token],
+  );
+
   // Events
   useEffect(() => {
     events.on(EventNames.RECORDING_STATE_ATTRIBUTE, data => {
@@ -924,6 +1004,7 @@ const RecordingProvider = (props: RecordingProviderProps) => {
         stopRecording,
         isRecordingActive,
         fetchRecordings,
+        deleteRecording,
       }}>
       {props.children}
     </RecordingContext.Provider>

package/template/src/utils/useSpeechToText.ts

@@ -3,12 +3,20 @@ import {
   SidePanelType,
   customEvents,
   useContent,
+  useRtc,
   useSTTAPI,
   useSidePanel,
 } from 'customization-api';
 import useTranscriptDownload from '../subComponents/caption/useTranscriptDownload';
 import {useCaption} from '../subComponents/caption/useCaption';
 import {LanguageType} from '../subComponents/caption/utils';
+import useStreamMessageUtils from '../subComponents/caption/useStreamMessageUtils';
+import {
+  NativeStreamMessageArgs,
+  StreamMessageArgs,
+  WebStreamMessageArgs,
+} from '../subComponents/caption/Caption';
+import {isWebInternal} from './common';
 
 const useSpeechToText = () => {
   const {
@@ -18,6 +26,8 @@ const useSpeechToText = () => {
     captionObj: captionData,
     prevSpeakerRef,
     activeSpeakerRef,
+    isSTTListenerAdded,
+    setIsSTTListenerAdded,
   } = useCaption();
   const {setSidePanel} = useSidePanel();
 
@@ -26,6 +36,8 @@ const useSpeechToText = () => {
 
   const isAuthorizedSTTUserRef = useRef(isAuthorizedSTTUser);
   const defaultContentRef = useRef(defaultContent);
+  const {RtcEngineUnsafe} = useRtc();
+  const {streamMessageCallback} = useStreamMessageUtils();
 
   const showTranscriptPanel = (show: boolean) => {
     show
@@ -40,7 +52,7 @@ const useSpeechToText = () => {
   useEffect(() => {
     if (!$config.ENABLE_STT) {
       //throw new Error('Speech To Text is not enabled');
-      console.error('Speech To Text is not enabled')
+      console.error('Speech To Text is not enabled');
     }
   }, []);
 
@@ -76,6 +88,24 @@ const useSpeechToText = () => {
     return await stop();
   };
 
+  const addStreamMessageListener = () => {
+    !isSTTListenerAdded &&
+      RtcEngineUnsafe.addListener(
+        'onStreamMessage',
+        handleStreamMessageCallback,
+      );
+  };
+  const handleStreamMessageCallback = (...args: StreamMessageArgs) => {
+    setIsSTTListenerAdded(true);
+    if (isWebInternal()) {
+      const [uid, data] = args as WebStreamMessageArgs;
+      streamMessageCallback([uid, data]);
+    } else {
+      const [, uid, , data] = args as NativeStreamMessageArgs;
+      streamMessageCallback([uid, data]);
+    }
+  };
+
   const changeSpeakingLanguage = async (language: LanguageType[]) => {
     if (!isAuthorizedSTTUserRef.current) {
       throw new Error('Invalid user');
@@ -96,6 +126,7 @@ const useSpeechToText = () => {
         showCaptionPanel,
         transcriptData,
         captionData,
+        addStreamMessageListener,
       }
     : {};
 };