test/crm
1
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: show call ui

Browse Source
This commit is contained in:
Shariq Ansari 2024-03-13 15:31:51 +05:30
parent 475d206ee6
commit a9b56457eb
1 changed files with 108 additions and 98 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

206
frontend/src/components/CallUI.vue
View File

@ -1,107 +1,114 @@
<template> <template>
<div <div v-show="showCallPopup">
v-show="showCallPopup" <div
ref="callPopup" ref="callPopup"
class="fixed z-10 flex w-60 cursor-move select-none flex-col rounded-lg bg-gray-900 p-4 text-gray-300 shadow-2xl" class="fixed z-10 flex w-60 cursor-move select-none flex-col rounded-lg bg-gray-900 p-4 text-gray-300 shadow-2xl"
:style="style" :style="style"
> >
<div class="flex flex-row-reverse items-center gap-1"> <div class="flex flex-row-reverse items-center gap-1">
<MinimizeIcon class="h-4 w-4 cursor-pointer" @click="toggleCallWindow" /> <MinimizeIcon
</div> class="h-4 w-4 cursor-pointer"
<div class="flex flex-col items-center justify-center gap-3"> @click="toggleCallWindow"
<Avatar
:image="contact.image"
:label="contact.full_name"
class="relative flex !h-24 !w-24 items-center justify-center [&>div]:text-[30px]"
:class="onCall || calling ? '' : 'pulse'"
/>
<div class="flex flex-col items-center justify-center gap-1">
<div class="text-xl font-medium">
{{ contact.full_name }}
</div>
<div class="text-sm text-gray-600">{{ contact.mobile_no }}</div>
</div>
<CountUpTimer ref="counterUp">
<div v-if="onCall" class="my-1 text-base">
{{ counterUp?.updatedTime }}
</div>
</CountUpTimer>
<div v-if="!onCall" class="my-1 text-base">
{{
callStatus == 'ringing'
? 'Ringing...'
: calling
? 'Calling...'
: 'Incoming call...'
}}
</div>
<div v-if="onCall" class="flex gap-2">
<Button
:icon="muted ? 'mic-off' : 'mic'"
class="rounded-full"
@click="toggleMute"
/> />
<!-- <Button class="rounded-full"> </div>
<div class="flex flex-col items-center justify-center gap-3">
<Avatar
:image="contact.image"
:label="contact.full_name"
class="relative flex !h-24 !w-24 items-center justify-center [&>div]:text-[30px]"
:class="onCall || calling ? '' : 'pulse'"
/>
<div class="flex flex-col items-center justify-center gap-1">
<div class="text-xl font-medium">
{{ contact.full_name }}
</div>
<div class="text-sm text-gray-600">{{ contact.mobile_no }}</div>
</div>
<CountUpTimer ref="counterUp">
<div v-if="onCall" class="my-1 text-base">
{{ counterUp?.updatedTime }}
</div>
</CountUpTimer>
<div v-if="!onCall" class="my-1 text-base">
{{
callStatus == 'initiating'
? 'Initiating call...'
: callStatus == 'ringing'
? 'Ringing...'
: calling
? 'Calling...'
: 'Incoming call...'
}}
</div>
<div v-if="onCall" class="flex gap-2">
<Button
:icon="muted ? 'mic-off' : 'mic'"
class="rounded-full"
@click="toggleMute"
/>
<!-- <Button class="rounded-full">
<template #icon> <template #icon>
<DialpadIcon class="cursor-pointer rounded-full" /> <DialpadIcon class="cursor-pointer rounded-full" />
</template> </template>
</Button> --> </Button> -->
<Button class="rounded-full"> <Button class="rounded-full">
<template #icon> <template #icon>
<NoteIcon <NoteIcon
class="h-4 w-4 cursor-pointer rounded-full text-gray-900" class="h-4 w-4 cursor-pointer rounded-full text-gray-900"
@click="showNoteModal = true" @click="showNoteModal = true"
/> />
</template> </template>
</Button> </Button>
<Button class="rounded-full bg-red-600 hover:bg-red-700"> <Button class="rounded-full bg-red-600 hover:bg-red-700">
<template #icon> <template #icon>
<PhoneIcon <PhoneIcon
class="h-4 w-4 rotate-[135deg] fill-white text-white" class="h-4 w-4 rotate-[135deg] fill-white text-white"
@click="hangUpCall" @click="hangUpCall"
/> />
</template> </template>
</Button> </Button>
</div> </div>
<div v-else-if="calling"> <div v-else-if="calling || !onCall">
<Button <Button
size="md" size="md"
variant="solid" variant="solid"
theme="red" theme="red"
label="Cancel" label="Cancel"
@click="cancelCall" @click="cancelCall"
class="rounded-lg" class="rounded-lg"
> :disabled="!onCall && !calling"
<template #prefix> >
<PhoneIcon class="h-4 w-4 rotate-[135deg] fill-white" /> <template #prefix>
</template> <PhoneIcon class="h-4 w-4 rotate-[135deg] fill-white" />
</Button> </template>
</div> </Button>
<div v-else class="flex gap-2"> </div>
<Button <div v-else class="flex gap-2">
size="md" <Button
variant="solid" size="md"
theme="green" variant="solid"
label="Accept" theme="green"
class="rounded-lg" label="Accept"
@click="acceptIncomingCall" class="rounded-lg"
> @click="acceptIncomingCall"
<template #prefix> >
<PhoneIcon class="h-4 w-4 fill-white" /> <template #prefix>
</template> <PhoneIcon class="h-4 w-4 fill-white" />
</Button> </template>
<Button </Button>
size="md" <Button
variant="solid" size="md"
theme="red" variant="solid"
label="Reject" theme="red"
class="rounded-lg" label="Reject"
@click="rejectIncomingCall" class="rounded-lg"
> @click="rejectIncomingCall"
<template #prefix> >
<PhoneIcon class="h-4 w-4 rotate-[135deg] fill-white" /> <template #prefix>
</template> <PhoneIcon class="h-4 w-4 rotate-[135deg] fill-white" />
</Button> </template>
</Button>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -384,6 +391,9 @@ async function makeOutgoingCall(number) {
params: { To: contact.value.mobile_no }, params: { To: contact.value.mobile_no },
}) })
showCallPopup.value = true
callStatus.value = 'initiating'
_call.value.on('messageReceived', (message) => { _call.value.on('messageReceived', (message) => {
let info = message.content let info = message.content
callStatus.value = info.CallStatus callStatus.value = info.CallStatus