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

package/src/components/Participants/ParticipantsSeachInput.tsx

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { View, StyleSheet } from 'react-native';
-import Ionicons from 'react-native-vector-icons/Ionicons';
+import { StyleSheet, Platform } from 'react-native';
 
-import { CustomInput } from '../CustomInput';
-import { COLORS } from '../../utils/theme';
+import { useHMSRoomColorPalette, useHMSRoomStyle } from '../../hooks-util';
+import { SearchIcon } from '../../Icons';
+import { HMSTextInput } from '../HMSTextInput';
 
 type ParticipantsSearchInputProps = {
   searchText: string;
@@ -13,43 +13,45 @@ type ParticipantsSearchInputProps = {
 export const ParticipantsSearchInput: React.FC<
   ParticipantsSearchInputProps
 > = ({ searchText, setSearchText }) => {
+  const { on_surface_low: onSurfaceLowColor } = useHMSRoomColorPalette();
+
+  const textInputStyle = useHMSRoomStyle((theme) => ({
+    backgroundColor: theme.palette.surface_default,
+    borderColor: theme.palette.surface_default,
+  }));
+
   return (
-    <View>
-      <CustomInput
-        value={searchText}
-        onChangeText={setSearchText}
-        inputStyle={styles.participantsSearchInput}
-        placeholderTextColor={COLORS.TEXT.DISABLED}
-        placeholder="Find what you're looking for"
-      />
-      <Ionicons
-        name="search"
-        style={styles.participantsSearchInputIcon}
-        size={24}
-      />
-    </View>
+    <HMSTextInput
+      value={searchText}
+      onChangeText={setSearchText}
+      placeholder="Search for participants"
+      style={styles.input}
+      containerStyle={[styles.textInputContainer, textInputStyle]}
+      focusedContainerStyle={[styles.focusedTextInputContainer, textInputStyle]}
+      placeholderTextColor={onSurfaceLowColor}
+      leftIcon={<SearchIcon style={styles.searchIcon} />}
+    />
   );
 };
 
 const styles = StyleSheet.create({
-  participantsSearchInput: {
-    backgroundColor: COLORS.SURFACE.DEFAULT,
-    borderColor: COLORS.BORDER.LIGHT,
+  focusedTextInputContainer: {
     borderWidth: 1,
-    width: '100%',
-    borderRadius: 8,
-    paddingVertical: 12,
-    paddingLeft: 48,
-    color: COLORS.TEXT.HIGH_EMPHASIS,
-    fontFamily: 'Inter-Medium',
   },
-  participantsSearchInputIcon: {
-    position: 'absolute',
-    top: 12,
-    bottom: 12,
-    left: 16,
-    right: 16,
-    color: COLORS.TEXT.MEDIUM_EMPHASIS,
-    width: 24,
+  textInputContainer: {
+    borderWidth: 1,
+    flex: 0,
+    height: 40,
+    paddingLeft: 8,
+    paddingRight: 8,
+  },
+  input: {
+    fontSize: 14,
+    lineHeight: Platform.OS === 'android' ? 20 : undefined,
+    letterSpacing: 0.25,
+  },
+  searchIcon: {
+    marginRight: 8,
+    alignSelf: 'center',
   },
 });

package/src/components/Participants/index.ts

@@ -1,5 +1,2 @@
-export * from './ParticipantsFilter';
-export * from './ParticipantsHeader';
 export * from './ParticipantsList';
 export * from './ParticipantsSeachInput';
-export * from './SearchableParticipantsView';

package/src/components/PeerMinimizedView.tsx

@@ -13,7 +13,7 @@ export const usePeerMinimizedViewDimensions = () => {
   const canPublishVideo = useCanPublishVideo();
 
   const iconTakesSpace = 20 + 6; // Width + Right Margin
-  const totalWidth = 148;
+  const totalWidth = 128;
   const widthLessIconsWidth = totalWidth - 2 * iconTakesSpace;
 
   return {

package/src/components/PeerSettingsModalContent.tsx

@@ -7,20 +7,22 @@ import {
   LayoutAnimation,
   InteractionManager,
 } from 'react-native';
-import { batch, useDispatch, useSelector } from 'react-redux';
-import { HMSTrack, HMSTrackSource } from '@100mslive/react-native-hms';
-import Ionicons from 'react-native-vector-icons/Ionicons';
-import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
+import type { StyleProp, TextStyle } from 'react-native';
+import { useDispatch, useSelector } from 'react-redux';
+import { HMSTrack } from '@100mslive/react-native-hms';
 
 import type { RootState } from '../redux';
-import { COLORS } from '../utils/theme';
 import { ModalTypes } from '../utils/types';
 import type { PeerTrackNode } from '../utils/types';
-import { isTileOnSpotlight } from '../utils/functions';
-import { setInsetViewMinimized, setPeerToUpdate } from '../redux/actions';
+import { setInsetViewMinimized } from '../redux/actions';
 import { useHMSRoomStyle, useModalType } from '../hooks-util';
-import { MinimizeIcon, PinIcon, StarIcon } from '../Icons';
-import { useCanPublishVideo } from '../hooks-sdk';
+import {
+  CameraIcon,
+  MicIcon,
+  MinimizeIcon,
+  PencilIcon,
+  PersonIcon,
+} from '../Icons';
 import { BottomSheet } from './BottomSheet';
 
 interface PeerSettingsModalContentProps {
@@ -34,28 +36,22 @@ interface PeerSettingsModalContentProps {
 
 export const PeerSettingsModalContent: React.FC<
   PeerSettingsModalContentProps
-> = ({
-  peerTrackNode,
-  peerTrackNodesListEmpty,
-  cancelModal,
-  onCaptureScreenShotPress,
-  onCaptureImageAtMaxSupportedResolutionPress,
-  onStreamingQualityPress,
-}) => {
+> = ({ peerTrackNode, peerTrackNodesListEmpty, cancelModal }) => {
   const dispatch = useDispatch();
   const hmsInstance = useSelector((state: RootState) => state.user.hmsInstance);
   const localPeer = useSelector(
     (state: RootState) => state.hmsStates.localPeer
   );
-  const hmsSessionStore = useSelector(
-    (state: RootState) => state.user.hmsSessionStore
-  );
-  const spotlightTrackId = useSelector(
-    (state: RootState) => state.user.spotlightTrackId
-  );
-  const debugMode = useSelector((state: RootState) => state.user.debugMode);
+  const settingsForMiniview = useSelector((state: RootState) => {
+    const mininode = state.app.miniviewPeerTrackNode;
+    return mininode && mininode.id === peerTrackNode.id;
+  });
+
+  const removeTextStyle = useHMSRoomStyle((theme) => ({
+    color: theme.palette.alert_error_default,
+  }));
+
   const { handleModalVisibleType: setModalVisible } = useModalType();
-  const localPeerCanPublishVideo = useCanPublishVideo();
 
   const removePeer = () => {
     hmsInstance
@@ -92,12 +88,9 @@ export const PeerSettingsModalContent: React.FC<
     );
   };
 
-  // const changeName = () => {
-  //   batch(() => {
-  //     dispatch(setPeerToUpdate(peerTrackNode.peer));
-  //     setModalVisible(ModalTypes.CHANGE_NAME, true);
-  //   });
-  // };
+  const changeName = () => {
+    setModalVisible(ModalTypes.CHANGE_NAME, true);
+  };
 
   const handleMinimizeVideoPress = () => {
     cancelModal();
@@ -107,44 +100,6 @@ export const PeerSettingsModalContent: React.FC<
     });
   };
 
-  const changeRole = () => {
-    batch(() => {
-      dispatch(setPeerToUpdate(peerTrackNode.peer));
-      setModalVisible(ModalTypes.CHANGE_ROLE, true);
-    });
-  };
-
-  // Check if selected tile is "On Spotlight"
-  const { onSpotlight, tileVideoTrackId, tileAudioTrackId } = isTileOnSpotlight(
-    spotlightTrackId,
-    {
-      tileVideoTrack: peerTrackNode.track,
-      peerRegularAudioTrack: peerTrackNode.peer.audioTrack,
-      peerAuxTracks: peerTrackNode.peer.auxiliaryTracks,
-    }
-  );
-
-  const handleSpotlightPress = async () => {
-    try {
-      // Close Modal
-      cancelModal();
-
-      if (!hmsSessionStore) {
-        return null;
-      }
-
-      if (tileAudioTrackId || tileVideoTrackId) {
-        // Toggle `spotlight` key value on Session Store
-        await hmsSessionStore.set(
-          onSpotlight ? null : tileAudioTrackId || tileVideoTrackId,
-          'spotlight'
-        );
-      }
-    } catch (error) {
-      console.log('Add to spotlight error -> ', error);
-    }
-  };
-
   const { peer } = peerTrackNode;
 
   const localPeerPermissions = localPeer?.role?.permissions;
@@ -164,31 +119,16 @@ export const PeerSettingsModalContent: React.FC<
 
       {/* Content */}
       <View style={styles.contentContainer}>
-        {peer.isLocal ? ( // TODO: Remove this condition later
+        {peer.isLocal ? (
           <SettingItem
-            customIcon={true}
-            text={true ? 'Pin Tile for Myself' : 'Unpin Tile for Myself'}
-            icon={<PinIcon style={styles.customIcon} />}
-            disabled={true}
-            onPress={() => {}}
+            text={'Change Name'}
+            icon={<PencilIcon style={styles.customIcon} />}
+            onPress={changeName}
           />
         ) : null}
 
-        <SettingItem
-          customIcon={true}
-          text={
-            onSpotlight
-              ? 'Remove Spotlight for Everyone'
-              : 'Spotlight Tile for Everyone'
-          }
-          icon={<StarIcon style={styles.customIcon} />}
-          onPress={handleSpotlightPress}
-          disabled={!peerTrackNode.track?.trackId}
-        />
-
-        {peer.isLocal && localPeerCanPublishVideo ? (
+        {settingsForMiniview ? (
           <SettingItem
-            customIcon={true}
             text={'Minimize Your Video'}
             icon={<MinimizeIcon style={styles.customIcon} />}
             onPress={handleMinimizeVideoPress}
@@ -203,8 +143,7 @@ export const PeerSettingsModalContent: React.FC<
             {isPeerAudioMute && localPeerPermissions?.unmute ? (
               <SettingItem
                 text={'Request Audio Unmute'}
-                IconType={Ionicons}
-                iconName={'mic-off-outline'}
+                icon={<MicIcon muted={false} style={styles.customIcon} />}
                 onPress={toggleMuteAudio}
               />
             ) : null}
@@ -213,8 +152,7 @@ export const PeerSettingsModalContent: React.FC<
             {!isPeerAudioMute && localPeerPermissions?.mute ? (
               <SettingItem
                 text={'Mute Audio'}
-                IconType={Ionicons}
-                iconName={'mic-outline'}
+                icon={<MicIcon muted={true} style={styles.customIcon} />}
                 onPress={toggleMuteAudio}
               />
             ) : null}
@@ -228,8 +166,7 @@ export const PeerSettingsModalContent: React.FC<
             {isPeerVideoMute && localPeerPermissions?.unmute ? (
               <SettingItem
                 text={'Request Video Unmute'}
-                IconType={MaterialCommunityIcons}
-                iconName={'video-off-outline'}
+                icon={<CameraIcon muted={false} style={styles.customIcon} />}
                 onPress={toggleMuteVideo}
               />
             ) : null}
@@ -238,8 +175,7 @@ export const PeerSettingsModalContent: React.FC<
             {!isPeerVideoMute && localPeerPermissions?.mute ? (
               <SettingItem
                 text={'Mute Video'}
-                IconType={MaterialCommunityIcons}
-                iconName={'video-outline'}
+                icon={<CameraIcon muted={true} style={styles.customIcon} />}
                 onPress={toggleMuteVideo}
               />
             ) : null}
@@ -248,102 +184,31 @@ export const PeerSettingsModalContent: React.FC<
 
         {!peer.isLocal && localPeerPermissions?.removeOthers ? (
           <SettingItem
-            text="Remove Peer"
-            IconType={Ionicons}
-            iconName={'person-remove-outline'}
+            text="Remove Participant"
+            textStyle={removeTextStyle}
+            icon={<PersonIcon type="left" style={styles.customIcon} />}
             onPress={removePeer}
           />
         ) : null}
-
-        {/* {peer.isLocal ? (
-          <SettingItem
-            text="Change Name"
-            IconType={MaterialCommunityIcons}
-            iconName={'account-edit-outline'}
-            onPress={() => changeName()}
-          />
-        ) : null} */}
-
-        {!peer.isLocal && localPeerPermissions?.changeRole ? (
-          <SettingItem
-            text="Change Role"
-            IconType={Ionicons}
-            iconName={'people-outline'}
-            onPress={() => changeRole()}
-          />
-        ) : null}
-
-        {/* Don't show Capture Screenshot option, if track is screenshare of local peer */}
-        {!debugMode ||
-        (peerTrackNode.peer.isLocal &&
-          peerTrackNode.track &&
-          peerTrackNode.track.source === HMSTrackSource.SCREEN) ? null : (
-          <SettingItem
-            text="Capture Screenshot"
-            IconType={MaterialCommunityIcons}
-            iconName={'cellphone-screenshot'}
-            onPress={() => onCaptureScreenShotPress(peerTrackNode)}
-            disabled={!peerTrackNode.track || peerTrackNode.track.isMute()} // Capture Screenshot option should be disable, if track is muted or not available
-          />
-        )}
-
-        {/* Local Image Capture is only available for local peer */}
-        {debugMode && peerTrackNode.peer.isLocal ? (
-          <SettingItem
-            text="Local Image Capture"
-            IconType={MaterialCommunityIcons}
-            iconName={'cellphone-screenshot'}
-            onPress={() =>
-              onCaptureImageAtMaxSupportedResolutionPress(peerTrackNode)
-            }
-            disabled={!peerTrackNode.track || peerTrackNode.track.isMute()} // Local Image Capture option should be disable, if track is muted or not available
-          />
-        ) : null}
-
-        {/* Don't show Streaming Quality option for local peer */}
-        {debugMode && !peer.isLocal ? (
-          <SettingItem
-            text="Streaming Quality"
-            IconType={Ionicons}
-            iconName={'layers-outline'}
-            onPress={() =>
-              peerTrackNode.track
-                ? onStreamingQualityPress(peerTrackNode.track)
-                : null
-            }
-            disabled={!peerTrackNode.track || peerTrackNode.track.isMute()} // Streaming Quality option should be disable, if track is muted or not available
-          />
-        ) : null}
       </View>
     </View>
   );
 };
 
-type SettingItemBaseProps = {
+type SettingItemProps = {
   onPress(): void;
   text: string;
-  disabled?: boolean;
-};
-
-type SettingItemWithCustomIconProps = {
-  customIcon: true;
   icon: React.ReactElement;
+  disabled?: boolean;
+  textStyle?: StyleProp<TextStyle>;
 };
 
-type SettingItemWithIconProps = {
-  customIcon?: false;
-  iconName: string;
-  IconType: any;
-};
-
-type SettingItemProps = SettingItemBaseProps &
-  (SettingItemWithCustomIconProps | SettingItemWithIconProps);
-
 const SettingItem: React.FC<SettingItemProps> = ({
   onPress,
   text,
+  icon,
+  textStyle,
   disabled = false,
-  ...resetProps
 }) => {
   const textStyles = useHMSRoomStyle((theme, typography) => ({
     color: theme.palette.on_surface_high,
@@ -356,17 +221,9 @@ const SettingItem: React.FC<SettingItemProps> = ({
       style={[styles.button, disabled ? { opacity: 0.6 } : null]}
       onPress={onPress}
     >
-      {resetProps.customIcon ? (
-        resetProps.icon
-      ) : (
-        <resetProps.IconType
-          name={resetProps.iconName}
-          size={24}
-          style={styles.icon}
-        />
-      )}
-
-      <Text style={[styles.text, textStyles]}>{text}</Text>
+      {icon}
+
+      <Text style={[styles.text, textStyles, textStyle]}>{text}</Text>
     </TouchableOpacity>
   );
 };
@@ -392,8 +249,4 @@ const styles = StyleSheet.create({
     lineHeight: 20,
     letterSpacing: 0.1,
   },
-  icon: {
-    color: COLORS.WHITE,
-    marginRight: 12,
-  },
 });

package/src/components/PeerVideoTile/AvatarView.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { StyleSheet, Text, View } from 'react-native';
+import type { StyleProp, ViewStyle } from 'react-native';
 
 import { PersonIcon } from '../../Icons';
 import { getInitials } from '../../utils/functions';
@@ -10,14 +11,23 @@ import { useHMSRoomStyleSheet } from '../../hooks-util';
 export interface AvatarViewProps {
   name: string;
   videoView: React.ReactElement<typeof VideoView> | null;
+  avatarStyles?: StyleProp<ViewStyle>;
+  avatarContainerStyles?: StyleProp<ViewStyle>;
+  isInset?: boolean;
 }
 
-export const _AvatarView: React.FC<AvatarViewProps> = ({ name, videoView }) => {
+export const _AvatarView: React.FC<AvatarViewProps> = ({
+  name,
+  videoView,
+  avatarStyles,
+  avatarContainerStyles,
+  isInset = false,
+}) => {
   const showInitials = !!name && name.length > 0;
 
   const hmsRoomStyles = useHMSRoomStyleSheet((theme, typography) => ({
     avatarContainer: {
-      backgroundColor: theme.palette.surface_default,
+      backgroundColor: theme.palette.background_default,
     },
     avatar: {
       backgroundColor: COLORS.EXTENDED.PURPLE,
@@ -31,10 +41,27 @@ export const _AvatarView: React.FC<AvatarViewProps> = ({ name, videoView }) => {
   return (
     <View style={styles.container}>
       {videoView || (
-        <View style={[styles.avatarContainer, hmsRoomStyles.avatarContainer]}>
-          <View style={[styles.avatar, hmsRoomStyles.avatar]}>
+        <View
+          style={[
+            styles.avatarContainer,
+            hmsRoomStyles.avatarContainer,
+            avatarContainerStyles,
+          ]}
+        >
+          <View
+            style={[
+              isInset ? styles.insetAvatar : styles.avatar,
+              hmsRoomStyles.avatar,
+              avatarStyles,
+            ]}
+          >
             {showInitials ? (
-              <Text style={[styles.avatarText, hmsRoomStyles.avatarText]}>
+              <Text
+                style={[
+                  isInset ? styles.insetText : styles.avatarText,
+                  hmsRoomStyles.avatarText,
+                ]}
+              >
                 {getInitials(name)}
               </Text>
             ) : (
@@ -65,6 +92,13 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     alignItems: 'center',
   },
+  insetAvatar: {
+    width: 64,
+    aspectRatio: 1,
+    borderRadius: 44,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
   avatarIcon: {
     width: 40,
     height: 40,
@@ -74,6 +108,10 @@ const styles = StyleSheet.create({
     lineHeight: 40,
     letterSpacing: 0.25,
   },
+  insetText: {
+    fontSize: 24,
+    lineHeight: 32,
+  },
 });
 
 export const AvatarView = React.memo(_AvatarView);

package/src/components/PeerVideoTile/HMSFullScreenButton.tsx

@@ -0,0 +1,56 @@
+import * as React from 'react';
+import { StyleSheet } from 'react-native';
+import { useDispatch, useSelector } from 'react-redux';
+
+import { PressableIcon } from '../PressableIcon';
+import { MaximizeIcon, MinimizeIcon } from '../../Icons';
+import { useHMSRoomStyle } from '../../hooks-util';
+import { hexToRgbA } from '../../utils/theme';
+import type { PeerTrackNode } from '../../utils/types';
+import type { RootState } from '../../redux';
+import { setFullScreenPeerTrackNode } from '../../redux/actions';
+
+export interface HMSFullScreenButtonProps {
+  peerTrackNode: PeerTrackNode;
+}
+
+export const HMSFullScreenButton: React.FC<HMSFullScreenButtonProps> = ({
+  peerTrackNode,
+}) => {
+  const dispatch = useDispatch();
+  const fullScreenPeerTrackNode = useSelector(
+    (state: RootState) => state.app.fullScreenPeerTrackNode
+  );
+
+  const buttonStyles = useHMSRoomStyle((theme) => ({
+    backgroundColor:
+      theme.palette.background_dim &&
+      hexToRgbA(theme.palette.background_dim, 0.64),
+  }));
+
+  const maximizeAction =
+    !fullScreenPeerTrackNode || fullScreenPeerTrackNode.id !== peerTrackNode.id;
+
+  const handleFullScreenPress = () => {
+    dispatch(setFullScreenPeerTrackNode(maximizeAction ? peerTrackNode : null));
+  };
+
+  return (
+    <PressableIcon
+      border={false}
+      onPress={handleFullScreenPress}
+      style={[styles.container, buttonStyles]}
+    >
+      {maximizeAction ? <MaximizeIcon /> : <MinimizeIcon />}
+    </PressableIcon>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    position: 'absolute',
+    top: 8,
+    right: 8,
+    padding: 8,
+  },
+});