@stream-io/video-react-native-sdk 0.0.1-alpha.366 → 0.0.1-alpha.368

package/src/components/call/ReactionsPicker.tsx

@@ -144,12 +144,12 @@ const styles = StyleSheet.create({
   reactionsPopup: {
     position: 'absolute',
     alignItems: 'center',
-    backgroundColor: theme.light.static_black,
+    backgroundColor: theme.light.static_grey,
     paddingTop: TOP_PADDING,
   },
   reactionsButtonDimmer: {
     position: 'absolute',
-    backgroundColor: theme.light.static_black,
+    backgroundColor: theme.light.static_grey,
     opacity: 0.5,
   },
   reactionItem: {
@@ -157,7 +157,7 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     marginBottom: REACTION_MARGIN_BOTTOM,
     // temporary background color until we have theming
-    backgroundColor: theme.light.static_grey,
+    backgroundColor: theme.light.overlay,
   },
   reactionText: {
     fontSize: 18.5,

package/src/components/call/index.ts

@@ -4,3 +4,4 @@ export * from './CallParticipantsList';
 export * from './IncomingCall';
 export * from './OutgoingCall';
 export * from './Lobby';
+export * from './CallTopView';

package/src/components/participants/index.ts

@@ -1,4 +1,2 @@
 export * from './LocalParticipantView';
-export * from './ParticipantsInfoBadge';
 export * from './Participant';
-export * from './ParticipantsInfoList';

package/src/icons/Back.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { Svg, Path } from 'react-native-svg';
+
+type Props = {
+  color: string;
+};
+
+export const Back = ({ color }: Props) => (
+  <Svg viewBox="0 0 24 26">
+    <Path
+      d="M 8.36621 11.6543 C 8.36621 11.9531 8.48047 12.208 8.71777 12.4365 L 15.5732 19.1426 C 15.7578 19.3359 16.0039 19.4326 16.2852 19.4326 C 16.8564 19.4326 17.3047 18.9932 17.3047 18.4131 C 17.3047 18.1318 17.1904 17.877 16.9971 17.6836 L 10.8184 11.6543 L 16.9971 5.625 C 17.1904 5.42285 17.3047 5.16797 17.3047 4.88672 C 17.3047 4.31543 16.8564 3.87598 16.2852 3.87598 C 16.0039 3.87598 15.7578 3.97266 15.5732 4.16602 L 8.71777 10.8721 C 8.48047 11.1006 8.375 11.3555 8.36621 11.6543 Z"
+      fill={color}
+    />
+  </Svg>
+);

package/src/icons/TopViewBackground.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import {
+  Svg,
+  Rect,
+  Defs,
+  LinearGradient,
+  Stop,
+  NumberProp,
+} from 'react-native-svg';
+
+type Props = {
+  /**
+   * Height of the SVG container
+   */
+  height?: NumberProp;
+  /**
+   * Width of the SVG container
+   */
+  width?: NumberProp;
+};
+
+export const TopViewBackground = ({ height, width }: Props) => (
+  <Svg width={width} height={height} fill={'none'}>
+    <Defs>
+      <LinearGradient
+        id="paint0_linear_8092_98095"
+        x1={3}
+        y1={0}
+        x2={3}
+        y2={height}
+        gradientUnits="userSpaceOnUse"
+      >
+        <Stop stopOpacity={0.2} />
+        <Stop offset={1} stopOpacity={0} />
+      </LinearGradient>
+    </Defs>
+    <Rect
+      width={width}
+      height={height}
+      fill={'url(#paint0_linear_8092_98095)'}
+    />
+  </Svg>
+);

package/src/icons/index.tsx

@@ -9,11 +9,8 @@ export * from './VideoSlash';
 export * from './Chat';
 export * from './Participants';
 export * from './ThreeDots';
-export * from './Pin';
 export * from './PinVertical';
 export * from './Spotlight';
-export * from './Cross';
 export * from './ScreenShare';
-export * from './ArrowRight';
 export * from './Reaction';
-export * from './VideoDisabled';
+export * from './TopViewBackground';

package/src/theme/padding.ts

@@ -3,7 +3,7 @@ import { PaddingScheme } from './types';
 export const padding: PaddingScheme = {
   xs: 4,
   sm: 8,
-  md: 16,
+  md: 12,
   lg: 24,
   xl: 32,
 };

package/src/translations/en.json

@@ -5,6 +5,7 @@
   "Invite": "Invite",
   "Join": "Join",
   "You": "You",
+  "Reconnecting...": "Reconnecting...",
   "Participants ({{ numberOfParticipants }})": "Participants ({{ numberOfParticipants }})",
   "{{ userName }} is sharing their screen": "{{ userName }} is sharing their screen"
 }

package/dist/__tests__/components/ParticipantBadge.test.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/__tests__/components/ParticipantBadge.test.js

@@ -1,70 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
-const client_1 = require("../mocks/client");
-const video_client_1 = require("@stream-io/video-client");
-const participant_1 = __importDefault(require("../mocks/participant"));
-const TestIds_1 = require("../../src/constants/TestIds");
-const call_1 = require("../mocks/call");
-const RNTLTools_1 = require("../utils/RNTLTools");
-const components_1 = require("../../src/components");
-console.warn = jest.fn();
-jest.useFakeTimers();
-var P_IDS;
-(function (P_IDS) {
-    P_IDS["LOCAL_1"] = "local-1";
-    P_IDS["REMOTE_1"] = "remote-1";
-    P_IDS["REMOTE_2"] = "remote-2";
-})(P_IDS || (P_IDS = {}));
-describe('CallParticipantsBadge', () => {
-    it('should render call participants badge component with 1 partic. when the user is alone in the call', async () => {
-        const call = (0, call_1.mockCall)((0, client_1.mockClientWithUser)(), [
-            (0, participant_1.default)({ isLocalParticipant: true }),
-        ]);
-        (0, RNTLTools_1.render)(<components_1.ParticipantsInfoBadge />, {
-            call,
-        });
-        expect(await RNTLTools_1.screen.findByTestId(TestIds_1.ButtonTestIds.PARTICIPANTS_INFO)).toHaveTextContent('1');
-    });
-    it('should render call participants info component when the badge is pressed', async () => {
-        const call = (0, call_1.mockCall)((0, client_1.mockClientWithUser)(), [
-            (0, participant_1.default)({ isLocalParticipant: true }),
-        ]);
-        (0, RNTLTools_1.render)(<components_1.ParticipantsInfoBadge />, {
-            call,
-        });
-        const badge = await RNTLTools_1.screen.findByTestId(TestIds_1.ButtonTestIds.PARTICIPANTS_INFO);
-        expect(badge).toHaveTextContent('1');
-        RNTLTools_1.fireEvent.press(badge);
-        expect(await RNTLTools_1.screen.findByTestId(TestIds_1.ComponentTestIds.PARTICIPANTS_INFO)).toBeVisible();
-    });
-    it('should render a call participants badge component with 3 participants', async () => {
-        const call = (0, call_1.mockCall)((0, client_1.mockClientWithUser)(), [
-            (0, participant_1.default)({
-                isLocalParticipant: true,
-                sessionId: P_IDS.LOCAL_1,
-                userId: P_IDS.LOCAL_1,
-            }),
-            (0, participant_1.default)({
-                publishedTracks: [video_client_1.SfuModels.TrackType.AUDIO],
-                videoStream: null,
-                sessionId: P_IDS.REMOTE_1,
-                userId: P_IDS.REMOTE_1,
-            }),
-            (0, participant_1.default)({
-                publishedTracks: [video_client_1.SfuModels.TrackType.VIDEO],
-                audioStream: null,
-                sessionId: P_IDS.REMOTE_2,
-                userId: P_IDS.REMOTE_2,
-            }),
-        ]);
-        (0, RNTLTools_1.render)(<components_1.ParticipantsInfoBadge />, {
-            call,
-        });
-        expect(await RNTLTools_1.screen.findByTestId(TestIds_1.ButtonTestIds.PARTICIPANTS_INFO)).toHaveTextContent('3');
-    });
-});
-//# sourceMappingURL=ParticipantBadge.test.js.map

package/dist/__tests__/components/ParticipantBadge.test.js.map

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

package/dist/src/components/call/CallControls.d.ts

@@ -1,35 +0,0 @@
-import { ViewProps } from 'react-native';
-import { HangUpCallButtonProps } from '../utility/internal/HangupCallButton';
-/**
- * The props for the Chat Button in the Call Controls.
- */
-type ChatButtonProps = {
-    /**
-     * Handler to be called when the chat button is pressed.
-     * @returns void
-     */
-    onPressHandler: () => void;
-    /**
-     * The unread message indicator to be displayed above on the Chat button.
-     */
-    unreadBadgeCountIndicator?: number;
-};
-/**
- * Props for the CallControls Component.
- */
-export interface CallControlsType extends Pick<ViewProps, 'style'> {
-    /**
-     * Chat Button Props to be passed as an object
-     */
-    chatButton?: ChatButtonProps;
-    /**
-     * Hang up call button props to be passed as an object
-     */
-    hangUpCallButton?: HangUpCallButtonProps;
-}
-/**
- * A list/row of controls (mute audio/video, toggle front/back camera, hangup call etc.)
- * the user can trigger within an active call.
- */
-export declare const CallControls: ({ chatButton, hangUpCallButton, style, }: CallControlsType) => JSX.Element;
-export {};

package/dist/src/components/call/CallControls.js

@@ -1,136 +0,0 @@
-"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.CallControls = void 0;
-const react_1 = __importStar(require("react"));
-const react_native_1 = require("react-native");
-const icons_1 = require("../../icons");
-const CallControlsButton_1 = require("../utility/internal/CallControlsButton");
-const theme_1 = require("../../theme");
-const video_client_1 = require("@stream-io/video-client");
-const video_react_bindings_1 = require("@stream-io/video-react-bindings");
-const ToggleAudioButton_1 = require("../utility/internal/ToggleAudioButton");
-const ToggleVideoButton_1 = require("../utility/internal/ToggleVideoButton");
-const TestIds_1 = require("../../constants/TestIds");
-const constants_1 = require("../../constants");
-const ToggleCameraFaceButton_1 = require("../utility/internal/ToggleCameraFaceButton");
-const HangupCallButton_1 = require("../utility/internal/HangupCallButton");
-const ReactionsPicker_1 = require("./ReactionsPicker");
-const utils_1 = require("../../utils");
-/**
- * A list/row of controls (mute audio/video, toggle front/back camera, hangup call etc.)
- * the user can trigger within an active call.
- */
-const CallControls = ({ chatButton, hangUpCallButton, style, }) => {
-    const [showReactionsPicker, setShowReactionsPicker] = (0, react_1.useState)(false);
-    const [reactionsButtonLayoutRectangle, setReactionsButtonLayoutRectangle] = (0, react_1.useState)();
-    // This is for the reaction popup
-    const onReactionsButtonLayout = (event) => {
-        const layout = event.nativeEvent.layout;
-        setReactionsButtonLayoutRectangle((prev) => {
-            if (prev &&
-                prev.width === layout.width &&
-                prev.height === layout.height &&
-                prev.x === layout.x &&
-                prev.y === layout.y) {
-                return prev;
-            }
-            return layout;
-        });
-    };
-    return (<react_native_1.View style={[styles.container, style]}>
-      <video_react_bindings_1.Restricted requiredGrants={[video_client_1.OwnCapability.CREATE_REACTION]}>
-        <CallControlsButton_1.CallControlsButton testID={TestIds_1.ButtonTestIds.REACTION} onPress={() => {
-            setShowReactionsPicker(true);
-        }} color={theme_1.theme.light.static_white} style={styles.button} onLayout={onReactionsButtonLayout}>
-          <icons_1.Reaction color={theme_1.theme.light.static_black}/>
-        </CallControlsButton_1.CallControlsButton>
-      </video_react_bindings_1.Restricted>
-      {chatButton && (<react_native_1.View>
-          <CallControlsButton_1.CallControlsButton color={theme_1.theme.light.static_white} onPress={chatButton.onPressHandler} svgContainerStyle={styles.svgContainerStyle} style={styles.button}>
-            <UnreadBadgeCountIndicator count={chatButton.unreadBadgeCountIndicator}/>
-            <icons_1.Chat color={theme_1.theme.light.static_black}/>
-          </CallControlsButton_1.CallControlsButton>
-        </react_native_1.View>)}
-      <ToggleVideoButton_1.ToggleVideoButton />
-      <ToggleAudioButton_1.ToggleAudioButton />
-      <ToggleCameraFaceButton_1.ToggleCameraFaceButton />
-      <HangupCallButton_1.HangUpCallButton onPressHandler={hangUpCallButton?.onPressHandler}/>
-
-      {showReactionsPicker && (<ReactionsPicker_1.ReactionsPicker reactions={utils_1.StreamVideoRN.getConfig().supportedReactions} reactionsButtonLayoutRectangle={reactionsButtonLayoutRectangle} onRequestedClose={() => {
-                setShowReactionsPicker(false);
-            }}/>)}
-    </react_native_1.View>);
-};
-exports.CallControls = CallControls;
-const UnreadBadgeCountIndicator = ({ count, }) => {
-    // Don't show badge if count is 0 or undefined
-    if (!count) {
-        return null;
-    }
-    return (<react_native_1.View testID={TestIds_1.ComponentTestIds.CHAT_UNREAD_BADGE_COUNT_INDICATOR} style={styles.chatBadge}>
-      <react_native_1.Text style={styles.chatBadgeText}>{count}</react_native_1.Text>
-    </react_native_1.View>);
-};
-const styles = react_native_1.StyleSheet.create({
-    container: {
-        padding: theme_1.theme.padding.sm,
-        flexDirection: 'row',
-        justifyContent: 'space-between',
-        zIndex: constants_1.Z_INDEX.IN_FRONT,
-        backgroundColor: theme_1.theme.light.static_black,
-    },
-    button: {
-        // For iOS
-        shadowOffset: {
-            width: 0,
-            height: 6,
-        },
-        shadowOpacity: 0.37,
-        shadowRadius: 7.49,
-        // For android
-        elevation: 6,
-    },
-    svgContainerStyle: {
-        paddingTop: theme_1.theme.padding.xs,
-    },
-    chatBadge: {
-        backgroundColor: theme_1.theme.light.error,
-        borderRadius: theme_1.theme.rounded.xl,
-        position: 'absolute',
-        left: 15,
-        bottom: 20,
-        zIndex: constants_1.Z_INDEX.IN_FRONT,
-        height: 30,
-        width: 30,
-        justifyContent: 'center',
-    },
-    chatBadgeText: {
-        color: theme_1.theme.light.static_white,
-        textAlign: 'center',
-        ...theme_1.theme.fonts.bodyBold,
-    },
-});
-//# sourceMappingURL=CallControls.js.map

package/dist/src/components/call/CallControls.js.map

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

package/dist/src/components/participants/ParticipantsInfoBadge.d.ts

@@ -1,8 +0,0 @@
-import { PressableProps } from 'react-native';
-export type ParticipantsInfoBadgeProps = Pick<PressableProps, 'style'>;
-/**
- * Badge that shows the number of participants in the call.
- * When pressed, it opens the ParticipantsInfoList.
- * @param style
- */
-export declare const ParticipantsInfoBadge: ({ style, }: ParticipantsInfoBadgeProps) => JSX.Element;

package/dist/src/components/participants/ParticipantsInfoBadge.js

@@ -1,74 +0,0 @@
-"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.ParticipantsInfoBadge = void 0;
-const react_1 = __importStar(require("react"));
-const react_native_1 = require("react-native");
-const icons_1 = require("../../icons");
-const video_react_bindings_1 = require("@stream-io/video-react-bindings");
-const theme_1 = require("../../theme");
-const TestIds_1 = require("../../constants/TestIds");
-const constants_1 = require("../../constants");
-const ParticipantsInfoList_1 = require("./ParticipantsInfoList");
-/**
- * Badge that shows the number of participants in the call.
- * When pressed, it opens the ParticipantsInfoList.
- * @param style
- */
-const ParticipantsInfoBadge = ({ style, }) => {
-    const { useParticipantCount } = (0, video_react_bindings_1.useCallStateHooks)();
-    const participantCount = useParticipantCount();
-    const [isCallParticipantsVisible, setIsCallParticipantsVisible] = (0, react_1.useState)(false);
-    const onOpenCallParticipantsInfo = (0, react_1.useCallback)(() => {
-        setIsCallParticipantsVisible(true);
-    }, [setIsCallParticipantsVisible]);
-    return (<react_native_1.Pressable onPress={onOpenCallParticipantsInfo} testID={TestIds_1.ButtonTestIds.PARTICIPANTS_INFO} style={style}>
-      <react_native_1.View style={styles.badge}>
-        <react_native_1.Text style={styles.badgeText}>{participantCount}</react_native_1.Text>
-      </react_native_1.View>
-      <react_native_1.View style={theme_1.theme.icon.md}>
-        <icons_1.Participants color={theme_1.theme.light.static_white}/>
-      </react_native_1.View>
-      <ParticipantsInfoList_1.ParticipantsInfoList isCallParticipantsInfoVisible={isCallParticipantsVisible} setIsCallParticipantsInfoVisible={setIsCallParticipantsVisible}/>
-    </react_native_1.Pressable>);
-};
-exports.ParticipantsInfoBadge = ParticipantsInfoBadge;
-const styles = react_native_1.StyleSheet.create({
-    badge: {
-        backgroundColor: theme_1.theme.light.text_low_emphasis,
-        borderRadius: theme_1.theme.rounded.xl,
-        paddingVertical: theme_1.theme.padding.xs,
-        paddingHorizontal: theme_1.theme.padding.sm,
-        zIndex: constants_1.Z_INDEX.IN_FRONT,
-        top: theme_1.theme.spacing.sm,
-        left: theme_1.theme.spacing.xl,
-    },
-    badgeText: {
-        color: theme_1.theme.light.static_white,
-        textAlign: 'center',
-        ...theme_1.theme.fonts.caption,
-    },
-});
-//# sourceMappingURL=ParticipantsInfoBadge.js.map

package/dist/src/components/participants/ParticipantsInfoBadge.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ParticipantsInfoBadge.js","sourceRoot":"","sources":["../../../../src/components/participants/ParticipantsInfoBadge.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAqD;AACrD,+CAMsB;AACtB,uCAA2C;AAC3C,0EAAoE;AACpE,uCAAoC;AACpC,qDAAwD;AACxD,+CAA0C;AAC1C,iEAA8D;AAI9D;;;;GAIG;AACI,MAAM,qBAAqB,GAAG,CAAC,EACpC,KAAK,GACsB,EAAE,EAAE;IAC/B,MAAM,EAAE,mBAAmB,EAAE,GAAG,IAAA,wCAAiB,GAAE,CAAC;IACpD,MAAM,gBAAgB,GAAG,mBAAmB,EAAE,CAAC;IAC/C,MAAM,CAAC,yBAAyB,EAAE,4BAA4B,CAAC,GAC7D,IAAA,gBAAQ,EAAU,KAAK,CAAC,CAAC;IAE3B,MAAM,0BAA0B,GAAG,IAAA,mBAAW,EAAC,GAAG,EAAE;QAClD,4BAA4B,CAAC,IAAI,CAAC,CAAC;IACrC,CAAC,EAAE,CAAC,4BAA4B,CAAC,CAAC,CAAC;IAEnC,OAAO,CACL,CAAC,wBAAS,CACR,OAAO,CAAC,CAAC,0BAA0B,CAAC,CACpC,MAAM,CAAC,CAAC,uBAAa,CAAC,iBAAiB,CAAC,CACxC,KAAK,CAAC,CAAC,KAAK,CAAC,CAEb;MAAA,CAAC,mBAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CACxB;QAAA,CAAC,mBAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC,CAAC,gBAAgB,CAAC,EAAE,mBAAI,CACzD;MAAA,EAAE,mBAAI,CACN;MAAA,CAAC,mBAAI,CAAC,KAAK,CAAC,CAAC,aAAK,CAAC,IAAI,CAAC,EAAE,CAAC,CACzB;QAAA,CAAC,oBAAY,CAAC,KAAK,CAAC,CAAC,aAAK,CAAC,KAAK,CAAC,YAAY,CAAC,EAChD;MAAA,EAAE,mBAAI,CACN;MAAA,CAAC,2CAAoB,CACnB,6BAA6B,CAAC,CAAC,yBAAyB,CAAC,CACzD,gCAAgC,CAAC,CAAC,4BAA4B,CAAC,EAEnE;IAAA,EAAE,wBAAS,CAAC,CACb,CAAC;AACJ,CAAC,CAAC;AA9BW,QAAA,qBAAqB,yBA8BhC;AAEF,MAAM,MAAM,GAAG,yBAAU,CAAC,MAAM,CAAC;IAC/B,KAAK,EAAE;QACL,eAAe,EAAE,aAAK,CAAC,KAAK,CAAC,iBAAiB;QAC9C,YAAY,EAAE,aAAK,CAAC,OAAO,CAAC,EAAE;QAC9B,eAAe,EAAE,aAAK,CAAC,OAAO,CAAC,EAAE;QACjC,iBAAiB,EAAE,aAAK,CAAC,OAAO,CAAC,EAAE;QACnC,MAAM,EAAE,mBAAO,CAAC,QAAQ;QACxB,GAAG,EAAE,aAAK,CAAC,OAAO,CAAC,EAAE;QACrB,IAAI,EAAE,aAAK,CAAC,OAAO,CAAC,EAAE;KACvB;IACD,SAAS,EAAE;QACT,KAAK,EAAE,aAAK,CAAC,KAAK,CAAC,YAAY;QAC/B,SAAS,EAAE,QAAQ;QACnB,GAAG,aAAK,CAAC,KAAK,CAAC,OAAO;KACvB;CACF,CAAC,CAAC"}

package/dist/src/components/participants/ParticipantsInfoList.d.ts

@@ -1,17 +0,0 @@
-import React from 'react';
-export interface ParticipantsInfoListProps {
-    /**
-     * Boolean that decides whether the CallParticipantsInfo modal should be open or not.
-     */
-    isCallParticipantsInfoVisible: boolean;
-    /**
-     * SetState function to set the value of the boolean field `isCallParticipantsVisible` depending upon whether the CallParticipantsInfo modal should be open or not.
-     */
-    setIsCallParticipantsInfoVisible: React.Dispatch<React.SetStateAction<boolean>>;
-}
-/**
- * A component that shows a list of participants in the call and their information.
- * their mute states, video states, screen share states, etc.
- * Mute all participants, invite participants, etc.
- **/
-export declare const ParticipantsInfoList: ({ isCallParticipantsInfoVisible, setIsCallParticipantsInfoVisible, }: ParticipantsInfoListProps) => JSX.Element;