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

package/src/components/HMSHLSNotStarted.tsx

@@ -18,7 +18,11 @@ export const HMSHLSNotStarted = () => {
 
   return (
     <View style={styles.container}>
-      <RadioIcon size="extra-large" containerStyle={styles.icon} />
+      <RadioIcon
+        size="extra-large"
+        containerStyle={styles.iconWrapper}
+        style={styles.icon}
+      />
       <Text style={[styles.title, hmsRoomStyles.title]}>
         Stream yet to start
       </Text>
@@ -36,20 +40,27 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
   },
-  icon: {
+  iconWrapper: {
+    width: 40,
+    height: 40,
+    borderRadius: 20,
     marginBottom: 24,
   },
+  icon: {
+    width: 24,
+    height: 24,
+  },
   title: {
-    fontSize: 24,
-    lineHeight: 32,
+    fontSize: 16,
+    lineHeight: 20,
     textAlign: 'center',
   },
   description: {
-    fontSize: 16,
-    lineHeight: 24,
+    fontSize: 14,
+    lineHeight: 20,
     letterSpacing: 0.5,
     textAlign: 'center',
-    marginTop: 8,
+    marginTop: 4,
   },
   taleLessSpaceAsYouCan: {
     flex: 0,

package/src/components/HMSKeyboardAvoidingView.tsx

@@ -12,12 +12,20 @@ import { useKeyboardState } from '../hooks-util';
 
 export interface HMSKeyboardAvoidingViewProps {
   style?: StyleProp<Animated.AnimateStyle<StyleProp<ViewStyle>>>;
+  styleWhenInactive?: ViewStyle;
+  styleWhenActive?: ViewStyle;
   bottomOffset?: number | SharedValue<number>;
 }
 
 export const HMSKeyboardAvoidingView: React.FC<
   HMSKeyboardAvoidingViewProps
-> = ({ children, style, bottomOffset = 0 }) => {
+> = ({
+  children,
+  style,
+  styleWhenInactive,
+  styleWhenActive,
+  bottomOffset = 0,
+}) => {
   const animatedKeyboard = useAnimatedKeyboard();
   const { keyboardState } = useKeyboardState();
 
@@ -27,14 +35,16 @@ export const HMSKeyboardAvoidingView: React.FC<
 
   const keyboardAvoidStyle = useAnimatedStyle(() => {
     const keyboardHeight = animatedKeyboard.height.value;
+    const keyboardHidden =
+      keyboardHeight <= initialPageY.value ||
+      keyboardState.value === KeyboardState.CLOSED;
     return {
+      ...(keyboardHidden ? styleWhenInactive : styleWhenActive),
       transform: [
         {
-          translateY:
-            keyboardHeight <= initialPageY.value ||
-            keyboardState.value === KeyboardState.CLOSED
-              ? 0 // Keep element at original `pageY` till and when keyboard height is less than `pageY`
-              : -(keyboardHeight - initialPageY.value),
+          translateY: keyboardHidden
+            ? 0 // Keep element at original `pageY` till and when keyboard height is less than `pageY`
+            : -(keyboardHeight - initialPageY.value),
         },
       ],
     };

package/src/components/HMSLiveViewerCount.tsx

@@ -5,17 +5,14 @@ import { Gesture, GestureDetector } from 'react-native-gesture-handler';
 
 import {
   useHMSRoomStyleSheet,
-  useIsHLSViewer,
   useShowChatAndParticipants,
 } from '../hooks-util';
 import { EyeIcon } from '../Icons';
-import { hexToRgbA } from '../utils/theme';
 import type { RootState } from '../redux';
 import { TestIds } from '../utils/constants';
 import { useIsAnyStreamingOn } from '../hooks-sdk';
 
 const _HMSLiveViewerCount = () => {
-  const isHLSViewer = useIsHLSViewer();
   const previewPeerCount = useSelector(
     (state: RootState) => state.hmsStates.room?.peerCount
   );
@@ -23,11 +20,8 @@ const _HMSLiveViewerCount = () => {
 
   const hmsRoomStyles = useHMSRoomStyleSheet((theme, typograhy) => ({
     viewers: {
-      backgroundColor: isHLSViewer
-        ? theme.palette.background_dim &&
-          hexToRgbA(theme.palette.background_dim, 0.64)
-        : undefined,
-      borderWidth: isHLSViewer ? 0 : 1,
+      backgroundColor: undefined,
+      borderWidth: 1,
       borderColor: theme.palette.border_bright,
     },
     count: {

package/src/components/HMSManageNoiseCancellation.tsx

@@ -0,0 +1,41 @@
+import { WaveIcon } from '../Icons';
+import React from 'react';
+import { PressableIcon } from './PressableIcon';
+import { styles } from './styles';
+import { useSelector } from 'react-redux';
+import type { RootState } from '../redux';
+
+export const HMSManageNoiseCancellation = () => {
+  const noiseCancellationPlugin = useSelector(
+    (state: RootState) => state.hmsStates.noiseCancellationPlugin
+  );
+  const [isNoiseCancellationEnabled, setIsNoiseCancellationEnabled] =
+    React.useState(false);
+
+  const handleButtonPress = async () => {
+    const isAvailable =
+      await noiseCancellationPlugin?.isNoiseCancellationAvailable();
+
+    if (!noiseCancellationPlugin && isAvailable) {
+      console.error('Noise Cancellation Plugin not found');
+      return;
+    }
+
+    if (isNoiseCancellationEnabled) {
+      await noiseCancellationPlugin?.disable();
+    } else {
+      await noiseCancellationPlugin?.enable();
+    }
+    setIsNoiseCancellationEnabled(!isNoiseCancellationEnabled);
+  };
+
+  return (
+    <PressableIcon
+      style={styles.noiseButton}
+      onPress={handleButtonPress}
+      active={isNoiseCancellationEnabled}
+    >
+      <WaveIcon />
+    </PressableIcon>
+  );
+};

package/src/components/HMSNotification.tsx

@@ -4,7 +4,7 @@ import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
 import type { StyleProp, ViewStyle, TextStyle, TextProps } from 'react-native';
 import { Gesture, GestureDetector } from 'react-native-gesture-handler';
 
-import { useHMSRoomStyleSheet } from '../hooks-util';
+import { useHMSRoomStyleSheet, useIsHLSViewer } from '../hooks-util';
 import { ChatIcon, CloseIcon } from '../Icons';
 import { UnmountAfterDelay } from './UnmountAfterDelay';
 import { removeNotification } from '../redux/actions';
@@ -39,20 +39,26 @@ export const HMSNotification: React.FC<HMSNotificationProps> = ({
   dismissable = false,
 }) => {
   const dispatch = useDispatch();
+  const isHLSViewer = useIsHLSViewer();
 
-  const hmsRoomStyles = useHMSRoomStyleSheet((theme, typography) => ({
-    container: {
-      backgroundColor: theme.palette.surface_dim,
-    },
-    text: {
-      color: theme.palette.on_surface_high,
-      fontFamily: `${typography.font_family}-SemiBold`,
-    },
-    description: {
-      color: theme.palette.on_surface_medium,
-      fontFamily: `${typography.font_family}-Regular`,
-    },
-  }));
+  const hmsRoomStyles = useHMSRoomStyleSheet(
+    (theme, typography) => ({
+      container: {
+        backgroundColor: isHLSViewer
+          ? theme.palette.surface_default
+          : theme.palette.surface_dim,
+      },
+      text: {
+        color: theme.palette.on_surface_high,
+        fontFamily: `${typography.font_family}-SemiBold`,
+      },
+      description: {
+        color: theme.palette.on_surface_medium,
+        fontFamily: `${typography.font_family}-Regular`,
+      },
+    }),
+    [isHLSViewer]
+  );
 
   const dismissNotification =
     onDismiss ||

package/src/components/HMSNotifications.tsx

@@ -13,6 +13,7 @@ import { AlertTriangleIcon } from '../Icons';
 import { HMSReconnectingNotification } from './HMSReconnectingNotification';
 import { useIsLandscapeOrientation } from '../utils/dimension';
 import { HMSPollsQuizzesNotification } from './HMSPollsQuizzesNotification';
+import { useIsHLSViewer } from '../hooks-util';
 
 export interface HMSNotificationsProps {}
 
@@ -25,6 +26,7 @@ export const HMSNotifications: React.FC<HMSNotificationsProps> = () => {
   const isLocalScreenShared = useSelector(
     (state: RootState) => state.hmsStates.isLocalScreenShared
   );
+  const isHLSViewer = useIsHLSViewer();
   const isLandscapeOrientation = useIsLandscapeOrientation();
 
   // notifications is a stack, first will appear last
@@ -84,7 +86,7 @@ export const HMSNotifications: React.FC<HMSNotificationsProps> = () => {
   return (
     <View
       style={[
-        isLandscapeOrientation
+        isLandscapeOrientation && !isHLSViewer
           ? styles.absoluteLandscapeContainer
           : styles.absoluteContainer,
         { paddingTop: (notifications.length - 1) * 16 },

package/src/components/HMSOverlayChatView.tsx

@@ -32,11 +32,13 @@ const colors = [
 ];
 const colorLocations = [0, 0.4, 1];
 
-export interface HLSChatViewProps {
+export interface HMSOverlayChatViewProps {
   offset?: SharedValue<number>;
 }
 
-export const HLSChatView: React.FC<HLSChatViewProps> = ({ offset }) => {
+export const HMSOverlayChatView: React.FC<HMSOverlayChatViewProps> = ({
+  offset,
+}) => {
   const footerHeight = useFooterHeight();
   const hmsNotificationsHeight = useHMSNotificationsHeight();
   const { chatState } = useHMSChatState();
@@ -77,7 +79,12 @@ export const HLSChatView: React.FC<HLSChatViewProps> = ({ offset }) => {
         {chatState.enabled ? (
           <>
             <View style={styles.filterSheetWrapper}>
-              <ChatFilterBottomSheetOpener insetMode={true} />
+              <ChatFilterBottomSheetOpener
+                overlay={true}
+                useFilterModal={true}
+                showActionBtn={true}
+                useActionModal={true}
+              />
             </View>
 
             {isLocalPeerBlockedFromChat ? (

package/src/components/Meeting.tsx

@@ -15,6 +15,7 @@ import {
   useHMSReconnection,
   useHMSRemovedFromRoomUpdate,
   useHMSRoomStyle,
+  useIsHLSViewer,
   useLandscapeImmersiveMode,
   usePIPListener,
   useSetDefaultChatRecipient,
@@ -22,6 +23,7 @@ import {
 import { MeetingScreenContent } from './MeetingScreenContent';
 import { HMSHLSStreamLoading } from './HMSHLSStreamLoading';
 import type { RootState } from '../redux';
+import { HLSViewerScreenContent } from './HLSViewerScreenContent';
 
 interface MeetingProps {
   peerTrackNodes: Array<PeerTrackNode>;
@@ -32,6 +34,8 @@ export const Meeting: React.FC<MeetingProps> = ({ peerTrackNodes }) => {
     (state: RootState) => state.app.startingHLSStream
   );
 
+  const isHLSViewer = useIsHLSViewer();
+
   // TODO: Fetch latest Room and localPeer on mount of this component?
 
   useFetchHMSRoles();
@@ -81,7 +85,11 @@ export const Meeting: React.FC<MeetingProps> = ({ peerTrackNodes }) => {
 
   return (
     <View style={[styles.container, containerStyles]}>
-      <MeetingScreenContent peerTrackNodes={peerTrackNodes} />
+      {isHLSViewer ? (
+        <HLSViewerScreenContent />
+      ) : (
+        <MeetingScreenContent peerTrackNodes={peerTrackNodes} />
+      )}
     </View>
   );
 };

package/src/components/MeetingScreenContent.tsx

@@ -17,10 +17,9 @@ import type { RootState } from '../redux';
 import { Footer } from './Footer';
 import { DisplayView } from './DisplayView';
 import { Header } from './Header';
-import { useIsHLSViewer, useKeyboardState } from '../hooks-util';
+import { useKeyboardState } from '../hooks-util';
 import { HMSStatusBar } from './StatusBar';
 import { AnimatedFooter } from './AnimatedFooter';
-import { HLSFooter } from './HLSFooter';
 import { AnimatedHeader } from './AnimatedHeader';
 // import { ReconnectionView } from './ReconnectionView';
 
@@ -32,7 +31,6 @@ export const MeetingScreenContent: React.FC<MeetingScreenContentProps> = ({
   peerTrackNodes,
 }) => {
   const offset = useSharedValue(1);
-  const isHLSViewer = useIsHLSViewer();
   const timerIdRef = useRef<NodeJS.Timeout | null>(null);
   const [controlsHidden, setControlsHidden] = useState(false);
   const isPipModeActive = useSelector(
@@ -101,15 +99,13 @@ export const MeetingScreenContent: React.FC<MeetingScreenContentProps> = ({
         <View collapsable={false} style={styles.container}>
           {isPipModeActive ? null : (
             <AnimatedHeader offset={offset}>
-              <Header transparent={isHLSViewer} showControls={!isHLSViewer} />
+              <Header />
             </AnimatedHeader>
           )}
 
           <DisplayView offset={offset} peerTrackNodes={peerTrackNodes} />
 
-          {isPipModeActive ? null : isHLSViewer ? (
-            <HLSFooter offset={offset} />
-          ) : (
+          {isPipModeActive ? null : (
             <AnimatedFooter offset={offset}>
               <Footer />
             </AnimatedFooter>

package/src/components/OverlayedViews.tsx

@@ -4,7 +4,7 @@ import type { SharedValue } from 'react-native-reanimated';
 import { HMSNotifications } from './HMSNotifications';
 import { OverlayContainer } from './OverlayContainer';
 import type { OverlayProps } from './OverlayContainer';
-import { HLSChatView } from './HMSOverlayChatView';
+import { HMSOverlayChatView } from './HMSOverlayChatView';
 import { useShowChatAndParticipants } from '../hooks-util';
 
 export type OverlayedViewsProps = {
@@ -19,7 +19,7 @@ const _OverlayedViews: React.FC<OverlayedViewsProps> = ({
 
   return (
     <OverlayContainer.Overlay animatedStyle={animatedStyle}>
-      {overlayChatVisible ? <HLSChatView offset={offset} /> : null}
+      {overlayChatVisible ? <HMSOverlayChatView offset={offset} /> : null}
 
       <HMSNotifications />
     </OverlayContainer.Overlay>

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/PressableIcon.tsx

@@ -4,7 +4,6 @@ import type { TouchableOpacityProps } from 'react-native';
 import { GestureDetector, Gesture } from 'react-native-gesture-handler';
 
 import { useHMSRoomStyleSheet, useIsHLSViewer } from '../hooks-util';
-import { hexToRgbA } from '../utils/theme';
 
 interface PressableIconProps extends Omit<TouchableOpacityProps, 'children'> {
   children: Pick<TouchableOpacityProps, 'children'>;
@@ -27,8 +26,7 @@ export const PressableIcon: React.FC<PressableIconProps> = ({
     (theme) => ({
       pressable: {
         backgroundColor: isHLSViewer
-          ? theme.palette.background_dim &&
-            hexToRgbA(theme.palette.background_dim, 0.64)
+          ? theme.palette.surface_default
           : undefined,
       },
       border: {