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

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

@@ -0,0 +1,120 @@
+import React from 'react';
+import {View, Text, TouchableOpacity} from 'react-native';
+import IconButtonWithToolTip from '../../atoms/IconButton';
+import Tooltip from '../../atoms/Tooltip';
+import Clipboard from '../../subComponents/Clipboard';
+import Spacer from '../../atoms/Spacer';
+import PlatformWrapper from '../../utils/PlatformWrapper';
+import {FetchSTTTranscriptResponse} from '../text-tracks/useFetchSTTTranscript';
+import {style} from '../common/data-table';
+import ImageIcon from '../../atoms/ImageIcon';
+
+interface TextTrackItemRowProps {
+  item: FetchSTTTranscriptResponse['stts'][0];
+  onTextTrackDownload: (link: string) => void;
+}
+
+export default function TextTrackItemRow({
+  item,
+  onTextTrackDownload,
+}: TextTrackItemRowProps) {
+  const textTrackStatus = item.status;
+
+  return (
+    <View style={style.td} key={item.id}>
+      {!item.download_url ? (
+        <View style={[style.tactions, {marginTop: 0}]}>
+          {textTrackStatus === 'STOPPING' ||
+          textTrackStatus === 'STARTED' ||
+          (textTrackStatus === 'INPROGRESS' && !item?.download_url) ? (
+            <Text style={style.placeHolder}>
+              {'The link will be generated once the meeting ends'}
+            </Text>
+          ) : (
+            <Text style={style.placeHolder}>{'No text-tracks found'}</Text>
+          )}
+        </View>
+      ) : item?.download_url?.length > 0 ? (
+        <View style={style.tactions}>
+          <View>
+            {item?.download_url?.map((link: string, i: number) => (
+              <View
+                key={i}
+                style={[
+                  style.tactions,
+                  //if stts 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={() => {
+                      onTextTrackDownload && onTextTrackDownload(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.tactions, {marginTop: 0})}>
+          <Text style={style.placeHolder}>No text-tracks found</Text>
+        </View>
+      )}
+    </View>
+  );
+}

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,45 @@ 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 {sttState, currentPage, setCurrentPage, deleteTranscript} =
+    useFetchSTTTranscript();
+
   const {
     status,
-    stts,
-    pagination,
-    error,
-    currentPage,
-    setCurrentPage,
-    deleteTranscript,
-  } = useFetchSTTTranscript();
-
-  // id of STT transcript to delete
-  const [sttIdToDelete, setSTTIdToDelete] = React.useState<string | undefined>(
-    undefined,
-  );
+    data: {stts, pagination},
+    error: fetchTranscriptError,
+  } = sttState;
+  // 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 +242,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 +266,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/text-tracks/useFetchSTTTranscript.tsx

@@ -0,0 +1,266 @@
+import {useState, useCallback, useEffect, useContext} from 'react';
+import StorageContext from '../StorageContext';
+import {useRoomInfo} from 'customization-api';
+import getUniqueID from '../../utils/getUniqueID';
+import {logger, LogSource} from '../../logger/AppBuilderLogger';
+
+export interface FetchSTTTranscriptResponse {
+  pagination: {limit: number; total: number; page: number};
+  stts: {
+    id: string;
+    download_url: string[];
+    title: string;
+    product_name: string;
+    status: 'COMPLETED' | 'STARTED' | 'INPROGRESS' | 'STOPPING';
+    created_at: string;
+    ended_at: string;
+  }[];
+}
+
+export type APIStatus = 'idle' | 'pending' | 'resolved' | 'rejected';
+
+export function useFetchSTTTranscript() {
+  const {
+    data: {roomId},
+  } = useRoomInfo();
+  const {store} = useContext(StorageContext);
+
+  const [currentPage, setCurrentPage] = useState(1);
+
+  const [sttState, setSttState] = useState<{
+    status: APIStatus;
+    data: {
+      stts: FetchSTTTranscriptResponse['stts'];
+      pagination: FetchSTTTranscriptResponse['pagination'];
+    };
+    error: Error | null;
+  }>({
+    status: 'idle',
+    data: {stts: [], pagination: {total: 0, limit: 10, page: 1}},
+    error: null,
+  });
+
+  //–– by‐recording state ––
+  const [sttRecState, setSttRecState] = useState<{
+    status: APIStatus;
+    data: {stts: FetchSTTTranscriptResponse['stts']};
+    error: Error | null;
+  }>({
+    status: 'idle',
+    data: {
+      stts: [],
+    },
+    error: null,
+  });
+
+  const getSTTs = useCallback(
+    (page: number) => {
+      setSttState(s => ({...s, status: 'pending', error: null}));
+      const reqId = getUniqueID();
+      const start = Date.now();
+
+      fetch(`${$config.BACKEND_ENDPOINT}/v1/stt-transcript`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          authorization: store.token ? `Bearer ${store.token}` : '',
+          'X-Request-Id': reqId,
+          'X-Session-Id': logger.getSessionId(),
+        },
+        body: JSON.stringify({
+          passphrase: roomId.host,
+          limit: 10,
+          page,
+        }),
+      })
+        .then(async res => {
+          const json = await res.json();
+          const end = Date.now();
+          if (!res.ok) {
+            logger.error(
+              LogSource.NetworkRest,
+              'stt-transcript',
+              'Fetch STT transcripts failed',
+              {
+                json,
+                start,
+                end,
+                latency: end - start,
+                requestId: reqId,
+              },
+            );
+            throw new Error(json?.error?.message || res.statusText);
+          }
+          logger.debug(
+            LogSource.NetworkRest,
+            'stt-transcript',
+            'Fetch STT transcripts succeeded',
+            {
+              json,
+              start,
+              end,
+              latency: end - start,
+              requestId: reqId,
+            },
+          );
+          return json as FetchSTTTranscriptResponse;
+        })
+        .then(({stts = [], pagination = {total: 0, limit: 10, page}}) => {
+          setSttState({
+            status: 'resolved',
+            data: {stts, pagination},
+            error: null,
+          });
+        })
+        .catch(err => {
+          setSttState(s => ({...s, status: 'rejected', error: err}));
+        });
+    },
+    [roomId.host, store.token],
+  );
+
+  useEffect(() => {
+    getSTTs(currentPage);
+  }, [currentPage, getSTTs]);
+
+  // Delete stts
+  const deleteTranscript = useCallback(
+    async (id: string) => {
+      const reqId = getUniqueID();
+      const start = Date.now();
+
+      const res = await fetch(
+        `${
+          $config.BACKEND_ENDPOINT
+        }/v1/stt-transcript/${id}?passphrase=${encodeURIComponent(
+          roomId.host,
+        )}`,
+        {
+          method: 'DELETE',
+          headers: {
+            'Content-Type': 'application/json',
+            authorization: store.token ? `Bearer ${store.token}` : '',
+            'X-Request-Id': reqId,
+            'X-Session-Id': logger.getSessionId(),
+          },
+        },
+      );
+      const end = Date.now();
+
+      if (!res.ok) {
+        logger.error(
+          LogSource.NetworkRest,
+          'stt-transcript',
+          'Delete transcript failed',
+          {start, end, latency: end - start, requestId: reqId},
+        );
+        throw new Error(`Delete failed (${res.status})`);
+      }
+      logger.debug(
+        LogSource.NetworkRest,
+        'stt-transcript',
+        'Delete transcript succeeded',
+        {start, end, latency: end - start, requestId: reqId},
+      );
+
+      // optimistic remove from paginated list
+      setSttState(prev => {
+        // remove the deleted item
+        const newStts = prev.data.stts.filter(item => item.id !== id);
+        // decrement total count
+        const newTotal = Math.max(prev.data.pagination.total - 1, 0);
+        let newPage = prev.data.pagination.page;
+        if (prev.data.stts.length === 1 && newPage > 1) {
+          newPage--;
+        }
+        return {
+          ...prev,
+          data: {
+            stts: newStts,
+
+            pagination: {
+              ...prev.data.pagination,
+              total: newTotal,
+              page: newPage,
+            },
+          },
+        };
+      });
+    },
+    [roomId.host, store.token],
+  );
+
+  //–– fetch for a given recording ––
+  const getSTTsForRecording = useCallback(
+    (recordingId: string) => {
+      setSttRecState(r => ({...r, status: 'pending', error: null}));
+      const reqId = getUniqueID();
+      const start = Date.now();
+
+      fetch(`${$config.BACKEND_ENDPOINT}/v1/recording/stt-transcript`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          authorization: store.token ? `Bearer ${store.token}` : '',
+          'X-Request-Id': reqId,
+          'X-Session-Id': logger.getSessionId(),
+        },
+        body: JSON.stringify({
+          project_id: $config.PROJECT_ID,
+          recording_id: recordingId,
+        }),
+      })
+        .then(async res => {
+          const json = await res.json();
+          const end = Date.now();
+          console.log('supriua json', json);
+          if (!res.ok) {
+            logger.error(
+              LogSource.NetworkRest,
+              'stt-transcript',
+              'Fetch stt-by-recording failed',
+              {json, start, end, latency: end - start, requestId: reqId},
+            );
+            throw new Error(json?.error?.message || res.statusText);
+          }
+          logger.debug(
+            LogSource.NetworkRest,
+            'stt-transcript',
+            'Fetch stt-by-recording succeeded',
+            {json, start, end, latency: end - start, requestId: reqId},
+          );
+          if (json?.error) {
+            logger.debug(
+              LogSource.NetworkRest,
+              'stt-transcript',
+              `No STT records found (code ${json.error.code}): ${json.error.message}`,
+              {start, end, latency: end - start, reqId},
+            );
+            return [];
+          } else {
+            return json as FetchSTTTranscriptResponse['stts'];
+          }
+        })
+        .then(stts =>
+          setSttRecState({status: 'resolved', data: {stts}, error: null}),
+        )
+        .catch(err =>
+          setSttRecState(r => ({...r, status: 'rejected', error: err})),
+        );
+    },
+    [store.token],
+  );
+
+  return {
+    // stt list
+    sttState,
+    getSTTs,
+    currentPage,
+    setCurrentPage,
+    // STT per recording
+    sttRecState,
+    getSTTsForRecording,
+    // delete
+    deleteTranscript,
+  };
+}

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]: