@100mslive/react-native-room-kit 1.0.6 → 1.0.7

package/src/components/HMSLiveViewerCount.tsx

@@ -0,0 +1,90 @@
+import * as React from 'react';
+import {
+  StyleSheet,
+  Text,
+  Platform,
+  TouchableOpacity,
+} from 'react-native';
+import { useSelector } from 'react-redux';
+import { HMSStreamingState } from '@100mslive/react-native-hms';
+
+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';
+
+const _HMSLiveViewerCount = () => {
+  const isHLSViewer = useIsHLSViewer();
+  const previewPeerCount = useSelector(
+    (state: RootState) => state.hmsStates.room?.peerCount
+  );
+  const live = useSelector(
+    (state: RootState) => state.hmsStates.room?.hlsStreamingState?.state === HMSStreamingState.STARTED
+  );
+
+  const hmsRoomStyles = useHMSRoomStyleSheet((theme, typograhy) => ({
+    viewers: {
+      backgroundColor: isHLSViewer
+        ? theme.palette.background_dim &&
+          hexToRgbA(theme.palette.background_dim, 0.64)
+        : undefined,
+      borderWidth: isHLSViewer ? 0 : 1,
+      borderColor: theme.palette.border_bright,
+    },
+    count: {
+      color: theme.palette.on_surface_high,
+      fontFamily: `${typograhy.font_family}-SemiBold`,
+    },
+  }));
+
+  const { canShowParticipants, show } = useShowChatAndParticipants();
+
+  const showParticipantsSheet = () => {
+    show('participants');
+  };
+
+  if (!live || typeof previewPeerCount !== 'number') {
+    return null;
+  }
+
+  return (
+    <TouchableOpacity
+      style={[styles.viewers, hmsRoomStyles.viewers]}
+      onPress={showParticipantsSheet}
+      disabled={!canShowParticipants}
+    >
+      <EyeIcon testID={TestIds.peer_count_icon} />
+
+      <Text testID={TestIds.peer_count} style={[styles.count, hmsRoomStyles.count]}>
+        {previewPeerCount}
+      </Text>
+    </TouchableOpacity>
+  );
+};
+
+export const HMSLiveViewerCount = React.memo(_HMSLiveViewerCount);
+
+const styles = StyleSheet.create({
+  viewers: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingVertical: 4,
+    paddingRight: 8,
+    paddingLeft: 6,
+    borderRadius: 4,
+  },
+  count: {
+    fontSize: 10,
+    lineHeight: Platform.OS === 'android' ? 16 : undefined,
+    letterSpacing: 1.5,
+    textAlign: 'center',
+    textAlignVertical: 'center',
+
+    marginLeft: 4,
+  },
+});

package/src/components/HMSOverlayChatView.tsx

@@ -2,6 +2,8 @@ import * as React from 'react';
 import { StyleSheet } from 'react-native';
 import LinearGradient from 'react-native-linear-gradient';
 import MaskedView from '@react-native-masked-view/masked-view';
+import { useDerivedValue, interpolate } from 'react-native-reanimated';
+import type { SharedValue } from 'react-native-reanimated';
 
 import { HMSKeyboardAvoidingView } from './HMSKeyboardAvoidingView';
 import { HMSSendMessageInput } from './HMSSendMessageInput';
@@ -16,12 +18,26 @@ const colors = [
 ];
 const colorLocations = [0, 0.4, 1];
 
-export const HLSChatView = () => {
+export interface HLSChatViewProps {
+  offset?: SharedValue<number>;
+}
+
+export const HLSChatView: React.FC<HLSChatViewProps> = ({ offset }) => {
   const footerHeight = useFooterHeight();
   const hmsNotificationsHeight = useHMSNotificationsHeight();
 
+  const chatBottomOffset = useDerivedValue(() => {
+    if (offset) {
+      return (
+        interpolate(offset.value, [0, 1], [0, footerHeight]) +
+        hmsNotificationsHeight
+      );
+    }
+    return footerHeight + hmsNotificationsHeight;
+  }, [offset, footerHeight, hmsNotificationsHeight]);
+
   return (
-    <HMSKeyboardAvoidingView bottomOffset={footerHeight + hmsNotificationsHeight}>
+    <HMSKeyboardAvoidingView bottomOffset={chatBottomOffset}>
       <MaskedView
         maskElement={
           <LinearGradient

package/src/components/HMSPreviewEditName.tsx

@@ -13,11 +13,20 @@ export const HMSPreviewEditName: React.FC<HMSPreviewEditNameProps> = () => {
   const dispatch = useDispatch();
   const { updateConfig } = useHMSConfig();
   const userName = useSelector((state: RootState) => state.user.userName);
+  const editUsernameDisabled = useSelector((state: RootState) => state.app.editUsernameDisabled);
 
   const handleNameChange = (name: string) => {
     dispatch(changeUsername(name));
     updateConfig({ username: name });
   };
 
-  return <HMSTextInput testID={TestIds.enter_name} value={userName} onChangeText={handleNameChange} />;
+  return (
+    <HMSTextInput
+      editable={!editUsernameDisabled}
+      testID={TestIds.enter_name}
+      value={userName}
+      onChangeText={handleNameChange}
+      style={editUsernameDisabled ? { opacity: 0.5 } : null}
+    />
+  );
 };

package/src/components/HMSPreviewHLSLiveIndicator.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { View, Text, StyleSheet } from 'react-native';
 import { useSelector } from 'react-redux';
+import { HMSStreamingState } from '@100mslive/react-native-hms';
 
 import type { RootState } from '../redux';
 import { useHMSRoomStyleSheet } from '../hooks-util';
@@ -8,7 +9,7 @@ import { COLORS } from '../utils/theme';
 
 export const HMSPreviewHLSLiveIndicator = () => {
   const isHLSStreaming = useSelector(
-    (state: RootState) => state.hmsStates.room?.hlsStreamingState?.running
+    (state: RootState) => state.hmsStates.room?.hlsStreamingState?.state === HMSStreamingState.STARTED
   );
 
   const hmsRoomStyles = useHMSRoomStyleSheet((theme, typography) => ({

package/src/components/HMSRecordingIndicator.tsx

@@ -10,9 +10,20 @@ import { HMSRecordingState } from '@100mslive/react-native-hms';
 export const HMSRecordingIndicator = () => {
   const isRecordingOn = useSelector(
     (state: RootState) =>
-      !!state.hmsStates.room?.browserRecordingState?.running ||
-      !!state.hmsStates.room?.serverRecordingState?.running ||
-      !!state.hmsStates.room?.hlsRecordingState?.running
+      state.hmsStates.room?.browserRecordingState?.state === HMSRecordingState.STARTED ||
+      state.hmsStates.room?.browserRecordingState?.state === HMSRecordingState.RESUMED ||
+
+      state.hmsStates.room?.serverRecordingState?.state === HMSRecordingState.STARTED ||
+      state.hmsStates.room?.serverRecordingState?.state === HMSRecordingState.RESUMED ||
+
+      state.hmsStates.room?.hlsRecordingState?.state === HMSRecordingState.STARTED ||
+      state.hmsStates.room?.hlsRecordingState?.state === HMSRecordingState.RESUMED
+  );
+  const isRecordingPaused = useSelector(
+    (state: RootState) =>
+      state.hmsStates.room?.browserRecordingState?.state === HMSRecordingState.PAUSED ||
+      state.hmsStates.room?.serverRecordingState?.state === HMSRecordingState.PAUSED ||
+      state.hmsStates.room?.hlsRecordingState?.state === HMSRecordingState.PAUSED
   );
   const startingOrStoppingRecording = useSelector(
     (state: RootState) =>
@@ -47,6 +58,12 @@ export const HMSRecordingIndicator = () => {
     );
   }
 
+  if (isRecordingPaused) {
+    return (
+      <RecordingIcon type='pause' style={[styles.icon, styles.rightSpace]} />
+    );
+  }
+
   return null;
 };
 

package/src/components/HMSRoomOptions.tsx

@@ -54,7 +54,6 @@ export const HMSRoomOptions: React.FC<HMSRoomOptionsProps> = () => {
       <BottomSheet
         isVisible={modalVisible === ModalTypes.SETTINGS}
         dismissModal={dismissModal}
-        animationOutTiming={700}
       >
         <RoomSettingsModalContent
           newAudioMixingMode={newAudioMixingMode}
@@ -73,7 +72,6 @@ export const HMSRoomOptions: React.FC<HMSRoomOptionsProps> = () => {
         isVisible={modalVisible === ModalTypes.CHANGE_NAME}
         dismissModal={dismissModal}
         avoidKeyboard={true}
-        animationOutTiming={700}
       >
         <ChangeNameModalContent dismissModal={dismissModal} />
       </BottomSheet>
@@ -81,7 +79,6 @@ export const HMSRoomOptions: React.FC<HMSRoomOptionsProps> = () => {
       <BottomSheet
         isVisible={modalVisible === ModalTypes.STOP_RECORDING}
         dismissModal={dismissModal}
-        animationOutTiming={800}
       >
         <StopRecordingModalContent dismissModal={dismissModal} />
       </BottomSheet>

package/src/components/Header.tsx

@@ -1,6 +1,9 @@
 import React, { memo } from 'react';
 import { View, StyleSheet } from 'react-native';
-import { SafeAreaView } from 'react-native-safe-area-context';
+import {
+  SafeAreaView,
+  useSafeAreaInsets,
+} from 'react-native-safe-area-context';
 
 import { HMSManageCameraRotation } from './HMSManageCameraRotation';
 import { useHMSRoomStyle } from '../hooks-util';
@@ -8,6 +11,7 @@ import { HMSManageAudioOutput } from './HMSManageAudioOutput';
 import { HMSRecordingIndicator } from './HMSRecordingIndicator';
 import { CompanyLogo } from './CompanyLogo';
 import { HMSLiveIndicator } from './HMSLiveIndicator';
+import { HMSLiveViewerCount } from './HMSLiveViewerCount';
 
 interface HeaderProps {
   transparent?: boolean;
@@ -19,6 +23,11 @@ const BOTTOM_PADDING = 16;
 const CONTENT_HEIGHT = 42;
 export const HEADER_HEIGHT = TOP_PADDING + CONTENT_HEIGHT + BOTTOM_PADDING;
 
+export const useHeaderHeight = (excludeSafeArea: boolean = false) => {
+  const { top } = useSafeAreaInsets();
+  return (excludeSafeArea ? 0 : top) + HEADER_HEIGHT;
+};
+
 export const _Header: React.FC<HeaderProps> = ({
   transparent = false,
   showControls = true,
@@ -28,14 +37,16 @@ export const _Header: React.FC<HeaderProps> = ({
   }));
 
   return (
-    <SafeAreaView style={transparent ? null : containerStyles} edges={['top']}>
+    <SafeAreaView style={transparent ? null : containerStyles} edges={['top','left','right']}>
       <View style={[styles.container, transparent ? null : containerStyles]}>
         <View style={styles.logoContainer}>
           <CompanyLogo style={styles.logo} />
 
+          <HMSLiveIndicator />
+
           <HMSRecordingIndicator />
 
-          <HMSLiveIndicator />
+          <HMSLiveViewerCount />
         </View>
 
         {showControls ? (

package/src/components/LeaveRoomBottomSheet.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
 import { useSelector } from 'react-redux';
+import { HMSStreamingState } from '@100mslive/react-native-hms';
 
 import { LeaveIcon } from '../Icons';
 import { useHMSRoomStyleSheet, useLeaveMethods, useModalType } from '../hooks-util';
@@ -26,7 +27,7 @@ export const LeaveRoomBottomSheet: React.FC<LeaveRoomBottomSheetProps> = () => {
 
   const isStreaming = useSelector(
     (state: RootState) =>
-      state.hmsStates.room?.hlsStreamingState?.running ?? false
+      state.hmsStates.room?.hlsStreamingState?.state === HMSStreamingState.STARTED ?? false
   );
 
   const hmsRoomStyles = useHMSRoomStyleSheet((theme, typography) => ({
@@ -105,10 +106,9 @@ export const LeaveRoomBottomSheet: React.FC<LeaveRoomBottomSheetProps> = () => {
   return (
     <BottomSheet
       isVisible={modalVisibleType === ModalTypes.LEAVE_ROOM}
-      containerStyle={styles.container}
+      bottomOffsetSpace={0}
       dismissModal={onPopupDismiss}
       onModalHide={handlePopupHide}
-      animationOutTiming={700}
     >
       <View>
         <TouchableOpacity
@@ -176,9 +176,6 @@ export const LeaveRoomBottomSheet: React.FC<LeaveRoomBottomSheetProps> = () => {
 };
 
 const styles = StyleSheet.create({
-  container: {
-    paddingBottom: 0,
-  },
   button: {
     flexDirection: 'row',
     padding: 24,

package/src/components/Meeting.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { StyleSheet, View } from 'react-native';
 import { useSelector } from 'react-redux';
-import { SafeAreaView } from 'react-native-safe-area-context';
 
 import type { PeerTrackNode } from '../utils/types';
 import { useRTCStatsListeners } from '../utils/hooks';
@@ -16,7 +15,6 @@ import {
   useHMSReconnection,
   useHMSRemovedFromRoomUpdate,
   useHMSRoomStyle,
-  useIsHLSViewer,
   usePIPListener,
 } from '../hooks-util';
 import { MeetingScreenContent } from './MeetingScreenContent';
@@ -32,8 +30,6 @@ 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();
@@ -76,23 +72,10 @@ export const Meeting: React.FC<MeetingProps> = ({ peerTrackNodes }) => {
     return <HMSHLSStreamLoading />;
   }
 
-  const Container = isHLSViewer ? View : SafeAreaView;
-
-  /**
-   * TODO: disbaled Expended View animation in Webrtc flow
-   *
-   * Problem: Tiles Flatlist was not scrollable because Root Pressable was registering screen taps.
-   * Solution: Try using Tab Gesture detector instead on Pressable component
-   */
   return (
-    <Container
-      style={[styles.container, containerStyles]}
-      edges={['left', 'right']}
-    >
+    <View style={[styles.container, containerStyles]}>
       <MeetingScreenContent peerTrackNodes={peerTrackNodes} />
-
-      {/* {landscapeChatViewVisible ? <ChatView /> : null} */}
-    </Container>
+    </View>
   );
 };
 

package/src/components/MeetingScreenContent.tsx

@@ -1,26 +1,27 @@
-import React, { useCallback, useRef, useState } from 'react';
-import { StyleSheet, Pressable, View } from 'react-native';
+import React, { useCallback, useRef, useState, useEffect } from 'react';
+import { StyleSheet, View, Keyboard } from 'react-native';
 import { useSelector } from 'react-redux';
 import {
   Easing,
+  KeyboardState,
   cancelAnimation,
   runOnJS,
   useSharedValue,
   withTiming,
 } from 'react-native-reanimated';
+import { Gesture, GestureDetector } from 'react-native-gesture-handler';
 
-import { PipModes } from '../utils/types';
+import { HeaderFooterHideDelayMs, PipModes } from '../utils/types';
 import type { PeerTrackNode } from '../utils/types';
 import type { RootState } from '../redux';
 import { Footer } from './Footer';
 import { DisplayView } from './DisplayView';
 import { Header } from './Header';
-import { useIsHLSViewer } from '../hooks-util';
+import { useIsHLSViewer, useKeyboardState } from '../hooks-util';
 import { HMSStatusBar } from './StatusBar';
 import { AnimatedFooter } from './AnimatedFooter';
 import { HLSFooter } from './HLSFooter';
 import { AnimatedHeader } from './AnimatedHeader';
-import { useIsLandscapeOrientation } from '../utils/dimension';
 // import { ReconnectionView } from './ReconnectionView';
 
 interface MeetingScreenContentProps {
@@ -37,80 +38,82 @@ export const MeetingScreenContent: React.FC<MeetingScreenContentProps> = ({
   const isPipModeActive = useSelector(
     (state: RootState) => state.app.pipModeStatus === PipModes.ACTIVE
   );
-  const isLandscapeOrientation = useIsLandscapeOrientation();
+  const { keyboardState } = useKeyboardState();
 
-  const toggleControls = useCallback(() => {
-    'worklet';
-    if (timerIdRef.current) {
+  const dismissKeyboard = useCallback(() => {
+    Keyboard.dismiss();
+  }, []);
+
+  const clearTimer = useCallback(() => {
+    if (timerIdRef.current !== null) {
       clearTimeout(timerIdRef.current);
       timerIdRef.current = null;
     }
-    cancelAnimation(offset);
-    offset.value = withTiming(
-      offset.value === 1 ? 0 : 1,
-      { duration: 200, easing: Easing.ease },
-      (finished) => {
-        if (finished) {
-          runOnJS(setControlsHidden)(offset.value === 0);
-        }
-      }
-    );
   }, []);
 
+  const toggleControls = useCallback((fromTimeout: boolean = false) => {
+    'worklet';
+    if (
+      fromTimeout !== true &&
+      (keyboardState.value === KeyboardState.OPEN ||
+        keyboardState.value === KeyboardState.OPENING)
+    ) {
+      runOnJS(dismissKeyboard)();
+    } else {
+      runOnJS(clearTimer)();
+      cancelAnimation(offset);
+      offset.value = withTiming(
+        offset.value === 1 ? 0 : 1,
+        { duration: 200, easing: Easing.ease },
+        (finished) => {
+          if (finished) {
+            runOnJS(setControlsHidden)(offset.value === 0);
+          }
+        }
+      );
+    }
+  }, [dismissKeyboard, clearTimer]);
+
   // Handles Auto hiding the controls for the first time
   // to make this feature discoverable
-  // useEffect(() => {
-  //   if (false && !isHLSViewer) {
-  //     if (timerIdRef.current) {
-  //       clearTimeout(timerIdRef.current);
-  //     }
-  //     timerIdRef.current = setTimeout(() => {
-  //       timerIdRef.current = null;
-  //       toggleControls();
-  //     }, 3000); d
+  useEffect(() => {
+    clearTimer();
+    timerIdRef.current = setTimeout(() => {
+      timerIdRef.current = null;
+      toggleControls(true);
+    }, HeaderFooterHideDelayMs);
 
-  //     return () => {
-  //       if (timerIdRef.current) {
-  //         clearTimeout(timerIdRef.current);
-  //       }
-  //     };
-  //   }
-  // }, [isHLSViewer]);
+    return clearTimer;
+  }, [clearTimer, toggleControls]);
+
+  const tapGesture = Gesture.Tap()
+    .onEnd(() => toggleControls())
+    .requireExternalGestureToFail();
 
-  /**
-   * TODO: disbaled Expended View animation in Webrtc flow
-   *
-   * Problem: Tiles Flatlist was not scrollable because Root Pressable was registering screen taps.
-   * Solution: Try using Tab Gesture detector instead on Pressable component
-   */
   return (
-    <Pressable
-      onPress={toggleControls}
-      style={styles.container}
-      disabled={isHLSViewer || true}
-    >
+    <View style={styles.container}>
       <HMSStatusBar hidden={controlsHidden} barStyle={'light-content'} />
 
-      <View style={styles.reconnectionWrapper}>
-        {isPipModeActive || isLandscapeOrientation ? null : (
-          <AnimatedHeader offset={offset}>
-            <Header transparent={isHLSViewer} showControls={!isHLSViewer} />
-          </AnimatedHeader>
-        )}
-
-        <DisplayView offset={offset} peerTrackNodes={peerTrackNodes} />
+      <GestureDetector gesture={tapGesture}>
+        <View collapsable={false} style={styles.container}>
+          {isPipModeActive ? null : (
+            <AnimatedHeader offset={offset}>
+              <Header transparent={isHLSViewer} showControls={!isHLSViewer} />
+            </AnimatedHeader>
+          )}
 
-        {/* <ReconnectionView /> */}
-      </View>
+          <DisplayView offset={offset} peerTrackNodes={peerTrackNodes} />
 
-      {isPipModeActive ? null : isHLSViewer ? (
-        <HLSFooter offset={offset} />
-      ) : (
-        <AnimatedFooter offset={offset}>
-          <Footer />
-        </AnimatedFooter>
-      )}
-    </Pressable>
+          {isPipModeActive ? null : isHLSViewer ? (
+            <HLSFooter offset={offset} />
+          ) : (
+            <AnimatedFooter offset={offset}>
+              <Footer />
+            </AnimatedFooter>
+          )}
+        </View>
+      </GestureDetector>
+    </View>
   );
 };
 

package/src/components/MiniView.tsx

@@ -56,8 +56,8 @@ export const MiniView: React.FC<Omit<MiniViewProps, 'insetMode'>> = ({
     usePeerMinimizedViewDimensions();
 
   const size = {
-    width: minimized ? minimizedViewWidth : (isLandscapeOrientation ? 178 : 104),
-    height: minimized ? minimizedViewHeigth : (isLandscapeOrientation ? 98 : 186),
+    width: minimized ? minimizedViewWidth : isLandscapeOrientation ? 178 : 104,
+    height: minimized ? minimizedViewHeigth : isLandscapeOrientation ? 98 : 186,
   };
 
   const dimensionStyles = {
@@ -86,7 +86,7 @@ export const MiniView: React.FC<Omit<MiniViewProps, 'insetMode'>> = ({
       cornerOffset.x,
       cornerOffset.topY,
       boundingBoxWidth,
-      boundingBoxHeight,
+      boundingBoxHeight
     );
 
     const finalX = snapPointX;
@@ -199,7 +199,7 @@ const getSnappingPoints = (
   xCornerOffset: number,
   yCornerOffset: number,
   boundingBoxWidth: number | null,
-  boundingBoxHeight: number | null,
+  boundingBoxHeight: number | null
 ) => {
   'worklet';
   if (!boundingBoxWidth || !boundingBoxHeight) {

package/src/components/OverlayedViews.tsx

@@ -1,18 +1,21 @@
 import * as React from 'react';
+import type { SharedValue } from 'react-native-reanimated';
 
 import { HMSNotifications } from './HMSNotifications';
 import { OverlayContainer } from './OverlayContainer';
 import { HLSChatView } from './HMSOverlayChatView';
 import { useShowChatAndParticipants } from '../hooks-util';
 
-export type OverlayedViewsProps = {};
+export type OverlayedViewsProps = {
+  offset: SharedValue<number>;
+};
 
-const _OverlayedViews: React.FC<OverlayedViewsProps> = () => {
+const _OverlayedViews: React.FC<OverlayedViewsProps> = ({ offset }) => {
   const { overlayChatVisible } = useShowChatAndParticipants();
 
   return (
     <OverlayContainer.Overlay>
-      {overlayChatVisible ? <HLSChatView /> : null}
+      {overlayChatVisible ? <HLSChatView offset={offset} /> : null}
 
       <HMSNotifications />
     </OverlayContainer.Overlay>

package/src/components/PeerSettingsModalContent.tsx

@@ -47,6 +47,7 @@ export const PeerSettingsModalContent: React.FC<
     const mininode = state.app.miniviewPeerTrackNode;
     return mininode && mininode.id === peerTrackNode.id;
   });
+  const editUsernameDisabled = useSelector((state: RootState) => state.app.editUsernameDisabled);
 
   const removeTextStyle = useHMSRoomStyle((theme) => ({
     color: theme.palette.alert_error_default,
@@ -123,7 +124,7 @@ export const PeerSettingsModalContent: React.FC<
 
       {/* Content */}
       <View style={styles.contentContainer}>
-        {peer.isLocal ? (
+        {peer.isLocal && !editUsernameDisabled ? (
           <SettingItem
             testID={TestIds.tile_modal_change_name_btn}
             text={'Change Name'}

package/src/components/PeerVideoTile/PeerVideoTileView.tsx

@@ -52,6 +52,7 @@ export const _PeerVideoTileView = React.forwardRef<
     const isPipModeActive = useSelector(
       (state: RootState) => state.app.pipModeStatus === PipModes.ACTIVE
     );
+    const editUsernameDisabled = useSelector((state: RootState) => state.app.editUsernameDisabled);
 
     const onSpotlight = useSelector((state: RootState) => {
       const { onSpotlight } = isTileOnSpotlight(state.user.spotlightTrackId, {
@@ -101,7 +102,7 @@ export const _PeerVideoTileView = React.forwardRef<
 
     const canTakeActionOnPeer = useSelector((state: RootState) => {
       if (peer.isLocal) {
-        return true;
+        return !editUsernameDisabled || insetMode;
       }
 
       const permissions = state.hmsStates.localPeer?.role?.permissions;