agora-appbuilder-core 2.0.1 → 2.0.3-rc2

package/template/src/components/livestream/LiveStreamContext.tsx

@@ -0,0 +1,411 @@
+import React, {createContext, useContext, useState, useRef} from 'react';
+import ChatContext, {
+  controlMessageEnum,
+  messageChannelType,
+  attrRequestTypes,
+} from '../ChatContext';
+import Toast from '../../../react-native-toast-message';
+import {
+  LiveStreamControlMessageEnum,
+  LSNotificationObject,
+  liveStreamContext,
+  requestStatus,
+  requestInterface,
+  attrRequestStatus,
+  attrRequestInterface,
+  liveStreamPropsInterface,
+} from './Types';
+import {ClientRole} from '../../../agora-rn-uikit';
+import ScreenshareContext from '../../subComponents/screenshare/ScreenshareContext';
+import {filterObject} from '../../utils';
+
+const LiveStreamContext = createContext(null as unknown as liveStreamContext);
+
+export const LiveStreamContextConsumer = LiveStreamContext.Consumer;
+
+export const LiveStreamContextProvider = (props: liveStreamPropsInterface) => {
+  const screenshareContextInstance = useContext(ScreenshareContext);
+
+  const {
+    userList,
+    localUid,
+    sendControlMessageToUid,
+    sendControlMessage,
+    broadcastUserAttributes,
+    addOrUpdateLocalUserAttributes,
+    events,
+  } = useContext(ChatContext);
+
+  const {isHost, setRtcProps} = props;
+
+  const [currLiveStreamRequest, setLiveStreamRequest] = useState<
+    Partial<Record<string, requestInterface>>
+  >({});
+
+  const [uidsOfInitialRequests, setUidsOfInitialRequests] = useState<
+    attrRequestInterface[]
+  >([]);
+
+  const [activeLiveStreamRequest, setActiveLiveStreamRequest] = useState<
+    Partial<Record<string, requestInterface>>
+  >({});
+
+  const [raiseHandRequestActive, setRaiseHandRequestActive] = useState(false);
+
+  const [lastCheckedRequestTimestamp, setLastCheckedRequestTimestamp] =
+    useState(0);
+
+  const [lastRequestReceivedTimestamp, setLastRequestReceivedTimestamp] =
+    useState(0);
+
+  const [isPendingRequestToReview, setPendingRequestToReview] = useState(false);
+
+  const localUserRef = useRef({uid: localUid, status: ''});
+
+  const showToast = (text: string) => {
+    Toast.show({
+      type: 'success',
+      text1: text,
+      visibilityTime: 1000,
+    });
+  };
+
+  const updateRtcProps = (newClientRole: ClientRole) => {
+    setRtcProps((prevState: any) => ({
+      ...prevState,
+      role:
+        newClientRole === ClientRole.Audience
+          ? ClientRole.Audience
+          : ClientRole.Broadcaster,
+    }));
+  };
+
+  const getAttendeeName = (uid: number | string) => {
+    return userList[uid] ? userList[uid]?.name : 'user';
+  };
+
+  React.useEffect(() => {
+    setActiveLiveStreamRequest(
+      filterObject(
+        currLiveStreamRequest,
+        ([k, v]) => v?.status === requestStatus.AwaitingAction,
+      ),
+    );
+  }, [currLiveStreamRequest]);
+
+  React.useEffect(() => {
+    // Get the time timestamp of recent request
+    const recentRequest = Object.values(activeLiveStreamRequest).sort(
+      (a, b) => b?.ts - a?.ts || 0,
+    )[0]; // sorting in descending order and take the first request
+
+    if (recentRequest?.ts) {
+      setLastRequestReceivedTimestamp(recentRequest.ts);
+    }
+    if (Object.keys(activeLiveStreamRequest).length === 0) {
+      setPendingRequestToReview(false);
+    }
+  }, [activeLiveStreamRequest]);
+
+  React.useEffect(() => {
+    if (
+      // If active requests and last seen is less than last message received
+      Object.keys(activeLiveStreamRequest).length !== 0 &&
+      lastRequestReceivedTimestamp >= lastCheckedRequestTimestamp
+    ) {
+      setPendingRequestToReview(true);
+    } else {
+      setPendingRequestToReview(false);
+    }
+  }, [lastRequestReceivedTimestamp, lastCheckedRequestTimestamp]);
+
+  React.useEffect(() => {
+    // Remove requests for users who are offline
+    setLiveStreamRequest(
+      filterObject(
+        currLiveStreamRequest,
+        ([k, v]) => userList[k] && !userList[k]?.offline,
+      ),
+    );
+
+    // Check attribute of user joined if it has request livestreaming attribute
+    const uidsOfUsersHavingLSRequest: attrRequestInterface[] = Object.keys(
+      filterObject(
+        userList,
+        ([k, v]) =>
+          v?.requests === attrRequestStatus.RaiseHand_AwaitingAction ||
+          v?.requests === attrRequestStatus.RaiseHand_Approved,
+      ),
+    ).map((key) => ({
+      uid: key,
+      status:
+        userList[key]?.requests || attrRequestStatus.RaiseHand_AwaitingAction,
+    }));
+
+    // console.log('uidsOfUsersHavingLSRequest', uidsOfUsersHavingLSRequest);
+    // Set uids of user who have active live streaming request
+    setUidsOfInitialRequests([...uidsOfUsersHavingLSRequest]);
+  }, [userList]);
+
+  React.useEffect(() => {
+    // Filter new requests
+    const initialRequests = uidsOfInitialRequests
+      .filter(
+        (item: attrRequestInterface) => !currLiveStreamRequest?.[item.uid],
+      )
+      .reduce((acc, item) => {
+        return {
+          ...acc,
+          [item.uid]: {
+            uid: item.uid,
+            ts: new Date().getTime(),
+            status:
+              item.status === attrRequestStatus.RaiseHand_Approved
+                ? requestStatus.Approved
+                : requestStatus.AwaitingAction,
+          },
+        };
+      }, {});
+    setLiveStreamRequest((oldLiveStreamRequest) => ({
+      ...oldLiveStreamRequest,
+      ...initialRequests,
+    }));
+  }, [uidsOfInitialRequests]);
+
+  // Events listening section
+
+  React.useEffect(() => {
+    events.on(
+      messageChannelType.Public,
+      'onLiveStreamActionsForHost',
+      (data: any, error: any) => {
+        if (!data) return;
+        if (!isHost) return;
+        switch (data.msg) {
+          // 1. All Hosts in channel add the audience request with 'Awaiting action' status
+          case LiveStreamControlMessageEnum.raiseHandRequest:
+            showToast(
+              `${getAttendeeName(data.uid)} ${
+                LSNotificationObject.RAISE_HAND_RECEIVED
+              }`,
+            );
+            addOrUpdateLiveStreamRequest({
+              uid: data.uid,
+              ts: data.ts,
+              status: requestStatus.AwaitingAction,
+            });
+            break;
+          // 2. All Hosts in channel update their status when a audience recalls his request
+          case LiveStreamControlMessageEnum.raiseHandRequestRecall:
+            showToast(
+              `${getAttendeeName(data.uid)} ${
+                LSNotificationObject.RAISE_HAND_REQUEST_RECALL
+              }`,
+            );
+            addOrUpdateLiveStreamRequest({
+              uid: data.uid,
+              ts: data.ts,
+              status: requestStatus.Cancelled,
+            });
+            break;
+          // 3. All Host in channel update their status when a audience request is approved
+          case LiveStreamControlMessageEnum.notifyAllRequestApproved:
+            addOrUpdateLiveStreamRequest({
+              uid: data.uid,
+              ts: data.ts,
+              status: requestStatus.Approved,
+            });
+            break;
+          // 4. All Host in channel update their status when a audience request is rejected
+          case LiveStreamControlMessageEnum.notifyAllRequestRejected:
+            addOrUpdateLiveStreamRequest({
+              uid: data.uid,
+              ts: data.ts,
+              status: requestStatus.Cancelled,
+            });
+            break;
+          default:
+            break;
+        }
+      },
+    );
+    events.on(
+      messageChannelType.Private,
+      'onLiveStreamActionsForAudience',
+      (data: any, error: any) => {
+        if (!data) return;
+        switch (data.msg) {
+          // 1. Audience receives this when the request is accepted by host
+          case LiveStreamControlMessageEnum.raiseHandRequestAccepted:
+            if (!raiseHandRequestActive) return;
+            showToast(LSNotificationObject.RAISE_HAND_ACCEPTED);
+            // Audience notfies all host when request is approved
+            notifyAllHostsInChannel(
+              LiveStreamControlMessageEnum.notifyAllRequestApproved,
+            );
+            changeClientRoleTo(ClientRole.Broadcaster);
+            localUserRef.current.status = requestStatus.Approved;
+            updateLocalUserAttributes(attrRequestStatus.RaiseHand_Approved);
+            break;
+          // 2. Audience receives this when the request is cancelled by host
+          case LiveStreamControlMessageEnum.raiseHandRequestRejected:
+            showToast(LSNotificationObject.RAISE_HAND_REJECTED);
+            setRaiseHandRequestActive(false);
+            // Audience notfies all host when request is approved
+            notifyAllHostsInChannel(
+              LiveStreamControlMessageEnum.notifyAllRequestRejected,
+            );
+            localUserRef.current.status = requestStatus.Cancelled;
+            updateLocalUserAttributes(attrRequestTypes.none);
+            break;
+          // 3. Audience receives this when host demotes (canceled after approval)
+          case LiveStreamControlMessageEnum.raiseHandApprovedRequestRecall:
+            showToast(LSNotificationObject.RAISE_HAND_APPROVED_REQUEST_RECALL);
+            screenshareContextInstance?.stopUserScreenShare(); // This will not exist on ios
+            setRaiseHandRequestActive(false);
+            // Audience notfies all host when request is rejected
+            notifyAllHostsInChannel(
+              LiveStreamControlMessageEnum.notifyAllRequestRejected,
+            );
+            changeClientRoleTo(ClientRole.Audience);
+            localUserRef.current.status = requestStatus.Cancelled;
+            break;
+          // 4. Audience when receives kickUser notifies all host when is kicked out
+          case controlMessageEnum.kickUser:
+            notifyAllHostsInChannel(
+              LiveStreamControlMessageEnum.notifyAllRequestRejected,
+            );
+            localUserRef.current.status = requestStatus.Cancelled;
+            break;
+          default:
+            break;
+        }
+      },
+    );
+
+    return () => {
+      // Cleanup the listeners
+      events.off(messageChannelType.Public, 'onLiveStreamActionsForHost');
+      events.off(messageChannelType.Private, 'onLiveStreamActionsForAudience');
+    };
+  }, [events, localUid, isHost, raiseHandRequestActive, userList]);
+
+  const addOrUpdateLiveStreamRequest = (request: requestInterface) => {
+    if (request && request?.uid && request?.ts && request?.uid) {
+      setLiveStreamRequest((oldLiveStreamRequest) => ({
+        ...oldLiveStreamRequest,
+        [request?.uid as string]: {
+          status: request.status,
+          ts: request.ts,
+          uid: request.uid,
+        },
+      }));
+    }
+  };
+
+  const changeClientRoleTo = (newRole: ClientRole) => {
+    updateRtcProps(newRole);
+    broadcastUserAttributes(
+      [{key: 'role', value: newRole.toString()}],
+      controlMessageEnum.clientRoleChanged,
+    );
+  };
+
+  const notifyAllHostsInChannel = (ctrlEnum: LiveStreamControlMessageEnum) => {
+    sendControlMessage(ctrlEnum);
+  };
+
+  /****************** HOST CONTROLS ******************
+   * Host controls for Live Streaming
+   * a. Host can approve streaming request sent by audience
+   * b. Host can reject streaming request sent by audience
+   */
+
+  const hostApprovesRequestOfUID = (uid: number | string) => {
+    addOrUpdateLiveStreamRequest({
+      uid,
+      ts: new Date().getTime(),
+      status: requestStatus.Cancelled,
+    });
+    sendControlMessageToUid(
+      LiveStreamControlMessageEnum.raiseHandRequestAccepted,
+      uid,
+    );
+  };
+
+  const hostRejectsRequestOfUID = (uid: number | string) => {
+    addOrUpdateLiveStreamRequest({
+      uid,
+      ts: new Date().getTime(),
+      status: requestStatus.Cancelled,
+    });
+    sendControlMessageToUid(
+      LiveStreamControlMessageEnum.raiseHandRequestRejected,
+      uid,
+    );
+  };
+
+  /****************** AUDIENCE CONTROLS ****************
+   * Audience have below controls
+   * a. Audience can raise a request to live stream
+   * b. Audience can recalls his request to live stream
+   *   i. While recalling the request could be either approved or not approved
+   */
+
+  const audienceSendsRequest = () => {
+    showToast(LSNotificationObject.RAISE_HAND_REQUEST);
+    setRaiseHandRequestActive(true);
+    sendControlMessage(LiveStreamControlMessageEnum.raiseHandRequest);
+    updateLocalUserAttributes(attrRequestStatus.RaiseHand_AwaitingAction);
+  };
+
+  const audienceRecallsRequest = () => {
+    /**
+     * if: Check if request is already approved
+     * else: Audience Request was not approved by host, and was in 'Awaiting Action' status
+     */
+    if (
+      localUserRef &&
+      localUserRef.current?.status === requestStatus.Approved
+    ) {
+      screenshareContextInstance?.stopUserScreenShare(); // This will not exist on ios
+      setRaiseHandRequestActive(false);
+      /// Change role and send message in channel notifying the same
+      changeClientRoleTo(ClientRole.Audience);
+      notifyAllHostsInChannel(
+        LiveStreamControlMessageEnum.notifyAllRequestRejected,
+      );
+    } else {
+      setRaiseHandRequestActive(false);
+      // Send message in channel to withdraw the request
+      sendControlMessage(LiveStreamControlMessageEnum.raiseHandRequestRecall);
+    }
+    updateLocalUserAttributes(attrRequestTypes.none);
+    showToast(LSNotificationObject.RAISE_HAND_REQUEST_RECALL_LOCAL);
+  };
+
+  const updateLocalUserAttributes = (
+    value: attrRequestTypes | attrRequestStatus,
+  ) => {
+    addOrUpdateLocalUserAttributes([{key: 'requests', value: value}]);
+  };
+
+  return (
+    <LiveStreamContext.Provider
+      value={{
+        setLastCheckedRequestTimestamp,
+        isPendingRequestToReview,
+        currLiveStreamRequest,
+        hostApprovesRequestOfUID,
+        hostRejectsRequestOfUID,
+        audienceSendsRequest,
+        audienceRecallsRequest,
+        raiseHandRequestActive,
+        setRaiseHandRequestActive,
+      }}>
+      {props.children}
+    </LiveStreamContext.Provider>
+  );
+};
+
+export default LiveStreamContext;

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

@@ -0,0 +1,69 @@
+// DECLARE ENUMS & CONTANTS
+
+export enum requestStatus {
+  AwaitingAction = 'AWAITING_ACTION',
+  Approved = 'APPROVED',
+  Cancelled = 'CANCELLED',
+}
+
+export enum attrRequestStatus {
+  RaiseHand_AwaitingAction = 'AWAITING_ACTION',
+  RaiseHand_Approved = 'APPROVED',
+}
+
+export enum LiveStreamControlMessageEnum {
+  raiseHandRequest = 'RAISE_HAND_REQUEST',
+  raiseHandRequestAccepted = 'RAISE_HAND_ACCEPTED',
+  raiseHandRequestRejected = 'RAISE_HAND_REJECTED',
+  raiseHandRequestReceived = 'RAISE_HAND_RECEIVED',
+  raiseHandRequestRecall = 'RAISE_HAND_REQUEST_RECALL',
+  raiseHandRequestRecallLocal = 'RAISE_HAND_REQUEST_RECALL_LOCAL',
+  raiseHandApprovedRequestRecall = 'RAISE_HAND_APPROVED_REQUEST_RECALL',
+  notifyAllRequestApproved = 'NOTIFY_REQUEST_APPROVED',
+  notifyAllRequestRejected = 'NOTIFY_REQUEST_REJECTED',
+}
+
+export const LSNotificationObject = {
+  [LiveStreamControlMessageEnum.raiseHandRequest]:
+    'You have raised your hand. Request sent to host for approval',
+  [LiveStreamControlMessageEnum.raiseHandRequestReceived]:
+    'has raised their hand',
+  [LiveStreamControlMessageEnum.raiseHandRequestAccepted]:
+    'Your request was approved, unmute to start talking',
+  [LiveStreamControlMessageEnum.raiseHandRequestRejected]:
+    'Your request was rejected by the host',
+  [LiveStreamControlMessageEnum.raiseHandRequestRecall]:
+    'has lowered their hand',
+  [LiveStreamControlMessageEnum.raiseHandRequestRecallLocal]:
+    'You have lowered your hand',
+  [LiveStreamControlMessageEnum.raiseHandApprovedRequestRecall]:
+    'The host has revoked streaming permissions',
+};
+
+export interface liveStreamPropsInterface {
+  isHost: boolean;
+  setRtcProps: any;
+}
+
+export interface liveStreamContext {
+  setLastCheckedRequestTimestamp: (timestamp: number) => void;
+  isPendingRequestToReview: boolean;
+  currLiveStreamRequest: Partial<Record<string, requestInterface>>;
+  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;
+}
+
+export interface attrRequestInterface {
+  status: attrRequestStatus;
+  uid: string | number;
+}

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

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

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

@@ -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 React from 'react';
+import {View} from 'react-native';
+import {LocalRaiseHand} from '../../../subComponents/livestream';
+
+const LiveStreamControls = (props: any) => {
+  const {showControls} = props;
+  if (!$config.RAISE_HAND) return <></>;
+  if (!showControls) return <></>;
+  return (
+    <View style={{alignSelf: 'center'}}>
+      <LocalRaiseHand />
+    </View>
+  );
+};
+
+export default LiveStreamControls;

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

@@ -0,0 +1,53 @@
+import React, {useContext} from 'react';
+import {View, Text} from 'react-native';
+import RemoteEndCall from '../../subComponents/RemoteEndCall';
+import ParticipantName from '../../components/participants/ParticipantName';
+import chatContext from '../ChatContext';
+
+const AllAudienceParticipants = (props: any) => {
+  const {p_style, isHost, participantList} = props;
+  const {localUid} = useContext(chatContext);
+
+  return (
+    <View style={p_style.participantContainer}>
+      {Object.keys(participantList).length == 0 ? (
+        <Text style={p_style.infoText}>No one has joined yet</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>
+                  </View>
+                )}
+              </View>
+            ))}
+          {/* Others Audience in the call */}
+          {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>
+                  </View>
+                )}
+              </View>
+            ))}
+        </>
+      )}
+    </View>
+  );
+};
+
+export default AllAudienceParticipants;

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

@@ -0,0 +1,65 @@
+import React, {useContext} from 'react';
+import {MinUidConsumer, MaxUidConsumer} from '../../../agora-rn-uikit';
+import chatContext from '../ChatContext';
+
+import MeParticipant from './MeParticipant';
+import ScreenshareParticipants from './ScreenshareParticipants';
+import RemoteParticipants from './RemoteParticipants';
+import {UserType} from './../RTMConfigure';
+
+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 ';
+  };
+
+  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>
+      )}
+    </MinUidConsumer>
+  );
+}

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

@@ -0,0 +1,37 @@
+/*
+********************************************
+ 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} from 'react-native';
+import {LocalAudioMute, LocalVideoMute} from '../../../agora-rn-uikit';
+import {LocalUserContext} from '../../../agora-rn-uikit';
+import ParticipantName from './ParticipantName';
+
+const MeParticipant = (props: any) => {
+  const {p_style, name} = props;
+
+  return (
+    <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>
+    </View>
+  );
+};
+export default MeParticipant;