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

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

@@ -1,4 +1,12 @@
-import React, {createContext, useContext, useState, useRef} from 'react';
+import React, {
+  createContext,
+  useContext,
+  useState,
+  useRef,
+  useCallback,
+  useEffect,
+} from 'react';
+import {StyleSheet} from 'react-native';
 import ChatContext, {controlMessageEnum} from '../ChatContext';
 import Toast from '../../../react-native-toast-message';
 import {
@@ -10,28 +18,82 @@ import {
   RaiseHandValue,
   raiseHandListInterface,
 } from './Types';
-import {ClientRole, useLocalUid, UidType} from '../../../agora-rn-uikit';
+import {ClientRoleType, useLocalUid, UidType} from '../../../agora-rn-uikit';
 import {filterObject, isEmptyObject} from '../../utils';
-import {useMeetingInfo} from '../meeting-info/useMeetingInfo';
+import {useRoomInfo} from '../room-info/useRoomInfo';
 import {useScreenshare} from '../../subComponents/screenshare/useScreenshare';
-import events, {EventPersistLevel} from '../../rtm-events-api';
+import events, {PersistanceLevel} from '../../rtm-events-api';
 import {EventNames} from '../../rtm-events';
-import {useRender} from 'customization-api';
+import {SidePanelType, useContent, useSidePanel} from 'customization-api';
+import TertiaryButton from '../../atoms/TertiaryButton';
+import PrimaryButton from '../../atoms/PrimaryButton';
+import {trimText} from '../../utils/common';
+import {useStringRef} from '../../utils/useString';
+import {
+  livestreamRequestAlreadyProcessed,
+  livestreamToastApprovalBtnText,
+  livestreamToastDenyBtnText,
+} from '../../language/default-labels/videoCallScreenLabels';
 
 const LiveStreamContext = createContext(null as unknown as liveStreamContext);
 
 export const LiveStreamContextConsumer = LiveStreamContext.Consumer;
 
-export const LiveStreamContextProvider: React.FC<liveStreamPropsInterface> = (
-  props,
-) => {
+export const LiveStreamContextProvider: React.FC<
+  liveStreamPropsInterface
+> = props => {
+  const requestAlreadyProcessed = useStringRef(
+    livestreamRequestAlreadyProcessed,
+  );
+
+  const raiseHandRequestReceivedToastHeading = useStringRef(
+    LSNotificationObject.RAISE_HAND_RECEIVED.text1TranslationKey,
+  );
+  const raiseHandRequestReceivedToastSubHeading = useStringRef(
+    LSNotificationObject.RAISE_HAND_RECEIVED.text2TranslationKey,
+  );
+
+  const raiseHandRequestRecallToastHeading = useStringRef(
+    LSNotificationObject.RAISE_HAND_REQUEST_RECALL.text1TranslationKey,
+  );
+
+  const raiseHandRequestAcceptedToastHeading = useStringRef(
+    LSNotificationObject.RAISE_HAND_ACCEPTED.text1TranslationKey,
+  );
+  const raiseHandRequestAcceptedToastSubHeading = useStringRef(
+    LSNotificationObject.RAISE_HAND_ACCEPTED.text2TranslationKey,
+  );
+
+  const raiseHandRequestRejectedToastHeading = useStringRef(
+    LSNotificationObject.RAISE_HAND_REJECTED.text1TranslationKey,
+  );
+
+  const raiseHandApprovedRequestRecallToastHeading = useStringRef(
+    LSNotificationObject.RAISE_HAND_APPROVED_REQUEST_RECALL.text1TranslationKey,
+  );
+
+  const promoteAsCoHostToastHeading = useStringRef(
+    LSNotificationObject.PROMOTE_AS_CO_HOST.text1TranslationKey,
+  );
+
+  const raiseHandRequestToastHeading = useStringRef(
+    LSNotificationObject.RAISE_HAND_REQUEST.text1TranslationKey,
+  );
+  const raiseHandRequestToastSubHeading = useStringRef(
+    LSNotificationObject.RAISE_HAND_REQUEST.text2TranslationKey,
+  );
+
+  const raiseHandRequestRecallLocalToastHeading = useStringRef(
+    LSNotificationObject.RAISE_HAND_REQUEST_RECALL_LOCAL.text1TranslationKey,
+  );
+
   const screenshareContextInstance = useScreenshare();
   const screenshareContextInstanceRef = useRef<any>();
   screenshareContextInstanceRef.current = screenshareContextInstance;
 
-  const {renderList} = useRender();
-  const renderListRef = useRef<any>();
-  renderListRef.current = renderList;
+  const {defaultContent} = useContent();
+  const defaultContentRef = useRef<any>();
+  defaultContentRef.current = defaultContent;
 
   const [raiseHandList, setRaiseHandList] = useState<raiseHandListInterface>(
     {},
@@ -39,24 +101,67 @@ export const LiveStreamContextProvider: React.FC<liveStreamPropsInterface> = (
   const raiseHandListRef = useRef<any>();
   raiseHandListRef.current = raiseHandList;
 
+  const [coHostUids, setCoHostUids] = useState<UidType[]>([]);
+  const coHostUidsRef = useRef<any>();
+  coHostUidsRef.current = coHostUids;
+
+  const {sidePanel} = useSidePanel();
+  const sidePanelRef = useRef<any>();
+  sidePanelRef.current = sidePanel;
+
   React.useEffect(() => {
-    renderListRef.current = renderList;
-  }, [renderList]);
+    sidePanelRef.current = sidePanel;
+  }, [sidePanel]);
+
+  React.useEffect(() => {
+    defaultContentRef.current = defaultContent;
+  }, [defaultContent]);
 
   React.useEffect(() => {
     raiseHandListRef.current = raiseHandList;
   }, [raiseHandList]);
 
+  React.useEffect(() => {
+    coHostUidsRef.current = coHostUids;
+  }, [coHostUids]);
+
+  React.useEffect(() => {
+    /**
+     * when user rejoin the meeting. its showing previosly raised livesteaming request.
+     * so deleting raise hand data once the user is offline
+     * */
+    let newRaiseHandList = raiseHandList;
+    const data = Object.keys(
+      filterObject(
+        defaultContent,
+        //@ts-ignore
+        ([k, v]) => v?.type === 'rtc' && v.offline === true,
+      ),
+    );
+    let isRaiseHandListChanged = false;
+    data &&
+      data.length &&
+      data.forEach((uid, index) => {
+        if (newRaiseHandList[uid]) {
+          isRaiseHandListChanged = true;
+          delete newRaiseHandList[uid];
+        }
+        if (data.length - 1 === index && isRaiseHandListChanged) {
+          setRaiseHandList(newRaiseHandList);
+        }
+      });
+  }, [defaultContent]);
+
   const localUid = useLocalUid();
   const localUidRef = useRef<any>();
   localUidRef.current = localUid;
 
-  const {hasUserJoinedRTM} = useContext(ChatContext);
+  const {hasUserJoinedRTM, rtmInitTimstamp} = useContext(ChatContext);
 
   const {setRtcProps, rtcProps, callActive} = props?.value;
   const {
     data: {isHost},
-  } = useMeetingInfo();
+  } = useRoomInfo();
 
   const [lastCheckedRequestTimestamp, setLastCheckedRequestTimestamp] =
     useState(0);
@@ -66,27 +171,67 @@ export const LiveStreamContextProvider: React.FC<liveStreamPropsInterface> = (
 
   const [isPendingRequestToReview, setPendingRequestToReview] = useState(false);
 
-  const showToast = (text: string) => {
+  const allowToBePresenter = useStringRef(livestreamToastApprovalBtnText);
+  const deny = useStringRef(livestreamToastDenyBtnText);
+  const showToast = (
+    text: string,
+    text2: string,
+    uid?: UidType,
+    toastId?: number,
+  ) => {
+    let btns: any = {};
+    if (uid) {
+      //toastId used to hide this particular notification
+      btns.toastId = toastId;
+      btns.primaryBtn = (
+        <PrimaryButton
+          containerStyle={style.primaryBtn}
+          textStyle={style.primaryBtnText}
+          text={allowToBePresenter?.current()}
+          onPress={() => {
+            hostApprovesRequestOfUID(uid);
+            Toast.hide();
+          }}
+        />
+      );
+      btns.secondaryBtn = (
+        <TertiaryButton
+          containerStyle={style.secondaryBtn}
+          text={deny?.current()}
+          onPress={() => {
+            hostRejectsRequestOfUID(uid);
+            Toast.hide();
+          }}
+        />
+      );
+    } else {
+      btns.primaryBtn = null;
+      btns.secondaryBtn = null;
+    }
+
     Toast.show({
-      type: 'success',
+      leadingIconName: 'info',
+      type: 'info',
       text1: text,
-      visibilityTime: 1000,
+      text2: text2 ? text2 : null,
+      visibilityTime: 3000,
+      ...btns,
     });
   };
 
-  const updateRtcProps = (newClientRole: ClientRole) => {
+  const updateRtcProps = (newClientRole: ClientRoleType) => {
     setRtcProps((prevState: any) => ({
       ...prevState,
       role:
-        newClientRole === ClientRole.Audience
-          ? ClientRole.Audience
-          : ClientRole.Broadcaster,
+        newClientRole === ClientRoleType.ClientRoleAudience
+          ? ClientRoleType.ClientRoleAudience
+          : ClientRoleType.ClientRoleBroadcaster,
     }));
   };
 
   const getAttendeeName = (uid: number | string) => {
-    return renderListRef.current?.[uid]?.name
-      ? renderListRef.current[uid].name
+    return defaultContentRef.current?.[uid]?.name
+      ? defaultContentRef.current[uid].name
       : 'user';
   };
 
@@ -96,31 +241,32 @@ export const LiveStreamContextProvider: React.FC<liveStreamPropsInterface> = (
   ) => {
     if (userUID && !isEmptyObject(payload)) {
       const userId = `${userUID}`;
-      setRaiseHandList((oldRaisedHandList) => ({
+      setRaiseHandList(oldRaisedHandList => ({
         ...oldRaisedHandList,
         [userId]: {
           raised: payload?.raised || RaiseHandValue.FALSE,
           ts: payload?.ts || Date.now(),
+          isProcessed: payload?.isProcessed || false,
           role:
             payload?.role ||
             oldRaisedHandList[userId]?.role ||
-            ClientRole.Audience,
+            ClientRoleType.ClientRoleAudience,
         },
       }));
     }
   };
 
-  const changeClientRoleTo = (newRole: ClientRole) => {
+  const changeClientRoleTo = (newRole: ClientRoleType) => {
     updateRtcProps(newRole);
   };
 
-  const UpdtLocStateAndBCastAttr = (newRole: ClientRole, ts: number) => {
+  const UpdtLocStateAndBCastAttr = (newRole: ClientRoleType, ts: number) => {
     switch (newRole) {
-      case ClientRole.Audience:
+      case ClientRoleType.ClientRoleAudience:
         addOrUpdateLiveStreamRequest(localUidRef.current, {
           raised: RaiseHandValue.FALSE,
           ts: ts,
-          role: ClientRole.Audience,
+          role: ClientRoleType.ClientRoleAudience,
         });
         // Audience notfies all host when request is rejected
         events.send(
@@ -128,16 +274,30 @@ export const LiveStreamContextProvider: React.FC<liveStreamPropsInterface> = (
           JSON.stringify({
             action: LiveStreamControlMessageEnum.notifyHostsInChannel,
             value: RaiseHandValue.FALSE,
+            ts: new Date().getTime(),
+            isProcessed: true,
           }),
-          EventPersistLevel.LEVEL2,
+          PersistanceLevel.Sender,
+        );
+        //update local cohost state
+        setCoHostUids(prevState => {
+          return [
+            ...prevState.filter(i => i !== parseInt(localUidRef.current)),
+          ];
+        });
+        // Audience notfies all users that co-host permission removed
+        events.send(
+          LiveStreamControlMessageEnum.coHostRemoved,
+          JSON.stringify({uid: localUidRef.current}),
+          PersistanceLevel.Sender,
         );
         break;
-      case ClientRole.Broadcaster:
+      case ClientRoleType.ClientRoleBroadcaster:
         // Update local state
         addOrUpdateLiveStreamRequest(localUidRef.current, {
           raised: RaiseHandValue.TRUE,
           ts: ts,
-          role: ClientRole.Broadcaster,
+          role: ClientRoleType.ClientRoleBroadcaster,
         });
         // Audience notfies all host when request is approved
         events.send(
@@ -145,8 +305,20 @@ export const LiveStreamContextProvider: React.FC<liveStreamPropsInterface> = (
           JSON.stringify({
             action: LiveStreamControlMessageEnum.notifyHostsInChannel,
             value: RaiseHandValue.TRUE,
+            ts: new Date().getTime(),
+            isProcessed: true,
           }),
-          EventPersistLevel.LEVEL2,
+          PersistanceLevel.Sender,
+        );
+        //update local cohost state
+        setCoHostUids(prevState => {
+          return [...prevState, localUidRef.current];
+        });
+        // Audience notfies all users that co-host has joined
+        events.send(
+          LiveStreamControlMessageEnum.coHostJoined,
+          JSON.stringify({uid: localUidRef.current}),
+          PersistanceLevel.Sender,
         );
       default:
         break;
@@ -157,7 +329,8 @@ export const LiveStreamContextProvider: React.FC<liveStreamPropsInterface> = (
   const pendingRequests = filterObject(
     raiseHandList,
     ([k, v]) =>
-      v?.raised === RaiseHandValue.TRUE && v?.role == ClientRole.Audience,
+      v?.raised === RaiseHandValue.TRUE &&
+      v?.role == ClientRoleType.ClientRoleAudience,
   );
 
   React.useEffect(() => {
@@ -189,20 +362,24 @@ export const LiveStreamContextProvider: React.FC<liveStreamPropsInterface> = (
 
   /** ******* SETTING UP ROLES BEGINS ******* */
   React.useEffect(() => {
-    events.on(EventNames.ROLE_ATTRIBUTE, (data) => {
-      setRaiseHandList((prevState) => {
+    const unsubRoleAttribute = events.on(EventNames.ROLE_ATTRIBUTE, data => {
+      setRaiseHandList(prevState => {
         return {
           ...prevState,
           [data.sender]: {
             ...prevState[data.sender],
             role:
-              data.payload in ClientRole
+              data.payload in ClientRoleType
                 ? parseInt(data.payload)
-                : ClientRole.Audience,
+                : ClientRoleType.ClientRoleAudience,
           },
         };
       });
     });
+
+    return () => {
+      unsubRoleAttribute();
+    };
   }, []);
 
   React.useEffect(() => {
@@ -210,17 +387,21 @@ export const LiveStreamContextProvider: React.FC<liveStreamPropsInterface> = (
     events.send(
       EventNames.ROLE_ATTRIBUTE,
       JSON.stringify(
-        rtcProps.role in ClientRole ? rtcProps.role : ClientRole.Audience,
+        rtcProps.role in ClientRoleType
+          ? rtcProps.role
+          : ClientRoleType.ClientRoleAudience,
       ),
-      EventPersistLevel.LEVEL2,
+      PersistanceLevel.Sender,
     );
-    setRaiseHandList((prevState) => {
+    setRaiseHandList(prevState => {
       return {
         ...prevState,
         [localUid]: {
           ...prevState[localUid],
           role:
-            rtcProps.role in ClientRole ? rtcProps.role : ClientRole.Audience,
+            rtcProps.role in ClientRoleType
+              ? rtcProps.role
+              : ClientRoleType.ClientRoleAudience,
         },
       };
     });
@@ -232,117 +413,200 @@ export const LiveStreamContextProvider: React.FC<liveStreamPropsInterface> = (
 
   React.useEffect(() => {
     /** ********************** HOST EVENTS SECTION BEGINS ********************** */
-    events.on(EventNames.RAISED_ATTRIBUTE, (data) => {
-      if (!isHost) return;
-      const payload = JSON.parse(data.payload);
-      const action = payload.action;
-      const value = payload.value;
-
-      switch (action) {
-        // 1. Host can receive raise hand request with true or false value
-        case LiveStreamControlMessageEnum.raiseHandRequest:
-          switch (value) {
-            case RaiseHandValue.TRUE:
-              // Step 1: Show notifications
-              showToast(
-                `${getAttendeeName(data.sender)} ${
-                  LSNotificationObject.RAISE_HAND_RECEIVED
-                }`,
-              );
-              // 2. All Hosts in channel update their raised state to "true" when attendee raise their hand
-              addOrUpdateLiveStreamRequest(data.sender, {
-                ts: data.ts,
-                raised: RaiseHandValue.TRUE,
-                role: ClientRole.Audience,
-              });
-              break;
-            case RaiseHandValue.FALSE:
-              // Step 1: Show notifications
-              showToast(
-                `${getAttendeeName(data.sender)} ${
-                  LSNotificationObject.RAISE_HAND_REQUEST_RECALL
-                }`,
-              );
-              // 2. All Hosts in channel update raised state to "false" when attendee recalls their request
-              addOrUpdateLiveStreamRequest(data.sender, {
-                ts: data.ts,
-                raised: RaiseHandValue.FALSE,
-                role: ClientRole.Audience,
-              });
-            default:
-              break;
-          }
-          break;
-        // 2. All Hosts in channel gets notified when an attendee's request gets approved or rejected
-        case LiveStreamControlMessageEnum.notifyHostsInChannel:
-          if (!isHost) return;
-          switch (value) {
-            case RaiseHandValue.TRUE:
-              addOrUpdateLiveStreamRequest(data.sender, {
-                ts: data.ts,
-                raised: RaiseHandValue.TRUE,
-                role: ClientRole.Broadcaster,
-              });
-              break;
-            case RaiseHandValue.FALSE:
-              addOrUpdateLiveStreamRequest(data.sender, {
-                ts: data.ts,
-                raised: RaiseHandValue.FALSE,
-                role: ClientRole.Audience,
-              });
-              break;
-            default:
-              break;
-          }
-          break;
-        default:
-          break;
-      }
-    });
+    const unsubRaisedAttribute = events.on(
+      EventNames.RAISED_ATTRIBUTE,
+      data => {
+        if (!isHost) return;
+        const payload = JSON.parse(data.payload);
+        const action = payload.action;
+        const value = payload.value;
+        const isProcessed = payload?.isProcessed || false;
+
+        switch (action) {
+          // 1. Host can receive raise hand request with true or false value
+          case LiveStreamControlMessageEnum.raiseHandRequest:
+            switch (value) {
+              case RaiseHandValue.TRUE:
+                // Step 1: Show notifications
+                if (
+                  payload.ts > rtmInitTimstamp &&
+                  sidePanelRef.current !== SidePanelType.Participants
+                ) {
+                  showToast(
+                    raiseHandRequestReceivedToastHeading?.current(
+                      trimText(getAttendeeName(data.sender)),
+                    ),
+                    raiseHandRequestReceivedToastSubHeading?.current(),
+                    data.sender,
+                    data.ts,
+                  );
+                }
+                // 2. All Hosts in channel update their raised state to "true" when attendee raise their hand
+                addOrUpdateLiveStreamRequest(data.sender, {
+                  ts: data.ts,
+                  raised: RaiseHandValue.TRUE,
+                  role: ClientRoleType.ClientRoleAudience,
+                  isProcessed: isProcessed,
+                });
+                break;
+              case RaiseHandValue.FALSE:
+                // Step 1: Show notifications
+                if (
+                  payload.ts > rtmInitTimstamp &&
+                  sidePanelRef.current !== SidePanelType.Participants
+                ) {
+                  showToast(
+                    raiseHandRequestRecallToastHeading?.current(
+                      trimText(getAttendeeName(data.sender)),
+                    ),
+                    null,
+                  );
+                }
+                // 2. All Hosts in channel update raised state to "false" when attendee recalls their request
+                addOrUpdateLiveStreamRequest(data.sender, {
+                  ts: data.ts,
+                  raised: RaiseHandValue.FALSE,
+                  role: ClientRoleType.ClientRoleAudience,
+                  isProcessed: isProcessed,
+                });
+              default:
+                break;
+            }
+            break;
+          // 2. All Hosts in channel gets notified when an attendee's request gets approved or rejected
+          case LiveStreamControlMessageEnum.notifyHostsInChannel:
+            if (!isHost) return;
+            switch (value) {
+              case RaiseHandValue.TRUE:
+                addOrUpdateLiveStreamRequest(data.sender, {
+                  ts: data.ts,
+                  raised: RaiseHandValue.TRUE,
+                  role: ClientRoleType.ClientRoleBroadcaster,
+                  isProcessed: isProcessed,
+                });
+                break;
+              case RaiseHandValue.FALSE:
+                addOrUpdateLiveStreamRequest(data.sender, {
+                  ts: data.ts,
+                  raised: RaiseHandValue.FALSE,
+                  role: ClientRoleType.ClientRoleAudience,
+                  isProcessed: isProcessed,
+                });
+                break;
+              default:
+                break;
+            }
+            break;
+          default:
+            break;
+        }
+      },
+    );
     /** ********************** HOST EVENTS SECTION ENDS ********************** */
 
     /** ********************** AUDIENCE EVENTS SECTION BEGINS ********************** */
     // 1. Audience receives this when the request is accepted by host
-    events.on(LiveStreamControlMessageEnum.raiseHandRequestAccepted, (data) => {
-      if (raiseHandList[localUidRef.current]?.raised === RaiseHandValue.FALSE)
-        return;
-      showToast(LSNotificationObject.RAISE_HAND_ACCEPTED);
-      // Promote user's privileges to host
-      changeClientRoleTo(ClientRole.Broadcaster);
-      // Audience updates its local attributes and notfies all host when request is approved
-      UpdtLocStateAndBCastAttr(ClientRole.Broadcaster, data.ts);
-    });
+    const unsubRaiseHandReqAcpt = events.on(
+      LiveStreamControlMessageEnum.raiseHandRequestAccepted,
+      data => {
+        if (raiseHandList[localUidRef.current]?.raised === RaiseHandValue.FALSE)
+          return;
+        showToast(
+          raiseHandRequestAcceptedToastHeading?.current(),
+          raiseHandRequestAcceptedToastSubHeading?.current(),
+        );
+        // Promote user's privileges to host
+        changeClientRoleTo(ClientRoleType.ClientRoleBroadcaster);
+        // Audience updates its local attributes and notfies all host when request is approved
+        UpdtLocStateAndBCastAttr(ClientRoleType.ClientRoleBroadcaster, data.ts);
+      },
+    );
     /** 2. Audience receives this when the request is rejected by host
      * 2.a  Audience receives this when the request is rejected by host which is not yet approved
      * 2.b  Audience receives this when the request when is demoted by the host
      */
-    events.on(LiveStreamControlMessageEnum.raiseHandRequestRejected, (data) => {
-      /** 2.a */
-      if (
-        raiseHandListRef.current[localUidRef.current].role ==
-        ClientRole.Audience
-      ) {
-        showToast(LSNotificationObject.RAISE_HAND_REJECTED);
-      } else if (
-        raiseHandListRef.current[localUidRef.current].role ==
-        ClientRole.Broadcaster
-      ) {
-        /** 2.b */
-        showToast(LSNotificationObject.RAISE_HAND_APPROVED_REQUEST_RECALL);
-        screenshareContextInstanceRef?.current?.stopUserScreenShare(); // This will not exist on ios
-
-        // Demote user's privileges to audience
-        changeClientRoleTo(ClientRole.Audience);
-      }
-      // Audience updates its local attributes and notfies all host when demoted/request rejected
-      UpdtLocStateAndBCastAttr(ClientRole.Audience, data.ts);
-    });
+    const unsubRaiseHandReqRej = events.on(
+      LiveStreamControlMessageEnum.raiseHandRequestRejected,
+      data => {
+        /** 2.a */
+        if (
+          raiseHandListRef.current[localUidRef.current].role ==
+          ClientRoleType.ClientRoleAudience
+        ) {
+          showToast(raiseHandRequestRejectedToastHeading?.current(), null);
+        } else if (
+          raiseHandListRef.current[localUidRef.current].role ==
+          ClientRoleType.ClientRoleBroadcaster
+        ) {
+          /** 2.b */
+          showToast(
+            raiseHandApprovedRequestRecallToastHeading?.current(),
+            null,
+          );
+          screenshareContextInstanceRef?.current?.stopScreenshare(); // This will not exist on ios
+
+          // Demote user's privileges to audience
+          changeClientRoleTo(ClientRoleType.ClientRoleAudience);
+        }
+        // Audience updates its local attributes and notfies all host when demoted/request rejected
+        UpdtLocStateAndBCastAttr(ClientRoleType.ClientRoleAudience, data.ts);
+      },
+    );
     // 3. Audience when receives kickUser notifies all host when is kicked out
-    events.on(controlMessageEnum.kickUser, (data) => {
+    const unsubKickUser = events.on(controlMessageEnum.kickUser, data => {
       // Audience updates its local attributes and notfies all host when they(audience) are kicked out
-      UpdtLocStateAndBCastAttr(ClientRole.Audience, data.ts);
+      UpdtLocStateAndBCastAttr(ClientRoleType.ClientRoleAudience, data.ts);
     });
+    // 4. Host promote audience as co-host
+    const unsubPromoteAsCoHost = events.on(
+      LiveStreamControlMessageEnum.promoteAsCoHost,
+      data => {
+        showToast(promoteAsCoHostToastHeading.current(), null);
+        // Promote user's privileges to host
+        changeClientRoleTo(ClientRoleType.ClientRoleBroadcaster);
+        // Audience updates its local attributes and notfies all host when request is approved
+        UpdtLocStateAndBCastAttr(ClientRoleType.ClientRoleBroadcaster, data.ts);
+      },
+    );
+    // 4. New co-host has joined
+    const unsubCoHostJoined = events.on(
+      LiveStreamControlMessageEnum.coHostJoined,
+      ({payload}) => {
+        try {
+          const data = JSON.parse(payload);
+          if (data?.uid) {
+            setCoHostUids(prevState => {
+              return [...prevState, parseInt(data.uid)];
+            });
+          }
+        } catch (error) {}
+      },
+    );
+    // 5. Co-host removed
+    const unsubCoHostRemoved = events.on(
+      LiveStreamControlMessageEnum.coHostRemoved,
+      ({payload}) => {
+        try {
+          const data = JSON.parse(payload);
+          if (data?.uid) {
+            setCoHostUids(prevState => {
+              return [...prevState.filter(i => i !== parseInt(data.uid))];
+            });
+          }
+        } catch (error) {}
+      },
+    );
     /** ********************** AUDIENCE EVENTS SECTION ENDS ********************** */
+
+    return () => {
+      unsubRaisedAttribute();
+      unsubRaiseHandReqAcpt();
+      unsubRaiseHandReqRej();
+      unsubKickUser();
+      unsubPromoteAsCoHost();
+      unsubCoHostJoined();
+      unsubCoHostRemoved();
+    };
   }, []);
 
   /** ******* EVENT LISTENERS SECTION ENDS ******* */
@@ -354,27 +618,53 @@ export const LiveStreamContextProvider: React.FC<liveStreamPropsInterface> = (
    */
 
   const hostApprovesRequestOfUID = (uid: UidType) => {
-    addOrUpdateLiveStreamRequest(uid, {
-      raised: RaiseHandValue.TRUE,
-      ts: new Date().getTime(),
-    });
-    events.send(
-      LiveStreamControlMessageEnum.raiseHandRequestAccepted,
-      '',
-      EventPersistLevel.LEVEL1,
-      uid,
-    );
+    if (!raiseHandListRef.current[uid]?.isProcessed) {
+      addOrUpdateLiveStreamRequest(uid, {
+        raised: RaiseHandValue.TRUE,
+        ts: new Date().getTime(),
+        isProcessed: true,
+      });
+      events.send(
+        LiveStreamControlMessageEnum.raiseHandRequestAccepted,
+        '',
+        PersistanceLevel.None,
+        uid,
+      );
+    } else {
+      Toast.hide();
+      setTimeout(() => {
+        showToast(requestAlreadyProcessed?.current(), null);
+      });
+    }
   };
 
   const hostRejectsRequestOfUID = (uid: UidType) => {
-    addOrUpdateLiveStreamRequest(uid, {
-      raised: RaiseHandValue.FALSE,
-      ts: new Date().getTime(),
-    });
+    if (!raiseHandListRef.current[uid]?.isProcessed) {
+      addOrUpdateLiveStreamRequest(uid, {
+        raised: RaiseHandValue.FALSE,
+        ts: new Date().getTime(),
+        isProcessed: true,
+      });
+      events.send(
+        LiveStreamControlMessageEnum.raiseHandRequestRejected,
+        '',
+        PersistanceLevel.None,
+        uid,
+      );
+    } else {
+      Toast.hide();
+      setTimeout(() => {
+        showToast(requestAlreadyProcessed?.current(), null);
+      });
+    }
+  };
+
+  // promote audience as co-host
+  const promoteAudienceAsCoHost = async (uid: UidType): Promise<void> => {
     events.send(
-      LiveStreamControlMessageEnum.raiseHandRequestRejected,
+      LiveStreamControlMessageEnum.promoteAsCoHost,
       '',
-      EventPersistLevel.LEVEL1,
+      PersistanceLevel.None,
       uid,
     );
   };
@@ -392,14 +682,19 @@ export const LiveStreamContextProvider: React.FC<liveStreamPropsInterface> = (
     // If hand is already raised, skip the call
     if (raiseHandList[localUidRef.current]?.raised === RaiseHandValue.TRUE)
       return;
-    showToast(LSNotificationObject.RAISE_HAND_REQUEST);
+    showToast(
+      raiseHandRequestToastHeading?.current(),
+      raiseHandRequestToastSubHeading?.current(),
+    );
     events.send(
       EventNames.RAISED_ATTRIBUTE,
       JSON.stringify({
         action: LiveStreamControlMessageEnum.raiseHandRequest,
         value: RaiseHandValue.TRUE,
+        ts: new Date().getTime(),
+        isProcessed: false,
       }),
-      EventPersistLevel.LEVEL1,
+      PersistanceLevel.Sender,
     );
     // Update local state
     addOrUpdateLiveStreamRequest(localUidRef.current, {
@@ -417,15 +712,30 @@ export const LiveStreamContextProvider: React.FC<liveStreamPropsInterface> = (
      * else: Audience Request was not approved by host, and was pending
      */
     if (
-      raiseHandList[localUidRef.current]?.role == ClientRole.Broadcaster &&
+      raiseHandList[localUidRef.current]?.role ==
+        ClientRoleType.ClientRoleBroadcaster &&
       raiseHandList[localUidRef.current]?.raised === RaiseHandValue.TRUE
     ) {
-      screenshareContextInstanceRef?.current?.stopUserScreenShare(); // This will not exist on ios
+      screenshareContextInstanceRef?.current?.stopScreenshare(); // This will not exist on ios
       // Change role
-      changeClientRoleTo(ClientRole.Audience);
+      changeClientRoleTo(ClientRoleType.ClientRoleAudience);
     }
-    UpdtLocStateAndBCastAttr(ClientRole.Audience, new Date().getTime());
-    showToast(LSNotificationObject.RAISE_HAND_REQUEST_RECALL_LOCAL);
+    //notify host users
+    events.send(
+      EventNames.RAISED_ATTRIBUTE,
+      JSON.stringify({
+        action: LiveStreamControlMessageEnum.raiseHandRequest,
+        value: RaiseHandValue.FALSE,
+        ts: new Date().getTime(),
+        isProcessed: true,
+      }),
+      PersistanceLevel.Sender,
+    );
+    UpdtLocStateAndBCastAttr(
+      ClientRoleType.ClientRoleAudience,
+      new Date().getTime(),
+    );
+    showToast(raiseHandRequestRecallLocalToastHeading?.current(), null);
   };
 
   /** ******* AUDIENCE CONTROLS SECTION ENDS ******* */
@@ -433,6 +743,7 @@ export const LiveStreamContextProvider: React.FC<liveStreamPropsInterface> = (
   return (
     <LiveStreamContext.Provider
       value={{
+        coHostUids: coHostUids,
         setLastCheckedRequestTimestamp,
         isPendingRequestToReview,
         raiseHandList,
@@ -440,6 +751,7 @@ export const LiveStreamContextProvider: React.FC<liveStreamPropsInterface> = (
         hostRejectsRequestOfUID,
         audienceSendsRequest,
         audienceRecallsRequest,
+        promoteAudienceAsCoHost,
       }}>
       {props.children}
     </LiveStreamContext.Provider>
@@ -447,3 +759,19 @@ export const LiveStreamContextProvider: React.FC<liveStreamPropsInterface> = (
 };
 
 export default LiveStreamContext;
+
+const style = StyleSheet.create({
+  secondaryBtn: {marginLeft: 16, height: 40, paddingVertical: 5},
+  primaryBtn: {
+    minWidth: 'auto',
+    paddingHorizontal: 12,
+    height: 40,
+    borderRadius: 4,
+    paddingVertical: 5,
+  },
+  primaryBtnText: {
+    fontWeight: '600',
+    fontSize: 16,
+    paddingLeft: 0,
+  },
+});