Доработать UI звонков и нижний тулбар

2026-08-11 13:29:29 +04:00
parent 566ea942dc
commit 628a970e6f
12 changed files with 465 additions and 91 deletions
@@ -7,6 +7,8 @@ import {
  subscribeCallState,
  toggleSpeakerMode,
 } from './call-service.js';
+import { renderUserAvatar } from '../components/avatar-image.js';
+import { loadProfileSnapshot } from './user-profile-params.js';

 const MINIMIZED_BAR_HEIGHT_PX = 44;

@@ -18,9 +20,13 @@ let titleEl = null;
 let statusEl = null;
 let mediaStageEl = null;
 let remoteVideoEl = null;
-let remoteVideoPlaceholderEl = null;
 let localPreviewWrapEl = null;
 let localVideoEl = null;
+let heroEl = null;
+let avatarSlotEl = null;
+let peerLoginEl = null;
+let kindEl = null;
+let topStatusEl = null;
 let incomingActionsEl = null;
 let activeActionsEl = null;
 let speakerBtn = null;
@@ -41,6 +47,16 @@ let unbind = null;
 let tickerId = 0;
 let currentSnapshot = null;
 let minimized = false;
+let activeAvatarLogin = '';
+let activeAvatarLoadToken = 0;
+let localPreviewDragPointerId = null;
+let localPreviewDragRect = null;
+let localPreviewDragOffsetX = 0;
+let localPreviewDragOffsetY = 0;
+let localPreviewPosition = null;
+
+const avatarSnapshotCache = new Map();
+const avatarPendingByLogin = new Map();

 function resolveAppShell() {
  return document.querySelector('.app-shell') || document.body;
@@ -72,11 +88,75 @@ function buildBarText(snapshot) {
  return `${kind} с ${peer} · ${elapsed}`;
 }

+async function loadAvatarSnapshot(login) {
+  const cleanLogin = String(login || '').trim();
+  if (!cleanLogin) return null;
+  const key = cleanLogin.toLowerCase();
+  if (avatarSnapshotCache.has(key)) return avatarSnapshotCache.get(key);
+  if (avatarPendingByLogin.has(key)) return avatarPendingByLogin.get(key);
+  const pending = loadProfileSnapshot(cleanLogin)
+    .then((snapshot) => {
+      avatarSnapshotCache.set(key, snapshot || null);
+      avatarPendingByLogin.delete(key);
+      return snapshot || null;
+    })
+    .catch(() => {
+      avatarSnapshotCache.set(key, null);
+      avatarPendingByLogin.delete(key);
+      return null;
+    });
+  avatarPendingByLogin.set(key, pending);
+  return pending;
+}
+
+function renderPeerAvatar(login, avatar = null) {
+  const hasAvatar = Boolean(String(avatar?.ar || '').trim());
+  const avatarEl = renderUserAvatar({
+    login: String(login || '').trim() || 'unknown',
+    avatar,
+    size: 'large',
+    className: 'call-peer-avatar',
+    title: login ? `Профиль ${login}` : 'Профиль собеседника',
+  });
+  if (!hasAvatar) {
+    avatarEl.classList.add('call-peer-avatar--empty');
+    const fallbackEl = avatarEl.querySelector('.avatar-fallback');
+    if (fallbackEl) fallbackEl.textContent = '';
+  }
+  return avatarEl;
+}
+
+function updatePeerAvatar(login) {
+  if (!avatarSlotEl) return;
+  const cleanLogin = String(login || '').trim();
+  if (activeAvatarLogin === cleanLogin && avatarSlotEl.childElementCount > 0) return;
+  activeAvatarLogin = cleanLogin;
+  const loadToken = ++activeAvatarLoadToken;
+  avatarSlotEl.innerHTML = '';
+  avatarSlotEl.append(renderPeerAvatar(cleanLogin));
+  if (!cleanLogin) return;
+  void loadAvatarSnapshot(cleanLogin).then((snapshot) => {
+    if (!avatarSlotEl || loadToken !== activeAvatarLoadToken || activeAvatarLogin !== cleanLogin) return;
+    const avatar = snapshot?.avatar?.txId
+      ? {
+        ar: String(snapshot.avatar.txId || '').trim(),
+        sha256Hex: String(snapshot.avatar.sha256Hex || '').trim().toLowerCase(),
+      }
+      : null;
+    const upgraded = renderPeerAvatar(cleanLogin, avatar);
+    avatarSlotEl.replaceChildren(upgraded);
+  });
+}
+
 function stopEvent(event) {
  event.preventDefault();
  event.stopPropagation();
 }

+function clamp(value, min, max) {
+  return Math.min(max, Math.max(min, value));
+}
+
 function getIconSvg(name) {
  if (name === 'mic-on') {
    return '<svg viewBox="0 0 24 24" aria-hidden="true"><rect x="9" y="3.5" width="6" height="11" rx="3" fill="none" stroke="currentColor" stroke-width="1.8"/><path d="M6 11.5a6 6 0 0 0 12 0" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/><path d="M12 17.5v3" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/><path d="M8.5 20.5h7" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></svg>';
@@ -185,6 +265,60 @@ function ensureTicker() {
  }
 }

+function applyLocalPreviewPosition() {
+  if (!localPreviewWrapEl) return;
+  if (!localPreviewPosition) {
+    localPreviewWrapEl.style.left = '';
+    localPreviewWrapEl.style.top = '';
+    localPreviewWrapEl.style.right = '';
+    localPreviewWrapEl.style.bottom = '';
+    return;
+  }
+  localPreviewWrapEl.style.left = `${localPreviewPosition.leftPx}px`;
+  localPreviewWrapEl.style.top = `${localPreviewPosition.topPx}px`;
+  localPreviewWrapEl.style.right = 'auto';
+  localPreviewWrapEl.style.bottom = 'auto';
+}
+
+function updateLocalPreviewPositionFromPointer(clientX, clientY) {
+  if (!mediaStageEl || !localPreviewWrapEl || !localPreviewDragRect) return;
+  const stageRect = mediaStageEl.getBoundingClientRect();
+  const width = localPreviewDragRect.width;
+  const height = localPreviewDragRect.height;
+  const nextLeft = clamp(clientX - stageRect.left - localPreviewDragOffsetX, 8, Math.max(8, stageRect.width - width - 8));
+  const nextTop = clamp(clientY - stageRect.top - localPreviewDragOffsetY, 8, Math.max(8, stageRect.height - height - 8));
+  localPreviewPosition = {
+    leftPx: Math.round(nextLeft),
+    topPx: Math.round(nextTop),
+  };
+  applyLocalPreviewPosition();
+}
+
+function handleLocalPreviewPointerDown(event) {
+  if (!localPreviewWrapEl || event.pointerType === 'mouse' && event.button !== 0) return;
+  localPreviewDragPointerId = event.pointerId;
+  localPreviewDragRect = localPreviewWrapEl.getBoundingClientRect();
+  localPreviewDragOffsetX = event.clientX - localPreviewDragRect.left;
+  localPreviewDragOffsetY = event.clientY - localPreviewDragRect.top;
+  try { localPreviewWrapEl.setPointerCapture(event.pointerId); } catch {}
+  stopEvent(event);
+}
+
+function handleLocalPreviewPointerMove(event) {
+  if (localPreviewDragPointerId !== event.pointerId) return;
+  updateLocalPreviewPositionFromPointer(event.clientX, event.clientY);
+  stopEvent(event);
+}
+
+function stopLocalPreviewDrag(event = null) {
+  if (event && localPreviewDragPointerId !== event.pointerId) return;
+  if (event && localPreviewWrapEl) {
+    try { localPreviewWrapEl.releasePointerCapture(event.pointerId); } catch {}
+  }
+  localPreviewDragPointerId = null;
+  localPreviewDragRect = null;
+}
+
 function ensureUi() {
  if (rootEl) return;

@@ -240,7 +374,7 @@ function ensureUi() {
  headerEl = document.createElement('div');
  headerEl.className = 'call-overlay-head';

-  titleEl = document.createElement('h2');
+  titleEl = document.createElement('div');
  titleEl.className = 'call-overlay-title';

  minimizeBtn = document.createElement('button');
@@ -265,12 +399,12 @@ function ensureUi() {
  remoteVideoEl.playsInline = true;
  remoteVideoEl.muted = true;

-  remoteVideoPlaceholderEl = document.createElement('div');
-  remoteVideoPlaceholderEl.className = 'call-video-placeholder';
-  remoteVideoPlaceholderEl.textContent = 'Собеседник пока без видео';
-
  localPreviewWrapEl = document.createElement('div');
  localPreviewWrapEl.className = 'call-local-preview';
+  localPreviewWrapEl.addEventListener('pointerdown', handleLocalPreviewPointerDown);
+  localPreviewWrapEl.addEventListener('pointermove', handleLocalPreviewPointerMove);
+  localPreviewWrapEl.addEventListener('pointerup', stopLocalPreviewDrag);
+  localPreviewWrapEl.addEventListener('pointercancel', stopLocalPreviewDrag);

  localVideoEl = document.createElement('video');
  localVideoEl.className = 'call-local-video';
@@ -278,8 +412,24 @@ function ensureUi() {
  localVideoEl.playsInline = true;
  localVideoEl.muted = true;

+  heroEl = document.createElement('div');
+  heroEl.className = 'call-hero';
+
+  avatarSlotEl = document.createElement('div');
+  avatarSlotEl.className = 'call-peer-avatar-slot';
+
+  peerLoginEl = document.createElement('div');
+  peerLoginEl.className = 'call-peer-login';
+
+  kindEl = document.createElement('div');
+  kindEl.className = 'call-kind';
+
+  topStatusEl = document.createElement('div');
+  topStatusEl.className = 'call-hero-status';
+
+  heroEl.append(avatarSlotEl, peerLoginEl, kindEl, topStatusEl);
  localPreviewWrapEl.append(localVideoEl);
-  mediaStageEl.append(remoteVideoEl, remoteVideoPlaceholderEl, localPreviewWrapEl);
+  mediaStageEl.append(remoteVideoEl, heroEl, localPreviewWrapEl);

  incomingActionsEl = document.createElement('div');
  incomingActionsEl.className = 'call-overlay-controls call-overlay-controls--incoming';
@@ -327,7 +477,7 @@ function ensureUi() {
  incomingActionsEl.append(acceptBtn, declineBtn);
  activeActionsEl.append(speakerBtn, muteBtn, cameraBtn, hangupBtn);
  headerEl.append(titleEl, minimizeBtn);
-  panelEl.append(headerEl, statusEl, mediaStageEl, incomingActionsEl, activeActionsEl);
+  panelEl.append(mediaStageEl, headerEl, statusEl, incomingActionsEl, activeActionsEl);
  overlayEl.append(panelEl);
  rootEl.append(barEl, overlayEl);
  resolveAppShell().append(rootEl);
@@ -337,14 +487,21 @@ function applyExpandedState(snapshot) {
  overlayEl.hidden = false;
  barEl.hidden = true;

-  titleEl.textContent = `${snapshot.titleText || 'Звонок'}: ${snapshot.peerLogin || 'пользователь'}`;
-  statusEl.textContent = snapshot.statusText || '';
+  titleEl.textContent = '';
+  statusEl.textContent = '';
+  peerLoginEl.textContent = snapshot.peerLogin || 'пользователь';
+  kindEl.textContent = snapshot.titleText || 'Звонок';
+  topStatusEl.textContent = snapshot.statusText || '';
+  updatePeerAvatar(snapshot.peerLogin || '');

  const incomingStage = Boolean(snapshot.canAnswer || snapshot.canDecline);
  const muted = Boolean(snapshot.muted);
  updateMuteButtons(muted);
  updateSpeakerButtons(Boolean(snapshot.speakerEnabled));
  updateCameraButtons(Boolean(snapshot.cameraEnabled));
+  panelEl.classList.toggle('call-overlay-panel--remote-video', Boolean(snapshot.hasRemoteVideo));
+  mediaStageEl.classList.toggle('call-video-stage--remote-video', Boolean(snapshot.hasRemoteVideo));
+  heroEl.hidden = Boolean(snapshot.hasRemoteVideo);

  minimizeBtn.hidden = incomingStage;
  minimizeBtn.disabled = incomingStage;
@@ -365,15 +522,18 @@ function applyExpandedState(snapshot) {
  declineBtn.hidden = !incomingStage || !snapshot.canDecline;
  hangupBtn.hidden = !snapshot.canHangup;

-  mediaStageEl.hidden = incomingStage;
+  mediaStageEl.hidden = false;
  const remoteStream = snapshot.remoteMediaStream || null;
  const localStream = snapshot.localPreviewStream || null;
  const remoteVideoSource = snapshot.hasRemoteVideo ? remoteStream : null;
  if (remoteVideoEl.srcObject !== remoteVideoSource) remoteVideoEl.srcObject = remoteVideoSource;
  if (localVideoEl.srcObject !== localStream) localVideoEl.srcObject = localStream;
  remoteVideoEl.hidden = !snapshot.hasRemoteVideo;
-  remoteVideoPlaceholderEl.hidden = snapshot.hasRemoteVideo;
  localPreviewWrapEl.hidden = !snapshot.hasLocalVideo;
+  if (!snapshot.hasLocalVideo) {
+    localPreviewPosition = null;
+    applyLocalPreviewPosition();
+  }
 }

 function applyMinimizedState(snapshot) {