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

package/dist/module/components/Call/CallLayout/CallParticipantsGrid.js

@@ -0,0 +1,69 @@
+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); }
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+import { useCallStateHooks } from '@stream-io/video-react-bindings';
+import { useDebouncedValue } from '../../../utils/hooks/useDebouncedValue';
+import { CallParticipantsList as DefaultCallParticipantsList } from '../CallParticipantsList/CallParticipantsList';
+import { ComponentTestIds } from '../../../constants/TestIds';
+import { useTheme } from '../../../contexts/ThemeContext';
+
+/**
+ * Props for the CallParticipantsGrid component.
+ */
+
+/**
+ * Component used to display the list of participants in a grid mode.
+ */
+export const CallParticipantsGrid = _ref => {
+  let {
+    CallParticipantsList = DefaultCallParticipantsList,
+    ParticipantLabel,
+    ParticipantNetworkQualityIndicator,
+    ParticipantReaction,
+    ParticipantVideoFallback,
+    ParticipantView,
+    VideoRenderer,
+    showLocalParticipant = false
+  } = _ref;
+  const {
+    theme: {
+      colors,
+      callParticipantsGrid
+    }
+  } = useTheme();
+  const {
+    useRemoteParticipants,
+    useParticipants,
+    useLocalParticipant
+  } = useCallStateHooks();
+  const _remoteParticipants = useRemoteParticipants();
+  const localParticipant = useLocalParticipant();
+  const _allParticipants = useParticipants();
+  // we debounce the participants arrays to avoid unnecessary rerenders that happen when participant tracks are all subscribed simultaneously
+  const remoteParticipants = useDebouncedValue(_remoteParticipants, 300);
+  const allParticipants = useDebouncedValue(_allParticipants, 300);
+  const showFloatingView = remoteParticipants.length > 0 && remoteParticipants.length < 3;
+  const participants = showFloatingView ? showLocalParticipant && localParticipant ? [localParticipant] : remoteParticipants : allParticipants;
+  const participantViewProps = {
+    ParticipantView,
+    ParticipantLabel,
+    ParticipantNetworkQualityIndicator,
+    ParticipantReaction,
+    ParticipantVideoFallback,
+    VideoRenderer
+  };
+  return /*#__PURE__*/React.createElement(View, {
+    style: [styles.container, {
+      backgroundColor: colors.dark_gray
+    }, callParticipantsGrid.container],
+    testID: ComponentTestIds.CALL_PARTICIPANTS_GRID
+  }, CallParticipantsList && /*#__PURE__*/React.createElement(CallParticipantsList, _extends({
+    participants: participants
+  }, participantViewProps)));
+};
+const styles = StyleSheet.create({
+  container: {
+    flex: 1
+  }
+});
+//# sourceMappingURL=CallParticipantsGrid.js.map

package/dist/module/components/Call/CallLayout/CallParticipantsGrid.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","StyleSheet","View","useCallStateHooks","useDebouncedValue","CallParticipantsList","DefaultCallParticipantsList","ComponentTestIds","useTheme","CallParticipantsGrid","_ref","ParticipantLabel","ParticipantNetworkQualityIndicator","ParticipantReaction","ParticipantVideoFallback","ParticipantView","VideoRenderer","showLocalParticipant","theme","colors","callParticipantsGrid","useRemoteParticipants","useParticipants","useLocalParticipant","_remoteParticipants","localParticipant","_allParticipants","remoteParticipants","allParticipants","showFloatingView","length","participants","participantViewProps","createElement","style","styles","container","backgroundColor","dark_gray","testID","CALL_PARTICIPANTS_GRID","_extends","create","flex"],"sourceRoot":"../../../../../src","sources":["components/Call/CallLayout/CallParticipantsGrid.tsx"],"mappings":";AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,UAAU,EAAEC,IAAI,QAAQ,cAAc;AAC/C,SAASC,iBAAiB,QAAQ,iCAAiC;AACnE,SAASC,iBAAiB,QAAQ,wCAAwC;AAC1E,SACEC,oBAAoB,IAAIC,2BAA2B,QAG9C,8CAA8C;AACrD,SAASC,gBAAgB,QAAQ,4BAA4B;AAC7D,SAASC,QAAQ,QAAQ,gCAAgC;;AAEzD;AACA;AACA;;AAYA;AACA;AACA;AACA,OAAO,MAAMC,oBAAoB,GAAGC,IAAA,IASH;EAAA,IATI;IACnCL,oBAAoB,GAAGC,2BAA2B;IAClDK,gBAAgB;IAChBC,kCAAkC;IAClCC,mBAAmB;IACnBC,wBAAwB;IACxBC,eAAe;IACfC,aAAa;IACbC,oBAAoB,GAAG;EACE,CAAC,GAAAP,IAAA;EAC1B,MAAM;IACJQ,KAAK,EAAE;MAAEC,MAAM;MAAEC;IAAqB;EACxC,CAAC,GAAGZ,QAAQ,CAAC,CAAC;EACd,MAAM;IAAEa,qBAAqB;IAAEC,eAAe;IAAEC;EAAoB,CAAC,GACnEpB,iBAAiB,CAAC,CAAC;EACrB,MAAMqB,mBAAmB,GAAGH,qBAAqB,CAAC,CAAC;EACnD,MAAMI,gBAAgB,GAAGF,mBAAmB,CAAC,CAAC;EAC9C,MAAMG,gBAAgB,GAAGJ,eAAe,CAAC,CAAC;EAC1C;EACA,MAAMK,kBAAkB,GAAGvB,iBAAiB,CAACoB,mBAAmB,EAAE,GAAG,CAAC;EACtE,MAAMI,eAAe,GAAGxB,iBAAiB,CAACsB,gBAAgB,EAAE,GAAG,CAAC;EAEhE,MAAMG,gBAAgB,GACpBF,kBAAkB,CAACG,MAAM,GAAG,CAAC,IAAIH,kBAAkB,CAACG,MAAM,GAAG,CAAC;EAEhE,MAAMC,YAAY,GAAGF,gBAAgB,GACjCZ,oBAAoB,IAAIQ,gBAAgB,GACtC,CAACA,gBAAgB,CAAC,GAClBE,kBAAkB,GACpBC,eAAe;EAEnB,MAAMI,oBAAwD,GAAG;IAC/DjB,eAAe;IACfJ,gBAAgB;IAChBC,kCAAkC;IAClCC,mBAAmB;IACnBC,wBAAwB;IACxBE;EACF,CAAC;EAED,oBACEhB,KAAA,CAAAiC,aAAA,CAAC/B,IAAI;IACHgC,KAAK,EAAE,CACLC,MAAM,CAACC,SAAS,EAChB;MAAEC,eAAe,EAAElB,MAAM,CAACmB;IAAU,CAAC,EACrClB,oBAAoB,CAACgB,SAAS,CAC9B;IACFG,MAAM,EAAEhC,gBAAgB,CAACiC;EAAuB,GAE/CnC,oBAAoB,iBACnBL,KAAA,CAAAiC,aAAA,CAAC5B,oBAAoB,EAAAoC,QAAA;IACnBV,YAAY,EAAEA;EAAa,GACvBC,oBAAoB,CACzB,CAEC,CAAC;AAEX,CAAC;AAED,MAAMG,MAAM,GAAGlC,UAAU,CAACyC,MAAM,CAAC;EAC/BN,SAAS,EAAE;IACTO,IAAI,EAAE;EACR;AACF,CAAC,CAAC"}

package/dist/module/components/Call/CallLayout/CallParticipantsSpotlight.js

@@ -0,0 +1,94 @@
+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); }
+import React from 'react';
+import { SfuModels, speakerLayoutSortPreset } from '@stream-io/video-client';
+import { useCallStateHooks } from '@stream-io/video-react-bindings';
+import { StyleSheet, View } from 'react-native';
+import { useDebouncedValue } from '../../../utils/hooks/useDebouncedValue';
+import { ComponentTestIds } from '../../../constants/TestIds';
+import { CallParticipantsList as DefaultCallParticipantsList } from '../CallParticipantsList/CallParticipantsList';
+import { ParticipantView as DefaultParticipantView } from '../../Participant';
+import { useTheme } from '../../../contexts/ThemeContext';
+
+/**
+ * Props for the CallParticipantsSpotlight component.
+ */
+
+const hasScreenShare = p => p.publishedTracks.includes(SfuModels.TrackType.SCREEN_SHARE);
+
+/**
+ * Component used to display the list of participants in a spotlight mode.
+ * This can be used when you want to render the screen sharing stream.
+ */
+export const CallParticipantsSpotlight = _ref => {
+  let {
+    CallParticipantsList = DefaultCallParticipantsList,
+    ParticipantLabel,
+    ParticipantNetworkQualityIndicator,
+    ParticipantReaction,
+    ParticipantVideoFallback,
+    ParticipantView = DefaultParticipantView,
+    VideoRenderer
+  } = _ref;
+  const {
+    theme: {
+      colors,
+      callParticipantsSpotlight
+    }
+  } = useTheme();
+  const {
+    useParticipants
+  } = useCallStateHooks();
+  const _allParticipants = useParticipants({
+    sortBy: speakerLayoutSortPreset
+  });
+  const allParticipants = 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);
+  const isUserAloneInCall = (_allParticipants === null || _allParticipants === void 0 ? void 0 : _allParticipants.length) === 1;
+  const participantViewProps = {
+    ParticipantLabel,
+    ParticipantNetworkQualityIndicator,
+    ParticipantReaction,
+    ParticipantVideoFallback,
+    VideoRenderer
+  };
+  const callParticipantsListProps = {
+    ...participantViewProps,
+    ParticipantView
+  };
+  return /*#__PURE__*/React.createElement(View, {
+    testID: ComponentTestIds.CALL_PARTICIPANTS_SPOTLIGHT,
+    style: [styles.container, {
+      backgroundColor: colors.dark_gray
+    }, callParticipantsSpotlight.container]
+  }, participantInSpotlight && ParticipantView && /*#__PURE__*/React.createElement(ParticipantView, _extends({
+    participant: participantInSpotlight,
+    style: isUserAloneInCall ? [styles.fullScreenSpotlightContainer, callParticipantsSpotlight.fullScreenSpotlightContainer] : [styles.spotlightContainer, callParticipantsSpotlight.spotlightContainer],
+    trackType: isScreenShareOnSpotlight ? 'screenShareTrack' : 'videoTrack'
+  }, participantViewProps)), !isUserAloneInCall && /*#__PURE__*/React.createElement(View, {
+    style: [styles.callParticipantsListContainer, callParticipantsSpotlight.callParticipantsListContainer]
+  }, CallParticipantsList && /*#__PURE__*/React.createElement(CallParticipantsList, _extends({
+    participants: isScreenShareOnSpotlight ? allParticipants : otherParticipants,
+    horizontal: true
+  }, callParticipantsListProps))));
+};
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    paddingVertical: 8
+  },
+  fullScreenSpotlightContainer: {
+    flex: 1
+  },
+  spotlightContainer: {
+    flex: 2,
+    overflow: 'hidden',
+    borderRadius: 10,
+    marginHorizontal: 8,
+    marginBottom: 8
+  },
+  callParticipantsListContainer: {
+    flex: 1
+  }
+});
+//# sourceMappingURL=CallParticipantsSpotlight.js.map

package/dist/module/components/Call/CallLayout/CallParticipantsSpotlight.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","SfuModels","speakerLayoutSortPreset","useCallStateHooks","StyleSheet","View","useDebouncedValue","ComponentTestIds","CallParticipantsList","DefaultCallParticipantsList","ParticipantView","DefaultParticipantView","useTheme","hasScreenShare","p","publishedTracks","includes","TrackType","SCREEN_SHARE","CallParticipantsSpotlight","_ref","ParticipantLabel","ParticipantNetworkQualityIndicator","ParticipantReaction","ParticipantVideoFallback","VideoRenderer","theme","colors","callParticipantsSpotlight","useParticipants","_allParticipants","sortBy","allParticipants","participantInSpotlight","otherParticipants","isScreenShareOnSpotlight","isUserAloneInCall","length","participantViewProps","callParticipantsListProps","createElement","testID","CALL_PARTICIPANTS_SPOTLIGHT","style","styles","container","backgroundColor","dark_gray","_extends","participant","fullScreenSpotlightContainer","spotlightContainer","trackType","callParticipantsListContainer","participants","horizontal","create","flex","paddingVertical","overflow","borderRadius","marginHorizontal","marginBottom"],"sourceRoot":"../../../../../src","sources":["components/Call/CallLayout/CallParticipantsSpotlight.tsx"],"mappings":"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"}

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

@@ -0,0 +1 @@
+{"version":3,"names":[],"sourceRoot":"../../../../../src","sources":["components/Call/CallLayout/index.ts"],"mappings":"AAAA,cAAc,wBAAwB;AACtC,cAAc,6BAA6B"}

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

@@ -0,0 +1,232 @@
+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); }
+import React, { useCallback, useMemo, useReducer, useRef, useState } from 'react';
+import { FlatList, StyleSheet } from 'react-native';
+import { VisibilityState } from '@stream-io/video-client';
+import { useDebouncedValue } from '../../../utils/hooks/useDebouncedValue';
+import { useCall } from '@stream-io/video-react-bindings';
+import { ComponentTestIds } from '../../../constants/TestIds';
+import { ParticipantView as DefaultParticipantView } from '../../Participant/ParticipantView';
+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
+ */
+export const CallParticipantsList = _ref => {
+  let {
+    numberOfColumns = 2,
+    horizontal,
+    participants,
+    ParticipantView = DefaultParticipantView,
+    ParticipantLabel,
+    ParticipantNetworkQualityIndicator,
+    ParticipantReaction,
+    ParticipantVideoFallback,
+    VideoRenderer
+  } = _ref;
+  const [containerLayout, setContainerLayout] = 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 = useRef(new Set());
+  const [_forceUpdateValue, forceUpdate] = useReducer(x => x + 1, 0);
+  const forceUpdateValue = useDebouncedValue(_forceUpdateValue, 500); // we debounce forced value to avoid multiple viewability change continuous rerenders due to callbacks that occurs simultaneously during a large list scroll or when scrolling is completed
+
+  // we use a ref to store the active call object
+  // so that it can be used in the onViewableItemsChanged callback
+  const activeCall = useCall();
+  const activeCallRef = useRef(activeCall);
+  activeCallRef.current = activeCall;
+  // This is the function that gets called when the user scrolls the list of participants.
+  // It updates viewableParticipantSessionIds HashSet with the session IDs
+  // of the participants that are currently visible.
+  const onViewableItemsChanged = useRef(_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: VisibilityState.VISIBLE,
+            screenShareTrack: VisibilityState.UNKNOWN
+          }
+        };
+      }
+    });
+    oldVisibleParticipantSessionIds.forEach(key => {
+      if (!newVisibleParticipantSessionIds.has(key)) {
+        mustUpdate = true;
+        participantPatches[key] = {
+          viewportVisibilityState: {
+            videoTrack: VisibilityState.VISIBLE,
+            screenShareTrack: 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 = useRef(item => item.sessionId).current;
+  const onLayout = 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 = 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 = useCallback(_ref3 => {
+    let {
+      item: participant
+    } = _ref3;
+    const isVisible = viewableParticipantSessionIds.current.has(participant.sessionId);
+    return /*#__PURE__*/React.createElement(React.Fragment, null, ParticipantView && /*#__PURE__*/React.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.createElement(React.Fragment, null, participants.map((participant, index) => {
+      return ParticipantView && /*#__PURE__*/React.createElement(ParticipantView, _extends({
+        participant: participant,
+        style: styles.flexed,
+        trackType: "videoTrack",
+        key: keyExtractor(participant, index)
+      }, participantProps));
+    }));
+  }
+  return /*#__PURE__*/React.createElement(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: ComponentTestIds.CALL_PARTICIPANTS_LIST
+  });
+};
+const styles = 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/module/components/Call/CallParticipantsList/CallParticipantsList.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useCallback","useMemo","useReducer","useRef","useState","FlatList","StyleSheet","VisibilityState","useDebouncedValue","useCall","ComponentTestIds","ParticipantView","DefaultParticipantView","VIEWABILITY_CONFIG","waitForInteraction","itemVisiblePercentThreshold","CallParticipantsList","_ref","numberOfColumns","horizontal","participants","ParticipantLabel","ParticipantNetworkQualityIndicator","ParticipantReaction","ParticipantVideoFallback","VideoRenderer","containerLayout","setContainerLayout","width","height","viewableParticipantSessionIds","Set","_forceUpdateValue","forceUpdate","x","forceUpdateValue","activeCall","activeCallRef","current","onViewableItemsChanged","_ref2","viewableItems","participantPatches","mustUpdate","newVisibleParticipantSessionIds","map","v","key","oldVisibleParticipantSessionIds","forEach","has","viewportVisibilityState","videoTrack","VISIBLE","screenShareTrack","UNKNOWN","_activeCallRef$curren","state","updateParticipants","keyExtractor","item","sessionId","onLayout","event","nativeEvent","layout","prev","itemHeight","itemWidth","calculateParticipantViewSize","containerHeight","containerWidth","participantsLength","length","itemContainerStyle","style","styles","participantWrapperHorizontal","participantProps","renderItem","_ref3","participant","isVisible","createElement","Fragment","_extends","trackType","shouldWrapByColumns","index","flexed","undefined","data","viewabilityConfig","numColumns","showsHorizontalScrollIndicator","extraData","testID","CALL_PARTICIPANTS_LIST","create","flex","marginHorizontal","borderRadius","_ref4"],"sourceRoot":"../../../../../src","sources":["components/Call/CallParticipantsList/CallParticipantsList.tsx"],"mappings":"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"}

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

@@ -0,0 +1 @@
+{"version":3,"names":[],"sourceRoot":"../../../../../src","sources":["components/Call/CallParticipantsList/index.ts"],"mappings":"AAAA,cAAc,wBAAwB"}

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

@@ -0,0 +1,112 @@
+import React, { useState } from 'react';
+import { View, StyleSheet, Text, Pressable } from 'react-native';
+import { ParticipantsInfoBadge as DefaultParticipantsInfoBadge } 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 const CallTopView = _ref => {
+  let {
+    onBackPressed,
+    onParticipantInfoPress,
+    title,
+    style: styleProp,
+    ParticipantsInfoBadge = DefaultParticipantsInfoBadge
+  } = _ref;
+  const [callTopViewHeight, setCallTopViewHeight] = useState(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 = event => {
+    const {
+      height
+    } = event.nativeEvent.layout;
+    if (setCallTopViewHeight) {
+      setCallTopViewHeight(height);
+    }
+  };
+  return /*#__PURE__*/React.createElement(View, {
+    style: [styleProp, callTopView.container]
+  }, /*#__PURE__*/React.createElement(TopViewBackground, {
+    height: callTopViewHeight,
+    width: '100%'
+  }), /*#__PURE__*/React.createElement(View, {
+    style: [styles.content, callTopView.content],
+    onLayout: onLayout
+  }, /*#__PURE__*/React.createElement(View, {
+    style: styles.leftElement
+  }, onBackPressed && /*#__PURE__*/React.createElement(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.createElement(Back, {
+    color: colors.static_white
+  }))), /*#__PURE__*/React.createElement(View, {
+    style: [styles.centerElement, callTopView.centerElement]
+  }, title ? /*#__PURE__*/React.createElement(Text, {
+    style: [{
+      color: colors.static_white
+    }, typefaces.subtitleBold, callTopView.title],
+    numberOfLines: 1
+  }, title) : isCallReconnecting && /*#__PURE__*/React.createElement(Text, {
+    style: [{
+      color: colors.static_white
+    }, typefaces.subtitleBold, callTopView.title]
+  }, t('Reconnecting...'))), /*#__PURE__*/React.createElement(View, {
+    style: [styles.rightElement, callTopView.rightElement]
+  }, ParticipantsInfoBadge && /*#__PURE__*/React.createElement(ParticipantsInfoBadge, {
+    onParticipantInfoPress: onParticipantInfoPress
+  }))));
+};
+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'
+  }
+});
+//# sourceMappingURL=CallTopView.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","useState","View","StyleSheet","Text","Pressable","ParticipantsInfoBadge","DefaultParticipantsInfoBadge","Back","TopViewBackground","useCallStateHooks","useI18n","CallingState","useTheme","CallTopView","_ref","onBackPressed","onParticipantInfoPress","title","style","styleProp","callTopViewHeight","setCallTopViewHeight","theme","colors","typefaces","variants","iconSizes","callTopView","useCallCallingState","callingState","t","isCallReconnecting","RECONNECTING","onLayout","event","height","nativeEvent","layout","createElement","container","width","styles","content","leftElement","_ref2","pressed","backIconContainer","opacity","md","onPress","color","static_white","centerElement","subtitleBold","numberOfLines","rightElement","create","position","top","flexDirection","paddingTop","paddingBottom","alignItems","marginLeft","flex","flexGrow"],"sourceRoot":"../../../../../src","sources":["components/Call/CallTopView/CallTopView.tsx"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,QAAQ,QAAQ,OAAO;AACvC,SACEC,IAAI,EACJC,UAAU,EACVC,IAAI,EACJC,SAAS,QAGJ,cAAc;AACrB,SACEC,qBAAqB,IAAIC,4BAA4B,QAEhD,yBAAyB;AAChC,SAASC,IAAI,QAAQ,qBAAqB;AAC1C,SAASC,iBAAiB,QAAQ,gBAAgB;AAClD,SAASC,iBAAiB,EAAEC,OAAO,QAAQ,iCAAiC;AAC5E,SAASC,YAAY,QAAQ,yBAAyB;AACtD,SAASC,QAAQ,QAAQ,gCAAgC;AA2BzD,OAAO,MAAMC,WAAW,GAAGC,IAAA,IAMH;EAAA,IANI;IAC1BC,aAAa;IACbC,sBAAsB;IACtBC,KAAK;IACLC,KAAK,EAAEC,SAAS;IAChBd,qBAAqB,GAAGC;EACR,CAAC,GAAAQ,IAAA;EACjB,MAAM,CAACM,iBAAiB,EAAEC,oBAAoB,CAAC,GAAGrB,QAAQ,CAAS,CAAC,CAAC;EACrE,MAAM;IACJsB,KAAK,EAAE;MACLC,MAAM;MACNC,SAAS;MACTC,QAAQ,EAAE;QAAEC;MAAU,CAAC;MACvBC;IACF;EACF,CAAC,GAAGf,QAAQ,CAAC,CAAC;EACd,MAAM;IAAEgB;EAAoB,CAAC,GAAGnB,iBAAiB,CAAC,CAAC;EACnD,MAAMoB,YAAY,GAAGD,mBAAmB,CAAC,CAAC;EAC1C,MAAM;IAAEE;EAAE,CAAC,GAAGpB,OAAO,CAAC,CAAC;EACvB,MAAMqB,kBAAkB,GAAGF,YAAY,KAAKlB,YAAY,CAACqB,YAAY;EAErE,MAAMC,QAAuD,GAAIC,KAAK,IAAK;IACzE,MAAM;MAAEC;IAAO,CAAC,GAAGD,KAAK,CAACE,WAAW,CAACC,MAAM;IAC3C,IAAIhB,oBAAoB,EAAE;MACxBA,oBAAoB,CAACc,MAAM,CAAC;IAC9B;EACF,CAAC;EAED,oBACEpC,KAAA,CAAAuC,aAAA,CAACrC,IAAI;IAACiB,KAAK,EAAE,CAACC,SAAS,EAAEQ,WAAW,CAACY,SAAS;EAAE,gBAE9CxC,KAAA,CAAAuC,aAAA,CAAC9B,iBAAiB;IAAC2B,MAAM,EAAEf,iBAAkB;IAACoB,KAAK,EAAE;EAAO,CAAE,CAAC,eAC/DzC,KAAA,CAAAuC,aAAA,CAACrC,IAAI;IAACiB,KAAK,EAAE,CAACuB,MAAM,CAACC,OAAO,EAAEf,WAAW,CAACe,OAAO,CAAE;IAACT,QAAQ,EAAEA;EAAS,gBACrElC,KAAA,CAAAuC,aAAA,CAACrC,IAAI;IAACiB,KAAK,EAAEuB,MAAM,CAACE;EAAY,GAC7B5B,aAAa,iBACZhB,KAAA,CAAAuC,aAAA,CAAClC,SAAS;IACRc,KAAK,EAAE0B,KAAA;MAAA,IAAC;QAAEC;MAAQ,CAAC,GAAAD,KAAA;MAAA,OAAK,CACtBH,MAAM,CAACK,iBAAiB,EACxB;QACEC,OAAO,EAAEF,OAAO,GAAG,GAAG,GAAG,CAAC;QAC1BV,MAAM,EAAET,SAAS,CAACsB,EAAE;QACpBR,KAAK,EAAEd,SAAS,CAACsB;MACnB,CAAC,EACDrB,WAAW,CAACmB,iBAAiB,CAC9B;IAAA,CAAC;IACFG,OAAO,EAAElC;EAAc,gBAEvBhB,KAAA,CAAAuC,aAAA,CAAC/B,IAAI;IAAC2C,KAAK,EAAE3B,MAAM,CAAC4B;EAAa,CAAE,CAC1B,CAET,CAAC,eACPpD,KAAA,CAAAuC,aAAA,CAACrC,IAAI;IAACiB,KAAK,EAAE,CAACuB,MAAM,CAACW,aAAa,EAAEzB,WAAW,CAACyB,aAAa;EAAE,GAC5DnC,KAAK,gBACJlB,KAAA,CAAAuC,aAAA,CAACnC,IAAI;IACHe,KAAK,EAAE,CACL;MAAEgC,KAAK,EAAE3B,MAAM,CAAC4B;IAAa,CAAC,EAC9B3B,SAAS,CAAC6B,YAAY,EACtB1B,WAAW,CAACV,KAAK,CACjB;IACFqC,aAAa,EAAE;EAAE,GAEhBrC,KACG,CAAC,GAEPc,kBAAkB,iBAChBhC,KAAA,CAAAuC,aAAA,CAACnC,IAAI;IACHe,KAAK,EAAE,CACL;MAAEgC,KAAK,EAAE3B,MAAM,CAAC4B;IAAa,CAAC,EAC9B3B,SAAS,CAAC6B,YAAY,EACtB1B,WAAW,CAACV,KAAK;EACjB,GAEDa,CAAC,CAAC,iBAAiB,CAChB,CAGN,CAAC,eACP/B,KAAA,CAAAuC,aAAA,CAACrC,IAAI;IAACiB,KAAK,EAAE,CAACuB,MAAM,CAACc,YAAY,EAAE5B,WAAW,CAAC4B,YAAY;EAAE,GAC1DlD,qBAAqB,iBACpBN,KAAA,CAAAuC,aAAA,CAACjC,qBAAqB;IACpBW,sBAAsB,EAAEA;EAAuB,CAChD,CAEC,CACF,CACF,CAAC;AAEX,CAAC;AAED,MAAMyB,MAAM,GAAGvC,UAAU,CAACsD,MAAM,CAAC;EAC/Bd,OAAO,EAAE;IACPe,QAAQ,EAAE,UAAU;IACpBC,GAAG,EAAE,CAAC;IACNC,aAAa,EAAE,KAAK;IACpBC,UAAU,EAAE,EAAE;IACdC,aAAa,EAAE,EAAE;IACjBC,UAAU,EAAE;EACd,CAAC;EACDhB,iBAAiB,EAAE;IACjB;IACAiB,UAAU,EAAE;EACd,CAAC;EACDpB,WAAW,EAAE;IACXqB,IAAI,EAAE,CAAC;IACPF,UAAU,EAAE;EACd,CAAC;EACDV,aAAa,EAAE;IACbY,IAAI,EAAE,CAAC;IACPF,UAAU,EAAE,QAAQ;IACpBG,QAAQ,EAAE;EACZ,CAAC;EACDV,YAAY,EAAE;IACZS,IAAI,EAAE,CAAC;IACPF,UAAU,EAAE;EACd;AACF,CAAC,CAAC"}

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

@@ -0,0 +1,100 @@
+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 = _ref => {
+  let {
+    onParticipantInfoPress
+  } = _ref;
+  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: _ref2 => {
+      let {
+        pressed
+      } = _ref2;
+      return [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]
+  }, /*#__PURE__*/React.createElement(Text, {
+    style: [styles.participantCountText, {
+      color: colors.static_white
+    }, typefaces.subtitle, participantInfoBadge.participantsCountText]
+  }, 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