@stream-io/video-react-native-sdk 0.0.1-alpha.141

package/src/components/CallParticipantsInfoView.tsx

@@ -0,0 +1,287 @@
+import {
+  OwnCapability,
+  SfuModels,
+  StreamVideoParticipant,
+} from '@stream-io/video-client';
+import {
+  Restricted,
+  useCall,
+  useConnectedUser,
+  useHasPermissions,
+  useParticipantCount,
+  useParticipants,
+} from '@stream-io/video-react-bindings';
+import {
+  Alert,
+  FlatList,
+  Modal,
+  Pressable,
+  StyleSheet,
+  Text,
+  View,
+} from 'react-native';
+import { ArrowRight, Cross, MicOff, ScreenShare, VideoSlash } from '../icons';
+import React, { useCallback, useState } from 'react';
+import { generateParticipantTitle } from '../utils';
+import { CallParticipantOptions } from './CallParticipantsOptions';
+import { Avatar } from './Avatar';
+import { theme } from '../theme';
+
+type CallParticipantInfoViewType = {
+  participant: StreamVideoParticipant;
+  setSelectedParticipant: React.Dispatch<
+    React.SetStateAction<StreamVideoParticipant | undefined>
+  >;
+};
+
+const CallParticipantInfoItem = (props: CallParticipantInfoViewType) => {
+  const { participant, setSelectedParticipant } = props;
+  const connectedUser = useConnectedUser();
+  const participantIsLoggedInUser = participant.userId === connectedUser?.id;
+  const userHasMuteUsersCapability = useHasPermissions(
+    OwnCapability.MUTE_USERS,
+  );
+  const userHasUpdateCallPermissionsCapability = useHasPermissions(
+    OwnCapability.UPDATE_CALL_PERMISSIONS,
+  );
+  const userHasBlockUserCapability = useHasPermissions(
+    OwnCapability.BLOCK_USERS,
+  );
+  const optionsOpenHandler = useCallback(() => {
+    if (!participantIsLoggedInUser) setSelectedParticipant(participant);
+  }, [participant, setSelectedParticipant, participantIsLoggedInUser]);
+
+  if (!participant) return null;
+  const { publishedTracks } = participant;
+  const isAudioMuted = !publishedTracks.includes(SfuModels.TrackType.AUDIO);
+  const isVideoMuted = !publishedTracks.includes(SfuModels.TrackType.VIDEO);
+  const isScreenSharing = publishedTracks.includes(
+    SfuModels.TrackType.SCREEN_SHARE,
+  );
+  const isParticipantItemPressable =
+    userHasBlockUserCapability ||
+    userHasMuteUsersCapability ||
+    userHasUpdateCallPermissionsCapability;
+
+  return (
+    <Pressable
+      style={styles.participant}
+      onPress={optionsOpenHandler}
+      disabled={!isParticipantItemPressable}
+    >
+      <Avatar radius={theme.avatar.xs} participant={participant} />
+
+      <Text style={styles.name}>
+        {(participant.name || generateParticipantTitle(participant.userId)) +
+          (participantIsLoggedInUser ? ' (You)' : '')}
+      </Text>
+      <View style={styles.icons}>
+        {isScreenSharing && (
+          <View style={[styles.svgContainerStyle, theme.icon.md]}>
+            <ScreenShare color={theme.light.info} />
+          </View>
+        )}
+        {isAudioMuted && (
+          <View style={[styles.svgContainerStyle, theme.icon.sm]}>
+            <MicOff color={theme.light.error} />
+          </View>
+        )}
+        {isVideoMuted && (
+          <View style={[styles.svgContainerStyle, theme.icon.sm]}>
+            <VideoSlash color={theme.light.error} />
+          </View>
+        )}
+        {!participantIsLoggedInUser && (
+          <Restricted
+            requiredGrants={[
+              OwnCapability.MUTE_USERS,
+              OwnCapability.UPDATE_CALL_PERMISSIONS,
+              OwnCapability.BLOCK_USERS,
+            ]}
+          >
+            <View style={[styles.svgContainerStyle, theme.icon.sm]}>
+              <ArrowRight color={theme.light.text_high_emphasis} />
+            </View>
+          </Restricted>
+        )}
+      </View>
+    </Pressable>
+  );
+};
+
+export interface CallParticipantsInfoViewType {
+  /**
+   * Boolean that decided whether the CallPartcipantsInfoView modal should be open or not.
+   */
+  isCallParticipantsViewVisible: boolean;
+  /**
+   * SetState function to set the value of the boolean field `isCallParticipantsViewVisible` depending upon whether the CallPartcipantsInfoView modal should be open or not.
+   */
+  setIsCallParticipantsViewVisible: React.Dispatch<
+    React.SetStateAction<boolean>
+  >;
+}
+
+/**
+ * Shows information about the call, it's participants in the call and
+ * their mute states, handler to trigger options (TBD, permissions not impl)
+ * and options to invite more people to the call.
+ *
+ * | Participants List | Options Modal is Open |
+ * | :--- | :----: |
+ * |![call-participants-info-view-1](https://user-images.githubusercontent.com/25864161/217341952-1e875bc3-e31f-42eb-918b-307eace116b1.png) | ![call-participants-info-view-2](https://user-images.githubusercontent.com/25864161/217341960-5016b678-d1a5-4ecf-bb4b-e463987b9cae.png)|
+ **/
+export const CallParticipantsInfoView = ({
+  isCallParticipantsViewVisible,
+  setIsCallParticipantsViewVisible,
+}: CallParticipantsInfoViewType) => {
+  const participants = useParticipants();
+  const participantCount = useParticipantCount();
+  const [selectedParticipant, setSelectedParticipant] = useState<
+    StreamVideoParticipant | undefined
+  >(undefined);
+  const call = useCall();
+
+  const muteAllParticipantsHandler = async () => {
+    try {
+      await call?.muteAllUsers('audio');
+      Alert.alert('Users Muted Successfully');
+    } catch (error) {
+      console.log('Error muting users', error);
+    }
+  };
+
+  const onCloseCallParticipantsViewVisible = () => {
+    setIsCallParticipantsViewVisible(false);
+  };
+
+  const renderItem = useCallback(
+    ({ item }: { item: StreamVideoParticipant }) => {
+      return (
+        <CallParticipantInfoItem
+          key={item.sessionId}
+          participant={item}
+          setSelectedParticipant={setSelectedParticipant}
+        />
+      );
+    },
+    [],
+  );
+
+  return (
+    <Modal
+      animationType="slide"
+      transparent={true}
+      visible={isCallParticipantsViewVisible}
+      onRequestClose={onCloseCallParticipantsViewVisible}
+    >
+      <View style={styles.container}>
+        <View style={styles.content}>
+          <View style={styles.header}>
+            <View style={styles.leftHeaderElement} />
+            <Text style={styles.headerText}>
+              Participants ({participantCount})
+            </Text>
+            <Pressable
+              style={[styles.closeIcon, theme.icon.sm]}
+              onPress={onCloseCallParticipantsViewVisible}
+            >
+              <Cross color={theme.light.primary} />
+            </Pressable>
+          </View>
+          <View style={styles.buttonGroup}>
+            <Restricted requiredGrants={[OwnCapability.MUTE_USERS]}>
+              <Pressable
+                style={styles.button}
+                onPress={muteAllParticipantsHandler}
+              >
+                <Text style={styles.buttonText}>Mute All</Text>
+              </Pressable>
+            </Restricted>
+          </View>
+          <FlatList data={participants} renderItem={renderItem} />
+          {selectedParticipant && (
+            <View style={[StyleSheet.absoluteFill, styles.modal]}>
+              <CallParticipantOptions
+                participant={selectedParticipant}
+                setSelectedParticipant={setSelectedParticipant}
+              />
+            </View>
+          )}
+        </View>
+      </View>
+    </Modal>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+  },
+  content: {
+    flex: 1,
+    backgroundColor: theme.light.bars,
+    borderRadius: theme.rounded.md,
+    marginVertical: theme.margin.lg,
+    marginHorizontal: theme.margin.md,
+  },
+  header: {
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingVertical: theme.padding.md,
+    width: '100%',
+  },
+  leftHeaderElement: {
+    marginLeft: theme.margin.md,
+  },
+  headerText: {
+    ...theme.fonts.bodyBold,
+    color: theme.light.text_high_emphasis,
+  },
+  closeIcon: {
+    marginRight: theme.margin.md,
+  },
+  buttonGroup: {},
+  button: {
+    backgroundColor: theme.light.primary,
+    borderRadius: theme.rounded.lg,
+    padding: theme.padding.md,
+    margin: theme.margin.lg,
+  },
+  buttonText: {
+    textAlign: 'center',
+    color: theme.light.static_white,
+    ...theme.fonts.subtitleBold,
+  },
+  participant: {
+    paddingHorizontal: theme.padding.sm,
+    paddingVertical: theme.padding.xs,
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    borderBottomColor: theme.light.borders,
+    borderBottomWidth: 1,
+  },
+  name: {
+    marginLeft: theme.margin.sm,
+    color: theme.light.text_high_emphasis,
+    ...theme.fonts.subtitleBold,
+  },
+  icons: {
+    position: 'absolute',
+    right: theme.spacing.lg,
+    display: 'flex',
+    flexDirection: 'row',
+  },
+  svgContainerStyle: {
+    marginLeft: theme.margin.sm,
+  },
+  modal: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: theme.light.overlay,
+  },
+});

package/src/components/CallParticipantsList.tsx

@@ -0,0 +1,172 @@
+import React, {
+  useCallback,
+  useMemo,
+  useReducer,
+  useRef,
+  useState,
+} from 'react';
+import { FlatList, StyleProp, StyleSheet, ViewStyle } from 'react-native';
+import { ParticipantView } from './ParticipantView';
+import {
+  StreamVideoLocalParticipant,
+  StreamVideoParticipant,
+  StreamVideoParticipantPatches,
+  VisibilityState,
+} from '@stream-io/video-client';
+import { theme } from '../theme';
+import { useDebouncedValue } from '../utils/hooks/useDebouncedValue';
+import { useCall } from '@stream-io/video-react-bindings';
+import { A11yComponents } from '../constants/A11yLabels';
+
+type FlatListProps = React.ComponentProps<
+  typeof FlatList<StreamVideoParticipant | StreamVideoLocalParticipant>
+>;
+
+const VIEWABILITY_CONFIG: FlatListProps['viewabilityConfig'] = {
+  waitForInteraction: false,
+  itemVisiblePercentThreshold: 60,
+};
+
+/**
+ * The props for the CallParticipantsList component
+ */
+interface CallParticipantsListProps {
+  /**
+   * The list of participants to display in the list
+   */
+  participants: (StreamVideoParticipant | StreamVideoLocalParticipant)[];
+  /**
+   * The number of columns to display in the list of participants while in vertical or horizontal scrolling mode
+   * @default 2
+   */
+  numColumns?: number;
+  /**
+   * If true, the list will be displayed in horizontal scrolling mode
+   */
+  horizontal?: boolean;
+}
+
+/**
+ * The CallParticipantsList component displays a list of participants in a FlatList
+ * NOTE: this component depends on a flex container to calculate the width and height of the participant view, hence it should be used only in a flex parent container
+ */
+export const CallParticipantsList = (props: CallParticipantsListProps) => {
+  const { numColumns = 2, horizontal, participants } = props;
+  const [containerWidth, setContainerWidth] = useState(0);
+
+  // we use a HashSet to track the currently viewable participants
+  // and a separate force update state to rerender the component to inform that the HashSet has changed
+  // NOTE: we use set instead of array or object for O(1) lookup, add and delete
+  const viewableParticipantSessionIds = useRef<Set<string>>(new Set());
+  const [_forceUpdateValue, forceUpdate] = useReducer((x) => x + 1, 0);
+  const forceUpdateValue = useDebouncedValue(_forceUpdateValue, 500); // we debounce forced value to avoid multiple viewability change continuous rerenders due to callbacks that occurs simultaneously during a large list scroll or when scrolling is completed
+
+  // we use a ref to store the active call object
+  // so that it can be used in the onViewableItemsChanged callback
+  const activeCall = useCall();
+  const activeCallRef = useRef(activeCall);
+  activeCallRef.current = activeCall;
+  // This is the function that gets called when the user scrolls the list of participants.
+  // It updates viewableParticipantSessionIds HashSet with the session IDs
+  // of the participants that are currently visible.
+  const onViewableItemsChanged = useRef<
+    FlatListProps['onViewableItemsChanged']
+  >(({ viewableItems }) => {
+    const participantPatches: StreamVideoParticipantPatches = {};
+    let mustUpdate = false;
+    const newVisibleParticipantSessionIds = new Set<string>(
+      viewableItems.map((v) => v.key),
+    );
+    const oldVisibleParticipantSessionIds =
+      viewableParticipantSessionIds.current;
+    newVisibleParticipantSessionIds.forEach((key) => {
+      if (!oldVisibleParticipantSessionIds.has(key)) {
+        mustUpdate = true;
+        participantPatches[key] = {
+          viewportVisibilityState: VisibilityState.VISIBLE,
+        };
+      }
+    });
+    oldVisibleParticipantSessionIds.forEach((key) => {
+      if (!newVisibleParticipantSessionIds.has(key)) {
+        mustUpdate = true;
+        participantPatches[key] = {
+          viewportVisibilityState: VisibilityState.INVISIBLE,
+        };
+      }
+    });
+    viewableParticipantSessionIds.current = newVisibleParticipantSessionIds;
+    if (mustUpdate) {
+      activeCallRef.current?.state.updateParticipants(participantPatches);
+      forceUpdate();
+    }
+  }).current;
+
+  // NOTE: key must be sessionId always as it is used to track viewable participants
+  const keyExtractor = useRef<FlatListProps['keyExtractor']>(
+    (item) => item.sessionId,
+  ).current;
+
+  const onLayout = useRef<FlatListProps['onLayout']>((event) => {
+    const { width } = event.nativeEvent.layout;
+    setContainerWidth(width);
+  }).current;
+
+  const itemContainerStyle = useMemo<StyleProp<ViewStyle>>(() => {
+    // we calculate the size of the participant view based on the containerWidth (the phone's screen width),
+    // number of columns and the margin between the views
+    const size = containerWidth / numColumns - theme.margin.sm * 2;
+    const style = { width: size, height: size };
+    if (horizontal) {
+      return [styles.participantWrapperHorizontal, style];
+    }
+    return [styles.participantWrapperVertical, style];
+  }, [horizontal, numColumns, containerWidth]);
+
+  const renderItem = useCallback<NonNullable<FlatListProps['renderItem']>>(
+    ({ item: participant }) => {
+      const isVisible = viewableParticipantSessionIds.current.has(
+        participant.sessionId,
+      );
+      return (
+        <ParticipantView
+          participant={participant}
+          containerStyle={itemContainerStyle}
+          kind="video"
+          isVisible={isVisible}
+        />
+      );
+    },
+    [itemContainerStyle],
+  );
+
+  return (
+    <FlatList
+      onLayout={onLayout}
+      key={!horizontal ? numColumns : undefined} // setting numColumns as key is a strict requirement of react-native to support changing numColumns on the fly
+      data={participants}
+      keyExtractor={keyExtractor}
+      viewabilityConfig={VIEWABILITY_CONFIG}
+      onViewableItemsChanged={onViewableItemsChanged}
+      renderItem={renderItem}
+      numColumns={!horizontal ? numColumns : undefined}
+      horizontal={horizontal}
+      showsHorizontalScrollIndicator={false}
+      extraData={`${forceUpdateValue}${containerWidth}`} // this is important to force re-render when visibility changes
+      accessibilityLabel={A11yComponents.CALL_PARTICIPANTS_LIST}
+    />
+  );
+};
+
+const styles = StyleSheet.create({
+  participantWrapperVertical: {
+    margin: theme.margin.sm,
+    overflow: 'hidden',
+    borderRadius: theme.rounded.sm,
+  },
+  participantWrapperHorizontal: {
+    marginHorizontal: theme.margin.sm,
+    overflow: 'hidden',
+    borderRadius: theme.rounded.sm,
+  },
+});

package/src/components/CallParticipantsOptions.tsx

@@ -0,0 +1,248 @@
+import {
+  OwnCapability,
+  SfuModels,
+  StreamVideoParticipant,
+} from '@stream-io/video-client';
+import { Cross, VideoDisabled } from '../icons';
+import { Pressable, StyleSheet, Text, View } from 'react-native';
+import { generateParticipantTitle } from '../utils';
+import { useCallback } from 'react';
+import { Avatar } from './Avatar';
+import { theme } from '../theme';
+import { useCall, useHasPermissions } from '@stream-io/video-react-bindings';
+
+type CallParticipantOptionType = {
+  title: string;
+  icon?: JSX.Element;
+  onPressHandler: () => void;
+};
+
+type CallParticipantOptionsType = {
+  participant: StreamVideoParticipant;
+  setSelectedParticipant: React.Dispatch<
+    React.SetStateAction<StreamVideoParticipant | undefined>
+  >;
+};
+
+export const CallParticipantOptions = (props: CallParticipantOptionsType) => {
+  const { participant, setSelectedParticipant } = props;
+  const call = useCall();
+
+  const grantPermission = async (permission: string) => {
+    await call?.updateUserPermissions({
+      user_id: participant.userId,
+      grant_permissions: [permission],
+    });
+  };
+
+  const revokePermission = async (permission: string) => {
+    await call?.updateUserPermissions({
+      user_id: participant.userId,
+      revoke_permissions: [permission],
+    });
+  };
+
+  const muteUser = async (mediaType: 'audio' | 'video') => {
+    await call?.muteUser(participant.userId, mediaType);
+  };
+
+  const muteUserAudio = async () => {
+    await muteUser('audio');
+  };
+
+  const muteUserVideo = async () => {
+    await muteUser('video');
+  };
+
+  const blockUser = async () => {
+    await call?.blockUser(participant.userId);
+  };
+
+  const userHasMuteUsersCapability = useHasPermissions(
+    OwnCapability.MUTE_USERS,
+  );
+  const userHasUpdateCallPermissionsCapability = useHasPermissions(
+    OwnCapability.UPDATE_CALL_PERMISSIONS,
+  );
+  const userHasBlockUserCapability = useHasPermissions(
+    OwnCapability.BLOCK_USERS,
+  );
+  const participantCanPublishVideo = participant.publishedTracks.includes(
+    SfuModels.TrackType.VIDEO,
+  );
+  const participantCanPublishAudio = participant.publishedTracks.includes(
+    SfuModels.TrackType.AUDIO,
+  );
+
+  const callMediaStreamMutePermissions: (CallParticipantOptionType | null)[] =
+    userHasMuteUsersCapability
+      ? [
+          participantCanPublishVideo
+            ? {
+                title: 'Mute Video',
+                onPressHandler: muteUserVideo,
+              }
+            : null,
+          participantCanPublishAudio
+            ? {
+                title: 'Mute Audio',
+                onPressHandler: muteUserAudio,
+              }
+            : null,
+        ]
+      : [];
+
+  const callMediaStreamPermissions: (CallParticipantOptionType | null)[] =
+    userHasUpdateCallPermissionsCapability
+      ? [
+          {
+            icon: <VideoDisabled color={theme.light.text_high_emphasis} />,
+            title: 'Disable Video',
+            onPressHandler: async () =>
+              await revokePermission(OwnCapability.SEND_VIDEO),
+          },
+          {
+            title: 'Disable Audio',
+            onPressHandler: async () =>
+              await revokePermission(OwnCapability.SEND_AUDIO),
+          },
+          {
+            title: 'Allow Audio',
+            onPressHandler: async () =>
+              await grantPermission(OwnCapability.SEND_AUDIO),
+          },
+          {
+            title: 'Allow Video',
+            onPressHandler: async () =>
+              await grantPermission(OwnCapability.SEND_VIDEO),
+          },
+          {
+            title: 'Allow Screen Sharing',
+            onPressHandler: async () =>
+              await grantPermission(OwnCapability.SCREENSHARE),
+          },
+          {
+            title: 'Disable Screen Sharing',
+            onPressHandler: async () =>
+              await revokePermission(OwnCapability.SCREENSHARE),
+          },
+        ]
+      : [];
+
+  const options: (CallParticipantOptionType | null)[] = [
+    userHasBlockUserCapability
+      ? {
+          title: 'Block',
+          onPressHandler: blockUser,
+        }
+      : null,
+    ...callMediaStreamMutePermissions,
+    ...callMediaStreamPermissions,
+  ];
+
+  const onCloseParticipantOptions = useCallback(() => {
+    setSelectedParticipant(undefined);
+  }, [setSelectedParticipant]);
+
+  const showYouLabel = participant.isLoggedInUser;
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.menu}>
+        <View style={styles.participantInfo}>
+          <View style={styles.userInfo}>
+            <Avatar radius={theme.avatar.xs} participant={participant} />
+
+            <Text style={styles.name}>
+              {generateParticipantTitle(participant.userId) +
+                (showYouLabel ? ' (You)' : '')}
+            </Text>
+          </View>
+
+          <Pressable
+            style={[styles.svgContainerStyle, theme.icon.sm]}
+            onPress={onCloseParticipantOptions}
+          >
+            <Cross color={theme.light.primary} />
+          </Pressable>
+        </View>
+        <View style={styles.options}>
+          {options.map((option, index) => {
+            if (!option) {
+              return null;
+            }
+            const applyBottomPadding =
+              index < options.length - 1 ? styles.borderBottom : null;
+
+            const onPressHandler = () => {
+              option?.onPressHandler();
+              onCloseParticipantOptions();
+            };
+
+            return (
+              <Pressable
+                style={[applyBottomPadding, styles.option]}
+                key={option.title}
+                onPress={onPressHandler}
+              >
+                <View style={[styles.svgContainerStyle, theme.icon.sm]}>
+                  {option.icon}
+                </View>
+                <Text style={styles.title}>{option.title}</Text>
+              </Pressable>
+            );
+          })}
+        </View>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    width: '100%',
+    height: '100%',
+    display: 'flex',
+    justifyContent: 'center',
+    paddingHorizontal: theme.padding.xl,
+  },
+  menu: {
+    backgroundColor: theme.light.bars,
+    borderRadius: theme.rounded.md,
+  },
+  participantInfo: {
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    padding: theme.padding.md,
+  },
+  userInfo: {
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  name: {
+    marginLeft: theme.margin.sm,
+    ...theme.fonts.subtitleBold,
+    color: theme.light.text_high_emphasis,
+  },
+  svgContainerStyle: {},
+  options: {},
+  option: {
+    paddingHorizontal: theme.padding.md,
+    paddingVertical: theme.padding.sm,
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  title: {
+    marginLeft: theme.margin.md,
+    color: theme.light.text_high_emphasis,
+    ...theme.fonts.subtitle,
+  },
+  borderBottom: {
+    borderBottomColor: theme.light.borders,
+    borderBottomWidth: 1,
+  },
+});