fix: people list crash + call embed positioning + debug logging

- millify.ts: use named import { millify as millifyPlugin } instead of
  default import to fix Rolldown CJS interop bug where zc.default gets
  set to the whole module object instead of the function (mode=1 forces
  default=n instead of default=n.default, breaking MembersDrawer)
- useCallEmbed.ts: use getBoundingClientRect() for accurate fixed
  positioning; add useEffect to trigger syncCallEmbedPlacement on mount
  so embed is positioned before the first resize event
- CallEmbedProvider.tsx: fix [pipMode, callVisible] effect to NOT clear
  top/left/width/height when callVisible changes (previously cleared
  position set by syncCallEmbedPlacement every time joined changed);
  only clear pip-specific styles when actually exiting pip; add debug
  console logging for positioning state

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Lotus Bot
2026-05-22 22:48:39 -04:00
parent 14336ef2a3
commit e5110a13f8
3 changed files with 55 additions and 23 deletions
+41 -18
View File
@@ -427,13 +427,37 @@ export function CallEmbedProvider({ children }: CallEmbedProviderProps) {
[],
);
// Track previous pipMode to only reset position when first entering pip (not on callVisible changes)
// Track previous pipMode to only reset position when entering/exiting pip
const prevPipModeRef = React.useRef(false);
// Debug: log whenever call embed visibility/mode changes
React.useEffect(() => {
console.log('[CallEmbed] state:', {
callEmbedRoomId: callEmbed?.roomId,
selectedRoom,
joined,
inCallRoom: !!inCallRoom,
callVisible: !!callVisible,
pipMode: !!pipMode,
chatOnlyView: !!chatOnlyView,
});
const el = callEmbedRef.current;
if (el) {
console.log('[CallEmbed] container styles:', {
top: el.style.top, left: el.style.left,
width: el.style.width, height: el.style.height,
visibility: el.style.visibility, bottom: el.style.bottom, right: el.style.right,
});
}
}, [callEmbed?.roomId, selectedRoom, joined, inCallRoom, callVisible, pipMode, chatOnlyView, callEmbedRef]);
React.useEffect(() => {
const el = callEmbedRef.current;
if (!el) return;
const wasInPip = prevPipModeRef.current;
prevPipModeRef.current = !!pipMode;
if (pipMode) {
if (!prevPipModeRef.current) {
if (!wasInPip) {
el.style.top = 'auto';
el.style.left = 'auto';
el.style.bottom = '72px';
@@ -448,24 +472,23 @@ export function CallEmbedProvider({ children }: CallEmbedProviderProps) {
}
el.style.visibility = 'visible';
} else {
[
'top',
'left',
'bottom',
'right',
'width',
'height',
'borderRadius',
'overflow',
'zIndex',
'boxShadow',
'border',
].forEach((p) => {
(el.style as any)[p] = '';
});
if (wasInPip) {
// Exiting pip: clear all pip styles; syncCallEmbedPlacement will restore correct position
el.style.top = '';
el.style.left = '';
el.style.bottom = '';
el.style.right = '';
el.style.width = '';
el.style.height = '';
el.style.borderRadius = '';
el.style.overflow = '';
el.style.zIndex = '';
el.style.boxShadow = '';
el.style.border = '';
}
// syncCallEmbedPlacement owns top/left/width/height; don't clear them on visibility changes
el.style.visibility = callVisible ? '' : 'hidden';
}
prevPipModeRef.current = !!pipMode;
}, [pipMode, callVisible]);
React.useEffect(() => {