From 0a38d5e6fdf2406da8cf1b7ec258b4033f0ddd18 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=A5=D0=B0=D0=BB=D0=B8=D0=BC=D0=BE=D0=B2=20=D0=A0=D1=83?=
 =?UTF-8?q?=D1=81=D1=82=D0=B0=D0=BC?= <rhalimov@elveesneotek.com>
Date: Wed, 11 Mar 2026 16:38:35 +0300
Subject: [PATCH] =?UTF-8?q?=D0=9F=D0=BE=D0=BF=D1=8B=D1=82=D0=BA=D0=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env.example                          | 18 ----------
 apps/web/src/components/CallModal.tsx | 51 ++++++++++++++-------------
 2 files changed, 26 insertions(+), 43 deletions(-)
 delete mode 100644 .env.example

diff --git a/.env.example b/.env.example
deleted file mode 100644
index f288212..0000000
--- a/.env.example
+++ /dev/null
@@ -1,18 +0,0 @@
-# Server
-PORT=3001
-JWT_SECRET=your-secure-random-secret-key-here
-CORS_ORIGINS=http://localhost:5173,http://localhost:3000
-
-# Database (PostgreSQL)
-DATABASE_URL=postgresql://user:password@localhost:5432/vortex
-
-# Message encryption (AES-256-GCM) — 64-char hex key (32 bytes)
-# Generate with: node -e "console.log(require('crypto').randomBytes(32).toString('hex'))"
-# WARNING: if you lose this key, all encrypted messages become unreadable!
-ENCRYPTION_KEY=
-
-# TURN server for voice/video calls (optional, recommended for production)
-# Install coturn: sudo apt install coturn
-# TURN_URL=turn:your-domain.com:3478
-# TURN_SECRET=your-coturn-shared-secret
-# STUN_URLS=stun:stun.l.google.com:19302,stun:stun1.l.google.com:19302
diff --git a/apps/web/src/components/CallModal.tsx b/apps/web/src/components/CallModal.tsx
index 452eff7..4324634 100644
--- a/apps/web/src/components/CallModal.tsx
+++ b/apps/web/src/components/CallModal.tsx
@@ -1576,37 +1576,38 @@ export default function CallModal({ isOpen, onClose, targetUser, callType: initi
               </div>
             </>
           )}
-          {/* === Main Content Area === */}
-          <div className="flex-1 flex flex-col relative overflow-hidden">
-            {/* 
-                CRITICAL: Single stable remote video element.
-                We keep it always mounted so WebRTC srcObject is never lost 
-                during transitions between voice and video modes.
-            */}
-            <video
-              ref={remoteVideoRef}
-              autoPlay
-              playsInline
-              className={`
-                bg-black transition-all duration-500
-                ${showVideoArea 
-                  ? 'w-full h-full object-contain' 
-                  : 'w-0 h-0 opacity-0 absolute pointer-events-none'
-                }
-              `}
-              onContextMenu={(e) => { e.preventDefault(); setShowVolumeSlider(true); }}
-            />
 
-            {showVideoArea ? (
+          {/* === Main Content Area === */}
+          <div className="flex-1 flex flex-col relative overflow-hidden bg-black min-h-[400px]">
+            {showVideoArea && (
               <div 
                 ref={videoContainerRef}
-                className="absolute inset-0 flex items-center justify-center bg-black"
+                className="absolute inset-0 flex items-center justify-center z-0"
               >
-                {/* Placeholder shown when video track is not yet arrived or muted */}
+                <video
+                  ref={remoteVideoRef}
+                  autoPlay
+                  playsInline
+                  className="w-full h-full object-contain"
+                  onContextMenu={(e) => { e.preventDefault(); setShowVolumeSlider(true); }}
+                />
+
+                {/* Placeholder shown ONLY when track is not yet ready */}
                 {!hasRemoteVideo && (
-                  <div className="absolute inset-0 flex flex-col items-center justify-center bg-zinc-900/50 backdrop-blur-sm z-10">
+                  <div className="absolute inset-0 flex flex-col items-center justify-center bg-zinc-900 z-10">
+                    <div className="relative mb-6">
+                        <div className="absolute inset-0 rounded-full bg-vortex-500/20 animate-ping" />
+                        {displayAvatar ? (
+                           <img src={displayAvatar} alt="" className="relative w-32 h-32 rounded-full object-cover border-4 border-vortex-500/30" />
+                        ) : (
+                           <div className="relative w-32 h-32 rounded-full bg-gradient-to-br from-vortex-500 to-purple-600 flex items-center justify-center text-white text-4xl font-bold border-4 border-vortex-500/30">
+                             {initials}
+                           </div>
+                        )}
+                    </div>
                     <VideoOff size={48} className="text-zinc-500 mb-2" />
-                    <span className="text-sm text-zinc-500">{displayName}</span>
+                    <span className="text-xl text-white font-medium mb-1">{displayName}</span>
+                    <span className="text-sm text-zinc-500 animate-pulse">Соединение...</span>
                   </div>
                 )}