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

package/src/components/PIPView.tsx

@@ -1,28 +1,49 @@
 import * as React from 'react';
+import { useSelector } from 'react-redux';
 
 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';
 
 type PIPViewProps = {
-  pairedPeers: PeerTrackNode[][];
+  peerTrackNodes: PeerTrackNode[];
+  customView?: React.ReactElement | null;
 };
 
-const PIPView: React.FC<PIPViewProps> = ({ pairedPeers }) => {
-  const preferedPeerTrack = getTrackForPIPView(pairedPeers);
+const PIPView: React.FC<PIPViewProps> = ({ peerTrackNodes, customView }) => {
+  const memoDominantSpeakerIdRef = React.useRef<string | null>(null);
+
+  const dominantSpeakerId = useSelector((state: RootState) => {
+    const dominantSpeaker = state.hmsStates.activeSpeakers[0];
+
+    return dominantSpeaker?.peer.peerID ?? null;
+  });
+
+  if (dominantSpeakerId) {
+    memoDominantSpeakerIdRef.current = dominantSpeakerId;
+  }
+
+  if (customView) {
+    return customView;
+  }
+
+  const firstPeerTrackNode = peerTrackNodes[0];
+
+  const preferedPeerTrack =
+    (memoDominantSpeakerIdRef.current
+      ? peerTrackNodes.find(
+          (node) => node.peer.peerID === memoDominantSpeakerIdRef.current
+        )
+      : firstPeerTrackNode) ?? firstPeerTrackNode;
 
-  // If no Peer is available
-  if (!preferedPeerTrack?.peer) {
+  if (!preferedPeerTrack) {
     return null;
   }
 
   return (
-    <PeerDisplayView
-      isLocal={preferedPeerTrack?.peer?.isLocal}
-      peer={preferedPeerTrack?.peer}
-      videoTrack={preferedPeerTrack?.track}
-      isDegraded={preferedPeerTrack?.isDegraded}
+    <PeerVideoTileView
+      key={preferedPeerTrack.id}
+      peerTrackNode={preferedPeerTrack}
     />
   );
 };

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/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

@@ -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 { ParticipantAccordianData } 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 {
+  id: ParticipantAccordianData['id'];
+  label: ParticipantAccordianData['label'];
+  expanded: boolean;
+  onBackPress?: () => void;
+  toggleExpanded?: (groupName: string | null) => void;
+}
+
+const _ParticipantsGroupHeader: React.FC<ParticipantsGroupHeaderProps> = ({
+  id,
+  label,
+  expanded,
+  onBackPress,
+  toggleExpanded,
+}) => {
+  // 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
+  //     ? !isParticipantHostOrBroadcaster(data.role)
+  //     : data.id === 'hand-raised');
+
+  const showOptions = () => setOptionsVisible(true);
+
+  const hideOptions = () => setOptionsVisible(false);
+
+  const toggleGroupExpand = toggleExpanded
+    ? () => {
+        toggleExpanded(expanded ? null : id);
+      }
+    : null;
+
+  return (
+    <View
+      style={[
+        styles.container,
+        expanded ? styles.expandedContainer : null,
+        hmsRoomStyles.container,
+      ]}
+    >
+      <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 ? (
+          <Menu
+            visible={optionsVisible}
+            onRequestClose={hideOptions}
+            anchor={
+              <TouchableOpacity style={styles.control} onPress={showOptions}>
+                <ThreeDotsIcon stack="vertical" />
+              </TouchableOpacity>
+            }
+            style={{ ...styles.menu, ...hmsRoomStyles.menu }}
+          >
+            <ParticipantsGroupOptions />
+          </Menu>
+        ) : null}
+
+        {toggleGroupExpand ? (
+          <TouchableOpacity
+            style={[styles.control, expanded ? styles.expandedArrowIcon : null]}
+            onPress={toggleGroupExpand}
+          >
+            <ChevronIcon direction="down" />
+          </TouchableOpacity>
+        ) : null}
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    paddingVertical: 12,
+    paddingHorizontal: 16,
+    justifyContent: 'space-between',
+  },
+  label: {
+    fontSize: 14,
+    lineHeight: 20,
+    letterSpacing: 0.1,
+  },
+  expandedContainer: {
+    borderBottomWidth: 1,
+  },
+  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,82 @@
+import * as React from 'react';
+import { StyleSheet, View } from 'react-native';
+
+import { useHMSRoomStyleSheet } from '../../hooks-util';
+import { HandIcon } from '../../Icons';
+import { ParticipantsItemOption } from './ParticipantsItemOption';
+
+interface ParticipantsGroupOptionsProps {
+  // data: any;
+}
+
+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);