@100mslive/react-native-room-kit 1.1.4 → 1.1.6

package/src/components/Preview.tsx

@@ -20,7 +20,11 @@ import { HMSPreviewTile } from './HMSPreviewTile';
 import { HMSPreviewTitle } from './HMSPreviewTitle';
 import { HMSManageAudioOutput } from './HMSManageAudioOutput';
 import { HMSPreviewNetworkQuality } from './HMSPreviewNetworkQuality';
-import { useCanPublishVideo, useHMSActions } from '../hooks-sdk';
+import {
+  useCanPublishAudio,
+  useCanPublishVideo,
+  useHMSActions,
+} from '../hooks-sdk';
 import { HMSPreviewHLSLiveIndicator } from './HMSPreviewHLSLiveIndicator';
 import { CompanyLogo } from './CompanyLogo';
 import {
@@ -30,6 +34,9 @@ import {
 } from '../hooks-util';
 import { HMSKeyboardAvoidingView } from './HMSKeyboardAvoidingView';
 import { hexToRgbA } from '../utils/theme';
+import { HMSManageNoiseCancellation } from './HMSManageNoiseCancellation';
+import { useSelector } from 'react-redux';
+import type { RootState } from '../redux';
 
 const backButtonEdges = ['top'] as const;
 const headerEdges = ['top', 'left', 'right'] as const;
@@ -88,6 +95,35 @@ export const Preview = ({
     setupAudioVideoOnPreview().then((r) => console.log(r));
   }, []);
 
+  const canPublishAudio = useCanPublishAudio();
+  const isLocalAudioMuted = useSelector(
+    (state: RootState) => state.hmsStates.isLocalAudioMuted
+  );
+
+  const [isNCAvailable, setIsNCAvailable] = React.useState(false);
+
+  const noiseCancellationPlugin = useSelector(
+    (state: RootState) => state.hmsStates.noiseCancellationPlugin
+  );
+
+  useEffect(() => {
+    if (noiseCancellationPlugin) {
+      let isMounted = true;
+
+      noiseCancellationPlugin.isNoiseCancellationAvailable().then((r) => {
+        if (isMounted) {
+          setIsNCAvailable(r);
+        }
+      });
+      return () => {
+        isMounted = false;
+      };
+    }
+  }, [noiseCancellationPlugin]);
+
+  const showNoiseCancellationButton =
+    canPublishAudio && !isLocalAudioMuted && isNCAvailable;
+
   return (
     <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
       <View style={[styles.container, hmsRoomStyles.container]}>
@@ -138,13 +174,15 @@ export const Preview = ({
                 <View style={styles.micAndCameraControls}>
                   <HMSManageLocalAudio />
 
-                  <View style={styles.manageLocalVideoWrapper}>
+                  <View style={styles.manageLocalButtonWrapper}>
                     <HMSManageLocalVideo />
                   </View>
 
                   <HMSManageCameraRotation />
                 </View>
 
+                {showNoiseCancellationButton && <HMSManageNoiseCancellation />}
+
                 <HMSManageAudioOutput />
               </View>
             )}
@@ -201,8 +239,9 @@ const styles = StyleSheet.create({
   },
   micAndCameraControls: {
     flexDirection: 'row',
+    alignItems: 'center',
   },
-  manageLocalVideoWrapper: {
+  manageLocalButtonWrapper: {
     marginHorizontal: 16,
   },
   joinButtonRow: {

package/src/components/RoomSettingsModalContent.tsx

@@ -16,10 +16,12 @@ import {
   PollVoteIcon,
   RecordingIcon,
   ScreenShareIcon,
+  WaveIcon,
 } from '../Icons';
 import { BottomSheet, useBottomSheetActions } from './BottomSheet';
 import {
   isPublishingAllowed,
+  useHMSConferencingScreenConfig,
   useHMSLayoutConfig,
   useHMSRoomColorPalette,
   useHMSRoomStyleSheet,
@@ -27,6 +29,7 @@ import {
   useStartRecording,
 } from '../hooks-util';
 import {
+  useCanPublishAudio,
   useCanPublishScreen,
   useHMSActions,
   useIsAnyStreamingOn,
@@ -183,6 +186,72 @@ export const RoomSettingsModalContent: React.FC<
   };
   // #endregion
 
+  // #region Noise Cancellation Plugin
+  const noiseCancellationPlugin = useSelector(
+    (state: RootState) => state.hmsStates.noiseCancellationPlugin
+  );
+  const [isNoiseCancellationEnabled, setIsNoiseCancellationEnabled] =
+    React.useState(false);
+  const [isNoiseCancellationAvailable, setIsNoiseCancellationAvailable] =
+    React.useState(false);
+
+  const canPublishAudio = useCanPublishAudio();
+
+  const isLocalAudioMuted = useSelector(
+    (state: RootState) => state.hmsStates.isLocalAudioMuted
+  );
+
+  const showNoiseCancellationButton =
+    canPublishAudio && isNoiseCancellationAvailable;
+
+  React.useEffect(() => {
+    if (noiseCancellationPlugin) {
+      let mounted = true;
+
+      Promise.all(
+        [
+          noiseCancellationPlugin.isEnabled(),
+          noiseCancellationPlugin.isNoiseCancellationAvailable(),
+        ].map((promise) =>
+          promise
+            .then((value) => ({ status: 'fulfilled' as const, value }))
+            .catch((reason) => ({ status: 'rejected' as const, reason }))
+        )
+      ).then((results) => {
+        const [isEnabledResult, isAvailableResult] = results;
+        if (mounted) {
+          if (isEnabledResult && isEnabledResult.status === 'fulfilled') {
+            setIsNoiseCancellationEnabled(isEnabledResult.value);
+          }
+          if (isAvailableResult && isAvailableResult.status === 'fulfilled') {
+            setIsNoiseCancellationAvailable(isAvailableResult.value);
+          }
+        }
+      });
+
+      return () => {
+        mounted = false;
+      };
+    }
+  }, [noiseCancellationPlugin]);
+
+  const handleNoiseCancellation = () => {
+    // Register callback to be called when bottom sheet is hiddden
+    registerOnModalHideAction(() => {
+      if (!noiseCancellationPlugin || !isNoiseCancellationAvailable) return;
+
+      if (isNoiseCancellationEnabled) {
+        noiseCancellationPlugin.disable();
+      } else {
+        noiseCancellationPlugin.enable();
+      }
+    });
+
+    // Close the current bottom sheet
+    closeRoomSettingsModal();
+  };
+  // #endregion
+
   const changeName = () => {
     // Register callback to be called when bottom sheet is hiddden
     registerOnModalHideAction(() => {
@@ -207,6 +276,10 @@ export const RoomSettingsModalContent: React.FC<
       !!layoutConfig?.screens?.conferencing?.default?.elements?.brb
   );
 
+  const canRaiseHand = useHMSConferencingScreenConfig(
+    (confScreenConfig) => !!confScreenConfig?.elements?.hand_raise
+  );
+
   const isOnStage = useHMSLayoutConfig((layoutConfig) => {
     return !!layoutConfig?.screens?.conferencing?.default?.elements
       ?.on_stage_exp;
@@ -217,7 +290,7 @@ export const RoomSettingsModalContent: React.FC<
     return (allowed && allowed.length > 0) ?? false;
   });
 
-  const showHandRaiseIcon = !isOnStage && allowedToPublish;
+  const showHandRaiseIcon = canRaiseHand && !isOnStage && allowedToPublish;
 
   return (
     <View>
@@ -321,6 +394,17 @@ export const RoomSettingsModalContent: React.FC<
               isActive: false,
               hide: !canReadOrWritePoll,
             },
+            {
+              id: 'noise-cancellation',
+              icon: <WaveIcon style={{ width: 20, height: 20 }} />,
+              label: isNoiseCancellationEnabled
+                ? 'Noise Reduced'
+                : 'Reduce Noise',
+              pressHandler: handleNoiseCancellation,
+              isActive: isNoiseCancellationEnabled,
+              hide: !showNoiseCancellationButton,
+              disabled: isLocalAudioMuted,
+            },
           ].filter((itm) => !itm.hide),
           true
         ).map((itm, idx) => {

package/src/components/styles.ts

@@ -956,6 +956,10 @@ const styles = StyleSheet.create({
     height: '100%',
     zIndex: 10,
   },
+  noiseButton: {
+    marginLeft: 'auto',
+    marginRight: 16,
+  },
 });
 
 export { styles };

package/src/hooks-util.ts

@@ -155,7 +155,16 @@ import { getRoomLayout } from './modules/HMSManager';
 import { DEFAULT_THEME, DEFAULT_TYPOGRAPHY } from './utils/theme';
 import { NotificationTypes } from './types';
 import { KeyboardState, useSharedValue } from 'react-native-reanimated';
-import { useHMSActions } from './hooks-sdk';
+import {
+  useCanPublishAudio,
+  useCanPublishScreen,
+  useCanPublishVideo,
+  useHMSActions,
+} from './hooks-sdk';
+import {
+  useSafeAreaFrame,
+  useSafeAreaInsets,
+} from 'react-native-safe-area-context';
 
 export const useHMSListeners = (
   setPeerTrackNodes: React.Dispatch<React.SetStateAction<PeerTrackNode[]>>
@@ -1033,7 +1042,7 @@ export const useHMSRoleChangeRequest = (
 type SessionStoreListeners = Array<{ remove: () => void }>;
 
 export const useHMSSessionStoreListeners = (
-  gridViewRef: React.MutableRefObject<GridViewRefAttrs | null>
+  gridViewRef?: React.MutableRefObject<GridViewRefAttrs | null>
 ) => {
   const store = useStore<RootState>();
   const dispatch = useDispatch();
@@ -1054,7 +1063,7 @@ export const useHMSSessionStoreListeners = (
             // set value to the state to rerender the component to reflect changes
             dispatch(saveUserData({ spotlightTrackId: id }));
             // Scroll to start of the list
-            gridViewRef.current
+            gridViewRef?.current
               ?.getRegularTilesFlatlistRef()
               .current?.scrollToOffset({ animated: true, offset: 0 });
           }
@@ -1831,6 +1840,7 @@ export const useHMSConfig = () => {
 };
 
 export const useShowChatAndParticipants = () => {
+  const isHLSViewer = useIsHLSViewer();
   const dispatch = useDispatch();
   const { modalVisibleType, handleModalVisibleType: setModalVisible } =
     useModalType();
@@ -1839,7 +1849,8 @@ export const useShowChatAndParticipants = () => {
     (chatConfig) => chatConfig?.is_overlay
   );
   const canShowChat = useHMSConferencingScreenConfig(
-    (conferencingScreenConfig) => !!conferencingScreenConfig?.elements?.chat
+    (conferencingScreenConfig) =>
+      !!conferencingScreenConfig?.elements?.chat && !isHLSViewer
   );
   const canShowParticipants = useHMSConferencingScreenConfig(
     (conferencingScreenConfig) =>
@@ -2551,15 +2562,16 @@ export const useBackButtonPress = () => {
 };
 
 export const useLandscapeImmersiveMode = () => {
+  const isHLSViewer = useIsHLSViewer();
   const isLandscapeOrientation = useIsLandscapeOrientation();
 
   useEffect(() => {
-    if (isLandscapeOrientation) {
+    if (!isHLSViewer && isLandscapeOrientation) {
       WindowController.hideSystemBars();
 
       return WindowController.showSystemBars;
     }
-  }, [isLandscapeOrientation]);
+  }, [isHLSViewer, isLandscapeOrientation]);
 };
 
 export const useHLSCuedPolls = () => {
@@ -3034,3 +3046,170 @@ export const useAllowBlockingPeerFromChat = () => {
     (config) => config?.real_time_controls?.can_block_user ?? false
   );
 };
+
+export const useCanShowRoomOptionsButton = () => {
+  const canPublishAudio = useCanPublishAudio();
+  const canPublishVideo = useCanPublishVideo();
+  const canPublishScreen = useCanPublishScreen();
+
+  const isViewer = !(canPublishAudio || canPublishVideo || canPublishScreen);
+
+  const editUsernameDisabled = useSelector(
+    (state: RootState) => state.app.editUsernameDisabled
+  );
+
+  const [isNoiseCancellationAvailable, setIsNoiseCancellationAvailable] =
+    useState(false);
+  const noiseCancellationPlugin = useSelector(
+    (state: RootState) => state.hmsStates.noiseCancellationPlugin
+  );
+  useEffect(() => {
+    if (noiseCancellationPlugin) {
+      let mounted = true;
+
+      noiseCancellationPlugin
+        .isNoiseCancellationAvailable()
+        .then((isAvailable) => {
+          if (mounted) {
+            setIsNoiseCancellationAvailable(isAvailable);
+          }
+        });
+
+      return () => {
+        mounted = false;
+      };
+    }
+  }, [noiseCancellationPlugin]);
+
+  const canShowBRB = useHMSLayoutConfig(
+    (layoutConfig) =>
+      !!layoutConfig?.screens?.conferencing?.default?.elements?.brb
+  );
+
+  const canStartRecording = useSelector(
+    (state: RootState) =>
+      !!state.hmsStates.localPeer?.role?.permissions?.browserRecording
+  );
+
+  const canReadOrWritePoll = useSelector((state: RootState) => {
+    const permissions = state.hmsStates.localPeer?.role?.permissions;
+    return permissions?.pollRead || permissions?.pollWrite;
+  });
+
+  const { canShowParticipants } = useShowChatAndParticipants();
+
+  const canEditUsernameFromRoomModal = isViewer && !editUsernameDisabled;
+
+  const canShowOptions =
+    canShowParticipants ||
+    canPublishScreen ||
+    canShowBRB ||
+    canStartRecording ||
+    canEditUsernameFromRoomModal ||
+    canReadOrWritePoll ||
+    isNoiseCancellationAvailable;
+
+  return canShowOptions;
+};
+
+export const useHLSViewsConstraints = () => {
+  const hlsFullScreen = useSelector(
+    (state: RootState) => state.app.hlsFullScreen
+  );
+  const isLandscapeOrientation = useIsLandscapeOrientation();
+  const { width: safeAreaWidthFrame, height: safeAreaHeightFrame } =
+    useSafeAreaFrame();
+  const {
+    top: topInset,
+    bottom: bottomInset,
+    left: leftInset,
+    right: rightInset,
+  } = useSafeAreaInsets();
+
+  const playerWrapperConstraints = hlsFullScreen
+    ? {
+        width: safeAreaWidthFrame - leftInset - rightInset,
+        height: isLandscapeOrientation
+          ? safeAreaHeightFrame
+          : safeAreaHeightFrame - topInset - bottomInset,
+      }
+    : {
+        width: isLandscapeOrientation
+          ? (safeAreaWidthFrame - leftInset - rightInset) * 0.6
+          : safeAreaWidthFrame,
+        height: isLandscapeOrientation
+          ? safeAreaHeightFrame
+          : (safeAreaWidthFrame * 9) / 16,
+      };
+
+  const chatWrapperConstraints = {
+    width: isLandscapeOrientation
+      ? safeAreaWidthFrame - playerWrapperConstraints.width - leftInset
+      : playerWrapperConstraints.width,
+    height: isLandscapeOrientation
+      ? playerWrapperConstraints.height
+      : safeAreaHeightFrame - playerWrapperConstraints.height - topInset,
+  };
+
+  const descriptionPaneConstraints = chatWrapperConstraints;
+
+  return {
+    playerWrapperConstraints,
+    chatWrapperConstraints,
+    descriptionPaneConstraints,
+  };
+};
+
+export const useHLSPlayerConstraints = () => {
+  const hlsFullScreen = useSelector(
+    (state: RootState) => state.app.hlsFullScreen
+  );
+  const isLandscapeOrientation = useIsLandscapeOrientation();
+
+  const resolution = useHMSHLSPlayerResolution();
+
+  const { playerWrapperConstraints } = useHLSViewsConstraints();
+
+  const wrapperWidth = playerWrapperConstraints.width;
+  const wrapperHeight = playerWrapperConstraints.height;
+
+  if (!resolution) {
+    return {
+      width: wrapperWidth,
+      height: wrapperHeight,
+    };
+  }
+
+  const sr = resolution.width / resolution.height; // stream width/height ratio
+  const wr = wrapperWidth / wrapperHeight; // Wrapper width/height ratio
+
+  /**
+   * Handling Landscape Orientation for both Full and Normal screen
+   */
+  if (isLandscapeOrientation) {
+    return sr > 1 || sr > wr
+      ? {
+          width: wrapperWidth,
+          height: wrapperWidth / sr,
+        }
+      : {
+          width: sr * wrapperHeight,
+          height: wrapperHeight,
+        };
+  }
+
+  /**
+   * Handling Portrait Orientation
+   */
+  if (hlsFullScreen) {
+    return {
+      width: sr > wr ? wrapperWidth : wrapperHeight * sr,
+      height: sr > wr ? wrapperWidth / sr : wrapperHeight,
+    };
+  }
+
+  return {
+    width: wrapperHeight * sr,
+    height: wrapperHeight,
+  };
+};

package/src/redux/actionTypes.ts

@@ -109,6 +109,10 @@ const SET_INITIAL_ROLE = 'SET_INITIAL_ROLE';
 
 const SET_CHAT_PEER_BLACKLIST = 'SET_CHAT_PEER_BLACKLIST';
 
+const SET_HLS_DESC_PANE_VISIBLE = 'SET_HLS_DESC_PANE_VISIBLE';
+
+const SET_HLS_FULL_SCREEN = 'SET_HLS_FULL_SCREEN';
+
 const FILTER_OUT_BLOCKED_MSGS = 'FILTER_OUT_BLOCKED_MSGS';
 
 export default {
@@ -158,6 +162,8 @@ export default {
   SET_SELECTED_MESSAGE_FOR_ACTION,
   SET_INITIAL_ROLE,
   SET_CHAT_PEER_BLACKLIST,
+  SET_HLS_DESC_PANE_VISIBLE,
+  SET_HLS_FULL_SCREEN,
   FILTER_OUT_BLOCKED_MSGS,
 };
 
@@ -185,6 +191,7 @@ export enum HmsStateActionTypes {
   REPLACE_PARTICIPANTS_LIST = 'REPLACE_PARTICIPANTS_LIST',
   SET_ACTIVE_SPEAKERS = 'SET_ACTIVE_SPEAKERS',
   SET_RECONNECTING = 'SET_RECONNECTING',
+  SET_NOISE_CANCELLATION_PLUGIN = 'SET_NOISE_CANCELLATION_PLUGIN',
   SET_INITIAL_ROLE = 'SET_INITIAL_ROLE',
 }
 

package/src/redux/actions/index.ts

@@ -3,6 +3,7 @@ import type {
   HMSLocalAudioStats,
   HMSLocalVideoStats,
   HMSMessage,
+  HMSNoiseCancellationPlugin,
   HMSPeer,
   HMSPoll,
   HMSPollQuestion,
@@ -431,6 +432,13 @@ export const setReconnecting = (reconnecting: boolean) => ({
   reconnecting,
 });
 
+export const setNoiseCancellationPlugin = (
+  noiseCancellationPlugin: HMSNoiseCancellationPlugin
+) => ({
+  type: HmsStateActionTypes.SET_NOISE_CANCELLATION_PLUGIN,
+  noiseCancellationPlugin,
+});
+
 export const setHandleBackButton = (handleBackButton?: boolean) => ({
   type: actionTypes.SET_HANDLE_BACK_BUTTON,
   payload: { handleBackButton },
@@ -468,6 +476,16 @@ export const filterOutMsgsFromBlockedPeers = (chatPeerBlacklist: string[]) => ({
   payload: chatPeerBlacklist,
 });
 
+export const setHlsDescriptionPaneVisible = (visible: boolean) => ({
+  type: actionTypes.SET_HLS_DESC_PANE_VISIBLE,
+  payload: { visible },
+});
+
+export const setHlsFullScreen = (fullScreen: boolean) => ({
+  type: actionTypes.SET_HLS_FULL_SCREEN,
+  payload: { fullScreen },
+});
+
 /**
  * POLLS
  */

package/src/redux/reducers/appState.ts

@@ -62,6 +62,8 @@ type IntialStateType = {
   selectedMessageForAction: null | HMSMessage;
   initialRole: HMSRole | null;
   chatPeerBlacklist: string[]; // list of userIds
+  hlsDescriptionPaneVisible: boolean;
+  hlsFullScreen: boolean;
 };
 
 const INITIAL_STATE: IntialStateType = {
@@ -99,6 +101,8 @@ const INITIAL_STATE: IntialStateType = {
   selectedMessageForAction: null,
   initialRole: null,
   chatPeerBlacklist: [],
+  hlsDescriptionPaneVisible: false,
+  hlsFullScreen: false,
 };
 
 const appReducer = (
@@ -357,6 +361,18 @@ const appReducer = (
           action.payload.chatPeerBlacklist ?? INITIAL_STATE.chatPeerBlacklist,
       };
     }
+    case ActionTypes.SET_HLS_DESC_PANE_VISIBLE: {
+      return {
+        ...state,
+        hlsDescriptionPaneVisible: action.payload.visible,
+      };
+    }
+    case ActionTypes.SET_HLS_FULL_SCREEN: {
+      return {
+        ...state,
+        hlsFullScreen: action.payload.fullScreen,
+      };
+    }
     case HmsStateActionTypes.CLEAR_STATES:
       return INITIAL_STATE;
     default:

package/src/redux/reducers/hmsStates.ts

@@ -1,5 +1,6 @@
 import type {
   HMSLocalPeer,
+  HMSNoiseCancellationPlugin,
   HMSPeer,
   HMSRole,
   HMSRoleChangeRequest,
@@ -29,7 +30,8 @@ type ActionType =
   | AddUpdateParticipant
   | ReplaceParticipantsList
   | SetActiveSpeakers
-  | SetReconnecting;
+  | SetReconnecting
+  | SetNoiseCancellationPlugin;
 
 type SetRoomAction = {
   type: HmsStateActionTypes.SET_ROOM_STATE;
@@ -131,6 +133,11 @@ type SetReconnecting = {
   reconnecting: boolean;
 };
 
+type SetNoiseCancellationPlugin = {
+  type: HmsStateActionTypes.SET_NOISE_CANCELLATION_PLUGIN;
+  noiseCancellationPlugin: HMSNoiseCancellationPlugin;
+};
+
 type IntialStateType = {
   isLocalAudioMuted: boolean | undefined;
   isLocalVideoMuted: boolean | undefined;
@@ -145,6 +152,7 @@ type IntialStateType = {
   previewPeersList: HMSPeer[];
   layoutConfig: Layout[] | null;
   roleChangeRequest: HMSRoleChangeRequest | null;
+  noiseCancellationPlugin: HMSNoiseCancellationPlugin | null;
 };
 
 const INITIAL_STATE: IntialStateType = {
@@ -161,6 +169,7 @@ const INITIAL_STATE: IntialStateType = {
   previewPeersList: [],
   layoutConfig: null,
   roleChangeRequest: null,
+  noiseCancellationPlugin: null,
 };
 
 const hmsStatesReducer = (
@@ -557,6 +566,11 @@ const hmsStatesReducer = (
         ...state,
         reconnecting: action.reconnecting,
       };
+    case HmsStateActionTypes.SET_NOISE_CANCELLATION_PLUGIN:
+      return {
+        ...state,
+        noiseCancellationPlugin: action.noiseCancellationPlugin,
+      };
     case HmsStateActionTypes.CLEAR_STATES:
       return INITIAL_STATE;
     default:

package/src/utils/functions.ts

@@ -445,6 +445,7 @@ export function groupIntoPairs(totalNumber: number) {
 
 /**
  * @param list array of items
+ * @param fill boolean to fill the last triplet with `undefined` if it has less than 3 items
  * @returns list of triplets
  *
  * Example: If list is `[a, b, c, d]`, then output will be `[ [a, b, c], [d] ]`

package/src/utils/hooks.ts

@@ -111,9 +111,16 @@ export const useFetchLeaderboardResponse = (
   const dispatch = useDispatch();
   const hmsInstance = useHMSInstance();
 
-  const hasPollWritePermission = useSelector((state: RootState) => {
-    const permissions = state.hmsStates.localPeer?.role?.permissions;
-    return permissions?.pollWrite;
+  const localPeerPollInitiator = useSelector((state: RootState) => {
+    if (!pollId) return null;
+    const localPeerUserId = state.hmsStates.localPeer?.customerUserID;
+    const pollInitiatorUserID =
+      state.polls.polls[pollId]?.createdBy?.customerUserID;
+    return (
+      localPeerUserId &&
+      pollInitiatorUserID &&
+      localPeerUserId === pollInitiatorUserID
+    );
   });
 
   const leaderboardData = useSelector((state: RootState) => {
@@ -134,7 +141,7 @@ export const useFetchLeaderboardResponse = (
           pollId,
           5,
           1, // Indexing starts from 1
-          !hasPollWritePermission // fetchCurrentUser only if user has only pollRead permission
+          !localPeerPollInitiator // fetchCurrentUser only if user is voter, and not poll initiator
         );
         if (mounted) {
           dispatch(addLeaderboard(pollId, response));
@@ -146,7 +153,7 @@ export const useFetchLeaderboardResponse = (
     return () => {
       mounted = false;
     };
-  }, [pollId, leaderboardDataExist, hasPollWritePermission]);
+  }, [pollId, leaderboardDataExist, localPeerPollInitiator]);
 
   return leaderboardData;
 };
@@ -167,10 +174,6 @@ export const useLeaderboardSummaryData = (
       localPeerUserId === pollInitiatorUserID
     );
   });
-  const canCreateOrEndPoll = useSelector((state: RootState) => {
-    const permissions = state.hmsStates.localPeer?.role?.permissions;
-    return permissions?.pollWrite;
-  });
 
   const leaderboardData = useSelector((state: RootState) => {
     if (!pollId) return null;
@@ -237,9 +240,6 @@ export const useLeaderboardSummaryData = (
       : null;
 
   const voterSummaryData = useMemo(() => {
-    if (!localLeaderboardEntry || canCreateOrEndPoll) {
-      return null;
-    }
     return [
       [
         {