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

package/src/components/Call/Lobby/JoinCallButton.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { LobbyProps } from './Lobby';
 import { Pressable, StyleSheet, Text } from 'react-native';
 import { useCall, useI18n } from '@stream-io/video-react-bindings';
@@ -22,6 +22,7 @@ export const JoinCallButton = ({
   const {
     theme: { colors, typefaces, joinCallButton },
   } = useTheme();
+  const styles = useStyles();
   const { t } = useI18n();
   const call = useCall();
 
@@ -45,7 +46,7 @@ export const JoinCallButton = ({
     <Pressable
       style={[
         styles.container,
-        { backgroundColor: colors.primary },
+        { backgroundColor: colors.buttonPrimary },
         joinCallButton.container,
       ]}
       onPress={onPress}
@@ -53,9 +54,7 @@ export const JoinCallButton = ({
       <Text
         style={[
           styles.label,
-          {
-            color: colors.static_white,
-          },
+          { color: colors.textPrimary },
           typefaces.subtitleBold,
           joinCallButton.label,
         ]}
@@ -66,13 +65,20 @@ export const JoinCallButton = ({
   );
 };
 
-const styles = StyleSheet.create({
-  container: {
-    borderRadius: 10,
-    marginTop: 16,
-    paddingVertical: 8,
-  },
-  label: {
-    textAlign: 'center',
-  },
-});
+const useStyles = () => {
+  const { theme } = useTheme();
+  return useMemo(
+    () =>
+      StyleSheet.create({
+        container: {
+          borderRadius: theme.variants.borderRadiusSizes.lg,
+          marginTop: theme.variants.spacingSizes.md,
+          paddingVertical: theme.variants.spacingSizes.sm,
+        },
+        label: {
+          textAlign: 'center',
+        },
+      }),
+    [theme]
+  );
+};

package/src/components/Call/Lobby/Lobby.tsx

@@ -1,6 +1,5 @@
-import React, { ComponentType } from 'react';
-import { StyleSheet, Text, View, ViewStyle } from 'react-native';
-import { MicOff } from '../../../icons';
+import React, { ComponentType, useMemo } from 'react';
+import { StyleSheet, Text, View } from 'react-native';
 import {
   useCallStateHooks,
   useConnectedUser,
@@ -8,7 +7,6 @@ import {
 } from '@stream-io/video-react-bindings';
 import { Avatar } from '../../utility/Avatar';
 import { StreamVideoParticipant } from '@stream-io/video-client';
-import { LOBBY_VIDEO_VIEW_HEIGHT } from '../../../constants';
 import { RTCView } from '@stream-io/react-native-webrtc';
 import { LobbyControls as DefaultLobbyControls } from '../CallControls/LobbyControls';
 import {
@@ -64,6 +62,7 @@ export const Lobby = ({
   const {
     theme: { colors, lobby, typefaces },
   } = useTheme();
+  const styles = useStyles(landscape);
   const connectedUser = useConnectedUser();
   const { useCameraState, useCallSettings } = useCallStateHooks();
   const callSettings = useCallSettings();
@@ -81,47 +80,21 @@ export const Lobby = ({
     name: connectedUser?.name,
   } as StreamVideoParticipant;
 
-  const landscapeStyles: ViewStyle = {
-    flexDirection: landscape ? 'row' : 'column',
-  };
-
   return (
-    <View
-      style={[
-        styles.container,
-        landscapeStyles,
-        { backgroundColor: colors.static_grey },
-        lobby.container,
-      ]}
-    >
+    <View style={[styles.container, lobby.container]}>
       {connectedUser && (
-        <View style={[styles.topContainer, lobby.topContainer]}>
-          <Text
-            style={[
-              styles.heading,
-              { color: colors.static_white },
-              typefaces.heading4,
-              lobby.heading,
-            ]}
-          >
-            {t('Before Joining')}
+        <>
+          <Text style={[styles.heading, typefaces.heading5, lobby.heading]}>
+            {t('Before joining')}
           </Text>
-          <Text
-            style={[
-              styles.subHeading,
-              { color: colors.text_low_emphasis },
-              typefaces.subtitle,
-            ]}
-          >
-            {isVideoEnabledInCall
-              ? t('Setup your audio and video')
-              : t('Setup your audio')}
+          <Text style={[styles.subHeading, lobby.subHeading]}>
+            {t('Setup your audio and video')}
           </Text>
           {isVideoEnabledInCall && (
             <View
               style={[
                 styles.videoContainer,
-                { backgroundColor: colors.disabled },
+                { backgroundColor: colors.sheetTertiary },
                 lobby.videoContainer,
               ]}
             >
@@ -141,48 +114,38 @@ export const Lobby = ({
               <ParticipantStatus />
             </View>
           )}
-        </View>
+        </>
+      )}
+      {LobbyControls && <LobbyControls />}
+      {LobbyFooter && (
+        <LobbyFooter
+          JoinCallButton={JoinCallButton}
+          onJoinCallHandler={onJoinCallHandler}
+        />
       )}
-      <View style={[styles.bottomContainer, lobby.bottomContainer]}>
-        {LobbyControls && <LobbyControls />}
-        {LobbyFooter && (
-          <LobbyFooter
-            JoinCallButton={JoinCallButton}
-            onJoinCallHandler={onJoinCallHandler}
-          />
-        )}
-      </View>
     </View>
   );
 };
 
 const ParticipantStatus = () => {
   const {
-    theme: {
-      colors,
-      typefaces,
-      lobby,
-      variants: { iconSizes },
-    },
+    theme: { colors, typefaces, lobby },
   } = useTheme();
+  const styles = useStyles();
   const connectedUser = useConnectedUser();
-  const { useMicrophoneState } = useCallStateHooks();
   const participantLabel = connectedUser?.name ?? connectedUser?.id;
-  const { status: micStatus } = useMicrophoneState();
   return (
     <View
       style={[
         styles.participantStatusContainer,
-        {
-          backgroundColor: colors.static_overlay,
-        },
+        { backgroundColor: colors.sheetOverlay },
         lobby.participantStatusContainer,
       ]}
     >
       <Text
         style={[
           styles.userNameLabel,
-          { color: colors.static_white },
+          { color: colors.textPrimary },
           typefaces.caption,
           lobby.userNameLabel,
         ]}
@@ -190,69 +153,59 @@ const ParticipantStatus = () => {
       >
         {participantLabel}
       </Text>
-      {(!micStatus || micStatus === 'disabled') && (
-        <View
-          style={[
-            styles.audioMutedIconContainer,
-            {
-              height: iconSizes.xs,
-              width: iconSizes.xs,
-            },
-            lobby.audioMutedIconContainer,
-          ]}
-        >
-          <MicOff color={colors.error} />
-        </View>
-      )}
     </View>
   );
 };
 
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'space-evenly',
-  },
-  topContainer: {
-    flex: 2,
-    justifyContent: 'space-evenly',
-    paddingHorizontal: 12,
-  },
-  heading: {
-    textAlign: 'center',
-  },
-  subHeading: {
-    textAlign: 'center',
-  },
-  videoContainer: {
-    height: LOBBY_VIDEO_VIEW_HEIGHT,
-    borderRadius: 20,
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    overflow: 'hidden',
-    padding: 8,
-  },
-  topView: {},
-  bottomContainer: {
-    flex: 2,
-    justifyContent: 'space-evenly',
-    paddingHorizontal: 12,
-  },
-  participantStatusContainer: {
-    alignSelf: 'flex-start',
-    flexDirection: 'row',
-    alignItems: 'center',
-    padding: 8,
-    borderRadius: 5,
-  },
-  avatarContainer: {
-    flex: 2,
-    justifyContent: 'center',
-  },
-  userNameLabel: {
-    flexShrink: 1,
-  },
-  audioMutedIconContainer: {
-    marginLeft: 8,
-  },
-});
+const useStyles = (landscape = false) => {
+  const { theme } = useTheme();
+  return useMemo(
+    () =>
+      StyleSheet.create({
+        heading: {
+          textAlign: 'center',
+          color: theme.colors.textPrimary,
+          paddingBottom: theme.variants.spacingSizes.xs,
+        },
+        subHeading: {
+          textAlign: 'center',
+          paddingBottom: theme.variants.spacingSizes.md,
+          color: theme.colors.textSecondary,
+        },
+        container: {
+          flex: 1,
+          justifyContent: 'center',
+          backgroundColor: theme.colors.sheetPrimary,
+          paddingRight:
+            theme.variants.insets.right + theme.variants.spacingSizes.sm,
+          paddingLeft:
+            theme.variants.insets.left + theme.variants.spacingSizes.sm,
+          paddingTop: theme.variants.insets.top,
+          paddingBottom: theme.variants.insets.bottom,
+        },
+        videoContainer: {
+          height: landscape ? '40%' : '50%',
+          borderRadius: theme.variants.borderRadiusSizes.md,
+          justifyContent: 'space-between',
+          alignItems: 'center',
+          overflow: 'hidden',
+        },
+        topView: {},
+        participantStatusContainer: {
+          alignSelf: 'flex-start',
+          flexDirection: 'row',
+          alignItems: 'center',
+          padding: theme.variants.spacingSizes.sm,
+          borderTopRightRadius: theme.variants.borderRadiusSizes.sm,
+        },
+        avatarContainer: {
+          flex: 2,
+          justifyContent: 'center',
+        },
+        userNameLabel: {
+          flexShrink: 1,
+        },
+      }),
+    [theme, landscape]
+  );
+};

package/src/components/Call/Lobby/LobbyFooter.tsx

@@ -1,12 +1,9 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { LobbyProps } from './Lobby';
 import { View, StyleSheet, Text } from 'react-native';
-import {
-  useCall,
-  useCallStateHooks,
-  useI18n,
-} from '@stream-io/video-react-bindings';
 import { useTheme } from '../../../contexts/ThemeContext';
+import { useCallStateHooks, useI18n } from '@stream-io/video-react-bindings';
+import { Lock } from '../../../icons/Lock';
 
 /**
  * Props for the Lobby Footer in the Lobby component.
@@ -24,42 +21,44 @@ export const LobbyFooter = ({
   JoinCallButton,
 }: LobbyFooterProps) => {
   const {
-    theme: { colors, lobby, typefaces },
+    theme: { colors, lobby, variants },
   } = useTheme();
+  const styles = useStyles();
   const { useCallSession } = useCallStateHooks();
-
   const { t } = useI18n();
-
-  const call = useCall();
   const session = useCallSession();
+  const numberOfParticipants = session?.participants.length;
 
-  const participantsCount = session?.participants.length;
+  const participantsText = useMemo(() => {
+    if (!numberOfParticipants) {
+      return t('Currently there are no other participants in the call.');
+    }
+    if (numberOfParticipants === 1) {
+      return t('There is {{numberOfParticipants}} more person in the call.', {
+        numberOfParticipants,
+      });
+    }
+    return t('There are {{numberOfParticipants}} more people in the call.', {
+      numberOfParticipants,
+    });
+  }, [numberOfParticipants, t]);
 
   return (
-    <View
-      style={[
-        styles.infoContainer,
-        { backgroundColor: colors.static_overlay },
-        lobby.infoContainer,
-      ]}
-    >
-      <Text
-        style={[
-          { color: colors.static_white },
-          typefaces.subtitleBold,
-          lobby.infoText,
-        ]}
-      >
-        {t('You are about to join a call with id {{ callId }}.', {
-          callId: call?.id,
-        }) +
-          ' ' +
-          (participantsCount
-            ? t('{{ numberOfParticipants }} participant(s) are in the call.', {
-                numberOfParticipants: participantsCount,
-              })
-            : t('You are first to join the call.'))}
-      </Text>
+    <View style={[styles.mainContainer, lobby.infoContainer]}>
+      <View style={styles.textContainer}>
+        <View style={styles.iconContainer}>
+          <Lock color={colors.iconPrimary} size={variants.iconSizes.md} />
+        </View>
+        <Text
+          style={[
+            { color: colors.textPrimary },
+            styles.infoText,
+            lobby.infoText,
+          ]}
+        >
+          {t('You are about to join a call.') + ' ' + participantsText}
+        </Text>
+      </View>
       {JoinCallButton && (
         <JoinCallButton onJoinCallHandler={onJoinCallHandler} />
       )}
@@ -67,9 +66,32 @@ export const LobbyFooter = ({
   );
 };
 
-const styles = StyleSheet.create({
-  infoContainer: {
-    padding: 12,
-    borderRadius: 10,
-  },
-});
+const useStyles = () => {
+  const { theme } = useTheme();
+  return useMemo(
+    () =>
+      StyleSheet.create({
+        mainContainer: {
+          padding: theme.variants.spacingSizes.sm,
+        },
+        textContainer: {
+          flexDirection: 'row',
+          alignItems: 'center',
+          justifyContent: 'center',
+          backgroundColor: theme.colors.sheetTertiary,
+          paddingHorizontal: theme.variants.spacingSizes.md,
+          paddingVertical: theme.variants.spacingSizes.xs,
+          borderRadius: theme.variants.borderRadiusSizes.sm,
+        },
+        iconContainer: {
+          marginRight: theme.variants.spacingSizes.sm,
+        },
+        infoText: {
+          fontSize: theme.variants.fontSizes.sm,
+          lineHeight: 20,
+          fontWeight: '400',
+        },
+      }),
+    [theme]
+  );
+};

package/src/components/Call/RingingCallContent/IncomingCall.tsx

@@ -12,10 +12,6 @@ import {
   useI18n,
 } from '@stream-io/video-react-bindings';
 import { UserInfo } from './UserInfo';
-import {
-  CallTopView as DefaultCallTopView,
-  CallTopViewProps,
-} from '../CallTopView';
 import {
   IncomingCallControls as DefaultIncomingCallControls,
   IncomingCallControlsProps,
@@ -27,10 +23,6 @@ import { useApplyDefaultMediaStreamSettings } from '../../../hooks/useApplyDefau
  * Props for the IncomingCall Component.
  */
 export type IncomingCallProps = IncomingCallControlsProps & {
-  /**
-   * Prop to customize the CallTopView component in the IncomingCall component.
-   */
-  CallTopView?: React.ComponentType<CallTopViewProps> | null;
   /**
    * Prop to customize the IncomingCall controls.
    */
@@ -49,7 +41,6 @@ export type IncomingCallProps = IncomingCallControlsProps & {
 export const IncomingCall = ({
   onAcceptCallHandler,
   onRejectCallHandler,
-  CallTopView = DefaultCallTopView,
   IncomingCallControls = DefaultIncomingCallControls,
   landscape,
 }: IncomingCallProps) => {
@@ -66,7 +57,6 @@ export const IncomingCall = ({
 
   return (
     <Background>
-      {CallTopView && <CallTopView />}
       <View
         style={[styles.content, landscapeContentStyles, incomingCall.content]}
       >
@@ -75,7 +65,7 @@ export const IncomingCall = ({
           <Text
             style={[
               styles.incomingCallText,
-              { color: colors.static_white },
+              { color: colors.textPrimary },
               typefaces.heading6,
               incomingCall.incomingCallText,
             ]}
@@ -128,7 +118,7 @@ const Background: React.FunctionComponent<{
         }}
         style={[
           styles.background,
-          { backgroundColor: colors.static_grey },
+          { backgroundColor: colors.sheetTertiary },
           incomingCall.background,
         ]}
       >
@@ -140,7 +130,7 @@ const Background: React.FunctionComponent<{
     <View
       style={[
         styles.background,
-        { backgroundColor: colors.static_grey },
+        { backgroundColor: colors.sheetTertiary },
         incomingCall.background,
       ]}
     >
@@ -156,7 +146,7 @@ export const styles = StyleSheet.create({
   content: {
     flex: 1,
   },
-  topContainer: { flex: 1 },
+  topContainer: { flex: 1, justifyContent: 'center' },
   incomingCallText: {
     marginTop: 8,
     textAlign: 'center',

package/src/components/Call/RingingCallContent/OutgoingCall.tsx

@@ -9,10 +9,6 @@ import {
   OutgoingCallControls as DefaultOutgoingCallControls,
   OutgoingCallControlsProps,
 } from '../CallControls';
-import {
-  CallTopView as DefaultCallTopView,
-  CallTopViewProps,
-} from '../CallTopView';
 import { useCallMediaStreamCleanup } from '../../../hooks/internal/useCallMediaStreamCleanup';
 import { useApplyDefaultMediaStreamSettings } from '../../../hooks/useApplyDefaultMediaStreamSettings';
 
@@ -20,10 +16,6 @@ import { useApplyDefaultMediaStreamSettings } from '../../../hooks/useApplyDefau
  * Props for the OutgoingCall Component.
  */
 export type OutgoingCallProps = OutgoingCallControlsProps & {
-  /**
-   * Prop to customize the CallTopView component in the IncomingCall component.
-   */
-  CallTopView?: React.ComponentType<CallTopViewProps> | null;
   /**
    * Prop to customize the OutgoingCall controls.
    */
@@ -40,7 +32,6 @@ export type OutgoingCallProps = OutgoingCallControlsProps & {
  * Used after the user has initiated a call.
  */
 export const OutgoingCall = ({
-  CallTopView = DefaultCallTopView,
   OutgoingCallControls = DefaultOutgoingCallControls,
   landscape,
 }: OutgoingCallProps) => {
@@ -65,7 +56,6 @@ export const OutgoingCall = ({
           outgoingCall.container,
         ]}
       >
-        {CallTopView && <CallTopView />}
         <View
           style={[styles.content, landscapeContentStyles, outgoingCall.content]}
         >
@@ -74,7 +64,7 @@ export const OutgoingCall = ({
             <Text
               style={[
                 styles.callingText,
-                { color: colors.static_white },
+                { color: colors.textPrimary },
                 typefaces.heading6,
                 outgoingCall.callingText,
               ]}
@@ -115,7 +105,7 @@ const Background = () => {
       <View
         style={[
           styles.background,
-          { backgroundColor: colors.static_grey },
+          { backgroundColor: colors.sheetSecondary },
           outgoingCall.background,
         ]}
       />
@@ -125,7 +115,7 @@ const Background = () => {
     <View
       style={[
         styles.background,
-        { backgroundColor: colors.static_grey },
+        { backgroundColor: colors.sheetSecondary },
         outgoingCall.background,
       ]}
     >
@@ -147,7 +137,7 @@ const styles = StyleSheet.create({
   container: {
     zIndex: Z_INDEX.IN_MIDDLE,
   },
-  topContainer: { flex: 1 },
+  topContainer: { flex: 1, justifyContent: 'center' },
   content: {
     flex: 1,
   },

package/src/components/Call/RingingCallContent/RingingCallContent.tsx

@@ -6,7 +6,6 @@ import {
   CallContent as DefaultCallContent,
   CallContentProps,
 } from '../CallContent';
-import { CallTopViewProps } from '../CallTopView';
 import {
   IncomingCall as DefaultIncomingCall,
   IncomingCallProps,
@@ -41,10 +40,6 @@ export type RingingCallContentProps = {
    * Prop to customize the accepted CallContent component in the RingingCallContent. This is shown after the call is accepted.
    */
   CallContent?: React.ComponentType<CallContentProps> | null;
-  /**
-   * Prop to customize the CallTopView component in the RingingCallContent.
-   */
-  CallTopView?: React.ComponentType<CallTopViewProps> | null;
   /**
    * Prop to override the component shown when the call is left.
    */
@@ -69,7 +64,6 @@ const RingingCallPanel = ({
   IncomingCall = DefaultIncomingCall,
   OutgoingCall = DefaultOutgoingCall,
   CallContent = DefaultCallContent,
-  CallTopView,
   CallLeftIndicator = DefaultCallLeftIndicator,
   CallPreparingIndicator = DefaultCallPreparingIndicator,
   landscape,
@@ -84,12 +78,8 @@ const RingingCallPanel = ({
   switch (callingState) {
     case CallingState.RINGING:
       return isCallCreatedByMe
-        ? OutgoingCall && (
-            <OutgoingCall CallTopView={CallTopView} landscape={landscape} />
-          )
-        : IncomingCall && (
-            <IncomingCall CallTopView={CallTopView} landscape={landscape} />
-          );
+        ? OutgoingCall && <OutgoingCall landscape={landscape} />
+        : IncomingCall && <IncomingCall landscape={landscape} />;
     case CallingState.LEFT:
       return (
         CallLeftIndicator && <CallLeftIndicator onBackPress={onBackPress} />
@@ -101,11 +91,7 @@ const RingingCallPanel = ({
         )
       );
     default:
-      return (
-        CallContent && (
-          <CallContent CallTopView={CallTopView} landscape={landscape} />
-        )
-      );
+      return CallContent && <CallContent landscape={landscape} />;
   }
 };
 

package/src/components/Call/RingingCallContent/TextBasedIndicator.tsx

@@ -18,7 +18,7 @@ export const TextBasedIndicator = (props: TextBasedIndicatorProps) => {
   } = useTheme();
 
   return (
-    <View style={[styles.container, { backgroundColor: colors.static_grey }]}>
+    <View style={[styles.container, { backgroundColor: colors.sheetTertiary }]}>
       {props.onBackPress && (
         <View style={styles.backContainer}>
           <Pressable
@@ -31,7 +31,7 @@ export const TextBasedIndicator = (props: TextBasedIndicatorProps) => {
               },
             ]}
           >
-            <Back color={colors.static_white} />
+            <Back color={colors.iconPrimary} />
           </Pressable>
         </View>
       )}
@@ -39,7 +39,7 @@ export const TextBasedIndicator = (props: TextBasedIndicatorProps) => {
         <Text
           style={[
             styles.text,
-            { color: colors.static_white },
+            { color: colors.textPrimary },
             typefaces.heading6,
           ]}
         >

package/src/components/Call/RingingCallContent/UserInfo.tsx

@@ -109,7 +109,7 @@ export const UserInfo = ({
         style={[
           styles.name,
           fontStyleByMembersCount,
-          { color: colors.static_white },
+          { color: colors.textPrimary },
           userInfo.name,
         ]}
       >