UI: разделить входящий и активный звонок

This commit is contained in:
AidarKC
2026-07-24 19:28:50 +04:00
parent d6b313b582
commit d54cb7507a
3 changed files with 27 additions and 10 deletions
+1 -1
View File
@@ -1,2 +1,2 @@
client.version=1.2.351 client.version=1.2.353
server.version=1.2.319 server.version=1.2.319
+18 -9
View File
@@ -15,6 +15,8 @@ let panelEl = null;
let headerEl = null; let headerEl = null;
let titleEl = null; let titleEl = null;
let statusEl = null; let statusEl = null;
let incomingActionsEl = null;
let activeActionsEl = null;
let speakerBtn = null; let speakerBtn = null;
let muteBtn = null; let muteBtn = null;
let acceptBtn = null; let acceptBtn = null;
@@ -217,8 +219,11 @@ function ensureUi() {
statusEl = document.createElement('div'); statusEl = document.createElement('div');
statusEl.className = 'call-overlay-status'; statusEl.className = 'call-overlay-status';
const controls = document.createElement('div'); incomingActionsEl = document.createElement('div');
controls.className = 'call-overlay-controls'; incomingActionsEl.className = 'call-overlay-controls call-overlay-controls--incoming';
activeActionsEl = document.createElement('div');
activeActionsEl.className = 'call-overlay-controls call-overlay-controls--active';
speakerBtn = document.createElement('button'); speakerBtn = document.createElement('button');
speakerBtn.type = 'button'; speakerBtn.type = 'button';
@@ -252,9 +257,10 @@ function ensureUi() {
setButtonIcon(hangupBtn, 'hangup', 'Положить трубку'); setButtonIcon(hangupBtn, 'hangup', 'Положить трубку');
hangupBtn.addEventListener('click', handleEndCallClick); hangupBtn.addEventListener('click', handleEndCallClick);
controls.append(speakerBtn, muteBtn, acceptBtn, declineBtn, hangupBtn); incomingActionsEl.append(acceptBtn, declineBtn);
activeActionsEl.append(speakerBtn, muteBtn, hangupBtn);
headerEl.append(titleEl, minimizeBtn); headerEl.append(titleEl, minimizeBtn);
panelEl.append(headerEl, statusEl, controls); panelEl.append(headerEl, statusEl, incomingActionsEl, activeActionsEl);
overlayEl.append(panelEl); overlayEl.append(panelEl);
rootEl.append(barEl, overlayEl); rootEl.append(barEl, overlayEl);
resolveAppShell().append(rootEl); resolveAppShell().append(rootEl);
@@ -275,15 +281,18 @@ function applyExpandedState(snapshot) {
minimizeBtn.hidden = incomingStage; minimizeBtn.hidden = incomingStage;
minimizeBtn.disabled = incomingStage; minimizeBtn.disabled = incomingStage;
speakerBtn.hidden = incomingStage || !snapshot.canToggleSpeaker; incomingActionsEl.hidden = !incomingStage;
activeActionsEl.hidden = incomingStage;
speakerBtn.hidden = !snapshot.canToggleSpeaker;
speakerBtn.disabled = !snapshot.canToggleSpeaker; speakerBtn.disabled = !snapshot.canToggleSpeaker;
muteBtn.hidden = incomingStage || !snapshot.canMute; muteBtn.hidden = !snapshot.canMute;
muteBtn.disabled = !snapshot.canMute; muteBtn.disabled = !snapshot.canMute;
acceptBtn.hidden = !snapshot.canAnswer; acceptBtn.hidden = !incomingStage || !snapshot.canAnswer;
declineBtn.hidden = !snapshot.canDecline; declineBtn.hidden = !incomingStage || !snapshot.canDecline;
hangupBtn.hidden = incomingStage || !snapshot.canHangup; hangupBtn.hidden = !snapshot.canHangup;
} }
function applyMinimizedState(snapshot) { function applyMinimizedState(snapshot) {
+8
View File
@@ -1903,6 +1903,14 @@
align-items: center; align-items: center;
} }
.call-overlay-controls--incoming {
justify-content: flex-start;
}
.call-overlay-controls--active {
justify-content: flex-start;
}
.call-decline-btn { .call-decline-btn {
min-width: 120px; min-width: 120px;
} }