agora-appbuilder-core 4.1.7-beta.8 → 4.1.8-beta.1

package/template/defaultConfig.js

@@ -77,8 +77,8 @@ const DefaultConfig = {
   CHAT_ORG_NAME: '',
   CHAT_APP_NAME: '',
   CHAT_URL: '',
-  CLI_VERSION: '3.1.7-beta.8',
-  CORE_VERSION: '4.1.7-beta.8',
+  CLI_VERSION: '3.1.8-beta.1',
+  CORE_VERSION: '4.1.8-beta.1',
   DISABLE_LANDSCAPE_MODE: false,
   STT_AUTO_START: false,
   CLOUD_RECORDING_AUTO_START: false,

package/template/esbuild.rsdk.go

@@ -180,8 +180,7 @@ func rsdk(iopath *ioPaths) api.BuildResult {
 			"react",
 			"react-dom",
 			"react-router",
-			"react-router-dom",
-			"@apollo/client",
+			"react-router-dom",			
 		},
 		Define: commonBuildOpts.Define,
 		Inject: commonBuildOpts.Inject,

package/template/package.json

@@ -48,7 +48,6 @@
     "url": "https://github.com/AgoraIO-Community/app-builder-core"
   },
   "dependencies": {
-    "@apollo/client": "3.8.1",
     "@datadog/browser-logs": "^5.15.0",
     "@datadog/mobile-react-native": "^2.3.2",
     "@gorhom/bottom-sheet": "4.4.7",

package/template/src/AppWrapper.tsx

@@ -13,7 +13,6 @@ import React, {useContext} from 'react';
 import {Router} from './components/Router';
 import Navigation from './components/Navigation';
 import {StorageProvider} from './components/StorageContext';
-import GraphQLProvider from './components/GraphQLProvider';
 import {SessionProvider} from './components/SessionContext';
 import {
   ImageBackground,
@@ -89,40 +88,36 @@ const AppWrapper = (props: AppWrapperProps) => {
           {$config.DISABLE_LANDSCAPE_MODE && <BlockUI />}
           <StorageProvider>
             <LanguageProvider>
-              <GraphQLProvider>
-                <Router
-                  /*@ts-ignore Router will be memory Router in sdk*/
-                  initialEntries={[
-                    //@ts-ignore
-                    isSDK && SdkJoinState.phrase
-                      ? //@ts-ignore
-                        `/${SdkJoinState.phrase}`
-                      : '',
-                  ]}>
-                  <ToastProvider>
-                    <ToastContext.Consumer>
-                      {({isActionSheetVisible}) => {
-                        return !isActionSheetVisible ? (
-                          <ToastComponent />
-                        ) : null;
-                      }}
-                    </ToastContext.Consumer>
-                    <AuthProvider>
-                      <SessionProvider>
-                        <ColorConfigure>
-                          <DimensionProvider>
-                            <ErrorProvider>
-                              <Error />
-                              <Navigation />
-                              {props.children}
-                            </ErrorProvider>
-                          </DimensionProvider>
-                        </ColorConfigure>
-                      </SessionProvider>
-                    </AuthProvider>
-                  </ToastProvider>
-                </Router>
-              </GraphQLProvider>
+              <Router
+                /*@ts-ignore Router will be memory Router in sdk*/
+                initialEntries={[
+                  //@ts-ignore
+                  isSDK && SdkJoinState.phrase
+                    ? //@ts-ignore
+                      `/${SdkJoinState.phrase}`
+                    : '',
+                ]}>
+                <ToastProvider>
+                  <ToastContext.Consumer>
+                    {({isActionSheetVisible}) => {
+                      return !isActionSheetVisible ? <ToastComponent /> : null;
+                    }}
+                  </ToastContext.Consumer>
+                  <AuthProvider>
+                    <SessionProvider>
+                      <ColorConfigure>
+                        <DimensionProvider>
+                          <ErrorProvider>
+                            <Error />
+                            <Navigation />
+                            {props.children}
+                          </ErrorProvider>
+                        </DimensionProvider>
+                      </ColorConfigure>
+                    </SessionProvider>
+                  </AuthProvider>
+                </ToastProvider>
+              </Router>
             </LanguageProvider>
           </StorageProvider>
         </SafeAreaView>

package/template/src/auth/AuthProvider.tsx

@@ -8,7 +8,6 @@ import React, {
   useRef,
 } from 'react';
 import {useHistory, useLocation} from '../components/Router';
-import {gql, useApolloClient} from '@apollo/client';
 import {useIDPAuth} from './useIDPAuth';
 import Loading from '../subComponents/Loading';
 import useTokenAuth from './useTokenAuth';
@@ -45,14 +44,7 @@ import LocalEventEmitter, {
   LocalEventsEnum,
 } from '../rtm-events-api/LocalEvents';
 
-export const GET_USER = gql`
-  query getUser {
-    getUser {
-      name
-      email
-    }
-  }
-`;
+const GET_USER_URL = `${$config.BACKEND_ENDPOINT}/v1/user/details`;
 
 type AuthProviderProps = {
   enableAuth?: boolean;
@@ -87,7 +79,6 @@ const AuthProvider = (props: AuthProviderProps) => {
   const history = useHistory();
   const location = useLocation();
   // client
-  const apolloClient = useApolloClient();
   const {isRecordingBot} = useIsRecordingBot();
   const indexesOf = (arr, item) =>
     arr.reduce((acc, v, i) => (v === item && acc.push(i), acc), []);
@@ -324,44 +315,47 @@ const AuthProvider = (props: AuthProviderProps) => {
   async function getUserDetails() {
     const requestId = getUniqueID();
     const startReqTs = Date.now();
+    //fetch user details
+    logger.log(
+      LogSource.NetworkRest,
+      'user_details',
+      'API fetching user_details, to check if user is authenticated',
+      {
+        requestId,
+        startReqTs,
+      },
+    );
+    const token = store?.token;
     try {
-      //fetch user details
-      logger.log(
-        LogSource.NetworkRest,
-        'user_details',
-        'API fetching user_details, to check if user is authenticated',
-        {
-          requestId,
-          startReqTs,
-        },
-      );
-      const token = store?.token;
-      const res = await apolloClient.query({
-        query: GET_USER,
-        fetchPolicy: 'network-only',
-        context: {
-          headers: {
-            'X-Request-Id': requestId,
-            'X-Session-Id': logger.getSessionId(),
-            ...(token && {
-              authorization: token ? `Bearer ${token}` : '',
-            }),
-          },
+      const res = await fetch(`${GET_USER_URL}`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          'X-Request-Id': requestId,
+          'X-Session-Id': logger.getSessionId(),
+          ...(token && {
+            authorization: token ? `Bearer ${token}` : '',
+          }),
         },
       });
+      const response = await res.json();
+      if (response?.error) {
+        throw response?.error;
+      }
       const endRequestTs = Date.now();
       logger.log(
         LogSource.NetworkRest,
         'user_details',
         'API user_details query succesful. User is authenticated',
         {
-          responseData: res,
+          responseData: response,
           startReqTs,
           endRequestTs,
           latency: endRequestTs - startReqTs,
           requestId,
         },
       );
+      setLoading(false);
     } catch (error) {
       const endRequestTs = Date.now();
       logger.log(
@@ -376,9 +370,8 @@ const AuthProvider = (props: AuthProviderProps) => {
           requestId,
         },
       );
-      throw new Error(error);
-    } finally {
       setLoading(false);
+      throw new Error(error);
     }
   }
 

package/template/src/auth/IDPAuth.tsx

@@ -1,8 +1,7 @@
 import React, {useEffect} from 'react';
-import {GET_USER, useAuth} from './AuthProvider';
+import {useAuth} from './AuthProvider';
 import {useHistory, useParams} from '../components/Router';
 import Loading from '../subComponents/Loading';
-import {useApolloClient} from '@apollo/client';
 import Toast from '../../react-native-toast-message';
 import {getParamFromURL} from '../utils/common';
 import useTokenAuth from './useTokenAuth';
@@ -20,20 +19,8 @@ export const IDPAuth = () => {
   const history = useHistory();
   const {token: returnTo}: {token: string} = useParams();
   //token used as returnTo and webToken is sent on the token query param
-  const apolloClient = useApolloClient();
   const {enableTokenAuth} = useTokenAuth();
 
-  async function getUserDetails() {
-    try {
-      await apolloClient.query({
-        query: GET_USER,
-        fetchPolicy: 'network-only',
-      });
-    } catch (error) {
-      throw error;
-    }
-  }
-
   useEffect(() => {
     const token = getParamFromURL(history.location.search, 'token');
     if (token) {

package/template/src/components/Controls.tsx

@@ -103,6 +103,7 @@ import {
   toolbarItemTranscriptText,
   toolbarItemVirtualBackgroundText,
   toolbarItemWhiteboardText,
+  toolbarItemManageTranscriptText,
 } from '../language/default-labels/videoCallScreenLabels';
 import {LogSource, logger} from '../logger/AppBuilderLogger';
 import {useModal} from '../utils/useModal';
@@ -115,6 +116,7 @@ import {
   InviteToolbarItem,
   ScreenshareToolbarItem,
 } from './controls/toolbar-items';
+import ViewSTTTranscriptModal from './stt-transcript/ViewSTTTranscriptModal';
 
 export const useToggleWhiteboard = () => {
   const {
@@ -276,6 +278,7 @@ const MoreButton = (props: {fields: ToolbarMoreButtonDefaultFields}) => {
   const viewRecordingsLabel = useString<boolean>(
     toolbarItemViewRecordingText,
   )();
+  const viewSTTLabel = useString<boolean>(toolbarItemManageTranscriptText)();
   const moreButtonLabel = useString(toolbarItemMoreText)();
   const virtualBackgroundLabel = useString(toolbarItemVirtualBackgroundText)();
   const chatLabel = useString(toolbarItemChatText)();
@@ -293,6 +296,11 @@ const MoreButton = (props: {fields: ToolbarMoreButtonDefaultFields}) => {
     setModalOpen: setVRModalOpen,
     toggle: toggleVRModal,
   } = useModal();
+  const {
+    modalOpen: isSTTTranscriptModalOpen,
+    setModalOpen: setSTTTranscriptModalOpen,
+    toggle: toggleSTTTranscriptModal,
+  } = useModal();
   const moreBtnRef = useRef(null);
   const {width: globalWidth, height: globalHeight} = useWindowDimensions();
   const layouts = useLayoutsData();
@@ -330,7 +338,7 @@ const MoreButton = (props: {fields: ToolbarMoreButtonDefaultFields}) => {
 
   const {isNoiseSupressionEnabled, setNoiseSupression} = useNoiseSupression();
 
-  //AINS
+  //0. AINS
   if ($config.ENABLE_NOISE_CANCELLATION) {
     actionMenuitems.push({
       componentName: 'noise-cancellation',
@@ -354,7 +362,7 @@ const MoreButton = (props: {fields: ToolbarMoreButtonDefaultFields}) => {
   }
   //AINS
 
-  //virtual background
+  //1. virtual background
   const {isVBActive, setIsVBActive} = useVB();
 
   const toggleVB = () => {
@@ -385,7 +393,6 @@ const MoreButton = (props: {fields: ToolbarMoreButtonDefaultFields}) => {
   //virtual background
 
   //whiteboard start
-
   const {
     whiteboardRoomState,
     whiteboardActive,
@@ -472,8 +479,7 @@ const MoreButton = (props: {fields: ToolbarMoreButtonDefaultFields}) => {
       ? true
       : false;
 
-  //whiteboard ends
-
+  // 2. whiteboard ends
   if (isHost && $config.ENABLE_WHITEBOARD && isWebInternal()) {
     actionMenuitems.push({
       componentName: 'whiteboard',
@@ -515,8 +521,7 @@ const MoreButton = (props: {fields: ToolbarMoreButtonDefaultFields}) => {
     });
   }
 
-  // host can see stt options and attendee can view only when stt is enabled by a host in the channel
-
+  // 3. host can see stt options and attendee can view only when stt is enabled by a host in the channel
   if ($config.ENABLE_STT && $config.ENABLE_CAPTION) {
     actionMenuitems.push({
       componentName: 'caption',
@@ -546,7 +551,7 @@ const MoreButton = (props: {fields: ToolbarMoreButtonDefaultFields}) => {
         }
       },
     });
-
+    // 4. Meeting transcript
     if ($config.ENABLE_MEETING_TRANSCRIPT) {
       actionMenuitems.push({
         componentName: 'transcript',
@@ -583,8 +588,7 @@ const MoreButton = (props: {fields: ToolbarMoreButtonDefaultFields}) => {
     }
   }
 
-  // view recordings
-
+  // 5. view recordings
   if (isHost && $config.CLOUD_RECORDING && isWeb()) {
     actionMenuitems.push({
       componentName: 'view-recordings',
@@ -599,7 +603,7 @@ const MoreButton = (props: {fields: ToolbarMoreButtonDefaultFields}) => {
     });
   }
 
-  // Particpants
+  // 6. Particpants
   const canAccessParticipants =
     useControlPermissionMatrix('participantControl');
   if (canAccessParticipants) {
@@ -619,7 +623,8 @@ const MoreButton = (props: {fields: ToolbarMoreButtonDefaultFields}) => {
       },
     });
   }
-  // Chat
+
+  // 7. Chat
   const canAccessChat = useControlPermissionMatrix('chatControl');
   if (canAccessChat) {
     //disable chat button when BE sends error on chat
@@ -669,7 +674,7 @@ const MoreButton = (props: {fields: ToolbarMoreButtonDefaultFields}) => {
     });
   }
 
-  // Screenshare
+  // 8. Screenshare
   const canAccessScreenshare = useControlPermissionMatrix('screenshareControl');
   if (canAccessScreenshare) {
     if (
@@ -706,6 +711,7 @@ const MoreButton = (props: {fields: ToolbarMoreButtonDefaultFields}) => {
     }
   }
 
+  // 9. Recording
   if (isHost && $config.CLOUD_RECORDING) {
     actionMenuitems.push({
       hide: w => {
@@ -733,6 +739,7 @@ const MoreButton = (props: {fields: ToolbarMoreButtonDefaultFields}) => {
     });
   }
 
+  // 10. layout
   actionMenuitems.push({
     hide: w => {
       return w >= BREAKPOINTS.lg ? true : false;
@@ -767,7 +774,7 @@ const MoreButton = (props: {fields: ToolbarMoreButtonDefaultFields}) => {
     ),
   });
 
-  // Invite
+  // 11. Invite
   const canAccessInvite = useControlPermissionMatrix('inviteControl');
   if (canAccessInvite) {
     actionMenuitems.push({
@@ -787,7 +794,7 @@ const MoreButton = (props: {fields: ToolbarMoreButtonDefaultFields}) => {
     });
   }
 
-  // Settings
+  // 12.Settings
   const canAccessSettings = useControlPermissionMatrix('settingsControl');
   if (canAccessSettings) {
     actionMenuitems.push({
@@ -807,6 +814,24 @@ const MoreButton = (props: {fields: ToolbarMoreButtonDefaultFields}) => {
     });
   }
 
+  // 13. Transcripts to download
+  const canAccessAllTranscripts =
+    useControlPermissionMatrix('viewAllTranscripts');
+
+  if (canAccessAllTranscripts) {
+    actionMenuitems.push({
+      componentName: 'view-all-transcripts',
+      order: 13,
+      icon: 'transcript',
+      iconColor: $config.SECONDARY_ACTION_COLOR,
+      textColor: $config.FONT_COLOR,
+      title: viewSTTLabel,
+      onPress: () => {
+        toggleSTTTranscriptModal();
+      },
+    });
+  }
+
   useEffect(() => {
     if (isHovered) {
       setActionMenuVisible(true);
@@ -953,6 +978,11 @@ const MoreButton = (props: {fields: ToolbarMoreButtonDefaultFields}) => {
           )}
         </>
       )}
+      {canAccessAllTranscripts && isSTTTranscriptModalOpen ? (
+        <ViewSTTTranscriptModal setModalOpen={setSTTTranscriptModalOpen} />
+      ) : (
+        <></>
+      )}
       <ActionMenu
         containerStyle={globalWidth < 720 ? {width: 180} : {width: 260}}
         hoverMode={true}

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

@@ -0,0 +1,143 @@
+import {
+  StyleSheet,
+  Text,
+  View,
+  Modal,
+  TouchableWithoutFeedback,
+  ModalProps,
+  ViewStyle,
+} from 'react-native';
+import React from 'react';
+import IconButton from '../../atoms/IconButton';
+import ThemeConfig from '../../theme';
+import hexadecimalTransparency from '../../utils/hexadecimalTransparency';
+import {isMobileUA, useIsDesktop} from '../../utils/common';
+
+interface GenericModalProps extends ModalProps {
+  title?: string;
+  cancelable?: boolean;
+  showCloseIcon?: boolean;
+  contentContainerStyle?: ViewStyle;
+}
+const GenericModal = (props: GenericModalProps) => {
+  const {
+    visible,
+    onRequestClose,
+    title,
+    children,
+    cancelable = false,
+    showCloseIcon = true,
+    contentContainerStyle = {},
+    ...modalProps
+  } = props;
+
+  const isDesktop = useIsDesktop()('popup');
+
+  // Fallback Handle close
+  const handleClose = () => {
+    onRequestClose?.(undefined);
+  };
+
+  return (
+    <Modal
+      animationType="none"
+      transparent={true}
+      visible={visible}
+      onRequestClose={handleClose}>
+      <View style={[styles.centeredView, isDesktop && styles.desktopAlign]}>
+        <TouchableWithoutFeedback
+          onPress={() => {
+            cancelable && handleClose();
+          }}>
+          <View style={styles.backDrop} />
+        </TouchableWithoutFeedback>
+        <View style={[styles.modalView, contentContainerStyle]}>
+          <View style={styles.header}>
+            <Text style={styles.title}>{title}</Text>
+            {showCloseIcon && (
+              <View>
+                <IconButton
+                  hoverEffect={true}
+                  hoverEffectStyle={{
+                    backgroundColor: $config.ICON_BG_COLOR,
+                    borderRadius: 20,
+                  }}
+                  iconProps={{
+                    iconType: 'plain',
+                    iconContainerStyle: {
+                      padding: isMobileUA() ? 0 : 5,
+                    },
+                    name: 'close',
+                    tintColor: $config.SECONDARY_ACTION_COLOR,
+                  }}
+                  onPress={handleClose}
+                />
+              </View>
+            )}
+          </View>
+          {children}
+        </View>
+      </View>
+    </Modal>
+  );
+};
+
+export default GenericModal;
+
+const styles = StyleSheet.create({
+  centeredView: {
+    flex: 1,
+    position: 'relative',
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingHorizontal: 20,
+  },
+  desktopAlign: {
+    alignItems: 'center',
+  },
+  modalView: {
+    backgroundColor: $config.CARD_LAYER_1_COLOR,
+    borderWidth: 1,
+    borderColor: $config.CARD_LAYER_3_COLOR,
+    borderRadius: ThemeConfig.BorderRadius.large,
+    shadowColor: $config.HARD_CODED_BLACK_COLOR,
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.1,
+    shadowRadius: 4,
+    elevation: 5,
+    maxWidth: 680,
+    minWidth: 340,
+    height: 620,
+    maxHeight: 620,
+    zIndex: 2,
+  },
+  backDrop: {
+    zIndex: 1,
+    position: 'absolute',
+    top: 0,
+    bottom: 0,
+    left: 0,
+    right: 0,
+    backgroundColor:
+      $config.HARD_CODED_BLACK_COLOR + hexadecimalTransparency['60%'],
+  },
+  header: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'flex-start',
+    paddingVertical: 12,
+    paddingHorizontal: 20,
+    width: '100%',
+  },
+  title: {
+    color: $config.FONT_COLOR + ThemeConfig.EmphasisPlus.high,
+    fontFamily: ThemeConfig.FontFamily.sansPro,
+    fontSize: ThemeConfig.FontSize.xLarge,
+    lineHeight: 32,
+    fontWeight: '500',
+    alignSelf: 'center',
+  },
+});