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

package/template/src/components/livestream/Types.ts

@@ -1,4 +1,24 @@
 // DECLARE ENUMS & CONTANTS
+import {ClientRole} from '../../../agora-rn-uikit';
+
+export enum RaiseHandValue {
+  TRUE = 'TRUE',
+  FALSE = 'FALSE',
+}
+
+export const RaiseHandAttributeKey = 'raised';
+
+export interface raiseHandListInterface {
+  [key: string]: raiseHandItemInterface;
+}
+
+export interface raiseHandItemInterface {
+  role: ClientRole;
+  raised: RaiseHandValue;
+  ts: number;
+}
+
+import {UidType} from '../../../agora-rn-uikit';
 
 export enum requestStatus {
   AwaitingAction = 'AWAITING_ACTION',
@@ -21,6 +41,7 @@ export enum LiveStreamControlMessageEnum {
   raiseHandApprovedRequestRecall = 'RAISE_HAND_APPROVED_REQUEST_RECALL',
   notifyAllRequestApproved = 'NOTIFY_REQUEST_APPROVED',
   notifyAllRequestRejected = 'NOTIFY_REQUEST_REJECTED',
+  notifyHostsInChannel = 'NOTIFY_HOSTS_IN_CHANNEL',
 }
 
 export const LSNotificationObject = {
@@ -41,29 +62,27 @@ export const LSNotificationObject = {
 };
 
 export interface liveStreamPropsInterface {
-  isHost: boolean;
-  setRtcProps: any;
+  children: React.ReactNode;
+  value: {setRtcProps: any; rtcProps: any; callActive: boolean};
 }
 
 export interface liveStreamContext {
   setLastCheckedRequestTimestamp: (timestamp: number) => void;
   isPendingRequestToReview: boolean;
-  currLiveStreamRequest: Partial<Record<string, requestInterface>>;
+  raiseHandList: Record<string, raiseHandItemInterface>;
   hostApprovesRequestOfUID: (uid: number) => void;
   hostRejectsRequestOfUID: (uid: number) => void;
   audienceSendsRequest: () => void;
   audienceRecallsRequest: () => void;
-  raiseHandRequestActive: boolean;
-  setRaiseHandRequestActive: (state: boolean) => void;
 }
 
 export interface requestInterface {
   ts: number;
   status: requestStatus;
-  uid: string | number;
+  uid: UidType;
 }
 
 export interface attrRequestInterface {
   status: attrRequestStatus;
-  uid: string | number;
+  uid: UidType;
 }

package/template/src/components/livestream/index.ts

@@ -1,9 +1,20 @@
-import {LiveStreamControlMessageEnum, requestStatus} from './Types';
+import {
+  LiveStreamControlMessageEnum,
+  requestStatus,
+  RaiseHandValue,
+  raiseHandListInterface,
+} from './Types';
 
 import LiveStreamContext, {
   LiveStreamContextProvider,
 } from './LiveStreamContext';
 
-export {LiveStreamContextProvider, LiveStreamControlMessageEnum, requestStatus};
+export {
+  LiveStreamContextProvider,
+  LiveStreamControlMessageEnum,
+  requestStatus,
+  RaiseHandValue,
+};
+export type {raiseHandListInterface};
 
 export default LiveStreamContext;

package/template/src/components/livestream/views/LiveStreamControls.tsx

@@ -13,7 +13,11 @@ import React from 'react';
 import {View} from 'react-native';
 import {LocalRaiseHand} from '../../../subComponents/livestream';
 
-const LiveStreamControls = (props: any) => {
+export interface LiveStreamControlsProps {
+  showControls: boolean;
+}
+
+const LiveStreamControls = (props: LiveStreamControlsProps) => {
   const {showControls} = props;
   if (!$config.RAISE_HAND) return <></>;
   if (!showControls) return <></>;

package/template/src/components/meeting-info/useMeetingInfo.tsx

@@ -0,0 +1,63 @@
+/*
+********************************************
+ 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, {createContext} from 'react';
+import {createHook} from 'fpe-implementation';
+import {UidType} from '../../../agora-rn-uikit';
+export interface MeetingInfoContextInterface {
+  isJoinDataFetched?: boolean;
+  isHost: boolean;
+  meetingTitle: string;
+  meetingPassphrase: {
+    attendee: string;
+    host?: string;
+    pstn?: {
+      number: string;
+      pin: string;
+    };
+  };
+  isSeparateHostLink: boolean;
+  channel?: string;
+  uid?: UidType;
+  token?: string;
+  rtm?: string;
+  secret?: string;
+  screenShareUid?: string;
+  screenShareToken?: string;
+}
+
+export const MeetingInfoDefaultValue: MeetingInfoContextInterface = {
+  isJoinDataFetched: false,
+  isHost: false,
+  meetingTitle: '',
+  meetingPassphrase: {
+    attendee: '',
+  },
+  isSeparateHostLink: true,
+};
+
+const MeetingInfoContext = createContext(MeetingInfoDefaultValue);
+
+interface MeetingInfoProviderProps {
+  children: React.ReactNode;
+  value: MeetingInfoContextInterface;
+}
+
+const MeetingInfoProvider = (props: MeetingInfoProviderProps) => {
+  return (
+    <MeetingInfoContext.Provider value={{...props.value}}>
+      {props.children}
+    </MeetingInfoContext.Provider>
+  );
+};
+const useMeetingInfo = createHook(MeetingInfoContext);
+
+export {MeetingInfoProvider, useMeetingInfo};

package/template/src/components/meeting-info/useSetMeetingInfo.tsx

@@ -0,0 +1,38 @@
+/*
+********************************************
+ 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, {createContext, SetStateAction} from 'react';
+import {createHook} from 'fpe-implementation';
+import {MeetingInfoContextInterface} from './useMeetingInfo';
+
+export interface SetMeetingInfoContextInterface {
+  setMeetingInfo: React.Dispatch<SetStateAction<MeetingInfoContextInterface>>;
+}
+
+const SetMeetingInfoContext = createContext<SetMeetingInfoContextInterface>({
+  setMeetingInfo: () => {},
+});
+
+interface SetMeetingInfoProviderProps {
+  children: React.ReactNode;
+  value: SetMeetingInfoContextInterface;
+}
+
+const SetMeetingInfoProvider = (props: SetMeetingInfoProviderProps) => {
+  return (
+    <SetMeetingInfoContext.Provider value={{...props.value}}>
+      {props.children}
+    </SetMeetingInfoContext.Provider>
+  );
+};
+const useSetMeetingInfo = createHook(SetMeetingInfoContext);
+
+export {SetMeetingInfoProvider, useSetMeetingInfo};

package/template/src/components/participants/AllAudienceParticipants.tsx

@@ -3,38 +3,43 @@ import {View, Text} from 'react-native';
 import RemoteEndCall from '../../subComponents/RemoteEndCall';
 import ParticipantName from '../../components/participants/ParticipantName';
 import chatContext from '../ChatContext';
+import {useString} from '../../utils/useString';
+import {useRenderContext} from 'fpe-api';
 
 const AllAudienceParticipants = (props: any) => {
-  const {p_style, isHost, participantList} = props;
+  const {p_style, isHost, uids} = props;
+  const {renderList} = useRenderContext();
   const {localUid} = useContext(chatContext);
-
+  //commented for v1 release
+  //const participantListPlaceholder = useString('participantListPlaceholder')();
+  const participantListPlaceholder = 'No one has joined yet';
   return (
     <View style={p_style.participantContainer}>
-      {Object.keys(participantList).length == 0 ? (
-        <Text style={p_style.infoText}>No one has joined yet</Text>
+      {uids.length == 0 ? (
+        <Text style={p_style.infoText}>{participantListPlaceholder}</Text>
       ) : (
         <>
           {/* Audience should see his name first */}
-          {Object.entries(participantList)
-            .filter(([uid, _]: any) => uid === localUid)
-            .map(([uid, user]: any, index: number) => (
-              <View style={p_style.participantRow} key={index}>
-                <ParticipantName value={user.name} />
-                {isHost && (
-                  <View style={p_style.participantActionContainer}>
-                    <View style={[p_style.actionBtnIcon]}>
-                      <RemoteEndCall uid={uid} isHost={isHost} />
-                    </View>
+          {uids.filter((i) => i === localUid).length ? (
+            <View style={p_style.participantRow} key={'local' + 0}>
+              <ParticipantName value={renderList[localUid]?.name} />
+              {isHost && (
+                <View style={p_style.participantActionContainer}>
+                  <View style={[p_style.actionBtnIcon]}>
+                    <RemoteEndCall uid={localUid} isHost={isHost} />
                   </View>
-                )}
-              </View>
-            ))}
+                </View>
+              )}
+            </View>
+          ) : (
+            <></>
+          )}
           {/* Others Audience in the call */}
-          {Object.entries(participantList)
-            .filter(([uid, _]: any) => uid !== localUid)
-            .map(([uid, user]: any, index: number) => (
+          {uids
+            .filter((i) => i !== localUid)
+            .map((uid: any, index: number) => (
               <View style={p_style.participantRow} key={index}>
-                <ParticipantName value={user.name} />
+                <ParticipantName value={renderList[uid]?.name} />
                 {isHost && (
                   <View style={p_style.participantActionContainer}>
                     <View style={[p_style.actionBtnIcon]}>

package/template/src/components/participants/AllHostParticipants.tsx

@@ -1,65 +1,53 @@
-import React, {useContext} from 'react';
-import {MinUidConsumer, MaxUidConsumer} from '../../../agora-rn-uikit';
-import chatContext from '../ChatContext';
-
+import React from 'react';
 import MeParticipant from './MeParticipant';
 import ScreenshareParticipants from './ScreenshareParticipants';
 import RemoteParticipants from './RemoteParticipants';
-import {UserType} from './../RTMConfigure';
+import {useString} from '../../utils/useString';
+import useUserList from '../../utils/useUserList';
+import {UidType, useLocalUid} from '../../../agora-rn-uikit';
 
 export default function AllHostParticipants(props: any) {
   const {p_style, isHost} = props;
-  const {userList, localUid} = useContext(chatContext);
-
-  const getParticipantName = (userUID: number | string) => {
-    if (userUID === 'local')
-      return userList[localUid] ? userList[localUid].name + ' ' : 'You ';
-    else if (userUID === 1)
-      return userList[localUid]
-        ? userList[localUid].name + "'s screenshare "
-        : 'Your screenshare ';
-    else
-      return userList[userUID]
-        ? userList[userUID].name + ' '
-        : String(userUID)[0] === '1'
-        ? 'PSTN User '
-        : 'User ';
+  const localUid = useLocalUid();
+  //commented for v1 release
+  //const remoteUserDefaultLabel = useString('remoteUserDefaultLabel')();
+  const remoteUserDefaultLabel = 'User';
+  const {renderList, renderPosition} = useUserList();
+  const getParticipantName = (uid: UidType) => {
+    return renderList[uid]?.name || remoteUserDefaultLabel;
   };
 
   return (
-    <MinUidConsumer>
-      {(minUsers) => (
-        <MaxUidConsumer>
-          {(maxUser) =>
-            [...minUsers, ...maxUser].map((user) =>
-              user.uid === 'local' ? (
-                <MeParticipant
-                  name={getParticipantName(user.uid)}
-                  p_style={p_style}
-                  key={user.uid}
-                />
-              ) : user.uid === 1 ? (
-                <ScreenshareParticipants
-                  name={getParticipantName(user.uid)}
-                  p_styles={p_style}
-                  key={user.uid}
-                />
-              ) : (
-                <RemoteParticipants
-                  name={getParticipantName(user.uid)}
-                  p_styles={p_style}
-                  user={user}
-                  showControls={
-                    userList[user.uid]?.type !== UserType.ScreenShare
-                  }
-                  isHost={isHost}
-                  key={user.uid}
-                />
-              ),
-            )
-          }
-        </MaxUidConsumer>
+    <>
+      {/* User should see his name first */}
+      {renderPosition.filter((uid) => uid === localUid).length > 0 && (
+        <MeParticipant
+          name={getParticipantName(localUid)}
+          p_style={p_style}
+          key={localUid}
+        />
       )}
-    </MinUidConsumer>
+      {/* Others Users in the call */}
+      {renderPosition
+        .filter((uid) => uid !== localUid)
+        .map((uid) =>
+          renderList[uid]?.type === 'screenshare' ? (
+            <ScreenshareParticipants
+              name={getParticipantName(uid)}
+              p_styles={p_style}
+              key={uid}
+            />
+          ) : (
+            <RemoteParticipants
+              name={getParticipantName(uid)}
+              p_styles={p_style}
+              user={renderList[uid]}
+              showControls={renderList[uid]?.type === 'rtc'}
+              isHost={isHost}
+              key={uid}
+            />
+          ),
+        )}
+    </>
   );
 }

package/template/src/components/participants/MeParticipant.tsx

@@ -11,8 +11,9 @@
 */
 import React from 'react';
 import {View} from 'react-native';
-import {LocalAudioMute, LocalVideoMute} from '../../../agora-rn-uikit';
-import {LocalUserContext} from '../../../agora-rn-uikit';
+import {ButtonTemplateName} from '../../utils/useButtonTemplate';
+import LocalAudioMute from '../../subComponents/LocalAudioMute';
+import LocalVideoMute from '../../subComponents/LocalVideoMute';
 import ParticipantName from './ParticipantName';
 
 const MeParticipant = (props: any) => {
@@ -22,14 +23,12 @@ const MeParticipant = (props: any) => {
     <View style={p_style.participantRow}>
       <ParticipantName value={name} />
       <View style={p_style.participantActionContainer}>
-        <LocalUserContext>
-          <View style={[p_style.actionBtnIcon, {marginRight: 10}]}>
-            <LocalAudioMute btnText=" " variant="text" />
-          </View>
-          <View style={p_style.actionBtnIcon}>
-            <LocalVideoMute btnText=" " variant="text" />
-          </View>
-        </LocalUserContext>
+        <View style={[p_style.actionBtnIcon, {marginRight: 10}]}>
+          <LocalAudioMute buttonTemplateName={ButtonTemplateName.topBar} />
+        </View>
+        <View style={p_style.actionBtnIcon}>
+          <LocalVideoMute buttonTemplateName={ButtonTemplateName.topBar} />
+        </View>
       </View>
     </View>
   );

package/template/src/components/participants/ParticipantName.tsx

@@ -13,10 +13,11 @@ import React from 'react';
 import {View, StyleSheet, useWindowDimensions, Platform} from 'react-native';
 import TextWithToolTip from '../../subComponents/TextWithTooltip';
 import {RFValue} from 'react-native-responsive-fontsize';
+import {isWeb} from '../../utils/common';
 
 const ParticipantName = ({value}: {value: string}) => {
   const {height, width} = useWindowDimensions();
-  const fontSize = Platform.OS === 'web' ? 14 : 16;
+  const fontSize = isWeb ? 14 : 16;
   return (
     <View style={{flex: 1}}>
       <TextWithToolTip

package/template/src/components/participants/RemoteParticipants.tsx

@@ -10,24 +10,24 @@
 *********************************************
 */
 import React from 'react';
-import {View, Text} from 'react-native';
+import {View} from 'react-native';
 import RemoteAudioMute from '../../subComponents/RemoteAudioMute';
 import RemoteVideoMute from '../../subComponents/RemoteVideoMute';
 import {ApprovedLiveStreamControlsView} from '../../subComponents/livestream';
 import RemoteEndCall from '../../subComponents/RemoteEndCall';
 import ParticipantName from './ParticipantName';
+import {RenderInterface} from '../../../agora-rn-uikit';
 
 interface remoteParticipantsInterface {
   p_styles: any;
   name: string;
-  user: any;
+  user: RenderInterface;
   showControls: boolean;
   isHost: boolean;
 }
 
 const RemoteParticipants = (props: remoteParticipantsInterface) => {
   const {p_styles, user, name, showControls, isHost} = props;
-
   return (
     <View style={p_styles.participantRow}>
       <ParticipantName value={name} />

package/template/src/components/precall/LocalMute.native.tsx

@@ -0,0 +1,91 @@
+/*
+********************************************
+ 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 {useFpe} from 'fpe-api';
+import {isValidReactComponent} from '../../utils/common';
+import LocalAudioMute, {
+  LocalAudioMuteProps,
+} from '../../subComponents/LocalAudioMute';
+import LocalVideoMute, {
+  LocalVideoMuteProps,
+} from '../../subComponents/LocalVideoMute';
+import LocalSwitchCamera, {
+  LocalSwitchCameraProps,
+} from '../../subComponents/LocalSwitchCamera';
+
+const PreCallLocalMute: React.FC = () => {
+  const {VideoMute, AudioMute} = useFpe((data) => {
+    let components: {
+      VideoMute: React.ComponentType<LocalAudioMuteProps>;
+      AudioMute: React.ComponentType<LocalVideoMuteProps>;
+    } = {
+      AudioMute: LocalAudioMute,
+      VideoMute: LocalVideoMute,
+    };
+    // commented for v1 release
+    // if (
+    //   data?.components?.precall &&
+    //   typeof data?.components?.precall === 'object'
+    // ) {
+    //   if (
+    //     data.components?.precall?.audioMute &&
+    //     typeof data.components?.precall?.audioMute !== 'object'
+    //   ) {
+    //     if (
+    //       data.components?.precall?.audioMute &&
+    //       isValidReactComponent(data.components?.precall?.audioMute)
+    //     ) {
+    //       components.AudioMute = data.components?.precall?.audioMute;
+    //     }
+    //   }
+
+    //   if (
+    //     data.components?.precall?.videoMute &&
+    //     typeof data.components?.precall?.videoMute !== 'object'
+    //   ) {
+    //     if (
+    //       data.components?.precall?.videoMute &&
+    //       isValidReactComponent(data.components?.precall?.videoMute)
+    //     ) {
+    //       components.VideoMute = data.components?.precall?.videoMute;
+    //     }
+    //   }
+    // }
+    return components;
+  });
+  return (
+    <>
+      <View style={style.width50}>
+        <AudioMute />
+      </View>
+      <View style={style.width50} />
+      <View style={style.width50}>
+        <VideoMute />
+      </View>
+      <View style={style.width50} />
+      <View style={style.width50}>
+        <LocalSwitchCamera />
+      </View>
+    </>
+  );
+};
+export const PreCallLocalMuteComponentsArray: [
+  (props: LocalAudioMuteProps) => JSX.Element,
+  (props: LocalVideoMuteProps) => JSX.Element,
+  (props: LocalSwitchCameraProps) => JSX.Element,
+] = [LocalAudioMute, LocalVideoMute, LocalSwitchCamera];
+export default PreCallLocalMute;
+
+const style = StyleSheet.create({
+  width50: {width: 50},
+});

package/template/src/components/precall/LocalMute.tsx

@@ -0,0 +1,90 @@
+/*
+********************************************
+ 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 {useFpe} from 'fpe-api';
+import {isValidReactComponent} from '../../utils/common';
+import LocalVideoMute, {
+  LocalVideoMuteProps,
+} from '../../subComponents/LocalVideoMute';
+import LocalAudioMute, {
+  LocalAudioMuteProps,
+} from '../../subComponents/LocalAudioMute';
+
+const PreCallLocalMute: React.FC = () => {
+  const {VideoMute, AudioMute} = useFpe((data) => {
+    let components: {
+      VideoMute: React.ComponentType<LocalAudioMuteProps>;
+      AudioMute: React.ComponentType<LocalVideoMuteProps>;
+    } = {
+      AudioMute: LocalAudioMute,
+      VideoMute: LocalVideoMute,
+    };
+    // commented for v1 release
+    // if (
+    //   data?.components?.precall &&
+    //   typeof data?.components?.precall === 'object'
+    // ) {
+    //   if (
+    //     data.components?.precall?.audioMute &&
+    //     typeof data.components?.precall?.audioMute !== 'object'
+    //   ) {
+    //     if (
+    //       data.components?.precall?.audioMute &&
+    //       isValidReactComponent(data.components?.precall?.audioMute)
+    //     ) {
+    //       components.AudioMute = data.components?.precall?.audioMute;
+    //     }
+    //   }
+
+    //   if (
+    //     data.components?.precall?.videoMute &&
+    //     typeof data.components?.precall?.videoMute !== 'object'
+    //   ) {
+    //     if (
+    //       data.components?.precall?.videoMute &&
+    //       isValidReactComponent(data.components?.precall?.videoMute)
+    //     ) {
+    //       components.VideoMute = data.components?.precall?.videoMute;
+    //     }
+    //   }
+    // }
+    return components;
+  });
+  return (
+    <View style={style.precallControls}>
+      <View style={{alignSelf: 'center'}}>
+        <AudioMute />
+      </View>
+      <View style={{alignSelf: 'center'}}>
+        <VideoMute />
+      </View>
+    </View>
+  );
+};
+export const PreCallLocalMuteComponentsArray: [
+  (props: LocalAudioMuteProps) => JSX.Element,
+  (props: LocalVideoMuteProps) => JSX.Element,
+] = [LocalAudioMute, LocalVideoMute];
+
+export default PreCallLocalMute;
+
+const style = StyleSheet.create({
+  precallControls: {
+    flexDirection: 'row',
+    alignSelf: 'center',
+    padding: 10,
+    width: '40%',
+    justifyContent: 'space-around',
+    marginVertical: '5%',
+  },
+});