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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agora-appbuilder-core",
-  "version": "4.1.8-beta.7",
+  "version": "4.1.8-beta.9",
   "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.7',
-  CORE_VERSION: '4.1.8-beta.7',
+  CLI_VERSION: '3.1.8-beta.9',
+  CORE_VERSION: '4.1.8-beta.9',
   DISABLE_LANDSCAPE_MODE: false,
   STT_AUTO_START: false,
   CLOUD_RECORDING_AUTO_START: false,

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>
 );
@@ -222,7 +228,7 @@ export const style = StyleSheet.create({
     flex: 1,
     alignSelf: 'stretch',
     justifyContent: 'center',
-    paddingHorizontal: 12,
+    // paddingHorizontal: 12,
   },
   thText: {
     color: $config.FONT_COLOR + ThemeConfig.EmphasisPlus.medium,
@@ -389,8 +395,8 @@ export const style = StyleSheet.create({
     flexShrink: 0,
     alignItems: 'flex-start',
     justifyContent: 'center',
-    minWidth: 50,
-    paddingRight: 50 + 12,
+    minWidth: 52,
+    // paddingRight: 50 + 12,
   },
   thIconCell: {
     flex: 0,
@@ -400,4 +406,7 @@ export const style = StyleSheet.create({
     minWidth: 50,
     paddingHorizontal: 12,
   },
+  alignCellToRight: {
+    alignItems: 'flex-end',
+  },
 });

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

@@ -16,11 +16,13 @@ interface RecordingItemRowProps {
   item: FetchRecordingData['recordings'][0];
   onDeleteAction: (id: string) => void;
   onTextTrackDownload: (textTrackLink: string) => void;
+  showTextTracks: boolean;
 }
 export default function RecordingItemRow({
   item,
   onDeleteAction,
   onTextTrackDownload,
+  showTextTracks = false,
 }: RecordingItemRowProps) {
   const [expanded, setIsExpanded] = useState(false);
 
@@ -33,7 +35,7 @@ export default function RecordingItemRow({
     error,
     data: {stts = []},
   } = sttRecState;
-  console.log('supriya sttRecState', sttRecState);
+
   useEffect(() => {
     if (expanded) {
       if (item.id) {
@@ -70,20 +72,22 @@ export default function RecordingItemRow({
     <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>
+        {showTextTracks && (
+          <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}
@@ -223,7 +227,7 @@ export default function RecordingItemRow({
       {expanded && (
         <View style={expanedStyles.expandedContainer}>
           <View>
-            <Text style={expanedStyles.expandedHeaderText}>STT's</Text>
+            <Text style={expanedStyles.expandedHeaderText}>Text-tracks</Text>
           </View>
           <View style={expanedStyles.expandedHeaderBody}>
             {status === 'idle' || status === 'pending' ? (
@@ -235,7 +239,7 @@ export default function RecordingItemRow({
               </Text>
             ) : status === 'resolved' && stts?.length === 0 ? (
               <Text style={style.ttime}>
-                There are no STT's for this recording
+                There are no text-tracks's for this recording
               </Text>
             ) : (
               <>

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

@@ -13,6 +13,7 @@ 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 (
@@ -34,7 +35,6 @@ function EmptyRecordingState() {
   );
 }
 
-const headers = ['', 'Date/Time', 'Duration', 'Actions'];
 const defaultPageNumber = 1;
 
 function RecordingsDateTable(props) {
@@ -57,6 +57,8 @@ function RecordingsDateTable(props) {
   const [currentPage, setCurrentPage] = useState(defaultPageNumber);
 
   const {fetchRecordings} = useRecording();
+  const canAccessAllTextTracks =
+    useControlPermissionMatrix('viewAllTextTracks');
 
   // message for any download‐error popup
   const [errorSnack, setErrorSnack] = React.useState<string | undefined>();
@@ -111,9 +113,17 @@ function RecordingsDateTable(props) {
     });
   };
 
+  const headers = canAccessAllTextTracks
+    ? ['', 'Date/Time', 'Duration', 'Actions']
+    : ['Date/Time', 'Duration', 'Actions'];
+
   return (
     <View style={style.ttable}>
-      <TableHeader columns={headers} firstCellStyle={style.thIconCell} />
+      <TableHeader
+        columns={headers}
+        firstCellStyle={canAccessAllTextTracks ? style.thIconCell : {}}
+        lastCellStyle={style.alignCellToRight}
+      />
       <TableBody
         status={state.status}
         items={state.data.recordings}
@@ -126,6 +136,7 @@ function RecordingsDateTable(props) {
             item={item}
             onDeleteAction={props?.onDeleteAction}
             onTextTrackDownload={onTextTrackDownload}
+            showTextTracks={canAccessAllTextTracks}
           />
         )}
         emptyComponent={<EmptyRecordingState />}