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

package/dist/src/components/CallParticipantsInfoView.js

@@ -0,0 +1,213 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CallParticipantsInfoView = void 0;
+const video_client_1 = require("@stream-io/video-client");
+const video_react_bindings_1 = require("@stream-io/video-react-bindings");
+const react_native_1 = require("react-native");
+const icons_1 = require("../icons");
+const react_1 = __importStar(require("react"));
+const utils_1 = require("../utils");
+const CallParticipantsOptions_1 = require("./CallParticipantsOptions");
+const Avatar_1 = require("./Avatar");
+const theme_1 = require("../theme");
+const CallParticipantInfoItem = (props) => {
+    const { participant, setSelectedParticipant } = props;
+    const connectedUser = (0, video_react_bindings_1.useConnectedUser)();
+    const participantIsLoggedInUser = participant.userId === connectedUser?.id;
+    const userHasMuteUsersCapability = (0, video_react_bindings_1.useHasPermissions)(video_client_1.OwnCapability.MUTE_USERS);
+    const userHasUpdateCallPermissionsCapability = (0, video_react_bindings_1.useHasPermissions)(video_client_1.OwnCapability.UPDATE_CALL_PERMISSIONS);
+    const userHasBlockUserCapability = (0, video_react_bindings_1.useHasPermissions)(video_client_1.OwnCapability.BLOCK_USERS);
+    const optionsOpenHandler = (0, react_1.useCallback)(() => {
+        if (!participantIsLoggedInUser)
+            setSelectedParticipant(participant);
+    }, [participant, setSelectedParticipant, participantIsLoggedInUser]);
+    if (!participant)
+        return null;
+    const { publishedTracks } = participant;
+    const isAudioMuted = !publishedTracks.includes(video_client_1.SfuModels.TrackType.AUDIO);
+    const isVideoMuted = !publishedTracks.includes(video_client_1.SfuModels.TrackType.VIDEO);
+    const isScreenSharing = publishedTracks.includes(video_client_1.SfuModels.TrackType.SCREEN_SHARE);
+    const isParticipantItemPressable = userHasBlockUserCapability ||
+        userHasMuteUsersCapability ||
+        userHasUpdateCallPermissionsCapability;
+    return (<react_native_1.Pressable style={styles.participant} onPress={optionsOpenHandler} disabled={!isParticipantItemPressable}>
+      <Avatar_1.Avatar radius={theme_1.theme.avatar.xs} participant={participant}/>
+
+      <react_native_1.Text style={styles.name}>
+        {(participant.name || (0, utils_1.generateParticipantTitle)(participant.userId)) +
+            (participantIsLoggedInUser ? ' (You)' : '')}
+      </react_native_1.Text>
+      <react_native_1.View style={styles.icons}>
+        {isScreenSharing && (<react_native_1.View style={[styles.svgContainerStyle, theme_1.theme.icon.md]}>
+            <icons_1.ScreenShare color={theme_1.theme.light.info}/>
+          </react_native_1.View>)}
+        {isAudioMuted && (<react_native_1.View style={[styles.svgContainerStyle, theme_1.theme.icon.sm]}>
+            <icons_1.MicOff color={theme_1.theme.light.error}/>
+          </react_native_1.View>)}
+        {isVideoMuted && (<react_native_1.View style={[styles.svgContainerStyle, theme_1.theme.icon.sm]}>
+            <icons_1.VideoSlash color={theme_1.theme.light.error}/>
+          </react_native_1.View>)}
+        {!participantIsLoggedInUser && (<video_react_bindings_1.Restricted requiredGrants={[
+                video_client_1.OwnCapability.MUTE_USERS,
+                video_client_1.OwnCapability.UPDATE_CALL_PERMISSIONS,
+                video_client_1.OwnCapability.BLOCK_USERS,
+            ]}>
+            <react_native_1.View style={[styles.svgContainerStyle, theme_1.theme.icon.sm]}>
+              <icons_1.ArrowRight color={theme_1.theme.light.text_high_emphasis}/>
+            </react_native_1.View>
+          </video_react_bindings_1.Restricted>)}
+      </react_native_1.View>
+    </react_native_1.Pressable>);
+};
+/**
+ * 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)|
+ **/
+const CallParticipantsInfoView = ({ isCallParticipantsViewVisible, setIsCallParticipantsViewVisible, }) => {
+    const participants = (0, video_react_bindings_1.useParticipants)();
+    const participantCount = (0, video_react_bindings_1.useParticipantCount)();
+    const [selectedParticipant, setSelectedParticipant] = (0, react_1.useState)(undefined);
+    const call = (0, video_react_bindings_1.useCall)();
+    const muteAllParticipantsHandler = async () => {
+        try {
+            await call?.muteAllUsers('audio');
+            react_native_1.Alert.alert('Users Muted Successfully');
+        }
+        catch (error) {
+            console.log('Error muting users', error);
+        }
+    };
+    const onCloseCallParticipantsViewVisible = () => {
+        setIsCallParticipantsViewVisible(false);
+    };
+    const renderItem = (0, react_1.useCallback)(({ item }) => {
+        return (<CallParticipantInfoItem key={item.sessionId} participant={item} setSelectedParticipant={setSelectedParticipant}/>);
+    }, []);
+    return (<react_native_1.Modal animationType="slide" transparent={true} visible={isCallParticipantsViewVisible} onRequestClose={onCloseCallParticipantsViewVisible}>
+      <react_native_1.View style={styles.container}>
+        <react_native_1.View style={styles.content}>
+          <react_native_1.View style={styles.header}>
+            <react_native_1.View style={styles.leftHeaderElement}/>
+            <react_native_1.Text style={styles.headerText}>
+              Participants ({participantCount})
+            </react_native_1.Text>
+            <react_native_1.Pressable style={[styles.closeIcon, theme_1.theme.icon.sm]} onPress={onCloseCallParticipantsViewVisible}>
+              <icons_1.Cross color={theme_1.theme.light.primary}/>
+            </react_native_1.Pressable>
+          </react_native_1.View>
+          <react_native_1.View style={styles.buttonGroup}>
+            <video_react_bindings_1.Restricted requiredGrants={[video_client_1.OwnCapability.MUTE_USERS]}>
+              <react_native_1.Pressable style={styles.button} onPress={muteAllParticipantsHandler}>
+                <react_native_1.Text style={styles.buttonText}>Mute All</react_native_1.Text>
+              </react_native_1.Pressable>
+            </video_react_bindings_1.Restricted>
+          </react_native_1.View>
+          <react_native_1.FlatList data={participants} renderItem={renderItem}/>
+          {selectedParticipant && (<react_native_1.View style={[react_native_1.StyleSheet.absoluteFill, styles.modal]}>
+              <CallParticipantsOptions_1.CallParticipantOptions participant={selectedParticipant} setSelectedParticipant={setSelectedParticipant}/>
+            </react_native_1.View>)}
+        </react_native_1.View>
+      </react_native_1.View>
+    </react_native_1.Modal>);
+};
+exports.CallParticipantsInfoView = CallParticipantsInfoView;
+const styles = react_native_1.StyleSheet.create({
+    container: {
+        flex: 1,
+        justifyContent: 'center',
+    },
+    content: {
+        flex: 1,
+        backgroundColor: theme_1.theme.light.bars,
+        borderRadius: theme_1.theme.rounded.md,
+        marginVertical: theme_1.theme.margin.lg,
+        marginHorizontal: theme_1.theme.margin.md,
+    },
+    header: {
+        display: 'flex',
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        paddingVertical: theme_1.theme.padding.md,
+        width: '100%',
+    },
+    leftHeaderElement: {
+        marginLeft: theme_1.theme.margin.md,
+    },
+    headerText: {
+        ...theme_1.theme.fonts.bodyBold,
+        color: theme_1.theme.light.text_high_emphasis,
+    },
+    closeIcon: {
+        marginRight: theme_1.theme.margin.md,
+    },
+    buttonGroup: {},
+    button: {
+        backgroundColor: theme_1.theme.light.primary,
+        borderRadius: theme_1.theme.rounded.lg,
+        padding: theme_1.theme.padding.md,
+        margin: theme_1.theme.margin.lg,
+    },
+    buttonText: {
+        textAlign: 'center',
+        color: theme_1.theme.light.static_white,
+        ...theme_1.theme.fonts.subtitleBold,
+    },
+    participant: {
+        paddingHorizontal: theme_1.theme.padding.sm,
+        paddingVertical: theme_1.theme.padding.xs,
+        display: 'flex',
+        flexDirection: 'row',
+        alignItems: 'center',
+        borderBottomColor: theme_1.theme.light.borders,
+        borderBottomWidth: 1,
+    },
+    name: {
+        marginLeft: theme_1.theme.margin.sm,
+        color: theme_1.theme.light.text_high_emphasis,
+        ...theme_1.theme.fonts.subtitleBold,
+    },
+    icons: {
+        position: 'absolute',
+        right: theme_1.theme.spacing.lg,
+        display: 'flex',
+        flexDirection: 'row',
+    },
+    svgContainerStyle: {
+        marginLeft: theme_1.theme.margin.sm,
+    },
+    modal: {
+        alignItems: 'center',
+        justifyContent: 'center',
+        backgroundColor: theme_1.theme.light.overlay,
+    },
+});
+//# sourceMappingURL=CallParticipantsInfoView.js.map

package/dist/src/components/CallParticipantsInfoView.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CallParticipantsInfoView.js","sourceRoot":"","sources":["../../../src/components/CallParticipantsInfoView.tsx"],"names":[],"mappings":"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"}

package/dist/src/components/CallParticipantsList.d.ts

@@ -0,0 +1,25 @@
+import { StreamVideoLocalParticipant, StreamVideoParticipant } from '@stream-io/video-client';
+/**
+ * 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 declare const CallParticipantsList: (props: CallParticipantsListProps) => JSX.Element;
+export {};

package/dist/src/components/CallParticipantsList.js

@@ -0,0 +1,124 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CallParticipantsList = void 0;
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const ParticipantView_1 = require("./ParticipantView");
+const video_client_1 = require("@stream-io/video-client");
+const theme_1 = require("../theme");
+const useDebouncedValue_1 = require("../utils/hooks/useDebouncedValue");
+const video_react_bindings_1 = require("@stream-io/video-react-bindings");
+const A11yLabels_1 = require("../constants/A11yLabels");
+const VIEWABILITY_CONFIG = {
+    waitForInteraction: false,
+    itemVisiblePercentThreshold: 60,
+};
+/**
+ * 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
+ */
+const CallParticipantsList = (props) => {
+    const { numColumns = 2, horizontal, participants } = props;
+    const [containerWidth, setContainerWidth] = (0, react_1.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 = (0, react_1.useRef)(new Set());
+    const [_forceUpdateValue, forceUpdate] = (0, react_1.useReducer)((x) => x + 1, 0);
+    const forceUpdateValue = (0, useDebouncedValue_1.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 = (0, video_react_bindings_1.useCall)();
+    const activeCallRef = (0, react_1.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 = (0, react_1.useRef)(({ viewableItems }) => {
+        const participantPatches = {};
+        let mustUpdate = false;
+        const newVisibleParticipantSessionIds = new Set(viewableItems.map((v) => v.key));
+        const oldVisibleParticipantSessionIds = viewableParticipantSessionIds.current;
+        newVisibleParticipantSessionIds.forEach((key) => {
+            if (!oldVisibleParticipantSessionIds.has(key)) {
+                mustUpdate = true;
+                participantPatches[key] = {
+                    viewportVisibilityState: video_client_1.VisibilityState.VISIBLE,
+                };
+            }
+        });
+        oldVisibleParticipantSessionIds.forEach((key) => {
+            if (!newVisibleParticipantSessionIds.has(key)) {
+                mustUpdate = true;
+                participantPatches[key] = {
+                    viewportVisibilityState: video_client_1.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 = (0, react_1.useRef)((item) => item.sessionId).current;
+    const onLayout = (0, react_1.useRef)((event) => {
+        const { width } = event.nativeEvent.layout;
+        setContainerWidth(width);
+    }).current;
+    const itemContainerStyle = (0, react_1.useMemo)(() => {
+        // 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_1.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 = (0, react_1.useCallback)(({ item: participant }) => {
+        const isVisible = viewableParticipantSessionIds.current.has(participant.sessionId);
+        return (<ParticipantView_1.ParticipantView participant={participant} containerStyle={itemContainerStyle} kind="video" isVisible={isVisible}/>);
+    }, [itemContainerStyle]);
+    return (<react_native_1.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={A11yLabels_1.A11yComponents.CALL_PARTICIPANTS_LIST}/>);
+};
+exports.CallParticipantsList = CallParticipantsList;
+const styles = react_native_1.StyleSheet.create({
+    participantWrapperVertical: {
+        margin: theme_1.theme.margin.sm,
+        overflow: 'hidden',
+        borderRadius: theme_1.theme.rounded.sm,
+    },
+    participantWrapperHorizontal: {
+        marginHorizontal: theme_1.theme.margin.sm,
+        overflow: 'hidden',
+        borderRadius: theme_1.theme.rounded.sm,
+    },
+});
+//# sourceMappingURL=CallParticipantsList.js.map

package/dist/src/components/CallParticipantsList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CallParticipantsList.js","sourceRoot":"","sources":["../../../src/components/CallParticipantsList.tsx"],"names":[],"mappings":"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"}

package/dist/src/components/CallParticipantsOptions.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { StreamVideoParticipant } from '@stream-io/video-client';
+type CallParticipantOptionsType = {
+    participant: StreamVideoParticipant;
+    setSelectedParticipant: React.Dispatch<React.SetStateAction<StreamVideoParticipant | undefined>>;
+};
+export declare const CallParticipantOptions: (props: CallParticipantOptionsType) => JSX.Element;
+export {};

package/dist/src/components/CallParticipantsOptions.js

@@ -0,0 +1,189 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CallParticipantOptions = void 0;
+const video_client_1 = require("@stream-io/video-client");
+const icons_1 = require("../icons");
+const react_native_1 = require("react-native");
+const utils_1 = require("../utils");
+const react_1 = require("react");
+const Avatar_1 = require("./Avatar");
+const theme_1 = require("../theme");
+const video_react_bindings_1 = require("@stream-io/video-react-bindings");
+const CallParticipantOptions = (props) => {
+    const { participant, setSelectedParticipant } = props;
+    const call = (0, video_react_bindings_1.useCall)();
+    const grantPermission = async (permission) => {
+        await call?.updateUserPermissions({
+            user_id: participant.userId,
+            grant_permissions: [permission],
+        });
+    };
+    const revokePermission = async (permission) => {
+        await call?.updateUserPermissions({
+            user_id: participant.userId,
+            revoke_permissions: [permission],
+        });
+    };
+    const muteUser = async (mediaType) => {
+        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 = (0, video_react_bindings_1.useHasPermissions)(video_client_1.OwnCapability.MUTE_USERS);
+    const userHasUpdateCallPermissionsCapability = (0, video_react_bindings_1.useHasPermissions)(video_client_1.OwnCapability.UPDATE_CALL_PERMISSIONS);
+    const userHasBlockUserCapability = (0, video_react_bindings_1.useHasPermissions)(video_client_1.OwnCapability.BLOCK_USERS);
+    const participantCanPublishVideo = participant.publishedTracks.includes(video_client_1.SfuModels.TrackType.VIDEO);
+    const participantCanPublishAudio = participant.publishedTracks.includes(video_client_1.SfuModels.TrackType.AUDIO);
+    const callMediaStreamMutePermissions = userHasMuteUsersCapability
+        ? [
+            participantCanPublishVideo
+                ? {
+                    title: 'Mute Video',
+                    onPressHandler: muteUserVideo,
+                }
+                : null,
+            participantCanPublishAudio
+                ? {
+                    title: 'Mute Audio',
+                    onPressHandler: muteUserAudio,
+                }
+                : null,
+        ]
+        : [];
+    const callMediaStreamPermissions = userHasUpdateCallPermissionsCapability
+        ? [
+            {
+                icon: <icons_1.VideoDisabled color={theme_1.theme.light.text_high_emphasis}/>,
+                title: 'Disable Video',
+                onPressHandler: async () => await revokePermission(video_client_1.OwnCapability.SEND_VIDEO),
+            },
+            {
+                title: 'Disable Audio',
+                onPressHandler: async () => await revokePermission(video_client_1.OwnCapability.SEND_AUDIO),
+            },
+            {
+                title: 'Allow Audio',
+                onPressHandler: async () => await grantPermission(video_client_1.OwnCapability.SEND_AUDIO),
+            },
+            {
+                title: 'Allow Video',
+                onPressHandler: async () => await grantPermission(video_client_1.OwnCapability.SEND_VIDEO),
+            },
+            {
+                title: 'Allow Screen Sharing',
+                onPressHandler: async () => await grantPermission(video_client_1.OwnCapability.SCREENSHARE),
+            },
+            {
+                title: 'Disable Screen Sharing',
+                onPressHandler: async () => await revokePermission(video_client_1.OwnCapability.SCREENSHARE),
+            },
+        ]
+        : [];
+    const options = [
+        userHasBlockUserCapability
+            ? {
+                title: 'Block',
+                onPressHandler: blockUser,
+            }
+            : null,
+        ...callMediaStreamMutePermissions,
+        ...callMediaStreamPermissions,
+    ];
+    const onCloseParticipantOptions = (0, react_1.useCallback)(() => {
+        setSelectedParticipant(undefined);
+    }, [setSelectedParticipant]);
+    const showYouLabel = participant.isLoggedInUser;
+    return (<react_native_1.View style={styles.container}>
+      <react_native_1.View style={styles.menu}>
+        <react_native_1.View style={styles.participantInfo}>
+          <react_native_1.View style={styles.userInfo}>
+            <Avatar_1.Avatar radius={theme_1.theme.avatar.xs} participant={participant}/>
+
+            <react_native_1.Text style={styles.name}>
+              {(0, utils_1.generateParticipantTitle)(participant.userId) +
+            (showYouLabel ? ' (You)' : '')}
+            </react_native_1.Text>
+          </react_native_1.View>
+
+          <react_native_1.Pressable style={[styles.svgContainerStyle, theme_1.theme.icon.sm]} onPress={onCloseParticipantOptions}>
+            <icons_1.Cross color={theme_1.theme.light.primary}/>
+          </react_native_1.Pressable>
+        </react_native_1.View>
+        <react_native_1.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 (<react_native_1.Pressable style={[applyBottomPadding, styles.option]} key={option.title} onPress={onPressHandler}>
+                <react_native_1.View style={[styles.svgContainerStyle, theme_1.theme.icon.sm]}>
+                  {option.icon}
+                </react_native_1.View>
+                <react_native_1.Text style={styles.title}>{option.title}</react_native_1.Text>
+              </react_native_1.Pressable>);
+        })}
+        </react_native_1.View>
+      </react_native_1.View>
+    </react_native_1.View>);
+};
+exports.CallParticipantOptions = CallParticipantOptions;
+const styles = react_native_1.StyleSheet.create({
+    container: {
+        width: '100%',
+        height: '100%',
+        display: 'flex',
+        justifyContent: 'center',
+        paddingHorizontal: theme_1.theme.padding.xl,
+    },
+    menu: {
+        backgroundColor: theme_1.theme.light.bars,
+        borderRadius: theme_1.theme.rounded.md,
+    },
+    participantInfo: {
+        display: 'flex',
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        padding: theme_1.theme.padding.md,
+    },
+    userInfo: {
+        display: 'flex',
+        flexDirection: 'row',
+        alignItems: 'center',
+    },
+    name: {
+        marginLeft: theme_1.theme.margin.sm,
+        ...theme_1.theme.fonts.subtitleBold,
+        color: theme_1.theme.light.text_high_emphasis,
+    },
+    svgContainerStyle: {},
+    options: {},
+    option: {
+        paddingHorizontal: theme_1.theme.padding.md,
+        paddingVertical: theme_1.theme.padding.sm,
+        display: 'flex',
+        flexDirection: 'row',
+        alignItems: 'center',
+    },
+    title: {
+        marginLeft: theme_1.theme.margin.md,
+        color: theme_1.theme.light.text_high_emphasis,
+        ...theme_1.theme.fonts.subtitle,
+    },
+    borderBottom: {
+        borderBottomColor: theme_1.theme.light.borders,
+        borderBottomWidth: 1,
+    },
+});
+//# sourceMappingURL=CallParticipantsOptions.js.map

package/dist/src/components/CallParticipantsOptions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CallParticipantsOptions.js","sourceRoot":"","sources":["../../../src/components/CallParticipantsOptions.tsx"],"names":[],"mappings":"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"}

package/dist/src/components/CallParticipantsSpotlightView.d.ts

@@ -0,0 +1 @@
+export declare const CallParticipantsSpotlightView: () => JSX.Element;

package/dist/src/components/CallParticipantsSpotlightView.js

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CallParticipantsSpotlightView = void 0;
+const video_client_1 = require("@stream-io/video-client");
+const video_react_bindings_1 = require("@stream-io/video-react-bindings");
+const react_native_1 = require("react-native");
+const ParticipantView_1 = require("./ParticipantView");
+const theme_1 = require("../theme");
+const useDebouncedValue_1 = require("../utils/hooks/useDebouncedValue");
+const CallParticipantsList_1 = require("./CallParticipantsList");
+const video_client_2 = require("@stream-io/video-client");
+const hasScreenShare = (p) => p.publishedTracks.includes(video_client_1.SfuModels.TrackType.SCREEN_SHARE);
+const CallParticipantsSpotlightView = () => {
+    const _allParticipants = (0, video_react_bindings_1.useParticipants)({
+        sortBy: video_client_2.speakerLayoutSortPreset,
+    });
+    const allParticipants = (0, useDebouncedValue_1.useDebouncedValue)(_allParticipants, 300); // we debounce the participants to avoid unnecessary rerenders that happen when participant tracks are all subscribed simultaneously
+    const [participantInSpotlight, ...otherParticipants] = allParticipants;
+    const isScreenShareOnSpotlight = hasScreenShare(participantInSpotlight);
+    return (<react_native_1.View style={styles.container}>
+      {participantInSpotlight && (<ParticipantView_1.ParticipantView participant={participantInSpotlight} containerStyle={styles.participantView} kind={isScreenShareOnSpotlight ? 'screen' : 'video'}/>)}
+      <react_native_1.View style={styles.participantVideoContainer}>
+        <CallParticipantsList_1.CallParticipantsList participants={isScreenShareOnSpotlight ? allParticipants : otherParticipants} horizontal/>
+      </react_native_1.View>
+    </react_native_1.View>);
+};
+exports.CallParticipantsSpotlightView = CallParticipantsSpotlightView;
+const styles = react_native_1.StyleSheet.create({
+    container: { flex: 1 },
+    participantView: {
+        flex: 1,
+        overflow: 'hidden',
+        borderRadius: theme_1.theme.rounded.sm,
+        marginHorizontal: theme_1.theme.padding.sm,
+    },
+    participantVideoContainer: {
+        paddingVertical: theme_1.theme.padding.sm,
+    },
+});
+//# sourceMappingURL=CallParticipantsSpotlightView.js.map

package/dist/src/components/CallParticipantsSpotlightView.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CallParticipantsSpotlightView.js","sourceRoot":"","sources":["../../../src/components/CallParticipantsSpotlightView.tsx"],"names":[],"mappings":";;;AAAA,0DAA4E;AAC5E,0EAAkE;AAClE,+CAAgD;AAChD,uDAAoD;AACpD,oCAAiC;AACjC,wEAAqE;AACrE,iEAA8D;AAC9D,0DAAkE;AAElE,MAAM,cAAc,GAAG,CAAC,CAAyB,EAAE,EAAE,CACnD,CAAC,CAAC,eAAe,CAAC,QAAQ,CAAC,wBAAS,CAAC,SAAS,CAAC,YAAY,CAAC,CAAC;AAExD,MAAM,6BAA6B,GAAG,GAAG,EAAE;IAChD,MAAM,gBAAgB,GAAG,IAAA,sCAAe,EAAC;QACvC,MAAM,EAAE,sCAAuB;KAChC,CAAC,CAAC;IACH,MAAM,eAAe,GAAG,IAAA,qCAAiB,EAAC,gBAAgB,EAAE,GAAG,CAAC,CAAC,CAAC,oIAAoI;IACtM,MAAM,CAAC,sBAAsB,EAAE,GAAG,iBAAiB,CAAC,GAAG,eAAe,CAAC;IACvE,MAAM,wBAAwB,GAAG,cAAc,CAAC,sBAAsB,CAAC,CAAC;IAExE,OAAO,CACL,CAAC,mBAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC,CAC5B;MAAA,CAAC,sBAAsB,IAAI,CACzB,CAAC,iCAAe,CACd,WAAW,CAAC,CAAC,sBAAsB,CAAC,CACpC,cAAc,CAAC,CAAC,MAAM,CAAC,eAAe,CAAC,CACvC,IAAI,CAAC,CAAC,wBAAwB,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,EACpD,CACH,CACD;MAAA,CAAC,mBAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,yBAAyB,CAAC,CAC5C;QAAA,CAAC,2CAAoB,CACnB,YAAY,CAAC,CACX,wBAAwB,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,iBAAiB,CAC/D,CACD,UAAU,EAEd;MAAA,EAAE,mBAAI,CACR;IAAA,EAAE,mBAAI,CAAC,CACR,CAAC;AACJ,CAAC,CAAC;AA3BW,QAAA,6BAA6B,iCA2BxC;AAEF,MAAM,MAAM,GAAG,yBAAU,CAAC,MAAM,CAAC;IAC/B,SAAS,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE;IACtB,eAAe,EAAE;QACf,IAAI,EAAE,CAAC;QACP,QAAQ,EAAE,QAAQ;QAClB,YAAY,EAAE,aAAK,CAAC,OAAO,CAAC,EAAE;QAC9B,gBAAgB,EAAE,aAAK,CAAC,OAAO,CAAC,EAAE;KACnC;IACD,yBAAyB,EAAE;QACzB,eAAe,EAAE,aAAK,CAAC,OAAO,CAAC,EAAE;KAClC;CACF,CAAC,CAAC"}

package/dist/src/components/CallParticipantsView.d.ts

@@ -0,0 +1 @@
+export declare const CallParticipantsView: () => JSX.Element;