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

package/dist/commonjs/components/Participant/FloatingParticipantView/FloatingView/common.js

@@ -0,0 +1,74 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.floatingChildViewContainerStyle = exports.FloatingViewAlignment = void 0;
+exports.getClosestSnapAlignment = getClosestSnapAlignment;
+exports.getSnapAlignments = getSnapAlignments;
+let FloatingViewAlignment = /*#__PURE__*/function (FloatingViewAlignment) {
+  FloatingViewAlignment[FloatingViewAlignment["topLeft"] = 0] = "topLeft";
+  FloatingViewAlignment[FloatingViewAlignment["topRight"] = 1] = "topRight";
+  FloatingViewAlignment[FloatingViewAlignment["bottomLeft"] = 2] = "bottomLeft";
+  FloatingViewAlignment[FloatingViewAlignment["bottomRight"] = 3] = "bottomRight";
+  return FloatingViewAlignment;
+}({});
+exports.FloatingViewAlignment = FloatingViewAlignment;
+// find the bounds for the floating view
+function getSnapAlignments(_ref) {
+  let {
+    rootContainerDimensions,
+    floatingViewDimensions
+  } = _ref;
+  const right = rootContainerDimensions.width - floatingViewDimensions.width;
+  const bottom = rootContainerDimensions.height - floatingViewDimensions.height;
+  const snapOffsets = {
+    [FloatingViewAlignment.topLeft]: {
+      x: 0,
+      y: 0
+    },
+    [FloatingViewAlignment.topRight]: {
+      x: right,
+      y: 0
+    },
+    [FloatingViewAlignment.bottomLeft]: {
+      x: 0,
+      y: bottom
+    },
+    [FloatingViewAlignment.bottomRight]: {
+      x: right,
+      y: bottom
+    }
+  };
+  return snapOffsets;
+}
+
+// which is the closest snap alignment to the current position?
+// this is done by finding the closest snap offset by computing which point is
+// in the minimum distance between the current position and all the 4 snap offset bounds
+function getClosestSnapAlignment(_ref2) {
+  'worklet';
+
+  let {
+    position,
+    snapAlignments
+  } = _ref2;
+  let minDistanceSquared = Number.MAX_VALUE;
+  let closestSnapAlignmentKey = FloatingViewAlignment.topRight;
+  for (const key in snapAlignments) {
+    // NOTE: key is a string always but we know that it is a FloatingViewAlignment, so we have to cast it unfortunately
+    const currentAlignmentKey = key;
+    const offset = snapAlignments[currentAlignmentKey];
+    const currDistanceSquared = (offset.x - position.x) * (offset.x - position.x) + (offset.y - position.y) * (offset.y - position.y);
+    if (currDistanceSquared < minDistanceSquared) {
+      minDistanceSquared = currDistanceSquared;
+      closestSnapAlignmentKey = currentAlignmentKey;
+    }
+  }
+  return snapAlignments[closestSnapAlignmentKey];
+}
+const floatingChildViewContainerStyle = {
+  alignSelf: 'flex-start'
+};
+exports.floatingChildViewContainerStyle = floatingChildViewContainerStyle;
+//# sourceMappingURL=common.js.map

package/dist/commonjs/components/Participant/FloatingParticipantView/FloatingView/common.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["FloatingViewAlignment","exports","getSnapAlignments","_ref","rootContainerDimensions","floatingViewDimensions","right","width","bottom","height","snapOffsets","topLeft","x","y","topRight","bottomLeft","bottomRight","getClosestSnapAlignment","_ref2","position","snapAlignments","minDistanceSquared","Number","MAX_VALUE","closestSnapAlignmentKey","key","currentAlignmentKey","offset","currDistanceSquared","floatingChildViewContainerStyle","alignSelf"],"sourceRoot":"../../../../../../src","sources":["components/Participant/FloatingParticipantView/FloatingView/common.ts"],"mappings":";;;;;;;;IAEYA,qBAAqB,0BAArBA,qBAAqB;EAArBA,qBAAqB,CAArBA,qBAAqB;EAArBA,qBAAqB,CAArBA,qBAAqB;EAArBA,qBAAqB,CAArBA,qBAAqB;EAArBA,qBAAqB,CAArBA,qBAAqB;EAAA,OAArBA,qBAAqB;AAAA;AAAAC,OAAA,CAAAD,qBAAA,GAAAA,qBAAA;AAmBjC;AACO,SAASE,iBAAiBA,CAAAC,IAAA,EAMd;EAAA,IANe;IAChCC,uBAAuB;IACvBC;EAIF,CAAC,GAAAF,IAAA;EACC,MAAMG,KAAK,GAAGF,uBAAuB,CAACG,KAAK,GAAGF,sBAAsB,CAACE,KAAK;EAC1E,MAAMC,MAAM,GAAGJ,uBAAuB,CAACK,MAAM,GAAGJ,sBAAsB,CAACI,MAAM;EAC7E,MAAMC,WAAW,GAAG;IAClB,CAACV,qBAAqB,CAACW,OAAO,GAAG;MAC/BC,CAAC,EAAE,CAAC;MACJC,CAAC,EAAE;IACL,CAAC;IACD,CAACb,qBAAqB,CAACc,QAAQ,GAAG;MAChCF,CAAC,EAAEN,KAAK;MACRO,CAAC,EAAE;IACL,CAAC;IACD,CAACb,qBAAqB,CAACe,UAAU,GAAG;MAClCH,CAAC,EAAE,CAAC;MACJC,CAAC,EAAEL;IACL,CAAC;IACD,CAACR,qBAAqB,CAACgB,WAAW,GAAG;MACnCJ,CAAC,EAAEN,KAAK;MACRO,CAAC,EAAEL;IACL;EACF,CAAC;EACD,OAAOE,WAAW;AACpB;;AAEA;AACA;AACA;AACO,SAASO,uBAAuBA,CAAAC,KAAA,EAMpC;EACD,SAAS;;EAAC,IAP4B;IACtCC,QAAQ;IACRC;EAIF,CAAC,GAAAF,KAAA;EAEC,IAAIG,kBAAkB,GAAGC,MAAM,CAACC,SAAS;EACzC,IAAIC,uBAA8C,GAChDxB,qBAAqB,CAACc,QAAQ;EAChC,KAAK,MAAMW,GAAG,IAAIL,cAAc,EAAE;IAChC;IACA,MAAMM,mBAAmB,GAAGD,GAAuC;IACnE,MAAME,MAAM,GAAGP,cAAc,CAACM,mBAAmB,CAAC;IAClD,MAAME,mBAAmB,GACvB,CAACD,MAAM,CAACf,CAAC,GAAGO,QAAQ,CAACP,CAAC,KAAKe,MAAM,CAACf,CAAC,GAAGO,QAAQ,CAACP,CAAC,CAAC,GACjD,CAACe,MAAM,CAACd,CAAC,GAAGM,QAAQ,CAACN,CAAC,KAAKc,MAAM,CAACd,CAAC,GAAGM,QAAQ,CAACN,CAAC,CAAC;IACnD,IAAIe,mBAAmB,GAAGP,kBAAkB,EAAE;MAC5CA,kBAAkB,GAAGO,mBAAmB;MACxCJ,uBAAuB,GAAGE,mBAAmB;IAC/C;EACF;EACA,OAAON,cAAc,CAACI,uBAAuB,CAAC;AAChD;AAQO,MAAMK,+BAAqD,GAAG;EACnEC,SAAS,EAAE;AACb,CAAC;AAAC7B,OAAA,CAAA4B,+BAAA,GAAAA,+BAAA"}

package/dist/commonjs/components/Participant/FloatingParticipantView/FloatingView/index.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _optionalLibs = require("../../../../utils/internal/optionalLibs");
+const FloatingView = (0, _optionalLibs.getReanimatedLib)() && (0, _optionalLibs.getGestureHandlerLib)() ? require('./ReanimatedFloatingView').default : require('./AnimatedFloatingView').default;
+var _default = FloatingView;
+exports.default = _default;
+//# sourceMappingURL=index.js.map

package/dist/commonjs/components/Participant/FloatingParticipantView/FloatingView/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_optionalLibs","require","FloatingView","getReanimatedLib","getGestureHandlerLib","default","_default","exports"],"sourceRoot":"../../../../../../src","sources":["components/Participant/FloatingParticipantView/FloatingView/index.ts"],"mappings":";;;;;;AAAA,IAAAA,aAAA,GAAAC,OAAA;AAMA,MAAMC,YAAyC,GAC7C,IAAAC,8BAAgB,EAAC,CAAC,IAAI,IAAAC,kCAAoB,EAAC,CAAC,GACxCH,OAAO,CAAC,0BAA0B,CAAC,CAACI,OAAO,GAC3CJ,OAAO,CAAC,wBAAwB,CAAC,CAACI,OAAO;AAAC,IAAAC,QAAA,GAEjCJ,YAAY;AAAAK,OAAA,CAAAF,OAAA,GAAAC,QAAA"}

package/dist/commonjs/components/Participant/FloatingParticipantView/index.js

@@ -0,0 +1,150 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FloatingParticipantView = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactNative = require("react-native");
+var _constants = require("../../../constants");
+var _TestIds = require("../../../constants/TestIds");
+var _icons = require("../../../icons");
+var _FloatingView = _interopRequireDefault(require("./FloatingView"));
+var _common = require("./FloatingView/common");
+var _ParticipantView = require("../ParticipantView");
+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 to be passed for the LocalVideoView component.
+ */
+
+const CustomLocalParticipantViewVideoFallback = () => {
+  const {
+    theme: {
+      colors,
+      floatingParticipantsView,
+      variants: {
+        iconSizes
+      }
+    }
+  } = (0, _ThemeContext.useTheme)();
+  return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: [styles.videoFallback, {
+      backgroundColor: colors.disabled
+    }, floatingParticipantsView.videoFallback]
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: {
+      height: iconSizes.md,
+      width: iconSizes.md
+    }
+  }, /*#__PURE__*/_react.default.createElement(_icons.VideoSlash, {
+    color: colors.static_white
+  })));
+};
+
+/**
+ * A component to render the floating participant's video.
+ */
+const FloatingParticipantView = _ref => {
+  let {
+    alignment = 'top-right',
+    onPressHandler,
+    participant,
+    style,
+    ParticipantView = _ParticipantView.ParticipantView,
+    ParticipantNetworkQualityIndicator,
+    ParticipantReaction,
+    VideoRenderer
+  } = _ref;
+  const {
+    theme: {
+      colors,
+      floatingParticipantsView
+    }
+  } = (0, _ThemeContext.useTheme)();
+  const floatingAlignmentMap = {
+    'top-left': _common.FloatingViewAlignment.topLeft,
+    'top-right': _common.FloatingViewAlignment.topRight,
+    'bottom-left': _common.FloatingViewAlignment.bottomLeft,
+    'bottom-right': _common.FloatingViewAlignment.bottomRight
+  };
+  const [containerDimensions, setContainerDimensions] = _react.default.useState();
+  const participantViewProps = {
+    ParticipantLabel: null,
+    ParticipantNetworkQualityIndicator,
+    ParticipantReaction,
+    ParticipantVideoFallback: CustomLocalParticipantViewVideoFallback,
+    VideoRenderer
+  };
+  if (!participant) {
+    return null;
+  }
+  return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    testID: _TestIds.ComponentTestIds.LOCAL_PARTICIPANT,
+    style: [styles.container, floatingParticipantsView.container]
+    // "box-none" disallows the container view to be not take up touches
+    // and allows only the floating view (its child view) to take up the touches
+    ,
+    pointerEvents: "box-none",
+    onLayout: event => {
+      const {
+        width,
+        height
+      } = event.nativeEvent.layout;
+      setContainerDimensions(prev => {
+        if (prev && prev.width === width && prev.height === height) {
+          return prev;
+        }
+        return {
+          width: width,
+          height: height
+        };
+      });
+    }
+  }, containerDimensions && /*#__PURE__*/_react.default.createElement(_FloatingView.default, {
+    containerHeight: containerDimensions.height,
+    containerWidth: containerDimensions.width,
+    initialAlignment: floatingAlignmentMap[alignment]
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.Pressable, {
+    onPress: onPressHandler
+  }, ParticipantView && /*#__PURE__*/_react.default.createElement(ParticipantView, _extends({
+    participant: participant,
+    trackType: "videoTrack",
+    style: [styles.participantViewContainer, style, {
+      backgroundColor: colors.static_grey,
+      shadowColor: colors.static_black
+    }, floatingParticipantsView.participantViewContainer]
+    // video z order must be one above the one used in grid view
+    // (which uses the default: 0)
+    ,
+    videoZOrder: 1
+  }, participantViewProps)))));
+};
+exports.FloatingParticipantView = FloatingParticipantView;
+const styles = _reactNative.StyleSheet.create({
+  container: {
+    margin: 8,
+    // Needed to make the view on top and draggable
+    zIndex: _constants.Z_INDEX.IN_MIDDLE,
+    flex: 1
+  },
+  participantViewContainer: {
+    height: _constants.FLOATING_VIDEO_VIEW_STYLE.height,
+    width: _constants.FLOATING_VIDEO_VIEW_STYLE.width,
+    borderRadius: _constants.FLOATING_VIDEO_VIEW_STYLE.borderRadius,
+    shadowOffset: {
+      width: 0,
+      height: 2
+    },
+    shadowOpacity: 0.23,
+    shadowRadius: 2.62,
+    elevation: 4
+  },
+  videoFallback: {
+    ..._reactNative.StyleSheet.absoluteFillObject,
+    alignItems: 'center',
+    justifyContent: 'center'
+  }
+});
+//# sourceMappingURL=index.js.map

package/dist/commonjs/components/Participant/FloatingParticipantView/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","_constants","_TestIds","_icons","_FloatingView","_common","_ParticipantView","_ThemeContext","obj","__esModule","default","_extends","Object","assign","bind","target","i","arguments","length","source","key","prototype","hasOwnProperty","call","apply","CustomLocalParticipantViewVideoFallback","theme","colors","floatingParticipantsView","variants","iconSizes","useTheme","createElement","View","style","styles","videoFallback","backgroundColor","disabled","height","md","width","VideoSlash","color","static_white","FloatingParticipantView","_ref","alignment","onPressHandler","participant","ParticipantView","DefaultParticipantView","ParticipantNetworkQualityIndicator","ParticipantReaction","VideoRenderer","floatingAlignmentMap","FloatingViewAlignment","topLeft","topRight","bottomLeft","bottomRight","containerDimensions","setContainerDimensions","React","useState","participantViewProps","ParticipantLabel","ParticipantVideoFallback","testID","ComponentTestIds","LOCAL_PARTICIPANT","container","pointerEvents","onLayout","event","nativeEvent","layout","prev","containerHeight","containerWidth","initialAlignment","Pressable","onPress","trackType","participantViewContainer","static_grey","shadowColor","static_black","videoZOrder","exports","StyleSheet","create","margin","zIndex","Z_INDEX","IN_MIDDLE","flex","FLOATING_VIDEO_VIEW_STYLE","borderRadius","shadowOffset","shadowOpacity","shadowRadius","elevation","absoluteFillObject","alignItems","justifyContent"],"sourceRoot":"../../../../../src","sources":["components/Participant/FloatingParticipantView/index.tsx"],"mappings":"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"}

package/dist/commonjs/components/Participant/ParticipantView/ParticipantLabel.js

@@ -0,0 +1,146 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ParticipantLabel = 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 _TestIds = require("../../../constants/TestIds");
+var _constants = require("../../../constants");
+var _videoClient = require("@stream-io/video-client");
+var _ThemeContext = require("../../../contexts/ThemeContext");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+/**
+ * Props for the ParticipantLabel component.
+ */
+
+/**
+ * This component is used to display the participant label that contains the participant name, video/audio mute/unmute status.
+ */
+const ParticipantLabel = _ref => {
+  let {
+    participant,
+    trackType
+  } = _ref;
+  const {
+    theme: {
+      colors,
+      typefaces,
+      variants: {
+        iconSizes
+      },
+      participantLabel: {
+        container,
+        userNameLabel,
+        audioMutedIconContainer,
+        videoMutedIconContainer,
+        pinIconContainer,
+        screenShareIconContainer
+      }
+    }
+  } = (0, _ThemeContext.useTheme)();
+  const {
+    name,
+    userId,
+    pin,
+    publishedTracks,
+    sessionId,
+    isLocalParticipant
+  } = participant;
+  const call = (0, _videoReactBindings.useCall)();
+  const {
+    t
+  } = (0, _videoReactBindings.useI18n)();
+  const participantName = name ?? userId;
+  const participantLabel = isLocalParticipant ? t('You') : participantName;
+  const isPinningEnabled = pin === null || pin === void 0 ? void 0 : pin.isLocalPin;
+  const isAudioMuted = !publishedTracks.includes(_videoClient.SfuModels.TrackType.AUDIO);
+  const isVideoMuted = !publishedTracks.includes(_videoClient.SfuModels.TrackType.VIDEO);
+  const unPinParticipantHandler = () => {
+    call === null || call === void 0 || call.unpin(sessionId);
+  };
+  if (trackType === 'screenShareTrack') {
+    return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+      style: [styles.container, {
+        backgroundColor: colors.static_overlay
+      }, container],
+      testID: _TestIds.ComponentTestIds.PARTICIPANT_SCREEN_SHARING
+    }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+      style: [styles.screenShareIconContainer, {
+        height: iconSizes.md,
+        width: iconSizes.md
+      }, screenShareIconContainer]
+    }, /*#__PURE__*/_react.default.createElement(_icons.ScreenShare, {
+      color: colors.static_white
+    })), /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+      style: [styles.userNameLabel, {
+        color: colors.static_white
+      }, typefaces.caption, userNameLabel],
+      numberOfLines: 1
+    }, t('{{ userName }} is sharing their screen', {
+      userName: participantLabel
+    })));
+  }
+  return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: [styles.container, {
+      backgroundColor: colors.static_overlay
+    }, container]
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+    style: [styles.userNameLabel, {
+      color: colors.static_white
+    }, typefaces.caption, userNameLabel],
+    numberOfLines: 1
+  }, participantLabel), isAudioMuted && /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: [styles.audioMutedIconContainer, {
+      height: iconSizes.xs,
+      width: iconSizes.xs
+    }, audioMutedIconContainer]
+  }, /*#__PURE__*/_react.default.createElement(_icons.MicOff, {
+    color: colors.error
+  })), isVideoMuted && /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: [styles.videoMutedIconContainer, {
+      height: iconSizes.xs,
+      width: iconSizes.xs
+    }, videoMutedIconContainer]
+  }, /*#__PURE__*/_react.default.createElement(_icons.VideoSlash, {
+    color: colors.error
+  })), isPinningEnabled && /*#__PURE__*/_react.default.createElement(_reactNative.Pressable, {
+    style: [styles.pinIconContainer, {
+      height: iconSizes.xs,
+      width: iconSizes.xs
+    }, pinIconContainer],
+    onPress: unPinParticipantHandler
+  }, /*#__PURE__*/_react.default.createElement(_icons.PinVertical, {
+    color: colors.static_white
+  })));
+};
+exports.ParticipantLabel = ParticipantLabel;
+const styles = _reactNative.StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    padding: 8,
+    borderRadius: 5,
+    flexShrink: 1,
+    zIndex: _constants.Z_INDEX.IN_FRONT
+  },
+  userNameLabel: {
+    flexShrink: 1
+  },
+  screenShareIconContainer: {
+    marginRight: 8
+  },
+  audioMutedIconContainer: {
+    marginLeft: 4
+  },
+  videoMutedIconContainer: {
+    marginLeft: 4
+  },
+  pinIconContainer: {
+    marginLeft: 4
+  }
+});
+//# sourceMappingURL=ParticipantLabel.js.map

package/dist/commonjs/components/Participant/ParticipantView/ParticipantLabel.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","_icons","_videoReactBindings","_TestIds","_constants","_videoClient","_ThemeContext","obj","__esModule","default","ParticipantLabel","_ref","participant","trackType","theme","colors","typefaces","variants","iconSizes","participantLabel","container","userNameLabel","audioMutedIconContainer","videoMutedIconContainer","pinIconContainer","screenShareIconContainer","useTheme","name","userId","pin","publishedTracks","sessionId","isLocalParticipant","call","useCall","t","useI18n","participantName","isPinningEnabled","isLocalPin","isAudioMuted","includes","SfuModels","TrackType","AUDIO","isVideoMuted","VIDEO","unPinParticipantHandler","unpin","createElement","View","style","styles","backgroundColor","static_overlay","testID","ComponentTestIds","PARTICIPANT_SCREEN_SHARING","height","md","width","ScreenShare","color","static_white","Text","caption","numberOfLines","userName","xs","MicOff","error","VideoSlash","Pressable","onPress","PinVertical","exports","StyleSheet","create","flexDirection","alignItems","padding","borderRadius","flexShrink","zIndex","Z_INDEX","IN_FRONT","marginRight","marginLeft"],"sourceRoot":"../../../../../src","sources":["components/Participant/ParticipantView/ParticipantLabel.tsx"],"mappings":"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"}

package/dist/commonjs/components/Participant/ParticipantView/ParticipantNetworkQualityIndicator.js

@@ -0,0 +1,98 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ParticipantNetworkQualityIndicator = void 0;
+var _reactNative = require("react-native");
+var _reactNativeSvg = require("react-native-svg");
+var _videoClient = require("@stream-io/video-client");
+var _react = _interopRequireDefault(require("react"));
+var _constants = require("../../../constants");
+var _ThemeContext = require("../../../contexts/ThemeContext");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+/**
+ * Props for the NetworkQualityIndicator component.
+ */
+
+const useConnectionQualitySignalColors = participant => {
+  const {
+    theme: {
+      colors
+    }
+  } = (0, _ThemeContext.useTheme)();
+  const {
+    connectionQuality
+  } = participant;
+  if (!connectionQuality) {
+    return null;
+  }
+  switch (connectionQuality) {
+    case _videoClient.SfuModels.ConnectionQuality.EXCELLENT:
+      return [colors.primary, colors.primary, colors.primary];
+    case _videoClient.SfuModels.ConnectionQuality.GOOD:
+      return [colors.primary, colors.primary, colors.static_white];
+    case _videoClient.SfuModels.ConnectionQuality.POOR:
+      return [colors.error, colors.static_white, colors.static_white];
+    default:
+      return null;
+  }
+};
+const ParticipantNetworkQualityIndicator = _ref => {
+  let {
+    participant
+  } = _ref;
+  const {
+    theme: {
+      colors,
+      variants: {
+        iconSizes
+      },
+      participantNetworkQualityIndicator
+    }
+  } = (0, _ThemeContext.useTheme)();
+  const connectionQualityColors = useConnectionQualitySignalColors(participant);
+  if (!connectionQualityColors) {
+    return null;
+  }
+  return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: [styles.container, {
+      backgroundColor: colors.static_overlay,
+      height: iconSizes.lg,
+      width: iconSizes.lg
+    }, participantNetworkQualityIndicator.container]
+  }, /*#__PURE__*/_react.default.createElement(_reactNativeSvg.Svg, {
+    viewBox: "0 0 34 34",
+    fill: 'none'
+  }, /*#__PURE__*/_react.default.createElement(_reactNativeSvg.Path, {
+    d: "M 9.97559 22.3379 L 9.97559 19.616",
+    stroke: connectionQualityColors[0],
+    strokeWidth: 3,
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    fill: connectionQualityColors[0]
+  }), /*#__PURE__*/_react.default.createElement(_reactNativeSvg.Path, {
+    d: "M 16.7808 22.3379 L 16.7808 15.5331",
+    stroke: connectionQualityColors[1],
+    strokeWidth: 3,
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    fill: connectionQualityColors[1]
+  }), /*#__PURE__*/_react.default.createElement(_reactNativeSvg.Path, {
+    d: "M 23.5854 22.3379 L 23.5854 11.4502",
+    stroke: connectionQualityColors[2],
+    strokeWidth: 3,
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    fill: connectionQualityColors[2]
+  })));
+};
+exports.ParticipantNetworkQualityIndicator = ParticipantNetworkQualityIndicator;
+const styles = _reactNative.StyleSheet.create({
+  container: {
+    zIndex: _constants.Z_INDEX.IN_FRONT,
+    alignSelf: 'flex-end',
+    borderRadius: 5
+  }
+});
+//# sourceMappingURL=ParticipantNetworkQualityIndicator.js.map

package/dist/commonjs/components/Participant/ParticipantView/ParticipantNetworkQualityIndicator.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_reactNative","require","_reactNativeSvg","_videoClient","_react","_interopRequireDefault","_constants","_ThemeContext","obj","__esModule","default","useConnectionQualitySignalColors","participant","theme","colors","useTheme","connectionQuality","SfuModels","ConnectionQuality","EXCELLENT","primary","GOOD","static_white","POOR","error","ParticipantNetworkQualityIndicator","_ref","variants","iconSizes","participantNetworkQualityIndicator","connectionQualityColors","createElement","View","style","styles","container","backgroundColor","static_overlay","height","lg","width","Svg","viewBox","fill","Path","d","stroke","strokeWidth","strokeLinecap","strokeLinejoin","exports","StyleSheet","create","zIndex","Z_INDEX","IN_FRONT","alignSelf","borderRadius"],"sourceRoot":"../../../../../src","sources":["components/Participant/ParticipantView/ParticipantNetworkQualityIndicator.tsx"],"mappings":"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"}

package/dist/commonjs/components/Participant/ParticipantView/ParticipantReaction.js

@@ -0,0 +1,83 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ParticipantReaction = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _videoReactBindings = require("@stream-io/video-react-bindings");
+var _utils = require("../../../utils");
+var _constants = require("../../../constants");
+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; }
+/**
+ * Props for the ParticipantReaction component.
+ */
+
+/**
+ * This component is used to display the current participant reaction.
+ */
+const ParticipantReaction = _ref => {
+  let {
+    participant,
+    hideAfterTimeoutInMs = 5500
+  } = _ref;
+  const {
+    supportedReactions
+  } = _utils.StreamVideoRN.getConfig();
+  const {
+    reaction,
+    sessionId
+  } = participant;
+  const call = (0, _videoReactBindings.useCall)();
+  const {
+    theme: {
+      typefaces,
+      variants: {
+        iconSizes
+      },
+      participantReaction
+    }
+  } = (0, _ThemeContext.useTheme)();
+  const [isShowing, setIsShowing] = (0, _react.useState)(false);
+  (0, _react.useEffect)(() => {
+    let timeoutId;
+    if (call) {
+      setIsShowing(true);
+      timeoutId = setTimeout(() => {
+        setIsShowing(false);
+        call.resetReaction(sessionId);
+      }, hideAfterTimeoutInMs);
+    }
+    return () => {
+      clearTimeout(timeoutId);
+    };
+  }, [call, hideAfterTimeoutInMs, sessionId, reaction]);
+  const currentReaction = reaction && supportedReactions.find(supportedReaction => supportedReaction.emoji_code === reaction.emoji_code);
+  let component;
+  if (isShowing) {
+    if (typeof (currentReaction === null || currentReaction === void 0 ? void 0 : currentReaction.icon) !== 'string') {
+      component = currentReaction === null || currentReaction === void 0 ? void 0 : currentReaction.icon;
+    } else {
+      component = /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+        style: [participantReaction.reaction, typefaces.heading6]
+      }, currentReaction.icon);
+    }
+  }
+  return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: [styles.container, {
+      height: iconSizes.md,
+      width: iconSizes.md
+    }, participantReaction.container]
+  }, component);
+};
+exports.ParticipantReaction = ParticipantReaction;
+const styles = _reactNative.StyleSheet.create({
+  container: {
+    alignSelf: 'flex-start',
+    zIndex: _constants.Z_INDEX.IN_FRONT
+  }
+});
+//# sourceMappingURL=ParticipantReaction.js.map

package/dist/commonjs/components/Participant/ParticipantView/ParticipantReaction.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_videoReactBindings","_utils","_constants","_ThemeContext","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","ParticipantReaction","_ref","participant","hideAfterTimeoutInMs","supportedReactions","StreamVideoRN","getConfig","reaction","sessionId","useCall","theme","typefaces","variants","iconSizes","participantReaction","useTheme","isShowing","setIsShowing","useState","useEffect","timeoutId","setTimeout","resetReaction","clearTimeout","currentReaction","find","supportedReaction","emoji_code","component","icon","createElement","Text","style","heading6","View","styles","container","height","md","width","exports","StyleSheet","create","alignSelf","zIndex","Z_INDEX","IN_FRONT"],"sourceRoot":"../../../../../src","sources":["components/Participant/ParticipantView/ParticipantReaction.tsx"],"mappings":"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"}