-
Notifications
You must be signed in to change notification settings - Fork 19
/
JoinCallButton.tsx
78 lines (73 loc) · 1.72 KB
/
JoinCallButton.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
76
77
78
import React from 'react';
import { LobbyProps } from './Lobby';
import { Pressable, StyleSheet, Text } from 'react-native';
import { useCall, useI18n } from '@stream-io/video-react-bindings';
import { useTheme } from '../../../contexts/ThemeContext';
import { getLogger } from '@stream-io/video-client';
/**
* Props for the Join Call Button in the Lobby component.
*/
export type JoinCallButtonProps = Pick<LobbyProps, 'onJoinCallHandler'> & {
onPressHandler?: () => void;
};
/**
* The default Join call button to be used in the Lobby component.
*/
export const JoinCallButton = ({
onJoinCallHandler,
onPressHandler,
}: JoinCallButtonProps) => {
const {
theme: { colors, typefaces, joinCallButton },
} = useTheme();
const { t } = useI18n();
const call = useCall();
const onPress = async () => {
if (onPressHandler) {
onPressHandler();
return;
}
try {
await call?.join({ create: true });
if (onJoinCallHandler) {
onJoinCallHandler();
}
} catch (error) {
const logger = getLogger(['JoinCallButton']);
logger('error', 'Error joining call:', error);
}
};
return (
<Pressable
style={[
styles.container,
{ backgroundColor: colors.primary },
joinCallButton.container,
]}
onPress={onPress}
>
<Text
style={[
styles.label,
{
color: colors.static_white,
},
typefaces.subtitleBold,
joinCallButton.label,
]}
>
{t('Join')}
</Text>
</Pressable>
);
};
const styles = StyleSheet.create({
container: {
borderRadius: 10,
marginTop: 16,
paddingVertical: 8,
},
label: {
textAlign: 'center',
},
});