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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agora-appbuilder-core",
-  "version": "4.1.8-beta.1",
+  "version": "4.1.8-beta.10",
   "description": "React Native template for RTE app builder",
   "main": "index.js",
   "files": [
@@ -9,7 +9,7 @@
   ],
   "scripts": {
     "vercel-build": "npm run dev-setup && cd template && npm run web:build && cd .. && npm run copy-vercel",
-    "uikit": "rm -rf template/agora-rn-uikit && git clone https://github.com/AgoraIO-Community/appbuilder-ui-kit.git template/agora-rn-uikit && cd template/agora-rn-uikit && git checkout appbuilder-uikit-3.1.4",
+    "uikit": "rm -rf template/agora-rn-uikit && git clone https://github.com/AgoraIO-Community/appbuilder-ui-kit.git template/agora-rn-uikit && cd template/agora-rn-uikit && git checkout appbuilder-uikit-3.1.8",
     "deps": "cd template && npm i --force",
     "dev-setup": "npm run uikit && npm run deps && node devSetup.js",
     "web-build": "cd template && npm run web:build && cd .. && npm run copy-vercel",

package/template/agora-rn-uikit/src/Contexts/PropsContext.tsx

@@ -142,7 +142,7 @@ export interface RtcPropsInterface {
   callActive?: boolean;
   encryption?: {
     key: string;
-    mode: EncryptionMode.Aes128Gcm2 | EncryptionMode.Aes256Gcm2;
+    mode: EncryptionMode.Aes128Xts | EncryptionMode.Aes256Gcm2;
     salt: number[];
   };
   // commented for v1 release

package/template/agora-rn-uikit/src/Rtc/Join.tsx

@@ -51,18 +51,27 @@ const Join: React.FC<{
     const videoState = defaultContent[maxUid]?.video;
     async function join() {
       if (
-        rtcProps?.encryption &&
-        rtcProps?.encryption.key &&
-        rtcProps.encryption.mode &&
-        rtcProps.encryption.salt
+      //  rtcProps?.encryption &&
+     //   rtcProps?.encryption.key &&
+        rtcProps?.encryption?.mode
+     //   rtcProps.encryption.salt
       ) {
         try {
-          await engine.enableEncryption(true, {
-            encryptionKey: rtcProps?.encryption.key,
-            encryptionMode: rtcProps?.encryption.mode,
-            encryptionKdfSalt: rtcProps?.encryption.salt,
+          console.log(
+            'ui kit setting encryption mode to ',
+            rtcProps?.encryption?.mode,
+          );
+          const encryptionConfig = {
+            encryptionKey: rtcProps?.encryption?.key,
+            encryptionMode: rtcProps?.encryption?.mode,
             datastreamEncryptionEnabled: true,
-          });
+            ...(rtcProps?.encryption?.mode == 1
+              ? {}
+              : {
+                  encryptionKdfSalt: rtcProps?.encryption?.salt,
+                }),
+          };
+          await engine.enableEncryption(true, encryptionConfig);
         } catch (error) {
           console.warn('encryption error', error);
         }

package/template/bridge/rtc/webNg/RtcEngine.ts

@@ -1466,13 +1466,13 @@ export default class RtcEngine {
         this.client.setEncryptionConfig(
           mode,
           config.encryptionKey,
-          config.encryptionKdfSalt,
+          config.encryptionMode === 1? null:config.encryptionKdfSalt,
           true, // encryptDataStream
         ),
         this.screenClient.setEncryptionConfig(
           mode,
           config.encryptionKey,
-          config.encryptionKdfSalt,
+          config.encryptionMode === 1? null:config.encryptionKdfSalt,
           true, // encryptDataStream
         ),
       ]);

package/template/defaultConfig.js

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

@@ -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

@@ -15,7 +15,7 @@ export type ControlPermissionKey =
   | 'participantControl'
   | 'screenshareControl'
   | 'settingsControl'
-  | 'viewAllTranscripts';
+  | 'viewAllTextTracks';
 
 /**
  * ControlPermissionRule defines the properties used to evaluate permission rules.
@@ -36,9 +36,12 @@ export const controlPermissionMatrix: Record<
   settingsControl: ({preference}) => !preference.disableSettings,
   screenshareControl: ({preference}) =>
     $config.SCREEN_SHARING && !preference.disableScreenShare,
-  viewAllTranscripts: ({isHost}) =>
-    $config.ENABLE_STT && $config.ENABLE_MEETING_TRANSCRIPT && isWeb(),
-  // isHost,
+  viewAllTextTracks: ({isHost}) =>
+    isHost &&
+    $config.ENABLE_STT &&
+    $config.ENABLE_MEETING_TRANSCRIPT &&
+    $config.ENABLE_TEXT_TRACKS &&
+    isWeb(),
 };
 
 export const useControlPermissionMatrix = (

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

@@ -0,0 +1,289 @@
+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;
+  showTextTracks: boolean;
+}
+export default function RecordingItemRow({
+  item,
+  onDeleteAction,
+  onTextTrackDownload,
+  showTextTracks = false,
+}: 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}>
+        {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}
+            <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',
+  },
+});