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

package/src/components/Modals.tsx

@@ -36,15 +36,10 @@ import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
 import { styles } from './styles';
 
 import { CustomButton } from './CustomButton';
-import { CustomInput } from './CustomInput';
 import { Menu, MenuItem } from './MenuModal';
 
 import { CustomPicker } from './Picker';
-import {
-  changeHLSAspectRatio,
-  changeShowStats,
-  saveUserData,
-} from '../redux/actions';
+import { changeHLSAspectRatio, changeShowStats } from '../redux/actions';
 import { getTime } from '../utils/functions';
 import {
   LayoutParams,
@@ -194,60 +189,6 @@ export const SaveScreenshot = ({
   );
 };
 
-export const ChangeNameModal = ({ cancelModal }: { cancelModal: Function }) => {
-  const instance = useHMSInstance();
-  const peer = useSelector((state: RootState) => state.app.peerToUpdate);
-  const dispatch = useDispatch();
-
-  const [name, setName] = useState<string>(peer?.name!);
-
-  const changeName = () => {
-    if (name.length > 0) {
-      instance
-        ?.changeName(name)
-        .then((d) => {
-          dispatch(
-            saveUserData({
-              userName: name,
-            })
-          );
-          console.log('Change Name Success: ', d);
-        })
-        .catch((e) => console.log('Change Name Error: ', e));
-    }
-    cancelModal();
-  };
-
-  return (
-    <View style={styles.volumeModalContainer}>
-      <Text style={styles.roleChangeModalHeading}>Change Name</Text>
-      <View style={styles.volumeModalSlider}>
-        <CustomInput
-          value={name}
-          onChangeText={setName}
-          inputStyle={styles.participantChangeNameInput}
-          placeholderTextColor={COLORS.TEXT.DISABLED}
-          placeholder="Find what you’re looking for"
-        />
-      </View>
-      <View style={styles.roleChangeModalPermissionContainer}>
-        <CustomButton
-          title="Cancel"
-          onPress={cancelModal}
-          viewStyle={styles.roleChangeModalCancelButton}
-          textStyle={styles.roleChangeModalButtonText}
-        />
-        <CustomButton
-          title="Change"
-          onPress={changeName}
-          viewStyle={styles.roleChangeModalSuccessButton}
-          textStyle={styles.roleChangeModalButtonText}
-        />
-      </View>
-    </View>
-  );
-};
-
 interface RTCTrack {
   name: string;
   peerId?: string; // peerId is used to get audio track stats
@@ -515,56 +456,6 @@ export const LeaveRoomModal = ({
   );
 };
 
-export const EndRoomModal = ({
-  onSuccess,
-  cancelModal,
-}: {
-  onSuccess: Function;
-  cancelModal: Function;
-}) => {
-  const onEnd = () => {
-    cancelModal();
-    onSuccess();
-  };
-  return (
-    <View style={styles.volumeModalContainer}>
-      <View style={styles.participantMenuItem}>
-        <Feather
-          name="alert-triangle"
-          style={[styles.participantMenuItemIcon, styles.error]}
-          size={24}
-        />
-        <Text style={[styles.roleChangeModalHeading, styles.error]}>
-          End Session
-        </Text>
-      </View>
-      <View style={styles.roleChangeModalPermissionContainer}>
-        <Text style={styles.roleChangeModalDescription}>
-          The session will end for everyone and all the activities will stop.
-          You can’t undo this action.
-        </Text>
-      </View>
-      <View style={styles.roleChangeModalPermissionContainer}>
-        <CustomButton
-          title="Don’t End"
-          onPress={cancelModal}
-          viewStyle={styles.roleChangeModalCancelButton}
-          textStyle={styles.roleChangeModalButtonText}
-        />
-        <CustomButton
-          title="End Session"
-          onPress={onEnd}
-          viewStyle={[
-            styles.roleChangeModalSuccessButton,
-            styles.errorContainer,
-          ]}
-          textStyle={styles.roleChangeModalButtonText}
-        />
-      </View>
-    </View>
-  );
-};
-
 export const ChangeAudioOutputModal = ({
   cancelModal,
 }: {

package/src/components/PaginationDots.tsx

@@ -0,0 +1,65 @@
+import * as React from 'react';
+import { useSelector } from 'react-redux';
+import { StyleSheet, View } from 'react-native';
+
+import { useHMSRoomStyleSheet } from '../hooks-util';
+import type { RootState } from '../redux';
+
+export interface PaginationDotsProps {
+  list: any[];
+}
+
+const _PaginationDots: React.FC<PaginationDotsProps> = ({ list }) => {
+  const activeIndex = useSelector(
+    (state: RootState) => state.app.gridViewActivePage
+  );
+
+  const hmsRoomStyles = useHMSRoomStyleSheet(
+    (theme) => ({
+      dot: { backgroundColor: theme.palette.on_surface_low },
+      activeDot: { backgroundColor: theme.palette.on_surface_high },
+    }),
+    []
+  );
+
+  return (
+    <View style={styles.container}>
+      {list.map((listItem, idx) => {
+        const isActive = activeIndex === idx;
+        const isFirst = idx === 0;
+
+        return (
+          <View
+            key={listItem?.id || idx.toString()}
+            style={[
+              styles.dot,
+              hmsRoomStyles.dot,
+              isFirst ? styles.firstDot : null,
+              isActive ? hmsRoomStyles.activeDot : null,
+            ]}
+          />
+        );
+      })}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginVertical: 16,
+  },
+  dot: {
+    width: 8,
+    aspectRatio: 1,
+    borderRadius: 4,
+    marginLeft: 12,
+  },
+  firstDot: {
+    marginLeft: 0,
+  },
+});
+
+export const PaginationDots = React.memo(_PaginationDots);

package/src/components/ParticipantsCount.tsx

@@ -0,0 +1,52 @@
+import * as React from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+import { useSelector } from 'react-redux';
+
+import { useHMSRoomStyleSheet } from '../hooks-util';
+import type { RootState } from '../redux';
+
+const _ParticipantsCount = () => {
+  const hmsRoomStyles = useHMSRoomStyleSheet((theme, typography) => ({
+    container: {
+      backgroundColor: theme.palette.surface_bright,
+    },
+    count: {
+      color: theme.palette.on_surface_high,
+      fontFamily: `${typography.font_family}-SemiBold`,
+    },
+  }));
+
+  const peerCount = useSelector(
+    (state: RootState) => state.hmsStates.room?.peerCount
+  );
+
+  if (typeof peerCount !== 'number') {
+    return null;
+  }
+
+  return (
+    <View style={[styles.container, hmsRoomStyles.container]}>
+      <Text style={[styles.count, hmsRoomStyles.count]}>{peerCount}</Text>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    position: 'absolute',
+    right: 0,
+    borderRadius: 40,
+    paddingHorizontal: 4,
+    paddingVertical: 2,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  count: {
+    fontSize: 10,
+    lineHeight: 16,
+    letterSpacing: 1.5,
+    textAlign: 'center',
+  },
+});
+
+export const ParticipantsCount = React.memo(_ParticipantsCount);

package/src/components/PeerMinimizedView.tsx

@@ -0,0 +1,131 @@
+import * as React from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+
+import { CameraIcon, MaximizeIcon, MicIcon } from '../Icons';
+import { PressableIcon } from './PressableIcon';
+import { useCanPublishAudio, useCanPublishVideo } from '../hooks-sdk';
+import type { PeerTrackNode } from '../utils/types';
+import { selectCanPublishTrackForRole } from '../hooks-sdk-selectors';
+import { useHMSRoomStyleSheet } from '../hooks-util';
+
+export const usePeerMinimizedViewDimensions = () => {
+  const canPublishAudio = useCanPublishAudio();
+  const canPublishVideo = useCanPublishVideo();
+
+  const iconTakesSpace = 20 + 6; // Width + Right Margin
+  const totalWidth = 148;
+  const widthLessIconsWidth = totalWidth - 2 * iconTakesSpace;
+
+  return {
+    width:
+      widthLessIconsWidth +
+      (canPublishAudio ? iconTakesSpace : 0) +
+      (canPublishVideo ? iconTakesSpace : 0),
+    height: 36,
+  };
+};
+
+export interface PeerMinimizedViewProps {
+  peerTrackNode: PeerTrackNode;
+  onMaximizePress(): void;
+}
+
+const _PeerMinimizedView: React.FC<PeerMinimizedViewProps> = ({
+  peerTrackNode,
+  onMaximizePress,
+}) => {
+  const peerCanPublishAudio = selectCanPublishTrackForRole(
+    peerTrackNode.peer.role,
+    'audio'
+  );
+  const peerCanPublishVideo = selectCanPublishTrackForRole(
+    peerTrackNode.peer.role,
+    'video'
+  );
+
+  const isAudioMuted = peerTrackNode.peer.audioTrack?.isMute();
+  const isVideoMuted = peerTrackNode.track?.isMute();
+
+  const hmsRoomStyles = useHMSRoomStyleSheet((theme, typography) => ({
+    container: {
+      backgroundColor: theme.palette.surface_default,
+    },
+    iconWrapper: {
+      backgroundColor: theme.palette.surface_bright,
+    },
+    name: {
+      color: theme.palette.on_surface_high,
+      fontFamily: `${typography.font_family}-Regular`,
+    },
+  }));
+
+  return (
+    <View style={[styles.container, hmsRoomStyles.container]}>
+      <View style={styles.wrapper}>
+        {peerCanPublishAudio ? (
+          <View style={[styles.iconWrapper, hmsRoomStyles.iconWrapper]}>
+            <MicIcon muted={!!isAudioMuted} style={styles.icon} />
+          </View>
+        ) : null}
+
+        {peerCanPublishVideo ? (
+          <View style={[styles.iconWrapper, hmsRoomStyles.iconWrapper]}>
+            <CameraIcon muted={!!isVideoMuted} style={styles.icon} />
+          </View>
+        ) : null}
+
+        <Text style={[styles.name, hmsRoomStyles.name]} numberOfLines={1}>
+          {peerTrackNode.peer.isLocal ? 'You' : peerTrackNode.peer.name}
+        </Text>
+      </View>
+
+      <PressableIcon
+        border={false}
+        style={styles.maximizeBtn}
+        onPress={onMaximizePress}
+      >
+        <MaximizeIcon style={styles.maximizeIcon} />
+      </PressableIcon>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    flexDirection: 'row',
+    padding: 8,
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    borderRadius: 8,
+  },
+  wrapper: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  iconWrapper: {
+    padding: 2,
+    marginRight: 6,
+    borderRadius: 4,
+  },
+  icon: {
+    width: 16,
+    height: 16,
+  },
+  name: {
+    maxWidth: 48,
+    fontSize: 14,
+    lineHeight: 20,
+    letterSpacing: 0.25,
+    marginRight: 12,
+  },
+  maximizeBtn: {
+    padding: 0,
+  },
+  maximizeIcon: {
+    width: 20,
+    height: 20,
+  },
+});
+
+export const PeerMinimizedView = React.memo(_PeerMinimizedView);

package/src/components/PeerSettingsModalContent.tsx

@@ -1,5 +1,12 @@
 import React from 'react';
-import { View, TouchableOpacity, Text, StyleSheet } from 'react-native';
+import {
+  View,
+  TouchableOpacity,
+  Text,
+  StyleSheet,
+  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';
@@ -10,11 +17,15 @@ import { COLORS } from '../utils/theme';
 import { ModalTypes } from '../utils/types';
 import type { PeerTrackNode } from '../utils/types';
 import { isTileOnSpotlight } from '../utils/functions';
-import { setPeerToUpdate } from '../redux/actions';
-import { useModalType } from '../hooks-util';
+import { setInsetViewMinimized, setPeerToUpdate } from '../redux/actions';
+import { useHMSRoomStyle, useModalType } from '../hooks-util';
+import { MinimizeIcon, PinIcon, StarIcon } from '../Icons';
+import { useCanPublishVideo } from '../hooks-sdk';
+import { BottomSheet } from './BottomSheet';
 
 interface PeerSettingsModalContentProps {
   peerTrackNode: PeerTrackNode;
+  peerTrackNodesListEmpty: boolean;
   cancelModal(): void;
   onCaptureScreenShotPress(node: PeerTrackNode): void;
   onCaptureImageAtMaxSupportedResolutionPress(node: PeerTrackNode): void;
@@ -25,6 +36,7 @@ export const PeerSettingsModalContent: React.FC<
   PeerSettingsModalContentProps
 > = ({
   peerTrackNode,
+  peerTrackNodesListEmpty,
   cancelModal,
   onCaptureScreenShotPress,
   onCaptureImageAtMaxSupportedResolutionPress,
@@ -43,6 +55,7 @@ export const PeerSettingsModalContent: React.FC<
   );
   const debugMode = useSelector((state: RootState) => state.user.debugMode);
   const { handleModalVisibleType: setModalVisible } = useModalType();
+  const localPeerCanPublishVideo = useCanPublishVideo();
 
   const removePeer = () => {
     hmsInstance
@@ -79,10 +92,18 @@ export const PeerSettingsModalContent: React.FC<
     );
   };
 
-  const changeName = () => {
-    batch(() => {
-      dispatch(setPeerToUpdate(peerTrackNode.peer));
-      setModalVisible(ModalTypes.CHANGE_NAME, true);
+  // const changeName = () => {
+  //   batch(() => {
+  //     dispatch(setPeerToUpdate(peerTrackNode.peer));
+  //     setModalVisible(ModalTypes.CHANGE_NAME, true);
+  //   });
+  // };
+
+  const handleMinimizeVideoPress = () => {
+    cancelModal();
+    InteractionManager.runAfterInteractions(() => {
+      LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
+      dispatch(setInsetViewMinimized(true));
     });
   };
 
@@ -132,21 +153,46 @@ export const PeerSettingsModalContent: React.FC<
   const isPeerVideoMute = peer.isLocal ? null : peer.videoTrack?.isMute();
 
   return (
-    <View style={styles.container}>
-      <Text style={styles.roleChangeModalHeading}>
-        {peer.name}
-        {peer.isLocal ? ' (You)' : ''}
-      </Text>
-      <Text style={styles.participantRole}>{peer.role?.name}</Text>
+    <View>
+      <BottomSheet.Header
+        dismissModal={cancelModal}
+        heading={peer.name + (peer.isLocal ? ' (You)' : '')}
+        subheading={peer.role?.name}
+      />
+
+      <BottomSheet.Divider />
 
+      {/* Content */}
       <View style={styles.contentContainer}>
-        {debugMode ? (
+        {peer.isLocal ? ( // TODO: Remove this condition later
           <SettingItem
-            text={onSpotlight ? 'Remove from Spotlight' : 'Add to Spotlight'}
-            IconType={Ionicons}
-            iconName={onSpotlight ? 'ios-star' : 'ios-star-outline'}
-            onPress={handleSpotlightPress}
-            disabled={!peerTrackNode.track?.trackId}
+            customIcon={true}
+            text={true ? 'Pin Tile for Myself' : 'Unpin Tile for Myself'}
+            icon={<PinIcon style={styles.customIcon} />}
+            disabled={true}
+            onPress={() => {}}
+          />
+        ) : 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 ? (
+          <SettingItem
+            customIcon={true}
+            text={'Minimize Your Video'}
+            icon={<MinimizeIcon style={styles.customIcon} />}
+            onPress={handleMinimizeVideoPress}
+            disabled={peerTrackNodesListEmpty}
           />
         ) : null}
 
@@ -209,16 +255,16 @@ export const PeerSettingsModalContent: React.FC<
           />
         ) : null}
 
-        {peer.isLocal ? (
+        {/* {peer.isLocal ? (
           <SettingItem
             text="Change Name"
             IconType={MaterialCommunityIcons}
             iconName={'account-edit-outline'}
             onPress={() => changeName()}
           />
-        ) : null}
+        ) : null} */}
 
-        {localPeerPermissions?.changeRole ? (
+        {!peer.isLocal && localPeerPermissions?.changeRole ? (
           <SettingItem
             text="Change Role"
             IconType={Ionicons}
@@ -273,68 +319,78 @@ export const PeerSettingsModalContent: React.FC<
   );
 };
 
-interface SettingItemProps {
+type SettingItemBaseProps = {
   onPress(): void;
   text: string;
+  disabled?: boolean;
+};
+
+type SettingItemWithCustomIconProps = {
+  customIcon: true;
+  icon: React.ReactElement;
+};
+
+type SettingItemWithIconProps = {
+  customIcon?: false;
   iconName: string;
   IconType: any;
-  disabled?: boolean;
-}
+};
+
+type SettingItemProps = SettingItemBaseProps &
+  (SettingItemWithCustomIconProps | SettingItemWithIconProps);
 
 const SettingItem: React.FC<SettingItemProps> = ({
   onPress,
   text,
-  iconName,
-  IconType,
   disabled = false,
+  ...resetProps
 }) => {
+  const textStyles = useHMSRoomStyle((theme, typography) => ({
+    color: theme.palette.on_surface_high,
+    fontFamily: `${typography.font_family}-SemiBold`,
+  }));
+
   return (
     <TouchableOpacity
       disabled={disabled}
       style={[styles.button, disabled ? { opacity: 0.6 } : null]}
       onPress={onPress}
     >
-      <IconType name={iconName} size={24} style={styles.icon} />
-
-      <Text style={styles.text}>{text}</Text>
+      {resetProps.customIcon ? (
+        resetProps.icon
+      ) : (
+        <resetProps.IconType
+          name={resetProps.iconName}
+          size={24}
+          style={styles.icon}
+        />
+      )}
+
+      <Text style={[styles.text, textStyles]}>{text}</Text>
     </TouchableOpacity>
   );
 };
 
 const styles = StyleSheet.create({
-  container: {
-    padding: 24,
-  },
   contentContainer: {
-    marginTop: 16,
-  },
-  roleChangeModalHeading: {
-    color: COLORS.TEXT.HIGH_EMPHASIS,
-    fontSize: 20,
-    lineHeight: 24,
-    letterSpacing: 0.15,
-    fontFamily: 'Inter-Medium',
-    textTransform: 'capitalize',
+    marginBottom: 8,
   },
-  participantRole: {
-    color: COLORS.TEXT.MEDIUM_EMPHASIS,
-    fontSize: 12,
-    lineHeight: 16,
-    letterSpacing: 0.4,
-    marginTop: 4,
-    fontFamily: 'Inter-Regular',
-    textTransform: 'capitalize',
+  customIcon: {
+    width: 20,
+    height: 20,
+    marginRight: 8,
   },
   button: {
     flexDirection: 'row',
     alignItems: 'center',
-    marginVertical: 12,
+    paddingVertical: 16,
+    paddingHorizontal: 24,
+    marginBottom: 8,
   },
   text: {
-    fontFamily: 'Inter-Medium',
     fontSize: 14,
-    lineHeight: 24,
-    color: COLORS.TEXT.HIGH_EMPHASIS,
+    lineHeight: 20,
+    letterSpacing: 0.1,
   },
   icon: {
     color: COLORS.WHITE,