agora-appbuilder-core 4.1.7 → 4.1.8-2

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

@@ -0,0 +1,306 @@
+import React, {useEffect} from 'react';
+import {View, Text, TouchableOpacity} from 'react-native';
+import Tooltip from '../../atoms/Tooltip';
+import Clipboard from '../../subComponents/Clipboard';
+import Spacer from '../../atoms/Spacer';
+import {style} from '../recordings/style';
+import {TableBody, TableFooter, TableHeader} from '../common/data-table';
+import {
+  FetchSTTTranscriptResponse,
+  useFetchSTTTranscript,
+} from './useFetchSTTTranscript';
+import {
+  capitalizeFirstLetter,
+  downloadS3Link,
+  getFormattedDateTime,
+} from '../../utils/common';
+import IconButtonWithToolTip from '../../atoms/IconButton';
+import ImageIcon from '../../atoms/ImageIcon';
+import Loading from '../../subComponents/Loading';
+import GenericPopup from '../common/GenericPopup';
+import PlatformWrapper from '../../utils/PlatformWrapper';
+
+const headers = ['Date', 'Time', 'Status', 'Actions'];
+
+interface TextTrackItemRowProps {
+  item: FetchSTTTranscriptResponse['stts'][0];
+  onDeleteAction: (id: string) => void;
+  onDownloadAction: (link: string) => void;
+}
+
+function TextTrackItemRow({
+  item,
+  onDeleteAction,
+  onDownloadAction,
+}: TextTrackItemRowProps) {
+  const [date, time] = getFormattedDateTime(item.created_at);
+  const textTrackStatus = item.status;
+
+  if (
+    textTrackStatus === 'STOPPING' ||
+    textTrackStatus === 'STARTED' ||
+    (textTrackStatus === '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 STT is ongoing. Once the meeting concludes, we'll generate
+            the link
+          </Text>
+        </View>
+      </View>
+    );
+  }
+  return (
+    <View style={style.tbrow} key={item.id}>
+      <View style={[style.td, style.plzero]}>
+        <Text style={style.ttime}>{date}</Text>
+      </View>
+      <View style={[style.td]}>
+        <Text style={style.ttime}>{time}</Text>
+      </View>
+      <View style={[style.td]}>
+        <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 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={() => {
+                        onDownloadAction(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 style={[style.pl10]}>
+                    <IconButtonWithToolTip
+                      hoverEffect={true}
+                      hoverEffectStyle={style.iconButtonHoverEffect}
+                      containerStyle={style.iconButton}
+                      iconProps={{
+                        name: 'delete',
+                        iconType: 'plain',
+                        iconSize: 20,
+                        tintColor: `${$config.SEMANTIC_ERROR}`,
+                      }}
+                      onPress={() => {
+                        //show confirmation popup
+                        onDeleteAction && onDeleteAction(item.id);
+                      }}
+                    />
+                  </View>
+                </View>
+              ))}
+            </View>
+          </View>
+        ) : (
+          <View style={(style.tactions, {marginTop: 0})}>
+            <Text style={style.placeHolder}>No text-tracks found</Text>
+          </View>
+        )}
+      </View>
+    </View>
+  );
+}
+
+function EmptyTextTrackState() {
+  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 text-tracks found for this meeting
+        </Text>
+      </View>
+    </View>
+  );
+}
+
+function ErrorTextTrackState({message}: {message: string}) {
+  return <Text style={[style.ttime, style.pv10, style.ph20]}>{message}</Text>;
+}
+
+function TextTracksTable() {
+  const {getSTTs, sttState, currentPage, setCurrentPage, deleteTranscript} =
+    useFetchSTTTranscript();
+
+  const {
+    status,
+    data: {stts, pagination},
+    error: fetchTranscriptError,
+  } = sttState;
+
+  useEffect(() => {
+    getSTTs(currentPage);
+  }, [currentPage, getSTTs]);
+
+  // 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 <ErrorTextTrackState message={fetchTranscriptError?.message} />;
+  }
+
+  const onDeleteTextTrackRecord = async (trackId: string) => {
+    try {
+      await deleteTranscript(trackId!);
+    } catch (err: any) {
+      setErrorSnack(err.message);
+    } finally {
+      setTextTrackIdToDelete(undefined);
+    }
+  };
+
+  return (
+    <>
+      <View style={style.ttable}>
+        <TableHeader columns={headers} />
+        <TableBody
+          status={status}
+          items={stts}
+          loadingComponent={
+            <Loading background="transparent" text="Fetching text-tracks.." />
+          }
+          renderRow={item => (
+            <TextTrackItemRow
+              key={item.id}
+              item={item}
+              onDeleteAction={id => {
+                setTextTrackIdToDelete(id);
+              }}
+              onDownloadAction={link => {
+                downloadS3Link(link).catch((err: Error) => {
+                  setErrorSnack(err.message || 'Download failed');
+                });
+              }}
+            />
+          )}
+          emptyComponent={<EmptyTextTrackState />}
+        />
+        <TableFooter
+          currentPage={currentPage}
+          onPageChange={setCurrentPage}
+          pagination={pagination}
+        />
+      </View>
+      {textTrackIdToDelete && (
+        <GenericPopup
+          title="Delete ? "
+          variant="error"
+          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={() => {
+            setTextTrackIdToDelete(undefined);
+          }}
+        />
+      )}
+      {/** DOWNLOAD ERROR POPUP **/}
+      {errorSnack && (
+        <GenericPopup
+          title="Error"
+          variant="error"
+          message={errorSnack}
+          visible={true}
+          setVisible={() => setErrorSnack(undefined)}
+          onConfirm={() => setErrorSnack(undefined)}
+        />
+      )}
+    </>
+  );
+}
+
+export default TextTracksTable;

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

@@ -0,0 +1,44 @@
+import React, {SetStateAction, Dispatch} from 'react';
+import {View, StyleSheet} from 'react-native';
+import {useString} from '../../utils/useString';
+import {textTrackModalTitleIntn} from '../../language/default-labels/videoCallScreenLabels';
+import GenericModal from '../common/GenericModal';
+import TextTracksTable from './TextTracksTable';
+
+interface ViewTextTracksModalProps {
+  setModalOpen: Dispatch<SetStateAction<boolean>>;
+}
+
+export default function ViewTextTracksModal(props: ViewTextTracksModalProps) {
+  const {setModalOpen} = props;
+
+  const textTrackModalTitle = useString(textTrackModalTitleIntn)();
+
+  return (
+    <GenericModal
+      visible={true}
+      onRequestClose={() => setModalOpen(false)}
+      showCloseIcon={true}
+      title={textTrackModalTitle}
+      cancelable={false}
+      contentContainerStyle={style.contentContainer}>
+      <View style={style.fullBody}>
+        <TextTracksTable />
+      </View>
+    </GenericModal>
+  );
+}
+
+const style = StyleSheet.create({
+  contentContainer: {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'flex-start',
+    flexShrink: 0,
+    width: '100%',
+  },
+  fullBody: {
+    width: '100%',
+    flex: 1,
+  },
+});

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

@@ -0,0 +1,262 @@
+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],
+  );
+
+  // 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/components/useUserPreference.tsx

@@ -24,7 +24,6 @@ import useLocalScreenShareUid from '../utils/useLocalShareScreenUid';
 import {createHook} from 'customization-implementation';
 import ChatContext from './ChatContext';
 import {filterObject, useContent, useRoomInfo, useRtc} from 'customization-api';
-import {gql, useMutation} from '@apollo/client';
 import {
   PSTNUserLabel,
   videoRoomScreenshareText,
@@ -55,15 +54,6 @@ const UserPreferenceContext =
     uids: {},
   });
 
-const UPDATE_USER_NAME_MUTATION = gql`
-  mutation updateUserName($name: String!) {
-    updateUserName(name: $name) {
-      name
-      email
-    }
-  }
-`;
-
 const UserPreferenceProvider = (props: {
   children: React.ReactNode;
   callActive: boolean;
@@ -81,7 +71,6 @@ const UserPreferenceProvider = (props: {
   const getInitialUsername = () =>
     store?.displayName ? store.displayName : '';
   const [displayName, setDisplayName] = useState(getInitialUsername());
-  const [updateUserName] = useMutation(UPDATE_USER_NAME_MUTATION);
 
   const {languageCode} = useLanguage();
   const {screenShareData} = useScreenContext();

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

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

package/template/src/logger/AppBuilderLogger.tsx

@@ -95,6 +95,7 @@ type LogType = {
     | 'channel_join_request'
     | 'channel_join_approval'
     | 'stt'
+    | 'stt-transcript'
     | 'whiteboard_get_s3_signed_url'
     | 'whiteboard_get_s3_upload_url'
     | 'whiteboard_s3_upload'