Fix private calls

2026-05-17 15:14:52 +02:00
parent 0f6cb3ee77
commit e769a6ee4a
71 changed files with 5821 additions and 349 deletions
--- a/toju-app/src/app/features/direct-call/private-call-participant-card.component.html
+++ b/toju-app/src/app/features/direct-call/private-call-participant-card.component.html
@@ -0,0 +1,102 @@
+<article
+  class="flex aspect-square min-w-0 flex-col items-center justify-center overflow-hidden rounded-2xl border border-border/80 bg-card/80 text-center shadow-sm backdrop-blur"
+  [class.w-[11rem]]="compact()"
+  [class.shrink-0]="compact()"
+  [class.p-4]="compact()"
+  [class.sm:w-[12.5rem]]="compact()"
+  [class.w-full]="!compact()"
+  [class.p-[clamp(1rem,4vw,1.5rem)]]="!compact()"
+>
+  <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"
+        [class.bottom-3]="compact()"
+        [class.right-3]="compact()"
+        [class.h-4]="compact()"
+        [class.w-4]="compact()"
+        [class.border-[3px]]="compact()"
+        [class.bottom-5]="!compact()"
+        [class.right-5]="!compact()"
+        [class.h-5]="!compact()"
+        [class.w-5]="!compact()"
+        [class.border-4]="!compact()"
+        [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>