mirror of
https://github.com/fromchat-messenger/web.git
synced 2026-09-22 19:15:08 +03:00
Implement better call window UI
This commit is contained in:
@@ -1,21 +1,36 @@
|
||||
import { useState, useEffect } from "react";
|
||||
import { useAppState } from "@/pages/chat/state";
|
||||
import useAudioCall from "@/pages/chat/hooks/useAudioCall";
|
||||
import { useAppState, type CallStatus } from "@/pages/chat/state";
|
||||
import useCall from "@/pages/chat/hooks/useCall";
|
||||
import defaultAvatar from "@/images/default-avatar.png";
|
||||
import { createPortal } from "react-dom";
|
||||
import { id } from "@/utils/utils";
|
||||
|
||||
export function CallWindow() {
|
||||
const { chat, toggleMute, toggleCallMinimize } = useAppState();
|
||||
const { chat, toggleCallMinimize, user } = useAppState();
|
||||
const { call } = chat;
|
||||
const { acceptCall, rejectCall, remoteAudioRef, endCall } = useAudioCall();
|
||||
const [position, setPosition] = useState({ x: 100, y: 100 });
|
||||
const {
|
||||
acceptCall,
|
||||
rejectCall,
|
||||
remoteAudioRef,
|
||||
endCall,
|
||||
toggleMute,
|
||||
toggleVideo,
|
||||
toggleScreenShare,
|
||||
localVideoRef,
|
||||
remoteVideoRef,
|
||||
localScreenShareRef,
|
||||
remoteScreenShareRef
|
||||
} = useCall();
|
||||
const [pipPosition, setPipPosition] = useState({ x: window.innerWidth - 420, y: window.innerHeight - 320 });
|
||||
const [isDragging, setIsDragging] = useState(false);
|
||||
const [dragStart, setDragStart] = useState({ x: 0, y: 0 });
|
||||
const [dragOffset, setDragOffset] = useState({ x: 0, y: 0 });
|
||||
const [callDuration, setCallDuration] = useState(0);
|
||||
const [isVisible, setIsVisible] = useState(false);
|
||||
const [shouldRender, setShouldRender] = useState(false);
|
||||
const [wasMinimized, setWasMinimized] = useState(false);
|
||||
const [callData, setCallData] = useState<{
|
||||
remoteUsername: string | null;
|
||||
status: "calling" | "connecting" | "active" | "ended";
|
||||
status: CallStatus;
|
||||
isInitiator: boolean;
|
||||
isMuted: boolean;
|
||||
} | null>(null);
|
||||
@@ -53,40 +68,73 @@ export function CallWindow() {
|
||||
}
|
||||
}, [call.isActive, call.remoteUsername, call.status, call.isInitiator, call.isMuted]);
|
||||
|
||||
// Track minimized state for exit animation
|
||||
useEffect(() => {
|
||||
if (call.isActive) {
|
||||
setWasMinimized(call.isMinimized);
|
||||
}
|
||||
}, [call.isActive, call.isMinimized]);
|
||||
|
||||
// Handle visibility animation with entrance and exit delays
|
||||
useEffect(() => {
|
||||
if (call.isActive) {
|
||||
setShouldRender(true);
|
||||
if (!call.isMinimized) {
|
||||
// Call is active and not minimized - show window with entrance animation
|
||||
if (!isVisible) {
|
||||
// Only animate in if not already visible (prevents animation on rapid calls)
|
||||
requestAnimationFrame(() => {
|
||||
setIsVisible(true);
|
||||
});
|
||||
}
|
||||
} else {
|
||||
// Call is active but minimized - hide window but keep rendered
|
||||
setIsVisible(false);
|
||||
}
|
||||
// Small delay to ensure DOM is ready, then trigger animation
|
||||
requestAnimationFrame(() => {
|
||||
requestAnimationFrame(() => {
|
||||
setIsVisible(true);
|
||||
});
|
||||
});
|
||||
} else {
|
||||
if (shouldRender) {
|
||||
// Call ended - start exit animation
|
||||
console.log(`Call ended - starting exit animation. Was minimized: ${wasMinimized}`);
|
||||
setIsVisible(false);
|
||||
// After animation completes, stop rendering
|
||||
const timer = setTimeout(() => {
|
||||
console.log("Exit animation complete, removing window");
|
||||
setShouldRender(false);
|
||||
setCallData(null);
|
||||
}, 300); // Match the CSS transition duration
|
||||
setWasMinimized(false);
|
||||
}, 400); // Match the CSS transition duration
|
||||
return () => clearTimeout(timer);
|
||||
} else {
|
||||
// Call not active and not rendered - ensure clean state
|
||||
setShouldRender(false);
|
||||
setIsVisible(false);
|
||||
setCallData(null);
|
||||
setWasMinimized(false);
|
||||
}
|
||||
}
|
||||
}, [call.isActive, call.isMinimized, shouldRender, isVisible]);
|
||||
}, [call.isActive, shouldRender, wasMinimized]);
|
||||
|
||||
// Handle dragging for PiP mode
|
||||
useEffect(() => {
|
||||
const handleMouseMove = (e: MouseEvent) => {
|
||||
if (isDragging && call.isMinimized) {
|
||||
setPipPosition({
|
||||
x: e.clientX - dragOffset.x,
|
||||
y: e.clientY - dragOffset.y
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const handleMouseUp = () => {
|
||||
if (isDragging) {
|
||||
setIsDragging(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (isDragging) {
|
||||
window.addEventListener("mousemove", handleMouseMove);
|
||||
window.addEventListener("mouseup", handleMouseUp);
|
||||
}
|
||||
|
||||
return () => {
|
||||
window.removeEventListener("mousemove", handleMouseMove);
|
||||
window.removeEventListener("mouseup", handleMouseUp);
|
||||
};
|
||||
}, [isDragging, call.isMinimized, dragOffset]);
|
||||
|
||||
// Cleanup effect to reset state when component unmounts
|
||||
useEffect(() => {
|
||||
@@ -131,80 +179,150 @@ export function CallWindow() {
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
<audio
|
||||
ref={remoteAudioRef}
|
||||
className="remote-audio"
|
||||
autoPlay
|
||||
playsInline
|
||||
controls />
|
||||
|
||||
{shouldRender && (
|
||||
<div
|
||||
className={`call-window ${isDragging ? 'dragging' : ''} ${getGradientClass()} ${isVisible ? 'visible' : 'hidden'}`}
|
||||
style={{
|
||||
left: position.x,
|
||||
top: position.y
|
||||
}}
|
||||
onMouseDown={(e) => {
|
||||
setIsDragging(true);
|
||||
setDragStart({
|
||||
x: e.clientX - position.x,
|
||||
y: e.clientY - position.y
|
||||
});
|
||||
}}
|
||||
onMouseMove={(e) => {
|
||||
if (isDragging) {
|
||||
setPosition({
|
||||
x: e.clientX - dragStart.x,
|
||||
y: e.clientY - dragStart.y
|
||||
});
|
||||
}
|
||||
}}
|
||||
onMouseUp={() => setIsDragging(false)}
|
||||
onMouseLeave={() => setIsDragging(false)}
|
||||
>
|
||||
<div className="call-header">
|
||||
<div className="window-controls">
|
||||
<mdui-button-icon
|
||||
onClick={toggleCallMinimize}
|
||||
icon="minimize"
|
||||
className="minimize-btn"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="user-info-centered">
|
||||
<img
|
||||
src={defaultAvatar}
|
||||
alt="Avatar"
|
||||
className="avatar" />
|
||||
createPortal(
|
||||
<>
|
||||
<audio
|
||||
ref={remoteAudioRef}
|
||||
className="remote-audio"
|
||||
autoPlay
|
||||
playsInline
|
||||
controls />
|
||||
|
||||
{shouldRender && (
|
||||
<div
|
||||
className={`call-window ${(call.isActive ? call.isMinimized : wasMinimized) ? "minimized" : "maximized"} ${isDragging ? "dragging" : ""} ${getGradientClass()} ${isVisible ? "visible" : "hidden"}`}
|
||||
style={(call.isActive ? call.isMinimized : wasMinimized) ? {
|
||||
left: pipPosition.x,
|
||||
top: pipPosition.y
|
||||
} : undefined}
|
||||
ref={(el) => {
|
||||
if (el && !isVisible) {
|
||||
console.log(`Window classes: ${el.className}`);
|
||||
console.log(`Window state - was minimized: ${wasMinimized}, visible: ${isVisible}`);
|
||||
}
|
||||
}}
|
||||
onMouseDown={(e) => {
|
||||
if (call.isMinimized) {
|
||||
// Only start dragging if not clicking on a button
|
||||
const target = e.target as HTMLElement;
|
||||
if (!target.closest("mdui-button-icon")) {
|
||||
setIsDragging(true);
|
||||
setDragOffset({
|
||||
x: e.clientX - pipPosition.x,
|
||||
y: e.clientY - pipPosition.y
|
||||
});
|
||||
}
|
||||
}
|
||||
}}
|
||||
>
|
||||
<div className="call-header">
|
||||
<div className="window-controls">
|
||||
<mdui-button-icon
|
||||
onClick={toggleCallMinimize}
|
||||
icon={call.isMinimized ? "open_in_full" : "close_fullscreen"}
|
||||
className="window-control-btn"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="user-details">
|
||||
<h3 className="username">
|
||||
{remoteUsername}
|
||||
</h3>
|
||||
<p className="status">
|
||||
{getStatusText()}
|
||||
</p>
|
||||
<div className="call-header-info">
|
||||
<h3 className="username">{remoteUsername}</h3>
|
||||
<p className="status">{getStatusText()}</p>
|
||||
{!call.isMinimized && call.encryptionEmojis.length > 0 && (
|
||||
<div className="encryption-emojis">
|
||||
{call.encryptionEmojis.map((emoji, index) => (
|
||||
<span key={index} className="encryption-emoji">
|
||||
{emoji}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="call-controls">
|
||||
{status === "calling" && !isInitiator ? (
|
||||
<>
|
||||
<mdui-button-icon onClick={acceptCall} icon="call" />
|
||||
<mdui-button-icon onClick={rejectCall} icon="call_end" />
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<mdui-button-icon onClick={toggleMute} icon={isMuted ? "mic_off" : "mic"} />
|
||||
<mdui-button-icon onClick={endCall} icon="call_end" />
|
||||
</>
|
||||
)}
|
||||
<div className="call-content">
|
||||
{/* Screen share tiles - larger and more prominent */}
|
||||
{/* Always render but hide when not in use to keep refs valid */}
|
||||
<div
|
||||
className="video-tile screen-share-tile local-screen-share"
|
||||
style={{ display: call.isSharingScreen ? "flex" : "none" }}>
|
||||
<video
|
||||
ref={localScreenShareRef}
|
||||
className="video-element"
|
||||
autoPlay
|
||||
playsInline
|
||||
muted />
|
||||
<div className="tile-label">Your Screen</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className="video-tile screen-share-tile remote-screen-share"
|
||||
style={{ display: call.isRemoteScreenSharing ? "flex" : "none" }}>
|
||||
<video
|
||||
ref={remoteScreenShareRef}
|
||||
className="video-element"
|
||||
autoPlay
|
||||
playsInline />
|
||||
<div className="tile-label">{remoteUsername}'s Screen</div>
|
||||
</div>
|
||||
|
||||
{/* Video tiles grid */}
|
||||
<div className="video-tiles-grid">
|
||||
{/* Local video tile */}
|
||||
<div className="video-tile local-video">
|
||||
<video
|
||||
ref={localVideoRef}
|
||||
className="video-element"
|
||||
autoPlay
|
||||
playsInline
|
||||
muted
|
||||
style={{ display: call.isVideoEnabled ? "block" : "none" }} />
|
||||
{!call.isVideoEnabled && (
|
||||
<div className="video-placeholder">
|
||||
<img src={defaultAvatar} alt="Avatar" className="placeholder-avatar" />
|
||||
<span className="placeholder-username">{user.currentUser?.username || "You"}</span>
|
||||
</div>
|
||||
)}
|
||||
<div className="tile-label">You</div>
|
||||
</div>
|
||||
|
||||
{/* Remote video tile */}
|
||||
<div className="video-tile remote-video">
|
||||
<video
|
||||
ref={remoteVideoRef}
|
||||
className="video-element"
|
||||
autoPlay
|
||||
playsInline
|
||||
style={{ display: call.isRemoteVideoEnabled ? "block" : "none" }} />
|
||||
{!call.isRemoteVideoEnabled && (
|
||||
<div className="video-placeholder">
|
||||
<img src={defaultAvatar} alt="Avatar" className="placeholder-avatar" />
|
||||
<span className="placeholder-username">{remoteUsername}</span>
|
||||
</div>
|
||||
)}
|
||||
<div className="tile-label">{remoteUsername}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="call-controls">
|
||||
{status === "calling" && !isInitiator ? (
|
||||
<>
|
||||
<mdui-button-icon onClick={acceptCall} icon="call" />
|
||||
<mdui-button-icon onClick={rejectCall} icon="call_end" />
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<mdui-button-icon onClick={toggleMute} icon={isMuted ? "mic_off" : "mic"} />
|
||||
<mdui-button-icon onClick={toggleVideo} icon={call.isVideoEnabled ? "videocam" : "videocam_off"} />
|
||||
<mdui-button-icon onClick={toggleScreenShare} icon={call.isSharingScreen ? "stop_screen_share" : "screen_share"} />
|
||||
<mdui-button-icon onClick={endCall} icon="call_end" />
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</>,
|
||||
id("root")
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user