95 lines
3.1 KiB
HTML
95 lines
3.1 KiB
HTML
<article
|
|
class="flex min-w-0 flex-col items-center justify-center overflow-hidden rounded-xl text-center"
|
|
[ngClass]="
|
|
compact()
|
|
? 'min-h-[9.5rem] w-[12rem] shrink-0 p-3 sm:w-[14rem] sm:p-4'
|
|
: 'min-h-[14rem] w-full p-3 sm:min-h-[17rem] sm:p-[clamp(1.25rem,4vw,2rem)]'
|
|
"
|
|
>
|
|
<div
|
|
class="relative h-[var(--participant-avatar-size)] w-[var(--participant-avatar-size)] rounded-full ring-2 transition-all duration-150 sm:h-[var(--participant-avatar-size-sm)] sm:w-[var(--participant-avatar-size-sm)]"
|
|
[attr.data-testid]="'call-participant-' + (user().oderId || user().id)"
|
|
[style.--participant-avatar-size]="avatarSize()"
|
|
[style.--participant-avatar-size-sm]="avatarSizeSm()"
|
|
[class.p-1.5]="compact()"
|
|
[class.p-2]="!compact()"
|
|
[class.ring-emerald-400]="speaking()"
|
|
[class.shadow-[0_0_0_6px_rgba(16,185,129,0.12)]]="speaking() && compact()"
|
|
[class.shadow-[0_0_0_8px_rgba(16,185,129,0.12)]]="speaking() && !compact()"
|
|
[class.ring-border]="!speaking()"
|
|
[class.opacity-55]="!connected()"
|
|
>
|
|
@if (user().avatarUrl) {
|
|
<img
|
|
[src]="user().avatarUrl"
|
|
[alt]="user().displayName"
|
|
[width]="compact() ? 96 : 160"
|
|
[height]="compact() ? 96 : 160"
|
|
decoding="async"
|
|
loading="lazy"
|
|
class="block h-full w-full rounded-full object-cover"
|
|
/>
|
|
} @else {
|
|
<div
|
|
class="grid h-full w-full place-items-center rounded-full bg-primary/15 font-semibold text-primary"
|
|
[class.text-3xl]="compact()"
|
|
[class.text-[clamp(1.75rem,8vw,3.5rem)]]="!compact()"
|
|
>
|
|
{{ participantInitial() }}
|
|
</div>
|
|
}
|
|
|
|
@if (!connected()) {
|
|
<div
|
|
class="absolute grid place-items-center rounded-full bg-background/72 backdrop-blur-[1px]"
|
|
[class.inset-1.5]="compact()"
|
|
[class.inset-2]="!compact()"
|
|
>
|
|
<div
|
|
class="grid place-items-center rounded-full border border-border bg-card text-muted-foreground shadow-sm"
|
|
[class.h-10]="compact()"
|
|
[class.w-10]="compact()"
|
|
[class.h-14]="!compact()"
|
|
[class.w-14]="!compact()"
|
|
>
|
|
<ng-icon
|
|
name="lucideWifiOff"
|
|
[class.h-5]="compact()"
|
|
[class.w-5]="compact()"
|
|
[class.h-7]="!compact()"
|
|
[class.w-7]="!compact()"
|
|
/>
|
|
</div>
|
|
</div>
|
|
}
|
|
|
|
@if (connected()) {
|
|
<span
|
|
class="absolute rounded-full border-card"
|
|
[ngClass]="
|
|
compact() ? 'bottom-1 right-1 h-4 w-4 border-[3px] sm:bottom-3 sm:right-3' : 'bottom-1 right-1 h-5 w-5 border-4 sm:bottom-5 sm:right-5'
|
|
"
|
|
[class.bg-emerald-400]="speaking()"
|
|
[class.bg-muted-foreground]="!speaking()"
|
|
></span>
|
|
}
|
|
</div>
|
|
|
|
<div
|
|
class="min-w-0 max-w-full"
|
|
[class.mt-3]="compact()"
|
|
[class.mt-5]="!compact()"
|
|
>
|
|
<h2
|
|
class="truncate font-semibold text-foreground"
|
|
[class.text-sm]="compact()"
|
|
[class.text-[clamp(1rem,4vw,1.25rem)]]="!compact()"
|
|
>
|
|
{{ user().displayName }}
|
|
</h2>
|
|
@if (issueLabel(); as label) {
|
|
<p class="mt-1 text-xs font-semibold text-muted-foreground">{{ label }}</p>
|
|
}
|
|
</div>
|
|
</article>
|