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

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

@@ -0,0 +1,63 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ParticipantVideoFallback = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactNative = require("react-native");
+var _utility = require("../../utility");
+var _ThemeContext = require("../../../contexts/ThemeContext");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+/**
+ * Props for the ParticipantVideoFallback component.
+ */
+
+/**
+ * This component is used to customize the video fallback of the participant, when the video is disabled.
+ */
+const ParticipantVideoFallback = _ref => {
+  let {
+    participant
+  } = _ref;
+  const {
+    theme: {
+      colors,
+      typefaces,
+      participantVideoFallback
+    }
+  } = (0, _ThemeContext.useTheme)();
+  const {
+    name,
+    image,
+    userId
+  } = participant;
+  const participantLabel = name ?? userId;
+
+  // Display the Participant name/user id if the image isn't present.
+  return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: [styles.container, {
+      backgroundColor: colors.static_grey
+    }, participantVideoFallback.container]
+  }, !image ? /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+    style: [{
+      color: colors.static_white
+    }, typefaces.bodyBold, participantVideoFallback.label]
+  }, participantLabel) : /*#__PURE__*/_react.default.createElement(_utility.Avatar, {
+    participant: participant,
+    style: {
+      container: participantVideoFallback.avatarContainer,
+      image: participantVideoFallback.avatarImage,
+      text: participantVideoFallback.avatarText
+    }
+  }));
+};
+exports.ParticipantVideoFallback = ParticipantVideoFallback;
+const styles = _reactNative.StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    ..._reactNative.StyleSheet.absoluteFillObject
+  }
+});
+//# sourceMappingURL=ParticipantVideoFallback.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","_utility","_ThemeContext","obj","__esModule","default","ParticipantVideoFallback","_ref","participant","theme","colors","typefaces","participantVideoFallback","useTheme","name","image","userId","participantLabel","createElement","View","style","styles","container","backgroundColor","static_grey","Text","color","static_white","bodyBold","label","Avatar","avatarContainer","avatarImage","text","avatarText","exports","StyleSheet","create","alignItems","justifyContent","absoluteFillObject"],"sourceRoot":"../../../../../src","sources":["components/Participant/ParticipantView/ParticipantVideoFallback.tsx"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AACA,IAAAE,QAAA,GAAAF,OAAA;AAEA,IAAAG,aAAA,GAAAH,OAAA;AAA0D,SAAAD,uBAAAK,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAE1D;AACA;AACA;;AAMA;AACA;AACA;AACO,MAAMG,wBAAwB,GAAGC,IAAA,IAEH;EAAA,IAFI;IACvCC;EAC6B,CAAC,GAAAD,IAAA;EAC9B,MAAM;IACJE,KAAK,EAAE;MAAEC,MAAM;MAAEC,SAAS;MAAEC;IAAyB;EACvD,CAAC,GAAG,IAAAC,sBAAQ,EAAC,CAAC;EACd,MAAM;IAAEC,IAAI;IAAEC,KAAK;IAAEC;EAAO,CAAC,GAAGR,WAAW;EAC3C,MAAMS,gBAAgB,GAAGH,IAAI,IAAIE,MAAM;;EAEvC;EACA,oBACEnB,MAAA,CAAAQ,OAAA,CAAAa,aAAA,CAAClB,YAAA,CAAAmB,IAAI;IACHC,KAAK,EAAE,CACLC,MAAM,CAACC,SAAS,EAChB;MACEC,eAAe,EAAEb,MAAM,CAACc;IAC1B,CAAC,EACDZ,wBAAwB,CAACU,SAAS;EAClC,GAED,CAACP,KAAK,gBACLlB,MAAA,CAAAQ,OAAA,CAAAa,aAAA,CAAClB,YAAA,CAAAyB,IAAI;IACHL,KAAK,EAAE,CACL;MACEM,KAAK,EAAEhB,MAAM,CAACiB;IAChB,CAAC,EACDhB,SAAS,CAACiB,QAAQ,EAClBhB,wBAAwB,CAACiB,KAAK;EAC9B,GAEDZ,gBACG,CAAC,gBAEPpB,MAAA,CAAAQ,OAAA,CAAAa,aAAA,CAACjB,QAAA,CAAA6B,MAAM;IACLtB,WAAW,EAAEA,WAAY;IACzBY,KAAK,EAAE;MACLE,SAAS,EAAEV,wBAAwB,CAACmB,eAAe;MACnDhB,KAAK,EAAEH,wBAAwB,CAACoB,WAAW;MAC3CC,IAAI,EAAErB,wBAAwB,CAACsB;IACjC;EAAE,CACH,CAEC,CAAC;AAEX,CAAC;AAACC,OAAA,CAAA7B,wBAAA,GAAAA,wBAAA;AAEF,MAAMe,MAAM,GAAGe,uBAAU,CAACC,MAAM,CAAC;EAC/Bf,SAAS,EAAE;IACTgB,UAAU,EAAE,QAAQ;IACpBC,cAAc,EAAE,QAAQ;IACxB,GAAGH,uBAAU,CAACI;EAChB;AACF,CAAC,CAAC"}

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

@@ -0,0 +1,90 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ParticipantView = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactNative = require("react-native");
+var _ParticipantNetworkQualityIndicator = require("./ParticipantNetworkQualityIndicator");
+var _ParticipantReaction = require("./ParticipantReaction");
+var _ParticipantLabel = require("./ParticipantLabel");
+var _ParticipantVideoFallback = require("./ParticipantVideoFallback");
+var _VideoRenderer = require("./VideoRenderer");
+var _ThemeContext = require("../../../contexts/ThemeContext");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+/**
+ * Props to be passed for the Participant component.
+ */
+
+/**
+ * A component that renders the participants' video track or screenShare track
+ * and additional info. By an absence of a video track or when isVisible is truthy,
+ * only an avatar and audio track will be rendered.
+ */
+const ParticipantView = _ref => {
+  let {
+    participant,
+    trackType = 'videoTrack',
+    isVisible = true,
+    style,
+    ParticipantLabel = _ParticipantLabel.ParticipantLabel,
+    ParticipantReaction = _ParticipantReaction.ParticipantReaction,
+    VideoRenderer = _VideoRenderer.VideoRenderer,
+    ParticipantNetworkQualityIndicator = _ParticipantNetworkQualityIndicator.ParticipantNetworkQualityIndicator,
+    ParticipantVideoFallback = _ParticipantVideoFallback.ParticipantVideoFallback,
+    videoZOrder = 0
+  } = _ref;
+  const {
+    theme: {
+      colors,
+      participantView
+    }
+  } = (0, _ThemeContext.useTheme)();
+  const {
+    isSpeaking,
+    userId
+  } = participant;
+  const isScreenSharing = trackType === 'screenShareTrack';
+  const applySpeakerStyle = isSpeaking && !isScreenSharing;
+  const speakerStyle = applySpeakerStyle && [styles.highligtedContainer, {
+    borderColor: colors.primary
+  }, participantView.highligtedContainer];
+  return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: [styles.container, style, speakerStyle],
+    testID: isSpeaking ? `participant-${userId}-is-speaking` : `participant-${userId}-is-not-speaking`
+  }, ParticipantReaction && /*#__PURE__*/_react.default.createElement(ParticipantReaction, {
+    participant: participant
+  }), VideoRenderer && /*#__PURE__*/_react.default.createElement(VideoRenderer, {
+    isVisible: isVisible,
+    participant: participant,
+    trackType: trackType,
+    ParticipantVideoFallback: ParticipantVideoFallback,
+    videoZOrder: videoZOrder
+  }), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: [styles.footerContainer, participantView.footerContainer]
+  }, ParticipantLabel && /*#__PURE__*/_react.default.createElement(ParticipantLabel, {
+    participant: participant,
+    trackType: trackType
+  }), ParticipantNetworkQualityIndicator && /*#__PURE__*/_react.default.createElement(ParticipantNetworkQualityIndicator, {
+    participant: participant
+  })));
+};
+exports.ParticipantView = ParticipantView;
+const styles = _reactNative.StyleSheet.create({
+  container: {
+    justifyContent: 'space-between',
+    padding: 4,
+    overflow: 'hidden',
+    margin: 2
+  },
+  footerContainer: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center'
+  },
+  highligtedContainer: {
+    borderWidth: 2
+  }
+});
+//# sourceMappingURL=ParticipantView.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","_ParticipantNetworkQualityIndicator","_ParticipantReaction","_ParticipantLabel","_ParticipantVideoFallback","_VideoRenderer","_ThemeContext","obj","__esModule","default","ParticipantView","_ref","participant","trackType","isVisible","style","ParticipantLabel","DefaultParticipantLabel","ParticipantReaction","DefaultParticipantReaction","VideoRenderer","DefaultVideoRenderer","ParticipantNetworkQualityIndicator","DefaultParticipantNetworkQualityIndicator","ParticipantVideoFallback","DefaultParticipantVideoFallback","videoZOrder","theme","colors","participantView","useTheme","isSpeaking","userId","isScreenSharing","applySpeakerStyle","speakerStyle","styles","highligtedContainer","borderColor","primary","createElement","View","container","testID","footerContainer","exports","StyleSheet","create","justifyContent","padding","overflow","margin","flexDirection","alignItems","borderWidth"],"sourceRoot":"../../../../../src","sources":["components/Participant/ParticipantView/ParticipantView.tsx"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AAKA,IAAAE,mCAAA,GAAAF,OAAA;AAIA,IAAAG,oBAAA,GAAAH,OAAA;AAIA,IAAAI,iBAAA,GAAAJ,OAAA;AAIA,IAAAK,yBAAA,GAAAL,OAAA;AAIA,IAAAM,cAAA,GAAAN,OAAA;AAIA,IAAAO,aAAA,GAAAP,OAAA;AAA0D,SAAAD,uBAAAS,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AA2B1D;AACA;AACA;;AA+BA;AACA;AACA;AACA;AACA;AACO,MAAMG,eAAe,GAAGC,IAAA,IAWH;EAAA,IAXI;IAC9BC,WAAW;IACXC,SAAS,GAAG,YAAY;IACxBC,SAAS,GAAG,IAAI;IAChBC,KAAK;IACLC,gBAAgB,GAAGC,kCAAuB;IAC1CC,mBAAmB,GAAGC,wCAA0B;IAChDC,aAAa,GAAGC,4BAAoB;IACpCC,kCAAkC,GAAGC,sEAAyC;IAC9EC,wBAAwB,GAAGC,kDAA+B;IAC1DC,WAAW,GAAG;EACM,CAAC,GAAAf,IAAA;EACrB,MAAM;IACJgB,KAAK,EAAE;MAAEC,MAAM;MAAEC;IAAgB;EACnC,CAAC,GAAG,IAAAC,sBAAQ,EAAC,CAAC;EACd,MAAM;IAAEC,UAAU;IAAEC;EAAO,CAAC,GAAGpB,WAAW;EAC1C,MAAMqB,eAAe,GAAGpB,SAAS,KAAK,kBAAkB;EACxD,MAAMqB,iBAAiB,GAAGH,UAAU,IAAI,CAACE,eAAe;EACxD,MAAME,YAAY,GAAGD,iBAAiB,IAAI,CACxCE,MAAM,CAACC,mBAAmB,EAC1B;IACEC,WAAW,EAAEV,MAAM,CAACW;EACtB,CAAC,EACDV,eAAe,CAACQ,mBAAmB,CACpC;EAED,oBACExC,MAAA,CAAAY,OAAA,CAAA+B,aAAA,CAACxC,YAAA,CAAAyC,IAAI;IACH1B,KAAK,EAAE,CAACqB,MAAM,CAACM,SAAS,EAAE3B,KAAK,EAAEoB,YAAY,CAAE;IAC/CQ,MAAM,EACJZ,UAAU,GACL,eAAcC,MAAO,cAAa,GAClC,eAAcA,MAAO;EAC3B,GAEAd,mBAAmB,iBAAIrB,MAAA,CAAAY,OAAA,CAAA+B,aAAA,CAACtB,mBAAmB;IAACN,WAAW,EAAEA;EAAY,CAAE,CAAC,EACxEQ,aAAa,iBACZvB,MAAA,CAAAY,OAAA,CAAA+B,aAAA,CAACpB,aAAa;IACZN,SAAS,EAAEA,SAAU;IACrBF,WAAW,EAAEA,WAAY;IACzBC,SAAS,EAAEA,SAAU;IACrBW,wBAAwB,EAAEA,wBAAyB;IACnDE,WAAW,EAAEA;EAAY,CAC1B,CACF,eACD7B,MAAA,CAAAY,OAAA,CAAA+B,aAAA,CAACxC,YAAA,CAAAyC,IAAI;IAAC1B,KAAK,EAAE,CAACqB,MAAM,CAACQ,eAAe,EAAEf,eAAe,CAACe,eAAe;EAAE,GACpE5B,gBAAgB,iBACfnB,MAAA,CAAAY,OAAA,CAAA+B,aAAA,CAACxB,gBAAgB;IAACJ,WAAW,EAAEA,WAAY;IAACC,SAAS,EAAEA;EAAU,CAAE,CACpE,EACAS,kCAAkC,iBACjCzB,MAAA,CAAAY,OAAA,CAAA+B,aAAA,CAAClB,kCAAkC;IAACV,WAAW,EAAEA;EAAY,CAAE,CAE7D,CACF,CAAC;AAEX,CAAC;AAACiC,OAAA,CAAAnC,eAAA,GAAAA,eAAA;AAEF,MAAM0B,MAAM,GAAGU,uBAAU,CAACC,MAAM,CAAC;EAC/BL,SAAS,EAAE;IACTM,cAAc,EAAE,eAAe;IAC/BC,OAAO,EAAE,CAAC;IACVC,QAAQ,EAAE,QAAQ;IAClBC,MAAM,EAAE;EACV,CAAC;EACDP,eAAe,EAAE;IACfQ,aAAa,EAAE,KAAK;IACpBJ,cAAc,EAAE,eAAe;IAC/BK,UAAU,EAAE;EACd,CAAC;EACDhB,mBAAmB,EAAE;IACnBiB,WAAW,EAAE;EACf;AACF,CAAC,CAAC"}

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

@@ -0,0 +1,193 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.VideoRenderer = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _reactNativeWebrtc = require("@stream-io/react-native-webrtc");
+var _videoClient = require("@stream-io/video-client");
+var _videoReactBindings = require("@stream-io/video-react-bindings");
+var _ParticipantVideoFallback = require("./ParticipantVideoFallback");
+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 DEFAULT_VIEWPORT_VISIBILITY_STATE = {
+  videoTrack: _videoClient.VisibilityState.UNKNOWN,
+  screenShareTrack: _videoClient.VisibilityState.UNKNOWN
+};
+
+/**
+ * Props for the VideoRenderer component.
+ */
+
+/**
+ * This component is used to display the video of the participant and fallback when the video is muted.
+ *
+ * It internally used `RTCView` to render video stream.
+ */
+const VideoRenderer = _ref => {
+  let {
+    trackType = 'videoTrack',
+    participant,
+    isVisible = true,
+    ParticipantVideoFallback = _ParticipantVideoFallback.ParticipantVideoFallback,
+    videoZOrder = 0
+  } = _ref;
+  const {
+    theme: {
+      videoRenderer
+    }
+  } = (0, _ThemeContext.useTheme)();
+  const call = (0, _videoReactBindings.useCall)();
+  const {
+    useCallCallingState,
+    useCameraState
+  } = (0, _videoReactBindings.useCallStateHooks)();
+  const callingState = useCallCallingState();
+  const pendingVideoLayoutRef = (0, _react.useRef)();
+  const subscribedVideoLayoutRef = (0, _react.useRef)();
+  const {
+    direction
+  } = useCameraState();
+  const {
+    isLocalParticipant,
+    sessionId,
+    publishedTracks,
+    viewportVisibilityState,
+    videoStream,
+    screenShareStream
+  } = participant;
+  const isScreenSharing = trackType === 'screenShareTrack';
+  const isPublishingVideoTrack = publishedTracks.includes(isScreenSharing ? _videoClient.SfuModels.TrackType.SCREEN_SHARE : _videoClient.SfuModels.TrackType.VIDEO);
+  const hasJoinedCall = callingState === _videoClient.CallingState.JOINED;
+  const canShowVideo = !!videoStream && isVisible && isPublishingVideoTrack;
+  const videoStreamToRender = isScreenSharing ? screenShareStream : videoStream;
+  const mirror = isLocalParticipant && direction === 'front';
+
+  /**
+   * This effect updates the participant's viewportVisibilityState
+   * Additionally makes sure that when this view becomes visible again, the layout to subscribe is known
+   */
+  (0, _react.useEffect)(() => {
+    if (!call) {
+      return;
+    }
+    if (!isVisible) {
+      if ((viewportVisibilityState === null || viewportVisibilityState === void 0 ? void 0 : viewportVisibilityState.videoTrack) !== _videoClient.VisibilityState.VISIBLE) {
+        call.state.updateParticipant(sessionId, p => ({
+          ...p,
+          viewportVisibilityState: {
+            ...(p.viewportVisibilityState ?? DEFAULT_VIEWPORT_VISIBILITY_STATE),
+            videoTrack: _videoClient.VisibilityState.VISIBLE
+          }
+        }));
+      }
+    } else {
+      if ((viewportVisibilityState === null || viewportVisibilityState === void 0 ? void 0 : viewportVisibilityState.videoTrack) !== _videoClient.VisibilityState.INVISIBLE) {
+        call.state.updateParticipant(sessionId, p => ({
+          ...p,
+          viewportVisibilityState: {
+            ...(p.viewportVisibilityState ?? DEFAULT_VIEWPORT_VISIBILITY_STATE),
+            videoTrack: _videoClient.VisibilityState.INVISIBLE
+          }
+        }));
+      }
+      if (subscribedVideoLayoutRef.current) {
+        // when video is enabled again, we want to use the last subscribed dimension to resubscribe
+        pendingVideoLayoutRef.current = subscribedVideoLayoutRef.current;
+        subscribedVideoLayoutRef.current = undefined;
+      }
+    }
+  }, [sessionId, viewportVisibilityState, isVisible, call]);
+  (0, _react.useEffect)(() => {
+    if (!hasJoinedCall && subscribedVideoLayoutRef.current) {
+      // when call is joined again, we want to use the last subscribed dimension to resubscribe
+      pendingVideoLayoutRef.current = subscribedVideoLayoutRef.current;
+      subscribedVideoLayoutRef.current = undefined;
+    }
+  }, [hasJoinedCall]);
+
+  /**
+   * This effect updates the subscription either
+   * 1. when video tracks are published and was unpublished before
+   * 2. when the view's visibility changes
+   * 3. when call was rejoined
+   */
+  (0, _react.useEffect)(() => {
+    // NOTE: We only want to update the subscription if the pendingVideoLayoutRef is set
+    const updateIsNeeded = pendingVideoLayoutRef.current;
+    if (!updateIsNeeded || !call || !isPublishingVideoTrack || !hasJoinedCall) {
+      return;
+    }
+
+    // NOTE: When the view is not visible, we want to subscribe to audio only.
+    // We unsubscribe their video by setting the dimension to undefined
+    const dimension = isVisible ? pendingVideoLayoutRef.current : undefined;
+    call.updateSubscriptionsPartial(trackType, {
+      [sessionId]: {
+        dimension
+      }
+    });
+    if (dimension) {
+      subscribedVideoLayoutRef.current = pendingVideoLayoutRef.current;
+      pendingVideoLayoutRef.current = undefined;
+    }
+  }, [call, isPublishingVideoTrack, trackType, isVisible, sessionId, hasJoinedCall]);
+  (0, _react.useEffect)(() => {
+    return () => {
+      subscribedVideoLayoutRef.current = undefined;
+      pendingVideoLayoutRef.current = undefined;
+    };
+  }, [trackType, sessionId]);
+  const onLayout = event => {
+    var _subscribedVideoLayou, _subscribedVideoLayou2;
+    const dimension = {
+      width: Math.trunc(event.nativeEvent.layout.width),
+      height: Math.trunc(event.nativeEvent.layout.height)
+    };
+
+    // NOTE: If the participant hasn't published a video track yet,
+    // or the view is not viewable, we store the dimensions and handle it
+    // when the track is published or the video is enabled.
+    if (!call || !isPublishingVideoTrack || !isVisible || !hasJoinedCall) {
+      pendingVideoLayoutRef.current = dimension;
+      return;
+    }
+
+    // NOTE: We don't want to update the subscription if the dimension hasn't changed
+    if (((_subscribedVideoLayou = subscribedVideoLayoutRef.current) === null || _subscribedVideoLayou === void 0 ? void 0 : _subscribedVideoLayou.width) === dimension.width && ((_subscribedVideoLayou2 = subscribedVideoLayoutRef.current) === null || _subscribedVideoLayou2 === void 0 ? void 0 : _subscribedVideoLayou2.height) === dimension.height) {
+      return;
+    }
+    call.updateSubscriptionsPartial(trackType, {
+      [sessionId]: {
+        dimension
+      }
+    });
+    subscribedVideoLayoutRef.current = dimension;
+    pendingVideoLayoutRef.current = undefined;
+  };
+  return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    onLayout: onLayout,
+    style: [styles.container, videoRenderer.container]
+  }, canShowVideo && videoStreamToRender ? /*#__PURE__*/_react.default.createElement(_reactNativeWebrtc.RTCView, {
+    style: [styles.videoStream, videoRenderer.videoStream],
+    streamURL: videoStreamToRender.toURL(),
+    mirror: mirror,
+    objectFit: isScreenSharing ? 'contain' : 'cover',
+    zOrder: videoZOrder
+  }) : ParticipantVideoFallback && /*#__PURE__*/_react.default.createElement(ParticipantVideoFallback, {
+    participant: participant
+  }));
+};
+exports.VideoRenderer = VideoRenderer;
+const styles = _reactNative.StyleSheet.create({
+  container: {
+    ..._reactNative.StyleSheet.absoluteFillObject
+  },
+  videoStream: {
+    ..._reactNative.StyleSheet.absoluteFillObject
+  }
+});
+//# sourceMappingURL=VideoRenderer.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_reactNativeWebrtc","_videoClient","_videoReactBindings","_ParticipantVideoFallback","_ThemeContext","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","DEFAULT_VIEWPORT_VISIBILITY_STATE","videoTrack","VisibilityState","UNKNOWN","screenShareTrack","VideoRenderer","_ref","trackType","participant","isVisible","ParticipantVideoFallback","DefaultParticipantVideoFallback","videoZOrder","theme","videoRenderer","useTheme","useCall","useCallCallingState","useCameraState","useCallStateHooks","callingState","pendingVideoLayoutRef","useRef","subscribedVideoLayoutRef","direction","isLocalParticipant","sessionId","publishedTracks","viewportVisibilityState","videoStream","screenShareStream","isScreenSharing","isPublishingVideoTrack","includes","SfuModels","TrackType","SCREEN_SHARE","VIDEO","hasJoinedCall","CallingState","JOINED","canShowVideo","videoStreamToRender","mirror","useEffect","VISIBLE","state","updateParticipant","p","INVISIBLE","current","undefined","updateIsNeeded","dimension","updateSubscriptionsPartial","onLayout","event","_subscribedVideoLayou","_subscribedVideoLayou2","width","Math","trunc","nativeEvent","layout","height","createElement","View","style","styles","container","RTCView","streamURL","toURL","objectFit","zOrder","exports","StyleSheet","create","absoluteFillObject"],"sourceRoot":"../../../../../src","sources":["components/Participant/ParticipantView/VideoRenderer.tsx"],"mappings":"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"}

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

@@ -0,0 +1,72 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _ParticipantLabel = require("./ParticipantLabel");
+Object.keys(_ParticipantLabel).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ParticipantLabel[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ParticipantLabel[key];
+    }
+  });
+});
+var _ParticipantReaction = require("./ParticipantReaction");
+Object.keys(_ParticipantReaction).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ParticipantReaction[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ParticipantReaction[key];
+    }
+  });
+});
+var _ParticipantVideoFallback = require("./ParticipantVideoFallback");
+Object.keys(_ParticipantVideoFallback).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ParticipantVideoFallback[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ParticipantVideoFallback[key];
+    }
+  });
+});
+var _ParticipantView = require("./ParticipantView");
+Object.keys(_ParticipantView).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ParticipantView[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ParticipantView[key];
+    }
+  });
+});
+var _ParticipantNetworkQualityIndicator = require("./ParticipantNetworkQualityIndicator");
+Object.keys(_ParticipantNetworkQualityIndicator).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ParticipantNetworkQualityIndicator[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ParticipantNetworkQualityIndicator[key];
+    }
+  });
+});
+var _VideoRenderer = require("./VideoRenderer");
+Object.keys(_VideoRenderer).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _VideoRenderer[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _VideoRenderer[key];
+    }
+  });
+});
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["_ParticipantLabel","require","Object","keys","forEach","key","exports","defineProperty","enumerable","get","_ParticipantReaction","_ParticipantVideoFallback","_ParticipantView","_ParticipantNetworkQualityIndicator","_VideoRenderer"],"sourceRoot":"../../../../../src","sources":["components/Participant/ParticipantView/index.ts"],"mappings":";;;;;AAAA,IAAAA,iBAAA,GAAAC,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAH,iBAAA,EAAAI,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAL,iBAAA,CAAAK,GAAA;EAAAH,MAAA,CAAAK,cAAA,CAAAD,OAAA,EAAAD,GAAA;IAAAG,UAAA;IAAAC,GAAA,WAAAA,CAAA;MAAA,OAAAT,iBAAA,CAAAK,GAAA;IAAA;EAAA;AAAA;AACA,IAAAK,oBAAA,GAAAT,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAO,oBAAA,EAAAN,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAK,oBAAA,CAAAL,GAAA;EAAAH,MAAA,CAAAK,cAAA,CAAAD,OAAA,EAAAD,GAAA;IAAAG,UAAA;IAAAC,GAAA,WAAAA,CAAA;MAAA,OAAAC,oBAAA,CAAAL,GAAA;IAAA;EAAA;AAAA;AACA,IAAAM,yBAAA,GAAAV,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAQ,yBAAA,EAAAP,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAM,yBAAA,CAAAN,GAAA;EAAAH,MAAA,CAAAK,cAAA,CAAAD,OAAA,EAAAD,GAAA;IAAAG,UAAA;IAAAC,GAAA,WAAAA,CAAA;MAAA,OAAAE,yBAAA,CAAAN,GAAA;IAAA;EAAA;AAAA;AACA,IAAAO,gBAAA,GAAAX,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAS,gBAAA,EAAAR,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAO,gBAAA,CAAAP,GAAA;EAAAH,MAAA,CAAAK,cAAA,CAAAD,OAAA,EAAAD,GAAA;IAAAG,UAAA;IAAAC,GAAA,WAAAA,CAAA;MAAA,OAAAG,gBAAA,CAAAP,GAAA;IAAA;EAAA;AAAA;AACA,IAAAQ,mCAAA,GAAAZ,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAU,mCAAA,EAAAT,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAQ,mCAAA,CAAAR,GAAA;EAAAH,MAAA,CAAAK,cAAA,CAAAD,OAAA,EAAAD,GAAA;IAAAG,UAAA;IAAAC,GAAA,WAAAA,CAAA;MAAA,OAAAI,mCAAA,CAAAR,GAAA;IAAA;EAAA;AAAA;AACA,IAAAS,cAAA,GAAAb,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAW,cAAA,EAAAV,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAS,cAAA,CAAAT,GAAA;EAAAH,MAAA,CAAAK,cAAA,CAAAD,OAAA,EAAAD,GAAA;IAAAG,UAAA;IAAAC,GAAA,WAAAA,CAAA;MAAA,OAAAK,cAAA,CAAAT,GAAA;IAAA;EAAA;AAAA"}

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

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

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

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

package/dist/commonjs/components/index.js

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

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

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

package/dist/commonjs/components/utility/Avatar.js

@@ -0,0 +1,77 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Avatar = void 0;
+var _reactNative = require("react-native");
+var _react = _interopRequireDefault(require("react"));
+var _utils = require("../../utils");
+var _TestIds = require("../../constants/TestIds");
+var _ThemeContext = require("../../contexts/ThemeContext");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+/**
+ * Props to be passed for the Avatar component.
+ */
+
+/**
+ * Shows either user's image or initials based on the user state and existence of
+ * their image.
+ */
+const Avatar = props => {
+  const {
+    participant: {
+      userId,
+      image,
+      name
+    },
+    size = 100,
+    style: styleProp
+  } = props;
+  const {
+    theme: {
+      avatar,
+      colors,
+      typefaces
+    }
+  } = (0, _ThemeContext.useTheme)();
+  const userDetails = name || userId;
+  const userLabel = userDetails ? (0, _utils.getInitialsOfName)(userDetails) : '?';
+  const imageUrl = image;
+  return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    testID: _TestIds.ComponentTestIds.PARTICIPANT_AVATAR,
+    style: [styles.container, {
+      borderRadius: size / 2,
+      height: size,
+      width: size
+    }, {
+      backgroundColor: colors.primary
+    }, avatar.container, styleProp === null || styleProp === void 0 ? void 0 : styleProp.container]
+  }, imageUrl ? /*#__PURE__*/_react.default.createElement(_reactNative.Image, {
+    testID: _TestIds.ImageTestIds.AVATAR,
+    source: {
+      uri: imageUrl
+    },
+    style: [styles.image, avatar.image, styleProp === null || styleProp === void 0 ? void 0 : styleProp.image]
+  }) : /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+    style: [styles.text, {
+      fontSize: size / 2,
+      color: colors.bars
+    }, typefaces.heading6, avatar.text, styleProp === null || styleProp === void 0 ? void 0 : styleProp.text],
+    numberOfLines: 1
+  }, userLabel));
+};
+exports.Avatar = Avatar;
+const styles = _reactNative.StyleSheet.create({
+  container: {
+    justifyContent: 'center',
+    overflow: 'hidden'
+  },
+  image: {
+    flex: 1
+  },
+  text: {
+    textAlign: 'center'
+  }
+});
+//# sourceMappingURL=Avatar.js.map

package/dist/commonjs/components/utility/Avatar.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_reactNative","require","_react","_interopRequireDefault","_utils","_TestIds","_ThemeContext","obj","__esModule","default","Avatar","props","participant","userId","image","name","size","style","styleProp","theme","avatar","colors","typefaces","useTheme","userDetails","userLabel","getInitialsOfName","imageUrl","createElement","View","testID","ComponentTestIds","PARTICIPANT_AVATAR","styles","container","borderRadius","height","width","backgroundColor","primary","Image","ImageTestIds","AVATAR","source","uri","Text","text","fontSize","color","bars","heading6","numberOfLines","exports","StyleSheet","create","justifyContent","overflow","flex","textAlign"],"sourceRoot":"../../../../src","sources":["components/utility/Avatar.tsx"],"mappings":";;;;;;AAAA,IAAAA,YAAA,GAAAC,OAAA;AACA,IAAAC,MAAA,GAAAC,sBAAA,CAAAF,OAAA;AAEA,IAAAG,MAAA,GAAAH,OAAA;AACA,IAAAI,QAAA,GAAAJ,OAAA;AACA,IAAAK,aAAA,GAAAL,OAAA;AAAuD,SAAAE,uBAAAI,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAGvD;AACA;AACA;;AAkCA;AACA;AACA;AACA;AACO,MAAMG,MAAM,GAAIC,KAAkB,IAAK;EAC5C,MAAM;IACJC,WAAW,EAAE;MAAEC,MAAM;MAAEC,KAAK;MAAEC;IAAK,CAAC;IACpCC,IAAI,GAAG,GAAG;IACVC,KAAK,EAAEC;EACT,CAAC,GAAGP,KAAK;EACT,MAAM;IACJQ,KAAK,EAAE;MAAEC,MAAM;MAAEC,MAAM;MAAEC;IAAU;EACrC,CAAC,GAAG,IAAAC,sBAAQ,EAAC,CAAC;EACd,MAAMC,WAAW,GAAGT,IAAI,IAAIF,MAAM;EAClC,MAAMY,SAAS,GAAGD,WAAW,GAAG,IAAAE,wBAAiB,EAACF,WAAW,CAAC,GAAG,GAAG;EAEpE,MAAMG,QAAQ,GAAGb,KAAK;EACtB,oBACEZ,MAAA,CAAAO,OAAA,CAAAmB,aAAA,CAAC5B,YAAA,CAAA6B,IAAI;IACHC,MAAM,EAAEC,yBAAgB,CAACC,kBAAmB;IAC5Cf,KAAK,EAAE,CACLgB,MAAM,CAACC,SAAS,EAChB;MACEC,YAAY,EAAEnB,IAAI,GAAG,CAAC;MACtBoB,MAAM,EAAEpB,IAAI;MACZqB,KAAK,EAAErB;IACT,CAAC,EACD;MACEsB,eAAe,EAAEjB,MAAM,CAACkB;IAC1B,CAAC,EACDnB,MAAM,CAACc,SAAS,EAChBhB,SAAS,aAATA,SAAS,uBAATA,SAAS,CAAEgB,SAAS;EACpB,GAEDP,QAAQ,gBACPzB,MAAA,CAAAO,OAAA,CAAAmB,aAAA,CAAC5B,YAAA,CAAAwC,KAAK;IACJV,MAAM,EAAEW,qBAAY,CAACC,MAAO;IAC5BC,MAAM,EAAE;MACNC,GAAG,EAAEjB;IACP,CAAE;IACFV,KAAK,EAAE,CAACgB,MAAM,CAACnB,KAAK,EAAEM,MAAM,CAACN,KAAK,EAAEI,SAAS,aAATA,SAAS,uBAATA,SAAS,CAAEJ,KAAK;EAAE,CACvD,CAAC,gBAEFZ,MAAA,CAAAO,OAAA,CAAAmB,aAAA,CAAC5B,YAAA,CAAA6C,IAAI;IACH5B,KAAK,EAAE,CACLgB,MAAM,CAACa,IAAI,EACX;MAAEC,QAAQ,EAAE/B,IAAI,GAAG,CAAC;MAAEgC,KAAK,EAAE3B,MAAM,CAAC4B;IAAK,CAAC,EAC1C3B,SAAS,CAAC4B,QAAQ,EAClB9B,MAAM,CAAC0B,IAAI,EACX5B,SAAS,aAATA,SAAS,uBAATA,SAAS,CAAE4B,IAAI,CACf;IACFK,aAAa,EAAE;EAAE,GAEhB1B,SACG,CAEJ,CAAC;AAEX,CAAC;AAAC2B,OAAA,CAAA1C,MAAA,GAAAA,MAAA;AAEF,MAAMuB,MAAM,GAAGoB,uBAAU,CAACC,MAAM,CAAC;EAC/BpB,SAAS,EAAE;IACTqB,cAAc,EAAE,QAAQ;IACxBC,QAAQ,EAAE;EACZ,CAAC;EACD1C,KAAK,EAAE;IACL2C,IAAI,EAAE;EACR,CAAC;EACDX,IAAI,EAAE;IACJY,SAAS,EAAE;EACb;AACF,CAAC,CAAC"}

package/dist/commonjs/components/utility/index.js

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

package/dist/commonjs/components/utility/index.js.map

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