agora-appbuilder-core 3.0.13 → 3.0.28-beta-9

package/template/src/components/chat-ui/useChatUIControls.tsx

@@ -0,0 +1,132 @@
+/*
+********************************************
+ Copyright © 2021 Agora Lab, Inc., all rights reserved.
+ AppBuilder and all associated components, source code, APIs, services, and documentation 
+ (the “Materials”) are owned by Agora Lab, Inc. and its licensors. The Materials may not be 
+ accessed, used, modified, or distributed for any purpose without a license from Agora Lab, Inc.  
+ Use without a license or in violation of any license terms and conditions (including use for 
+ any purpose competitive to Agora Lab, Inc.’s business) is strictly prohibited. For more 
+ information visit https://appbuilder.agora.io. 
+*********************************************
+*/
+import {createHook} from 'customization-implementation';
+import React, {SetStateAction, useState} from 'react';
+import {UidType} from '../../../agora-rn-uikit';
+
+export enum ChatType {
+  Group,
+  //todo confirm memberlist with vineeth
+  MemberList,
+  Private,
+}
+
+export enum UploadStatus {
+  NOT_STARTED = 'notStarted',
+  IN_PROGRESS = 'inProgress',
+  SUCCESS = 'success',
+  FAILURE = 'failure',
+}
+
+export interface File {
+  file_id: string;
+  file_length: number;
+  file_ext: string;
+  file_url: string;
+  file_name: string;
+  file_type: string;
+  file_obj: object;
+  upload_status: UploadStatus;
+}
+
+export interface ChatUIControlsInterface {
+  chatType: ChatType;
+  privateChatUser: UidType;
+  inputActive?: boolean;
+  setChatType: (chatType: ChatType) => void;
+  setPrivateChatUser: React.Dispatch<SetStateAction<UidType>>;
+  setInputActive: React.Dispatch<SetStateAction<boolean>>;
+  message: string;
+  setMessage: React.Dispatch<SetStateAction<string>>;
+  inputHeight: number;
+  setInputHeight: React.Dispatch<SetStateAction<number>>;
+  showEmojiPicker: boolean;
+  setShowEmojiPicker: React.Dispatch<SetStateAction<boolean>>;
+  uploadStatus: UploadStatus; // for mobile, where only one attchment per message sent
+  setUploadStatus: React.Dispatch<SetStateAction<UploadStatus>>;
+  uploadedFiles: File[];
+  setUploadedFiles: React.Dispatch<SetStateAction<File[]>>;
+}
+
+const ChatUIControlsContext = React.createContext<ChatUIControlsInterface>({
+  chatType: ChatType.Group,
+  privateChatUser: 0,
+  message: '',
+  setChatType: () => {},
+  setPrivateChatUser: () => {},
+  setMessage: () => {},
+  inputActive: false,
+  inputHeight: 0,
+  setInputHeight: () => {},
+  setInputActive: () => {},
+  showEmojiPicker: false,
+  setShowEmojiPicker: () => {},
+  uploadStatus: UploadStatus.NOT_STARTED,
+  setUploadStatus: () => {},
+  uploadedFiles: [],
+  setUploadedFiles: () => {},
+});
+
+interface ChatUIControlsProviderProps {
+  children: React.ReactNode;
+}
+
+export const MIN_HEIGHT = 43;
+export const MAX_HEIGHT = 92;
+export const LINE_HEIGHT = 17;
+export const MAX_UPLOAD_SIZE = 10; //MB
+export const MAX_TEXT_MESSAGE_SIZE = 5; //KB
+export const MAX_FILES_UPLOAD = 5;
+
+const ChatUIControlsProvider = (props: ChatUIControlsProviderProps) => {
+  const [chatType, setChatType] = useState<ChatType>(ChatType.Group);
+  const [inputActive, setInputActive] = useState(false);
+  const [privateChatUser, setPrivateChatUser] = useState<UidType>(0);
+  const [message, setMessage] = useState('');
+  const [showEmojiPicker, setShowEmojiPicker] = useState(false);
+  const [uploadStatus, setUploadStatus] = useState<UploadStatus>(
+    UploadStatus.NOT_STARTED,
+  );
+  const [uploadedFiles, setUploadedFiles] = useState<File[]>([]);
+  const [inputHeight, setInputHeight] = React.useState(MIN_HEIGHT);
+
+  return (
+    <ChatUIControlsContext.Provider
+      value={{
+        chatType,
+        setChatType,
+        privateChatUser,
+        setPrivateChatUser,
+        message,
+        setMessage,
+        inputHeight,
+        setInputHeight,
+        inputActive,
+        setInputActive,
+        showEmojiPicker,
+        setShowEmojiPicker,
+        uploadStatus,
+        setUploadStatus,
+        uploadedFiles,
+        setUploadedFiles,
+      }}>
+      {props.children}
+    </ChatUIControlsContext.Provider>
+  );
+};
+
+/**
+ * The ChatUIControl app state governs the chat ui.
+ */
+const useChatUIControls = createHook(ChatUIControlsContext);
+
+export {ChatUIControlsProvider, useChatUIControls};

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

@@ -10,11 +10,21 @@
 *********************************************
 */
 
-import React, {useContext, useState} from 'react';
+import React, {useContext, useEffect, useState} from 'react';
+import Toast from '../../../react-native-toast-message';
 import Error from '../../subComponents/Error';
 type ErrorType = {
   name: string;
   message: string;
+  networkError?: {
+    name?: string;
+    result?: {
+      error?: {
+        code?: number;
+        message?: string;
+      };
+    };
+  };
 };
 type ErrorContextType = {
   error: ErrorType | undefined;
@@ -44,11 +54,31 @@ const ErrorProvider = (props: {children: React.ReactNode}) => {
 
 const CommonError: React.FC = () => {
   const {error} = useContext(ErrorContext);
-  return error && (error.name || error.message) ? (
-    <Error error={error} showBack={true} />
-  ) : (
-    <></>
-  );
+  useEffect(() => {
+    if (
+      error?.networkError?.name ||
+      error?.networkError?.result?.error?.message ||
+      error?.name ||
+      error?.message
+    ) {
+      Toast.show({
+        leadingIconName: 'alert',
+        type: 'error',
+        text1: error?.networkError?.name || error.name,
+        text2: error?.networkError?.result?.error?.message || error.message,
+        visibilityTime: 1000 * 10,
+        primaryBtn: null,
+        secondaryBtn: null,
+        leadingIcon: null,
+      });
+    }
+  }, [error]);
+  return <></>;
+  // return error && (error.name || error.message) ? (
+  //    <Error error={error} showBack={true} />
+  // ) : (
+  //   <></>
+  // );
 };
 export {ErrorContext, ErrorProvider};
 export default CommonError;

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

@@ -11,26 +11,27 @@
 */
 
 import React from 'react';
-import {View, StyleSheet} from 'react-native';
-import Logo from '../../subComponents/Logo';
+import {StyleSheet, Image} from 'react-native';
 import {useHasBrandLogo} from '../../utils/common';
-
-const CommonLogo: React.FC = () => {
+const Logo: React.FC = () => {
   const hasBrandLogo = useHasBrandLogo();
+  const hasLogo = hasBrandLogo();
+  if (!hasLogo) {
+    return null;
+  }
+
   return (
-    <View style={style.nav}>
-      {hasBrandLogo() && <Logo />}
-      {/* <OpenInNativeButton /> */}
-    </View>
+    <Image
+      source={{uri: $config.LOGO}}
+      style={style.logo}
+      resizeMode="contain"
+    />
   );
 };
-export default CommonLogo;
+export default Logo;
 const style = StyleSheet.create({
-  nav: {
-    flex: 1,
-    width: '100%',
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
+  logo: {
+    width: 78,
+    height: 26,
   },
 });

package/template/src/components/contexts/LiveStreamDataContext.tsx

@@ -1,12 +1,18 @@
 import {UidType} from '../../../agora-rn-uikit';
-import React, {createContext, useState, useContext} from 'react';
+import React, {
+  createContext,
+  useState,
+  useContext,
+  useReducer,
+  useEffect,
+} from 'react';
 import {createHook} from 'customization-implementation';
 import LiveStreamContext, {
   raiseHandListInterface,
 } from '../../components/livestream';
-import {ClientRole, useLocalUid} from '../../../agora-rn-uikit';
+import {ClientRoleType, useLocalUid} from '../../../agora-rn-uikit';
 import {filterObject} from '../../utils';
-import {useRender} from 'customization-api';
+import {useContent} from 'customization-api';
 
 export interface LiveStreamDataObjectInterface {
   [key: number]: {
@@ -30,44 +36,44 @@ interface ScreenShareProviderProps {
   children: React.ReactNode;
 }
 const LiveStreamDataProvider = (props: ScreenShareProviderProps) => {
-  const {renderList} = useRender();
+  const {defaultContent, activeUids} = useContent();
   const {raiseHandList} = useContext(LiveStreamContext);
   const [hostUids, setHostUids] = useState<UidType[]>([]);
   const [audienceUids, setAudienceUids] = useState<UidType[]>([]);
 
   React.useEffect(() => {
-    if (Object.keys(renderList).length !== 0) {
+    if (Object.keys(defaultContent).length !== 0) {
       const hostList = filterObject(
-        renderList,
+        defaultContent,
         ([k, v]) =>
-          (v?.type === 'rtc' ||
-            v?.type === 'live' ||
-            (v?.type === 'screenshare' && v?.video == 1)) &&
+          (v?.type === 'rtc' || v?.type === 'live') && //||
+          //(v?.type === 'screenshare' && v?.video == 1)
           (raiseHandList[k]
-            ? raiseHandList[k]?.role == ClientRole.Broadcaster
+            ? raiseHandList[k]?.role == ClientRoleType.ClientRoleBroadcaster
             : true) &&
-          !v?.offline,
+          !v?.offline &&
+          activeUids.indexOf(v?.uid) !== -1,
       );
       const audienceList = filterObject(
-        renderList,
+        defaultContent,
         ([k, v]) =>
           (v?.type === 'rtc' || v?.type === 'live') &&
-          raiseHandList[k]?.role == ClientRole.Audience &&
+          raiseHandList[k]?.role == ClientRoleType.ClientRoleAudience &&
           !v.offline,
       );
-      const hUids = Object.keys(hostList).map((uid) => parseInt(uid));
-      const aUids = Object.keys(audienceList).map((uid) => parseInt(uid));
+      const hUids = Object.keys(hostList).map(uid => parseInt(uid));
+      const aUids = Object.keys(audienceList).map(uid => parseInt(uid));
 
       setHostUids(hUids);
       setAudienceUids(aUids);
     }
-  }, [renderList, raiseHandList]);
+  }, [defaultContent, raiseHandList]);
 
   return (
     <LiveStreamDataContext.Provider
       value={{
         liveStreamData: raiseHandList,
-        hostUids,
+        hostUids: hostUids,
         audienceUids,
       }}>
       {props.children}

package/template/src/components/contexts/ScreenShareContext.tsx

@@ -12,16 +12,21 @@ export interface ScreenShareObjectInterface {
   [key: string | number]: {
     name: string;
     isActive: boolean;
+    isExpanded?: boolean; //only used in mobile/mobile web
     ts: number;
   };
 }
 export interface ScreenShareContextInterface {
   screenShareData: ScreenShareObjectInterface;
   setScreenShareData: Dispatch<SetStateAction<ScreenShareObjectInterface>>;
+  isScreenShareOnFullView: boolean;
+  setScreenShareOnFullView: Dispatch<SetStateAction<boolean>>;
 }
 const ScreenShareContext = createContext<ScreenShareContextInterface>({
   screenShareData: {},
   setScreenShareData: () => {},
+  isScreenShareOnFullView: false,
+  setScreenShareOnFullView: () => {},
 });
 
 interface ScreenShareProviderProps {
@@ -29,17 +34,26 @@ interface ScreenShareProviderProps {
 }
 const ScreenShareProvider = (props: ScreenShareProviderProps) => {
   const {rtcProps} = useContext(PropsContext);
+  const [isScreenShareOnFullView, setScreenShareOnFullView] = useState(false);
   const [screenShareData, setScreenShareData] =
     useState<ScreenShareObjectInterface>({
+      //@ts-ignore
       [rtcProps?.screenShareUid]: {
         name: '',
         isActive: false,
+        isExpanded: false,
         ts: 0,
       },
     });
 
   return (
-    <ScreenShareContext.Provider value={{screenShareData, setScreenShareData}}>
+    <ScreenShareContext.Provider
+      value={{
+        screenShareData,
+        setScreenShareData,
+        isScreenShareOnFullView,
+        setScreenShareOnFullView,
+      }}>
       {props.children}
     </ScreenShareContext.Provider>
   );

package/template/src/components/contexts/VideoMeetingDataContext.tsx

@@ -1,10 +1,18 @@
-import React, {createContext, useState, useEffect, useContext} from 'react';
+import React, {
+  createContext,
+  useState,
+  useEffect,
+  useContext,
+  useReducer,
+  useRef,
+} from 'react';
 import {createHook} from 'customization-implementation';
 import {UidType, useLocalUid} from '../../../agora-rn-uikit';
-import {useMeetingInfo} from '../meeting-info/useMeetingInfo';
-import events, {EventPersistLevel} from '../../rtm-events-api';
+import {useRoomInfo} from '../room-info/useRoomInfo';
+import events, {PersistanceLevel} from '../../rtm-events-api';
 import {EventNames} from '../../rtm-events';
 import ChatContext from '../ChatContext';
+import {useContent} from 'customization-api';
 
 export interface VideoMeetingDataInterface {
   hostUids: UidType[];
@@ -21,11 +29,23 @@ interface VideoMeetingDataProviderProps {
 const VideoMeetingDataProvider = (props: VideoMeetingDataProviderProps) => {
   const {
     data: {isHost},
-  } = useMeetingInfo();
+  } = useRoomInfo();
+  const {activeUids} = useContent();
   const {hasUserJoinedRTM} = useContext(ChatContext);
   const localUid = useLocalUid();
   const [hostUids, setHostUids] = useState<UidType[]>([]);
   const [attendeeUids, setAttendeeUids] = useState<UidType[]>([]);
+  const [, forceUpdate] = useReducer((x) => x + 1, 0);
+  const hostUidsRef = useRef({hostUids});
+  const attendeeUidsRef = useRef({attendeeUids});
+
+  useEffect(() => {
+    hostUidsRef.current.hostUids = hostUids;
+  }, [hostUids]);
+
+  useEffect(() => {
+    attendeeUidsRef.current.attendeeUids = attendeeUids;
+  }, [attendeeUids]);
 
   useEffect(() => {
     //set local uid
@@ -36,8 +56,8 @@ const VideoMeetingDataProvider = (props: VideoMeetingDataProviderProps) => {
     events.on(EventNames.VIDEO_MEETING_HOST, (data) => {
       const payload = JSON.parse(data?.payload);
       const hostUid = payload?.uid;
-      if (hostUid && hostUids.indexOf(hostUid) === -1) {
-        setHostUids((prevState) => [...prevState, hostUid]);
+      if (hostUid && hostUidsRef?.current?.hostUids.indexOf(hostUid) === -1) {
+        setHostUids([...hostUidsRef?.current?.hostUids, hostUid]);
       }
     });
 
@@ -45,8 +65,14 @@ const VideoMeetingDataProvider = (props: VideoMeetingDataProviderProps) => {
     events.on(EventNames.VIDEO_MEETING_ATTENDEE, (data) => {
       const payload = JSON.parse(data?.payload);
       const attendeeUid = payload?.uid;
-      if (attendeeUid && attendeeUids.indexOf(attendeeUid) === -1) {
-        setAttendeeUids((prevState) => [...prevState, attendeeUid]);
+      if (
+        attendeeUid &&
+        attendeeUidsRef?.current?.attendeeUids?.indexOf(attendeeUid) === -1
+      ) {
+        setAttendeeUids([
+          ...attendeeUidsRef?.current?.attendeeUids,
+          attendeeUid,
+        ]);
       }
     });
 
@@ -65,16 +91,20 @@ const VideoMeetingDataProvider = (props: VideoMeetingDataProviderProps) => {
           ? EventNames.VIDEO_MEETING_HOST
           : EventNames.VIDEO_MEETING_ATTENDEE,
         JSON.stringify({uid: localUid}),
-        EventPersistLevel.LEVEL2,
+        PersistanceLevel.Sender,
       );
     }
   }, [isHost, hasUserJoinedRTM]);
 
+  useEffect(() => {
+    forceUpdate();
+  }, [activeUids]);
+
   return (
     <VideoMeetingData.Provider
       value={{
-        hostUids,
-        attendeeUids,
+        hostUids: hostUids.filter((i) => activeUids.indexOf(i) !== -1),
+        attendeeUids: attendeeUids.filter((i) => activeUids.indexOf(i) !== -1),
       }}>
       {props.children}
     </VideoMeetingData.Provider>

package/template/src/components/contexts/WaitingRoomContext.tsx

@@ -0,0 +1,61 @@
+import {StyleSheet, Text, View} from 'react-native';
+import React, {createContext, useState} from 'react';
+import {UidType} from '../../../agora-rn-uikit';
+import {useContent} from 'customization-api';
+import {createHook} from 'customization-implementation';
+import {filterObject} from '../../utils';
+import {LogSource, logger} from '../../logger/AppBuilderLogger';
+
+export interface WaitingRoomContextInterface {
+  waitingRoomUids: UidType[];
+  waitingRoomRef: React.MutableRefObject<{}>;
+}
+const WaitingRoomContext = createContext<WaitingRoomContextInterface>({
+  waitingRoomUids: [],
+  waitingRoomRef: {current: {}},
+});
+
+const WaitingRoomProvider = ({children}) => {
+  const [waitingRoomUids, setwaitingRoomUids] = useState<UidType[]>([]);
+  const waitingRoomRef = React.useRef<{}>({});
+
+  const {defaultContent} = useContent();
+
+  React.useEffect(() => {
+    const uids = Object.keys(
+      filterObject(
+        defaultContent,
+        ([k, v]) =>
+          //@ts-ignore
+          v?.type === 'rtc' && !v.offline && v?.isInWaitingRoom === true,
+      ),
+    ).map(Number);
+    if ($config.ENABLE_WAITING_ROOM) {
+      logger.debug(
+        LogSource.Internals,
+        'WAITING_ROOM',
+        'users in waiting room',
+        {
+          uids,
+          defaultContent,
+        },
+      );
+    }
+
+    setwaitingRoomUids(uids);
+  }, [defaultContent]);
+
+  return (
+    <WaitingRoomContext.Provider
+      value={{
+        waitingRoomUids: waitingRoomUids,
+        waitingRoomRef,
+      }}>
+      {children}
+    </WaitingRoomContext.Provider>
+  );
+};
+
+const useWaitingRoomContext = createHook(WaitingRoomContext);
+
+export {WaitingRoomProvider, useWaitingRoomContext};

package/template/src/components/contexts/WhiteboardContext.tsx

@@ -1,59 +1,59 @@
-import {UidType} from '../../../agora-rn-uikit';
-import React, {
-  createContext,
-  Dispatch,
-  SetStateAction,
-  useEffect,
-  useState,
-} from 'react';
-import {createHook} from 'customization-implementation';
-import {filterObject} from '../../utils/index';
-import {useRtc} from 'customization-api';
+// import {DispatchContext, UidType} from '../../../agora-rn-uikit';
+// import React, {
+//   createContext,
+//   Dispatch,
+//   SetStateAction,
+//   useContext,
+//   useEffect,
+//   useState,
+// } from 'react';
+// import {createHook} from 'customization-implementation';
+// import {filterObject} from '../../utils/index';
 
-export interface WhiteboardObjectInterface {
-  [key: number]: {
-    active: boolean;
-    parentId: UidType;
-    type: 'whiteboard';
-  };
-}
-export interface WhiteboardContextInterface {
-  whiteboardData: WhiteboardObjectInterface;
-  setWhiteboardData: Dispatch<SetStateAction<WhiteboardObjectInterface>>;
-}
-const Whiteboard = createContext<WhiteboardContextInterface>({
-  whiteboardData: {},
-  setWhiteboardData: () => {},
-});
+// export interface WhiteboardObjectInterface {
+//   [key: number]: {
+//     active: boolean;
+//     parentId: UidType;
+//     type: 'whiteboard';
+//   };
+// }
+// export interface WhiteboardContextInterface {
+//   whiteboardData: WhiteboardObjectInterface;
+//   setWhiteboardData: Dispatch<SetStateAction<WhiteboardObjectInterface>>;
+// }
+// const Whiteboard = createContext<WhiteboardContextInterface>({
+//   whiteboardData: {},
+//   setWhiteboardData: () => {},
+// });
 
-interface WhiteboardProviderProps {
-  children: React.ReactNode;
-}
-const WhiteboardProvider = (props: WhiteboardProviderProps) => {
-  const [whiteboardData, setWhiteboardData] =
-    useState<WhiteboardObjectInterface>({});
-  const {dispatch} = useRtc();
+// interface WhiteboardProviderProps {
+//   children: React.ReactNode;
+// }
+// const WhiteboardProvider = (props: WhiteboardProviderProps) => {
+//   const [whiteboardData, setWhiteboardData] =
+//     useState<WhiteboardObjectInterface>({});
+//   const {dispatch} = useContext(DispatchContext);
 
-  useEffect(() => {
-    const activeData = filterObject(
-      whiteboardData,
-      ([k, v]) => v.active === true,
-    );
-    Object.keys(activeData).map((uid) => {
-      const uidAsNumber = parseInt(uid);
-      dispatch({
-        type: 'AddCustomContent',
-        value: [uidAsNumber, activeData[uidAsNumber]],
-      });
-    });
-  }, [whiteboardData]);
+//   useEffect(() => {
+//     const activeData = filterObject(
+//       whiteboardData,
+//       ([k, v]) => v.active === true,
+//     );
+//     Object.keys(activeData).map((uid) => {
+//       const uidAsNumber = parseInt(uid);
+//       // dispatch({
+//       //   type: 'AddCustomContent',
+//       //   value: [uidAsNumber, activeData[uidAsNumber]],
+//       // });
+//     });
+//   }, [whiteboardData]);
 
-  return (
-    <Whiteboard.Provider value={{whiteboardData, setWhiteboardData}}>
-      {props.children}
-    </Whiteboard.Provider>
-  );
-};
-const useWhiteBoard = createHook(Whiteboard);
+//   return (
+//     <Whiteboard.Provider value={{whiteboardData, setWhiteboardData}}>
+//       {props.children}
+//     </Whiteboard.Provider>
+//   );
+// };
+// const useWhiteBoard = createHook(Whiteboard);
 
-export {useWhiteBoard, WhiteboardProvider};
+// export {useWhiteBoard, WhiteboardProvider};

package/template/src/components/disable-chat/useDisableChat.tsx

@@ -0,0 +1,32 @@
+import {createHook} from 'customization-implementation';
+import React from 'react';
+
+type DisableChatObj = {
+  [key: string]: {
+    disableChat: boolean;
+  };
+};
+
+export const DisableChatContext = React.createContext<{
+  disableChatUids: DisableChatObj;
+  setDisableChatUids: React.Dispatch<React.SetStateAction<DisableChatObj>>;
+}>({
+  disableChatUids: {},
+  setDisableChatUids: () => {},
+});
+
+const DisableChatProvider = ({children}) => {
+  const [disableChatUids, setDisableChatUids] = React.useState<DisableChatObj>(
+    {},
+  );
+
+  return (
+    <DisableChatContext.Provider value={{disableChatUids, setDisableChatUids}}>
+      {children}
+    </DisableChatContext.Provider>
+  );
+};
+
+const useDisableChat = createHook(DisableChatContext);
+
+export {DisableChatProvider, useDisableChat};