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

package/src/components/Call/index.ts

@@ -1,5 +1,4 @@
 export * from './CallContent';
-export * from './CallTopView';
 export * from './CallLayout';
 export * from './CallControls';
 export * from './CallParticipantsList';

package/src/components/Livestream/HostLivestream/HostLivestream.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useMemo } from 'react';
 import { StyleSheet, View } from 'react-native';
 import InCallManager from 'react-native-incall-manager';
 
@@ -73,6 +73,7 @@ export const HostLivestream = ({
   hls,
   disableStopPublishedStreamsOnEndStream,
 }: HostLivestreamProps) => {
+  const styles = useStyles();
   const {
     theme: { colors, hostLivestream },
   } = useTheme();
@@ -108,9 +109,7 @@ export const HostLivestream = ({
     <View
       style={[
         styles.container,
-        {
-          backgroundColor: colors.dark_gray,
-        },
+        { backgroundColor: colors.sheetTertiary },
         hostLivestream.container,
       ]}
     >
@@ -161,22 +160,34 @@ export const HostLivestream = ({
   );
 };
 
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  topViewContainer: {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    right: 0,
-    zIndex: Z_INDEX.IN_FRONT,
-  },
-  controlsViewContainer: {
-    position: 'absolute',
-    bottom: 0,
-    left: 0,
-    right: 0,
-    zIndex: Z_INDEX.IN_FRONT,
-  },
-});
+const useStyles = () => {
+  const { theme } = useTheme();
+  return useMemo(
+    () =>
+      StyleSheet.create({
+        container: {
+          flex: 1,
+          paddingBottom: theme.variants.insets.bottom,
+          paddingLeft: theme.variants.insets.left,
+          paddingRight: theme.variants.insets.right,
+          paddingTop: theme.variants.insets.top,
+          backgroundColor: theme.colors.sheetPrimary,
+        },
+        topViewContainer: {
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          right: 0,
+          zIndex: Z_INDEX.IN_FRONT,
+        },
+        controlsViewContainer: {
+          position: 'absolute',
+          bottom: 0,
+          left: 0,
+          right: 0,
+          zIndex: Z_INDEX.IN_FRONT,
+        },
+      }),
+    [theme]
+  );
+};

package/src/components/Livestream/LivestreamControls/HostLivestreamControls.tsx

@@ -45,7 +45,7 @@ export const HostLivestreamControls = ({
     <View
       style={[
         styles.container,
-        { backgroundColor: colors.static_overlay },
+        { backgroundColor: colors.sheetOverlay },
         hostLivestreamControls.container,
       ]}
       onLayout={onLayout}

package/src/components/Livestream/LivestreamControls/HostStartStreamButton.tsx

@@ -114,10 +114,10 @@ export const HostStartStreamButton = ({
         styles.container,
         {
           backgroundColor: isAwaitingResponse
-            ? colors.dark_gray
+            ? colors.sheetTertiary
             : liveOrBroadcasting
-              ? colors.error
-              : colors.primary,
+              ? colors.buttonWarning
+              : colors.buttonPrimary,
         },
         hostStartStreamButton.container,
       ]}
@@ -144,7 +144,7 @@ export const HostStartStreamButton = ({
         style={[
           styles.text,
           typefaces.subtitleBold,
-          { color: colors.static_white },
+          { color: colors.textPrimary },
           hostStartStreamButton.text,
         ]}
       >

package/src/components/Livestream/LivestreamControls/LivestreamAudioControlButton.tsx

@@ -2,7 +2,7 @@ import { useCallStateHooks } from '@stream-io/video-react-bindings';
 import React from 'react';
 import { useTheme } from '../../../contexts';
 import { Pressable, StyleSheet, View } from 'react-native';
-import { Mic, MicOff } from '../../../icons';
+import { IconWrapper, Mic, MicOff } from '../../../icons';
 
 /**
  * The LivestreamAudioControlButton controls the audio stream publish/unpublish while in the livestream for the host.
@@ -28,7 +28,7 @@ export const LivestreamAudioControlButton = () => {
       style={[
         styles.container,
         {
-          backgroundColor: colors.dark_gray,
+          backgroundColor: colors.buttonSecondary,
           height: buttonSizes.xs,
           width: buttonSizes.xs,
         },
@@ -45,11 +45,13 @@ export const LivestreamAudioControlButton = () => {
           livestreamAudioControlButton.icon,
         ]}
       >
-        {!optimisticIsMute ? (
-          <Mic color={colors.static_white} />
-        ) : (
-          <MicOff color={colors.static_white} />
-        )}
+        <IconWrapper>
+          {!optimisticIsMute ? (
+            <Mic color={colors.iconPrimary} size={iconSizes.md} />
+          ) : (
+            <MicOff color={colors.iconPrimary} size={iconSizes.md} />
+          )}
+        </IconWrapper>
       </View>
     </Pressable>
   );

package/src/components/Livestream/LivestreamControls/LivestreamScreenShareToggleButton.tsx

@@ -33,8 +33,8 @@ export const LivestreamScreenShareToggleButton = () => {
         styles.container,
         {
           backgroundColor: hasPublishedScreenShare
-            ? colors.error
-            : colors.dark_gray,
+            ? colors.buttonWarning
+            : colors.buttonSecondary,
           height: buttonSizes.xs,
           width: buttonSizes.xs,
         },
@@ -52,9 +52,9 @@ export const LivestreamScreenShareToggleButton = () => {
         ]}
       >
         {hasPublishedScreenShare ? (
-          <StopScreenShare color={colors.static_white} />
+          <StopScreenShare size={iconSizes.sm} color={colors.iconPrimary} />
         ) : (
-          <ScreenShare color={colors.static_white} />
+          <ScreenShare size={iconSizes.sm} color={colors.iconPrimary} />
         )}
       </View>
       {Platform.OS === 'ios' && (

package/src/components/Livestream/LivestreamControls/LivestreamVideoControlButton.tsx

@@ -2,7 +2,7 @@ import { useCallStateHooks } from '@stream-io/video-react-bindings';
 import React from 'react';
 import { useTheme } from '../../../contexts';
 import { Pressable, StyleSheet, View } from 'react-native';
-import { Video, VideoSlash } from '../../../icons';
+import { IconWrapper, Video, VideoSlash } from '../../../icons';
 
 /**
  * The LivestreamVideoControlButton controls the video stream publish/unpublish while in the livestream for the host.
@@ -34,7 +34,7 @@ export const LivestreamVideoControlButton = () => {
       style={[
         styles.container,
         {
-          backgroundColor: colors.dark_gray,
+          backgroundColor: colors.buttonSecondary,
           height: buttonSizes.xs,
           width: buttonSizes.xs,
         },
@@ -51,11 +51,13 @@ export const LivestreamVideoControlButton = () => {
           livestreamVideoControlButton.icon,
         ]}
       >
-        {!optimisticIsMute ? (
-          <Video color={colors.static_white} />
-        ) : (
-          <VideoSlash color={colors.static_white} />
-        )}
+        <IconWrapper>
+          {!optimisticIsMute ? (
+            <Video color={colors.iconPrimary} size={iconSizes.md} />
+          ) : (
+            <VideoSlash color={colors.iconPrimary} size={iconSizes.md} />
+          )}
+        </IconWrapper>
       </View>
     </Pressable>
   );

package/src/components/Livestream/LivestreamControls/ViewerLeaveStreamButton.tsx

@@ -59,9 +59,7 @@ export const ViewerLeaveStreamButton = ({
     <Pressable
       style={[
         styles.container,
-        {
-          backgroundColor: colors.dark_gray,
-        },
+        { backgroundColor: colors.buttonSecondary },
         viewerLeaveStreamButton.container,
       ]}
       onPress={onLeaveStreamButtonPress}
@@ -79,7 +77,7 @@ export const ViewerLeaveStreamButton = ({
         style={[
           styles.text,
           typefaces.subtitleBold,
-          { color: colors.static_white },
+          { color: colors.textPrimary },
           viewerLeaveStreamButton.text,
         ]}
       >

package/src/components/Livestream/LivestreamControls/ViewerLivestreamControls.tsx

@@ -35,9 +35,7 @@ export const ViewerLivestreamControls = ({
     <View
       style={[
         styles.container,
-        {
-          backgroundColor: colors.static_overlay,
-        },
+        { backgroundColor: colors.sheetOverlay },
         viewerLivestreamControls.container,
       ]}
       onLayout={onLayout}

package/src/components/Livestream/LivestreamLayout/LivestreamLayout.tsx

@@ -80,7 +80,7 @@ export const LivestreamLayout = ({
       style={[
         styles.container,
         landScapeStyles,
-        { backgroundColor: colors.static_grey },
+        { backgroundColor: colors.sheetTertiary },
         livestreamLayout.container,
       ]}
     >

package/src/components/Livestream/LivestreamTopView/DurationBadge.tsx

@@ -120,7 +120,7 @@ export const DurationBadge = ({ mode }: DurationBadgeProps) => {
     <View
       style={[
         styles.container,
-        { backgroundColor: colors.dark_gray },
+        { backgroundColor: colors.sheetTertiary },
         durationBadge.container,
       ]}
     >
@@ -139,7 +139,7 @@ export const DurationBadge = ({ mode }: DurationBadgeProps) => {
       <Text
         style={[
           styles.label,
-          { color: colors.static_white },
+          { color: colors.textPrimary },
           durationBadge.label,
         ]}
       >

package/src/components/Livestream/LivestreamTopView/FollowerCount.tsx

@@ -26,7 +26,7 @@ export const FollowerCount = ({}: FollowerCountProps) => {
     <View
       style={[
         styles.container,
-        { backgroundColor: colors.dark_gray },
+        { backgroundColor: colors.sheetTertiary },
         followerCount.container,
       ]}
     >
@@ -42,7 +42,7 @@ export const FollowerCount = ({}: FollowerCountProps) => {
       <Text
         style={[
           styles.label,
-          { color: colors.static_white },
+          { color: colors.textPrimary },
           followerCount.label,
         ]}
       >

package/src/components/Livestream/LivestreamTopView/HostLivestreamTopView.tsx

@@ -57,7 +57,7 @@ export const HostLivestreamTopView = ({
     <View
       style={[
         styles.container,
-        { backgroundColor: colors.static_overlay },
+        { backgroundColor: colors.sheetOverlay },
         hostLivestreamTopView.container,
       ]}
       onLayout={onLayout}

package/src/components/Livestream/LivestreamTopView/LiveIndicator.tsx

@@ -20,14 +20,14 @@ export const LiveIndicator = ({}: LiveIndicatorProps) => {
     <View
       style={[
         styles.container,
-        { backgroundColor: colors.primary },
+        { backgroundColor: colors.buttonPrimary },
         liveIndicator.container,
       ]}
     >
       <Text
         style={[
           styles.label,
-          { color: colors.static_white },
+          { color: colors.textPrimary },
           typefaces.subtitleBold,
           liveIndicator.label,
         ]}

package/src/components/Livestream/LivestreamTopView/ViewerLivestreamTopView.tsx

@@ -51,7 +51,7 @@ export const ViewerLivestreamTopView = ({
     <View
       style={[
         styles.container,
-        { backgroundColor: colors.static_overlay },
+        { backgroundColor: colors.sheetOverlay },
         viewerLivestreamTopView.container,
       ]}
       onLayout={onLayout}

package/src/components/Livestream/ViewerLivestream/ViewerLivestream.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useMemo } from 'react';
 
 import { StyleSheet, View } from 'react-native';
 import InCallManager from 'react-native-incall-manager';
@@ -61,6 +61,7 @@ export const ViewerLivestream = ({
   ViewerLeaveStreamButton,
   onLeaveStreamHandler,
 }: ViewerLivestreamProps) => {
+  const styles = useStyles();
   const {
     theme: { viewerLivestream },
   } = useTheme();
@@ -123,8 +124,20 @@ export const ViewerLivestream = ({
   );
 };
 
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-});
+const useStyles = () => {
+  const { theme } = useTheme();
+  return useMemo(
+    () =>
+      StyleSheet.create({
+        container: {
+          flex: 1,
+          paddingBottom: theme.variants.insets.bottom,
+          paddingLeft: theme.variants.insets.left,
+          paddingRight: theme.variants.insets.right,
+          paddingTop: theme.variants.insets.top,
+          backgroundColor: theme.colors.sheetPrimary,
+        },
+      }),
+    [theme]
+  );
+};

package/src/components/Participant/FloatingParticipantView/FloatingView/ReanimatedFloatingView.tsx

@@ -64,7 +64,6 @@ try {
           [FloatingViewAlignment.bottomRight]: { x: 0, y: 0 },
         };
       }
-
       return getSnapAlignments({
         rootContainerDimensions: {
           width: containerWidth,

package/src/components/Participant/FloatingParticipantView/index.tsx

@@ -66,6 +66,7 @@ const CustomLocalParticipantViewVideoFallback = () => {
       colors,
       floatingParticipantsView,
       variants: { iconSizes },
+      defaults,
     },
   } = useTheme();
 
@@ -73,12 +74,12 @@ const CustomLocalParticipantViewVideoFallback = () => {
     <View
       style={[
         styles.videoFallback,
-        { backgroundColor: colors.disabled },
+        { backgroundColor: colors.sheetSecondary },
         floatingParticipantsView.videoFallback,
       ]}
     >
       <View style={{ height: iconSizes.md, width: iconSizes.md }}>
-        <VideoSlash color={colors.static_white} />
+        <VideoSlash color={colors.iconPrimary} size={defaults.iconSize} />
       </View>
     </View>
   );
@@ -170,9 +171,7 @@ export const FloatingParticipantView = ({
                 style={[
                   styles.participantViewContainer,
                   participantViewStyle,
-                  {
-                    shadowColor: colors.static_black,
-                  },
+                  { shadowColor: colors.sheetPrimary },
                   floatingParticipantsView.participantViewContainer,
                 ]}
                 // video z order must be one above the one used in grid view
@@ -192,7 +191,6 @@ export const FloatingParticipantView = ({
 
 const styles = StyleSheet.create({
   container: {
-    margin: 8,
     // Needed to make the view on top and draggable
     zIndex: Z_INDEX.IN_MIDDLE,
     flex: 1,

package/src/components/Participant/ParticipantView/ParticipantLabel.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { Pressable, StyleSheet, Text, View } from 'react-native';
 import {
   MicOff,
@@ -12,6 +12,7 @@ import { ParticipantViewProps } from './ParticipantView';
 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.
@@ -43,6 +44,7 @@ export const ParticipantLabel = ({
       },
     },
   } = useTheme();
+  const styles = useStyles();
   const { name, userId, pin, sessionId, isLocalParticipant } = participant;
   const call = useCall();
   const { t } = useI18n();
@@ -67,7 +69,7 @@ export const ParticipantLabel = ({
       <View
         style={[
           styles.container,
-          { backgroundColor: colors.static_overlay },
+          { backgroundColor: colors.sheetOverlay },
           container,
         ]}
         testID={ComponentTestIds.PARTICIPANT_SCREEN_SHARING}
@@ -75,19 +77,16 @@ export const ParticipantLabel = ({
         <View
           style={[
             styles.screenShareIconContainer,
-            {
-              height: iconSizes.md,
-              width: iconSizes.md,
-            },
+            { height: iconSizes.md, width: iconSizes.md },
             screenShareIconContainer,
           ]}
         >
-          <ScreenShareIndicator color={colors.static_white} />
+          <ScreenShareIndicator color={colors.iconPrimary} />
         </View>
         <Text
           style={[
             styles.userNameLabel,
-            { color: colors.static_white },
+            { color: colors.textPrimary },
             typefaces.caption,
             userNameLabel,
           ]}
@@ -103,90 +102,91 @@ export const ParticipantLabel = ({
     <View
       style={[
         styles.container,
-        { backgroundColor: colors.static_overlay },
+        { backgroundColor: colors.sheetOverlay },
         container,
       ]}
     >
-      <Text
-        style={[
-          styles.userNameLabel,
-          { color: colors.static_white },
-          typefaces.caption,
-          userNameLabel,
-        ]}
-        numberOfLines={1}
-      >
-        {participantLabel}
-      </Text>
-      {isAudioMuted && (
-        <View
-          style={[
-            styles.audioMutedIconContainer,
-            {
-              height: iconSizes.xs,
-              width: iconSizes.xs,
-            },
-            audioMutedIconContainer,
-          ]}
-        >
-          <MicOff color={colors.error} />
-        </View>
-      )}
-      {isVideoMuted && (
-        <View
-          style={[
-            styles.videoMutedIconContainer,
-            {
-              height: iconSizes.xs,
-              width: iconSizes.xs,
-            },
-            videoMutedIconContainer,
-          ]}
-        >
-          <VideoSlash color={colors.error} />
+      <View style={styles.wrapper}>
+        <Text style={[styles.userNameLabel, userNameLabel]} numberOfLines={1}>
+          {participantLabel}
+        </Text>
+        {isAudioMuted && (
+          <View
+            style={[styles.audioMutedIconContainer, audioMutedIconContainer]}
+          >
+            <MicOff color={colors.iconPrimary} size={iconSizes.sm} />
+          </View>
+        )}
+        {isVideoMuted && (
+          <View
+            style={[styles.videoMutedIconContainer, videoMutedIconContainer]}
+          >
+            <VideoSlash color={colors.iconPrimary} size={iconSizes.sm} />
+          </View>
+        )}
+        {isPinningEnabled && (
+          <Pressable
+            style={[styles.pinIconContainer, pinIconContainer]}
+            onPress={unPinParticipantHandler}
+          >
+            <PinVertical color={colors.iconPrimary} size={iconSizes.sm} />
+          </Pressable>
+        )}
+        <View style={styles.indicatorWrapper}>
+          <SpeechIndicator
+            isSpeaking={!isAudioMuted && participant.isDominantSpeaker}
+          />
         </View>
-      )}
-      {isPinningEnabled && (
-        <Pressable
-          style={[
-            styles.pinIconContainer,
-            {
-              height: iconSizes.xs,
-              width: iconSizes.xs,
-            },
-            pinIconContainer,
-          ]}
-          onPress={unPinParticipantHandler}
-        >
-          <PinVertical color={colors.static_white} />
-        </Pressable>
-      )}
+      </View>
     </View>
   );
 };
 
-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,
-  },
-});
+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]
+  );
+};