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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agora-appbuilder-core",
-  "version": "4.1.8-beta.6",
+  "version": "4.1.8-beta.8",
   "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.6',
-  CORE_VERSION: '4.1.8-beta.6',
+  CLI_VERSION: '3.1.8-beta.8',
+  CORE_VERSION: '4.1.8-beta.8',
   DISABLE_LANDSCAPE_MODE: false,
   STT_AUTO_START: false,
   CLOUD_RECORDING_AUTO_START: false,
@@ -89,7 +89,8 @@ const DefaultConfig = {
   AI_LAYOUT: 'LAYOUT_TYPE_1',
   SDK_CODEC: 'vp8',
   ENABLE_WAITING_ROOM_AUTO_APPROVAL: false,
-  ENABLE_WAITING_ROOM_AUTO_REQUEST: false
+  ENABLE_WAITING_ROOM_AUTO_REQUEST: false,
+  ENABLE_TEXT_TRACKS: true,
 };
 
 module.exports = DefaultConfig;

package/template/global.d.ts

@@ -177,6 +177,7 @@ interface ConfigInterface {
   SDK_CODEC: string;
   ENABLE_WAITING_ROOM_AUTO_APPROVAL: boolean;
   ENABLE_WAITING_ROOM_AUTO_REQUEST: boolean;
+  ENABLE_TEXT_TRACKS: boolean;
 }
 declare var $config: ConfigInterface;
 declare module 'customization' {

package/template/package.json

@@ -64,7 +64,7 @@
     "agora-extension-beauty-effect": "^1.0.2-beta",
     "agora-extension-virtual-background": "^1.1.3",
     "agora-react-native-rtm": "1.5.1",
-    "agora-rtc-sdk-ng": "4.23.3",
+    "agora-rtc-sdk-ng": "4.23.4",
     "agora-rtm-sdk": "1.5.1",
     "buffer": "^6.0.3",
     "electron-log": "4.3.5",

package/template/src/components/common/data-table.tsx

@@ -19,6 +19,7 @@ interface TableHeaderProps {
   rowStyle?: ViewStyle;
   cellStyle?: ViewStyle;
   firstCellStyle?: ViewStyle;
+  lastCellStyle?: ViewStyle;
   textStyle?: TextStyle;
 }
 
@@ -28,22 +29,27 @@ const TableHeader: React.FC<TableHeaderProps> = ({
   rowStyle,
   cellStyle,
   firstCellStyle,
+  lastCellStyle,
   textStyle,
 }) => (
   <View style={[style.thead, containerStyle]}>
     <View style={[style.throw, rowStyle]}>
-      {columns.map((col, index) => (
-        <View
-          key={col}
-          style={[
-            style.th,
-            index === 0 && style.plzero,
-            cellStyle,
-            index === 0 && firstCellStyle,
-          ]}>
-          <Text style={[style.thText, textStyle]}>{col}</Text>
-        </View>
-      ))}
+      {columns.map((col, index) => {
+        const isFirst = index === 0;
+        const isLast = index === (columns.length > 1 ? columns.length - 1 : 0);
+        return (
+          <View
+            key={col}
+            style={[
+              style.th,
+              cellStyle,
+              isFirst && firstCellStyle,
+              isLast && lastCellStyle,
+            ]}>
+            <Text style={[style.thText, textStyle]}>{col}</Text>
+          </View>
+        );
+      })}
     </View>
   </View>
 );
@@ -151,7 +157,7 @@ const TableFooter: React.FC<TableFooterProps> = ({
 
 export {TableHeader, TableFooter, TableBody};
 
-const style = StyleSheet.create({
+export const style = StyleSheet.create({
   scrollgrow: {
     flexGrow: 1,
   },
@@ -222,7 +228,7 @@ const style = StyleSheet.create({
     flex: 1,
     alignSelf: 'stretch',
     justifyContent: 'center',
-    paddingHorizontal: 12,
+    // paddingHorizontal: 12,
   },
   thText: {
     color: $config.FONT_COLOR + ThemeConfig.EmphasisPlus.medium,
@@ -249,7 +255,6 @@ const style = StyleSheet.create({
     flex: 1,
     alignSelf: 'center',
     justifyContent: 'center',
-    // height: 100,
     gap: 10,
   },
   tpreview: {
@@ -275,6 +280,8 @@ const style = StyleSheet.create({
   tactions: {
     display: 'flex',
     flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'flex-end',
   },
   tlink: {
     color: $config.PRIMARY_ACTION_BRAND_COLOR,
@@ -382,4 +389,24 @@ const style = StyleSheet.create({
   pl15: {
     paddingLeft: 15,
   },
+  // icon celles
+  tdIconCell: {
+    flex: 0,
+    flexShrink: 0,
+    alignItems: 'flex-start',
+    justifyContent: 'center',
+    minWidth: 52,
+    // paddingRight: 50 + 12,
+  },
+  thIconCell: {
+    flex: 0,
+    flexShrink: 0,
+    alignSelf: 'stretch',
+    justifyContent: 'center',
+    minWidth: 50,
+    paddingHorizontal: 12,
+  },
+  alignCellToRight: {
+    alignItems: 'flex-end',
+  },
 });

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

@@ -40,6 +40,7 @@ export const controlPermissionMatrix: Record<
     isHost &&
     $config.ENABLE_STT &&
     $config.ENABLE_MEETING_TRANSCRIPT &&
+    $config.ENABLE_TEXT_TRACKS &&
     isWeb(),
 };
 

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

@@ -0,0 +1,285 @@
+import React, {useEffect, useState} from 'react';
+import {View, Text, Linking, TouchableOpacity, StyleSheet} from 'react-native';
+import {downloadRecording, getDuration, getRecordedDateTime} from './utils';
+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 {useFetchSTTTranscript} from '../text-tracks/useFetchSTTTranscript';
+import {style} from '../common/data-table';
+import {FetchRecordingData} from '../../subComponents/recording/useRecording';
+import ImageIcon from '../../atoms/ImageIcon';
+import TextTrackItemRow from './TextTrackItemRow';
+
+interface RecordingItemRowProps {
+  item: FetchRecordingData['recordings'][0];
+  onDeleteAction: (id: string) => void;
+  onTextTrackDownload: (textTrackLink: string) => void;
+}
+export default function RecordingItemRow({
+  item,
+  onDeleteAction,
+  onTextTrackDownload,
+}: RecordingItemRowProps) {
+  const [expanded, setIsExpanded] = useState(false);
+
+  const [date, time] = getRecordedDateTime(item.created_at);
+  const recordingStatus = item.status;
+
+  const {sttRecState, getSTTsForRecording} = useFetchSTTTranscript();
+  const {
+    status,
+    error,
+    data: {stts = []},
+  } = sttRecState;
+
+  useEffect(() => {
+    if (expanded) {
+      if (item.id) {
+        getSTTsForRecording(item.id);
+      }
+    }
+  }, [expanded, item.id, getSTTsForRecording]);
+
+  if (
+    recordingStatus === 'STOPPING' ||
+    recordingStatus === 'STARTED' ||
+    (recordingStatus === 'INPROGRESS' && !item?.download_url)
+  ) {
+    return (
+      <View key={item.id} style={style.pt12}>
+        <View style={[style.infotextContainer, style.captionContainer]}>
+          <ImageIcon
+            iconSize={20}
+            iconType="plain"
+            name="info"
+            tintColor={$config.SEMANTIC_NEUTRAL}
+          />
+          <Text style={[style.captionText]}>
+            Current recording is ongoing. Once it concludes, we'll generate the
+            link
+          </Text>
+        </View>
+      </View>
+    );
+  }
+
+  // Collapsible Row
+  return (
+    <View>
+      {/* ========== PARENT ROW ========== */}
+      <View style={style.tbrow} key={item.id}>
+        <View style={style.tdIconCell}>
+          <IconButtonWithToolTip
+            hoverEffect={true}
+            hoverEffectStyle={style.iconButtonHoverEffect}
+            containerStyle={style.iconButton}
+            iconProps={{
+              name: expanded ? 'arrow-up' : 'arrow-down',
+              iconType: 'plain',
+              iconSize: 20,
+              tintColor: `${$config.FONT_COLOR}`,
+            }}
+            onPress={() => setIsExpanded(prev => !prev)}
+          />
+        </View>
+        <View style={[style.td, style.plzero]}>
+          <Text style={style.ttime}>
+            {date}
+            <br />
+            <Text style={style.ttime}>{time}</Text>
+          </Text>
+        </View>
+        <View style={[style.td]}>
+          <Text style={style.ttime}>
+            {getDuration(item.created_at, item.ended_at)}
+          </Text>
+        </View>
+        <View style={style.td}>
+          {!item.download_url ? (
+            <View style={(style.tactions, {marginTop: 0})}>
+              <Text style={style.placeHolder}>{'No recording found'}</Text>
+            </View>
+          ) : item?.download_url?.length > 0 ? (
+            <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
+                        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 style={[style.pl10]}>
+                <IconButtonWithToolTip
+                  hoverEffect={true}
+                  hoverEffectStyle={style.iconButtonHoverEffect}
+                  containerStyle={style.iconButton}
+                  iconProps={{
+                    name: 'delete',
+                    iconType: 'plain',
+                    iconSize: 20,
+                    tintColor: `${$config.SEMANTIC_ERROR}`,
+                  }}
+                  onPress={() => {
+                    onDeleteAction && onDeleteAction(item.id);
+                  }}
+                />
+              </View>
+            </View>
+          ) : (
+            <View style={(style.tactions, {marginTop: 0})}>
+              <Text style={style.placeHolder}>No recordings found</Text>
+            </View>
+          )}
+        </View>
+      </View>
+      {/* ========== CHILDREN ROW ========== */}
+      {expanded && (
+        <View style={expanedStyles.expandedContainer}>
+          <View>
+            <Text style={expanedStyles.expandedHeaderText}>Text-tracks</Text>
+          </View>
+          <View style={expanedStyles.expandedHeaderBody}>
+            {status === 'idle' || status === 'pending' ? (
+              <Text style={style.ttime}>Fetching text-tracks....</Text>
+            ) : status === 'rejected' ? (
+              <Text style={style.ttime}>
+                {error?.message ||
+                  'There was an error while fetching the text-tracks'}
+              </Text>
+            ) : status === 'resolved' && stts?.length === 0 ? (
+              <Text style={style.ttime}>
+                There are no text-tracks's for this recording
+              </Text>
+            ) : (
+              <>
+                <Text style={style.ttime}>Found {stts.length} text tracks</Text>
+                <View>
+                  {stts.map(item => (
+                    <TextTrackItemRow
+                      key={item.id}
+                      item={item}
+                      onTextTrackDownload={onTextTrackDownload}
+                    />
+                  ))}
+                </View>
+              </>
+            )}
+          </View>
+        </View>
+      )}
+    </View>
+  );
+}
+
+const expanedStyles = StyleSheet.create({
+  expandedContainer: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 5,
+    color: $config.FONT_COLOR,
+    borderColor: $config.CARD_LAYER_3_COLOR,
+    backgroundColor: $config.CARD_LAYER_2_COLOR,
+    paddingHorizontal: 12,
+    paddingVertical: 15,
+    borderRadius: 5,
+  },
+  expandedHeaderText: {
+    fontSize: 15,
+    lineHeight: 32,
+    fontWeight: '500',
+    color: $config.FONT_COLOR,
+  },
+  expandedHeaderBody: {
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'flex-start',
+  },
+});

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

@@ -1,30 +1,65 @@
 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';
+
+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 headers = ['', 'Date/Time', 'Duration', 'Actions'];
+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 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 +73,7 @@ function RecordingsDateTable(props) {
     };
   }, []);
 
-  const getRecordings = pageNumber => {
+  const getRecordings = (pageNumber: number) => {
     setState(prev => ({...prev, status: 'pending'}));
     fetchRecordings(pageNumber).then(
       response =>
@@ -47,8 +82,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 +98,53 @@ 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');
+    });
+  };
+
   return (
     <View style={style.ttable}>
-      <RTableHeader />
-      <RTableBody
-        status={status}
-        recordings={recordings}
-        onDeleteAction={props?.onDeleteAction}
+      <TableHeader
+        columns={headers}
+        firstCellStyle={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}
+          />
+        )}
+        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/text-tracks/TextTracksTable.tsx

@@ -204,16 +204,14 @@ function ErrorTextTrackState({message}: {message: string}) {
 }
 
 function TextTracksTable() {
+  const {sttState, currentPage, setCurrentPage, deleteTranscript} =
+    useFetchSTTTranscript();
+
   const {
     status,
-    stts,
-    pagination,
+    data: {stts, pagination},
     error: fetchTranscriptError,
-    currentPage,
-    setCurrentPage,
-    deleteTranscript,
-  } = useFetchSTTTranscript();
-
+  } = sttState;
   // id of text-tracj to delete
   const [textTrackIdToDelete, setTextTrackIdToDelete] = React.useState<
     string | undefined

package/template/src/components/text-tracks/useFetchSTTTranscript.tsx

@@ -5,11 +5,7 @@ import getUniqueID from '../../utils/getUniqueID';
 import {logger, LogSource} from '../../logger/AppBuilderLogger';
 
 export interface FetchSTTTranscriptResponse {
-  pagination: {
-    limit: number;
-    total: number;
-    page: number;
-  };
+  pagination: {limit: number; total: number; page: number};
   stts: {
     id: string;
     download_url: string[];
@@ -23,118 +19,114 @@ export interface FetchSTTTranscriptResponse {
 
 export type APIStatus = 'idle' | 'pending' | 'resolved' | 'rejected';
 
-export function useFetchSTTTranscript(defaultLimit = 10) {
+export function useFetchSTTTranscript() {
   const {
     data: {roomId},
   } = useRoomInfo();
   const {store} = useContext(StorageContext);
+
   const [currentPage, setCurrentPage] = useState(1);
 
-  const [state, setState] = useState<{
+  const [sttState, setSttState] = useState<{
     status: APIStatus;
     data: {
       stts: FetchSTTTranscriptResponse['stts'];
       pagination: FetchSTTTranscriptResponse['pagination'];
     };
-    error: Error;
+    error: Error | null;
   }>({
     status: 'idle',
-    data: {stts: [], pagination: {total: 0, limit: defaultLimit, page: 1}},
+    data: {stts: [], pagination: {total: 0, limit: 10, page: 1}},
     error: null,
   });
 
-  const fetchStts = useCallback(
-    async (page: number) => {
-      const requestId = getUniqueID();
-      const start = Date.now();
+  //–– by‐recording state ––
+  const [sttRecState, setSttRecState] = useState<{
+    status: APIStatus;
+    data: {stts: FetchSTTTranscriptResponse['stts']};
+    error: Error | null;
+  }>({
+    status: 'idle',
+    data: {
+      stts: [],
+    },
+    error: null,
+  });
 
-      try {
-        if (!roomId?.host) {
-          const error = new Error('room id is empty');
-          return Promise.reject(error);
-        }
-        const res = await fetch(
-          `${$config.BACKEND_ENDPOINT}/v1/stt-transcript`,
-          {
-            method: 'POST',
-            headers: {
-              'Content-Type': 'application/json',
-              authorization: store.token ? `Bearer ${store.token}` : '',
-              'X-Request-Id': requestId,
-              'X-Session-Id': logger.getSessionId(),
-            },
-            body: JSON.stringify({
-              passphrase: roomId.host,
-              limit: defaultLimit,
-              page,
-            }),
-          },
-        );
-        const json = await res.json();
-        const end = Date.now();
+  const getSTTs = useCallback(
+    (page: number) => {
+      setSttState(s => ({...s, status: 'pending', error: null}));
+      const reqId = getUniqueID();
+      const start = Date.now();
 
-        if (!res.ok) {
-          logger.error(
+      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',
-            'Fetching STT transcripts failed',
+            'Fetch STT transcripts succeeded',
             {
               json,
               start,
               end,
               latency: end - start,
-              requestId,
+              requestId: reqId,
             },
           );
-          throw new Error(json?.error?.message || 'Unknown fetch error');
-        }
-
-        logger.debug(
-          LogSource.NetworkRest,
-          'stt-transcript',
-          'Fetched STT transcripts',
-          {
-            json,
-            start,
-            end,
-            latency: end - start,
-            requestId,
-          },
-        );
-        return json;
-      } catch (err) {
-        return Promise.reject(err);
-      }
-    },
-    [roomId.host, store.token, defaultLimit],
-  );
-
-  const getSTTs = useCallback(
-    (page: number) => {
-      setState(s => ({...s, status: 'pending'}));
-      fetchStts(page).then(
-        data =>
-          setState({
+          return json as FetchSTTTranscriptResponse;
+        })
+        .then(({stts = [], pagination = {total: 0, limit: 10, page}}) => {
+          setSttState({
             status: 'resolved',
-            data: {
-              stts: data.stts || [],
-              pagination: data.pagination || {
-                total: 0,
-                limit: defaultLimit,
-                page: 1,
-              },
-            },
+            data: {stts, pagination},
             error: null,
-          }),
-        err => setState(s => ({...s, status: 'rejected', error: err})),
-      );
+          });
+        })
+        .catch(err => {
+          setSttState(s => ({...s, status: 'rejected', error: err}));
+        });
     },
-    [fetchStts, defaultLimit],
+    [roomId.host, store.token],
   );
 
+  useEffect(() => {
+    getSTTs(currentPage);
+  }, [currentPage, getSTTs]);
+
+  // Delete stts
   const deleteTranscript = useCallback(
     async (id: string) => {
-      const requestId = getUniqueID();
+      const reqId = getUniqueID();
       const start = Date.now();
 
       const res = await fetch(
@@ -148,7 +140,7 @@ export function useFetchSTTTranscript(defaultLimit = 10) {
           headers: {
             'Content-Type': 'application/json',
             authorization: store.token ? `Bearer ${store.token}` : '',
-            'X-Request-Id': requestId,
+            'X-Request-Id': reqId,
             'X-Session-Id': logger.getSessionId(),
           },
         },
@@ -159,44 +151,33 @@ export function useFetchSTTTranscript(defaultLimit = 10) {
         logger.error(
           LogSource.NetworkRest,
           'stt-transcript',
-          'Deleting STT transcripts failed',
-          {
-            json: '',
-            start,
-            end,
-            latency: end - start,
-            requestId,
-          },
+          'Delete transcript failed',
+          {start, end, latency: end - start, requestId: reqId},
         );
         throw new Error(`Delete failed (${res.status})`);
       }
       logger.debug(
         LogSource.NetworkRest,
         'stt-transcript',
-        'Deleted STT transcripts',
-        {
-          json: '',
-          start,
-          end,
-          latency: end - start,
-          requestId,
-        },
+        'Delete transcript succeeded',
+        {start, end, latency: end - start, requestId: reqId},
       );
-      // optimistic update local state:
-      setState(prev => {
+
+      // 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);
-        // if we just removed the *last* item on this page, go back a page
         let newPage = prev.data.pagination.page;
         if (prev.data.stts.length === 1 && newPage > 1) {
-          newPage = newPage - 1;
+          newPage--;
         }
         return {
           ...prev,
           data: {
             stts: newStts,
+
             pagination: {
               ...prev.data.pagination,
               total: newTotal,
@@ -206,20 +187,80 @@ export function useFetchSTTTranscript(defaultLimit = 10) {
         };
       });
     },
-    [roomId.host, store?.token],
+    [roomId.host, store.token],
   );
 
-  useEffect(() => {
-    getSTTs(currentPage);
-  }, [currentPage, getSTTs]);
+  //–– 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 {
-    status: state.status as APIStatus,
-    stts: state.data.stts,
-    pagination: state.data.pagination,
-    error: state.error,
+    // stt list
+    sttState,
+    getSTTs,
     currentPage,
     setCurrentPage,
+    // STT per recording
+    sttRecState,
+    getSTTsForRecording,
+    // delete
     deleteTranscript,
   };
 }

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

@@ -67,16 +67,31 @@ const getFrontendUrl = (url: string) => {
   return url;
 };
 
-interface RecordingsData {
-  recordings: [];
-  pagination: {};
+export type APIStatus = 'idle' | 'pending' | 'resolved' | 'rejected';
+
+export interface FetchRecordingData {
+  pagination: {
+    limit: number;
+    total: number;
+    page: number;
+  };
+  recordings: {
+    id: string;
+    download_url: string[];
+    title: string;
+    product_name: string;
+    status: 'COMPLETED' | 'STARTED' | 'INPROGRESS' | 'STOPPING';
+    created_at: string;
+    ended_at: string;
+  }[];
 }
+
 export interface RecordingContextInterface {
   startRecording: () => void;
   stopRecording: () => void;
   isRecordingActive: boolean;
   inProgress: boolean;
-  fetchRecordings?: (page: number) => Promise<RecordingsData>;
+  fetchRecordings?: (page: number) => Promise<FetchRecordingData>;
   deleteRecording?: (id: number) => Promise<boolean>;
 }