agora-appbuilder-core 4.0.0 → 4.0.2

package/template/src/components/chat-ui/{useChatUIControl.tsx → useChatUIControls.tsx}

@@ -13,64 +13,64 @@ import {createHook} from 'customization-implementation';
 import React, {SetStateAction, useState} from 'react';
 import {UidType} from '../../../agora-rn-uikit';
 
-export interface ChatUIControlInterface {
-  groupActive: boolean;
-  privateActive: boolean;
-  selectedChatUserId: UidType;
+export enum ChatType {
+  Group,
+  //todo confirm memberlist with vineeth
+  MemberList,
+  Private,
+}
+
+export interface ChatUIControlsInterface {
+  chatType: ChatType;
+  privateChatUser: UidType;
   inputActive?: boolean;
-  setGroupActive: React.Dispatch<SetStateAction<boolean>>;
-  setPrivateActive: React.Dispatch<SetStateAction<boolean>>;
-  setSelectedChatUserId: React.Dispatch<SetStateAction<UidType>>;
+  setChatType: (chatType: ChatType) => void;
+  setPrivateChatUser: React.Dispatch<SetStateAction<UidType>>;
   setInputActive: React.Dispatch<SetStateAction<boolean>>;
   message: string;
   setMessage: React.Dispatch<SetStateAction<string>>;
 }
 
-const ChatUIControlContext = React.createContext<ChatUIControlInterface>({
-  groupActive: false,
-  privateActive: false,
-  selectedChatUserId: 0,
+const ChatUIControlsContext = React.createContext<ChatUIControlsInterface>({
+  chatType: ChatType.Group,
+  privateChatUser: 0,
   message: '',
-  setGroupActive: () => {},
-  setPrivateActive: () => {},
-  setSelectedChatUserId: () => {},
+  setChatType: () => {},
+  setPrivateChatUser: () => {},
   setMessage: () => {},
   inputActive: false,
   setInputActive: () => {},
 });
 
-interface ChatUIControlProviderProps {
+interface ChatUIControlsProviderProps {
   children: React.ReactNode;
 }
 
-const ChatUIControlProvider = (props: ChatUIControlProviderProps) => {
-  const [groupActive, setGroupActive] = useState(false);
-  const [privateActive, setPrivateActive] = useState(false);
+const ChatUIControlsProvider = (props: ChatUIControlsProviderProps) => {
+  const [chatType, setChatType] = useState<ChatType>(ChatType.Group);
   const [inputActive, setInputActive] = useState(false);
-  const [selectedChatUserId, setSelectedChatUserId] = useState<UidType>(0);
+  const [privateChatUser, setPrivateChatUser] = useState<UidType>(0);
   const [message, setMessage] = useState('');
   return (
-    <ChatUIControlContext.Provider
+    <ChatUIControlsContext.Provider
       value={{
-        groupActive,
-        privateActive,
-        selectedChatUserId,
-        setGroupActive,
-        setPrivateActive,
-        setSelectedChatUserId,
+        chatType,
+        setChatType,
+        privateChatUser,
+        setPrivateChatUser,
         message,
         setMessage,
         inputActive,
         setInputActive,
       }}>
       {props.children}
-    </ChatUIControlContext.Provider>
+    </ChatUIControlsContext.Provider>
   );
 };
 
 /**
  * The ChatUIControl app state governs the chat ui.
  */
-const useChatUIControl = createHook(ChatUIControlContext);
+const useChatUIControls = createHook(ChatUIControlsContext);
 
-export {ChatUIControlProvider, useChatUIControl};
+export {ChatUIControlsProvider, useChatUIControls};

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

@@ -48,12 +48,14 @@ const CommonError: React.FC = () => {
   useEffect(() => {
     if (error?.name || error?.message) {
       Toast.show({
+        leadingIconName: 'alert',
         type: 'error',
         text1: error.name,
         text2: error.message,
         visibilityTime: 1000 * 10,
         primaryBtn: null,
         secondaryBtn: null,
+        leadingIcon: null,
       });
     }
   }, [error]);

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

@@ -31,7 +31,7 @@ const Logo: React.FC = () => {
 export default Logo;
 const style = StyleSheet.create({
   logo: {
-    width: 54,
-    height: 19,
+    width: 78,
+    height: 26,
   },
 });

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

@@ -10,9 +10,9 @@ 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]: {
@@ -36,37 +36,38 @@ 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)
           (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

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

@@ -8,11 +8,11 @@ import React, {
 } 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 {useRender} from 'customization-api';
+import {useContent} from 'customization-api';
 
 export interface VideoMeetingDataInterface {
   hostUids: UidType[];
@@ -29,8 +29,8 @@ interface VideoMeetingDataProviderProps {
 const VideoMeetingDataProvider = (props: VideoMeetingDataProviderProps) => {
   const {
     data: {isHost},
-  } = useMeetingInfo();
-  const {activeUids} = useRender();
+  } = useRoomInfo();
+  const {activeUids} = useContent();
   const {hasUserJoinedRTM} = useContext(ChatContext);
   const localUid = useLocalUid();
   const [hostUids, setHostUids] = useState<UidType[]>([]);
@@ -91,7 +91,7 @@ const VideoMeetingDataProvider = (props: VideoMeetingDataProviderProps) => {
           ? EventNames.VIDEO_MEETING_HOST
           : EventNames.VIDEO_MEETING_ATTENDEE,
         JSON.stringify({uid: localUid}),
-        EventPersistLevel.LEVEL2,
+        PersistanceLevel.Sender,
       );
     }
   }, [isHost, hasUserJoinedRTM]);

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

@@ -0,0 +1,50 @@
+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';
+
+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);
+    console.log('in waiting - de', 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};