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

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

@@ -0,0 +1,143 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+import React from 'react';
+import { Pressable, StyleSheet, View } from 'react-native';
+import { FLOATING_VIDEO_VIEW_STYLE, Z_INDEX } from '../../../constants';
+import { ComponentTestIds } from '../../../constants/TestIds';
+import { VideoSlash } from '../../../icons';
+import FloatingView from './FloatingView';
+import { FloatingViewAlignment } from './FloatingView/common';
+import { ParticipantView as DefaultParticipantView } from '../ParticipantView';
+import { useTheme } from '../../../contexts/ThemeContext';
+
+/**
+ * Props to be passed for the LocalVideoView component.
+ */
+
+const CustomLocalParticipantViewVideoFallback = () => {
+  const {
+    theme: {
+      colors,
+      floatingParticipantsView,
+      variants: {
+        iconSizes
+      }
+    }
+  } = useTheme();
+  return /*#__PURE__*/React.createElement(View, {
+    style: [styles.videoFallback, {
+      backgroundColor: colors.disabled
+    }, floatingParticipantsView.videoFallback]
+  }, /*#__PURE__*/React.createElement(View, {
+    style: {
+      height: iconSizes.md,
+      width: iconSizes.md
+    }
+  }, /*#__PURE__*/React.createElement(VideoSlash, {
+    color: colors.static_white
+  })));
+};
+
+/**
+ * A component to render the floating participant's video.
+ */
+export const FloatingParticipantView = _ref => {
+  let {
+    alignment = 'top-right',
+    onPressHandler,
+    participant,
+    style,
+    ParticipantView = DefaultParticipantView,
+    ParticipantNetworkQualityIndicator,
+    ParticipantReaction,
+    VideoRenderer
+  } = _ref;
+  const {
+    theme: {
+      colors,
+      floatingParticipantsView
+    }
+  } = useTheme();
+  const floatingAlignmentMap = {
+    'top-left': FloatingViewAlignment.topLeft,
+    'top-right': FloatingViewAlignment.topRight,
+    'bottom-left': FloatingViewAlignment.bottomLeft,
+    'bottom-right': FloatingViewAlignment.bottomRight
+  };
+  const [containerDimensions, setContainerDimensions] = React.useState();
+  const participantViewProps = {
+    ParticipantLabel: null,
+    ParticipantNetworkQualityIndicator,
+    ParticipantReaction,
+    ParticipantVideoFallback: CustomLocalParticipantViewVideoFallback,
+    VideoRenderer
+  };
+  if (!participant) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(View, {
+    testID: 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.createElement(FloatingView, {
+    containerHeight: containerDimensions.height,
+    containerWidth: containerDimensions.width,
+    initialAlignment: floatingAlignmentMap[alignment]
+  }, /*#__PURE__*/React.createElement(Pressable, {
+    onPress: onPressHandler
+  }, ParticipantView && /*#__PURE__*/React.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)))));
+};
+const styles = StyleSheet.create({
+  container: {
+    margin: 8,
+    // Needed to make the view on top and draggable
+    zIndex: Z_INDEX.IN_MIDDLE,
+    flex: 1
+  },
+  participantViewContainer: {
+    height: FLOATING_VIDEO_VIEW_STYLE.height,
+    width: FLOATING_VIDEO_VIEW_STYLE.width,
+    borderRadius: FLOATING_VIDEO_VIEW_STYLE.borderRadius,
+    shadowOffset: {
+      width: 0,
+      height: 2
+    },
+    shadowOpacity: 0.23,
+    shadowRadius: 2.62,
+    elevation: 4
+  },
+  videoFallback: {
+    ...StyleSheet.absoluteFillObject,
+    alignItems: 'center',
+    justifyContent: 'center'
+  }
+});
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","Pressable","StyleSheet","View","FLOATING_VIDEO_VIEW_STYLE","Z_INDEX","ComponentTestIds","VideoSlash","FloatingView","FloatingViewAlignment","ParticipantView","DefaultParticipantView","useTheme","CustomLocalParticipantViewVideoFallback","theme","colors","floatingParticipantsView","variants","iconSizes","createElement","style","styles","videoFallback","backgroundColor","disabled","height","md","width","color","static_white","FloatingParticipantView","_ref","alignment","onPressHandler","participant","ParticipantNetworkQualityIndicator","ParticipantReaction","VideoRenderer","floatingAlignmentMap","topLeft","topRight","bottomLeft","bottomRight","containerDimensions","setContainerDimensions","useState","participantViewProps","ParticipantLabel","ParticipantVideoFallback","testID","LOCAL_PARTICIPANT","container","pointerEvents","onLayout","event","nativeEvent","layout","prev","containerHeight","containerWidth","initialAlignment","onPress","_extends","trackType","participantViewContainer","static_grey","shadowColor","static_black","videoZOrder","create","margin","zIndex","IN_MIDDLE","flex","borderRadius","shadowOffset","shadowOpacity","shadowRadius","elevation","absoluteFillObject","alignItems","justifyContent"],"sourceRoot":"../../../../../src","sources":["components/Participant/FloatingParticipantView/index.tsx"],"mappings":"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"}

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

@@ -0,0 +1,139 @@
+import React from 'react';
+import { Pressable, StyleSheet, Text, View } from 'react-native';
+import { MicOff, PinVertical, ScreenShare, VideoSlash } from '../../../icons';
+import { useCall, useI18n } from '@stream-io/video-react-bindings';
+import { ComponentTestIds } from '../../../constants/TestIds';
+import { Z_INDEX } from '../../../constants';
+import { SfuModels } from '@stream-io/video-client';
+import { useTheme } from '../../../contexts/ThemeContext';
+
+/**
+ * Props for the ParticipantLabel component.
+ */
+
+/**
+ * This component is used to display the participant label that contains the participant name, video/audio mute/unmute status.
+ */
+export const ParticipantLabel = _ref => {
+  let {
+    participant,
+    trackType
+  } = _ref;
+  const {
+    theme: {
+      colors,
+      typefaces,
+      variants: {
+        iconSizes
+      },
+      participantLabel: {
+        container,
+        userNameLabel,
+        audioMutedIconContainer,
+        videoMutedIconContainer,
+        pinIconContainer,
+        screenShareIconContainer
+      }
+    }
+  } = useTheme();
+  const {
+    name,
+    userId,
+    pin,
+    publishedTracks,
+    sessionId,
+    isLocalParticipant
+  } = participant;
+  const call = useCall();
+  const {
+    t
+  } = 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(SfuModels.TrackType.AUDIO);
+  const isVideoMuted = !publishedTracks.includes(SfuModels.TrackType.VIDEO);
+  const unPinParticipantHandler = () => {
+    call === null || call === void 0 || call.unpin(sessionId);
+  };
+  if (trackType === 'screenShareTrack') {
+    return /*#__PURE__*/React.createElement(View, {
+      style: [styles.container, {
+        backgroundColor: colors.static_overlay
+      }, container],
+      testID: ComponentTestIds.PARTICIPANT_SCREEN_SHARING
+    }, /*#__PURE__*/React.createElement(View, {
+      style: [styles.screenShareIconContainer, {
+        height: iconSizes.md,
+        width: iconSizes.md
+      }, screenShareIconContainer]
+    }, /*#__PURE__*/React.createElement(ScreenShare, {
+      color: colors.static_white
+    })), /*#__PURE__*/React.createElement(Text, {
+      style: [styles.userNameLabel, {
+        color: colors.static_white
+      }, typefaces.caption, userNameLabel],
+      numberOfLines: 1
+    }, t('{{ userName }} is sharing their screen', {
+      userName: participantLabel
+    })));
+  }
+  return /*#__PURE__*/React.createElement(View, {
+    style: [styles.container, {
+      backgroundColor: colors.static_overlay
+    }, container]
+  }, /*#__PURE__*/React.createElement(Text, {
+    style: [styles.userNameLabel, {
+      color: colors.static_white
+    }, typefaces.caption, userNameLabel],
+    numberOfLines: 1
+  }, participantLabel), isAudioMuted && /*#__PURE__*/React.createElement(View, {
+    style: [styles.audioMutedIconContainer, {
+      height: iconSizes.xs,
+      width: iconSizes.xs
+    }, audioMutedIconContainer]
+  }, /*#__PURE__*/React.createElement(MicOff, {
+    color: colors.error
+  })), isVideoMuted && /*#__PURE__*/React.createElement(View, {
+    style: [styles.videoMutedIconContainer, {
+      height: iconSizes.xs,
+      width: iconSizes.xs
+    }, videoMutedIconContainer]
+  }, /*#__PURE__*/React.createElement(VideoSlash, {
+    color: colors.error
+  })), isPinningEnabled && /*#__PURE__*/React.createElement(Pressable, {
+    style: [styles.pinIconContainer, {
+      height: iconSizes.xs,
+      width: iconSizes.xs
+    }, pinIconContainer],
+    onPress: unPinParticipantHandler
+  }, /*#__PURE__*/React.createElement(PinVertical, {
+    color: colors.static_white
+  })));
+};
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    padding: 8,
+    borderRadius: 5,
+    flexShrink: 1,
+    zIndex: 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/module/components/Participant/ParticipantView/ParticipantLabel.js.map

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

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

@@ -0,0 +1,91 @@
+import { StyleSheet, View } from 'react-native';
+import { Path, Svg } from 'react-native-svg';
+import { SfuModels } from '@stream-io/video-client';
+import React from 'react';
+import { Z_INDEX } from '../../../constants';
+import { useTheme } from '../../../contexts/ThemeContext';
+
+/**
+ * Props for the NetworkQualityIndicator component.
+ */
+
+const useConnectionQualitySignalColors = participant => {
+  const {
+    theme: {
+      colors
+    }
+  } = useTheme();
+  const {
+    connectionQuality
+  } = participant;
+  if (!connectionQuality) {
+    return null;
+  }
+  switch (connectionQuality) {
+    case SfuModels.ConnectionQuality.EXCELLENT:
+      return [colors.primary, colors.primary, colors.primary];
+    case SfuModels.ConnectionQuality.GOOD:
+      return [colors.primary, colors.primary, colors.static_white];
+    case SfuModels.ConnectionQuality.POOR:
+      return [colors.error, colors.static_white, colors.static_white];
+    default:
+      return null;
+  }
+};
+export const ParticipantNetworkQualityIndicator = _ref => {
+  let {
+    participant
+  } = _ref;
+  const {
+    theme: {
+      colors,
+      variants: {
+        iconSizes
+      },
+      participantNetworkQualityIndicator
+    }
+  } = useTheme();
+  const connectionQualityColors = useConnectionQualitySignalColors(participant);
+  if (!connectionQualityColors) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(View, {
+    style: [styles.container, {
+      backgroundColor: colors.static_overlay,
+      height: iconSizes.lg,
+      width: iconSizes.lg
+    }, participantNetworkQualityIndicator.container]
+  }, /*#__PURE__*/React.createElement(Svg, {
+    viewBox: "0 0 34 34",
+    fill: 'none'
+  }, /*#__PURE__*/React.createElement(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.createElement(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.createElement(Path, {
+    d: "M 23.5854 22.3379 L 23.5854 11.4502",
+    stroke: connectionQualityColors[2],
+    strokeWidth: 3,
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    fill: connectionQualityColors[2]
+  })));
+};
+const styles = StyleSheet.create({
+  container: {
+    zIndex: Z_INDEX.IN_FRONT,
+    alignSelf: 'flex-end',
+    borderRadius: 5
+  }
+});
+//# sourceMappingURL=ParticipantNetworkQualityIndicator.js.map

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

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

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

@@ -0,0 +1,75 @@
+import React, { useEffect, useState } from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+import { useCall } from '@stream-io/video-react-bindings';
+import { StreamVideoRN } from '../../../utils';
+import { Z_INDEX } from '../../../constants';
+import { useTheme } from '../../../contexts/ThemeContext';
+
+/**
+ * Props for the ParticipantReaction component.
+ */
+
+/**
+ * This component is used to display the current participant reaction.
+ */
+export const ParticipantReaction = _ref => {
+  let {
+    participant,
+    hideAfterTimeoutInMs = 5500
+  } = _ref;
+  const {
+    supportedReactions
+  } = StreamVideoRN.getConfig();
+  const {
+    reaction,
+    sessionId
+  } = participant;
+  const call = useCall();
+  const {
+    theme: {
+      typefaces,
+      variants: {
+        iconSizes
+      },
+      participantReaction
+    }
+  } = useTheme();
+  const [isShowing, setIsShowing] = useState(false);
+  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.createElement(Text, {
+        style: [participantReaction.reaction, typefaces.heading6]
+      }, currentReaction.icon);
+    }
+  }
+  return /*#__PURE__*/React.createElement(View, {
+    style: [styles.container, {
+      height: iconSizes.md,
+      width: iconSizes.md
+    }, participantReaction.container]
+  }, component);
+};
+const styles = StyleSheet.create({
+  container: {
+    alignSelf: 'flex-start',
+    zIndex: Z_INDEX.IN_FRONT
+  }
+});
+//# sourceMappingURL=ParticipantReaction.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","useEffect","useState","StyleSheet","Text","View","useCall","StreamVideoRN","Z_INDEX","useTheme","ParticipantReaction","_ref","participant","hideAfterTimeoutInMs","supportedReactions","getConfig","reaction","sessionId","call","theme","typefaces","variants","iconSizes","participantReaction","isShowing","setIsShowing","timeoutId","setTimeout","resetReaction","clearTimeout","currentReaction","find","supportedReaction","emoji_code","component","icon","createElement","style","heading6","styles","container","height","md","width","create","alignSelf","zIndex","IN_FRONT"],"sourceRoot":"../../../../../src","sources":["components/Participant/ParticipantView/ParticipantReaction.tsx"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,SAAS,EAAEC,QAAQ,QAAQ,OAAO;AAClD,SAASC,UAAU,EAAEC,IAAI,EAAEC,IAAI,QAAQ,cAAc;AACrD,SAASC,OAAO,QAAQ,iCAAiC;AACzD,SAASC,aAAa,QAAQ,gBAAgB;AAC9C,SAASC,OAAO,QAAQ,oBAAoB;AAE5C,SAASC,QAAQ,QAAQ,gCAAgC;;AAEzD;AACA;AACA;;AAaA;AACA;AACA;AACA,OAAO,MAAMC,mBAAmB,GAAGC,IAAA,IAGH;EAAA,IAHI;IAClCC,WAAW;IACXC,oBAAoB,GAAG;EACC,CAAC,GAAAF,IAAA;EACzB,MAAM;IAAEG;EAAmB,CAAC,GAAGP,aAAa,CAACQ,SAAS,CAAC,CAAC;EACxD,MAAM;IAAEC,QAAQ;IAAEC;EAAU,CAAC,GAAGL,WAAW;EAC3C,MAAMM,IAAI,GAAGZ,OAAO,CAAC,CAAC;EACtB,MAAM;IACJa,KAAK,EAAE;MACLC,SAAS;MACTC,QAAQ,EAAE;QAAEC;MAAU,CAAC;MACvBC;IACF;EACF,CAAC,GAAGd,QAAQ,CAAC,CAAC;EACd,MAAM,CAACe,SAAS,EAAEC,YAAY,CAAC,GAAGvB,QAAQ,CAAU,KAAK,CAAC;EAE1DD,SAAS,CAAC,MAAM;IACd,IAAIyB,SAAyB;IAC7B,IAAIR,IAAI,EAAE;MACRO,YAAY,CAAC,IAAI,CAAC;MAClBC,SAAS,GAAGC,UAAU,CAAC,MAAM;QAC3BF,YAAY,CAAC,KAAK,CAAC;QACnBP,IAAI,CAACU,aAAa,CAACX,SAAS,CAAC;MAC/B,CAAC,EAAEJ,oBAAoB,CAAC;IAC1B;IACA,OAAO,MAAM;MACXgB,YAAY,CAACH,SAAS,CAAC;IACzB,CAAC;EACH,CAAC,EAAE,CAACR,IAAI,EAAEL,oBAAoB,EAAEI,SAAS,EAAED,QAAQ,CAAC,CAAC;EAErD,MAAMc,eAAe,GACnBd,QAAQ,IACRF,kBAAkB,CAACiB,IAAI,CACpBC,iBAAiB,IAChBA,iBAAiB,CAACC,UAAU,KAAKjB,QAAQ,CAACiB,UAC9C,CAAC;EAEH,IAAIC,SAAS;EACb,IAAIV,SAAS,EAAE;IACb,IAAI,QAAOM,eAAe,aAAfA,eAAe,uBAAfA,eAAe,CAAEK,IAAI,MAAK,QAAQ,EAAE;MAC7CD,SAAS,GAAGJ,eAAe,aAAfA,eAAe,uBAAfA,eAAe,CAAEK,IAAI;IACnC,CAAC,MAAM;MACLD,SAAS,gBACPlC,KAAA,CAAAoC,aAAA,CAAChC,IAAI;QAACiC,KAAK,EAAE,CAACd,mBAAmB,CAACP,QAAQ,EAAEI,SAAS,CAACkB,QAAQ;MAAE,GAC7DR,eAAe,CAACK,IACb,CACP;IACH;EACF;EAEA,oBACEnC,KAAA,CAAAoC,aAAA,CAAC/B,IAAI;IACHgC,KAAK,EAAE,CACLE,MAAM,CAACC,SAAS,EAChB;MACEC,MAAM,EAAEnB,SAAS,CAACoB,EAAE;MACpBC,KAAK,EAAErB,SAAS,CAACoB;IACnB,CAAC,EACDnB,mBAAmB,CAACiB,SAAS;EAC7B,GAEDN,SACG,CAAC;AAEX,CAAC;AAED,MAAMK,MAAM,GAAGpC,UAAU,CAACyC,MAAM,CAAC;EAC/BJ,SAAS,EAAE;IACTK,SAAS,EAAE,YAAY;IACvBC,MAAM,EAAEtC,OAAO,CAACuC;EAClB;AACF,CAAC,CAAC"}

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

@@ -0,0 +1,56 @@
+import React from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+import { Avatar } from '../../utility';
+import { useTheme } from '../../../contexts/ThemeContext';
+
+/**
+ * Props for the ParticipantVideoFallback component.
+ */
+
+/**
+ * This component is used to customize the video fallback of the participant, when the video is disabled.
+ */
+export const ParticipantVideoFallback = _ref => {
+  let {
+    participant
+  } = _ref;
+  const {
+    theme: {
+      colors,
+      typefaces,
+      participantVideoFallback
+    }
+  } = 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.createElement(View, {
+    style: [styles.container, {
+      backgroundColor: colors.static_grey
+    }, participantVideoFallback.container]
+  }, !image ? /*#__PURE__*/React.createElement(Text, {
+    style: [{
+      color: colors.static_white
+    }, typefaces.bodyBold, participantVideoFallback.label]
+  }, participantLabel) : /*#__PURE__*/React.createElement(Avatar, {
+    participant: participant,
+    style: {
+      container: participantVideoFallback.avatarContainer,
+      image: participantVideoFallback.avatarImage,
+      text: participantVideoFallback.avatarText
+    }
+  }));
+};
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    ...StyleSheet.absoluteFillObject
+  }
+});
+//# sourceMappingURL=ParticipantVideoFallback.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","StyleSheet","Text","View","Avatar","useTheme","ParticipantVideoFallback","_ref","participant","theme","colors","typefaces","participantVideoFallback","name","image","userId","participantLabel","createElement","style","styles","container","backgroundColor","static_grey","color","static_white","bodyBold","label","avatarContainer","avatarImage","text","avatarText","create","alignItems","justifyContent","absoluteFillObject"],"sourceRoot":"../../../../../src","sources":["components/Participant/ParticipantView/ParticipantVideoFallback.tsx"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,UAAU,EAAEC,IAAI,EAAEC,IAAI,QAAQ,cAAc;AACrD,SAASC,MAAM,QAAQ,eAAe;AAEtC,SAASC,QAAQ,QAAQ,gCAAgC;;AAEzD;AACA;AACA;;AAMA;AACA;AACA;AACA,OAAO,MAAMC,wBAAwB,GAAGC,IAAA,IAEH;EAAA,IAFI;IACvCC;EAC6B,CAAC,GAAAD,IAAA;EAC9B,MAAM;IACJE,KAAK,EAAE;MAAEC,MAAM;MAAEC,SAAS;MAAEC;IAAyB;EACvD,CAAC,GAAGP,QAAQ,CAAC,CAAC;EACd,MAAM;IAAEQ,IAAI;IAAEC,KAAK;IAAEC;EAAO,CAAC,GAAGP,WAAW;EAC3C,MAAMQ,gBAAgB,GAAGH,IAAI,IAAIE,MAAM;;EAEvC;EACA,oBACEf,KAAA,CAAAiB,aAAA,CAACd,IAAI;IACHe,KAAK,EAAE,CACLC,MAAM,CAACC,SAAS,EAChB;MACEC,eAAe,EAAEX,MAAM,CAACY;IAC1B,CAAC,EACDV,wBAAwB,CAACQ,SAAS;EAClC,GAED,CAACN,KAAK,gBACLd,KAAA,CAAAiB,aAAA,CAACf,IAAI;IACHgB,KAAK,EAAE,CACL;MACEK,KAAK,EAAEb,MAAM,CAACc;IAChB,CAAC,EACDb,SAAS,CAACc,QAAQ,EAClBb,wBAAwB,CAACc,KAAK;EAC9B,GAEDV,gBACG,CAAC,gBAEPhB,KAAA,CAAAiB,aAAA,CAACb,MAAM;IACLI,WAAW,EAAEA,WAAY;IACzBU,KAAK,EAAE;MACLE,SAAS,EAAER,wBAAwB,CAACe,eAAe;MACnDb,KAAK,EAAEF,wBAAwB,CAACgB,WAAW;MAC3CC,IAAI,EAAEjB,wBAAwB,CAACkB;IACjC;EAAE,CACH,CAEC,CAAC;AAEX,CAAC;AAED,MAAMX,MAAM,GAAGlB,UAAU,CAAC8B,MAAM,CAAC;EAC/BX,SAAS,EAAE;IACTY,UAAU,EAAE,QAAQ;IACpBC,cAAc,EAAE,QAAQ;IACxB,GAAGhC,UAAU,CAACiC;EAChB;AACF,CAAC,CAAC"}

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

@@ -0,0 +1,83 @@
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+import { ParticipantNetworkQualityIndicator as DefaultParticipantNetworkQualityIndicator } from './ParticipantNetworkQualityIndicator';
+import { ParticipantReaction as DefaultParticipantReaction } from './ParticipantReaction';
+import { ParticipantLabel as DefaultParticipantLabel } from './ParticipantLabel';
+import { ParticipantVideoFallback as DefaultParticipantVideoFallback } from './ParticipantVideoFallback';
+import { VideoRenderer as DefaultVideoRenderer } from './VideoRenderer';
+import { useTheme } from '../../../contexts/ThemeContext';
+
+/**
+ * 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.
+ */
+export const ParticipantView = _ref => {
+  let {
+    participant,
+    trackType = 'videoTrack',
+    isVisible = true,
+    style,
+    ParticipantLabel = DefaultParticipantLabel,
+    ParticipantReaction = DefaultParticipantReaction,
+    VideoRenderer = DefaultVideoRenderer,
+    ParticipantNetworkQualityIndicator = DefaultParticipantNetworkQualityIndicator,
+    ParticipantVideoFallback = DefaultParticipantVideoFallback,
+    videoZOrder = 0
+  } = _ref;
+  const {
+    theme: {
+      colors,
+      participantView
+    }
+  } = 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.createElement(View, {
+    style: [styles.container, style, speakerStyle],
+    testID: isSpeaking ? `participant-${userId}-is-speaking` : `participant-${userId}-is-not-speaking`
+  }, ParticipantReaction && /*#__PURE__*/React.createElement(ParticipantReaction, {
+    participant: participant
+  }), VideoRenderer && /*#__PURE__*/React.createElement(VideoRenderer, {
+    isVisible: isVisible,
+    participant: participant,
+    trackType: trackType,
+    ParticipantVideoFallback: ParticipantVideoFallback,
+    videoZOrder: videoZOrder
+  }), /*#__PURE__*/React.createElement(View, {
+    style: [styles.footerContainer, participantView.footerContainer]
+  }, ParticipantLabel && /*#__PURE__*/React.createElement(ParticipantLabel, {
+    participant: participant,
+    trackType: trackType
+  }), ParticipantNetworkQualityIndicator && /*#__PURE__*/React.createElement(ParticipantNetworkQualityIndicator, {
+    participant: participant
+  })));
+};
+const styles = 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/module/components/Participant/ParticipantView/ParticipantView.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","StyleSheet","View","ParticipantNetworkQualityIndicator","DefaultParticipantNetworkQualityIndicator","ParticipantReaction","DefaultParticipantReaction","ParticipantLabel","DefaultParticipantLabel","ParticipantVideoFallback","DefaultParticipantVideoFallback","VideoRenderer","DefaultVideoRenderer","useTheme","ParticipantView","_ref","participant","trackType","isVisible","style","videoZOrder","theme","colors","participantView","isSpeaking","userId","isScreenSharing","applySpeakerStyle","speakerStyle","styles","highligtedContainer","borderColor","primary","createElement","container","testID","footerContainer","create","justifyContent","padding","overflow","margin","flexDirection","alignItems","borderWidth"],"sourceRoot":"../../../../../src","sources":["components/Participant/ParticipantView/ParticipantView.tsx"],"mappings":"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"}