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

package/src/components/Participants/ParticipantsItem.tsx

@@ -2,10 +2,16 @@ import * as React from 'react';
 import { useSelector } from 'react-redux';
 import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
 import type { HMSLocalPeer, HMSPeer } from '@100mslive/react-native-hms';
+import { HMSPeerType } from '@100mslive/react-native-hms';
 
 import { isParticipantHostOrBroadcaster } from '../../utils/functions';
 import { useHMSRoomStyleSheet } from '../../hooks-util';
-import { HandIcon, NetworkQualityIcon, ThreeDotsIcon } from '../../Icons';
+import {
+  AnswerPhoneIcon,
+  HandIcon,
+  NetworkQualityIcon,
+  ThreeDotsIcon,
+} from '../../Icons';
 import { Menu } from '../MenuModal';
 import { ParticipantsItemOptions } from './ParticipantsItemOptions';
 import type { RootState } from '../../redux';
@@ -45,6 +51,7 @@ const _ParticipantsItem: React.FC<ParticipantsItemProps> = ({
   }));
 
   const show3Dots = selfHostOrBroadcaster && !peer.isLocal;
+  const isSIPPeerType = peer.type === HMSPeerType.SIP;
 
   const showOptions = () => setOptionsVisible(true);
 
@@ -52,7 +59,12 @@ const _ParticipantsItem: React.FC<ParticipantsItemProps> = ({
 
   return (
     <View style={styles.container}>
-      <Text testID={TestIds.participant_name} style={[styles.label, hmsRoomStyles.label]}>
+      <Text
+        testID={TestIds.participant_name}
+        style={[styles.label, hmsRoomStyles.label]}
+        ellipsizeMode="middle"
+        numberOfLines={1}
+      >
         {peer.name}
         {peer.isLocal ? ' (You)' : null}
       </Text>
@@ -70,7 +82,20 @@ const _ParticipantsItem: React.FC<ParticipantsItemProps> = ({
           </View>
         ) : null}
 
-        {peer.networkQuality &&
+        {isSIPPeerType ? (
+          <View
+            style={[
+              styles.control,
+              styles.iconWrapper,
+              hmsRoomStyles.iconWrapper,
+            ]}
+          >
+            <AnswerPhoneIcon style={styles.networkIcon} />
+          </View>
+        ) : null}
+
+        {!isSIPPeerType &&
+        peer.networkQuality &&
         peer.networkQuality.downlinkQuality >= 0 &&
         peer.networkQuality.downlinkQuality < 4 ? (
           <View
@@ -119,6 +144,7 @@ const styles = StyleSheet.create({
     justifyContent: 'space-between',
   },
   label: {
+    flexShrink: 1,
     fontSize: 14,
     lineHeight: 20,
     letterSpacing: 0.1,

package/src/components/Participants/ParticipantsItemOptions.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { StyleSheet, View } from 'react-native';
 import { useSelector } from 'react-redux';
 import type { HMSLocalPeer, HMSPeer } from '@100mslive/react-native-hms';
+import { HMSPeerType } from '@100mslive/react-native-hms';
 
 import {
   useHMSInstance,
@@ -156,25 +157,29 @@ const _ParticipantsItemOptions: React.FC<ParticipantsItemOptionsProps> = ({
     !insideHandRaiseGroup &&
     localPeerCanMuteTrack &&
     peerCanPublishAudio &&
-    peer.audioTrack?.isMute() === false;
+    peer.audioTrack?.isMute() === false &&
+    peer.type === HMSPeerType.REGULAR;
 
   const showUnmuteAudioOption =
     !insideHandRaiseGroup &&
     localPeerCanUnmuteTrack &&
     peerCanPublishAudio &&
-    peer.audioTrack?.isMute();
+    peer.audioTrack?.isMute() &&
+    peer.type === HMSPeerType.REGULAR;
 
   const showMuteVideoOption =
     !insideHandRaiseGroup &&
     localPeerCanMuteTrack &&
     peerCanPublishVideo &&
-    peer.videoTrack?.isMute() === false;
+    peer.videoTrack?.isMute() === false &&
+    peer.type === HMSPeerType.REGULAR;
 
   const showUnmuteVideoOption =
     !insideHandRaiseGroup &&
     localPeerCanUnmuteTrack &&
     peerCanPublishVideo &&
-    peer.videoTrack?.isMute();
+    peer.videoTrack?.isMute() &&
+    peer.type === HMSPeerType.REGULAR;
 
   const showBringOnStageOptions =
     offStageRoles && offStageRoles.includes(peer.role?.name || '');

package/src/components/PeerSettingsModalContent.tsx

@@ -1,19 +1,19 @@
 import React from 'react';
+import type { StyleProp, TextStyle, TouchableOpacityProps } from 'react-native';
 import {
-  View,
-  TouchableOpacity,
-  Text,
-  StyleSheet,
-  LayoutAnimation,
   InteractionManager,
+  LayoutAnimation,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
 } from 'react-native';
-import type { StyleProp, TextStyle, TouchableOpacityProps } from 'react-native';
 import { useDispatch, useSelector } from 'react-redux';
-import { HMSTrack } from '@100mslive/react-native-hms';
+import { HMSPeerType, HMSTrack } from '@100mslive/react-native-hms';
 
 import type { RootState } from '../redux';
-import { ModalTypes } from '../utils/types';
 import type { PeerTrackNode } from '../utils/types';
+import { ModalTypes } from '../utils/types';
 import { setInsetViewMinimized } from '../redux/actions';
 import { useHMSRoomStyle, useModalType } from '../hooks-util';
 import {
@@ -157,7 +157,9 @@ export const PeerSettingsModalContent: React.FC<
             ) : null}
 
             {/* If Peer's Audio is Unmuted and Local Peer has mute Permissions */}
-            {!isPeerAudioMute && localPeerPermissions?.mute ? (
+            {!isPeerAudioMute &&
+            localPeerPermissions?.mute &&
+            peer.type === HMSPeerType.REGULAR ? (
               <SettingItem
                 text={'Mute Audio'}
                 icon={<MicIcon muted={true} style={styles.customIcon} />}
@@ -180,7 +182,9 @@ export const PeerSettingsModalContent: React.FC<
             ) : null}
 
             {/* If Peer's Video is Unmuted and Local Peer has mute Permissions */}
-            {!isPeerVideoMute && localPeerPermissions?.mute ? (
+            {!isPeerVideoMute &&
+            localPeerPermissions?.mute &&
+            peer.type === HMSPeerType.REGULAR ? (
               <SettingItem
                 text={'Mute Video'}
                 icon={<CameraIcon muted={true} style={styles.customIcon} />}

package/src/components/PeerVideoTile/PeerNameAndNetwork.tsx

@@ -3,12 +3,17 @@ import { StyleSheet, Text, View } from 'react-native';
 import { HMSTrackSource } from '@100mslive/react-native-hms';
 
 import { hexToRgbA } from '../../utils/theme';
-import { NetworkQualityIcon, ScreenShareIcon } from '../../Icons';
+import {
+  AnswerPhoneIcon,
+  NetworkQualityIcon,
+  ScreenShareIcon,
+} from '../../Icons';
 import { useHMSRoomStyleSheet } from '../../hooks-util';
 import { TestIds } from '../../utils/constants';
 
 export interface PeerNameAndNetworkProps {
   name: string;
+  isSIPPeerType: boolean | undefined;
   isLocal: boolean | undefined;
   trackSource: HMSTrackSource | undefined;
   networkQuality: number | undefined;
@@ -16,6 +21,7 @@ export interface PeerNameAndNetworkProps {
 
 export const PeerNameAndNetwork: React.FC<PeerNameAndNetworkProps> = ({
   name,
+  isSIPPeerType,
   isLocal,
   trackSource,
   networkQuality,
@@ -41,24 +47,28 @@ export const PeerNameAndNetwork: React.FC<PeerNameAndNetworkProps> = ({
       <View style={[styles.contentContainer, hmsRoomStyles.contentContainer]}>
         {isScreenTrackSource ? (
           <ScreenShareIcon style={styles.screenShareIcon} />
+        ) : isSIPPeerType ? (
+          <AnswerPhoneIcon style={styles.phoneIcon} />
         ) : null}
 
         <Text
           testID={TestIds.tile_user_name}
           style={[styles.name, hmsRoomStyles.name]}
           numberOfLines={1}
-          ellipsizeMode={showTrackSource ? 'middle' : 'tail'}
+          ellipsizeMode={showTrackSource || isSIPPeerType ? 'middle' : 'tail'}
         >
           {name}
-          {isLocal ? ' (You)' : ''}
-          {showTrackSource ? `'s ${trackSource}` : ''}
+          {isLocal && ' (You)'}
+          {showTrackSource && `'s ${trackSource}`}
         </Text>
 
-        <NetworkQualityIcon
-          testID={TestIds.tile_network_icon}
-          quality={networkQuality}
-          style={styles.networkIcon}
-        />
+        {isSIPPeerType ? null : (
+          <NetworkQualityIcon
+            testID={TestIds.tile_network_icon}
+            quality={networkQuality}
+            style={styles.networkIcon}
+          />
+        )}
       </View>
     </View>
   );
@@ -76,6 +86,7 @@ const styles = StyleSheet.create({
     paddingVertical: 4,
     paddingHorizontal: 8,
     borderRadius: 8,
+    alignItems: 'center',
     marginLeft: 8, // left offset
     marginRight: 20 + 4 + 44, // network icon width + network icon left margin + 3 dots button width and horizontal margins
   },
@@ -91,6 +102,11 @@ const styles = StyleSheet.create({
     height: 20,
     marginRight: 6,
   },
+  phoneIcon: {
+    width: 16,
+    height: 16,
+    marginRight: 4,
+  },
   networkIcon: {
     marginLeft: 4,
   },

package/src/components/PeerVideoTile/PeerVideoTileView.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { Pressable, StyleSheet, View } from 'react-native';
 import {
+  HMSPeerType,
   HMSTrackSource,
   HMSTrackType,
   HMSVideoViewMode,
@@ -194,6 +195,7 @@ export const _PeerVideoTileView = React.forwardRef<
         {/* Handling showing Peer name */}
         {insetMode || isPipModeActive ? null : (
           <PeerNameAndNetwork
+            isSIPPeerType={peer.type === HMSPeerType.SIP}
             name={peer.name}
             isLocal={peer.isLocal}
             trackSource={trackSource}

package/src/components/PollAndQuizVoting.tsx

@@ -49,6 +49,18 @@ export const PollAndQuizVoting: React.FC<PollAndQuizVotingProps> = ({
     }
     return null;
   });
+  const pollId = selectedPoll?.pollId;
+  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 canCreateOrEndPoll = useSelector((state: RootState) => {
     const permissions = state.hmsStates.localPeer?.role?.permissions;
     return permissions?.pollWrite;
@@ -187,7 +199,7 @@ export const PollAndQuizVoting: React.FC<PollAndQuizVotingProps> = ({
         {selectedPoll &&
         selectedPoll.type === HMSPollType.quiz &&
         selectedPoll.state === HMSPollState.stopped &&
-        !canCreateOrEndPoll ? (
+        !localPeerPollInitiator ? (
           <React.Fragment>
             <VoterParticipationSummary pollId={selectedPoll.pollId} />
 

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/redux/actionTypes.ts

@@ -185,6 +185,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 },

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 [
       [
         {