-
Notifications
You must be signed in to change notification settings - Fork 19
/
ToggleCameraFaceButton.tsx
64 lines (58 loc) · 1.73 KB
/
ToggleCameraFaceButton.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
import { OwnCapability } from '@stream-io/video-client';
import { Restricted, useCallStateHooks } from '@stream-io/video-react-bindings';
import React from 'react';
import { CallControlsButton } from './CallControlsButton';
import { CameraSwitch } from '../../../icons';
import { useTheme } from '../../../contexts/ThemeContext';
/**
* Props for the Toggle Camera face button.
*/
export type ToggleCameraFaceButtonProps = {
/**
* Handler to be called when the the video publishing button is pressed.
* @returns void
*/
onPressHandler?: () => void;
};
/**
* Button to toggle camera face(front/back) when in the call.
*/
export const ToggleCameraFaceButton = ({
onPressHandler,
}: ToggleCameraFaceButtonProps) => {
const { useCameraState, useCallSettings } = useCallStateHooks();
const { camera, optimisticIsMute, direction } = useCameraState();
const callSettings = useCallSettings();
const isVideoEnabledInCall = callSettings?.video.enabled;
const {
theme: { colors, toggleCameraFaceButton },
} = useTheme();
const onPress = async () => {
if (onPressHandler) {
onPressHandler();
return;
}
await camera.flip();
};
if (!isVideoEnabledInCall) {
return;
}
return (
<Restricted requiredGrants={[OwnCapability.SEND_VIDEO]}>
<CallControlsButton
onPress={onPress}
color={direction === 'back' ? colors.overlay_dark : colors.static_white}
disabled={optimisticIsMute}
style={toggleCameraFaceButton}
>
<CameraSwitch
color={
direction === 'front' || direction === undefined
? colors.static_black
: colors.static_white
}
/>
</CallControlsButton>
</Restricted>
);
};