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

package/package.json

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

package/template/defaultConfig.js

@@ -77,8 +77,8 @@ const DefaultConfig = {
   CHAT_ORG_NAME: '',
   CHAT_APP_NAME: '',
   CHAT_URL: '',
-  CLI_VERSION: '3.1.8-beta.5',
-  CORE_VERSION: '4.1.8-beta.5',
+  CLI_VERSION: '3.1.8-beta.7',
+  CORE_VERSION: '4.1.8-beta.7',
   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/src/components/Controls.tsx

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

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

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

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

@@ -151,7 +151,7 @@ const TableFooter: React.FC<TableFooterProps> = ({
 
 export {TableHeader, TableFooter, TableBody};
 
-const style = StyleSheet.create({
+export const style = StyleSheet.create({
   scrollgrow: {
     flexGrow: 1,
   },
@@ -249,7 +249,6 @@ const style = StyleSheet.create({
     flex: 1,
     alignSelf: 'center',
     justifyContent: 'center',
-    // height: 100,
     gap: 10,
   },
   tpreview: {
@@ -275,6 +274,8 @@ const style = StyleSheet.create({
   tactions: {
     display: 'flex',
     flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'flex-end',
   },
   tlink: {
     color: $config.PRIMARY_ACTION_BRAND_COLOR,
@@ -382,4 +383,21 @@ const style = StyleSheet.create({
   pl15: {
     paddingLeft: 15,
   },
+  // icon celles
+  tdIconCell: {
+    flex: 0,
+    flexShrink: 0,
+    alignItems: 'flex-start',
+    justifyContent: 'center',
+    minWidth: 50,
+    paddingRight: 50 + 12,
+  },
+  thIconCell: {
+    flex: 0,
+    flexShrink: 0,
+    alignSelf: 'stretch',
+    justifyContent: 'center',
+    minWidth: 50,
+    paddingHorizontal: 12,
+  },
 });

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

@@ -15,7 +15,7 @@ export type ControlPermissionKey =
   | 'participantControl'
   | 'screenshareControl'
   | 'settingsControl'
-  | 'viewAllTranscripts';
+  | 'viewAllTextTracks';
 
 /**
  * ControlPermissionRule defines the properties used to evaluate permission rules.
@@ -36,10 +36,11 @@ export const controlPermissionMatrix: Record<
   settingsControl: ({preference}) => !preference.disableSettings,
   screenshareControl: ({preference}) =>
     $config.SCREEN_SHARING && !preference.disableScreenShare,
-  viewAllTranscripts: ({isHost}) =>
+  viewAllTextTracks: ({isHost}) =>
     isHost &&
     $config.ENABLE_STT &&
     $config.ENABLE_MEETING_TRANSCRIPT &&
+    $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;
+  console.log('supriya sttRecState', 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}>STT's</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 STT'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,49 @@ 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}
-      />
-      <RTableFooter
-        currentPage={currentPage}
-        setCurrentPage={setCurrentPage}
-        pagination={pagination}
+      <TableHeader columns={headers} firstCellStyle={style.thIconCell} />
+      <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>
   );
 }