@100mslive/react-native-room-kit 1.0.0 → 1.0.2-beta.0

package/src/components/PIPView.tsx

@@ -1,30 +1,139 @@
 import * as React from 'react';
+import { shallowEqual, useSelector } from 'react-redux';
+import { View } from 'react-native';
 
 import type { PeerTrackNode } from '../utils/types';
-
-import PeerDisplayView from './PeerDisplayView';
-import { getTrackForPIPView } from '../utils/functions';
+import { PeerVideoTileView } from './PeerVideoTile/PeerVideoTileView';
+import type { RootState } from '../redux';
+import { COLORS } from '../utils/theme';
 
 type PIPViewProps = {
-  pairedPeers: PeerTrackNode[][];
+  peerTrackNodes: PeerTrackNode[];
+  customView?: React.ReactElement | null;
+};
+
+const PIPView: React.FC<PIPViewProps> = ({ peerTrackNodes, customView }) => {
+  const firstSSNode = useSelector(
+    (state: RootState) => state.app.screensharePeerTrackNodes[0]
+  );
+
+  if (customView) {
+    return customView;
+  }
+
+  if (firstSSNode) {
+    return (
+      <PeerVideoTileView key={firstSSNode.id} peerTrackNode={firstSSNode} />
+    );
+  }
+
+  return <PIPPeerTiles peerTrackNodes={peerTrackNodes} />;
 };
 
-const PIPView: React.FC<PIPViewProps> = ({ pairedPeers }) => {
-  const preferedPeerTrack = getTrackForPIPView(pairedPeers);
+export default PIPView;
+
+type PIPPeerTilesProps = {
+  peerTrackNodes: PeerTrackNode[];
+};
+
+const PIPPeerTiles: React.FC<PIPPeerTilesProps> = ({ peerTrackNodes }) => {
+  const memoDominantSpeakerIdsRef = React.useRef<string[]>([]);
+
+  const dominantSpeakerIds = useSelector((state: RootState) => {
+    return state.hmsStates.activeSpeakers
+      .slice(0, 3)
+      .map((speaker) => speaker.peer.peerID);
+  }, shallowEqual);
+
+  if (
+    dominantSpeakerIds.length > 0 &&
+    anyNewDominantSpeaker(memoDominantSpeakerIdsRef.current, dominantSpeakerIds)
+  ) {
+    memoDominantSpeakerIdsRef.current = dominantSpeakerIds;
+  }
+
+  const preferredPeerTrackNodes = React.useMemo(() => {
+    return getDominantSpeakers(
+      memoDominantSpeakerIdsRef.current,
+      peerTrackNodes
+    );
+  }, [memoDominantSpeakerIdsRef.current, peerTrackNodes]);
 
-  // If no Peer is available
-  if (!preferedPeerTrack?.peer) {
+  if (preferredPeerTrackNodes.length === 0) {
     return null;
   }
 
   return (
-    <PeerDisplayView
-      isLocal={preferedPeerTrack?.peer?.isLocal}
-      peer={preferedPeerTrack?.peer}
-      videoTrack={preferedPeerTrack?.track}
-      isDegraded={preferedPeerTrack?.isDegraded}
-    />
+    <View
+      style={{
+        flex: 1,
+        flexDirection: 'row',
+        backgroundColor: COLORS.BLACK,
+      }}
+    >
+      {preferredPeerTrackNodes.map((node, index, arr) => {
+        const isFirst = index === 0;
+        const dividerWidth = arr.length > 2 ? 4 : 5;
+
+        return (
+          <React.Fragment key={node.id}>
+            {isFirst ? null : (
+              <View style={{ height: '100%', width: dividerWidth }} />
+            )}
+
+            <View style={{ flex: 1 }}>
+              <PeerVideoTileView peerTrackNode={node} />
+            </View>
+          </React.Fragment>
+        );
+      })}
+    </View>
   );
 };
 
-export default PIPView;
+function anyNewDominantSpeaker(
+  oldSpeakers: string[],
+  newSpeakers: string[]
+): boolean {
+  if (newSpeakers.length !== oldSpeakers.length) {
+    return true;
+  }
+
+  const uniques = new Set([...oldSpeakers, ...newSpeakers]);
+
+  return uniques.size > oldSpeakers.length;
+}
+
+function getDominantSpeakers(
+  dominantSpeakerIds: string[],
+  peerTrackNodes: PeerTrackNode[]
+): PeerTrackNode[] {
+  if (peerTrackNodes.length <= 3) {
+    return peerTrackNodes;
+  }
+
+  const list = peerTrackNodes.slice(0, 3);
+
+  let dominantSpeakerIdsCopy = dominantSpeakerIds.slice();
+
+  for (let i = 3; i < peerTrackNodes.length; i++) {
+    const peerTrackNode = peerTrackNodes[i];
+
+    if (dominantSpeakerIdsCopy.length <= 0 || !peerTrackNode) {
+      break;
+    }
+
+    if (dominantSpeakerIdsCopy.includes(peerTrackNode.peer.peerID)) {
+      dominantSpeakerIdsCopy = dominantSpeakerIdsCopy.filter(
+        (speakerId) => speakerId !== peerTrackNode.peer.peerID
+      );
+      list.unshift(peerTrackNode);
+    }
+  }
+
+  if (list.length > 3) {
+    list.length = 3;
+  }
+
+  return list;
+}

package/src/components/Participants/MultiRoleParticipantsList.tsx

@@ -0,0 +1,70 @@
+import * as React from 'react';
+import { ScrollView, StyleSheet, Text, View } from 'react-native';
+
+import { useFilteredParticipants, useHMSRoomStyle } from '../../hooks-util';
+import { ParticipantsAccordian } from './ParticipantsAccordian';
+
+export type MultiRoleParticipantsListProps = {
+  searchText: string;
+  onViewAllPress(groupId: string): void;
+};
+
+export const MultiRoleParticipantsList: React.FC<MultiRoleParticipantsListProps> = ({
+  searchText,
+  onViewAllPress
+}) => {
+  const {
+    data,
+    formattedSearchText,
+    expandedGroup,
+    setExpandedGroup,
+  } = useFilteredParticipants(searchText);
+
+  const emptyTextStyles = useHMSRoomStyle((theme, typography) => ({
+    color: theme.palette.on_surface_medium,
+    fontFamily: `${typography.font_family}-SemiBold`,
+  }));
+
+  const searchTextExists = formattedSearchText.length > 0
+
+  if (searchTextExists && data.length <= 0) {
+    return (
+      <View style={styles.emptyContainer}>
+        <Text style={[styles.emptyText, emptyTextStyles]}>
+          No results found...
+        </Text>
+      </View>
+    );
+  }
+
+  return (
+    <ScrollView contentContainerStyle={{paddingBottom: 40}}>
+      {data.map(item => (
+        <ParticipantsAccordian
+          key={item.id}
+          open={expandedGroup === item.id}
+          data={item}
+          toggle={setExpandedGroup}
+          showViewAll={item.showViewAll}
+          onViewAllPress={onViewAllPress}
+        />
+      ))}
+    </ScrollView>
+  );
+};
+
+const styles = StyleSheet.create({
+  list: {
+    paddingBottom: 32,
+  },
+  emptyContainer: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  emptyText: {
+    fontSize: 14,
+    lineHeight: 20,
+    letterSpacing: 0.25,
+  },
+});

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',
   },