diff --git a/packages/react-native-sdk/docusaurus/docs/reactnative/04-ui-components/call/lobby.mdx b/packages/react-native-sdk/docusaurus/docs/reactnative/04-ui-components/call/lobby.mdx index 69661f40e0..031c85d1fb 100644 --- a/packages/react-native-sdk/docusaurus/docs/reactnative/04-ui-components/call/lobby.mdx +++ b/packages/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 index b3b93245d1..20d45b670f 100644 --- 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 | null; + /** + * Component to customize the Lobby Footer in the Lobby component. + */ + LobbyFooter?: ComponentType | 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 && } )} - - - {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.'))} - - {JoinCallButton && ( - - )} - + {LobbyFooter && ( + + )} ); }; @@ -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 new file mode 100644 index 0000000000..2f495df6e1 --- /dev/null +++ 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 ( + + + {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.'))} + + {JoinCallButton && ( + + )} + + ); +}; + +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 index 1b70de06e7..9a17b409fa 100644 --- 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 index 556b734f35..ca71632dff 100644 --- 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 index 5e0d8be299..d30f7cb6a1 100644 --- 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",