-
Notifications
You must be signed in to change notification settings - Fork 18
/
ToggleAudioPublishingButton.tsx
55 lines (50 loc) · 1.52 KB
/
ToggleAudioPublishingButton.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
import React from 'react';
import { OwnCapability } from '@stream-io/video-client';
import { Restricted, useCallStateHooks } from '@stream-io/video-react-bindings';
import { CallControlsButton } from './CallControlsButton';
import { Mic, MicOff } from '../../../icons';
import { useTheme } from '../../../contexts/ThemeContext';
/**
* Props for the Toggle Audio publishing button
*/
export type ToggleAudioPublishingButtonProps = {
/**
* Handler to be called when the the video publishing button is pressed.
* @returns void
*/
onPressHandler?: () => void;
};
/**
* Button to toggle audio mute/unmute status while in the call.
*/
export const ToggleAudioPublishingButton = ({
onPressHandler,
}: ToggleAudioPublishingButtonProps) => {
const { useMicrophoneState } = useCallStateHooks();
const { optimisticIsMute, microphone } = useMicrophoneState();
const {
theme: { colors, toggleAudioPublishingButton },
} = useTheme();
const onPress = async () => {
if (onPressHandler) {
onPressHandler();
return;
}
await microphone.toggle();
};
return (
<Restricted requiredGrants={[OwnCapability.SEND_AUDIO]}>
<CallControlsButton
onPress={onPress}
color={!optimisticIsMute ? colors.static_white : colors.overlay_dark}
style={toggleAudioPublishingButton}
>
{!optimisticIsMute ? (
<Mic color={colors.static_black} />
) : (
<MicOff color={colors.static_white} />
)}
</CallControlsButton>
</Restricted>
);
};