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

package/src/components/PaginationDots.tsx

@@ -1,19 +1,20 @@
 import * as React from 'react';
-import { useSelector } from 'react-redux';
 import { StyleSheet, View } from 'react-native';
+import type { StyleProp, ViewStyle } from 'react-native';
 
 import { useHMSRoomStyleSheet } from '../hooks-util';
-import type { RootState } from '../redux';
 
 export interface PaginationDotsProps {
   list: any[];
+  activeIndex: number;
+  style?: StyleProp<ViewStyle>;
 }
 
-const _PaginationDots: React.FC<PaginationDotsProps> = ({ list }) => {
-  const activeIndex = useSelector(
-    (state: RootState) => state.app.gridViewActivePage
-  );
-
+const _PaginationDots: React.FC<PaginationDotsProps> = ({
+  list,
+  activeIndex,
+  style,
+}) => {
   const hmsRoomStyles = useHMSRoomStyleSheet(
     (theme) => ({
       dot: { backgroundColor: theme.palette.on_surface_low },
@@ -23,7 +24,7 @@ const _PaginationDots: React.FC<PaginationDotsProps> = ({ list }) => {
   );
 
   return (
-    <View style={styles.container}>
+    <View style={[styles.container, style]}>
       {list.map((listItem, idx) => {
         const isActive = activeIndex === idx;
         const isFirst = idx === 0;

package/src/components/Participants/ParticipantsGroupHeader.tsx

@@ -0,0 +1,145 @@
+import * as React from 'react';
+// import { useSelector } from 'react-redux';
+import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
+// import type { HMSRole } from '@100mslive/react-native-hms';
+
+import { useHMSRoomStyleSheet } from '../../hooks-util';
+import type {
+  ListItemUI,
+  ParticipantHandRaisedHeaderData,
+  ParticipantHeaderData,
+} from '../../hooks-util';
+import { ChevronIcon, ThreeDotsIcon } from '../../Icons';
+import { Menu } from '../MenuModal';
+import { ParticipantsGroupOptions } from './ParticipantsGroupOptions';
+// import type { RootState } from '../../redux';
+// import { isParticipantHostOrBroadcaster } from '../../utils/functions';
+
+interface ParticipantsGroupHeaderProps {
+  data: ListItemUI<ParticipantHeaderData | ParticipantHandRaisedHeaderData>;
+  setExpandedGroups: React.Dispatch<React.SetStateAction<string[]>>;
+}
+
+const _ParticipantsGroupHeader: React.FC<ParticipantsGroupHeaderProps> = ({
+  data,
+  setExpandedGroups,
+}) => {
+  // 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_medium,
+      fontFamily: `${typography.font_family}-SemiBold`,
+    },
+    menu: {
+      backgroundColor: theme.palette.surface_default,
+      borderColor: theme.palette.border_bright,
+    },
+  }));
+
+  const show3Dots = false;
+  // const show3Dots =
+  //   selfHostOrBroadcaster &&
+  //   ('role' in data.data
+  //     ? !isParticipantHostOrBroadcaster(data.data.role)
+  //     : data.key === 'hand-raised');
+
+  const showOptions = () => setOptionsVisible(true);
+
+  const hideOptions = () => setOptionsVisible(false);
+
+  const expanded = data.type === 'EXPANDED_HEADER';
+
+  const toggleGroupExpand = () => {
+    const groupName = data.key;
+
+    setExpandedGroups((expandedGroups) => {
+      if (expandedGroups.includes(groupName)) {
+        return expandedGroups.filter((group) => group !== groupName);
+      }
+      return [...expandedGroups, groupName];
+    });
+  };
+
+  return (
+    <View
+      style={[
+        styles.container,
+        expanded ? styles.expandedContainer : null,
+        hmsRoomStyles.container,
+      ]}
+    >
+      <Text style={[styles.label, hmsRoomStyles.label]}>{data.data.label}</Text>
+
+      <View style={styles.controls}>
+        {show3Dots ? (
+          <Menu
+            visible={optionsVisible}
+            onRequestClose={hideOptions}
+            anchor={
+              <TouchableOpacity style={styles.control} onPress={showOptions}>
+                <ThreeDotsIcon stack="vertical" />
+              </TouchableOpacity>
+            }
+            style={{ ...styles.menu, ...hmsRoomStyles.menu }}
+          >
+            <ParticipantsGroupOptions data={data} />
+          </Menu>
+        ) : null}
+
+        <TouchableOpacity
+          style={[styles.control, expanded ? styles.expandedArrowIcon : null]}
+          onPress={toggleGroupExpand}
+        >
+          <ChevronIcon direction="down" />
+        </TouchableOpacity>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    marginTop: 16,
+    borderWidth: 1,
+    borderRadius: 8,
+    paddingVertical: 12,
+    paddingHorizontal: 16,
+    justifyContent: 'space-between',
+  },
+  label: {
+    fontSize: 14,
+    lineHeight: 20,
+    letterSpacing: 0.1,
+  },
+  expandedContainer: {
+    borderTopLeftRadius: 8,
+    borderTopRightRadius: 8,
+    borderRadius: 0,
+  },
+  controls: {
+    flexDirection: 'row',
+  },
+  control: {
+    marginLeft: 16,
+  },
+  expandedArrowIcon: {
+    transform: [{ rotateZ: '180deg' }],
+  },
+  menu: {
+    borderWidth: 1,
+    borderRadius: 8,
+    backgroundColor: 'transparent',
+  },
+});
+
+export const ParticipantsGroupHeader = React.memo(_ParticipantsGroupHeader);

package/src/components/Participants/ParticipantsGroupOptions.tsx

@@ -0,0 +1,87 @@
+import * as React from 'react';
+import { StyleSheet, View } from 'react-native';
+
+import { useHMSRoomStyleSheet } from '../../hooks-util';
+import type {
+  ListItemUI,
+  ParticipantHeaderData,
+  ParticipantHandRaisedHeaderData,
+} from '../../hooks-util';
+import { HandIcon } from '../../Icons';
+import { ParticipantsItemOption } from './ParticipantsItemOption';
+
+interface ParticipantsGroupOptionsProps {
+  data: ListItemUI<ParticipantHeaderData | ParticipantHandRaisedHeaderData>;
+}
+
+const _ParticipantsGroupOptions: React.FC<
+  ParticipantsGroupOptionsProps
+> = () => {
+  const hmsRoomStyles = useHMSRoomStyleSheet((theme) => ({
+    divider: {
+      backgroundColor: theme.palette.border_bright,
+    },
+  }));
+
+  const handleBringOnStagePress = () => {};
+
+  const handleLowerHandPress = () => {};
+
+  const handleRemoveParticipantPress = () => {};
+
+  return (
+    <>
+      {[
+        {
+          id: 'bring-on-stage',
+          icon: <HandIcon style={{ width: 20, height: 20 }} />,
+          label: 'Bring on Stage',
+          pressHandler: handleBringOnStagePress,
+          isActive: false,
+          hide: false,
+        },
+        {
+          id: 'lower-hand',
+          icon: <HandIcon style={{ width: 20, height: 20 }} />,
+          label: 'Lower Hand',
+          pressHandler: handleLowerHandPress,
+          isActive: false,
+          hide: false,
+        },
+        {
+          id: 'remove-participant',
+          icon: <HandIcon style={{ width: 20, height: 20 }} />,
+          label: 'Remove Participant',
+          pressHandler: handleRemoveParticipantPress,
+          isActive: false,
+          hide: false,
+        },
+      ].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}
+            />
+          </React.Fragment>
+        );
+      })}
+    </>
+  );
+};
+
+const styles = StyleSheet.create({
+  divider: {
+    height: 1,
+    width: '100%',
+  },
+});
+
+export const ParticipantsGroupOptions = React.memo(_ParticipantsGroupOptions);

package/src/components/Participants/ParticipantsItem.tsx

@@ -0,0 +1,170 @@
+import * as React from 'react';
+import { useSelector } from 'react-redux';
+import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
+import type { HMSLocalPeer, HMSRemotePeer } from '@100mslive/react-native-hms';
+
+import {
+  isParticipantHostOrBroadcaster,
+  parseMetadata,
+} from '../../utils/functions';
+import { useHMSRoomStyleSheet } from '../../hooks-util';
+import type { ListItemUI } from '../../hooks-util';
+import { HandIcon, NetworkQualityIcon, ThreeDotsIcon } from '../../Icons';
+import { Menu } from '../MenuModal';
+import { ParticipantsItemOptions } from './ParticipantsItemOptions';
+import type { RootState } from '../../redux';
+
+interface ParticipantsItemProps {
+  data: ListItemUI<HMSLocalPeer | HMSRemotePeer>;
+}
+
+const _ParticipantsItem: React.FC<ParticipantsItemProps> = ({ data }) => {
+  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 && !data.data.isLocal;
+
+  const showOptions = () => setOptionsVisible(true);
+
+  const hideOptions = () => setOptionsVisible(false);
+
+  const isLast = data.type === 'LAST_ITEM';
+
+  const peer = data.data;
+  const isHandRaised = parseMetadata(peer.metadata).isHandRaised;
+
+  const [_peerID, peerGroupName] = data.key.split('--');
+  return (
+    <View
+      style={[
+        styles.container,
+        isLast ? styles.lastItemContainer : null,
+        hmsRoomStyles.container,
+      ]}
+    >
+      <Text style={[styles.label, hmsRoomStyles.label]}>
+        {data.data.name}
+        {data.data.isLocal ? ' (You)' : null}
+      </Text>
+
+      <View style={styles.controls}>
+        {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={peerGroupName === '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,
+  },
+  lastItemContainer: {
+    borderBottomWidth: 1,
+    borderBottomLeftRadius: 8,
+    borderBottomRightRadius: 8,
+  },
+  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);