95 lines
4.4 KiB
TypeScript
95 lines
4.4 KiB
TypeScript
import { useCalls } from "@/app/providers/CallProvider/useCalls";
|
|
import { useUserInformation } from "@/app/providers/InformationProvider/useUserInformation";
|
|
import { Box, Flex, Loader, Text } from "@mantine/core";
|
|
import classes from "./ActiveCall.module.css";
|
|
import { CallState } from "@/app/providers/CallProvider/CallProvider";
|
|
import { IconMicrophone, IconMicrophoneOff, IconPhoneX, IconVolume, IconVolumeOff } from "@tabler/icons-react";
|
|
import { translateDurationToTime } from "@/app/providers/CallProvider/translateDurationTime";
|
|
|
|
export function ActiveCall() {
|
|
const {activeCall, callState, duration, muted, sound, close, setMuted, setSound, setShowCallView} = useCalls();
|
|
const [userInfo] = useUserInformation(activeCall);
|
|
//const colors = useRosettaColors();
|
|
|
|
if(activeCall == ""){
|
|
return <></>
|
|
}
|
|
|
|
const getConnectingClass = () => {
|
|
if(callState === CallState.CONNECTING){
|
|
return classes.connecting;
|
|
}
|
|
if(callState === CallState.ACTIVE){
|
|
return classes.active;
|
|
}
|
|
return "";
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<Box py={4} style={{
|
|
cursor: 'pointer'
|
|
}} px={10} className={getConnectingClass()} onClick={() => setShowCallView(true)}>
|
|
<Flex align={'center'} justify={'row'} gap={10}>
|
|
<Flex w={'100%'} justify={'space-between'} align={'center'}>
|
|
<Flex>
|
|
{!muted && (
|
|
<IconMicrophoneOff style={{
|
|
cursor: 'pointer'
|
|
}} onClick={(e) => {
|
|
e.stopPropagation();
|
|
setMuted(true);
|
|
}} size={16} color={'#fff'}></IconMicrophoneOff>
|
|
)}
|
|
{muted && (
|
|
<IconMicrophone style={{
|
|
cursor: 'pointer'
|
|
}} onClick={(e) => {
|
|
e.stopPropagation();
|
|
setMuted(false);
|
|
}} size={16} color={'#fff'}></IconMicrophone>
|
|
)}
|
|
</Flex>
|
|
<Flex justify={'center'} align={'center'} gap={'xs'}>
|
|
<Text fw={500} c={'#fff'} style={{
|
|
userSelect: 'none'
|
|
}} fz={13}>{userInfo?.title || activeCall}</Text>
|
|
{callState === CallState.CONNECTING && (
|
|
<Loader type={'dots'} size={12} color="white"></Loader>
|
|
)}
|
|
{callState == CallState.ACTIVE && (
|
|
<Text fw={500} c={'#ffffff'} style={{
|
|
userSelect: 'none'
|
|
}} fz={12}>{translateDurationToTime(duration)}</Text>
|
|
)}
|
|
</Flex>
|
|
<Flex gap={'xs'} align={'center'} justify={'center'}>
|
|
{sound && (
|
|
<IconVolumeOff style={{
|
|
cursor: 'pointer'
|
|
}} size={16} onClick={(e) => {
|
|
e.stopPropagation();
|
|
setSound(false)
|
|
}} color={'#fff'}></IconVolumeOff>
|
|
)}
|
|
{!sound && (
|
|
<IconVolume style={{
|
|
cursor: 'pointer'
|
|
}} size={16} onClick={(e) => {
|
|
e.stopPropagation();
|
|
setSound(true)
|
|
}} color={'#fff'}></IconVolume>
|
|
)}
|
|
<IconPhoneX style={{
|
|
cursor: 'pointer'
|
|
}} onClick={(e) => {
|
|
e.stopPropagation();
|
|
close();
|
|
}} size={16} color={'#fff'}></IconPhoneX>
|
|
</Flex>
|
|
</Flex>
|
|
</Flex>
|
|
</Box>
|
|
</>
|
|
);
|
|
} |