self review cleanup fixes

Author: kristian-mkd

packages/react-native-sdk/src/components/Call/Lobby/Lobby.tsx

@@ -84,15 +84,11 @@ export const Lobby = ({
     <View style={[styles.container, lobby.container]}>
       {connectedUser && (
         <>
-          <Text
-            style={[
-              styles.heading,
-              { color: colors.textPrimary },
-              typefaces.heading5,
-              lobby.heading,
-            ]}
-          >
-            {t('Setup your test call')}
+          <Text style={[styles.heading, typefaces.heading5, lobby.heading]}>
+            {t('Before joining')}
+          </Text>
+          <Text style={[styles.subHeading, lobby.subHeading]}>
+            {t('Setup your audio and video')}
           </Text>
           {isVideoEnabledInCall && (
             <View
@@ -167,8 +163,14 @@ const useStyles = (landscape = false) => {
     () =>
       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,

packages/react-native-sdk/src/components/Call/Lobby/LobbyFooter.tsx

@@ -27,17 +27,21 @@ export const LobbyFooter = ({
   const { useCallSession } = useCallStateHooks();
   const { t } = useI18n();
   const session = useCallSession();
-  const participantsCount = session?.participants.length;
+  const numberOfParticipants = session?.participants.length;
 
   const participantsText = useMemo(() => {
-    if (!participantsCount) {
+    if (!numberOfParticipants) {
       return t('Currently there are no other participants in the call.');
     }
-    if (participantsCount === 1) {
-      return t(`There is ${participantsCount} more person in the call.`);
+    if (numberOfParticipants === 1) {
+      return t('There is {{numberOfParticipants}} more person in the call.', {
+        numberOfParticipants,
+      });
     }
-    return t(`There are ${participantsCount} more people in the call.`);
-  }, [participantsCount, t]);
+    return t('There are {{numberOfParticipants}} more people in the call.', {
+      numberOfParticipants,
+    });
+  }, [numberOfParticipants, t]);
 
   return (
     <View style={[styles.mainContainer, lobby.infoContainer]}>

packages/react-native-sdk/src/constants/TestIds.ts

@@ -15,8 +15,6 @@ export enum ComponentTestIds {
   PARTICIPANTS_INFO = 'participants-info',
   PARTICIPANT_SCREEN_SHARING = 'participant-screen-sharing',
   REACTIONS_PICKER = 'reactions-picker',
-  CHAT_UNREAD_BADGE_COUNT_INDICATOR = 'chat-unread-badge-count-indicator',
-  BADGE_COUNT_INDICATOR = 'badge-count-indicator',
 }
 
 export enum ButtonTestIds {

packages/react-native-sdk/src/translations/en.json

@@ -11,7 +11,7 @@
   "End Stream": "End Stream",
   "Leave Stream": "Leave Stream",
   "Live": "Live",
-  "Setup your test call": "Setup your test call",
+  "Before joining": "Before joining",
   "Setup your audio and video": "Setup your audio and video",
   "Setup your audio": "Setup your audio",
   "You are first to Join the call.": "You are first to Join the call.",
@@ -23,5 +23,9 @@
   "{{ numberOfParticipants }} participant(s) are in the call.": "{{ numberOfParticipants }} participant(s) are in the call.",
   "You are about to join a call with id {{ callId }}.": "You are about to join a call with id {{ callId }}.",
   "Preparing call": "Preparing call",
-  "You have left the call": "You have left the call"
+  "You have left the call": "You have left the call",
+  "You are about to join a call.": "You are about to join a call.",
+  "Currently there are no other participants in the call.": "Currently there are no other participants in the call.",
+  "There is {{numberOfParticipants}} more person in the call.": "There is {{numberOfParticipants}} more person in the call.",
+  "There are {{numberOfParticipants}} more people in the call.": "There are {{numberOfParticipants}} more people in the call."
 }

packages/react-native-sdk/src/icons/Effects.tsx renamed to sample-apps/react-native/dogfood/src/assets/Effects.tsx

@@ -1,8 +1,8 @@
 import React, { useMemo } from 'react';
 import { StyleSheet, Text, View } from 'react-native';
 import { useTheme } from '@stream-io/video-react-native-sdk';
-import { ComponentTestIds } from '@stream-io/video-react-native-sdk/src/constants/TestIds';
 import { Z_INDEX } from '../../constants';
+import { ComponentTestIds } from '../../constants/TestIds';
 
 /**
  * A badge that displays a number.

packages/react-native-sdk/src/icons/RecordCall.tsx renamed to sample-apps/react-native/dogfood/src/assets/RecordCall.tsx

@@ -1,6 +1,6 @@
 import { useTheme } from '@stream-io/video-react-native-sdk';
 import { IconWrapper } from '@stream-io/video-react-native-sdk/src/icons';
-import { RecordCall } from '@stream-io/video-react-native-sdk/src/icons/RecordCall';
+import { RecordCall } from '../../assets/RecordCall';
 import React, { useMemo } from 'react';
 import {
   Modal,

sample-apps/react-native/dogfood/src/components/CallControlls/BadgeCountIndicator.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useMemo, useState } from 'react';
 import { View, Text, StyleSheet } from 'react-native';
 import { CallDuration } from '../../assets/CallDuration';
-import { RecordCall } from '@stream-io/video-react-native-sdk/src/icons/RecordCall';
+import { RecordCall } from '../../assets/RecordCall';
 import { IconWrapper } from '@stream-io/video-react-native-sdk/src/icons';
 import { useTheme } from '@stream-io/video-react-native-sdk';
 import { useCallStateHooks } from '@stream-io/video-react-bindings';

sample-apps/react-native/dogfood/src/components/CallControlls/CallRecordingModal.tsx

@@ -3,7 +3,7 @@ import {
   CallControlsButton,
   useTheme,
 } from '@stream-io/video-react-native-sdk';
-import { RecordCall } from '@stream-io/video-react-native-sdk/src/icons/RecordCall';
+import { RecordCall } from '../../assets/RecordCall';
 import { IconWrapper } from '@stream-io/video-react-native-sdk/src/icons';
 import { CallRecordingModal } from './CallRecordingModal';