@100mslive/react-native-room-kit 1.0.0 → 1.0.1

package/src/Icons/WelcomeHand/index.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { Image, StyleSheet } from 'react-native';
+import type { ImageProps } from 'react-native';
+
+interface WelcomeHandIconProps extends Omit<ImageProps, 'source'> {}
+
+export const WelcomeHandIcon: React.FC<WelcomeHandIconProps> = ({
+  style,
+  ...restProps
+}) => {
+  return (
+    <Image
+      source={require('./assets/welcome-hand.png')}
+      style={[styles.icon, style]}
+      {...restProps}
+    />
+  );
+};
+
+const styles = StyleSheet.create({
+  icon: {
+    width: 64,
+    height: 64,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});

package/src/Icons/index.ts

@@ -37,3 +37,4 @@ export * from './Hamburger';
 export * from './Stop';
 export * from './Eye';
 export * from './Search';
+export * from './WelcomeHand';

package/src/components/ChangeNameModalContent.tsx

@@ -9,12 +9,13 @@ import {
 import { useSelector } from 'react-redux';
 
 import type { RootState } from '../redux';
-import { useHMSRoomStyleSheet } from '../hooks-util';
-import { BottomSheet } from './BottomSheet';
+import { isPublishingAllowed, useHMSRoomStyleSheet, useModalType } from '../hooks-util';
+import { BottomSheet, useBottomSheetActions } from './BottomSheet';
 import { ChevronIcon, CloseIcon } from '../Icons';
 import { HMSTextInput } from './HMSTextInput';
 import { HMSPrimaryButton } from './HMSPrimaryButton';
 import { useHMSActions } from '../hooks-sdk';
+import { ModalTypes } from '../utils/types';
 
 export interface ChangeNameModalContentProps {
   dismissModal(): void;
@@ -27,10 +28,18 @@ export const ChangeNameModalContent: React.FC<ChangeNameModalContentProps> = ({
   const localPeerName = useSelector(
     (state: RootState) => state.hmsStates.localPeer?.name || ''
   );
+  const isPublisher = useSelector((state: RootState) => {
+    const localPeer = state.hmsStates.localPeer;
+    return localPeer ? isPublishingAllowed(localPeer) : false;
+  });
 
   const [name, setName] = React.useState(localPeerName);
   const [nameChangeLoading, setNameChangeLoading] = React.useState(false);
 
+  const { handleModalVisibleType } = useModalType();
+
+  const { registerOnModalHideAction } = useBottomSheetActions();
+
   const hmsRoomStyles = useHMSRoomStyleSheet((theme, typography) => ({
     headerText: {
       color: theme.palette.on_surface_high,
@@ -44,6 +53,11 @@ export const ChangeNameModalContent: React.FC<ChangeNameModalContentProps> = ({
   const handleBackPress = () => {
     Keyboard.dismiss();
 
+    // Open SETTINGS bottom sheet when current sheet is closed
+    registerOnModalHideAction(() => {
+      handleModalVisibleType(ModalTypes.SETTINGS);
+    });
+
     // Close current bottom sheet
     dismissModal();
   };
@@ -71,12 +85,15 @@ export const ChangeNameModalContent: React.FC<ChangeNameModalContentProps> = ({
       {/* Header */}
       <View style={styles.header}>
         <View style={styles.headerControls}>
-          <TouchableOpacity
-            onPress={handleBackPress}
-            hitSlop={styles.closeIconHitSlop}
-          >
-            <ChevronIcon direction="left" />
-          </TouchableOpacity>
+          {isPublisher ? null : (
+            <TouchableOpacity
+              onPress={handleBackPress}
+              hitSlop={styles.closeIconHitSlop}
+              style={styles.backIcon}
+            >
+              <ChevronIcon direction="left" />
+            </TouchableOpacity>
+          )}
 
           <Text style={[styles.headerText, hmsRoomStyles.headerText]}>
             Change Name
@@ -130,7 +147,6 @@ const styles = StyleSheet.create({
     fontSize: 16,
     lineHeight: 24,
     letterSpacing: 0.15,
-    marginLeft: 8,
   },
   closeIconHitSlop: {
     bottom: 16,
@@ -138,6 +154,9 @@ const styles = StyleSheet.create({
     right: 16,
     top: 16,
   },
+  backIcon: {
+    marginRight: 8,
+  },
   contentContainer: {
     marginHorizontal: 24,
   },

package/src/components/ChatAndParticipants/ChatAndParticipantsHeader.tsx

@@ -8,7 +8,6 @@ import {
   useShowChatAndParticipants,
 } from '../../hooks-util';
 import type { RootState } from '../../redux';
-import { COLORS } from '../../utils/theme';
 import { ChatBottomSheetTabs } from '../../utils/types';
 import { setActiveChatBottomSheetTab } from '../../redux/actions';
 
@@ -25,6 +24,9 @@ const _ChatAndParticipantsHeader: React.FC<WebrtcChatHeaderProps> = ({
   );
 
   const hmsRoomStyles = useHMSRoomStyleSheet((theme, typography) => ({
+    headerTitleWrapper: {
+      backgroundColor: theme.palette.surface_default,
+    },
     tab: {
       backgroundColor: theme.palette.surface_bright,
     },
@@ -67,7 +69,9 @@ const _ChatAndParticipantsHeader: React.FC<WebrtcChatHeaderProps> = ({
             : null}
         </Text>
       ) : (
-        <View style={styles.headerTitleWrapper}>
+        <View
+          style={[styles.headerTitleWrapper, hmsRoomStyles.headerTitleWrapper]}
+        >
           {visibleChatBottomSheetTabs.map((tab) => {
             const isActive = activeChatBottomSheetTab === tab;
 
@@ -118,7 +122,6 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     padding: 4,
     borderRadius: 8,
-    backgroundColor: COLORS.SURFACE.DEFAULT,
     marginRight: 16,
   },
   tab: {

package/src/components/ChatAndParticipants/ParticipantsView.tsx

@@ -1,19 +1,20 @@
 import * as React from 'react';
 import { View, StyleSheet } from 'react-native';
 
-import { useFilteredParticipants } from '../../hooks-util';
 import { ParticipantsList, ParticipantsSearchInput } from '../Participants';
+import { MultiRoleParticipantsList } from '../Participants/MultiRoleParticipantsList';
 
 type ParticipantsViewProps = {};
 
 export const ParticipantsView: React.FC<ParticipantsViewProps> = () => {
-  const {
-    data,
-    searchText,
-    formattedSearchText,
-    setSearchText,
-    setExpandedGroups,
-  } = useFilteredParticipants();
+  const [searchText, setSearchText] = React.useState('');
+  const [selectedGroupId, setSelectedGroupId] = React.useState<string | null>(
+    null
+  );
+
+  const clearSelectedGroup = React.useCallback(() => {
+    setSelectedGroupId(null);
+  }, []);
 
   return (
     <>
@@ -23,11 +24,18 @@ export const ParticipantsView: React.FC<ParticipantsViewProps> = () => {
       />
 
       <View style={styles.listWrapper}>
-        <ParticipantsList
-          data={data}
-          setExpandedGroups={setExpandedGroups}
-          searchTextExists={formattedSearchText.length > 0}
-        />
+        {selectedGroupId === null ? (
+          <MultiRoleParticipantsList
+            searchText={searchText}
+            onViewAllPress={setSelectedGroupId}
+          />
+        ) : (
+          <ParticipantsList
+            searchText={searchText}
+            selectedGroupId={selectedGroupId}
+            onBackPress={clearSelectedGroup}
+          />
+        )}
       </View>
     </>
   );

package/src/components/Footer.tsx

@@ -50,7 +50,7 @@ export const _Footer: React.FC<FooterProps> = () => {
   );
 
   const canShowOptions =
-    canPublishScreen || canShowParticipants || canShowBRB || canStartRecording;
+    isViewer || canPublishScreen || canShowParticipants || canShowBRB || canStartRecording;
 
   const footerActionButtons = useMemo(() => {
     const actions = [];

package/src/components/HMSDangerButton.tsx

@@ -3,6 +3,7 @@ import type { StyleProp, ViewStyle } from 'react-native';
 
 import { useHMSRoomColorPalette, useHMSRoomStyleSheet } from '../hooks-util';
 import { HMSBaseButton } from './HMSBaseButton';
+import { COLORS } from '../utils/theme';
 
 export interface HMSDangerButtonProps {
   title: string;
@@ -34,7 +35,7 @@ export const HMSDangerButton: React.FC<HMSDangerButtonProps> = ({
       backgroundColor: theme.palette.alert_error_dim,
     },
     buttonText: {
-      color: theme.palette.alert_error_brighter,
+      color: COLORS.WHITE,
       fontFamily: `${typography.font_family}-SemiBold`,
     },
     disabledText: {

package/src/components/HMSHLSStreamLoading.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { View, ActivityIndicator, Text, StyleSheet } from 'react-native';
 import { useSelector } from 'react-redux';
 
-import { COLORS } from '../utils/theme';
+import { hexToRgbA } from '../utils/theme';
 import type { RootState } from '../redux';
 import { HMSLocalVideoView } from './HMSLocalVideoView';
 import { useHMSRoomColorPalette, useHMSRoomStyleSheet } from '../hooks-util';
@@ -22,13 +22,20 @@ export const HMSHLSStreamLoading = () => {
       color: theme.palette.on_surface_high,
       fontFamily: `${typography.font_family}-Regular`,
     },
+    backdropContainer: {
+      backgroundColor: theme.palette.background_dim
+        ? hexToRgbA(theme.palette.background_dim, 0.7)
+        : undefined,
+    },
   }));
 
   return (
     <View style={[styles.container, hmsRoomStyles.container]}>
       {isLocalVideoMuted ? null : <HMSLocalVideoView />}
 
-      <View style={styles.hlsLoaderContainer}>
+      <View
+        style={[styles.hlsLoaderContainer, hmsRoomStyles.backdropContainer]}
+      >
         <ActivityIndicator
           style={styles.hlsLoader}
           size={'large'}
@@ -52,7 +59,6 @@ const styles = StyleSheet.create({
     position: 'absolute',
     width: '100%',
     height: '100%',
-    backgroundColor: COLORS.LOADING_BACKDROP,
     zIndex: 5,
     alignItems: 'center',
     justifyContent: 'center',

package/src/components/HMSKeyboardAvoidingView.tsx

@@ -2,10 +2,10 @@ import * as React from 'react';
 import { Platform, StatusBar, useWindowDimensions } from 'react-native';
 import type { StyleProp, ViewStyle } from 'react-native';
 import Animated, {
+  useAnimatedKeyboard,
   useAnimatedStyle,
   useSharedValue,
 } from 'react-native-reanimated';
-import { useReanimatedKeyboardAnimation } from 'react-native-keyboard-controller';
 
 export interface HMSKeyboardAvoidingViewProps {
   style?: StyleProp<Animated.AnimateStyle<StyleProp<ViewStyle>>>;
@@ -16,7 +16,7 @@ export const HMSKeyboardAvoidingView: React.FC<
 > = ({ children, style }) => {
   const animatedViewRef = React.useRef<Animated.View>(null);
   const { height: windowHeight } = useWindowDimensions();
-  const animatedKeyboard = useReanimatedKeyboardAnimation();
+  const animatedKeyboard = useAnimatedKeyboard();
 
   const initialPageY = useSharedValue(0);
 
@@ -33,7 +33,7 @@ export const HMSKeyboardAvoidingView: React.FC<
   }, []);
 
   const keyboardAvoidStyle = useAnimatedStyle(() => {
-    const keyboardHeight = -animatedKeyboard.height.value;
+    const keyboardHeight = animatedKeyboard.height.value;
     return {
       transform: [
         {

package/src/components/HMSLiveIndicator.tsx

@@ -14,7 +14,7 @@ import {
   useShowChatAndParticipants,
 } from '../hooks-util';
 import { EyeIcon } from '../Icons';
-import { hexToRgbA } from '../utils/theme';
+import { COLORS, hexToRgbA } from '../utils/theme';
 import type { RootState } from '../redux';
 
 const _HMSLiveIndicator = () => {
@@ -23,7 +23,7 @@ const _HMSLiveIndicator = () => {
     (state: RootState) => state.hmsStates.room?.peerCount
   );
   const live = useSelector(
-    (state: RootState) => !!state.hmsStates.room?.hlsStreamingState.running
+    (state: RootState) => !!state.hmsStates.room?.hlsStreamingState?.running
   );
 
   const hmsRoomStyles = useHMSRoomStyleSheet((theme, typograhy) => ({
@@ -31,7 +31,7 @@ const _HMSLiveIndicator = () => {
       backgroundColor: theme.palette.alert_error_default,
     },
     liveText: {
-      color: theme.palette.alert_error_brighter,
+      color: COLORS.WHITE,
       fontFamily: `${typograhy.font_family}-SemiBold`,
     },
     viewers: {

package/src/components/HMSManageLeave.tsx

@@ -10,6 +10,7 @@ import { PressableIcon } from './PressableIcon';
 import { BottomSheet } from './BottomSheet';
 import { StopIcon } from '../Icons';
 import { EndRoomModalContent } from './EndRoomModalContent';
+import { COLORS } from '../utils/theme';
 
 export const HMSManageLeave: React.FC<LeaveButtonProps> = (props) => {
   // TODO: read current meeting joined state
@@ -93,7 +94,7 @@ const LeaveButton: React.FC<LeaveButtonProps> = (props) => {
       borderColor: theme.palette.alert_error_default,
     },
     icon: {
-      tintColor: theme.palette.alert_error_brighter,
+      tintColor: COLORS.WHITE,
     },
   }));
 

package/src/components/HMSManageRaiseHand.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useSelector, shallowEqual } from 'react-redux';
+import { useSelector } from 'react-redux';
 
 import type { RootState } from '../redux';
 import { useHMSActions } from '../hooks-sdk';
@@ -10,24 +10,31 @@ import { parseMetadata } from '../utils/functions';
 export const HMSManageRaiseHand = () => {
   const hmsActions = useHMSActions();
   const localPeerMetadata = useSelector(
-    (state: RootState) => parseMetadata(state.hmsStates.localPeer?.metadata),
-    shallowEqual
+    (state: RootState) => state.hmsStates.localPeer?.metadata
+  );
+  const parsedLocalPeerMetadata = parseMetadata(localPeerMetadata);
+  const isBRBOn = !!parsedLocalPeerMetadata.isBRBOn;
+  const isHandRaised = useSelector(
+    (state: RootState) => !!state.hmsStates.localPeer?.isHandRaised
   );
 
   const toggleRaiseHand = async () => {
-    const newMetadata = {
-      ...localPeerMetadata,
-      isHandRaised: !localPeerMetadata.isHandRaised,
-      isBRBOn: false,
-    };
-    await hmsActions.changeMetadata(newMetadata);
+    if (isBRBOn) {
+      const newMetadata = {
+        ...parsedLocalPeerMetadata,
+        isBRBOn: false,
+      };
+      await hmsActions.changeMetadata(newMetadata);
+    }
+    if (isHandRaised) {
+      await hmsActions.lowerLocalPeerHand();
+    } else {
+      await hmsActions.raiseLocalPeerHand();
+    }
   };
 
   return (
-    <PressableIcon
-      onPress={toggleRaiseHand}
-      active={localPeerMetadata.isHandRaised}
-    >
+    <PressableIcon onPress={toggleRaiseHand} active={isHandRaised}>
       <HandIcon />
     </PressableIcon>
   );

package/src/components/HMSPreviewHLSLiveIndicator.tsx

@@ -4,6 +4,7 @@ import { useSelector } from 'react-redux';
 
 import type { RootState } from '../redux';
 import { useHMSRoomStyleSheet } from '../hooks-util';
+import { COLORS } from '../utils/theme';
 
 export const HMSPreviewHLSLiveIndicator = () => {
   const isHLSStreaming = useSelector(
@@ -15,10 +16,10 @@ export const HMSPreviewHLSLiveIndicator = () => {
       backgroundColor: theme.palette.alert_error_default,
     },
     circle: {
-      backgroundColor: theme.palette.on_surface_high,
+      backgroundColor: COLORS.WHITE,
     },
     text: {
-      color: theme.palette.on_surface_high,
+      color: COLORS.WHITE,
       fontFamily: `${typography.font_family}-SemiBold`,
     },
   }));

package/src/components/HMSPreviewJoinButton.tsx

@@ -6,7 +6,7 @@ import type { RootState } from '../redux';
 import { RadioIcon } from '../Icons';
 import {
   useHMSLayoutConfig,
-  useHMSRoomStyle,
+  useHMSRoomStyleSheet,
   useShouldGoLive,
 } from '../hooks-util';
 import { HMSPrimaryButton } from './HMSPrimaryButton';
@@ -36,8 +36,13 @@ export const HMSPreviewJoinButton: React.FC<HMSPreviewJoinButtonProps> = ({
 
   const shouldGoLive = useShouldGoLive();
 
-  const liveIconStyles = useHMSRoomStyle((theme) => ({
-    tintColor: theme.palette.on_primary_low,
+  const hmsRoomStyles = useHMSRoomStyleSheet((theme) => ({
+    disabledLiveIcon: {
+      tintColor: theme.palette.on_primary_low,
+    },
+    activeLiveIcon: {
+      tintColor: theme.palette.on_primary_high,
+    },
   }));
 
   const disabledJoin = userNameInvalid || loading;
@@ -54,7 +59,13 @@ export const HMSPreviewJoinButton: React.FC<HMSPreviewJoinButtonProps> = ({
       disabled={disabledJoin}
       leftComponent={
         shouldGoLive ? (
-          <RadioIcon style={disabledJoin ? liveIconStyles : null} />
+          <RadioIcon
+            style={
+              disabledJoin
+                ? hmsRoomStyles.disabledLiveIcon
+                : hmsRoomStyles.activeLiveIcon
+            }
+          />
         ) : null
       }
       style={styles.button}

package/src/components/HMSPreviewTile.tsx

@@ -26,7 +26,7 @@ export const HMSPreviewTile: React.FC = () => {
       backgroundColor: COLORS.EXTENDED.PURPLE,
     },
     avatarText: {
-      color: theme.palette.on_surface_high,
+      color: COLORS.WHITE,
       fontFamily: `${typography.font_family}-SemiBold`,
     },
   }));

package/src/components/HMSRecordingIndicator.tsx

@@ -11,7 +11,9 @@ export const HMSRecordingIndicator = () => {
     (state: RootState) => !!state.hmsStates.room?.browserRecordingState?.running
   );
   const startingOrStoppingRecording = useSelector(
-    (state: RootState) => state.app.startingOrStoppingRecording
+    (state: RootState) =>
+      state.app.startingOrStoppingRecording ||
+      state.hmsStates.room?.browserRecordingState.initialising
   );
 
   const { on_surface_high: onSurfaceHighColor } = useHMSRoomColorPalette();

package/src/components/HMSTextInput.tsx

@@ -52,7 +52,7 @@ export const HMSTextInput: React.FC<HMSTextInputProps> = ({
   const handleInputBlur = () => setInputFocused(false);
 
   const {
-    on_surface_low: onSurfaceLowColor,
+    on_surface_medium: onSurfaceMediumColor,
     on_surface_high: onSurfaceHighColor,
   } = useHMSRoomColorPalette();
 
@@ -91,7 +91,7 @@ export const HMSTextInput: React.FC<HMSTextInputProps> = ({
 
     // ICON STYLES
     sendIcon: {
-      tintColor: theme.palette.on_surface_low,
+      tintColor: theme.palette.on_surface_medium,
     },
     focusedSendIcon: {
       tintColor: theme.palette.on_surface_high,
@@ -123,7 +123,7 @@ export const HMSTextInput: React.FC<HMSTextInputProps> = ({
       autoCapitalize={resetProps.autoCapitalize ?? 'words'}
       autoCompleteType={resetProps.autoCompleteType ?? 'name'}
       placeholderTextColor={
-        resetProps.placeholderTextColor ?? onSurfaceLowColor
+        resetProps.placeholderTextColor ?? onSurfaceMediumColor
       }
       selectionColor={resetProps.selectionColor ?? onSurfaceHighColor}
       onFocus={resetProps.onFocus ?? handleInputFocus}

package/src/components/PIPView.tsx

@@ -1,28 +1,49 @@
 import * as React from 'react';
+import { useSelector } from 'react-redux';
 
 import type { PeerTrackNode } from '../utils/types';
-
-import PeerDisplayView from './PeerDisplayView';
-import { getTrackForPIPView } from '../utils/functions';
+import { PeerVideoTileView } from './PeerVideoTile/PeerVideoTileView';
+import type { RootState } from '../redux';
 
 type PIPViewProps = {
-  pairedPeers: PeerTrackNode[][];
+  peerTrackNodes: PeerTrackNode[];
+  customView?: React.ReactElement | null;
 };
 
-const PIPView: React.FC<PIPViewProps> = ({ pairedPeers }) => {
-  const preferedPeerTrack = getTrackForPIPView(pairedPeers);
+const PIPView: React.FC<PIPViewProps> = ({ peerTrackNodes, customView }) => {
+  const memoDominantSpeakerIdRef = React.useRef<string | null>(null);
+
+  const dominantSpeakerId = useSelector((state: RootState) => {
+    const dominantSpeaker = state.hmsStates.activeSpeakers[0];
+
+    return dominantSpeaker?.peer.peerID ?? null;
+  });
+
+  if (dominantSpeakerId) {
+    memoDominantSpeakerIdRef.current = dominantSpeakerId;
+  }
+
+  if (customView) {
+    return customView;
+  }
+
+  const firstPeerTrackNode = peerTrackNodes[0];
+
+  const preferedPeerTrack =
+    (memoDominantSpeakerIdRef.current
+      ? peerTrackNodes.find(
+          (node) => node.peer.peerID === memoDominantSpeakerIdRef.current
+        )
+      : firstPeerTrackNode) ?? firstPeerTrackNode;
 
-  // If no Peer is available
-  if (!preferedPeerTrack?.peer) {
+  if (!preferedPeerTrack) {
     return null;
   }
 
   return (
-    <PeerDisplayView
-      isLocal={preferedPeerTrack?.peer?.isLocal}
-      peer={preferedPeerTrack?.peer}
-      videoTrack={preferedPeerTrack?.track}
-      isDegraded={preferedPeerTrack?.isDegraded}
+    <PeerVideoTileView
+      key={preferedPeerTrack.id}
+      peerTrackNode={preferedPeerTrack}
     />
   );
 };

package/src/components/Participants/MultiRoleParticipantsList.tsx

@@ -0,0 +1,70 @@
+import * as React from 'react';
+import { ScrollView, StyleSheet, Text, View } from 'react-native';
+
+import { useFilteredParticipants, useHMSRoomStyle } from '../../hooks-util';
+import { ParticipantsAccordian } from './ParticipantsAccordian';
+
+export type MultiRoleParticipantsListProps = {
+  searchText: string;
+  onViewAllPress(groupId: string): void;
+};
+
+export const MultiRoleParticipantsList: React.FC<MultiRoleParticipantsListProps> = ({
+  searchText,
+  onViewAllPress
+}) => {
+  const {
+    data,
+    formattedSearchText,
+    expandedGroup,
+    setExpandedGroup,
+  } = useFilteredParticipants(searchText);
+
+  const emptyTextStyles = useHMSRoomStyle((theme, typography) => ({
+    color: theme.palette.on_surface_medium,
+    fontFamily: `${typography.font_family}-SemiBold`,
+  }));
+
+  const searchTextExists = formattedSearchText.length > 0
+
+  if (searchTextExists && data.length <= 0) {
+    return (
+      <View style={styles.emptyContainer}>
+        <Text style={[styles.emptyText, emptyTextStyles]}>
+          No results found...
+        </Text>
+      </View>
+    );
+  }
+
+  return (
+    <ScrollView contentContainerStyle={{paddingBottom: 40}}>
+      {data.map(item => (
+        <ParticipantsAccordian
+          key={item.id}
+          open={expandedGroup === item.id}
+          data={item}
+          toggle={setExpandedGroup}
+          showViewAll={item.showViewAll}
+          onViewAllPress={onViewAllPress}
+        />
+      ))}
+    </ScrollView>
+  );
+};
+
+const styles = StyleSheet.create({
+  list: {
+    paddingBottom: 32,
+  },
+  emptyContainer: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  emptyText: {
+    fontSize: 14,
+    lineHeight: 20,
+    letterSpacing: 0.25,
+  },
+});