feat(react-native): add lobby footer component (#1091)

In adding a meeting UI, I found I couldn't customise the text above the button in the Lobby component. As we will be using the channelId for the callId, I didn't like that it said they were joining this seemingly random ID. This would likely be confusing to the user as they have no reference to this. Changes - - Add a LobbyFooter component to the Lobby and the ability to customise it - Updated the documentation Tested - - I've tested this causes no changes in behaviour in the DogFood app and that I customise it Note - I've also updated the translation as there was a random capital "J" in join. I can revert if this was intentional.
GetStream · Oct 4, 2023 · 4945eb3 · 4945eb3
1 parent 4390c8d
commit 4945eb3
Show file tree

Hide file tree

Showing 6 changed files with 102 additions and 38 deletions.
diff --git a/...es/react-native-sdk/docusaurus/docs/reactnative/04-ui-components/call/lobby.mdx b/...es/react-native-sdk/docusaurus/docs/reactnative/04-ui-components/call/lobby.mdx
@@ -52,3 +52,11 @@ Prop to customize the Join call button in the Lobby component.
 | Type                          | Default Value                                                                                                                                     |
 | ----------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `ComponentType`\| `undefined` | [`JoinCallButton`](https://github.com/GetStream/stream-video-js/blob/main/packages/react-native-sdk/src/components/Call/Lobby/JoinCallButton.tsx) |
+
+### `LobbyFooter`
+
+Prop to customize the Lobby Footer in the Lobby component.
+
+| Type                          | Default Value                                                                                                                               |
+| ----------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------- |
+| `ComponentType`\| `undefined` | [`LobbyFooter`](https://github.com/GetStream/stream-video-js/blob/main/packages/react-native-sdk/src/components/Call/Lobby/LobbyFooter.tsx) |
diff --git a/packages/react-native-sdk/src/components/Call/Lobby/Lobby.tsx b/packages/react-native-sdk/src/components/Call/Lobby/Lobby.tsx
@@ -19,6 +19,10 @@ import {
 import { useTheme } from '../../../contexts/ThemeContext';
 import { useCallMediaStreamCleanup } from '../../../hooks/internal/useCallMediaStreamCleanup';
 import type { MediaStream } from '@stream-io/react-native-webrtc';
+import {
+  LobbyFooter as DefaultLobbyFooter,
+  LobbyFooterProps,
+} from './LobbyFooter';
 
 /**
  * Props for the Lobby Component.
@@ -36,6 +40,10 @@ export type LobbyProps = {
    * Component to customize the Join Call Button in the Lobby component.
    */
   JoinCallButton?: ComponentType<JoinCallButtonProps> | null;
+  /**
+   * Component to customize the Lobby Footer in the Lobby component.
+   */
+  LobbyFooter?: ComponentType<LobbyFooterProps> | null;
 };
 
 /**
@@ -45,20 +53,19 @@ export const Lobby = ({
   onJoinCallHandler,
   LobbyControls = DefaultLobbyControls,
   JoinCallButton = DefaultJoinCallButton,
+  LobbyFooter = DefaultLobbyFooter,
 }: LobbyProps) => {
   const {
     theme: { colors, lobby, typefaces },
   } = useTheme();
   const connectedUser = useConnectedUser();
-  const { useCameraState, useCallSession } = useCallStateHooks();
+  const { useCameraState } = useCallStateHooks();
   const { status: cameraStatus } = useCameraState();
   const call = useCall();
-  const session = useCallSession();
   const { t } = useI18n();
   const localVideoStream = call?.camera.state.mediaStream as unknown as
     | MediaStream
     | undefined;
-  const participantsCount = session?.participants.length;
 
   useCallMediaStreamCleanup();
 
@@ -122,35 +129,12 @@ export const Lobby = ({
           {LobbyControls && <LobbyControls />}
         </>
       )}
-      <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>
-        {JoinCallButton && (
-          <JoinCallButton onJoinCallHandler={onJoinCallHandler} />
-        )}
-      </View>
+      {LobbyFooter && (
+        <LobbyFooter
+          JoinCallButton={JoinCallButton}
+          onJoinCallHandler={onJoinCallHandler}
+        />
+      )}
     </View>
   );
 };
@@ -229,10 +213,6 @@ const styles = StyleSheet.create({
     padding: 8,
   },
   topView: {},
-  infoContainer: {
-    padding: 12,
-    borderRadius: 10,
-  },
   participantStatusContainer: {
     alignSelf: 'flex-start',
     flexDirection: 'row',

diff --git a/packages/react-native-sdk/src/components/Call/Lobby/LobbyFooter.tsx b/packages/react-native-sdk/src/components/Call/Lobby/LobbyFooter.tsx
@@ -0,0 +1,75 @@
+import React 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';
+
+/**
+ * Props for the Lobby Footer in the Lobby component.
+ */
+export type LobbyFooterProps = Pick<
+  LobbyProps,
+  'onJoinCallHandler' | 'JoinCallButton'
+>;
+
+/**
+ * The default Lobby Footer to be used in the Lobby component.
+ */
+export const LobbyFooter = ({
+  onJoinCallHandler,
+  JoinCallButton,
+}: LobbyFooterProps) => {
+  const {
+    theme: { colors, lobby, typefaces },
+  } = useTheme();
+  const { useCallSession } = useCallStateHooks();
+
+  const { t } = useI18n();
+
+  const call = useCall();
+  const session = useCallSession();
+
+  const participantsCount = session?.participants.length;
+
+  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>
+      {JoinCallButton && (
+        <JoinCallButton onJoinCallHandler={onJoinCallHandler} />
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  infoContainer: {
+    padding: 12,
+    borderRadius: 10,
+  },
+});
diff --git a/packages/react-native-sdk/src/components/Call/Lobby/index.ts b/packages/react-native-sdk/src/components/Call/Lobby/index.ts
@@ -1,2 +1,3 @@
 export * from './Lobby';
 export * from './JoinCallButton';
+export * from './LobbyFooter';
diff --git a/packages/react-native-sdk/src/translations/en.json b/packages/react-native-sdk/src/translations/en.json
@@ -6,7 +6,7 @@
   "Join": "Join",
   "You": "You",
   "Reconnecting...": "Reconnecting...",
-  "You are first to Join the call.": "You are first to Join the call.",
+  "You are first to join the call.": "You are first to join the call.",
   "Participants ({{ numberOfParticipants }})": "Participants ({{ numberOfParticipants }})",
   "{{ userName }} is sharing their screen": "{{ userName }} is sharing their screen",
   "{{ numberOfParticipants }} participant(s) are in the call.": "{{ numberOfParticipants }} participant(s) are in the call.",

diff --git a/sample-apps/react-native/dogfood/src/translations/en.json b/sample-apps/react-native/dogfood/src/translations/en.json
@@ -2,7 +2,7 @@
   "Cancel": "Cancel",
   "Before Joining": "Before Joining",
   "Setup your audio and video": "Setup your audio and video",
-  "You are first to Join the call.": "You are first to Join the call.",
+  "You are first to join the call.": "You are first to join the call.",
   "Join as Guest or Anonymously": "Join as Guest or Anonymously",
   "Join with your Stream Account": "Join with your Stream Account",
   "Stream DogFood App": "Stream DogFood App",