-
Notifications
You must be signed in to change notification settings - Fork 18
/
LobbyFooter.tsx
75 lines (68 loc) · 1.74 KB
/
LobbyFooter.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
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,
},
});