74 lines
2.7 KiB
HTML
74 lines
2.7 KiB
HTML
@if (session()) {
|
|
<div class="fixed inset-0 z-[120] bg-black/60 backdrop-blur-sm"></div>
|
|
|
|
<div class="pointer-events-none fixed inset-0 z-[121] flex items-center justify-center p-4">
|
|
<section
|
|
class="pointer-events-auto w-full max-w-sm rounded-lg border border-border bg-card shadow-2xl"
|
|
role="dialog"
|
|
aria-modal="true"
|
|
aria-labelledby="incoming-call-title"
|
|
>
|
|
<div class="flex flex-col items-center px-6 pb-6 pt-7 text-center">
|
|
<div class="relative">
|
|
@if (caller(); as callerUser) {
|
|
<app-user-avatar
|
|
[avatarUrl]="callerUser.avatarUrl"
|
|
[name]="callerUser.displayName || callerUser.username"
|
|
[showStatusBadge]="true"
|
|
[status]="callerUser.status"
|
|
size="xl"
|
|
/>
|
|
} @else {
|
|
<div class="grid h-16 w-16 place-items-center rounded-full bg-secondary text-xl font-semibold text-secondary-foreground">
|
|
{{ callerName().charAt(0).toUpperCase() }}
|
|
</div>
|
|
}
|
|
|
|
<div class="absolute -bottom-1 -right-1 grid h-7 w-7 place-items-center rounded-full border border-card bg-green-600 text-white shadow-lg">
|
|
<ng-icon
|
|
name="lucidePhone"
|
|
class="h-3.5 w-3.5"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<p class="mt-5 text-[11px] font-semibold uppercase tracking-[0.18em] text-primary">Incoming call</p>
|
|
<h2
|
|
id="incoming-call-title"
|
|
class="mt-2 text-xl font-semibold text-foreground"
|
|
>
|
|
{{ callerName() }} is calling
|
|
</h2>
|
|
<p class="mt-1 text-sm text-muted-foreground">{{ callKindLabel() }}</p>
|
|
|
|
<div class="mt-6 grid w-full grid-cols-2 gap-3">
|
|
<button
|
|
type="button"
|
|
class="inline-flex min-h-11 items-center justify-center gap-2 rounded-lg border border-border bg-secondary px-4 text-sm font-semibold text-foreground transition-colors hover:bg-secondary/80"
|
|
(click)="decline()"
|
|
>
|
|
<ng-icon
|
|
name="lucidePhoneOff"
|
|
class="h-4 w-4"
|
|
/>
|
|
Decline
|
|
</button>
|
|
|
|
<button
|
|
type="button"
|
|
class="inline-flex min-h-11 items-center justify-center gap-2 rounded-lg bg-green-600 px-4 text-sm font-semibold text-white transition-colors hover:bg-green-500 disabled:cursor-not-allowed disabled:opacity-70"
|
|
[disabled]="answering()"
|
|
(click)="answer()"
|
|
>
|
|
<ng-icon
|
|
name="lucidePhone"
|
|
class="h-4 w-4"
|
|
/>
|
|
Answer
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
}
|