diff --git a/src/frontend/src/features/pip/components/PictureInPicturePortal.tsx b/src/frontend/src/features/pip/components/PictureInPicturePortal.tsx index 326e40a3..372656aa 100644 --- a/src/frontend/src/features/pip/components/PictureInPicturePortal.tsx +++ b/src/frontend/src/features/pip/components/PictureInPicturePortal.tsx @@ -7,7 +7,9 @@ import { useEffect, useMemo } from 'react' import { CrossDocumentOverlaysContext } from '@/primitives/CrossDocumentOverlaysContext' const InternalPortal = ({ children }: { children: React.ReactNode }) => { - const pipStoreSnap = useSnapshot(documentPictureInPictureStore) + const pipStoreSnap = useSnapshot(documentPictureInPictureStore, { + sync: true, + }) const container = useMemo(() => { return pipStoreSnap?.window?.document.getElementById('root') @@ -19,7 +21,7 @@ const InternalPortal = ({ children }: { children: React.ReactNode }) => { } }, []) - if (!container) return null + if (!container || !container.isConnected) return null return createPortal( /** diff --git a/src/frontend/src/features/pip/hooks/usePictureInPicture.ts b/src/frontend/src/features/pip/hooks/usePictureInPicture.ts index 68a31055..475a3f0b 100644 --- a/src/frontend/src/features/pip/hooks/usePictureInPicture.ts +++ b/src/frontend/src/features/pip/hooks/usePictureInPicture.ts @@ -1,5 +1,6 @@ import { ref, useSnapshot } from 'valtio' import { useCallback, useMemo } from 'react' +import { flushSync } from 'react-dom' import { documentPictureInPictureStore } from '@/stores/documentPictureInPicture' import { useTranslation } from 'react-i18next' @@ -73,7 +74,9 @@ export const usePictureInPicture = () => { const cleanUp = () => { if (documentPictureInPictureStore.window === pipWindow) { - documentPictureInPictureStore.window = null + flushSync(() => { + documentPictureInPictureStore.window = null + }) } } pipWindow.addEventListener('pagehide', () => cleanUp(), { once: true })