feat(ui): phone-style layout for direct calls
The call screen now shows two different layouts depending on whether the call is a 1:1 direct call or a room/group call: **Direct call (directCallPeer set):** - Large centered identicon (96px circular with glow) - Peer name (22px bold) + fingerprint (11px mono) - Connection badge: "P2P Direct" (green), "Via Relay" (blue), or "Connecting..." (yellow) — auto-detected from the call-debug buffer's dual_path_race_won event - Room name header shows the peer's alias/fp instead of "general" - Group participant list is hidden **Room/group call (directCallPeer null):** - Existing group participant list layout — unchanged The badge updates live from pollStatus by scanning the debug buffer for the connect:dual_path_race_won event. If the path was "Direct" → green P2P badge; if "Relay" → blue relay badge. Before the race resolves, shows yellow "Connecting...". directCallView is cleared on showConnectScreen (call end). CSS in style.css: .direct-call-view, .dc-identicon, .dc-name, .dc-fp, .dc-badge with .relay and .connecting modifiers. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -371,7 +371,65 @@ button.primary:disabled { opacity: 0.5; cursor: not-allowed; }
|
||||
transition: width 0.1s ease-out;
|
||||
}
|
||||
|
||||
/* ── Participants ── */
|
||||
/* ── Direct call phone-style layout ── */
|
||||
.direct-call-view {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex: 1;
|
||||
padding: 32px 16px;
|
||||
gap: 8px;
|
||||
}
|
||||
.dc-identicon {
|
||||
width: 96px;
|
||||
height: 96px;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
margin-bottom: 12px;
|
||||
box-shadow: 0 0 24px rgba(74, 222, 128, 0.15);
|
||||
}
|
||||
.dc-identicon canvas,
|
||||
.dc-identicon svg,
|
||||
.dc-identicon img {
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
display: block;
|
||||
}
|
||||
.dc-name {
|
||||
font-size: 22px;
|
||||
font-weight: 600;
|
||||
color: var(--text);
|
||||
text-align: center;
|
||||
}
|
||||
.dc-fp {
|
||||
font-size: 11px;
|
||||
font-family: ui-monospace, Menlo, Monaco, 'Courier New', monospace;
|
||||
color: var(--text-dim);
|
||||
text-align: center;
|
||||
word-break: break-all;
|
||||
max-width: 280px;
|
||||
}
|
||||
.dc-badge {
|
||||
display: inline-block;
|
||||
margin-top: 8px;
|
||||
padding: 4px 12px;
|
||||
border-radius: 12px;
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
background: rgba(74, 222, 128, 0.12);
|
||||
color: var(--green);
|
||||
}
|
||||
.dc-badge.relay {
|
||||
background: rgba(96, 165, 250, 0.12);
|
||||
color: #60a5fa;
|
||||
}
|
||||
.dc-badge.connecting {
|
||||
background: rgba(250, 204, 21, 0.12);
|
||||
color: var(--yellow);
|
||||
}
|
||||
|
||||
/* ── Participants (group call layout) ── */
|
||||
.participants {
|
||||
background: var(--surface);
|
||||
border-radius: var(--radius);
|
||||
|
||||
Reference in New Issue
Block a user