wx44wx/livekit-znjj-demo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

make chat message overlay right

Browse Source
This commit is contained in:
Xin Wang 2025-12-19 10:55:13 +08:00
parent f1b331d923
commit 28b9a16c4e
1 changed files with 22 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
src/components/playground/PhoneSimulator.tsx
View File

@ -70,7 +70,7 @@ export function PhoneSimulator({
const pushToTalkButtonRef = useRef<HTMLButtonElement>(null);
const [showChatOverlay, setShowChatOverlay] = useState(false);
const [chatOverlayPosition, setChatOverlayPosition] = useState({ x: 0, y: 0 }); // Will be positioned at top-right by ChatOverlay component
const [chatTogglePosition, setChatTogglePosition] = useState({ x: 0, y: 56 }); // Initial position aligned with visualizer
const [chatTogglePosition, setChatTogglePosition] = useState<{ x?: number; right?: number; y: number }>({ right: 16, y: 56 }); // Initial position on the right
const [isDraggingChatToggle, setIsDraggingChatToggle] = useState(false);
const chatToggleRef = useRef<HTMLButtonElement>(null);
const chatToggleDragOffset = useRef({ x: 0, y: 0 });
@ -203,14 +203,26 @@ export function PhoneSimulator({
if (!phoneContainerRef.current || !chatToggleRef.current) return;
const containerRect = phoneContainerRef.current.getBoundingClientRect();
const buttonRect = chatToggleRef.current.getBoundingClientRect();
const clientX = 'touches' in e ? e.touches[0].clientX : e.clientX;
const clientY = 'touches' in e ? e.touches[0].clientY : e.clientY;
// Calculate offset relative to container
// If using right positioning, convert to x for dragging
if (chatTogglePosition.right !== undefined && chatTogglePosition.x === undefined) {
const currentX = containerRect.width - chatTogglePosition.right - buttonRect.width;
setChatTogglePosition({ x: currentX, y: chatTogglePosition.y });
chatToggleDragOffset.current = {
x: clientX - containerRect.left - chatTogglePosition.x,
x: clientX - containerRect.left - currentX,
y: clientY - containerRect.top - chatTogglePosition.y,
};
} else {
// Already using x positioning
const currentX = chatTogglePosition.x ?? 0;
chatToggleDragOffset.current = {
x: clientX - containerRect.left - currentX,
y: clientY - containerRect.top - chatTogglePosition.y,
};
}
};
const handleChatToggleDragMove = (e: MouseEvent | TouchEvent) => {
@ -269,24 +281,8 @@ export function PhoneSimulator({
};
}, [isDraggingChatToggle]);
// Initialize chat toggle button position when connected and container is available
useEffect(() => {
if (roomState === ConnectionState.Connected && phoneContainerRef.current) {
// Use a small delay to ensure the button is rendered
const timer = setTimeout(() => {
if (phoneContainerRef.current && chatToggleRef.current) {
const containerWidth = phoneContainerRef.current.offsetWidth;
const buttonWidth = chatToggleRef.current.offsetWidth || 44; // Approximate button width
// Position at rightmost border (flush with right edge)
setChatTogglePosition({
x: containerWidth - buttonWidth - 56,
y: 56,
});
}
}, 100);
return () => clearTimeout(timer);
}
}, [roomState]); // Initialize when connected
// Initialize chat toggle button position - keep it on the right using 'right' CSS property
// Only convert to 'x' (left positioning) when user drags it
useEffect(() => {
if (showCameraMenu) {
@ -1013,7 +1009,8 @@ export function PhoneSimulator({
onTouchStart={handleChatToggleDragStart}
title={showChatOverlay ? "Hide chat (drag to move)" : "Show chat (drag to move)"}
style={{
left: chatTogglePosition.x,
...(chatTogglePosition.x !== undefined ? { left: chatTogglePosition.x } : {}),
...(chatTogglePosition.right !== undefined ? { right: chatTogglePosition.right } : {}),
top: chatTogglePosition.y,
}}
>