@stream-io/video-react-native-sdk 1.3.7 → 1.4.0

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { Pressable, StyleSheet, Text, View } from 'react-native';
 import { MicOff, PinVertical, ScreenShareIndicator, VideoSlash } from '../../../icons';
 import { useCall, useI18n } from '@stream-io/video-react-bindings';
@@ -6,6 +6,7 @@ import { ComponentTestIds } from '../../../constants/TestIds';
 import { Z_INDEX } from '../../../constants';
 import { hasAudio, hasVideo } from '@stream-io/video-client';
 import { useTheme } from '../../../contexts/ThemeContext';
+import SpeechIndicator from './SpeechIndicator';
 
 /**
  * Props for the ParticipantLabel component.
@@ -35,6 +36,7 @@ export const ParticipantLabel = ({
       }
     }
   } = useTheme();
+  const styles = useStyles();
   const {
     name,
     userId,
@@ -60,7 +62,7 @@ export const ParticipantLabel = ({
     });
     return /*#__PURE__*/React.createElement(View, {
       style: [styles.container, {
-        backgroundColor: colors.static_overlay
+        backgroundColor: colors.sheetOverlay
       }, container],
       testID: ComponentTestIds.PARTICIPANT_SCREEN_SHARING
     }, /*#__PURE__*/React.createElement(View, {
@@ -69,70 +71,89 @@ export const ParticipantLabel = ({
         width: iconSizes.md
       }, screenShareIconContainer]
     }, /*#__PURE__*/React.createElement(ScreenShareIndicator, {
-      color: colors.static_white
+      color: colors.iconPrimary
     })), /*#__PURE__*/React.createElement(Text, {
       style: [styles.userNameLabel, {
-        color: colors.static_white
+        color: colors.textPrimary
       }, typefaces.caption, userNameLabel],
       numberOfLines: 1
     }, screenShareText));
   }
   return /*#__PURE__*/React.createElement(View, {
     style: [styles.container, {
-      backgroundColor: colors.static_overlay
+      backgroundColor: colors.sheetOverlay
     }, container]
+  }, /*#__PURE__*/React.createElement(View, {
+    style: styles.wrapper
   }, /*#__PURE__*/React.createElement(Text, {
-    style: [styles.userNameLabel, {
-      color: colors.static_white
-    }, typefaces.caption, userNameLabel],
+    style: [styles.userNameLabel, userNameLabel],
     numberOfLines: 1
   }, participantLabel), isAudioMuted && /*#__PURE__*/React.createElement(View, {
-    style: [styles.audioMutedIconContainer, {
-      height: iconSizes.xs,
-      width: iconSizes.xs
-    }, audioMutedIconContainer]
+    style: [styles.audioMutedIconContainer, audioMutedIconContainer]
   }, /*#__PURE__*/React.createElement(MicOff, {
-    color: colors.error
+    color: colors.iconPrimary,
+    size: iconSizes.sm
   })), isVideoMuted && /*#__PURE__*/React.createElement(View, {
-    style: [styles.videoMutedIconContainer, {
-      height: iconSizes.xs,
-      width: iconSizes.xs
-    }, videoMutedIconContainer]
+    style: [styles.videoMutedIconContainer, videoMutedIconContainer]
   }, /*#__PURE__*/React.createElement(VideoSlash, {
-    color: colors.error
+    color: colors.iconPrimary,
+    size: iconSizes.sm
   })), isPinningEnabled && /*#__PURE__*/React.createElement(Pressable, {
-    style: [styles.pinIconContainer, {
-      height: iconSizes.xs,
-      width: iconSizes.xs
-    }, pinIconContainer],
+    style: [styles.pinIconContainer, pinIconContainer],
     onPress: unPinParticipantHandler
   }, /*#__PURE__*/React.createElement(PinVertical, {
-    color: colors.static_white
-  })));
+    color: colors.iconPrimary,
+    size: iconSizes.sm
+  })), /*#__PURE__*/React.createElement(View, {
+    style: styles.indicatorWrapper
+  }, /*#__PURE__*/React.createElement(SpeechIndicator, {
+    isSpeaking: !isAudioMuted && participant.isDominantSpeaker
+  }))));
+};
+const useStyles = () => {
+  const {
+    theme
+  } = useTheme();
+  return useMemo(() => StyleSheet.create({
+    indicatorWrapper: {
+      marginLeft: theme.variants.spacingSizes.sm
+    },
+    wrapper: {
+      flexDirection: 'row'
+    },
+    container: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      padding: theme.variants.spacingSizes.sm,
+      maxHeight: 30,
+      borderTopRightRadius: 5,
+      marginBottom: -2,
+      flexShrink: 1,
+      zIndex: Z_INDEX.IN_FRONT
+    },
+    userNameLabel: {
+      flexShrink: 1,
+      marginTop: 3,
+      fontSize: 13,
+      fontWeight: '400',
+      color: theme.colors.textPrimary
+    },
+    screenShareIconContainer: {
+      marginRight: theme.variants.spacingSizes.sm,
+      justifyContent: 'center'
+    },
+    audioMutedIconContainer: {
+      marginLeft: theme.variants.spacingSizes.xs,
+      justifyContent: 'center'
+    },
+    videoMutedIconContainer: {
+      marginLeft: theme.variants.spacingSizes.xs,
+      justifyContent: 'center'
+    },
+    pinIconContainer: {
+      marginLeft: theme.variants.spacingSizes.xs,
+      justifyContent: 'center'
+    }
+  }), [theme]);
 };
-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

@@ -1 +1 @@
-{"version":3,"names":["React","Pressable","StyleSheet","Text","View","MicOff","PinVertical","ScreenShareIndicator","VideoSlash","useCall","useI18n","ComponentTestIds","Z_INDEX","hasAudio","hasVideo","useTheme","ParticipantLabel","participant","trackType","theme","colors","typefaces","variants","iconSizes","participantLabel","container","userNameLabel","audioMutedIconContainer","videoMutedIconContainer","pinIconContainer","screenShareIconContainer","name","userId","pin","sessionId","isLocalParticipant","call","t","participantName","isPinningEnabled","isLocalPin","isAudioMuted","isVideoMuted","unPinParticipantHandler","unpin","screenShareText","userName","createElement","style","styles","backgroundColor","static_overlay","testID","PARTICIPANT_SCREEN_SHARING","height","md","width","color","static_white","caption","numberOfLines","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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","ignoreList":[]}
+{"version":3,"names":["React","useMemo","Pressable","StyleSheet","Text","View","MicOff","PinVertical","ScreenShareIndicator","VideoSlash","useCall","useI18n","ComponentTestIds","Z_INDEX","hasAudio","hasVideo","useTheme","SpeechIndicator","ParticipantLabel","participant","trackType","theme","colors","typefaces","variants","iconSizes","participantLabel","container","userNameLabel","audioMutedIconContainer","videoMutedIconContainer","pinIconContainer","screenShareIconContainer","styles","useStyles","name","userId","pin","sessionId","isLocalParticipant","call","t","participantName","isPinningEnabled","isLocalPin","isAudioMuted","isVideoMuted","unPinParticipantHandler","unpin","screenShareText","userName","createElement","style","backgroundColor","sheetOverlay","testID","PARTICIPANT_SCREEN_SHARING","height","md","width","color","iconPrimary","textPrimary","caption","numberOfLines","wrapper","size","sm","onPress","indicatorWrapper","isSpeaking","isDominantSpeaker","create","marginLeft","spacingSizes","flexDirection","alignItems","padding","maxHeight","borderTopRightRadius","marginBottom","flexShrink","zIndex","IN_FRONT","marginTop","fontSize","fontWeight","marginRight","justifyContent","xs"],"sourceRoot":"../../../../../src","sources":["components/Participant/ParticipantView/ParticipantLabel.tsx"],"mappings":"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","ignoreList":[]}

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

@@ -23,11 +23,11 @@ const useConnectionQualitySignalColors = participant => {
   }
   switch (connectionQuality) {
     case SfuModels.ConnectionQuality.EXCELLENT:
-      return [colors.primary, colors.primary, colors.primary];
+      return [colors.iconSuccess, colors.iconSuccess, colors.iconSuccess];
     case SfuModels.ConnectionQuality.GOOD:
-      return [colors.primary, colors.primary, colors.static_white];
+      return [colors.iconSuccess, colors.iconSuccess, colors.iconPrimary];
     case SfuModels.ConnectionQuality.POOR:
-      return [colors.error, colors.static_white, colors.static_white];
+      return [colors.iconWarning, colors.iconPrimary, colors.iconPrimary];
     default:
       return null;
   }
@@ -50,7 +50,7 @@ export const ParticipantNetworkQualityIndicator = ({
   }
   return /*#__PURE__*/React.createElement(View, {
     style: [styles.container, {
-      backgroundColor: colors.static_overlay,
+      backgroundColor: colors.sheetOverlay,
       height: iconSizes.lg,
       width: iconSizes.lg
     }, participantNetworkQualityIndicator.container]
@@ -84,7 +84,7 @@ const styles = StyleSheet.create({
   container: {
     zIndex: Z_INDEX.IN_FRONT,
     alignSelf: 'flex-end',
-    borderRadius: 5
+    borderTopLeftRadius: 5
   }
 });
 //# sourceMappingURL=ParticipantNetworkQualityIndicator.js.map

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

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

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

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useMemo } from 'react';
 import { StyleSheet, Text, View } from 'react-native';
 import { useCall } from '@stream-io/video-react-bindings';
 import { Z_INDEX, defaultEmojiReactions } from '../../../constants';
@@ -21,12 +21,10 @@ export const ParticipantReaction = ({
     sessionId
   } = participant;
   const call = useCall();
+  const styles = useStyles();
   const {
     theme: {
       typefaces,
-      variants: {
-        iconSizes
-      },
       participantReaction
     }
   } = useTheme();
@@ -42,19 +40,34 @@ export const ParticipantReaction = ({
     };
   }, [call, hideAfterTimeoutInMs, sessionId, reaction]);
   const currentReaction = reaction && supportedReactions.find(supportedReaction => supportedReaction.emoji_code === reaction.emoji_code);
-  return /*#__PURE__*/React.createElement(View, {
-    style: [styles.container, {
-      height: iconSizes.md,
-      width: iconSizes.md
-    }, participantReaction.container]
+  return currentReaction?.icon != null && /*#__PURE__*/React.createElement(View, {
+    style: [styles.container, participantReaction.container]
+  }, /*#__PURE__*/React.createElement(View, {
+    style: styles.reaction
   }, /*#__PURE__*/React.createElement(Text, {
     style: [participantReaction.reaction, typefaces.heading6]
-  }, currentReaction?.icon));
+  }, currentReaction?.icon)));
+};
+const useStyles = () => {
+  const {
+    theme
+  } = useTheme();
+  return useMemo(() => StyleSheet.create({
+    container: {
+      flex: 1,
+      zIndex: Z_INDEX.IN_FRONT
+    },
+    reaction: {
+      borderRadius: theme.variants.borderRadiusSizes.sm,
+      backgroundColor: theme.colors.sheetOverlay,
+      alignSelf: 'flex-end',
+      marginRight: theme.variants.spacingSizes.md,
+      marginTop: theme.variants.spacingSizes.md,
+      height: theme.variants.roundButtonSizes.md,
+      width: theme.variants.roundButtonSizes.md,
+      alignItems: 'center',
+      justifyContent: 'center'
+    }
+  }), [theme]);
 };
-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

@@ -1 +1 @@
-{"version":3,"names":["React","useEffect","StyleSheet","Text","View","useCall","Z_INDEX","defaultEmojiReactions","useTheme","ParticipantReaction","participant","supportedReactions","hideAfterTimeoutInMs","reaction","sessionId","call","theme","typefaces","variants","iconSizes","participantReaction","timeoutId","setTimeout","resetReaction","clearTimeout","currentReaction","find","supportedReaction","emoji_code","createElement","style","styles","container","height","md","width","heading6","icon","create","alignSelf","zIndex","IN_FRONT"],"sourceRoot":"../../../../../src","sources":["components/Participant/ParticipantView/ParticipantReaction.tsx"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,SAAS,QAAQ,OAAO;AACxC,SAASC,UAAU,EAAEC,IAAI,EAAEC,IAAI,QAAQ,cAAc;AACrD,SAASC,OAAO,QAAQ,iCAAiC;AACzD,SAASC,OAAO,EAAEC,qBAAqB,QAAQ,oBAAoB;AAEnE,SAASC,QAAQ,QAAQ,gCAAgC;;AAGzD;AACA;AACA;;AAcA;AACA;AACA;AACA,OAAO,MAAMC,mBAAmB,GAAGA,CAAC;EAClCC,WAAW;EACXC,kBAAkB,GAAGJ,qBAAqB;EAC1CK,oBAAoB,GAAG;AACC,CAAC,KAAK;EAC9B,MAAM;IAAEC,QAAQ;IAAEC;EAAU,CAAC,GAAGJ,WAAW;EAC3C,MAAMK,IAAI,GAAGV,OAAO,CAAC,CAAC;EACtB,MAAM;IACJW,KAAK,EAAE;MACLC,SAAS;MACTC,QAAQ,EAAE;QAAEC;MAAU,CAAC;MACvBC;IACF;EACF,CAAC,GAAGZ,QAAQ,CAAC,CAAC;EAEdP,SAAS,CAAC,MAAM;IACd,IAAIoB,SAAyB;IAC7B,IAAIN,IAAI,EAAE;MACRM,SAAS,GAAGC,UAAU,CAAC,MAAM;QAC3BP,IAAI,CAACQ,aAAa,CAACT,SAAS,CAAC;MAC/B,CAAC,EAAEF,oBAAoB,CAAC;IAC1B;IACA,OAAO,MAAM;MACXY,YAAY,CAACH,SAAS,CAAC;IACzB,CAAC;EACH,CAAC,EAAE,CAACN,IAAI,EAAEH,oBAAoB,EAAEE,SAAS,EAAED,QAAQ,CAAC,CAAC;EAErD,MAAMY,eAAe,GACnBZ,QAAQ,IACRF,kBAAkB,CAACe,IAAI,CACpBC,iBAAiB,IAChBA,iBAAiB,CAACC,UAAU,KAAKf,QAAQ,CAACe,UAC9C,CAAC;EAEH,oBACE5B,KAAA,CAAA6B,aAAA,CAACzB,IAAI;IACH0B,KAAK,EAAE,CACLC,MAAM,CAACC,SAAS,EAChB;MACEC,MAAM,EAAEd,SAAS,CAACe,EAAE;MACpBC,KAAK,EAAEhB,SAAS,CAACe;IACnB,CAAC,EACDd,mBAAmB,CAACY,SAAS;EAC7B,gBAEFhC,KAAA,CAAA6B,aAAA,CAAC1B,IAAI;IAAC2B,KAAK,EAAE,CAACV,mBAAmB,CAACP,QAAQ,EAAEI,SAAS,CAACmB,QAAQ;EAAE,GAC7DX,eAAe,EAAEY,IACd,CACF,CAAC;AAEX,CAAC;AAED,MAAMN,MAAM,GAAG7B,UAAU,CAACoC,MAAM,CAAC;EAC/BN,SAAS,EAAE;IACTO,SAAS,EAAE,YAAY;IACvBC,MAAM,EAAElC,OAAO,CAACmC;EAClB;AACF,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["React","useEffect","useMemo","StyleSheet","Text","View","useCall","Z_INDEX","defaultEmojiReactions","useTheme","ParticipantReaction","participant","supportedReactions","hideAfterTimeoutInMs","reaction","sessionId","call","styles","useStyles","theme","typefaces","participantReaction","timeoutId","setTimeout","resetReaction","clearTimeout","currentReaction","find","supportedReaction","emoji_code","icon","createElement","style","container","heading6","create","flex","zIndex","IN_FRONT","borderRadius","variants","borderRadiusSizes","sm","backgroundColor","colors","sheetOverlay","alignSelf","marginRight","spacingSizes","md","marginTop","height","roundButtonSizes","width","alignItems","justifyContent"],"sourceRoot":"../../../../../src","sources":["components/Participant/ParticipantView/ParticipantReaction.tsx"],"mappings":"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","ignoreList":[]}

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

@@ -30,11 +30,11 @@ export const ParticipantVideoFallback = ({
   // Display the Participant name/user id if the image isn't present.
   return /*#__PURE__*/React.createElement(View, {
     style: [styles.container, {
-      backgroundColor: colors.static_grey
+      backgroundColor: colors.sheetTertiary
     }, participantVideoFallback.container]
   }, !image ? /*#__PURE__*/React.createElement(Text, {
     style: [{
-      color: colors.static_white
+      color: colors.textPrimary
     }, typefaces.bodyBold, participantVideoFallback.label]
   }, participantLabel) : /*#__PURE__*/React.createElement(Avatar, {
     participant: participant,

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

@@ -1 +1 @@
-{"version":3,"names":["React","StyleSheet","Text","View","Avatar","useTheme","ParticipantVideoFallback","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,GAAGA,CAAC;EACvCC;AAC6B,CAAC,KAAK;EACnC,MAAM;IACJC,KAAK,EAAE;MAAEC,MAAM;MAAEC,SAAS;MAAEC;IAAyB;EACvD,CAAC,GAAGN,QAAQ,CAAC,CAAC;EACd,MAAM;IAAEO,IAAI;IAAEC,KAAK;IAAEC;EAAO,CAAC,GAAGP,WAAW;EAC3C,MAAMQ,gBAAgB,GAAGH,IAAI,IAAIE,MAAM;;EAEvC;EACA,oBACEd,KAAA,CAAAgB,aAAA,CAACb,IAAI;IACHc,KAAK,EAAE,CACLC,MAAM,CAACC,SAAS,EAChB;MACEC,eAAe,EAAEX,MAAM,CAACY;IAC1B,CAAC,EACDV,wBAAwB,CAACQ,SAAS;EAClC,GAED,CAACN,KAAK,gBACLb,KAAA,CAAAgB,aAAA,CAACd,IAAI;IACHe,KAAK,EAAE,CACL;MACEK,KAAK,EAAEb,MAAM,CAACc;IAChB,CAAC,EACDb,SAAS,CAACc,QAAQ,EAClBb,wBAAwB,CAACc,KAAK;EAC9B,GAEDV,gBACG,CAAC,gBAEPf,KAAA,CAAAgB,aAAA,CAACZ,MAAM;IACLG,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,GAAGjB,UAAU,CAAC6B,MAAM,CAAC;EAC/BX,SAAS,EAAE;IACTY,UAAU,EAAE,QAAQ;IACpBC,cAAc,EAAE,QAAQ;IACxB,GAAG/B,UAAU,CAACgC;EAChB;AACF,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["React","StyleSheet","Text","View","Avatar","useTheme","ParticipantVideoFallback","participant","theme","colors","typefaces","participantVideoFallback","name","image","userId","participantLabel","createElement","style","styles","container","backgroundColor","sheetTertiary","color","textPrimary","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,GAAGA,CAAC;EACvCC;AAC6B,CAAC,KAAK;EACnC,MAAM;IACJC,KAAK,EAAE;MAAEC,MAAM;MAAEC,SAAS;MAAEC;IAAyB;EACvD,CAAC,GAAGN,QAAQ,CAAC,CAAC;EACd,MAAM;IAAEO,IAAI;IAAEC,KAAK;IAAEC;EAAO,CAAC,GAAGP,WAAW;EAC3C,MAAMQ,gBAAgB,GAAGH,IAAI,IAAIE,MAAM;;EAEvC;EACA,oBACEd,KAAA,CAAAgB,aAAA,CAACb,IAAI;IACHc,KAAK,EAAE,CACLC,MAAM,CAACC,SAAS,EAChB;MAAEC,eAAe,EAAEX,MAAM,CAACY;IAAc,CAAC,EACzCV,wBAAwB,CAACQ,SAAS;EAClC,GAED,CAACN,KAAK,gBACLb,KAAA,CAAAgB,aAAA,CAACd,IAAI;IACHe,KAAK,EAAE,CACL;MAAEK,KAAK,EAAEb,MAAM,CAACc;IAAY,CAAC,EAC7Bb,SAAS,CAACc,QAAQ,EAClBb,wBAAwB,CAACc,KAAK;EAC9B,GAEDV,gBACG,CAAC,gBAEPf,KAAA,CAAAgB,aAAA,CAACZ,MAAM;IACLG,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,GAAGjB,UAAU,CAAC6B,MAAM,CAAC;EAC/BX,SAAS,EAAE;IACTY,UAAU,EAAE,QAAQ;IACpBC,cAAc,EAAE,QAAQ;IACxB,GAAG/B,UAAU,CAACgC;EAChB;AACF,CAAC,CAAC","ignoreList":[]}

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { StyleSheet, View } from 'react-native';
 import { ParticipantNetworkQualityIndicator as DefaultParticipantNetworkQualityIndicator } from './ParticipantNetworkQualityIndicator';
 import { ParticipantReaction as DefaultParticipantReaction } from './ParticipantReaction';
@@ -40,10 +40,11 @@ export const ParticipantView = ({
     isSpeaking,
     userId
   } = participant;
+  const styles = useStyles();
   const isScreenSharing = trackType === 'screenShareTrack';
   const applySpeakerStyle = isSpeaking && !isScreenSharing;
   const speakerStyle = applySpeakerStyle && [styles.highligtedContainer, {
-    borderColor: colors.primary
+    borderColor: colors.buttonPrimary
   }, participantView.highligtedContainer];
   return /*#__PURE__*/React.createElement(View, {
     style: [styles.container, style, speakerStyle],
@@ -59,7 +60,7 @@ export const ParticipantView = ({
     objectFit: objectFit,
     videoZOrder: videoZOrder
   }), /*#__PURE__*/React.createElement(View, {
-    style: [styles.footerContainer, participantView.footerContainer]
+    style: [styles.footerContainer, participantView.footerContainer, !ParticipantLabel && styles.networkIndicatorOnly]
   }, ParticipantLabel && /*#__PURE__*/React.createElement(ParticipantLabel, {
     participant: participant,
     trackType: trackType
@@ -67,21 +68,27 @@ export const ParticipantView = ({
     participant: participant
   })));
 };
-const styles = StyleSheet.create({
-  container: {
-    justifyContent: 'space-between',
-    padding: 4,
-    overflow: 'hidden',
-    borderWidth: 2,
-    borderColor: 'transparent'
-  },
-  footerContainer: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center'
-  },
-  highligtedContainer: {
-    borderWidth: 2
-  }
-});
+const useStyles = () => {
+  const {
+    theme
+  } = useTheme();
+  return useMemo(() => StyleSheet.create({
+    container: {
+      overflow: 'hidden',
+      justifyContent: 'flex-end',
+      borderRadius: theme.variants.borderRadiusSizes.md
+    },
+    footerContainer: {
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      alignItems: 'center'
+    },
+    highligtedContainer: {
+      borderWidth: 2
+    },
+    networkIndicatorOnly: {
+      justifyContent: 'flex-end'
+    }
+  }), [theme]);
+};
 //# sourceMappingURL=ParticipantView.js.map

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

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

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

@@ -0,0 +1,78 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import { View, Animated, StyleSheet } from 'react-native';
+import { useTheme } from '../../..';
+
+/**
+ * Props for the SpeechIndicator component.
+ */
+
+/**
+ * The SpeechIndicator component displays animated bars to indicate speech activity.
+ * The bars animate when `isSpeaking` is true, mimicking a sound meter.
+ */
+export const SpeechIndicator = ({
+  isSpeaking
+}) => {
+  const styles = useStyles();
+  const [animationValues] = useState(() => [new Animated.Value(0.6), new Animated.Value(0.6), new Animated.Value(0.6)]);
+  useEffect(() => {
+    if (isSpeaking) {
+      animationValues.forEach((animatedValue, index) => {
+        Animated.loop(Animated.sequence([Animated.timing(animatedValue, {
+          toValue: index % 2 === 0 ? 0.3 : 1.1,
+          duration: (index + 1) * 300,
+          useNativeDriver: true
+        }), Animated.timing(animatedValue, {
+          toValue: 0.6,
+          duration: (index + 1) * 300,
+          useNativeDriver: true
+        })])).start();
+      });
+    } else {
+      animationValues.forEach(animatedValue => {
+        animatedValue.setValue(0.3); // Set a smaller value for a reduced default height
+      });
+    }
+  }, [isSpeaking, animationValues]);
+  const barStyle = animatedValue => ({
+    transform: [{
+      scaleY: animatedValue
+    }]
+  });
+  return /*#__PURE__*/React.createElement(View, {
+    style: [styles.container]
+  }, animationValues.map((animatedValue, index) => /*#__PURE__*/React.createElement(Animated.View, {
+    key: index,
+    style: [styles.bar, isSpeaking ? barStyle(animatedValue) : styles.smallBar // Apply smaller bar style when not speaking
+    ]
+  })));
+};
+const useStyles = () => {
+  const {
+    theme
+  } = useTheme();
+  return useMemo(() => StyleSheet.create({
+    container: {
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+      height: theme.variants.roundButtonSizes.sm,
+      width: theme.variants.roundButtonSizes.sm,
+      borderRadius: 5,
+      gap: 1,
+      backgroundColor: theme.colors.sheetOverlay,
+      padding: 5
+    },
+    smallBar: {
+      height: '30%' // Smaller default height when animation is not running
+    },
+    bar: {
+      width: 3,
+      height: '100%',
+      backgroundColor: theme.colors.iconSecondary,
+      borderRadius: 2
+    }
+  }), [theme]);
+};
+export default SpeechIndicator;
+//# sourceMappingURL=SpeechIndicator.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","useEffect","useMemo","useState","View","Animated","StyleSheet","useTheme","SpeechIndicator","isSpeaking","styles","useStyles","animationValues","Value","forEach","animatedValue","index","loop","sequence","timing","toValue","duration","useNativeDriver","start","setValue","barStyle","transform","scaleY","createElement","style","container","map","key","bar","smallBar","theme","create","flexDirection","justifyContent","alignItems","height","variants","roundButtonSizes","sm","width","borderRadius","gap","backgroundColor","colors","sheetOverlay","padding","iconSecondary"],"sourceRoot":"../../../../../src","sources":["components/Participant/ParticipantView/SpeechIndicator.tsx"],"mappings":"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","ignoreList":[]}

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

@@ -50,7 +50,7 @@ export const Avatar = props => {
   }) : /*#__PURE__*/React.createElement(Text, {
     style: [styles.text, {
       fontSize: size / 2,
-      color: colors.bars
+      color: colors.textPrimary
     }, typefaces.heading6, avatar.text, styleProp?.text],
     numberOfLines: 1
   }, userLabel));

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

@@ -1 +1 @@
-{"version":3,"names":["Image","StyleSheet","Text","View","React","getInitialsOfName","ComponentTestIds","ImageTestIds","useTheme","Avatar","props","participant","userId","image","name","size","style","styleProp","theme","avatar","colors","typefaces","userDetails","userLabel","imageUrl","createElement","testID","PARTICIPANT_AVATAR","styles","container","borderRadius","height","width","backgroundColor","primary","AVATAR","source","uri","text","fontSize","color","bars","heading6","numberOfLines","create","justifyContent","overflow","flex","textAlign"],"sourceRoot":"../../../../src","sources":["components/utility/Avatar.tsx"],"mappings":"AAAA,SAASA,KAAK,EAAEC,UAAU,EAAEC,IAAI,EAAEC,IAAI,QAAQ,cAAc;AAC5D,OAAOC,KAAK,MAAM,OAAO;AAEzB,SAASC,iBAAiB,QAAQ,aAAa;AAC/C,SAASC,gBAAgB,EAAEC,YAAY,QAAQ,yBAAyB;AACxE,SAASC,QAAQ,QAAQ,6BAA6B;;AAGtD;AACA;AACA;;AAkCA;AACA;AACA;AACA;AACA,OAAO,MAAMC,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,GAAGb,QAAQ,CAAC,CAAC;EACd,MAAMc,WAAW,GAAGR,IAAI,IAAIF,MAAM;EAClC,MAAMW,SAAS,GAAGD,WAAW,GAAGjB,iBAAiB,CAACiB,WAAW,CAAC,GAAG,GAAG;EAEpE,MAAME,QAAQ,GAAGX,KAAK;EACtB,oBACET,KAAA,CAAAqB,aAAA,CAACtB,IAAI;IACHuB,MAAM,EAAEpB,gBAAgB,CAACqB,kBAAmB;IAC5CX,KAAK,EAAE,CACLY,MAAM,CAACC,SAAS,EAChB;MACEC,YAAY,EAAEf,IAAI,GAAG,CAAC;MACtBgB,MAAM,EAAEhB,IAAI;MACZiB,KAAK,EAAEjB;IACT,CAAC,EACD;MACEkB,eAAe,EAAEb,MAAM,CAACc;IAC1B,CAAC,EACDf,MAAM,CAACU,SAAS,EAChBZ,SAAS,EAAEY,SAAS;EACpB,GAEDL,QAAQ,gBACPpB,KAAA,CAAAqB,aAAA,CAACzB,KAAK;IACJ0B,MAAM,EAAEnB,YAAY,CAAC4B,MAAO;IAC5BC,MAAM,EAAE;MACNC,GAAG,EAAEb;IACP,CAAE;IACFR,KAAK,EAAE,CAACY,MAAM,CAACf,KAAK,EAAEM,MAAM,CAACN,KAAK,EAAEI,SAAS,EAAEJ,KAAK;EAAE,CACvD,CAAC,gBAEFT,KAAA,CAAAqB,aAAA,CAACvB,IAAI;IACHc,KAAK,EAAE,CACLY,MAAM,CAACU,IAAI,EACX;MAAEC,QAAQ,EAAExB,IAAI,GAAG,CAAC;MAAEyB,KAAK,EAAEpB,MAAM,CAACqB;IAAK,CAAC,EAC1CpB,SAAS,CAACqB,QAAQ,EAClBvB,MAAM,CAACmB,IAAI,EACXrB,SAAS,EAAEqB,IAAI,CACf;IACFK,aAAa,EAAE;EAAE,GAEhBpB,SACG,CAEJ,CAAC;AAEX,CAAC;AAED,MAAMK,MAAM,GAAG3B,UAAU,CAAC2C,MAAM,CAAC;EAC/Bf,SAAS,EAAE;IACTgB,cAAc,EAAE,QAAQ;IACxBC,QAAQ,EAAE;EACZ,CAAC;EACDjC,KAAK,EAAE;IACLkC,IAAI,EAAE;EACR,CAAC;EACDT,IAAI,EAAE;IACJU,SAAS,EAAE;EACb;AACF,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["Image","StyleSheet","Text","View","React","getInitialsOfName","ComponentTestIds","ImageTestIds","useTheme","Avatar","props","participant","userId","image","name","size","style","styleProp","theme","avatar","colors","typefaces","userDetails","userLabel","imageUrl","createElement","testID","PARTICIPANT_AVATAR","styles","container","borderRadius","height","width","backgroundColor","primary","AVATAR","source","uri","text","fontSize","color","textPrimary","heading6","numberOfLines","create","justifyContent","overflow","flex","textAlign"],"sourceRoot":"../../../../src","sources":["components/utility/Avatar.tsx"],"mappings":"AAAA,SAASA,KAAK,EAAEC,UAAU,EAAEC,IAAI,EAAEC,IAAI,QAAQ,cAAc;AAC5D,OAAOC,KAAK,MAAM,OAAO;AAEzB,SAASC,iBAAiB,QAAQ,aAAa;AAC/C,SAASC,gBAAgB,EAAEC,YAAY,QAAQ,yBAAyB;AACxE,SAASC,QAAQ,QAAQ,6BAA6B;;AAGtD;AACA;AACA;;AAkCA;AACA;AACA;AACA;AACA,OAAO,MAAMC,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,GAAGb,QAAQ,CAAC,CAAC;EACd,MAAMc,WAAW,GAAGR,IAAI,IAAIF,MAAM;EAClC,MAAMW,SAAS,GAAGD,WAAW,GAAGjB,iBAAiB,CAACiB,WAAW,CAAC,GAAG,GAAG;EAEpE,MAAME,QAAQ,GAAGX,KAAK;EACtB,oBACET,KAAA,CAAAqB,aAAA,CAACtB,IAAI;IACHuB,MAAM,EAAEpB,gBAAgB,CAACqB,kBAAmB;IAC5CX,KAAK,EAAE,CACLY,MAAM,CAACC,SAAS,EAChB;MACEC,YAAY,EAAEf,IAAI,GAAG,CAAC;MACtBgB,MAAM,EAAEhB,IAAI;MACZiB,KAAK,EAAEjB;IACT,CAAC,EACD;MAAEkB,eAAe,EAAEb,MAAM,CAACc;IAAQ,CAAC,EACnCf,MAAM,CAACU,SAAS,EAChBZ,SAAS,EAAEY,SAAS;EACpB,GAEDL,QAAQ,gBACPpB,KAAA,CAAAqB,aAAA,CAACzB,KAAK;IACJ0B,MAAM,EAAEnB,YAAY,CAAC4B,MAAO;IAC5BC,MAAM,EAAE;MACNC,GAAG,EAAEb;IACP,CAAE;IACFR,KAAK,EAAE,CAACY,MAAM,CAACf,KAAK,EAAEM,MAAM,CAACN,KAAK,EAAEI,SAAS,EAAEJ,KAAK;EAAE,CACvD,CAAC,gBAEFT,KAAA,CAAAqB,aAAA,CAACvB,IAAI;IACHc,KAAK,EAAE,CACLY,MAAM,CAACU,IAAI,EACX;MAAEC,QAAQ,EAAExB,IAAI,GAAG,CAAC;MAAEyB,KAAK,EAAEpB,MAAM,CAACqB;IAAY,CAAC,EACjDpB,SAAS,CAACqB,QAAQ,EAClBvB,MAAM,CAACmB,IAAI,EACXrB,SAAS,EAAEqB,IAAI,CACf;IACFK,aAAa,EAAE;EAAE,GAEhBpB,SACG,CAEJ,CAAC;AAEX,CAAC;AAED,MAAMK,MAAM,GAAG3B,UAAU,CAAC2C,MAAM,CAAC;EAC/Bf,SAAS,EAAE;IACTgB,cAAc,EAAE,QAAQ;IACxBC,QAAQ,EAAE;EACZ,CAAC;EACDjC,KAAK,EAAE;IACLkC,IAAI,EAAE;EACR,CAAC;EACDT,IAAI,EAAE;IACJU,SAAS,EAAE;EACb;AACF,CAAC,CAAC","ignoreList":[]}

package/dist/module/components/utility/ScreenShareOverlay.js

@@ -32,11 +32,11 @@ export const ScreenShareOverlay = ({}) => {
   };
   return /*#__PURE__*/React.createElement(View, {
     style: [styles.container, {
-      backgroundColor: colors.static_grey
+      backgroundColor: colors.sheetTertiary
     }, screenshareOverlay.container]
   }, /*#__PURE__*/React.createElement(Text, {
     style: [styles.text, typefaces.subtitleBold, {
-      color: colors.static_white
+      color: colors.textPrimary
     }, screenshareOverlay.text]
   }, t('You are sharing your screen with everyone')), /*#__PURE__*/React.createElement(Pressable, {
     onPress: onStopScreenshareHandler,
@@ -44,7 +44,7 @@ export const ScreenShareOverlay = ({}) => {
       pressed
     }) => {
       return [styles.button, {
-        backgroundColor: colors.dark_gray,
+        backgroundColor: colors.sheetSecondary,
         opacity: pressed ? 0.2 : 1
       }, screenshareOverlay.button];
     }
@@ -54,10 +54,11 @@ export const ScreenShareOverlay = ({}) => {
       width: iconSizes.xs
     }, screenshareOverlay.buttonIcon]
   }, /*#__PURE__*/React.createElement(StopScreenShare, {
-    color: colors.static_white
+    size: iconSizes.xs,
+    color: colors.iconPrimary
   })), /*#__PURE__*/React.createElement(Text, {
     style: [styles.buttonText, {
-      color: colors.static_white
+      color: colors.textPrimary
     }, screenshareOverlay.buttonText]
   }, t('Stop Screen Sharing'))));
 };