diff --git a/src/frontend/src/features/pip/components/RoomPiP.tsx b/src/frontend/src/features/pip/components/RoomPiP.tsx index 9d3387b6..1df5efec 100644 --- a/src/frontend/src/features/pip/components/RoomPiP.tsx +++ b/src/frontend/src/features/pip/components/RoomPiP.tsx @@ -1,5 +1,6 @@ -import type { ReactNode } from 'react' +import { useEffect, type ReactNode } from 'react' +import { roomPiPStore } from '@/stores/roomPiP' import { DocumentPiPPortal } from './DocumentPiPPortal' import { PipView } from './PipView' import { useRoomPiP } from '../hooks/useRoomPiP' @@ -12,6 +13,14 @@ import { useRoomPiP } from '../hooks/useRoomPiP' export const RoomPiP = (): ReactNode => { const { isOpen, close } = useRoomPiP() + // Reset PiP state on unmount (e.g. leaving the room) so the next session + // starts with PiP closed and doesn't try to auto-reopen without a user gesture. + useEffect(() => { + return () => { + roomPiPStore.isOpen = false + } + }, []) + const portal = DocumentPiPPortal({ isOpen, onClose: close, diff --git a/src/frontend/src/features/pip/hooks/useDocumentPiP.ts b/src/frontend/src/features/pip/hooks/useDocumentPiP.ts index 96a42c8d..fabead4b 100644 --- a/src/frontend/src/features/pip/hooks/useDocumentPiP.ts +++ b/src/frontend/src/features/pip/hooks/useDocumentPiP.ts @@ -70,6 +70,16 @@ export const useDocumentPiP = ({ pipWindowRef.current = pipWindow }, [pipWindow]) + // Force-close the native PiP window when the hook unmounts (e.g. the user + // hangs up and the room is navigated away before `closePiP` could run). + useEffect(() => { + return () => { + const win = pipWindowRef.current + if (win && !win.closed) win.close() + pipWindowRef.current = null + } + }, []) + useEffect(() => { if (!pipWindow) return