@stream-io/video-react-native-sdk 0.0.10 → 0.0.12

package/dist/commonjs/components/Call/CallParticipantsList/CallParticipantsList.js

@@ -0,0 +1,241 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CallParticipantsList = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _videoClient = require("@stream-io/video-client");
+var _useDebouncedValue = require("../../../utils/hooks/useDebouncedValue");
+var _videoReactBindings = require("@stream-io/video-react-bindings");
+var _TestIds = require("../../../constants/TestIds");
+var _ParticipantView = require("../../Participant/ParticipantView");
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+const VIEWABILITY_CONFIG = {
+  waitForInteraction: false,
+  itemVisiblePercentThreshold: 60
+};
+
+/**
+ * Props of the CallParticipantsList component
+ */
+
+/**
+ * This component displays a list of participants in a FlatList.
+ * You can use this component to display participants either in a vertical or horizontal scrolling mode.
+ * 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 = _ref => {
+  let {
+    numberOfColumns = 2,
+    horizontal,
+    participants,
+    ParticipantView = _ParticipantView.ParticipantView,
+    ParticipantLabel,
+    ParticipantNetworkQualityIndicator,
+    ParticipantReaction,
+    ParticipantVideoFallback,
+    VideoRenderer
+  } = _ref;
+  const [containerLayout, setContainerLayout] = (0, _react.useState)({
+    width: 0,
+    height: 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.useRef)(new Set());
+  const [_forceUpdateValue, forceUpdate] = (0, _react.useReducer)(x => x + 1, 0);
+  const forceUpdateValue = (0, _useDebouncedValue.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, _videoReactBindings.useCall)();
+  const activeCallRef = (0, _react.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.useRef)(_ref2 => {
+    let {
+      viewableItems
+    } = _ref2;
+    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: {
+            videoTrack: _videoClient.VisibilityState.VISIBLE,
+            screenShareTrack: _videoClient.VisibilityState.UNKNOWN
+          }
+        };
+      }
+    });
+    oldVisibleParticipantSessionIds.forEach(key => {
+      if (!newVisibleParticipantSessionIds.has(key)) {
+        mustUpdate = true;
+        participantPatches[key] = {
+          viewportVisibilityState: {
+            videoTrack: _videoClient.VisibilityState.VISIBLE,
+            screenShareTrack: _videoClient.VisibilityState.UNKNOWN
+          }
+        };
+      }
+    });
+    viewableParticipantSessionIds.current = newVisibleParticipantSessionIds;
+    if (mustUpdate) {
+      var _activeCallRef$curren;
+      (_activeCallRef$curren = activeCallRef.current) === null || _activeCallRef$curren === void 0 || _activeCallRef$curren.state.updateParticipants(participantPatches);
+      forceUpdate();
+    }
+  }).current;
+
+  // NOTE: key must be sessionId always as it is used to track viewable participants
+  const keyExtractor = (0, _react.useRef)(item => item.sessionId).current;
+  const onLayout = (0, _react.useRef)(event => {
+    const {
+      height,
+      width
+    } = event.nativeEvent.layout;
+    setContainerLayout(prev => {
+      if (prev.height === height && prev.width === width) {
+        return prev;
+      }
+      return {
+        height,
+        width
+      };
+    });
+  }).current;
+  const {
+    itemHeight,
+    itemWidth
+  } = calculateParticipantViewSize({
+    containerHeight: containerLayout.height,
+    containerWidth: containerLayout.width,
+    participantsLength: participants.length,
+    numberOfColumns,
+    horizontal
+  });
+  const itemContainerStyle = (0, _react.useMemo)(() => {
+    const style = {
+      width: itemWidth,
+      height: itemHeight
+    };
+    if (horizontal) {
+      return [styles.participantWrapperHorizontal, style];
+    }
+    return style;
+  }, [itemWidth, itemHeight, horizontal]);
+  const participantProps = {
+    ParticipantLabel,
+    ParticipantNetworkQualityIndicator,
+    ParticipantReaction,
+    ParticipantVideoFallback,
+    VideoRenderer
+  };
+  const renderItem = (0, _react.useCallback)(_ref3 => {
+    let {
+      item: participant
+    } = _ref3;
+    const isVisible = viewableParticipantSessionIds.current.has(participant.sessionId);
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, ParticipantView && /*#__PURE__*/_react.default.createElement(ParticipantView, _extends({
+      participant: participant,
+      style: itemContainerStyle,
+      trackType: "videoTrack",
+      isVisible: isVisible
+    }, participantProps)));
+  },
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  [itemContainerStyle]);
+
+  // in vertical mode, only when there are more than 2 participants in a call, the participants should be displayed in a grid
+  // else we display them both in a stretched row on the screen
+  const shouldWrapByColumns = !!horizontal || participants.length > 2;
+  if (!shouldWrapByColumns) {
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, participants.map((participant, index) => {
+      return ParticipantView && /*#__PURE__*/_react.default.createElement(ParticipantView, _extends({
+        participant: participant,
+        style: styles.flexed,
+        trackType: "videoTrack",
+        key: keyExtractor(participant, index)
+      }, participantProps));
+    }));
+  }
+  return /*#__PURE__*/_react.default.createElement(_reactNative.FlatList, {
+    onLayout: onLayout,
+    key: !horizontal ? numberOfColumns : 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 ? numberOfColumns : undefined,
+    horizontal: horizontal,
+    showsHorizontalScrollIndicator: false,
+    extraData: `${forceUpdateValue}` // this is important to force re-render when visibility changes
+    ,
+    testID: _TestIds.ComponentTestIds.CALL_PARTICIPANTS_LIST
+  });
+};
+exports.CallParticipantsList = CallParticipantsList;
+const styles = _reactNative.StyleSheet.create({
+  flexed: {
+    flex: 1
+  },
+  participantWrapperHorizontal: {
+    // note: if marginHorizontal is changed, be sure to change the width calculation in calculateParticipantViewSize function
+    marginHorizontal: 8,
+    borderRadius: 10
+  }
+});
+
+/**
+ * This function calculates the size of the participant view based on the size of the container (the phone's screen size) and the number of participants.
+ * @param {number} containerHeight - height of the container (the phone's screen height) in pixels
+ * @param {number} containerWidth - width of the container (the phone's screen width) in pixels
+ * @param {number} participantsLength - number of participants
+ * @param {number} numColumns - number of columns
+ * @param {boolean} horizontal - whether the participant view is in horizontal mode
+ * @returns {object} - an object containing the height and width of the participant view
+ */
+function calculateParticipantViewSize(_ref4) {
+  let {
+    containerHeight,
+    containerWidth,
+    participantsLength,
+    numberOfColumns,
+    horizontal
+  } = _ref4;
+  let itemHeight = containerHeight;
+  // in vertical mode, we calculate the height of the participant view based on the containerHeight (aka the phone's screen height)
+  if (!horizontal) {
+    if (participantsLength <= 4) {
+      // special case: if there are 4 or less participants, we display them in 2 rows
+      itemHeight = containerHeight / 2;
+    } else {
+      // generally, we display the participants in 3 rows
+      itemHeight = containerHeight / 3;
+    }
+  }
+  let itemWidth = containerWidth / numberOfColumns;
+  if (horizontal) {
+    // in horizontal mode we apply margin of 8 to the participant view and that should be subtracted from the width
+    itemWidth = itemWidth - 8 * 2;
+  }
+  return {
+    itemHeight,
+    itemWidth
+  };
+}
+//# sourceMappingURL=CallParticipantsList.js.map

package/dist/commonjs/components/Call/CallParticipantsList/CallParticipantsList.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_videoClient","_useDebouncedValue","_videoReactBindings","_TestIds","_ParticipantView","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","_extends","assign","bind","target","i","arguments","length","source","apply","VIEWABILITY_CONFIG","waitForInteraction","itemVisiblePercentThreshold","CallParticipantsList","_ref","numberOfColumns","horizontal","participants","ParticipantView","DefaultParticipantView","ParticipantLabel","ParticipantNetworkQualityIndicator","ParticipantReaction","ParticipantVideoFallback","VideoRenderer","containerLayout","setContainerLayout","useState","width","height","viewableParticipantSessionIds","useRef","Set","_forceUpdateValue","forceUpdate","useReducer","x","forceUpdateValue","useDebouncedValue","activeCall","useCall","activeCallRef","current","onViewableItemsChanged","_ref2","viewableItems","participantPatches","mustUpdate","newVisibleParticipantSessionIds","map","v","oldVisibleParticipantSessionIds","forEach","viewportVisibilityState","videoTrack","VisibilityState","VISIBLE","screenShareTrack","UNKNOWN","_activeCallRef$curren","state","updateParticipants","keyExtractor","item","sessionId","onLayout","event","nativeEvent","layout","prev","itemHeight","itemWidth","calculateParticipantViewSize","containerHeight","containerWidth","participantsLength","itemContainerStyle","useMemo","style","styles","participantWrapperHorizontal","participantProps","renderItem","useCallback","_ref3","participant","isVisible","createElement","Fragment","trackType","shouldWrapByColumns","index","flexed","FlatList","undefined","data","viewabilityConfig","numColumns","showsHorizontalScrollIndicator","extraData","testID","ComponentTestIds","CALL_PARTICIPANTS_LIST","exports","StyleSheet","create","flex","marginHorizontal","borderRadius","_ref4"],"sourceRoot":"../../../../../src","sources":["components/Call/CallParticipantsList/CallParticipantsList.tsx"],"mappings":"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"}

package/dist/commonjs/components/Call/CallParticipantsList/index.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _CallParticipantsList = require("./CallParticipantsList");
+Object.keys(_CallParticipantsList).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _CallParticipantsList[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _CallParticipantsList[key];
+    }
+  });
+});
+//# sourceMappingURL=index.js.map

package/dist/commonjs/components/Call/CallParticipantsList/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_CallParticipantsList","require","Object","keys","forEach","key","exports","defineProperty","enumerable","get"],"sourceRoot":"../../../../../src","sources":["components/Call/CallParticipantsList/index.ts"],"mappings":";;;;;AAAA,IAAAA,qBAAA,GAAAC,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAH,qBAAA,EAAAI,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAL,qBAAA,CAAAK,GAAA;EAAAH,MAAA,CAAAK,cAAA,CAAAD,OAAA,EAAAD,GAAA;IAAAG,UAAA;IAAAC,GAAA,WAAAA,CAAA;MAAA,OAAAT,qBAAA,CAAAK,GAAA;IAAA;EAAA;AAAA"}

package/dist/commonjs/components/Call/CallTopView/CallTopView.js

@@ -0,0 +1,121 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CallTopView = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _ParticipantsInfoBadge = require("./ParticipantsInfoBadge");
+var _Back = require("../../../icons/Back");
+var _icons = require("../../../icons");
+var _videoReactBindings = require("@stream-io/video-react-bindings");
+var _videoClient = require("@stream-io/video-client");
+var _ThemeContext = require("../../../contexts/ThemeContext");
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+const CallTopView = _ref => {
+  let {
+    onBackPressed,
+    onParticipantInfoPress,
+    title,
+    style: styleProp,
+    ParticipantsInfoBadge = _ParticipantsInfoBadge.ParticipantsInfoBadge
+  } = _ref;
+  const [callTopViewHeight, setCallTopViewHeight] = (0, _react.useState)(0);
+  const {
+    theme: {
+      colors,
+      typefaces,
+      variants: {
+        iconSizes
+      },
+      callTopView
+    }
+  } = (0, _ThemeContext.useTheme)();
+  const {
+    useCallCallingState
+  } = (0, _videoReactBindings.useCallStateHooks)();
+  const callingState = useCallCallingState();
+  const {
+    t
+  } = (0, _videoReactBindings.useI18n)();
+  const isCallReconnecting = callingState === _videoClient.CallingState.RECONNECTING;
+  const onLayout = event => {
+    const {
+      height
+    } = event.nativeEvent.layout;
+    if (setCallTopViewHeight) {
+      setCallTopViewHeight(height);
+    }
+  };
+  return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: [styleProp, callTopView.container]
+  }, /*#__PURE__*/_react.default.createElement(_icons.TopViewBackground, {
+    height: callTopViewHeight,
+    width: '100%'
+  }), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: [styles.content, callTopView.content],
+    onLayout: onLayout
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: styles.leftElement
+  }, onBackPressed && /*#__PURE__*/_react.default.createElement(_reactNative.Pressable, {
+    style: _ref2 => {
+      let {
+        pressed
+      } = _ref2;
+      return [styles.backIconContainer, {
+        opacity: pressed ? 0.2 : 1,
+        height: iconSizes.md,
+        width: iconSizes.md
+      }, callTopView.backIconContainer];
+    },
+    onPress: onBackPressed
+  }, /*#__PURE__*/_react.default.createElement(_Back.Back, {
+    color: colors.static_white
+  }))), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: [styles.centerElement, callTopView.centerElement]
+  }, title ? /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+    style: [{
+      color: colors.static_white
+    }, typefaces.subtitleBold, callTopView.title],
+    numberOfLines: 1
+  }, title) : isCallReconnecting && /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+    style: [{
+      color: colors.static_white
+    }, typefaces.subtitleBold, callTopView.title]
+  }, t('Reconnecting...'))), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: [styles.rightElement, callTopView.rightElement]
+  }, ParticipantsInfoBadge && /*#__PURE__*/_react.default.createElement(ParticipantsInfoBadge, {
+    onParticipantInfoPress: onParticipantInfoPress
+  }))));
+};
+exports.CallTopView = CallTopView;
+const styles = _reactNative.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'
+  }
+});
+//# sourceMappingURL=CallTopView.js.map

package/dist/commonjs/components/Call/CallTopView/CallTopView.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_ParticipantsInfoBadge","_Back","_icons","_videoReactBindings","_videoClient","_ThemeContext","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","CallTopView","_ref","onBackPressed","onParticipantInfoPress","title","style","styleProp","ParticipantsInfoBadge","DefaultParticipantsInfoBadge","callTopViewHeight","setCallTopViewHeight","useState","theme","colors","typefaces","variants","iconSizes","callTopView","useTheme","useCallCallingState","useCallStateHooks","callingState","t","useI18n","isCallReconnecting","CallingState","RECONNECTING","onLayout","event","height","nativeEvent","layout","createElement","View","container","TopViewBackground","width","styles","content","leftElement","Pressable","_ref2","pressed","backIconContainer","opacity","md","onPress","Back","color","static_white","centerElement","Text","subtitleBold","numberOfLines","rightElement","exports","StyleSheet","create","position","top","flexDirection","paddingTop","paddingBottom","alignItems","marginLeft","flex","flexGrow"],"sourceRoot":"../../../../../src","sources":["components/Call/CallTopView/CallTopView.tsx"],"mappings":"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"}

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

@@ -0,0 +1,107 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ParticipantsInfoBadge = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactNative = require("react-native");
+var _icons = require("../../../icons");
+var _videoReactBindings = require("@stream-io/video-react-bindings");
+var _constants = require("../../../constants");
+var _TestIds = require("../../../constants/TestIds");
+var _ThemeContext = require("../../../contexts/ThemeContext");
+var _videoClient = require("@stream-io/video-client");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+/**
+ * Props for the ParticipantsInfoBadge component.
+ */
+
+/**
+ * Badge that shows the number of participants in the call.
+ * When pressed, it opens the ParticipantsInfoList.
+ */
+const ParticipantsInfoBadge = _ref => {
+  let {
+    onParticipantInfoPress
+  } = _ref;
+  const {
+    theme: {
+      colors,
+      participantInfoBadge,
+      typefaces,
+      variants: {
+        iconSizes
+      }
+    }
+  } = (0, _ThemeContext.useTheme)();
+  const {
+    useParticipantCount,
+    useCallMembers,
+    useCallCallingState
+  } = (0, _videoReactBindings.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 === _videoClient.CallingState.RINGING) {
+    count = members.length - 1;
+  } else {
+    count = participantCount;
+  }
+  if (count === 0) {
+    return null;
+  }
+  return /*#__PURE__*/_react.default.createElement(_reactNative.Pressable, {
+    onPress: onParticipantInfoPress,
+    style: _ref2 => {
+      let {
+        pressed
+      } = _ref2;
+      return [styles.container, {
+        opacity: pressed ? 0.2 : 1
+      }, participantInfoBadge.container];
+    },
+    disabled: !onParticipantInfoPress,
+    testID: _TestIds.ButtonTestIds.PARTICIPANTS_INFO
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: [{
+      height: iconSizes.md,
+      width: iconSizes.md
+    }, participantInfoBadge.participantsIconContainer]
+  }, /*#__PURE__*/_react.default.createElement(_icons.Participants, {
+    color: colors.static_white
+  })), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: [styles.participantCountContainer, {
+      backgroundColor: colors.text_low_emphasis
+    }, participantInfoBadge.participantCountContainer]
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+    style: [styles.participantCountText, {
+      color: colors.static_white
+    }, typefaces.subtitle, participantInfoBadge.participantsCountText]
+  }, count)));
+};
+exports.ParticipantsInfoBadge = ParticipantsInfoBadge;
+const styles = _reactNative.StyleSheet.create({
+  container: {
+    flexDirection: 'row'
+  },
+  participantCountContainer: {
+    justifyContent: 'center',
+    paddingHorizontal: 8,
+    borderRadius: 30,
+    zIndex: _constants.Z_INDEX.IN_FRONT,
+    bottom: 12,
+    right: 12
+  },
+  participantCountText: {
+    includeFontPadding: false,
+    textAlign: 'center'
+  }
+});
+//# sourceMappingURL=ParticipantsInfoBadge.js.map

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

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

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

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _CallTopView = require("./CallTopView");
+Object.keys(_CallTopView).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _CallTopView[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _CallTopView[key];
+    }
+  });
+});
+var _ParticipantsInfoBadge = require("./ParticipantsInfoBadge");
+Object.keys(_ParticipantsInfoBadge).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ParticipantsInfoBadge[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ParticipantsInfoBadge[key];
+    }
+  });
+});
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["_CallTopView","require","Object","keys","forEach","key","exports","defineProperty","enumerable","get","_ParticipantsInfoBadge"],"sourceRoot":"../../../../../src","sources":["components/Call/CallTopView/index.ts"],"mappings":";;;;;AAAA,IAAAA,YAAA,GAAAC,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAH,YAAA,EAAAI,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAL,YAAA,CAAAK,GAAA;EAAAH,MAAA,CAAAK,cAAA,CAAAD,OAAA,EAAAD,GAAA;IAAAG,UAAA;IAAAC,GAAA,WAAAA,CAAA;MAAA,OAAAT,YAAA,CAAAK,GAAA;IAAA;EAAA;AAAA;AACA,IAAAK,sBAAA,GAAAT,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAO,sBAAA,EAAAN,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAK,sBAAA,CAAAL,GAAA;EAAAH,MAAA,CAAAK,cAAA,CAAAD,OAAA,EAAAD,GAAA;IAAAG,UAAA;IAAAC,GAAA,WAAAA,CAAA;MAAA,OAAAC,sBAAA,CAAAL,GAAA;IAAA;EAAA;AAAA"}

package/dist/commonjs/components/Call/Lobby/JoinCallButton.js

@@ -0,0 +1,73 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.JoinCallButton = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactNative = require("react-native");
+var _videoReactBindings = require("@stream-io/video-react-bindings");
+var _ThemeContext = require("../../../contexts/ThemeContext");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+/**
+ * Props for the Join Call Button in the Lobby component.
+ */
+
+/**
+ * The default Join call button to be used in the Lobby component.
+ */
+const JoinCallButton = _ref => {
+  let {
+    onJoinCallHandler,
+    onPressHandler
+  } = _ref;
+  const {
+    theme: {
+      colors,
+      typefaces,
+      joinCallButton
+    }
+  } = (0, _ThemeContext.useTheme)();
+  const {
+    t
+  } = (0, _videoReactBindings.useI18n)();
+  const call = (0, _videoReactBindings.useCall)();
+  const onPress = async () => {
+    if (onPressHandler) {
+      onPressHandler();
+      return;
+    }
+    try {
+      await (call === null || call === void 0 ? void 0 : call.join({
+        create: true
+      }));
+      if (onJoinCallHandler) {
+        onJoinCallHandler();
+      }
+    } catch (error) {
+      console.error('Error joining call:', error);
+    }
+  };
+  return /*#__PURE__*/_react.default.createElement(_reactNative.Pressable, {
+    style: [styles.container, {
+      backgroundColor: colors.primary
+    }, joinCallButton.container],
+    onPress: onPress
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+    style: [styles.label, {
+      color: colors.static_white
+    }, typefaces.subtitleBold, joinCallButton.label]
+  }, t('Join')));
+};
+exports.JoinCallButton = JoinCallButton;
+const styles = _reactNative.StyleSheet.create({
+  container: {
+    borderRadius: 10,
+    marginTop: 16,
+    paddingVertical: 8
+  },
+  label: {
+    textAlign: 'center'
+  }
+});
+//# sourceMappingURL=JoinCallButton.js.map

package/dist/commonjs/components/Call/Lobby/JoinCallButton.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","_videoReactBindings","_ThemeContext","obj","__esModule","default","JoinCallButton","_ref","onJoinCallHandler","onPressHandler","theme","colors","typefaces","joinCallButton","useTheme","t","useI18n","call","useCall","onPress","join","create","error","console","createElement","Pressable","style","styles","container","backgroundColor","primary","Text","label","color","static_white","subtitleBold","exports","StyleSheet","borderRadius","marginTop","paddingVertical","textAlign"],"sourceRoot":"../../../../../src","sources":["components/Call/Lobby/JoinCallButton.tsx"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AAEA,IAAAC,YAAA,GAAAD,OAAA;AACA,IAAAE,mBAAA,GAAAF,OAAA;AACA,IAAAG,aAAA,GAAAH,OAAA;AAA0D,SAAAD,uBAAAK,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAE1D;AACA;AACA;;AAKA;AACA;AACA;AACO,MAAMG,cAAc,GAAGC,IAAA,IAGH;EAAA,IAHI;IAC7BC,iBAAiB;IACjBC;EACmB,CAAC,GAAAF,IAAA;EACpB,MAAM;IACJG,KAAK,EAAE;MAAEC,MAAM;MAAEC,SAAS;MAAEC;IAAe;EAC7C,CAAC,GAAG,IAAAC,sBAAQ,EAAC,CAAC;EACd,MAAM;IAAEC;EAAE,CAAC,GAAG,IAAAC,2BAAO,EAAC,CAAC;EACvB,MAAMC,IAAI,GAAG,IAAAC,2BAAO,EAAC,CAAC;EAEtB,MAAMC,OAAO,GAAG,MAAAA,CAAA,KAAY;IAC1B,IAAIV,cAAc,EAAE;MAClBA,cAAc,CAAC,CAAC;MAChB;IACF;IACA,IAAI;MACF,OAAMQ,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAEG,IAAI,CAAC;QAAEC,MAAM,EAAE;MAAK,CAAC,CAAC;MAClC,IAAIb,iBAAiB,EAAE;QACrBA,iBAAiB,CAAC,CAAC;MACrB;IACF,CAAC,CAAC,OAAOc,KAAK,EAAE;MACdC,OAAO,CAACD,KAAK,CAAC,qBAAqB,EAAEA,KAAK,CAAC;IAC7C;EACF,CAAC;EAED,oBACEzB,MAAA,CAAAQ,OAAA,CAAAmB,aAAA,CAACxB,YAAA,CAAAyB,SAAS;IACRC,KAAK,EAAE,CACLC,MAAM,CAACC,SAAS,EAChB;MAAEC,eAAe,EAAElB,MAAM,CAACmB;IAAQ,CAAC,EACnCjB,cAAc,CAACe,SAAS,CACxB;IACFT,OAAO,EAAEA;EAAQ,gBAEjBtB,MAAA,CAAAQ,OAAA,CAAAmB,aAAA,CAACxB,YAAA,CAAA+B,IAAI;IACHL,KAAK,EAAE,CACLC,MAAM,CAACK,KAAK,EACZ;MACEC,KAAK,EAAEtB,MAAM,CAACuB;IAChB,CAAC,EACDtB,SAAS,CAACuB,YAAY,EACtBtB,cAAc,CAACmB,KAAK;EACpB,GAEDjB,CAAC,CAAC,MAAM,CACL,CACG,CAAC;AAEhB,CAAC;AAACqB,OAAA,CAAA9B,cAAA,GAAAA,cAAA;AAEF,MAAMqB,MAAM,GAAGU,uBAAU,CAAChB,MAAM,CAAC;EAC/BO,SAAS,EAAE;IACTU,YAAY,EAAE,EAAE;IAChBC,SAAS,EAAE,EAAE;IACbC,eAAe,EAAE;EACnB,CAAC;EACDR,KAAK,EAAE;IACLS,SAAS,EAAE;EACb;AACF,CAAC,CAAC"}