agora-appbuilder-core 4.1.8-beta.5 → 4.1.8-beta.6

package/package.json

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

package/template/defaultConfig.js

@@ -77,8 +77,8 @@ const DefaultConfig = {
   CHAT_ORG_NAME: '',
   CHAT_APP_NAME: '',
   CHAT_URL: '',
-  CLI_VERSION: '3.1.8-beta.5',
-  CORE_VERSION: '4.1.8-beta.5',
+  CLI_VERSION: '3.1.8-beta.6',
+  CORE_VERSION: '4.1.8-beta.6',
   DISABLE_LANDSCAPE_MODE: false,
   STT_AUTO_START: false,
   CLOUD_RECORDING_AUTO_START: false,

package/template/src/components/Controls.tsx

@@ -103,7 +103,7 @@ import {
   toolbarItemTranscriptText,
   toolbarItemVirtualBackgroundText,
   toolbarItemWhiteboardText,
-  toolbarItemManageTranscriptText,
+  toolbarItemManageTextTracksText,
 } from '../language/default-labels/videoCallScreenLabels';
 import {LogSource, logger} from '../logger/AppBuilderLogger';
 import {useModal} from '../utils/useModal';
@@ -116,7 +116,7 @@ import {
   InviteToolbarItem,
   ScreenshareToolbarItem,
 } from './controls/toolbar-items';
-import ViewSTTTranscriptModal from './stt-transcript/ViewSTTTranscriptModal';
+import ViewTextTracksModal from './text-tracks/ViewTextTracksModal';
 
 export const useToggleWhiteboard = () => {
   const {
@@ -278,7 +278,9 @@ const MoreButton = (props: {fields: ToolbarMoreButtonDefaultFields}) => {
   const viewRecordingsLabel = useString<boolean>(
     toolbarItemViewRecordingText,
   )();
-  const viewSTTLabel = useString<boolean>(toolbarItemManageTranscriptText)();
+  const viewTextTracksLabel = useString<boolean>(
+    toolbarItemManageTextTracksText,
+  )();
   const moreButtonLabel = useString(toolbarItemMoreText)();
   const virtualBackgroundLabel = useString(toolbarItemVirtualBackgroundText)();
   const chatLabel = useString(toolbarItemChatText)();
@@ -297,9 +299,9 @@ const MoreButton = (props: {fields: ToolbarMoreButtonDefaultFields}) => {
     toggle: toggleVRModal,
   } = useModal();
   const {
-    modalOpen: isSTTTranscriptModalOpen,
-    setModalOpen: setSTTTranscriptModalOpen,
-    toggle: toggleSTTTranscriptModal,
+    modalOpen: isTextTrackModalOpen,
+    setModalOpen: setTextTrackModalOpen,
+    toggle: toggleTextTrackModal,
   } = useModal();
   const moreBtnRef = useRef(null);
   const {width: globalWidth, height: globalHeight} = useWindowDimensions();
@@ -814,20 +816,20 @@ const MoreButton = (props: {fields: ToolbarMoreButtonDefaultFields}) => {
     });
   }
 
-  // 13. Transcripts to download
-  const canAccessAllTranscripts =
-    useControlPermissionMatrix('viewAllTranscripts');
+  // 13. Text-tracks to download
+  const canAccessAllTextTracks =
+    useControlPermissionMatrix('viewAllTextTracks');
 
-  if (canAccessAllTranscripts) {
+  if (canAccessAllTextTracks) {
     actionMenuitems.push({
-      componentName: 'view-all-transcripts',
+      componentName: 'view-all-text-tracks',
       order: 13,
       icon: 'transcript',
       iconColor: $config.SECONDARY_ACTION_COLOR,
       textColor: $config.FONT_COLOR,
-      title: viewSTTLabel,
+      title: viewTextTracksLabel,
       onPress: () => {
-        toggleSTTTranscriptModal();
+        toggleTextTrackModal();
       },
     });
   }
@@ -978,8 +980,8 @@ const MoreButton = (props: {fields: ToolbarMoreButtonDefaultFields}) => {
           )}
         </>
       )}
-      {canAccessAllTranscripts && isSTTTranscriptModalOpen ? (
-        <ViewSTTTranscriptModal setModalOpen={setSTTTranscriptModalOpen} />
+      {canAccessAllTextTracks && isTextTrackModalOpen ? (
+        <ViewTextTracksModal setModalOpen={setTextTrackModalOpen} />
       ) : (
         <></>
       )}

package/template/src/components/common/GenericPopup.tsx

@@ -51,7 +51,6 @@ const GenericPopup: React.FC<ConfirmationModalProps> = ({
     onCancel && onCancel();
   };
   const handleConfirm = () => {
-    setVisible(false);
     onConfirm();
   };
 

package/template/src/components/controls/useControlPermissionMatrix.tsx

@@ -15,7 +15,7 @@ export type ControlPermissionKey =
   | 'participantControl'
   | 'screenshareControl'
   | 'settingsControl'
-  | 'viewAllTranscripts';
+  | 'viewAllTextTracks';
 
 /**
  * ControlPermissionRule defines the properties used to evaluate permission rules.
@@ -36,7 +36,7 @@ export const controlPermissionMatrix: Record<
   settingsControl: ({preference}) => !preference.disableSettings,
   screenshareControl: ({preference}) =>
     $config.SCREEN_SHARING && !preference.disableScreenShare,
-  viewAllTranscripts: ({isHost}) =>
+  viewAllTextTracks: ({isHost}) =>
     isHost &&
     $config.ENABLE_STT &&
     $config.ENABLE_MEETING_TRANSCRIPT &&

package/template/src/components/{stt-transcript/STTTranscriptTable.tsx → text-tracks/TextTracksTable.tsx}

@@ -22,20 +22,24 @@ import PlatformWrapper from '../../utils/PlatformWrapper';
 
 const headers = ['Date', 'Time', 'Status', 'Actions'];
 
-interface STTItemRowProps {
+interface TextTrackItemRowProps {
   item: FetchSTTTranscriptResponse['stts'][0];
   onDeleteAction: (id: string) => void;
   onDownloadAction: (link: string) => void;
 }
 
-function STTItemRow({item, onDeleteAction, onDownloadAction}: STTItemRowProps) {
+function TextTrackItemRow({
+  item,
+  onDeleteAction,
+  onDownloadAction,
+}: TextTrackItemRowProps) {
   const [date, time] = getFormattedDateTime(item.created_at);
-  const sttStatus = item.status;
+  const textTrackStatus = item.status;
 
   if (
-    sttStatus === 'STOPPING' ||
-    sttStatus === 'STARTED' ||
-    (sttStatus === 'INPROGRESS' && !item?.download_url)
+    textTrackStatus === 'STOPPING' ||
+    textTrackStatus === 'STARTED' ||
+    (textTrackStatus === 'INPROGRESS' && !item?.download_url)
   ) {
     return (
       <View key={item.id} style={style.pt12}>
@@ -63,12 +67,14 @@ function STTItemRow({item, onDeleteAction, onDownloadAction}: STTItemRowProps) {
         <Text style={style.ttime}>{time}</Text>
       </View>
       <View style={[style.td]}>
-        <Text style={style.ttime}>{capitalizeFirstLetter(sttStatus)}</Text>
+        <Text style={style.ttime}>
+          {capitalizeFirstLetter(textTrackStatus)}
+        </Text>
       </View>
       <View style={style.td}>
         {!item.download_url ? (
           <View style={[style.tactions, {marginTop: 0}]}>
-            <Text style={style.placeHolder}>{'No transcripts found'}</Text>
+            <Text style={style.placeHolder}>{'No text-tracks found'}</Text>
           </View>
         ) : item?.download_url?.length > 0 ? (
           <View style={style.tactions}>
@@ -165,7 +171,7 @@ function STTItemRow({item, onDeleteAction, onDownloadAction}: STTItemRowProps) {
           </View>
         ) : (
           <View style={(style.tactions, {marginTop: 0})}>
-            <Text style={style.placeHolder}>No transcripts found</Text>
+            <Text style={style.placeHolder}>No text-tracks found</Text>
           </View>
         )}
       </View>
@@ -173,7 +179,7 @@ function STTItemRow({item, onDeleteAction, onDownloadAction}: STTItemRowProps) {
   );
 }
 
-function EmptyTranscriptState() {
+function EmptyTextTrackState() {
   return (
     <View style={style.infotextContainer}>
       <View>
@@ -186,49 +192,47 @@ function EmptyTranscriptState() {
       </View>
       <View>
         <Text style={[style.infoText, style.pt10, style.pl10]}>
-          No transcripts found for this meeting
+          No text-tracks found for this meeting
         </Text>
       </View>
     </View>
   );
 }
 
-function ErrorTranscriptState({message}: {message: string}) {
+function ErrorTextTrackState({message}: {message: string}) {
   return <Text style={[style.ttime, style.pv10, style.ph20]}>{message}</Text>;
 }
 
-function STTTranscriptTable() {
+function TextTracksTable() {
   const {
     status,
     stts,
     pagination,
-    error,
+    error: fetchTranscriptError,
     currentPage,
     setCurrentPage,
     deleteTranscript,
   } = useFetchSTTTranscript();
 
-  // id of STT transcript to delete
-  const [sttIdToDelete, setSTTIdToDelete] = React.useState<string | undefined>(
-    undefined,
-  );
+  // id of text-tracj to delete
+  const [textTrackIdToDelete, setTextTrackIdToDelete] = React.useState<
+    string | undefined
+  >(undefined);
 
   // message for any download‐error popup
-  const [downloadError, setDownloadError] = React.useState<
-    string | undefined
-  >();
+  const [errorSnack, setErrorSnack] = React.useState<string | undefined>();
 
   if (status === 'rejected') {
-    return <ErrorTranscriptState message={error?.message} />;
+    return <ErrorTextTrackState message={fetchTranscriptError?.message} />;
   }
 
-  const onDeleteSTTRecord = async () => {
+  const onDeleteTextTrackRecord = async (trackId: string) => {
     try {
-      await deleteTranscript(sttIdToDelete!);
+      await deleteTranscript(trackId!);
     } catch (err: any) {
-      setDownloadError(err.message);
+      setErrorSnack(err.message);
     } finally {
-      setSTTIdToDelete(undefined);
+      setTextTrackIdToDelete(undefined);
     }
   };
 
@@ -240,23 +244,23 @@ function STTTranscriptTable() {
           status={status}
           items={stts}
           loadingComponent={
-            <Loading background="transparent" text="Fetching transcripts.." />
+            <Loading background="transparent" text="Fetching text-tracks.." />
           }
           renderRow={item => (
-            <STTItemRow
+            <TextTrackItemRow
               key={item.id}
               item={item}
               onDeleteAction={id => {
-                setSTTIdToDelete(id);
+                setTextTrackIdToDelete(id);
               }}
               onDownloadAction={link => {
                 downloadS3Link(link).catch((err: Error) => {
-                  setDownloadError(err.message || 'Download failed');
+                  setErrorSnack(err.message || 'Download failed');
                 });
               }}
             />
           )}
-          emptyComponent={<EmptyTranscriptState />}
+          emptyComponent={<EmptyTextTrackState />}
         />
         <TableFooter
           currentPage={currentPage}
@@ -264,32 +268,36 @@ function STTTranscriptTable() {
           pagination={pagination}
         />
       </View>
-      {sttIdToDelete && (
+      {textTrackIdToDelete && (
         <GenericPopup
           title="Delete ? "
           variant="error"
-          message="Are you sure want to delete the transcript ? This action can't be undone."
-          visible={!!sttIdToDelete}
-          setVisible={() => setSTTIdToDelete(undefined)}
-          onConfirm={onDeleteSTTRecord}
+          message="Are you sure want to delete the text-track ? This action can't be undone."
+          visible={!!textTrackIdToDelete}
+          setVisible={() => setTextTrackIdToDelete(undefined)}
+          onConfirm={() => {
+            const idToDelete = textTrackIdToDelete;
+            setTextTrackIdToDelete(undefined);
+            onDeleteTextTrackRecord(idToDelete);
+          }}
           onCancel={() => {
-            setSTTIdToDelete(undefined);
+            setTextTrackIdToDelete(undefined);
           }}
         />
       )}
       {/** DOWNLOAD ERROR POPUP **/}
-      {downloadError && (
+      {errorSnack && (
         <GenericPopup
-          title="Download Error"
+          title="Error"
           variant="error"
-          message={downloadError}
+          message={errorSnack}
           visible={true}
-          setVisible={() => setDownloadError(undefined)}
-          onConfirm={() => setDownloadError(undefined)}
+          setVisible={() => setErrorSnack(undefined)}
+          onConfirm={() => setErrorSnack(undefined)}
         />
       )}
     </>
   );
 }
 
-export default STTTranscriptTable;
+export default TextTracksTable;

package/template/src/components/{stt-transcript/ViewSTTTranscriptModal.tsx → text-tracks/ViewTextTracksModal.tsx}

@@ -1,29 +1,29 @@
 import React, {SetStateAction, Dispatch} from 'react';
 import {View, StyleSheet} from 'react-native';
 import {useString} from '../../utils/useString';
-import {transcriptModalTitleIntn} from '../../language/default-labels/videoCallScreenLabels';
+import {textTrackModalTitleIntn} from '../../language/default-labels/videoCallScreenLabels';
 import GenericModal from '../common/GenericModal';
-import STTTranscriptTable from './STTTranscriptTable';
+import TextTracksTable from './TextTracksTable';
 
-interface ViewSTTModalProps {
+interface ViewTextTracksModalProps {
   setModalOpen: Dispatch<SetStateAction<boolean>>;
 }
 
-export default function ViewSTTTranscriptModal(props: ViewSTTModalProps) {
+export default function ViewTextTracksModal(props: ViewTextTracksModalProps) {
   const {setModalOpen} = props;
 
-  const transcriptModalTitle = useString(transcriptModalTitleIntn)();
+  const textTrackModalTitle = useString(textTrackModalTitleIntn)();
 
   return (
     <GenericModal
       visible={true}
       onRequestClose={() => setModalOpen(false)}
       showCloseIcon={true}
-      title={transcriptModalTitle}
+      title={textTrackModalTitle}
       cancelable={false}
       contentContainerStyle={style.contentContainer}>
       <View style={style.fullBody}>
-        <STTTranscriptTable />
+        <TextTracksTable />
       </View>
     </GenericModal>
   );

package/template/src/components/{stt-transcript → text-tracks}/useFetchSTTTranscript.tsx

@@ -134,6 +134,9 @@ export function useFetchSTTTranscript(defaultLimit = 10) {
 
   const deleteTranscript = useCallback(
     async (id: string) => {
+      const requestId = getUniqueID();
+      const start = Date.now();
+
       const res = await fetch(
         `${
           $config.BACKEND_ENDPOINT
@@ -142,15 +145,43 @@ export function useFetchSTTTranscript(defaultLimit = 10) {
         )}`,
         {
           method: 'DELETE',
-          headers: {'Content-Type': 'application/json'},
+          headers: {
+            'Content-Type': 'application/json',
+            authorization: store.token ? `Bearer ${store.token}` : '',
+            'X-Request-Id': requestId,
+            'X-Session-Id': logger.getSessionId(),
+          },
         },
       );
+      const end = Date.now();
+
       if (!res.ok) {
-        const body = await res.json();
-        throw new Error(
-          body?.error?.message ?? `Delete failed (${res.status})`,
+        logger.error(
+          LogSource.NetworkRest,
+          'stt-transcript',
+          'Deleting STT transcripts failed',
+          {
+            json: '',
+            start,
+            end,
+            latency: end - start,
+            requestId,
+          },
         );
+        throw new Error(`Delete failed (${res.status})`);
       }
+      logger.debug(
+        LogSource.NetworkRest,
+        'stt-transcript',
+        'Deleted STT transcripts',
+        {
+          json: '',
+          start,
+          end,
+          latency: end - start,
+          requestId,
+        },
+      );
       // optimistic update local state:
       setState(prev => {
         // remove the deleted item
@@ -175,7 +206,7 @@ export function useFetchSTTTranscript(defaultLimit = 10) {
         };
       });
     },
-    [roomId.host],
+    [roomId.host, store?.token],
   );
 
   useEffect(() => {

package/template/src/language/default-labels/videoCallScreenLabels.ts

@@ -109,8 +109,8 @@ export const toolbarItemNoiseCancellationText =
 export const toolbarItemWhiteboardText = 'toolbarItemWhiteboardText';
 export const toolbarItemCaptionText = 'toolbarItemCaptionText';
 export const toolbarItemTranscriptText = 'toolbarItemTranscriptText';
-export const toolbarItemManageTranscriptText =
-  'toolbarItemManageTranscriptText';
+export const toolbarItemManageTextTracksText =
+  'toolbarItemManageTextTracksText';
 export const toolbarItemVirtualBackgroundText =
   'toolbarItemVirtualBackgroundText';
 export const toolbarItemViewRecordingText = 'toolbarItemViewRecordingText';
@@ -151,7 +151,7 @@ export const nativeStopScreensharePopupPrimaryBtnText =
   'nativeStopScreensharePopupPrimaryBtnText';
 
 export const recordingModalTitleIntn = 'recordingModalTitleIntn';
-export const transcriptModalTitleIntn = 'transcriptModalTitleIntn';
+export const textTrackModalTitleIntn = 'textTrackModalTitleIntn';
 export const stopRecordingPopupHeading = 'stopRecordingPopupHeading';
 export const stopRecordingPopupSubHeading = 'stopRecordingPopupSubHeading';
 export const stopRecordingPopupPrimaryBtnText =
@@ -573,7 +573,7 @@ export interface I18nVideoCallScreenLabelsInterface {
   [toolbarItemWhiteboardText]?: I18nConditionalType;
   [toolbarItemCaptionText]?: I18nConditionalType;
   [toolbarItemTranscriptText]?: I18nConditionalType;
-  [toolbarItemManageTranscriptText]?: I18nConditionalType;
+  [toolbarItemManageTextTracksText]?: I18nConditionalType;
   [toolbarItemVirtualBackgroundText]?: I18nBaseType;
   [toolbarItemViewRecordingText]?: I18nConditionalType;
 
@@ -609,7 +609,7 @@ export interface I18nVideoCallScreenLabelsInterface {
   [nativeStopScreensharePopupPrimaryBtnText]?: I18nBaseType;
 
   [recordingModalTitleIntn]?: I18nBaseType;
-  [transcriptModalTitleIntn]?: I18nBaseType;
+  [textTrackModalTitleIntn]?: I18nBaseType;
   [stopRecordingPopupHeading]?: I18nBaseType;
   [stopRecordingPopupSubHeading]?: I18nBaseType;
   [stopRecordingPopupPrimaryBtnText]?: I18nBaseType;
@@ -942,7 +942,7 @@ export const VideoCallScreenLabels: I18nVideoCallScreenLabelsInterface = {
   [toolbarItemTranscriptText]: active =>
     active ? 'Hide Transcript' : 'Show Transcript',
   [toolbarItemViewRecordingText]: 'View Recordings',
-  [toolbarItemManageTranscriptText]: 'View Transcripts',
+  [toolbarItemManageTextTracksText]: 'View Text-tracks',
 
   [toolbarItemRaiseHandText]: active => (active ? 'Lower Hand' : 'Raise Hand'),
   [toolbarItemSwitchCameraText]: 'Switch Camera',
@@ -1025,7 +1025,7 @@ export const VideoCallScreenLabels: I18nVideoCallScreenLabelsInterface = {
     `Once removed, ${name} will still be able to screen share later.`,
   [removeScreenshareFromRoomPopupPrimaryBtnText]: 'REMOVE',
 
-  [transcriptModalTitleIntn]: 'View Transcripts',
+  [textTrackModalTitleIntn]: 'Text Tracks',
   [sttChangeLanguagePopupHeading]: isFirstTimeOpened =>
     isFirstTimeOpened ? 'Set Spoken Language' : 'Change Spoken Language',
   [sttChangeLanguagePopupSubHeading]: