@stream-io/video-react-native-sdk 1.3.7 → 1.4.0

package/dist/module/components/Call/CallTopView/ParticipantsInfoBadge.js

@@ -1,98 +0,0 @@
-import React from 'react';
-import { Pressable, StyleSheet, Text, View } from 'react-native';
-import { Participants } from '../../../icons';
-import { useCallStateHooks } from '@stream-io/video-react-bindings';
-import { Z_INDEX } from '../../../constants';
-import { ButtonTestIds } from '../../../constants/TestIds';
-import { useTheme } from '../../../contexts/ThemeContext';
-import { CallingState } from '@stream-io/video-client';
-
-/**
- * Props for the ParticipantsInfoBadge component.
- */
-
-/**
- * Badge that shows the number of participants in the call.
- * When pressed, it opens the ParticipantsInfoList.
- */
-export const ParticipantsInfoBadge = ({
-  onParticipantInfoPress
-}) => {
-  const {
-    theme: {
-      colors,
-      participantInfoBadge,
-      typefaces,
-      variants: {
-        iconSizes
-      }
-    }
-  } = useTheme();
-  const {
-    useParticipantCount,
-    useCallMembers,
-    useCallCallingState
-  } = useCallStateHooks();
-  const participantCount = useParticipantCount();
-  const members = useCallMembers();
-  const callingState = useCallCallingState();
-  let count = 0;
-  /**
-   * We show member's length if Incoming and Outgoing Call Views are rendered.
-   * Else we show the count of the participants that are in the call.
-   * Since the members count also includes caller/callee, we reduce the count by 1.
-   **/
-  if (callingState === CallingState.RINGING) {
-    count = members.length - 1;
-  } else {
-    count = participantCount;
-  }
-  if (count === 0) {
-    return null;
-  }
-  return /*#__PURE__*/React.createElement(Pressable, {
-    onPress: onParticipantInfoPress,
-    style: ({
-      pressed
-    }) => [styles.container, {
-      opacity: pressed ? 0.2 : 1
-    }, participantInfoBadge.container],
-    disabled: !onParticipantInfoPress,
-    testID: ButtonTestIds.PARTICIPANTS_INFO
-  }, /*#__PURE__*/React.createElement(View, {
-    style: [{
-      height: iconSizes.md,
-      width: iconSizes.md
-    }, participantInfoBadge.participantsIconContainer]
-  }, /*#__PURE__*/React.createElement(Participants, {
-    color: colors.static_white
-  })), /*#__PURE__*/React.createElement(View, {
-    style: [styles.participantCountContainer, {
-      backgroundColor: colors.text_low_emphasis
-    }, participantInfoBadge.participantCountContainer],
-    testID: ButtonTestIds.PARTICIPANTS_COUNT_VIEW
-  }, /*#__PURE__*/React.createElement(Text, {
-    style: [styles.participantCountText, {
-      color: colors.static_white
-    }, typefaces.subtitle, participantInfoBadge.participantsCountText],
-    testID: ButtonTestIds.PARTICIPANTS_COUNT_TEXT
-  }, count)));
-};
-const styles = StyleSheet.create({
-  container: {
-    flexDirection: 'row'
-  },
-  participantCountContainer: {
-    justifyContent: 'center',
-    paddingHorizontal: 8,
-    borderRadius: 30,
-    zIndex: Z_INDEX.IN_FRONT,
-    bottom: 12,
-    right: 12
-  },
-  participantCountText: {
-    includeFontPadding: false,
-    textAlign: 'center'
-  }
-});
-//# sourceMappingURL=ParticipantsInfoBadge.js.map

package/dist/module/components/Call/CallTopView/ParticipantsInfoBadge.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["React","Pressable","StyleSheet","Text","View","Participants","useCallStateHooks","Z_INDEX","ButtonTestIds","useTheme","CallingState","ParticipantsInfoBadge","onParticipantInfoPress","theme","colors","participantInfoBadge","typefaces","variants","iconSizes","useParticipantCount","useCallMembers","useCallCallingState","participantCount","members","callingState","count","RINGING","length","createElement","onPress","style","pressed","styles","container","opacity","disabled","testID","PARTICIPANTS_INFO","height","md","width","participantsIconContainer","color","static_white","participantCountContainer","backgroundColor","text_low_emphasis","PARTICIPANTS_COUNT_VIEW","participantCountText","subtitle","participantsCountText","PARTICIPANTS_COUNT_TEXT","create","flexDirection","justifyContent","paddingHorizontal","borderRadius","zIndex","IN_FRONT","bottom","right","includeFontPadding","textAlign"],"sourceRoot":"../../../../../src","sources":["components/Call/CallTopView/ParticipantsInfoBadge.tsx"],"mappings":"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","ignoreList":[]}

package/dist/module/components/Call/CallTopView/index.js

@@ -1,3 +0,0 @@
-export * from './CallTopView';
-export * from './ParticipantsInfoBadge';
-//# sourceMappingURL=index.js.map

package/dist/module/components/Call/CallTopView/index.js.map

@@ -1 +0,0 @@
-{"version":3,"names":[],"sourceRoot":"../../../../../src","sources":["components/Call/CallTopView/index.ts"],"mappings":"AAAA,cAAc,eAAe;AAC7B,cAAc,yBAAyB","ignoreList":[]}

package/dist/module/icons/Chat.js

@@ -1,11 +0,0 @@
-import React from 'react';
-import { Svg, Path } from 'react-native-svg';
-export const Chat = ({
-  color
-}) => /*#__PURE__*/React.createElement(Svg, {
-  viewBox: "0 0 21 20"
-}, /*#__PURE__*/React.createElement(Path, {
-  d: "M 17.1887 0.353516 H 2.37385 C 1.35534 0.353516 0.522003 1.18685 0.522003 2.20537 V 18.872 L 4.22571 15.1683 H 17.1887 C 18.2072 15.1683 19.0405 14.335 19.0405 13.3165 V 2.20537 C 19.0405 1.18685 18.2072 0.353516 17.1887 0.353516 Z M 17.1887 13.3165 H 4.22571 L 2.37385 15.1683 V 2.20537 H 17.1887 V 13.3165 Z",
-  fill: color
-}));
-//# sourceMappingURL=Chat.js.map

package/dist/module/icons/Chat.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["React","Svg","Path","Chat","color","createElement","viewBox","d","fill"],"sourceRoot":"../../../src","sources":["icons/Chat.tsx"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,GAAG,EAAEC,IAAI,QAAQ,kBAAkB;AAO5C,OAAO,MAAMC,IAAI,GAAGA,CAAC;EAAEC;AAAa,CAAC,kBACnCJ,KAAA,CAAAK,aAAA,CAACJ,GAAG;EAACK,OAAO,EAAC;AAAW,gBACtBN,KAAA,CAAAK,aAAA,CAACH,IAAI;EACHK,CAAC,EAAC,uTAAuT;EACzTC,IAAI,EAAEJ;AAAM,CACb,CACE,CACN","ignoreList":[]}

package/dist/module/icons/Participants.js

@@ -1,13 +0,0 @@
-import React from 'react';
-import { Svg, Path } from 'react-native-svg';
-export const Participants = ({
-  color
-}) => /*#__PURE__*/React.createElement(Svg, {
-  viewBox: "0 0 23 20"
-}, /*#__PURE__*/React.createElement(Path, {
-  clipRule: "evenodd",
-  d: "M 11 8 C 13.2091 8 15 6.20914 15 4 C 15 1.79086 13.2091 0 11 0 C 8.79086 0 7 1.79086 7 4 C 7 6.20914 8.79086 8 11 8 Z M 5.5 1 C 3.567 1 2 2.567 2 4.5 C 2 6.433 3.567 8 5.5 8 C 6.05228 8 6.5 7.55228 6.5 7 C 6.5 6.44772 6.05228 6 5.5 6 C 4.67157 6 4 5.32843 4 4.5 C 4 3.67157 4.67157 3 5.5 3 C 6.05228 3 6.5 2.55228 6.5 2 C 6.5 1.44772 6.05228 1 5.5 1 Z M 4 16 C 4 12.134 7.13401 9 11 9 C 14.866 9 18 12.134 18 16 C 18 16.397 17.9669 16.7869 17.903 17.1671 C 17.6021 18.9581 13 19.5 11 19.5 C 9 19.5 4.41865 19.0753 4.09763 17.1708 C 4.03335 16.7894 4 16.3982 4 16 Z M 3.85402 10.7725 C 4.28304 10.4247 4.34889 9.79494 4.0011 9.36592 C 3.6533 8.9369 3.02357 8.87105 2.59455 9.21884 C 1.01345 10.5006 0 12.4618 0 14.659 C 0 15.0572 0.0333547 15.4484 0.0976325 15.8297 C 0.18943 16.3743 0.705335 16.7414 1.24994 16.6496 C 1.79454 16.5578 2.16161 16.0419 2.06981 15.4973 C 2.02397 15.2253 2 14.9453 2 14.659 C 2 13.0903 2.72123 11.6908 3.85402 10.7725 Z M 20.5 4.5 C 20.5 2.567 18.933 1 17 1 C 16.4477 1 16 1.44772 16 2 C 16 2.55228 16.4477 3 17 3 C 17.8284 3 18.5 3.67157 18.5 4.5 C 18.5 5.32843 17.8284 6 17 6 C 16.4477 6 16 6.44772 16 7 C 16 7.55228 16.4477 8 17 8 C 18.933 8 20.5 6.433 20.5 4.5 Z M 18.3703 10.7725 C 17.9413 10.4247 17.8755 9.79494 18.2233 9.36592 C 18.5711 8.9369 19.2008 8.87105 19.6298 9.21884 C 21.2109 10.5006 22.2244 12.4618 22.2244 14.659 C 22.2244 15.0572 22.191 15.4484 22.1267 15.8297 C 22.0349 16.3743 21.519 16.7414 20.9744 16.6496 C 20.4298 16.5578 20.0628 16.0419 20.1546 15.4973 C 20.2004 15.2253 20.2244 14.9453 20.2244 14.659 C 20.2244 13.0903 19.5031 11.6908 18.3703 10.7725 Z",
-  fill: color,
-  fillRule: "evenodd"
-}));
-//# sourceMappingURL=Participants.js.map

package/dist/module/icons/Participants.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["React","Svg","Path","Participants","color","createElement","viewBox","clipRule","d","fill","fillRule"],"sourceRoot":"../../../src","sources":["icons/Participants.tsx"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,GAAG,EAAEC,IAAI,QAAQ,kBAAkB;AAO5C,OAAO,MAAMC,YAAY,GAAGA,CAAC;EAAEC;AAAa,CAAC,kBAC3CJ,KAAA,CAAAK,aAAA,CAACJ,GAAG;EAACK,OAAO,EAAC;AAAW,gBACtBN,KAAA,CAAAK,aAAA,CAACH,IAAI;EACHK,QAAQ,EAAC,SAAS;EAClBC,CAAC,EAAC,4kDAA4kD;EAC9kDC,IAAI,EAAEL,KAAM;EACZM,QAAQ,EAAC;AAAS,CACnB,CACE,CACN","ignoreList":[]}

package/dist/typescript/components/Call/CallControls/ChatButton.d.ts

@@ -1,22 +0,0 @@
-import React from 'react';
-/**
- * The props for the Chat Button in the Call Controls.
- */
-export type ChatButtonProps = {
-    /**
-     * Handler to be called when the chat button is pressed.
-     * @returns void
-     */
-    onPressHandler?: () => void;
-    /**
-     * The count of the current unread message to be displayed above on the Chat button.
-     */
-    unreadBadgeCount?: number;
-};
-/**
- * Button to open the Chat window while in the call.
- *
- * This call also display the unread count indicator/badge is there messages that are unread.
- */
-export declare const ChatButton: ({ onPressHandler, unreadBadgeCount, }: ChatButtonProps) => React.JSX.Element;
-//# sourceMappingURL=ChatButton.d.ts.map

package/dist/typescript/components/Call/CallControls/ChatButton.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ChatButton.d.ts","sourceRoot":"","sources":["../../../../../src/components/Call/CallControls/ChatButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B;;GAEG;AACH,MAAM,MAAM,eAAe,GAAG;IAC5B;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,UAAU,0CAGpB,eAAe,sBAUjB,CAAC"}

package/dist/typescript/components/Call/CallTopView/CallTopView.d.ts

@@ -1,29 +0,0 @@
-import React from 'react';
-import { StyleProp, ViewStyle } from 'react-native';
-import { ParticipantsInfoBadgeProps } from './ParticipantsInfoBadge';
-export type CallTopViewProps = {
-    /**
-     * Handler to be called when the back button is pressed in the CallTopView.
-     * @returns void
-     */
-    onBackPressed?: () => void;
-    /**
-     * Handler to be called when the Participant icon is pressed in the CallTopView.
-     * @returns
-     */
-    onParticipantInfoPress?: () => void;
-    /**
-     * Title to be rendered at the center of the Header.
-     */
-    title?: string;
-    /**
-     * Style to override the container of the CallTopView.
-     */
-    style?: StyleProp<ViewStyle>;
-    /**
-     * Component to customize the ParticipantInfoBadge of the CallTopView.
-     */
-    ParticipantsInfoBadge?: React.ComponentType<ParticipantsInfoBadgeProps> | null;
-};
-export declare const CallTopView: ({ onBackPressed, onParticipantInfoPress, title, style: styleProp, ParticipantsInfoBadge, }: CallTopViewProps) => React.JSX.Element;
-//# sourceMappingURL=CallTopView.d.ts.map

package/dist/typescript/components/Call/CallTopView/CallTopView.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"CallTopView.d.ts","sourceRoot":"","sources":["../../../../../src/components/Call/CallTopView/CallTopView.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AACxC,OAAO,EAKL,SAAS,EACT,SAAS,EACV,MAAM,cAAc,CAAC;AACtB,OAAO,EAEL,0BAA0B,EAC3B,MAAM,yBAAyB,CAAC;AAOjC,MAAM,MAAM,gBAAgB,GAAG;IAC7B;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B;;;OAGG;IACH,sBAAsB,CAAC,EAAE,MAAM,IAAI,CAAC;IACpC;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B;;OAEG;IACH,qBAAqB,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,0BAA0B,CAAC,GAAG,IAAI,CAAC;CAChF,CAAC;AAEF,eAAO,MAAM,WAAW,+FAMrB,gBAAgB,sBAmFlB,CAAC"}

package/dist/typescript/components/Call/CallTopView/ParticipantsInfoBadge.d.ts

@@ -1,12 +0,0 @@
-import React from 'react';
-import { CallTopViewProps } from '..';
-/**
- * Props for the ParticipantsInfoBadge component.
- */
-export type ParticipantsInfoBadgeProps = Pick<CallTopViewProps, 'onParticipantInfoPress'>;
-/**
- * Badge that shows the number of participants in the call.
- * When pressed, it opens the ParticipantsInfoList.
- */
-export declare const ParticipantsInfoBadge: ({ onParticipantInfoPress, }: ParticipantsInfoBadgeProps) => React.JSX.Element | null;
-//# sourceMappingURL=ParticipantsInfoBadge.d.ts.map

package/dist/typescript/components/Call/CallTopView/ParticipantsInfoBadge.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ParticipantsInfoBadge.d.ts","sourceRoot":"","sources":["../../../../../src/components/Call/CallTopView/ParticipantsInfoBadge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,EAAE,gBAAgB,EAAE,MAAM,IAAI,CAAC;AAKtC;;GAEG;AACH,MAAM,MAAM,0BAA0B,GAAG,IAAI,CAC3C,gBAAgB,EAChB,wBAAwB,CACzB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,qBAAqB,gCAE/B,0BAA0B,6BA4E5B,CAAC"}

package/dist/typescript/components/Call/CallTopView/index.d.ts

@@ -1,3 +0,0 @@
-export * from './CallTopView';
-export * from './ParticipantsInfoBadge';
-//# sourceMappingURL=index.d.ts.map

package/dist/typescript/components/Call/CallTopView/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/Call/CallTopView/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,yBAAyB,CAAC"}

package/dist/typescript/icons/Chat.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Chat.d.ts","sourceRoot":"","sources":["../../../src/icons/Chat.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAEhD,KAAK,KAAK,GAAG;IACX,KAAK,EAAE,UAAU,CAAC;CACnB,CAAC;AAEF,eAAO,MAAM,IAAI,cAAe,KAAK,sBAOpC,CAAC"}

package/dist/typescript/icons/Participants.d.ts

@@ -1,8 +0,0 @@
-import React from 'react';
-import { ColorValue } from 'react-native/types';
-type Props = {
-    color: ColorValue;
-};
-export declare const Participants: ({ color }: Props) => React.JSX.Element;
-export {};
-//# sourceMappingURL=Participants.d.ts.map

package/dist/typescript/icons/Participants.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Participants.d.ts","sourceRoot":"","sources":["../../../src/icons/Participants.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAEhD,KAAK,KAAK,GAAG;IACX,KAAK,EAAE,UAAU,CAAC;CACnB,CAAC;AAEF,eAAO,MAAM,YAAY,cAAe,KAAK,sBAS5C,CAAC"}

package/src/components/Call/CallControls/ChatButton.tsx

@@ -1,90 +0,0 @@
-import React from 'react';
-import { StyleSheet, Text, View } from 'react-native';
-import { CallControlsButton } from './CallControlsButton';
-import { Chat } from '../../../icons';
-import { ComponentTestIds } from '../../../constants/TestIds';
-import { Z_INDEX } from '../../../constants';
-import { useTheme } from '../../../contexts/ThemeContext';
-
-/**
- * The props for the Chat Button in the Call Controls.
- */
-export type ChatButtonProps = {
-  /**
-   * Handler to be called when the chat button is pressed.
-   * @returns void
-   */
-  onPressHandler?: () => void;
-  /**
-   * The count of the current unread message to be displayed above on the Chat button.
-   */
-  unreadBadgeCount?: number;
-};
-
-/**
- * Button to open the Chat window while in the call.
- *
- * This call also display the unread count indicator/badge is there messages that are unread.
- */
-export const ChatButton = ({
-  onPressHandler,
-  unreadBadgeCount,
-}: ChatButtonProps) => {
-  const {
-    theme: { colors, chatButton },
-  } = useTheme();
-  return (
-    <CallControlsButton onPress={onPressHandler} style={chatButton}>
-      <UnreadBadgeCountIndicator count={unreadBadgeCount} />
-      <Chat color={colors.static_black} />
-    </CallControlsButton>
-  );
-};
-
-const UnreadBadgeCountIndicator = ({
-  count,
-}: {
-  count: ChatButtonProps['unreadBadgeCount'];
-}) => {
-  const {
-    theme: { colors, typefaces },
-  } = useTheme();
-
-  // Don't show badge if count is 0 or undefined
-  if (!count) {
-    return null;
-  }
-
-  return (
-    <View
-      testID={ComponentTestIds.CHAT_UNREAD_BADGE_COUNT_INDICATOR}
-      style={[styles.chatBadge, { backgroundColor: colors.error }]}
-    >
-      <Text
-        style={[
-          styles.chatBadgeText,
-          { color: colors.static_white },
-          typefaces.subtitle,
-        ]}
-      >
-        {count}
-      </Text>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  chatBadge: {
-    borderRadius: 30,
-    position: 'absolute',
-    left: 15,
-    bottom: 20,
-    zIndex: Z_INDEX.IN_FRONT,
-    height: 24,
-    width: 24,
-    justifyContent: 'center',
-  },
-  chatBadgeText: {
-    textAlign: 'center',
-  },
-});

package/src/components/Call/CallTopView/CallTopView.tsx

@@ -1,162 +0,0 @@
-import React, { useState } from 'react';
-import {
-  View,
-  StyleSheet,
-  Text,
-  Pressable,
-  StyleProp,
-  ViewStyle,
-} from 'react-native';
-import {
-  ParticipantsInfoBadge as DefaultParticipantsInfoBadge,
-  ParticipantsInfoBadgeProps,
-} from './ParticipantsInfoBadge';
-import { Back } from '../../../icons/Back';
-import { TopViewBackground } from '../../../icons';
-import { useCallStateHooks, useI18n } from '@stream-io/video-react-bindings';
-import { CallingState } from '@stream-io/video-client';
-import { useTheme } from '../../../contexts/ThemeContext';
-
-export type CallTopViewProps = {
-  /**
-   * Handler to be called when the back button is pressed in the CallTopView.
-   * @returns void
-   */
-  onBackPressed?: () => void;
-  /**
-   * Handler to be called when the Participant icon is pressed in the CallTopView.
-   * @returns
-   */
-  onParticipantInfoPress?: () => void;
-  /**
-   * Title to be rendered at the center of the Header.
-   */
-  title?: string;
-  /**
-   * Style to override the container of the CallTopView.
-   */
-  style?: StyleProp<ViewStyle>;
-  /**
-   * Component to customize the ParticipantInfoBadge of the CallTopView.
-   */
-  ParticipantsInfoBadge?: React.ComponentType<ParticipantsInfoBadgeProps> | null;
-};
-
-export const CallTopView = ({
-  onBackPressed,
-  onParticipantInfoPress,
-  title,
-  style: styleProp,
-  ParticipantsInfoBadge = DefaultParticipantsInfoBadge,
-}: CallTopViewProps) => {
-  const [callTopViewHeight, setCallTopViewHeight] = useState<number>(0);
-  const [callTopViewWidth, setCallTopViewWidth] = useState<number>(0);
-  const {
-    theme: {
-      colors,
-      typefaces,
-      variants: { iconSizes },
-      callTopView,
-    },
-  } = useTheme();
-  const { useCallCallingState } = useCallStateHooks();
-  const callingState = useCallCallingState();
-  const { t } = useI18n();
-  const isCallReconnecting = callingState === CallingState.RECONNECTING;
-
-  const onLayout: React.ComponentProps<typeof View>['onLayout'] = (event) => {
-    const { height, width } = event.nativeEvent.layout;
-    if (setCallTopViewHeight) {
-      setCallTopViewHeight(height);
-      setCallTopViewWidth(width);
-    }
-  };
-
-  return (
-    <View style={[styleProp, callTopView.container]}>
-      {/* Component for the background of the CallTopView. Since it has a Linear Gradient, an SVG is used to render it. */}
-      <TopViewBackground height={callTopViewHeight} width={callTopViewWidth} />
-      <View style={[styles.content, callTopView.content]} onLayout={onLayout}>
-        <View style={styles.leftElement}>
-          {onBackPressed && (
-            <Pressable
-              style={({ pressed }) => [
-                styles.backIconContainer,
-                {
-                  opacity: pressed ? 0.2 : 1,
-                  height: iconSizes.md,
-                  width: iconSizes.md,
-                },
-                callTopView.backIconContainer,
-              ]}
-              onPress={onBackPressed}
-            >
-              <Back color={colors.static_white} />
-            </Pressable>
-          )}
-        </View>
-        <View style={[styles.centerElement, callTopView.centerElement]}>
-          {title ? (
-            <Text
-              style={[
-                { color: colors.static_white },
-                typefaces.subtitleBold,
-                callTopView.title,
-              ]}
-              numberOfLines={1}
-            >
-              {title}
-            </Text>
-          ) : (
-            isCallReconnecting && (
-              <Text
-                style={[
-                  { color: colors.static_white },
-                  typefaces.subtitleBold,
-                  callTopView.title,
-                ]}
-              >
-                {t('Reconnecting...')}
-              </Text>
-            )
-          )}
-        </View>
-        <View style={[styles.rightElement, callTopView.rightElement]}>
-          {ParticipantsInfoBadge && (
-            <ParticipantsInfoBadge
-              onParticipantInfoPress={onParticipantInfoPress}
-            />
-          )}
-        </View>
-      </View>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  content: {
-    position: 'absolute',
-    top: 0,
-    flexDirection: 'row',
-    paddingTop: 24,
-    paddingBottom: 12,
-    alignItems: 'center',
-  },
-  backIconContainer: {
-    // Added to compensate the participant badge surface area
-    marginLeft: 8,
-  },
-  leftElement: {
-    flex: 1,
-    alignItems: 'flex-start',
-  },
-  centerElement: {
-    flex: 1,
-    alignItems: 'center',
-    flexGrow: 3,
-  },
-  rightElement: {
-    flex: 1,
-    alignItems: 'flex-end',
-  },
-});

package/src/components/Call/CallTopView/ParticipantsInfoBadge.tsx

@@ -1,119 +0,0 @@
-import React from 'react';
-import { Pressable, StyleSheet, Text, View } from 'react-native';
-import { Participants } from '../../../icons';
-import { useCallStateHooks } from '@stream-io/video-react-bindings';
-import { Z_INDEX } from '../../../constants';
-import { CallTopViewProps } from '..';
-import { ButtonTestIds } from '../../../constants/TestIds';
-import { useTheme } from '../../../contexts/ThemeContext';
-import { CallingState } from '@stream-io/video-client';
-
-/**
- * Props for the ParticipantsInfoBadge component.
- */
-export type ParticipantsInfoBadgeProps = Pick<
-  CallTopViewProps,
-  'onParticipantInfoPress'
->;
-
-/**
- * Badge that shows the number of participants in the call.
- * When pressed, it opens the ParticipantsInfoList.
- */
-export const ParticipantsInfoBadge = ({
-  onParticipantInfoPress,
-}: ParticipantsInfoBadgeProps) => {
-  const {
-    theme: {
-      colors,
-      participantInfoBadge,
-      typefaces,
-      variants: { iconSizes },
-    },
-  } = useTheme();
-  const { useParticipantCount, useCallMembers, useCallCallingState } =
-    useCallStateHooks();
-  const participantCount = useParticipantCount();
-  const members = useCallMembers();
-  const callingState = useCallCallingState();
-
-  let count = 0;
-  /**
-   * We show member's length if Incoming and Outgoing Call Views are rendered.
-   * Else we show the count of the participants that are in the call.
-   * Since the members count also includes caller/callee, we reduce the count by 1.
-   **/
-  if (callingState === CallingState.RINGING) {
-    count = members.length - 1;
-  } else {
-    count = participantCount;
-  }
-
-  if (count === 0) {
-    return null;
-  }
-
-  return (
-    <Pressable
-      onPress={onParticipantInfoPress}
-      style={({ pressed }) => [
-        styles.container,
-        { opacity: pressed ? 0.2 : 1 },
-        participantInfoBadge.container,
-      ]}
-      disabled={!onParticipantInfoPress}
-      testID={ButtonTestIds.PARTICIPANTS_INFO}
-    >
-      <View
-        style={[
-          { height: iconSizes.md, width: iconSizes.md },
-          participantInfoBadge.participantsIconContainer,
-        ]}
-      >
-        <Participants color={colors.static_white} />
-      </View>
-      <View
-        style={[
-          styles.participantCountContainer,
-          {
-            backgroundColor: colors.text_low_emphasis,
-          },
-          participantInfoBadge.participantCountContainer,
-        ]}
-        testID={ButtonTestIds.PARTICIPANTS_COUNT_VIEW}
-      >
-        <Text
-          style={[
-            styles.participantCountText,
-            {
-              color: colors.static_white,
-            },
-            typefaces.subtitle,
-            participantInfoBadge.participantsCountText,
-          ]}
-          testID={ButtonTestIds.PARTICIPANTS_COUNT_TEXT}
-        >
-          {count}
-        </Text>
-      </View>
-    </Pressable>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flexDirection: 'row',
-  },
-  participantCountContainer: {
-    justifyContent: 'center',
-    paddingHorizontal: 8,
-    borderRadius: 30,
-    zIndex: Z_INDEX.IN_FRONT,
-    bottom: 12,
-    right: 12,
-  },
-  participantCountText: {
-    includeFontPadding: false,
-    textAlign: 'center',
-  },
-});

package/src/components/Call/CallTopView/index.ts

@@ -1,2 +0,0 @@
-export * from './CallTopView';
-export * from './ParticipantsInfoBadge';

package/src/icons/Chat.tsx

@@ -1,16 +0,0 @@
-import React from 'react';
-import { Svg, Path } from 'react-native-svg';
-import { ColorValue } from 'react-native/types';
-
-type Props = {
-  color: ColorValue;
-};
-
-export const Chat = ({ color }: Props) => (
-  <Svg viewBox="0 0 21 20">
-    <Path
-      d="M 17.1887 0.353516 H 2.37385 C 1.35534 0.353516 0.522003 1.18685 0.522003 2.20537 V 18.872 L 4.22571 15.1683 H 17.1887 C 18.2072 15.1683 19.0405 14.335 19.0405 13.3165 V 2.20537 C 19.0405 1.18685 18.2072 0.353516 17.1887 0.353516 Z M 17.1887 13.3165 H 4.22571 L 2.37385 15.1683 V 2.20537 H 17.1887 V 13.3165 Z"
-      fill={color}
-    />
-  </Svg>
-);