agora-appbuilder-core 2.2.0 → 2.3.0-beta.10

package/template/src/components/chat-messages/useChatMessages.tsx

@@ -0,0 +1,208 @@
+/*
+********************************************
+ 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 'fpe-implementation';
+import React, {useState, useEffect, useRef} from 'react';
+import {useRenderContext} from 'fpe-api';
+import {SidePanelType} from '../../subComponents/SidePanelEnum';
+import {useLocalUid, UidType} from '../../../agora-rn-uikit';
+import CustomEvents from '../../custom-events';
+import {EventNames} from '../../rtm-events';
+import {useChatUIControl} from '../chat-ui/useChatUIControl';
+import {useChatNotification} from '../chat-notification/useChatNotification';
+import Toast from '../../../react-native-toast-message';
+import {timeNow} from '../../rtm/utils';
+import {useSidePanel} from '../../utils/useSidePanel';
+
+interface ChatMessagesProviderProps {
+  children: React.ReactNode;
+}
+interface messageInterface {
+  ts: number;
+  msg: string;
+}
+interface messageStoreInterface extends messageInterface {
+  uid: UidType;
+}
+
+interface ChatMessagesInterface {
+  messageStore: messageStoreInterface | any;
+  privateMessageStore: any;
+  sendChatMessage: (msg: string, toUid?: UidType) => void;
+}
+
+const ChatMessagesContext = React.createContext<ChatMessagesInterface>({
+  messageStore: [],
+  privateMessageStore: {},
+  sendChatMessage: () => {},
+});
+
+const ChatMessagesProvider = (props: ChatMessagesProviderProps) => {
+  const {renderList} = useRenderContext();
+  const localUid = useLocalUid();
+  const {setSidePanel} = useSidePanel();
+  const {groupActive, selectedChatUserId, setGroupActive} = useChatUIControl();
+  const {setUnreadGroupMessageCount, setUnreadIndividualMessageCount} =
+    useChatNotification();
+  const [messageStore, setMessageStore] = useState<messageStoreInterface[]>([]);
+  const [privateMessageStore, setPrivateMessageStore] = useState({});
+
+  const renderListRef = useRef({renderList: renderList});
+  const groupActiveRef = useRef<boolean>();
+  const individualActiveRef = useRef<string | number>();
+
+  //commented for v1 release
+  //const fromText = useString('messageSenderNotificationLabel');
+  const fromText = (name: string) => `From : ${name}`;
+  useEffect(() => {
+    renderListRef.current.renderList = renderList;
+  }, [renderList]);
+
+  useEffect(() => {
+    groupActiveRef.current = groupActive;
+  }, [groupActive]);
+
+  useEffect(() => {
+    individualActiveRef.current = selectedChatUserId;
+  }, [selectedChatUserId]);
+
+  React.useEffect(() => {
+    const showMessageNotification = (msg: string, uid: string) => {
+      Toast.show({
+        type: 'success',
+        text1: msg.length > 30 ? msg.slice(0, 30) + '...' : msg,
+        text2: renderListRef.current.renderList[parseInt(uid)]?.name
+          ? fromText(renderListRef.current.renderList[parseInt(uid)]?.name)
+          : '',
+        visibilityTime: 1000,
+        onPress: () => {
+          setSidePanel(SidePanelType.Chat);
+          setUnreadGroupMessageCount(0);
+          setGroupActive(true);
+        },
+      });
+    };
+    CustomEvents.on(EventNames.PUBLIC_CHAT_MESSAGE, (data) => {
+      showMessageNotification(data.payload.value, data.sender);
+      addMessageToStore(parseInt(data.sender), {
+        msg: data.payload.value,
+        ts: data.ts,
+      });
+      /**
+       * if chat group window is not active.
+       * then we will increment the unread count
+       */
+      if (!groupActiveRef.current) {
+        setUnreadGroupMessageCount((prevState) => {
+          return prevState + 1;
+        });
+      }
+    });
+    CustomEvents.on(EventNames.PRIVATE_CHAT_MESSAGE, (data) => {
+      showMessageNotification(data.payload.value, data.sender);
+      addMessageToPrivateStore(
+        parseInt(data.sender),
+        {
+          msg: data.payload.value,
+          ts: data.ts,
+        },
+        false,
+      );
+      /**
+       * if user's private window is active.
+       * then we will not increment the unread count
+       */
+
+      if (!(individualActiveRef.current === parseInt(data.sender))) {
+        setUnreadIndividualMessageCount((prevState) => {
+          const prevCount =
+            prevState && prevState[parseInt(data.sender)]
+              ? prevState[parseInt(data.sender)]
+              : 0;
+          return {
+            ...prevState,
+            [parseInt(data.sender)]: prevCount + 1,
+          };
+        });
+      }
+    });
+  }, []);
+
+  const addMessageToStore = (uid: UidType, body: messageInterface) => {
+    setMessageStore((m: messageStoreInterface[]) => {
+      return [...m, {ts: body.ts, uid, msg: body.msg}];
+    });
+  };
+
+  const addMessageToPrivateStore = (
+    uid: UidType,
+    body: messageInterface,
+    local: boolean,
+  ) => {
+    setPrivateMessageStore((state: any) => {
+      let newState = {...state};
+      newState[uid] !== undefined
+        ? (newState[uid] = [
+            ...newState[uid],
+            {ts: body.ts, uid: local ? localUid : uid, msg: body.msg},
+          ])
+        : (newState = {
+            ...newState,
+            [uid]: [{ts: body.ts, uid: local ? localUid : uid, msg: body.msg}],
+          });
+      return {...newState};
+    });
+  };
+
+  const sendChatMessage = (msg: string, toUid?: UidType) => {
+    if (typeof msg == 'string' && msg.trim() === '') return;
+    if (toUid) {
+      CustomEvents.send(
+        EventNames.PRIVATE_CHAT_MESSAGE,
+        {
+          value: msg,
+        },
+        toUid,
+      );
+      addMessageToPrivateStore(
+        toUid,
+        {
+          msg: msg,
+          ts: timeNow(),
+        },
+        true,
+      );
+    } else {
+      CustomEvents.send(EventNames.PUBLIC_CHAT_MESSAGE, {
+        value: msg,
+      });
+      addMessageToStore(localUid, {
+        msg: msg,
+        ts: timeNow(),
+      });
+    }
+  };
+
+  return (
+    <ChatMessagesContext.Provider
+      value={{
+        messageStore,
+        privateMessageStore,
+        sendChatMessage,
+      }}>
+      {props.children}
+    </ChatMessagesContext.Provider>
+  );
+};
+
+const useChatMessages = createHook(ChatMessagesContext);
+
+export {ChatMessagesProvider, useChatMessages};

package/template/src/components/chat-notification/useChatNotification.tsx

@@ -0,0 +1,78 @@
+/*
+********************************************
+ 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 'fpe-implementation';
+import React, {SetStateAction, useState, useEffect} from 'react';
+
+interface individualUnreadMessageCount {
+  [key: number]: number;
+}
+
+export interface ChatNotificationInterface {
+  totalUnreadCount: number;
+  unreadGroupMessageCount: number;
+  setUnreadGroupMessageCount: React.Dispatch<SetStateAction<number>>;
+  unreadPrivateMessageCount: number;
+  setUnreadPrivateMessageCount: React.Dispatch<SetStateAction<number>>;
+  unreadIndividualMessageCount: individualUnreadMessageCount;
+  setUnreadIndividualMessageCount: React.Dispatch<
+    SetStateAction<individualUnreadMessageCount>
+  >;
+}
+
+const ChatNotificationContext = React.createContext<ChatNotificationInterface>({
+  totalUnreadCount: 0,
+  unreadGroupMessageCount: 0,
+  unreadPrivateMessageCount: 0,
+  unreadIndividualMessageCount: {},
+  setUnreadGroupMessageCount: () => {},
+  setUnreadIndividualMessageCount: () => {},
+  setUnreadPrivateMessageCount: () => {},
+});
+
+interface ChatNotificationProviderProps {
+  children: React.ReactNode;
+}
+
+const ChatNotificationProvider = (props: ChatNotificationProviderProps) => {
+  const [unreadGroupMessageCount, setUnreadGroupMessageCount] = useState(0);
+  const [unreadPrivateMessageCount, setUnreadPrivateMessageCount] = useState(0);
+  const [unreadIndividualMessageCount, setUnreadIndividualMessageCount] =
+    useState<individualUnreadMessageCount>({});
+
+  useEffect(() => {
+    let privateUnreadCount = 0;
+    for (const key in unreadIndividualMessageCount) {
+      privateUnreadCount =
+        privateUnreadCount + unreadIndividualMessageCount[key];
+    }
+    setUnreadPrivateMessageCount(privateUnreadCount);
+  }, [unreadIndividualMessageCount]);
+
+  return (
+    <ChatNotificationContext.Provider
+      value={{
+        totalUnreadCount: unreadGroupMessageCount + unreadPrivateMessageCount,
+        unreadGroupMessageCount,
+        setUnreadGroupMessageCount,
+        unreadPrivateMessageCount,
+        setUnreadPrivateMessageCount,
+        unreadIndividualMessageCount,
+        setUnreadIndividualMessageCount,
+      }}>
+      {props.children}
+    </ChatNotificationContext.Provider>
+  );
+};
+
+const useChatNotification = createHook(ChatNotificationContext);
+
+export {ChatNotificationProvider, useChatNotification};

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

@@ -0,0 +1,66 @@
+/*
+********************************************
+ 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 'fpe-implementation';
+import React, {SetStateAction, useState} from 'react';
+import {UidType} from '../../../agora-rn-uikit';
+
+export interface ChatUIControlInterface {
+  groupActive: boolean;
+  privateActive: boolean;
+  selectedChatUserId: UidType;
+  setGroupActive: React.Dispatch<SetStateAction<boolean>>;
+  setPrivateActive: React.Dispatch<SetStateAction<boolean>>;
+  setSelectedChatUserId: React.Dispatch<SetStateAction<UidType>>;
+  message: string;
+  setMessage: React.Dispatch<SetStateAction<string>>;
+}
+
+const ChatUIControlContext = React.createContext<ChatUIControlInterface>({
+  groupActive: false,
+  privateActive: false,
+  selectedChatUserId: 0,
+  message: '',
+  setGroupActive: () => {},
+  setPrivateActive: () => {},
+  setSelectedChatUserId: () => {},
+  setMessage: () => {},
+});
+
+interface ChatUIControlProviderProps {
+  children: React.ReactNode;
+}
+
+const ChatUIControlProvider = (props: ChatUIControlProviderProps) => {
+  const [groupActive, setGroupActive] = useState(false);
+  const [privateActive, setPrivateActive] = useState(false);
+  const [selectedChatUserId, setSelectedChatUserId] = useState<UidType>(0);
+  const [message, setMessage] = useState('');
+  return (
+    <ChatUIControlContext.Provider
+      value={{
+        groupActive,
+        privateActive,
+        selectedChatUserId,
+        setGroupActive,
+        setPrivateActive,
+        setSelectedChatUserId,
+        message,
+        setMessage,
+      }}>
+      {props.children}
+    </ChatUIControlContext.Provider>
+  );
+};
+
+const useChatUIControl = createHook(ChatUIControlContext);
+
+export {ChatUIControlProvider, useChatUIControl};

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

@@ -0,0 +1,54 @@
+/*
+********************************************
+ 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 React, {useContext, useState} from 'react';
+import Error from '../../subComponents/Error';
+type ErrorType = {
+  name: string;
+  message: string;
+};
+type ErrorContextType = {
+  error: ErrorType | undefined;
+  setGlobalErrorMessage: (error: any) => void;
+  resetError: () => void;
+};
+const ErrorContext = React.createContext<ErrorContextType>({
+  error: {name: '', message: ''},
+  setGlobalErrorMessage: () => {},
+  resetError: () => {},
+});
+
+const ErrorProvider = (props: {children: React.ReactNode}) => {
+  const [error, setError] = useState<ErrorType>();
+  const setGlobalErrorMessage = (error: ErrorType) => {
+    setError(error);
+  };
+  const resetError = () => {
+    setError(undefined);
+  };
+  return (
+    <ErrorContext.Provider value={{error, setGlobalErrorMessage, resetError}}>
+      {props.children}
+    </ErrorContext.Provider>
+  );
+};
+
+const CommonError: React.FC = () => {
+  const {error} = useContext(ErrorContext);
+  return error && (error.name || error.message) ? (
+    <Error error={error} showBack={true} />
+  ) : (
+    <></>
+  );
+};
+export {ErrorContext, ErrorProvider};
+export default CommonError;

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

@@ -0,0 +1,35 @@
+/*
+********************************************
+ 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 React from 'react';
+import {View, StyleSheet} from 'react-native';
+import Logo from '../../subComponents/Logo';
+import {hasBrandLogo} from '../../utils/common';
+
+const CommonLogo: React.FC = () => {
+  return (
+    <View style={style.nav}>
+      {hasBrandLogo && <Logo />}
+      {/* <OpenInNativeButton /> */}
+    </View>
+  );
+};
+export default CommonLogo;
+const style = StyleSheet.create({
+  nav: {
+    flex: 1,
+    width: '100%',
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});

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

@@ -0,0 +1,8 @@
+import Logo from './Logo'
+import Error,{ErrorProvider,ErrorContext} from './Error'
+export{
+  Logo,
+  ErrorContext,
+  ErrorProvider,
+  Error
+}

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

@@ -0,0 +1,79 @@
+import {UidType} from '../../../agora-rn-uikit';
+import React, {createContext, useState, useContext} from 'react';
+import {createHook} from 'fpe-implementation';
+import LiveStreamContext, {
+  raiseHandListInterface,
+} from '../../components/livestream';
+import {ClientRole, useLocalUid} from '../../../agora-rn-uikit';
+import {filterObject} from '../../utils';
+import useUserList from '../../utils/useUserList';
+
+export interface LiveStreamDataObjectInterface {
+  [key: number]: {
+    role: number;
+    raised: boolean;
+    ts: number;
+  };
+}
+export interface LiveStreamDataContextInterface {
+  hostUids: UidType[];
+  audienceUids: UidType[];
+  liveStreamData: raiseHandListInterface;
+}
+const LiveStreamDataContext = createContext<LiveStreamDataContextInterface>({
+  hostUids: [],
+  audienceUids: [],
+  liveStreamData: {},
+});
+
+interface ScreenShareProviderProps {
+  children: React.ReactNode;
+}
+const LiveStreamDataProvider = (props: ScreenShareProviderProps) => {
+  const {renderList} = useUserList();
+  const {raiseHandList} = useContext(LiveStreamContext);
+  const [hostUids, setHostUids] = useState<UidType[]>([]);
+  const [audienceUids, setAudienceUids] = useState<UidType[]>([]);
+
+  React.useEffect(() => {
+    if (Object.keys(renderList).length !== 0) {
+      const hostList = filterObject(
+        renderList,
+        ([k, v]) =>
+          (v?.type === 'rtc' ||
+            v?.type === 'live' ||
+            (v?.type === 'screenshare' && v?.video == 1)) &&
+          (raiseHandList[k]
+            ? raiseHandList[k]?.role == ClientRole.Broadcaster
+            : true) &&
+          !v?.offline,
+      );
+      const audienceList = filterObject(
+        renderList,
+        ([k, v]) =>
+          (v?.type === 'rtc' || v?.type === 'live') &&
+          raiseHandList[k]?.role == ClientRole.Audience &&
+          !v.offline,
+      );
+      const hUids = Object.keys(hostList).map((uid) => parseInt(uid));
+      const aUids = Object.keys(audienceList).map((uid) => parseInt(uid));
+
+      setHostUids(hUids);
+      setAudienceUids(aUids);
+    }
+  }, [renderList, raiseHandList]);
+
+  return (
+    <LiveStreamDataContext.Provider
+      value={{
+        liveStreamData: raiseHandList,
+        hostUids,
+        audienceUids,
+      }}>
+      {props.children}
+    </LiveStreamDataContext.Provider>
+  );
+};
+const useLiveStreamDataContext = createHook(LiveStreamDataContext);
+
+export {useLiveStreamDataContext, LiveStreamDataProvider};

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

@@ -0,0 +1,47 @@
+import {UidType, PropsContext} from '../../../agora-rn-uikit';
+import React, {
+  createContext,
+  Dispatch,
+  SetStateAction,
+  useContext,
+  useState,
+} from 'react';
+import {createHook} from 'fpe-implementation';
+
+export interface ScreenShareObjectInterface {
+  [key: string | number]: {
+    name: string;
+    isActive: boolean;
+  };
+}
+export interface ScreenShareContextInterface {
+  screenShareData: ScreenShareObjectInterface;
+  setScreenShareData: Dispatch<SetStateAction<ScreenShareObjectInterface>>;
+}
+const ScreenShareContext = createContext<ScreenShareContextInterface>({
+  screenShareData: {},
+  setScreenShareData: () => {},
+});
+
+interface ScreenShareProviderProps {
+  children: React.ReactNode;
+}
+const ScreenShareProvider = (props: ScreenShareProviderProps) => {
+  const {rtcProps} = useContext(PropsContext);
+  const [screenShareData, setScreenShareData] =
+    useState<ScreenShareObjectInterface>({
+      [rtcProps?.screenShareUid]: {
+        name: '',
+        isActive: false,
+      },
+    });
+
+  return (
+    <ScreenShareContext.Provider value={{screenShareData, setScreenShareData}}>
+      {props.children}
+    </ScreenShareContext.Provider>
+  );
+};
+const useScreenContext = createHook(ScreenShareContext);
+
+export {useScreenContext, ScreenShareProvider};

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

@@ -0,0 +1,59 @@
+import {UidType} from '../../../agora-rn-uikit';
+import React, {
+  createContext,
+  Dispatch,
+  SetStateAction,
+  useEffect,
+  useState,
+} from 'react';
+import {createHook} from 'fpe-implementation';
+import {filterObject} from '../../utils/index';
+import {useRtcContext} from 'fpe-api';
+
+export interface WhiteboardObjectInterface {
+  [key: number]: {
+    active: boolean;
+    parentId: UidType;
+    type: 'whiteboard';
+  };
+}
+export interface WhiteboardContextInterface {
+  whiteboardData: WhiteboardObjectInterface;
+  setWhiteboardData: Dispatch<SetStateAction<WhiteboardObjectInterface>>;
+}
+const WhiteboardContext = createContext<WhiteboardContextInterface>({
+  whiteboardData: {},
+  setWhiteboardData: () => {},
+});
+
+interface WhiteboardProviderProps {
+  children: React.ReactNode;
+}
+const WhiteboardProvider = (props: WhiteboardProviderProps) => {
+  const [whiteboardData, setWhiteboardData] =
+    useState<WhiteboardObjectInterface>({});
+  const {dispatch} = useRtcContext();
+
+  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 (
+    <WhiteboardContext.Provider value={{whiteboardData, setWhiteboardData}}>
+      {props.children}
+    </WhiteboardContext.Provider>
+  );
+};
+const useScreenContext = createHook(WhiteboardContext);
+
+export {useScreenContext, WhiteboardProvider};

package/template/src/components/dimension/DimensionContext.ts

@@ -0,0 +1,27 @@
+/*
+********************************************
+ 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 {createContext} from 'react';
+
+interface DimensionContextInterface {
+  getDimensionData: (
+    width?: number,
+    height?: number,
+  ) => {dim: [number, number, boolean]; isDesktop: boolean};
+}
+
+const DimensionContext = createContext<DimensionContextInterface>({
+  getDimensionData: () => {
+    return {dim: [0, 0, false], isDesktop: false};
+  },
+});
+
+export default DimensionContext;