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

package/src/components/Participants/ParticipantsAccordian.tsx

@@ -0,0 +1,70 @@
+import * as React from 'react';
+import { StyleSheet, View } from 'react-native';
+
+import { ParticipantsGroupHeader } from './ParticipantsGroupHeader';
+import { useHMSRoomStyleSheet } from '../../hooks-util';
+import type { ParticipantAccordianData } from '../../hooks-util';
+import { ParticipantsGroupFooter } from './ParticipantsGroupFooter';
+import { ParticipantsAccordianExpanded } from './ParticipantsAccordianExpanded';
+
+export interface ParticipantsAccordianProps {
+  open: boolean;
+  // role: HMSRole;
+  showViewAll?: boolean;
+  data: ParticipantAccordianData;
+  toggle(uid: string | null): void;
+  onViewAllPress(groupId: string): void;
+}
+
+export const ParticipantsAccordian: React.FC<ParticipantsAccordianProps> = ({
+  open,
+  data,
+  showViewAll = false,
+  toggle,
+  onViewAllPress,
+}) => {
+  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,
+    },
+  }));
+
+  return (
+    <View style={[styles.container, hmsRoomStyles.container]}>
+      <ParticipantsGroupHeader
+        id={data.id}
+        label={data.label}
+        expanded={open}
+        toggleExpanded={toggle}
+      />
+
+      {open ? (
+        <ParticipantsAccordianExpanded id={data.id} data={data.data} />
+      ) : null}
+
+      {open && showViewAll ? (
+        <ParticipantsGroupFooter
+          groupId={data.id}
+          onViewAllPress={onViewAllPress}
+        />
+      ) : null}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    marginTop: 16,
+    borderWidth: 1,
+    borderRadius: 8,
+    overflow: 'hidden',
+  },
+});

package/src/components/Participants/ParticipantsAccordianExpanded.tsx

@@ -0,0 +1,27 @@
+import * as React from 'react';
+
+import type { ParticipantAccordianData } from '../../hooks-util';
+import { ParticipantsItem } from './ParticipantsItem';
+
+interface ParticipantsAccordianExpandedProps {
+  id: ParticipantAccordianData['id'];
+  data: ParticipantAccordianData['data'];
+}
+
+export const ParticipantsAccordianExpanded: React.FC<
+  ParticipantsAccordianExpandedProps
+> = ({ id, data }) => {
+  return (
+    <>
+      {data.map((participant) => {
+        return (
+          <ParticipantsItem
+            key={participant.peerID}
+            groupId={id}
+            data={participant}
+          />
+        );
+      })}
+    </>
+  );
+};

package/src/components/Participants/ParticipantsGroupFooter.tsx

@@ -0,0 +1,65 @@
+import * as React from 'react';
+import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
+
+import { useHMSRoomStyleSheet } from '../../hooks-util';
+import type { ParticipantAccordianData } from '../../hooks-util';
+import { ChevronIcon } from '../../Icons';
+
+interface ParticipantsGroupHeaderProps {
+  groupId: ParticipantAccordianData['id'];
+  onViewAllPress(groupId: string): void;
+}
+
+const _ParticipantsGroupFooter: React.FC<ParticipantsGroupHeaderProps> = ({
+  groupId,
+  onViewAllPress,
+}) => {
+  const hmsRoomStyles = useHMSRoomStyleSheet((theme, typography) => ({
+    container: {
+      borderTopColor: theme.palette.border_bright,
+    },
+    label: {
+      color: theme.palette.on_surface_high,
+      fontFamily: `${typography.font_family}-Regular`,
+    },
+  }));
+
+  const handleViewAllPress = () => {
+    onViewAllPress(groupId);
+  };
+
+  return (
+    <View style={[styles.container, hmsRoomStyles.container]}>
+      <TouchableOpacity
+        style={[styles.viewAllAction]}
+        onPress={handleViewAllPress}
+      >
+        <Text style={[styles.label, hmsRoomStyles.label]}>View All</Text>
+
+        <ChevronIcon direction="right" />
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
+    paddingVertical: 12,
+    paddingHorizontal: 16,
+    borderTopWidth: 1,
+  },
+  label: {
+    fontSize: 14,
+    lineHeight: 20,
+    letterSpacing: 0.25,
+    marginRight: 4,
+  },
+  viewAllAction: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+});
+
+export const ParticipantsGroupFooter = React.memo(_ParticipantsGroupFooter);

package/src/components/Participants/ParticipantsGroupHeader.tsx

@@ -4,11 +4,7 @@ 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 type { ParticipantAccordianData } from '../../hooks-util';
 import { ChevronIcon, ThreeDotsIcon } from '../../Icons';
 import { Menu } from '../MenuModal';
 import { ParticipantsGroupOptions } from './ParticipantsGroupOptions';
@@ -16,13 +12,19 @@ import { ParticipantsGroupOptions } from './ParticipantsGroupOptions';
 // import { isParticipantHostOrBroadcaster } from '../../utils/functions';
 
 interface ParticipantsGroupHeaderProps {
-  data: ListItemUI<ParticipantHeaderData | ParticipantHandRaisedHeaderData>;
-  setExpandedGroups: React.Dispatch<React.SetStateAction<string[]>>;
+  id: ParticipantAccordianData['id'];
+  label: ParticipantAccordianData['label'];
+  expanded: boolean;
+  onBackPress?: () => void;
+  toggleExpanded?: (groupName: string | null) => void;
 }
 
 const _ParticipantsGroupHeader: React.FC<ParticipantsGroupHeaderProps> = ({
-  data,
-  setExpandedGroups,
+  id,
+  label,
+  expanded,
+  onBackPress,
+  toggleExpanded,
 }) => {
   // const selfHostOrBroadcaster = useSelector((state: RootState) => {
   //   const selfRole = state.hmsStates.localPeer?.role;
@@ -48,26 +50,19 @@ const _ParticipantsGroupHeader: React.FC<ParticipantsGroupHeaderProps> = ({
   const show3Dots = false;
   // const show3Dots =
   //   selfHostOrBroadcaster &&
-  //   ('role' in data.data
-  //     ? !isParticipantHostOrBroadcaster(data.data.role)
-  //     : data.key === 'hand-raised');
+  //   ('role' in data
+  //     ? !isParticipantHostOrBroadcaster(data.role)
+  //     : data.id === '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);
+  const toggleGroupExpand = toggleExpanded
+    ? () => {
+        toggleExpanded(expanded ? null : id);
       }
-      return [...expandedGroups, groupName];
-    });
-  };
+    : null;
 
   return (
     <View
@@ -77,7 +72,15 @@ const _ParticipantsGroupHeader: React.FC<ParticipantsGroupHeaderProps> = ({
         hmsRoomStyles.container,
       ]}
     >
-      <Text style={[styles.label, hmsRoomStyles.label]}>{data.data.label}</Text>
+      <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+        {onBackPress ? (
+          <TouchableOpacity style={{ marginRight: 8 }} onPress={onBackPress}>
+            <ChevronIcon direction="left" />
+          </TouchableOpacity>
+        ) : null}
+
+        <Text style={[styles.label, hmsRoomStyles.label]}>{label}</Text>
+      </View>
 
       <View style={styles.controls}>
         {show3Dots ? (
@@ -91,16 +94,18 @@ const _ParticipantsGroupHeader: React.FC<ParticipantsGroupHeaderProps> = ({
             }
             style={{ ...styles.menu, ...hmsRoomStyles.menu }}
           >
-            <ParticipantsGroupOptions data={data} />
+            <ParticipantsGroupOptions />
           </Menu>
         ) : null}
 
-        <TouchableOpacity
-          style={[styles.control, expanded ? styles.expandedArrowIcon : null]}
-          onPress={toggleGroupExpand}
-        >
-          <ChevronIcon direction="down" />
-        </TouchableOpacity>
+        {toggleGroupExpand ? (
+          <TouchableOpacity
+            style={[styles.control, expanded ? styles.expandedArrowIcon : null]}
+            onPress={toggleGroupExpand}
+          >
+            <ChevronIcon direction="down" />
+          </TouchableOpacity>
+        ) : null}
       </View>
     </View>
   );
@@ -109,9 +114,6 @@ const _ParticipantsGroupHeader: React.FC<ParticipantsGroupHeaderProps> = ({
 const styles = StyleSheet.create({
   container: {
     flexDirection: 'row',
-    marginTop: 16,
-    borderWidth: 1,
-    borderRadius: 8,
     paddingVertical: 12,
     paddingHorizontal: 16,
     justifyContent: 'space-between',
@@ -122,9 +124,7 @@ const styles = StyleSheet.create({
     letterSpacing: 0.1,
   },
   expandedContainer: {
-    borderTopLeftRadius: 8,
-    borderTopRightRadius: 8,
-    borderRadius: 0,
+    borderBottomWidth: 1,
   },
   controls: {
     flexDirection: 'row',

package/src/components/Participants/ParticipantsGroupOptions.tsx

@@ -2,16 +2,11 @@ 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>;
+  // data: any;
 }
 
 const _ParticipantsGroupOptions: React.FC<

package/src/components/Participants/ParticipantsItem.tsx

@@ -1,24 +1,24 @@
 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 type { HMSLocalPeer, HMSPeer } from '@100mslive/react-native-hms';
 
-import {
-  isParticipantHostOrBroadcaster,
-  parseMetadata,
-} from '../../utils/functions';
+import { isParticipantHostOrBroadcaster } 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>;
+  groupId: string;
+  data: HMSPeer | HMSLocalPeer;
 }
 
-const _ParticipantsItem: React.FC<ParticipantsItemProps> = ({ data }) => {
+const _ParticipantsItem: React.FC<ParticipantsItemProps> = ({
+  data: peer,
+  groupId,
+}) => {
   const selfHostOrBroadcaster = useSelector((state: RootState) => {
     const selfRole = state.hmsStates.localPeer?.role;
     return selfRole && isParticipantHostOrBroadcaster(selfRole);
@@ -43,33 +43,21 @@ const _ParticipantsItem: React.FC<ParticipantsItemProps> = ({ data }) => {
     },
   }));
 
-  const show3Dots = selfHostOrBroadcaster && !data.data.isLocal;
+  const show3Dots = selfHostOrBroadcaster && !peer.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,
-      ]}
-    >
+    <View style={styles.container}>
       <Text style={[styles.label, hmsRoomStyles.label]}>
-        {data.data.name}
-        {data.data.isLocal ? ' (You)' : null}
+        {peer.name}
+        {peer.isLocal ? ' (You)' : null}
       </Text>
 
       <View style={styles.controls}>
-        {isHandRaised ? (
+        {peer.isHandRaised ? (
           <View
             style={[
               styles.control,
@@ -112,7 +100,7 @@ const _ParticipantsItem: React.FC<ParticipantsItemProps> = ({ data }) => {
             <ParticipantsItemOptions
               peer={peer}
               onItemPress={hideOptions}
-              insideHandRaiseGroup={peerGroupName === 'hand-raised'}
+              insideHandRaiseGroup={groupId === 'hand-raised'}
             />
           </Menu>
         ) : null}
@@ -124,8 +112,8 @@ const _ParticipantsItem: React.FC<ParticipantsItemProps> = ({ data }) => {
 const styles = StyleSheet.create({
   container: {
     flexDirection: 'row',
-    borderLeftWidth: 1,
-    borderRightWidth: 1,
+    // borderLeftWidth: 1,
+    // borderRightWidth: 1,
     padding: 16,
     justifyContent: 'space-between',
   },
@@ -134,11 +122,6 @@ const styles = StyleSheet.create({
     lineHeight: 20,
     letterSpacing: 0.1,
   },
-  lastItemContainer: {
-    borderBottomWidth: 1,
-    borderBottomLeftRadius: 8,
-    borderBottomRightRadius: 8,
-  },
   controls: {
     flexDirection: 'row',
   },

package/src/components/Participants/ParticipantsItemOptions.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { StyleSheet, View } from 'react-native';
 import { useSelector } from 'react-redux';
-import type { HMSLocalPeer, HMSRemotePeer } from '@100mslive/react-native-hms';
+import type { HMSLocalPeer, HMSPeer } from '@100mslive/react-native-hms';
 
 import {
   useHMSInstance,
@@ -16,7 +16,7 @@ import { parseMetadata } from '../../utils/functions';
 
 interface ParticipantsItemOptionsProps {
   insideHandRaiseGroup: boolean;
-  peer: HMSLocalPeer | HMSRemotePeer;
+  peer: HMSLocalPeer | HMSPeer;
   onItemPress(): void;
 }
 
@@ -160,7 +160,7 @@ const _ParticipantsItemOptions: React.FC<ParticipantsItemOptionsProps> = ({
     insideHandRaiseGroup &&
     offStageRoles &&
     offStageRoles.includes(peer.role?.name || '') &&
-    parseMetadata(peer.metadata).isHandRaised;
+    peer.isHandRaised;
 
   return (
     <>