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

package/src/components/Participants/ParticipantsItem.tsx

@@ -0,0 +1,153 @@
+import * as React from 'react';
+import { useSelector } from 'react-redux';
+import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
+import type { HMSLocalPeer, HMSPeer } from '@100mslive/react-native-hms';
+
+import { isParticipantHostOrBroadcaster } from '../../utils/functions';
+import { useHMSRoomStyleSheet } from '../../hooks-util';
+import { HandIcon, NetworkQualityIcon, ThreeDotsIcon } from '../../Icons';
+import { Menu } from '../MenuModal';
+import { ParticipantsItemOptions } from './ParticipantsItemOptions';
+import type { RootState } from '../../redux';
+
+interface ParticipantsItemProps {
+  groupId: string;
+  data: HMSPeer | HMSLocalPeer;
+}
+
+const _ParticipantsItem: React.FC<ParticipantsItemProps> = ({
+  data: peer,
+  groupId,
+}) => {
+  const selfHostOrBroadcaster = useSelector((state: RootState) => {
+    const selfRole = state.hmsStates.localPeer?.role;
+    return selfRole && isParticipantHostOrBroadcaster(selfRole);
+  });
+
+  const [optionsVisible, setOptionsVisible] = React.useState(false);
+
+  const hmsRoomStyles = useHMSRoomStyleSheet((theme, typography) => ({
+    container: {
+      borderColor: theme.palette.border_bright,
+    },
+    label: {
+      color: theme.palette.on_surface_high,
+      fontFamily: `${typography.font_family}-SemiBold`,
+    },
+    iconWrapper: {
+      backgroundColor: theme.palette.surface_bright,
+    },
+    menu: {
+      backgroundColor: theme.palette.surface_default,
+      borderColor: theme.palette.border_bright,
+    },
+  }));
+
+  const show3Dots = selfHostOrBroadcaster && !peer.isLocal;
+
+  const showOptions = () => setOptionsVisible(true);
+
+  const hideOptions = () => setOptionsVisible(false);
+
+  return (
+    <View style={styles.container}>
+      <Text style={[styles.label, hmsRoomStyles.label]}>
+        {peer.name}
+        {peer.isLocal ? ' (You)' : null}
+      </Text>
+
+      <View style={styles.controls}>
+        {peer.isHandRaised ? (
+          <View
+            style={[
+              styles.control,
+              styles.iconWrapper,
+              hmsRoomStyles.iconWrapper,
+            ]}
+          >
+            <HandIcon style={styles.handIcon} />
+          </View>
+        ) : null}
+
+        {peer.networkQuality &&
+        peer.networkQuality.downlinkQuality >= 0 &&
+        peer.networkQuality.downlinkQuality < 4 ? (
+          <View
+            style={[
+              styles.control,
+              styles.iconWrapper,
+              hmsRoomStyles.iconWrapper,
+            ]}
+          >
+            <NetworkQualityIcon
+              quality={peer.networkQuality?.downlinkQuality}
+              style={styles.networkIcon}
+            />
+          </View>
+        ) : null}
+
+        {show3Dots ? (
+          <Menu
+            visible={optionsVisible}
+            onRequestClose={hideOptions}
+            anchor={
+              <TouchableOpacity style={styles.control} onPress={showOptions}>
+                <ThreeDotsIcon stack="vertical" />
+              </TouchableOpacity>
+            }
+            style={{ ...styles.menu, ...hmsRoomStyles.menu }}
+          >
+            <ParticipantsItemOptions
+              peer={peer}
+              onItemPress={hideOptions}
+              insideHandRaiseGroup={groupId === 'hand-raised'}
+            />
+          </Menu>
+        ) : null}
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    // borderLeftWidth: 1,
+    // borderRightWidth: 1,
+    padding: 16,
+    justifyContent: 'space-between',
+  },
+  label: {
+    fontSize: 14,
+    lineHeight: 20,
+    letterSpacing: 0.1,
+  },
+  controls: {
+    flexDirection: 'row',
+  },
+  control: {
+    marginLeft: 16,
+  },
+  iconWrapper: {
+    width: 24,
+    height: 24,
+    borderRadius: 12,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  handIcon: {
+    width: 18.75,
+    height: 18.75,
+  },
+  networkIcon: {
+    width: 16,
+    height: 16,
+  },
+  menu: {
+    borderWidth: 1,
+    borderRadius: 8,
+    backgroundColor: 'transparent',
+  },
+});
+
+export const ParticipantsItem = React.memo(_ParticipantsItem);

package/src/components/Participants/ParticipantsItemOption.tsx

@@ -0,0 +1,52 @@
+import * as React from 'react';
+import { StyleSheet, Text, TouchableOpacity } from 'react-native';
+import type { StyleProp, ViewStyle, TextStyle } from 'react-native';
+
+import { useHMSRoomStyle } from '../../hooks-util';
+
+interface ParticipantsItemOptionProps {
+  label: string;
+  onPress(): void;
+  icon?: React.ReactElement;
+  style?: StyleProp<ViewStyle>;
+  labelStyle?: StyleProp<TextStyle>;
+  // isActive?: boolean;
+  // hide?: boolean;
+}
+
+const _ParticipantsItemOption: React.FC<ParticipantsItemOptionProps> = ({
+  icon = null,
+  label,
+  onPress,
+  style,
+  labelStyle,
+}) => {
+  const textStyle = useHMSRoomStyle((theme, typography) => ({
+    color: theme.palette.on_surface_high,
+    fontFamily: `${typography.font_family}-SemiBold`,
+  }));
+
+  return (
+    <TouchableOpacity style={[styles.container, style]} onPress={onPress}>
+      {icon}
+
+      <Text style={[styles.text, textStyle, labelStyle]}>{label}</Text>
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    padding: 16,
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  text: {
+    fontSize: 14,
+    lineHeight: 20,
+    letterSpacing: 0.1,
+    marginLeft: 8,
+  },
+});
+
+export const ParticipantsItemOption = React.memo(_ParticipantsItemOption);

package/src/components/Participants/ParticipantsItemOptions.tsx

@@ -0,0 +1,262 @@
+import * as React from 'react';
+import { StyleSheet, View } from 'react-native';
+import { useSelector } from 'react-redux';
+import type { HMSLocalPeer, HMSPeer } from '@100mslive/react-native-hms';
+
+import {
+  useHMSInstance,
+  useHMSLayoutConfig,
+  useHMSRoomStyleSheet,
+} from '../../hooks-util';
+import { CameraIcon, MicIcon, PersonIcon } from '../../Icons';
+import { ParticipantsItemOption } from './ParticipantsItemOption';
+import type { RootState } from '../../redux';
+import { selectCanPublishTrackForRole } from '../../hooks-sdk-selectors';
+import { parseMetadata } from '../../utils/functions';
+
+interface ParticipantsItemOptionsProps {
+  insideHandRaiseGroup: boolean;
+  peer: HMSLocalPeer | HMSPeer;
+  onItemPress(): void;
+}
+
+const _ParticipantsItemOptions: React.FC<ParticipantsItemOptionsProps> = ({
+  peer,
+  onItemPress,
+  insideHandRaiseGroup = false,
+}) => {
+  const hmsInstance = useHMSInstance();
+
+  // Local Peer Permissions related states
+  const localPeerPermissions = useSelector(
+    (state: RootState) => state.hmsStates.localPeer?.role?.permissions
+  );
+
+  const localPeerCanMuteTrack =
+    localPeerPermissions && localPeerPermissions.mute;
+  const localPeerCanUnmuteTrack =
+    localPeerPermissions && localPeerPermissions.unmute;
+  const localPeerCanRemove =
+    localPeerPermissions && localPeerPermissions.removeOthers;
+
+  // Selected Peer Permissions related states
+  const peerCanPublishAudio = selectCanPublishTrackForRole(peer.role!, 'audio');
+  const peerCanPublishVideo = selectCanPublishTrackForRole(peer.role!, 'video');
+
+  // On Stage related states
+  const onStageRoleStr = useHMSLayoutConfig(
+    (layoutConfig) =>
+      layoutConfig?.screens?.conferencing?.default?.elements?.on_stage_exp
+        ?.on_stage_role
+  );
+  const onStageRole = useSelector((state: RootState) => {
+    const roles = state.hmsStates.roles;
+    return roles.find((role) => role.name === onStageRoleStr);
+  });
+  const offStageRoles = useHMSLayoutConfig((layoutConfig) => {
+    return layoutConfig?.screens?.conferencing?.default?.elements?.on_stage_exp
+      ?.off_stage_roles;
+  });
+  const firstOffStageRoleStr =
+    offStageRoles && offStageRoles.length > 0 ? offStageRoles[0] : undefined;
+  const prevRoleStr = parseMetadata(peer.metadata).prevRole;
+
+  const offStageRole = useSelector((state: RootState) => {
+    const roles = state.hmsStates.roles;
+    const offStageRoleStr = prevRoleStr || firstOffStageRoleStr;
+    return roles.find((role) => role.name === offStageRoleStr);
+  });
+
+  const hmsRoomStyles = useHMSRoomStyleSheet((theme) => ({
+    divider: {
+      backgroundColor: theme.palette.border_bright,
+    },
+    removeParticipant: {
+      color: theme.palette.alert_error_default,
+    },
+  }));
+
+  const handleBringOnStagePress = () => {
+    if (onStageRole) {
+      hmsInstance
+        .changeRoleOfPeer(peer, onStageRole)
+        .then((d) => console.log('Bring on Stage Success: ', d))
+        .catch((e) => console.log('Bring on Stage Error: ', e));
+    } else {
+      console.warn(`onStageRole '${onStageRoleStr}' is ${onStageRole}`);
+    }
+    onItemPress();
+  };
+
+  const handleAudioTogglePress = () => {
+    if (peer.audioTrack) {
+      hmsInstance
+        .changeTrackState(peer.audioTrack, !peer.audioTrack.isMute())
+        .then((d) => console.log('Toggle Video Success: ', d))
+        .catch((e) => console.log('Toggle Video Error: ', e));
+    }
+    onItemPress();
+  };
+
+  const handleVideoTogglePress = () => {
+    if (peer.videoTrack) {
+      hmsInstance
+        .changeTrackState(peer.videoTrack, !peer.videoTrack.isMute())
+        .then((d) => console.log('Toggle Video Success: ', d))
+        .catch((e) => console.log('Toggle Video Error: ', e));
+    }
+    onItemPress();
+  };
+
+  const handleRemoveFromStagePress = () => {
+    if (offStageRole) {
+      hmsInstance
+        .changeRoleOfPeer(peer, offStageRole, true)
+        .then((d) => console.log('Remove from Stage Success: ', d))
+        .catch((e) => console.log('Remove from Stage Error: ', e));
+    } else {
+      console.warn(
+        `offStageRole '${
+          prevRoleStr || firstOffStageRoleStr
+        }' is ${offStageRole}`
+      );
+    }
+    onItemPress();
+  };
+
+  const handleRemoveParticipantPress = () => {
+    hmsInstance
+      .removePeer(peer, 'removed from room')
+      .then((d) => console.log('Remove Peer Success: ', d))
+      .catch((e) => console.log('Remove Peer Error: ', e));
+    onItemPress();
+  };
+
+  const showMuteAudioOption =
+    !insideHandRaiseGroup &&
+    localPeerCanMuteTrack &&
+    peerCanPublishAudio &&
+    peer.audioTrack?.isMute() === false;
+
+  const showUnmuteAudioOption =
+    !insideHandRaiseGroup &&
+    localPeerCanUnmuteTrack &&
+    peerCanPublishAudio &&
+    peer.audioTrack?.isMute();
+
+  const showMuteVideoOption =
+    !insideHandRaiseGroup &&
+    localPeerCanMuteTrack &&
+    peerCanPublishVideo &&
+    peer.videoTrack?.isMute() === false;
+
+  const showUnmuteVideoOption =
+    !insideHandRaiseGroup &&
+    localPeerCanUnmuteTrack &&
+    peerCanPublishVideo &&
+    peer.videoTrack?.isMute();
+
+  const showBringOnStageOptions =
+    insideHandRaiseGroup &&
+    offStageRoles &&
+    offStageRoles.includes(peer.role?.name || '') &&
+    peer.isHandRaised;
+
+  return (
+    <>
+      {[
+        {
+          id: 'bring-on-stage',
+          icon: (
+            <PersonIcon type="rectangle" style={{ width: 20, height: 20 }} />
+          ),
+          label: 'Bring on Stage',
+          pressHandler: handleBringOnStagePress,
+          isActive: false,
+          hide: !showBringOnStageOptions,
+        },
+        {
+          id: 'mute-audio',
+          icon: <MicIcon muted={true} style={{ width: 20, height: 20 }} />,
+          label: 'Mute Audio',
+          pressHandler: handleAudioTogglePress,
+          isActive: false,
+          hide: !showMuteAudioOption,
+        },
+        {
+          id: 'unmute-audio',
+          icon: <MicIcon muted={false} style={{ width: 20, height: 20 }} />,
+          label: 'Unmute Audio',
+          pressHandler: handleAudioTogglePress,
+          isActive: false,
+          hide: !showUnmuteAudioOption,
+        },
+        {
+          id: 'mute-video',
+          icon: <CameraIcon muted={true} style={{ width: 20, height: 20 }} />,
+          label: 'Mute Video',
+          pressHandler: handleVideoTogglePress,
+          isActive: false,
+          hide: !showMuteVideoOption,
+        },
+        {
+          id: 'unmute-video',
+          icon: <CameraIcon muted={false} style={{ width: 20, height: 20 }} />,
+          label: 'Unmute Video',
+          pressHandler: handleVideoTogglePress,
+          isActive: false,
+          hide: !showUnmuteVideoOption,
+        },
+        {
+          id: 'remove-from-stage',
+          icon: (
+            <PersonIcon type="rectangle" style={{ width: 20, height: 20 }} />
+          ),
+          label: 'Remove from Stage',
+          pressHandler: handleRemoveFromStagePress,
+          isActive: false,
+          hide: Boolean(!onStageRoleStr || peer.role?.name !== onStageRoleStr),
+        },
+        {
+          id: 'remove-participant',
+          icon: <PersonIcon type="left" style={{ width: 20, height: 20 }} />,
+          label: 'Remove Participant',
+          pressHandler: handleRemoveParticipantPress,
+          style: null,
+          labelStyle: hmsRoomStyles.removeParticipant,
+          isActive: false,
+          hide: !localPeerCanRemove,
+        },
+      ]
+        .filter((item) => !item.hide)
+        .map((item, idx) => {
+          const isFirst = idx === 0;
+
+          return (
+            <React.Fragment key={item.id}>
+              {isFirst ? null : (
+                <View style={[styles.divider, hmsRoomStyles.divider]} />
+              )}
+
+              <ParticipantsItemOption
+                label={item.label}
+                onPress={item.pressHandler}
+                icon={item.icon}
+                style={item.style}
+                labelStyle={item.labelStyle}
+              />
+            </React.Fragment>
+          );
+        })}
+    </>
+  );
+};
+
+const styles = StyleSheet.create({
+  divider: {
+    height: 1,
+    width: '100%',
+  },
+});
+
+export const ParticipantsItemOptions = React.memo(_ParticipantsItemOptions);