agora-appbuilder-core 4.1.8-beta.1 → 4.1.8-beta.11

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

@@ -1,30 +1,67 @@
 import React, {useState, useEffect} from 'react';
 import {View, Text} from 'react-native';
-import {style} from './style';
-import {RTableHeader, RTableBody, RTableFooter} from './recording-table';
-import {useRecording} from '../../subComponents/recording/useRecording';
+import {
+  APIStatus,
+  FetchRecordingData,
+  useRecording,
+} from '../../subComponents/recording/useRecording';
 import events from '../../rtm-events-api';
 import {EventNames} from '../../rtm-events';
+import {style, TableBody, TableHeader} from '../common/data-table';
+import Loading from '../../subComponents/Loading';
+import ImageIcon from '../../atoms/ImageIcon';
+import RecordingItemRow from './RecordingItemRow';
+import GenericPopup from '../common/GenericPopup';
+import {downloadS3Link} from '../../utils/common';
+import {useControlPermissionMatrix} from '../controls/useControlPermissionMatrix';
+
+function EmptyRecordingState() {
+  return (
+    <View style={style.infotextContainer}>
+      <View>
+        <ImageIcon
+          iconType="plain"
+          name="info"
+          tintColor={'#777777'}
+          iconSize={32}
+        />
+      </View>
+      <View>
+        <Text style={[style.infoText, style.pt10, style.pl10]}>
+          No recording found for this meeting
+        </Text>
+      </View>
+    </View>
+  );
+}
+
+const defaultPageNumber = 1;
 
 function RecordingsDateTable(props) {
-  const [state, setState] = React.useState({
+  const [state, setState] = React.useState<{
+    status: APIStatus;
+    data: {
+      recordings: FetchRecordingData['recordings'];
+      pagination: FetchRecordingData['pagination'];
+    };
+    error: Error;
+  }>({
     status: 'idle',
     data: {
-      pagination: {},
       recordings: [],
+      pagination: {total: 0, limit: 10, page: defaultPageNumber},
     },
     error: null,
   });
-  const {
-    status,
-    data: {pagination, recordings},
-    error,
-  } = state;
+
+  const [currentPage, setCurrentPage] = useState(defaultPageNumber);
 
   const {fetchRecordings} = useRecording();
+  const canAccessAllTextTracks =
+    useControlPermissionMatrix('viewAllTextTracks');
 
-  const defaultPageNumber = 1;
-  const [currentPage, setCurrentPage] = useState(defaultPageNumber);
+  // message for any download‐error popup
+  const [errorSnack, setErrorSnack] = React.useState<string | undefined>();
 
   const onRecordingDeleteCallback = () => {
     setCurrentPage(defaultPageNumber);
@@ -38,7 +75,7 @@ function RecordingsDateTable(props) {
     };
   }, []);
 
-  const getRecordings = pageNumber => {
+  const getRecordings = (pageNumber: number) => {
     setState(prev => ({...prev, status: 'pending'}));
     fetchRecordings(pageNumber).then(
       response =>
@@ -47,8 +84,13 @@ function RecordingsDateTable(props) {
           status: 'resolved',
           data: {
             recordings: response?.recordings || [],
-            pagination: response?.pagination || {},
+            pagination: response?.pagination || {
+              total: 0,
+              limit: 10,
+              page: defaultPageNumber,
+            },
           },
+          error: null,
         })),
       error => setState(prev => ({...prev, status: 'rejected', error})),
     );
@@ -58,26 +100,58 @@ function RecordingsDateTable(props) {
     getRecordings(currentPage);
   }, [currentPage]);
 
-  if (status === 'rejected') {
+  if (state.status === 'rejected') {
     return (
       <Text style={[style.ttime, style.pv10, style.ph20]}>
-        {error?.message}
+        {state.error?.message}
       </Text>
     );
   }
+  const onTextTrackDownload = (textTrackLink: string) => {
+    downloadS3Link(textTrackLink).catch((err: Error) => {
+      setErrorSnack(err.message || 'Download failed');
+    });
+  };
+
+  const headers = canAccessAllTextTracks
+    ? ['', 'Date/Time', 'Duration', 'Actions']
+    : ['Date/Time', 'Duration', 'Actions'];
+
   return (
     <View style={style.ttable}>
-      <RTableHeader />
-      <RTableBody
-        status={status}
-        recordings={recordings}
-        onDeleteAction={props?.onDeleteAction}
+      <TableHeader
+        columns={headers}
+        firstCellStyle={canAccessAllTextTracks ? style.thIconCell : {}}
+        lastCellStyle={style.alignCellToRight}
       />
-      <RTableFooter
-        currentPage={currentPage}
-        setCurrentPage={setCurrentPage}
-        pagination={pagination}
+      <TableBody
+        status={state.status}
+        items={state.data.recordings}
+        loadingComponent={
+          <Loading background="transparent" text="Fetching recordingss.." />
+        }
+        renderRow={item => (
+          <RecordingItemRow
+            key={item.id}
+            item={item}
+            onDeleteAction={props?.onDeleteAction}
+            onTextTrackDownload={onTextTrackDownload}
+            showTextTracks={canAccessAllTextTracks}
+          />
+        )}
+        emptyComponent={<EmptyRecordingState />}
       />
+      {/** ERROR POPUP **/}
+      {errorSnack && (
+        <GenericPopup
+          title="Error"
+          variant="error"
+          message={errorSnack}
+          visible={true}
+          setVisible={() => setErrorSnack(undefined)}
+          onConfirm={() => setErrorSnack(undefined)}
+        />
+      )}
     </View>
   );
 }

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/room-info/useRoomInfo.tsx

@@ -63,6 +63,7 @@ export interface RoomData {
   rtmToken?: string;
   encryptionSecret?: string;
   encryptionSecretSalt?: Uint8Array;
+  encryptionMode?: number;
   screenShareUid?: string;
   screenShareToken?: string;
   agents?: AIAgentInterface[];

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {useEffect} from 'react';
 import {View, Text, TouchableOpacity} from 'react-native';
 import Tooltip from '../../atoms/Tooltip';
 import Clipboard from '../../subComponents/Clipboard';
@@ -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,50 @@ 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: any) {
+function ErrorTextTrackState({message}: {message: string}) {
   return <Text style={[style.ttime, style.pv10, style.ph20]}>{message}</Text>;
 }
 
-function STTTranscriptTable() {
+function TextTracksTable() {
+  const {getSTTs, sttState, currentPage, setCurrentPage, deleteTranscript} =
+    useFetchSTTTranscript();
+
   const {
     status,
-    stts,
-    pagination,
-    error,
-    currentPage,
-    setCurrentPage,
-    deleteTranscript,
-  } = useFetchSTTTranscript();
+    data: {stts, pagination},
+    error: fetchTranscriptError,
+  } = sttState;
 
-  // id of STT transcript to delete
-  const [sttIdToDelete, setSTTIdToDelete] = React.useState<string | undefined>(
-    undefined,
-  );
+  useEffect(() => {
+    getSTTs(currentPage);
+  }, [currentPage, getSTTs]);
 
-  // message for any download‐error popup
-  const [downloadError, setDownloadError] = React.useState<
+  // id of text-tracj to delete
+  const [textTrackIdToDelete, setTextTrackIdToDelete] = React.useState<
     string | undefined
-  >();
+  >(undefined);
+
+  // message for any download‐error popup
+  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 +247,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 +271,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 {sttModalTitleIntn} 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 sttModalTitle = useString(sttModalTitleIntn)();
+  const textTrackModalTitle = useString(textTrackModalTitleIntn)();
 
   return (
     <GenericModal
       visible={true}
       onRequestClose={() => setModalOpen(false)}
       showCloseIcon={true}
-      title={sttModalTitle}
+      title={textTrackModalTitle}
       cancelable={false}
       contentContainerStyle={style.contentContainer}>
       <View style={style.fullBody}>
-        <STTTranscriptTable />
+        <TextTracksTable />
       </View>
     </GenericModal>
   );