@100mslive/react-native-room-kit 0.0.3 → 0.1.0

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));
     });
   };
 
@@ -93,13 +114,6 @@ export const PeerSettingsModalContent: React.FC<
     });
   };
 
-  const changeVolumeLevelOfPeer = () => {
-    batch(() => {
-      dispatch(setPeerToUpdate(peerTrackNode.peer));
-      setModalVisible(ModalTypes.VOLUME, true);
-    });
-  };
-
   // Check if selected tile is "On Spotlight"
   const { onSpotlight, tileVideoTrackId, tileAudioTrackId } = isTileOnSpotlight(
     spotlightTrackId,
@@ -139,22 +153,49 @@ 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}>
+        {peer.isLocal ? ( // TODO: Remove this condition later
+          <SettingItem
+            customIcon={true}
+            text={true ? 'Pin Tile for Myself' : 'Unpin Tile for Myself'}
+            icon={<PinIcon style={styles.customIcon} />}
+            disabled={true}
+            onPress={() => {}}
+          />
+        ) : null}
+
         <SettingItem
-          text={onSpotlight ? 'Remove from Spotlight' : 'Add to Spotlight'}
-          IconType={Ionicons}
-          iconName={onSpotlight ? 'ios-star' : 'ios-star-outline'}
+          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}
+
         {!peer.isLocal &&
         (localPeerPermissions?.mute || localPeerPermissions?.unmute) ? (
           <>
@@ -214,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}
@@ -232,15 +273,6 @@ export const PeerSettingsModalContent: React.FC<
           />
         ) : null}
 
-        {!peer.isLocal ? (
-          <SettingItem
-            text="Set Volume"
-            IconType={Ionicons}
-            iconName={'volume-high-outline'}
-            onPress={() => changeVolumeLevelOfPeer()}
-          />
-        ) : null}
-
         {/* Don't show Capture Screenshot option, if track is screenshare of local peer */}
         {!debugMode ||
         (peerTrackNode.peer.isLocal &&
@@ -287,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} />
+      {resetProps.customIcon ? (
+        resetProps.icon
+      ) : (
+        <resetProps.IconType
+          name={resetProps.iconName}
+          size={24}
+          style={styles.icon}
+        />
+      )}
 
-      <Text style={styles.text}>{text}</Text>
+      <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,

package/src/components/PeerVideoTile/AvatarView.tsx

@@ -0,0 +1,79 @@
+import * as React from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+
+import { PersonIcon } from '../../Icons';
+import { getInitials } from '../../utils/functions';
+import { COLORS } from '../../utils/theme';
+import type { VideoView } from './VideoView';
+import { useHMSRoomStyleSheet } from '../../hooks-util';
+
+export interface AvatarViewProps {
+  name: string;
+  videoView: React.ReactElement<typeof VideoView> | null;
+}
+
+export const _AvatarView: React.FC<AvatarViewProps> = ({ name, videoView }) => {
+  const showInitials = !!name && name.length > 0;
+
+  const hmsRoomStyles = useHMSRoomStyleSheet((theme, typography) => ({
+    avatarContainer: {
+      backgroundColor: theme.palette.surface_default,
+    },
+    avatar: {
+      backgroundColor: COLORS.EXTENDED.PURPLE,
+    },
+    avatarText: {
+      color: theme.palette.on_surface_high,
+      fontFamily: `${typography.font_family}-SemiBold`,
+    },
+  }));
+
+  return (
+    <View style={styles.container}>
+      {videoView || (
+        <View style={[styles.avatarContainer, hmsRoomStyles.avatarContainer]}>
+          <View style={[styles.avatar, hmsRoomStyles.avatar]}>
+            {showInitials ? (
+              <Text style={[styles.avatarText, hmsRoomStyles.avatarText]}>
+                {getInitials(name)}
+              </Text>
+            ) : (
+              <PersonIcon style={styles.avatarIcon} />
+            )}
+          </View>
+        </View>
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    position: 'relative',
+    overflow: 'hidden',
+  },
+  avatarContainer: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  avatar: {
+    width: 88,
+    aspectRatio: 1,
+    borderRadius: 44,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  avatarIcon: {
+    width: 40,
+    height: 40,
+  },
+  avatarText: {
+    fontSize: 34,
+    lineHeight: 40,
+    letterSpacing: 0.25,
+  },
+});
+
+export const AvatarView = React.memo(_AvatarView);

package/src/components/PeerVideoTile/PeerAudioMutedIndicator.tsx

@@ -0,0 +1,41 @@
+import * as React from 'react';
+import { StyleSheet, View } from 'react-native';
+
+import { MicIcon } from '../../Icons';
+import { useHMSRoomStyle } from '../../hooks-util';
+
+export interface PeerAudioMutedIndicatorProps {
+  isMuted: boolean | undefined;
+}
+
+export const PeerAudioMutedIndicator: React.FC<
+  PeerAudioMutedIndicatorProps
+> = ({ isMuted }) => {
+  const iconWrapperStyles = useHMSRoomStyle((theme) => ({
+    backgroundColor: theme.palette.secondary_dim,
+  }));
+
+  if (isMuted) {
+    return (
+      <View style={[styles.iconWrapper, iconWrapperStyles]}>
+        <MicIcon muted={true} style={styles.icon} />
+      </View>
+    );
+  }
+
+  return null;
+};
+
+const styles = StyleSheet.create({
+  iconWrapper: {
+    position: 'absolute',
+    top: 8,
+    right: 8,
+    padding: 8,
+    borderRadius: 16,
+  },
+  icon: {
+    width: 16,
+    height: 16,
+  },
+});

package/src/components/PeerVideoTile/PeerMetadata.tsx

@@ -0,0 +1,46 @@
+import * as React from 'react';
+import { StyleSheet, View } from 'react-native';
+
+import { parseMetadata } from '../../utils/functions';
+import { BRBIcon, HandIcon } from '../../Icons';
+import { useHMSRoomStyle } from '../../hooks-util';
+
+export interface PeerMetadataProps {
+  metadata: string | undefined;
+}
+
+export const PeerMetadata: React.FC<PeerMetadataProps> = ({ metadata }) => {
+  const parsedMetadata = parseMetadata(metadata);
+
+  const iconWrapperStyles = useHMSRoomStyle((theme) => ({
+    backgroundColor: theme.palette.secondary_dim,
+  }));
+
+  if (parsedMetadata.isBRBOn) {
+    return (
+      <View style={[styles.iconWrapper, iconWrapperStyles]}>
+        <BRBIcon />
+      </View>
+    );
+  }
+
+  if (parsedMetadata.isHandRaised) {
+    return (
+      <View style={[styles.iconWrapper, iconWrapperStyles]}>
+        <HandIcon />
+      </View>
+    );
+  }
+
+  return null;
+};
+
+const styles = StyleSheet.create({
+  iconWrapper: {
+    position: 'absolute',
+    top: 8,
+    left: 8,
+    padding: 4,
+    borderRadius: 16,
+  },
+});

package/src/components/PeerVideoTile/PeerNameAndNetwork.tsx

@@ -0,0 +1,81 @@
+import * as React from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+import { HMSTrackSource } from '@100mslive/react-native-hms';
+
+import { hexToRgbA } from '../../utils/theme';
+import { NetworkQualityIcon } from '../../Icons';
+import { useHMSRoomStyleSheet } from '../../hooks-util';
+
+export interface PeerNameAndNetworkProps {
+  name: string;
+  isLocal: boolean | undefined;
+  trackSource: HMSTrackSource | undefined;
+  networkQuality: number | undefined;
+}
+
+export const PeerNameAndNetwork: React.FC<PeerNameAndNetworkProps> = ({
+  name,
+  isLocal,
+  trackSource,
+  networkQuality,
+}) => {
+  const showTrackSource = trackSource && trackSource !== HMSTrackSource.REGULAR;
+
+  const hmsRoomStyles = useHMSRoomStyleSheet((theme, typography) => ({
+    contentContainer: {
+      backgroundColor: hexToRgbA(theme.palette.background_dim, 0.64),
+    },
+    name: {
+      color: theme.palette.on_surface_high,
+      fontFamily: `${typography.font_family}-Regular`,
+    },
+  }));
+
+  return (
+    <View style={styles.container}>
+      <View style={[styles.contentContainer, hmsRoomStyles.contentContainer]}>
+        <Text
+          style={[styles.name, hmsRoomStyles.name]}
+          numberOfLines={1}
+          ellipsizeMode={showTrackSource ? 'middle' : 'tail'}
+        >
+          {name}
+          {isLocal ? ' (You)' : ''}
+          {showTrackSource ? `'s ${trackSource}` : ''}
+        </Text>
+
+        <NetworkQualityIcon
+          quality={networkQuality}
+          style={styles.networkIcon}
+        />
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    position: 'absolute',
+    bottom: 8,
+    width: '100%',
+    flexDirection: 'row',
+  },
+  contentContainer: {
+    flexDirection: 'row',
+    paddingVertical: 4,
+    paddingHorizontal: 8,
+    borderRadius: 8,
+    marginLeft: 8, // left offset
+    marginRight: 20 + 4 + 44, // network icon width + network icon left margin + 3 dots button width and horizontal margins
+  },
+  name: {
+    flexGrow: 1,
+    flexShrink: 1,
+    fontSize: 14,
+    lineHeight: 20,
+    letterSpacing: 0.25,
+  },
+  networkIcon: {
+    marginLeft: 4,
+  },
+});