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

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

@@ -1,56 +1,60 @@
 import React, {createContext, useContext, useState, useRef} from 'react';
-import ChatContext, {
-  controlMessageEnum,
-  messageChannelType,
-  attrRequestTypes,
-} from '../ChatContext';
+import ChatContext, {controlMessageEnum} from '../ChatContext';
 import Toast from '../../../react-native-toast-message';
 import {
   LiveStreamControlMessageEnum,
   LSNotificationObject,
   liveStreamContext,
-  requestStatus,
-  requestInterface,
-  attrRequestStatus,
-  attrRequestInterface,
   liveStreamPropsInterface,
+  raiseHandItemInterface,
+  RaiseHandValue,
+  raiseHandListInterface,
 } from './Types';
-import {ClientRole} from '../../../agora-rn-uikit';
-import ScreenshareContext from '../../subComponents/screenshare/ScreenshareContext';
-import {filterObject} from '../../utils';
+import {ClientRole, useLocalUid, UidType} from '../../../agora-rn-uikit';
+import {filterObject, isEmptyObject} from '../../utils';
+import {useMeetingInfo} from '../meeting-info/useMeetingInfo';
+import useUserList from '../../utils/useUserList';
+import {useScreenshare} from '../../subComponents/screenshare/useScreenshare';
+import CustomEvents, {EventLevel} from '../../custom-events';
+import {EventNames} from '../../rtm-events';
 
 const LiveStreamContext = createContext(null as unknown as liveStreamContext);
 
 export const LiveStreamContextConsumer = LiveStreamContext.Consumer;
 
-export const LiveStreamContextProvider = (props: liveStreamPropsInterface) => {
-  const screenshareContextInstance = useContext(ScreenshareContext);
+export const LiveStreamContextProvider: React.FC<liveStreamPropsInterface> = (
+  props,
+) => {
+  const screenshareContextInstance = useScreenshare();
+  const screenshareContextInstanceRef = useRef<any>();
+  screenshareContextInstanceRef.current = screenshareContextInstance;
 
-  const {
-    userList,
-    localUid,
-    sendControlMessageToUid,
-    sendControlMessage,
-    broadcastUserAttributes,
-    addOrUpdateLocalUserAttributes,
-    events,
-  } = useContext(ChatContext);
+  const {renderList} = useUserList();
+  const renderListRef = useRef<any>();
+  renderListRef.current = renderList;
 
-  const {isHost, setRtcProps} = props;
+  const [raiseHandList, setRaiseHandList] = useState<raiseHandListInterface>(
+    {},
+  );
+  const raiseHandListRef = useRef<any>();
+  raiseHandListRef.current = raiseHandList;
+
+  React.useEffect(() => {
+    renderListRef.current = renderList;
+  }, [renderList]);
 
-  const [currLiveStreamRequest, setLiveStreamRequest] = useState<
-    Partial<Record<string, requestInterface>>
-  >({});
+  React.useEffect(() => {
+    raiseHandListRef.current = raiseHandList;
+  }, [raiseHandList]);
 
-  const [uidsOfInitialRequests, setUidsOfInitialRequests] = useState<
-    attrRequestInterface[]
-  >([]);
+  const localUid = useLocalUid();
+  const localUidRef = useRef<any>();
+  localUidRef.current = localUid;
 
-  const [activeLiveStreamRequest, setActiveLiveStreamRequest] = useState<
-    Partial<Record<string, requestInterface>>
-  >({});
+  const {hasUserJoinedRTM} = useContext(ChatContext);
 
-  const [raiseHandRequestActive, setRaiseHandRequestActive] = useState(false);
+  const {setRtcProps, rtcProps, callActive} = props?.value;
+  const {isHost} = useMeetingInfo();
 
   const [lastCheckedRequestTimestamp, setLastCheckedRequestTimestamp] =
     useState(0);
@@ -60,8 +64,6 @@ export const LiveStreamContextProvider = (props: liveStreamPropsInterface) => {
 
   const [isPendingRequestToReview, setPendingRequestToReview] = useState(false);
 
-  const localUserRef = useRef({uid: localUid, status: ''});
-
   const showToast = (text: string) => {
     Toast.show({
       type: 'success',
@@ -81,37 +83,95 @@ export const LiveStreamContextProvider = (props: liveStreamPropsInterface) => {
   };
 
   const getAttendeeName = (uid: number | string) => {
-    return userList[uid] ? userList[uid]?.name : 'user';
+    return renderListRef.current?.[uid]?.name
+      ? renderListRef.current[uid].name
+      : 'user';
   };
 
-  React.useEffect(() => {
-    setActiveLiveStreamRequest(
-      filterObject(
-        currLiveStreamRequest,
-        ([k, v]) => v?.status === requestStatus.AwaitingAction,
-      ),
-    );
-  }, [currLiveStreamRequest]);
+  const addOrUpdateLiveStreamRequest = (
+    userUID: string,
+    payload: Partial<raiseHandItemInterface>,
+  ) => {
+    if (userUID && !isEmptyObject(payload)) {
+      const userId = `${userUID}`;
+      setRaiseHandList((oldRaisedHandList) => ({
+        ...oldRaisedHandList,
+        [userId]: {
+          raised: payload?.raised || RaiseHandValue.FALSE,
+          ts: payload?.ts || Date.now(),
+          role:
+            payload?.role ||
+            oldRaisedHandList[userId]?.role ||
+            ClientRole.Audience,
+        },
+      }));
+    }
+  };
+
+  const changeClientRoleTo = (newRole: ClientRole) => {
+    updateRtcProps(newRole);
+  };
+
+  const UpdtLocStateAndBCastAttr = (newRole: ClientRole, ts: number) => {
+    switch (newRole) {
+      case ClientRole.Audience:
+        addOrUpdateLiveStreamRequest(localUidRef.current, {
+          raised: RaiseHandValue.FALSE,
+          ts: ts,
+          role: ClientRole.Audience,
+        });
+        // Audience notfies all host when request is rejected
+        CustomEvents.send(EventNames.RAISED_ATTRIBUTE, {
+          action: LiveStreamControlMessageEnum.notifyHostsInChannel,
+          level: EventLevel.LEVEL2,
+          value: RaiseHandValue.FALSE,
+        });
+        break;
+      case ClientRole.Broadcaster:
+        // Update local state
+        addOrUpdateLiveStreamRequest(localUidRef.current, {
+          raised: RaiseHandValue.TRUE,
+          ts: ts,
+          role: ClientRole.Broadcaster,
+        });
+        // Audience notfies all host when request is approved
+        CustomEvents.send(EventNames.RAISED_ATTRIBUTE, {
+          action: LiveStreamControlMessageEnum.notifyHostsInChannel,
+          value: RaiseHandValue.TRUE,
+          level: EventLevel.LEVEL2,
+        });
+      default:
+        break;
+    }
+  };
+
+  // Get feeback for performance wise from @nitesh
+  const pendingRequests = filterObject(
+    raiseHandList,
+    ([k, v]) =>
+      v?.raised === RaiseHandValue.TRUE && v?.role == ClientRole.Audience,
+  );
 
   React.useEffect(() => {
     // Get the time timestamp of recent request
-    const recentRequest = Object.values(activeLiveStreamRequest).sort(
+    const recentRequest = Object.values(pendingRequests).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) {
+    if (Object.keys(pendingRequests).length === 0) {
       setPendingRequestToReview(false);
     }
-  }, [activeLiveStreamRequest]);
+  }, [raiseHandList]);
 
   React.useEffect(() => {
     if (
-      // If active requests and last seen is less than last message received
-      Object.keys(activeLiveStreamRequest).length !== 0 &&
-      lastRequestReceivedTimestamp >= lastCheckedRequestTimestamp
+      // Only true host should see the pending request
+      Object.keys(pendingRequests).length !== 0 &&
+      lastRequestReceivedTimestamp >= lastCheckedRequestTimestamp &&
+      isHost
     ) {
       setPendingRequestToReview(true);
     } else {
@@ -119,289 +179,253 @@ export const LiveStreamContextProvider = (props: liveStreamPropsInterface) => {
     }
   }, [lastRequestReceivedTimestamp, lastCheckedRequestTimestamp]);
 
+  /** ******* SETTING UP ROLES BEGINS ******* */
   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) => {
+    CustomEvents.on(EventNames.ROLE_ATTRIBUTE, (data) => {
+      setRaiseHandList((prevState) => {
         return {
-          ...acc,
-          [item.uid]: {
-            uid: item.uid,
-            ts: new Date().getTime(),
-            status:
-              item.status === attrRequestStatus.RaiseHand_Approved
-                ? requestStatus.Approved
-                : requestStatus.AwaitingAction,
+          ...prevState,
+          [data.sender]: {
+            ...prevState[data.sender],
+            role:
+              data.payload.value in ClientRole
+                ? parseInt(data.payload.value)
+                : ClientRole.Audience,
           },
         };
-      }, {});
-    setLiveStreamRequest((oldLiveStreamRequest) => ({
-      ...oldLiveStreamRequest,
-      ...initialRequests,
-    }));
-  }, [uidsOfInitialRequests]);
+      });
+    });
+  }, []);
+
+  React.useEffect(() => {
+    if (!callActive || !hasUserJoinedRTM) return;
+    CustomEvents.send(EventNames.ROLE_ATTRIBUTE, {
+      level: EventLevel.LEVEL2,
+      value: rtcProps.role in ClientRole ? rtcProps.role : ClientRole.Audience,
+    });
+    setRaiseHandList((prevState) => {
+      return {
+        ...prevState,
+        [localUid]: {
+          ...prevState[localUid],
+          role:
+            rtcProps.role in ClientRole ? rtcProps.role : ClientRole.Audience,
+        },
+      };
+    });
+  }, [callActive, rtcProps.role, hasUserJoinedRTM]);
+
+  /** ******* SETTING UP ROLES ENDS ********/
 
-  // Events listening section
+  /** ******* EVENT LISTENERS SECTION BEGINS ******* */
 
   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;
-        }
+    /** ********************** HOST EVENTS SECTION BEGINS ********************** */
+    CustomEvents.on(EventNames.RAISED_ATTRIBUTE, (data) => {
+      if (!isHost) return;
+      switch (data?.payload?.action) {
+        // 1. Host can receive raise hand request with true or false value
+        case LiveStreamControlMessageEnum.raiseHandRequest:
+          switch (data?.payload?.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 (data.payload.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;
+      }
+    });
+    /** ********************** HOST EVENTS SECTION ENDS ********************** */
+
+    /** ********************** AUDIENCE EVENTS SECTION BEGINS ********************** */
+    // 1. Audience receives this when the request is accepted by host
+    CustomEvents.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);
       },
     );
-    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;
+    /** 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
+     */
+    CustomEvents.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);
       },
     );
+    // 3. Audience when receives kickUser notifies all host when is kicked out
+    CustomEvents.on(controlMessageEnum.kickUser, (data) => {
+      // Audience updates its local attributes and notfies all host when they(audience) are kicked out
+      UpdtLocStateAndBCastAttr(ClientRole.Audience, data.ts);
+    });
+    /** ********************** AUDIENCE EVENTS SECTION ENDS ********************** */
+  }, []);
 
-    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);
-  };
+  /** ******* EVENT LISTENERS SECTION ENDS ******* */
 
-  /****************** HOST CONTROLS ******************
-   * Host controls for Live Streaming
+  /** ******* HOST CONTROLS SECTION BEGINS ******* */
+  /* 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,
+  const hostApprovesRequestOfUID = (uid: UidType) => {
+    addOrUpdateLiveStreamRequest(`${uid}`, {
+      raised: RaiseHandValue.TRUE,
       ts: new Date().getTime(),
-      status: requestStatus.Cancelled,
     });
-    sendControlMessageToUid(
+    CustomEvents.send(
       LiveStreamControlMessageEnum.raiseHandRequestAccepted,
+      {},
       uid,
     );
   };
 
-  const hostRejectsRequestOfUID = (uid: number | string) => {
-    addOrUpdateLiveStreamRequest({
-      uid,
+  const hostRejectsRequestOfUID = (uid: UidType) => {
+    addOrUpdateLiveStreamRequest(`${uid}`, {
+      raised: RaiseHandValue.FALSE,
       ts: new Date().getTime(),
-      status: requestStatus.Cancelled,
     });
-    sendControlMessageToUid(
+    CustomEvents.send(
       LiveStreamControlMessageEnum.raiseHandRequestRejected,
+      {},
       uid,
     );
   };
 
-  /****************** AUDIENCE CONTROLS ****************
+  /** ******* HOST CONTROLS SECTION ENDS ******* */
+
+  /** ******* AUDIENCE CONTROLS SECTION BEGINS *******
    * 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 = () => {
+  const audienceSendsRequest = async (): Promise<void> => {
+    // If hand is already raised, skip the call
+    if (raiseHandList[localUidRef.current]?.raised === RaiseHandValue.TRUE)
+      return;
     showToast(LSNotificationObject.RAISE_HAND_REQUEST);
-    setRaiseHandRequestActive(true);
-    sendControlMessage(LiveStreamControlMessageEnum.raiseHandRequest);
-    updateLocalUserAttributes(attrRequestStatus.RaiseHand_AwaitingAction);
+    CustomEvents.send(EventNames.RAISED_ATTRIBUTE, {
+      action: LiveStreamControlMessageEnum.raiseHandRequest,
+      level: EventLevel.LEVEL2,
+      value: RaiseHandValue.TRUE,
+    });
+    // Update local state
+    addOrUpdateLiveStreamRequest(localUidRef.current, {
+      raised: RaiseHandValue.TRUE,
+      ts: new Date().getTime(),
+    });
   };
 
-  const audienceRecallsRequest = () => {
+  const audienceRecallsRequest = async (): Promise<void> => {
+    // If hand is already down, skip the call
+    if (raiseHandList[localUidRef.current]?.raised === RaiseHandValue.FALSE)
+      return;
     /**
      * if: Check if request is already approved
-     * else: Audience Request was not approved by host, and was in 'Awaiting Action' status
+     * else: Audience Request was not approved by host, and was pending
      */
     if (
-      localUserRef &&
-      localUserRef.current?.status === requestStatus.Approved
+      raiseHandList[localUidRef.current]?.role == ClientRole.Broadcaster &&
+      raiseHandList[localUidRef.current]?.raised === RaiseHandValue.TRUE
     ) {
-      screenshareContextInstance?.stopUserScreenShare(); // This will not exist on ios
-      setRaiseHandRequestActive(false);
-      /// Change role and send message in channel notifying the same
+      screenshareContextInstanceRef?.current?.stopUserScreenShare(); // This will not exist on ios
+      // Change role
       changeClientRoleTo(ClientRole.Audience);
-      notifyAllHostsInChannel(
-        LiveStreamControlMessageEnum.notifyAllRequestRejected,
-      );
-    } else {
-      setRaiseHandRequestActive(false);
-      // Send message in channel to withdraw the request
-      sendControlMessage(LiveStreamControlMessageEnum.raiseHandRequestRecall);
     }
-    updateLocalUserAttributes(attrRequestTypes.none);
+    UpdtLocStateAndBCastAttr(ClientRole.Audience, new Date().getTime());
     showToast(LSNotificationObject.RAISE_HAND_REQUEST_RECALL_LOCAL);
   };
 
-  const updateLocalUserAttributes = (
-    value: attrRequestTypes | attrRequestStatus,
-  ) => {
-    addOrUpdateLocalUserAttributes([{key: 'requests', value: value}]);
-  };
+  /** ******* AUDIENCE CONTROLS SECTION ENDS ******* */
 
   return (
     <LiveStreamContext.Provider
       value={{
         setLastCheckedRequestTimestamp,
         isPendingRequestToReview,
-        currLiveStreamRequest,
+        raiseHandList,
         hostApprovesRequestOfUID,
         hostRejectsRequestOfUID,
         audienceSendsRequest,
         audienceRecallsRequest,
-        raiseHandRequestActive,
-        setRaiseHandRequestActive,
       }}>
       {props.children}
     </LiveStreamContext.Provider>