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

update endcall button postion

Browse Source
This commit is contained in:
Xin Wang 2025-12-17 21:41:36 +08:00
parent 5be6ab12f3
commit d942222f11
2 changed files with 6 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/chat/ChatOverlay.tsx
View File

@ -64,13 +64,13 @@ export function ChatOverlay({
containerSize.height * 0.6 containerSize.height * 0.6
); );
// Position overlay at center when first shown // Position overlay at center (slightly moved up) when first shown
const hasPositionedRef = useRef(false); const hasPositionedRef = useRef(false);
useEffect(() => { useEffect(() => {
if (isVisible && containerRef.current && containerSize.width > 0 && overlayWidth > 0 && overlayHeight > 0) { if (isVisible && containerRef.current && containerSize.width > 0 && overlayWidth > 0 && overlayHeight > 0) {
// Calculate center position // Calculate center position, moved up by 15% of container height
const centerX = (containerSize.width - overlayWidth) / 2; const centerX = (containerSize.width - overlayWidth) / 2;
const centerY = (containerSize.height - overlayHeight) / 2; const centerY = (containerSize.height - overlayHeight) / 2 - (containerSize.height * 0.15);
// Only auto-position on first show (when position is at origin) // Only auto-position on first show (when position is at origin)
if (!hasPositionedRef.current && position.x === 0 && position.y === 0) { if (!hasPositionedRef.current && position.x === 0 && position.y === 0) {

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

@ -1272,8 +1272,8 @@ export function PhoneSimulator({
</button> </button>
</div> </div>
) : ( ) : (
<div className="w-full flex items-center justify-between gap-8"> <div className="w-full flex items-center justify-center gap-4">
{/* Left side: Mic Toggle */} {/* Mic Toggle */}
{phoneMode !== "hand_off" && ( {phoneMode !== "hand_off" && (
<button <button
className={`p-4 rounded-full backdrop-blur-md transition-colors ${ className={`p-4 rounded-full backdrop-blur-md transition-colors ${
@ -1291,7 +1291,7 @@ export function PhoneSimulator({
</button> </button>
)} )}
{/* Right side: End Call Button */} {/* End Call Button */}
<button <button
className="p-4 rounded-full bg-red-500 text-white hover:bg-red-600 transition-colors" className="p-4 rounded-full bg-red-500 text-white hover:bg-red-600 transition-colors"
onClick={handleDisconnect} onClick={handleDisconnect}