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

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

@@ -0,0 +1,160 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _AcceptCallButton = require("./AcceptCallButton");
+Object.keys(_AcceptCallButton).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _AcceptCallButton[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _AcceptCallButton[key];
+    }
+  });
+});
+var _RejectCallButton = require("./RejectCallButton");
+Object.keys(_RejectCallButton).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _RejectCallButton[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _RejectCallButton[key];
+    }
+  });
+});
+var _HangupCallButton = require("./HangupCallButton");
+Object.keys(_HangupCallButton).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _HangupCallButton[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _HangupCallButton[key];
+    }
+  });
+});
+var _ToggleAudioPreviewButton = require("./ToggleAudioPreviewButton");
+Object.keys(_ToggleAudioPreviewButton).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ToggleAudioPreviewButton[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ToggleAudioPreviewButton[key];
+    }
+  });
+});
+var _ToggleVideoPreviewButton = require("./ToggleVideoPreviewButton");
+Object.keys(_ToggleVideoPreviewButton).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ToggleVideoPreviewButton[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ToggleVideoPreviewButton[key];
+    }
+  });
+});
+var _ToggleAudioPublishingButton = require("./ToggleAudioPublishingButton");
+Object.keys(_ToggleAudioPublishingButton).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ToggleAudioPublishingButton[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ToggleAudioPublishingButton[key];
+    }
+  });
+});
+var _ToggleVideoPublishingButton = require("./ToggleVideoPublishingButton");
+Object.keys(_ToggleVideoPublishingButton).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ToggleVideoPublishingButton[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ToggleVideoPublishingButton[key];
+    }
+  });
+});
+var _ToggleCameraFaceButton = require("./ToggleCameraFaceButton");
+Object.keys(_ToggleCameraFaceButton).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ToggleCameraFaceButton[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ToggleCameraFaceButton[key];
+    }
+  });
+});
+var _ChatButton = require("./ChatButton");
+Object.keys(_ChatButton).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ChatButton[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ChatButton[key];
+    }
+  });
+});
+var _ReactionButton = require("./ReactionButton");
+Object.keys(_ReactionButton).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ReactionButton[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ReactionButton[key];
+    }
+  });
+});
+var _CallControls = require("./CallControls");
+Object.keys(_CallControls).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _CallControls[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _CallControls[key];
+    }
+  });
+});
+var _LobbyControls = require("./LobbyControls");
+Object.keys(_LobbyControls).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _LobbyControls[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _LobbyControls[key];
+    }
+  });
+});
+var _IncomingCallControls = require("./IncomingCallControls");
+Object.keys(_IncomingCallControls).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _IncomingCallControls[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _IncomingCallControls[key];
+    }
+  });
+});
+var _OutgoingCallControls = require("./OutgoingCallControls");
+Object.keys(_OutgoingCallControls).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _OutgoingCallControls[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _OutgoingCallControls[key];
+    }
+  });
+});
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["_AcceptCallButton","require","Object","keys","forEach","key","exports","defineProperty","enumerable","get","_RejectCallButton","_HangupCallButton","_ToggleAudioPreviewButton","_ToggleVideoPreviewButton","_ToggleAudioPublishingButton","_ToggleVideoPublishingButton","_ToggleCameraFaceButton","_ChatButton","_ReactionButton","_CallControls","_LobbyControls","_IncomingCallControls","_OutgoingCallControls"],"sourceRoot":"../../../../../src","sources":["components/Call/CallControls/index.tsx"],"mappings":"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"}

package/dist/commonjs/components/Call/CallControls/internal/ReactionsPicker.js

@@ -0,0 +1,143 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ReactionsPicker = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _videoReactBindings = require("@stream-io/video-react-bindings");
+var _TestIds = require("../../../../constants/TestIds");
+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 TOP_PADDING = 4;
+const REACTION_MARGIN_BOTTOM = 4;
+const ReactionsPicker = _ref => {
+  let {
+    reactions,
+    reactionsButtonLayoutRectangle,
+    onRequestedClose
+  } = _ref;
+  const {
+    theme: {
+      colors,
+      reactionsPicker
+    }
+  } = (0, _ThemeContext.useTheme)();
+  const call = (0, _videoReactBindings.useCall)();
+  const size = (reactionsButtonLayoutRectangle === null || reactionsButtonLayoutRectangle === void 0 ? void 0 : reactionsButtonLayoutRectangle.width) ?? 0;
+  const reactionItemSize = size * 0.8;
+  const popupHeight =
+  // the top padding
+  TOP_PADDING +
+  // take margins into account
+  REACTION_MARGIN_BOTTOM * reactions.length +
+  // the size of the reaction icon items (same size as reactions button * amount of reactions)
+  reactionItemSize * reactions.length;
+  const reactionsPopupStyle = {
+    // we should show the popup right above the reactions button and not top of it
+    top: ((reactionsButtonLayoutRectangle === null || reactionsButtonLayoutRectangle === void 0 ? void 0 : reactionsButtonLayoutRectangle.y) ?? 0) - popupHeight,
+    // from the same side horizontal coordinate of the reactions button
+    left: reactionsButtonLayoutRectangle === null || reactionsButtonLayoutRectangle === void 0 ? void 0 : reactionsButtonLayoutRectangle.x,
+    // the width of the popup should be the same as the reactions button
+    width: size,
+    height: popupHeight,
+    // the popup should be rounded as the reactions button
+    borderTopStartRadius: size / 2,
+    borderTopEndRadius: size / 2
+  };
+  const elasticAnimRef = (0, _react.useRef)(new _reactNative.Animated.Value(0.5)); // Initial value for scale: 0.5
+
+  (0, _react.useEffect)(() => {
+    _reactNative.Animated.timing(elasticAnimRef.current, {
+      toValue: 1,
+      duration: 800,
+      useNativeDriver: true,
+      easing: _reactNative.Easing.elastic(3)
+    }).start();
+  }, []);
+  const reactionItemStyle = {
+    height: reactionItemSize,
+    width: reactionItemSize,
+    borderRadius: reactionItemSize / 2
+  };
+  const reactionsButtonDimmerStyle = {
+    ...styles.reactionsButtonDimmer,
+    height: size,
+    width: size,
+    // we should show the popup right on top of the reactions button
+    top: (reactionsButtonLayoutRectangle === null || reactionsButtonLayoutRectangle === void 0 ? void 0 : reactionsButtonLayoutRectangle.y) ?? 0 - popupHeight + size,
+    // from the same side horizontal coordinate of the reactions button
+    left: reactionsButtonLayoutRectangle === null || reactionsButtonLayoutRectangle === void 0 ? void 0 : reactionsButtonLayoutRectangle.x
+  };
+  const onClose = reaction => {
+    if (reaction) {
+      call === null || call === void 0 || call.sendReaction(reaction).catch(e => {
+        console.error(e, reaction);
+      });
+    }
+    _reactNative.Animated.timing(elasticAnimRef.current, {
+      toValue: 0.2,
+      duration: 150,
+      useNativeDriver: true,
+      easing: _reactNative.Easing.linear
+    }).start(onRequestedClose);
+  };
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactNative.Pressable, {
+    testID: _TestIds.ComponentTestIds.REACTIONS_PICKER,
+    style: [styles.reactionsPopup, reactionsPopupStyle, {
+      backgroundColor: colors.static_grey
+    }, reactionsPicker.reactionsPopup],
+    onPress: () => {
+      onClose();
+    }
+  }, reactions.map(reaction => /*#__PURE__*/_react.default.createElement(_reactNative.Pressable, {
+    key: reaction.emoji_code,
+    style: [styles.reactionItem, reactionItemStyle, {
+      // temporary background color until we have theming
+      backgroundColor: colors.overlay
+    }, reactionsPicker.reactionItem],
+    onPress: () => {
+      onClose({
+        type: reaction.type,
+        custom: reaction.custom,
+        emoji_code: reaction.emoji_code
+      });
+    }
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.Animated.Text, {
+    style: [styles.reactionText, {
+      transform: [{
+        scaleY: elasticAnimRef.current
+      }, {
+        scaleX: elasticAnimRef.current
+      }]
+    }, reactionsPicker.reactionText]
+  }, reaction.icon)))), /*#__PURE__*/_react.default.createElement(_reactNative.Pressable, {
+    style: [reactionsButtonDimmerStyle, {
+      backgroundColor: colors.static_grey
+    }, reactionsPicker.reactionsButtonDimmer],
+    onPress: () => onClose()
+  }));
+};
+exports.ReactionsPicker = ReactionsPicker;
+const styles = _reactNative.StyleSheet.create({
+  reactionsPopup: {
+    position: 'absolute',
+    alignItems: 'center',
+    paddingTop: TOP_PADDING
+  },
+  reactionsButtonDimmer: {
+    position: 'absolute',
+    opacity: 0.5
+  },
+  reactionItem: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginBottom: REACTION_MARGIN_BOTTOM
+  },
+  reactionText: {
+    fontSize: 18.5
+  }
+});
+//# sourceMappingURL=ReactionsPicker.js.map

package/dist/commonjs/components/Call/CallControls/internal/ReactionsPicker.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_videoReactBindings","_TestIds","_ThemeContext","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","TOP_PADDING","REACTION_MARGIN_BOTTOM","ReactionsPicker","_ref","reactions","reactionsButtonLayoutRectangle","onRequestedClose","theme","colors","reactionsPicker","useTheme","useCall","size","width","reactionItemSize","popupHeight","length","reactionsPopupStyle","top","y","left","x","height","borderTopStartRadius","borderTopEndRadius","elasticAnimRef","useRef","Animated","Value","useEffect","timing","current","toValue","duration","useNativeDriver","easing","Easing","elastic","start","reactionItemStyle","borderRadius","reactionsButtonDimmerStyle","styles","reactionsButtonDimmer","onClose","reaction","sendReaction","catch","e","console","error","linear","createElement","Fragment","Pressable","testID","ComponentTestIds","REACTIONS_PICKER","style","reactionsPopup","backgroundColor","static_grey","onPress","map","emoji_code","reactionItem","overlay","type","custom","Text","reactionText","transform","scaleY","scaleX","icon","exports","StyleSheet","create","position","alignItems","paddingTop","opacity","justifyContent","marginBottom","fontSize"],"sourceRoot":"../../../../../../src","sources":["components/Call/CallControls/internal/ReactionsPicker.tsx"],"mappings":"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"}

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

@@ -0,0 +1,76 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CallParticipantsGrid = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactNative = require("react-native");
+var _videoReactBindings = require("@stream-io/video-react-bindings");
+var _useDebouncedValue = require("../../../utils/hooks/useDebouncedValue");
+var _CallParticipantsList = require("../CallParticipantsList/CallParticipantsList");
+var _TestIds = require("../../../constants/TestIds");
+var _ThemeContext = require("../../../contexts/ThemeContext");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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); }
+/**
+ * Props for the CallParticipantsGrid component.
+ */
+
+/**
+ * Component used to display the list of participants in a grid mode.
+ */
+const CallParticipantsGrid = _ref => {
+  let {
+    CallParticipantsList = _CallParticipantsList.CallParticipantsList,
+    ParticipantLabel,
+    ParticipantNetworkQualityIndicator,
+    ParticipantReaction,
+    ParticipantVideoFallback,
+    ParticipantView,
+    VideoRenderer,
+    showLocalParticipant = false
+  } = _ref;
+  const {
+    theme: {
+      colors,
+      callParticipantsGrid
+    }
+  } = (0, _ThemeContext.useTheme)();
+  const {
+    useRemoteParticipants,
+    useParticipants,
+    useLocalParticipant
+  } = (0, _videoReactBindings.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 = (0, _useDebouncedValue.useDebouncedValue)(_remoteParticipants, 300);
+  const allParticipants = (0, _useDebouncedValue.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.default.createElement(_reactNative.View, {
+    style: [styles.container, {
+      backgroundColor: colors.dark_gray
+    }, callParticipantsGrid.container],
+    testID: _TestIds.ComponentTestIds.CALL_PARTICIPANTS_GRID
+  }, CallParticipantsList && /*#__PURE__*/_react.default.createElement(CallParticipantsList, _extends({
+    participants: participants
+  }, participantViewProps)));
+};
+exports.CallParticipantsGrid = CallParticipantsGrid;
+const styles = _reactNative.StyleSheet.create({
+  container: {
+    flex: 1
+  }
+});
+//# sourceMappingURL=CallParticipantsGrid.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","_videoReactBindings","_useDebouncedValue","_CallParticipantsList","_TestIds","_ThemeContext","obj","__esModule","default","_extends","Object","assign","bind","target","i","arguments","length","source","key","prototype","hasOwnProperty","call","apply","CallParticipantsGrid","_ref","CallParticipantsList","DefaultCallParticipantsList","ParticipantLabel","ParticipantNetworkQualityIndicator","ParticipantReaction","ParticipantVideoFallback","ParticipantView","VideoRenderer","showLocalParticipant","theme","colors","callParticipantsGrid","useTheme","useRemoteParticipants","useParticipants","useLocalParticipant","useCallStateHooks","_remoteParticipants","localParticipant","_allParticipants","remoteParticipants","useDebouncedValue","allParticipants","showFloatingView","participants","participantViewProps","createElement","View","style","styles","container","backgroundColor","dark_gray","testID","ComponentTestIds","CALL_PARTICIPANTS_GRID","exports","StyleSheet","create","flex"],"sourceRoot":"../../../../../src","sources":["components/Call/CallLayout/CallParticipantsGrid.tsx"],"mappings":"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"}

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

@@ -0,0 +1,101 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CallParticipantsSpotlight = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _videoClient = require("@stream-io/video-client");
+var _videoReactBindings = require("@stream-io/video-react-bindings");
+var _reactNative = require("react-native");
+var _useDebouncedValue = require("../../../utils/hooks/useDebouncedValue");
+var _TestIds = require("../../../constants/TestIds");
+var _CallParticipantsList = require("../CallParticipantsList/CallParticipantsList");
+var _Participant = require("../../Participant");
+var _ThemeContext = require("../../../contexts/ThemeContext");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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); }
+/**
+ * Props for the CallParticipantsSpotlight component.
+ */
+
+const hasScreenShare = p => p.publishedTracks.includes(_videoClient.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.
+ */
+const CallParticipantsSpotlight = _ref => {
+  let {
+    CallParticipantsList = _CallParticipantsList.CallParticipantsList,
+    ParticipantLabel,
+    ParticipantNetworkQualityIndicator,
+    ParticipantReaction,
+    ParticipantVideoFallback,
+    ParticipantView = _Participant.ParticipantView,
+    VideoRenderer
+  } = _ref;
+  const {
+    theme: {
+      colors,
+      callParticipantsSpotlight
+    }
+  } = (0, _ThemeContext.useTheme)();
+  const {
+    useParticipants
+  } = (0, _videoReactBindings.useCallStateHooks)();
+  const _allParticipants = useParticipants({
+    sortBy: _videoClient.speakerLayoutSortPreset
+  });
+  const allParticipants = (0, _useDebouncedValue.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.default.createElement(_reactNative.View, {
+    testID: _TestIds.ComponentTestIds.CALL_PARTICIPANTS_SPOTLIGHT,
+    style: [styles.container, {
+      backgroundColor: colors.dark_gray
+    }, callParticipantsSpotlight.container]
+  }, participantInSpotlight && ParticipantView && /*#__PURE__*/_react.default.createElement(ParticipantView, _extends({
+    participant: participantInSpotlight,
+    style: isUserAloneInCall ? [styles.fullScreenSpotlightContainer, callParticipantsSpotlight.fullScreenSpotlightContainer] : [styles.spotlightContainer, callParticipantsSpotlight.spotlightContainer],
+    trackType: isScreenShareOnSpotlight ? 'screenShareTrack' : 'videoTrack'
+  }, participantViewProps)), !isUserAloneInCall && /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: [styles.callParticipantsListContainer, callParticipantsSpotlight.callParticipantsListContainer]
+  }, CallParticipantsList && /*#__PURE__*/_react.default.createElement(CallParticipantsList, _extends({
+    participants: isScreenShareOnSpotlight ? allParticipants : otherParticipants,
+    horizontal: true
+  }, callParticipantsListProps))));
+};
+exports.CallParticipantsSpotlight = CallParticipantsSpotlight;
+const styles = _reactNative.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/commonjs/components/Call/CallLayout/CallParticipantsSpotlight.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireDefault","require","_videoClient","_videoReactBindings","_reactNative","_useDebouncedValue","_TestIds","_CallParticipantsList","_Participant","_ThemeContext","obj","__esModule","default","_extends","Object","assign","bind","target","i","arguments","length","source","key","prototype","hasOwnProperty","call","apply","hasScreenShare","p","publishedTracks","includes","SfuModels","TrackType","SCREEN_SHARE","CallParticipantsSpotlight","_ref","CallParticipantsList","DefaultCallParticipantsList","ParticipantLabel","ParticipantNetworkQualityIndicator","ParticipantReaction","ParticipantVideoFallback","ParticipantView","DefaultParticipantView","VideoRenderer","theme","colors","callParticipantsSpotlight","useTheme","useParticipants","useCallStateHooks","_allParticipants","sortBy","speakerLayoutSortPreset","allParticipants","useDebouncedValue","participantInSpotlight","otherParticipants","isScreenShareOnSpotlight","isUserAloneInCall","participantViewProps","callParticipantsListProps","createElement","View","testID","ComponentTestIds","CALL_PARTICIPANTS_SPOTLIGHT","style","styles","container","backgroundColor","dark_gray","participant","fullScreenSpotlightContainer","spotlightContainer","trackType","callParticipantsListContainer","participants","horizontal","exports","StyleSheet","create","flex","paddingVertical","overflow","borderRadius","marginHorizontal","marginBottom"],"sourceRoot":"../../../../../src","sources":["components/Call/CallLayout/CallParticipantsSpotlight.tsx"],"mappings":"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"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"names":["_CallParticipantsGrid","require","Object","keys","forEach","key","exports","defineProperty","enumerable","get","_CallParticipantsSpotlight"],"sourceRoot":"../../../../../src","sources":["components/Call/CallLayout/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;AACA,IAAAK,0BAAA,GAAAT,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAO,0BAAA,EAAAN,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAK,0BAAA,CAAAL,GAAA;EAAAH,MAAA,CAAAK,cAAA,CAAAD,OAAA,EAAAD,GAAA;IAAAG,UAAA;IAAAC,GAAA,WAAAA,CAAA;MAAA,OAAAC,0BAAA,CAAAL,GAAA;IAAA;EAAA;AAAA"}