diff --git a/src/app/components/CallEmbedProvider.tsx b/src/app/components/CallEmbedProvider.tsx index 5651b60e3..d3dc5ef83 100644 --- a/src/app/components/CallEmbedProvider.tsx +++ b/src/app/components/CallEmbedProvider.tsx @@ -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(() => { diff --git a/src/app/hooks/useCallEmbed.ts b/src/app/hooks/useCallEmbed.ts index 8a09610e2..e23ebfded 100644 --- a/src/app/hooks/useCallEmbed.ts +++ b/src/app/hooks/useCallEmbed.ts @@ -154,12 +154,21 @@ export const useCallEmbedPlacementSync = (containerViewRef: RefObject { + syncCallEmbedPlacement(); + }, [syncCallEmbedPlacement]); + useResizeObserver( syncCallEmbedPlacement, useCallback(() => containerViewRef.current, [containerViewRef]), diff --git a/src/app/plugins/millify.ts b/src/app/plugins/millify.ts index d8608deee..8f4648c29 100644 --- a/src/app/plugins/millify.ts +++ b/src/app/plugins/millify.ts @@ -1,4 +1,4 @@ -import millifyPlugin from 'millify'; +import { millify as millifyPlugin } from 'millify'; import { MillifyOptions } from 'millify/dist/options'; export const millify = (count: number, options?: Partial): string =>