✨(feat) connect PiP to room and options menu

wire room-level PiP state to the options menu

src/frontend/src/features/rooms/livekit/components/DocumentPiPPortal.tsx

@@ -153,4 +153,3 @@ export const DocumentPiPPortal = ({
 
   return portal
 }
-

src/frontend/src/features/rooms/livekit/components/PipControlBar.tsx

@@ -71,4 +71,3 @@ const PipControlsRight = styled('div', {
     right: '1.35rem',
   },
 })
-

src/frontend/src/features/rooms/livekit/components/PipView.tsx

@@ -107,4 +107,3 @@ const PipGridWrapper = styled('div', {
     height: '100%',
   },
 })
-

src/frontend/src/features/rooms/livekit/components/RoomPiP.tsx

@@ -15,4 +15,3 @@ export const RoomPiP = () => {
     </DocumentPiPPortal>
   )
 }
-

src/frontend/src/features/rooms/livekit/components/controls/Options/OptionsButton.tsx

@@ -9,8 +9,7 @@ import { PipOptionsMenu } from './PipOptionsMenu'
 export const OptionsButton = () => {
   const { t } = useTranslation('rooms')
   const portalContainer = useOverlayPortalContainer()
-  const isInPiP =
+  const isInPiP = portalContainer && portalContainer.ownerDocument !== document
-    portalContainer && portalContainer.ownerDocument !== document
   const [isOpen, setIsOpen] = useState(false)
   const wrapperRef = useRef<HTMLDivElement>(null)
 
@@ -33,8 +32,6 @@ export const OptionsButton = () => {
     }
   }, [isInPiP, isOpen])
 
-
-
   if (isInPiP) {
     return (
       <PipOptionsMenu

src/frontend/src/features/rooms/livekit/components/controls/Options/PictureInPictureMenuItem.tsx

@@ -21,4 +21,3 @@ export const PictureInPictureMenuItem = () => {
     </MenuItem>
   )
 }
-

src/frontend/src/features/rooms/livekit/components/controls/Options/PipOptionsMenu.tsx

@@ -30,10 +30,10 @@ export const PipOptionsMenu = ({
       const target = event.target as HTMLElement | null
       const wrapper = wrapperRef.current
       if (!wrapper || !target) return
-      
+
       // Don't close if clicking the trigger button
       if (wrapper.querySelector('button')?.contains(target)) return
-      
+
       // Close if clicking a menu item (action will have fired)
       if (target.closest('[role="menuitem"]')) {
         // Use requestAnimationFrame to ensure action completes first, without visible delay
@@ -83,4 +83,4 @@ export const PipOptionsMenu = ({
       )}
     </div>
   )
-}
+}

src/frontend/src/features/rooms/livekit/components/controls/PipLateralMenu.tsx

@@ -64,4 +64,3 @@ export const PipLateralMenu = () => {
     </DialogTrigger>
   )
 }
-

src/frontend/src/features/rooms/livekit/hooks/RoomPiPProvider.tsx

@@ -19,10 +19,7 @@ export const RoomPiPProvider = ({
 
   const open = useCallback(() => setIsOpen(true), [])
   const close = useCallback(() => setIsOpen(false), [])
-  const toggle = useCallback(
+  const toggle = useCallback(() => setIsOpen((current) => !current), [])
-    () => setIsOpen((current) => !current),
-    []
-  )
 
   const value = useMemo(
     () => ({
@@ -36,9 +33,6 @@ export const RoomPiPProvider = ({
   )
 
   return (
-    <RoomPiPContext.Provider value={value}>
+    <RoomPiPContext.Provider value={value}>{children}</RoomPiPContext.Provider>
-      {children}
-    </RoomPiPContext.Provider>
   )
 }
-

src/frontend/src/features/rooms/livekit/hooks/roomPiPContext.ts

@@ -9,4 +9,3 @@ export type RoomPiPContextValue = {
 }
 
 export const RoomPiPContext = createContext<RoomPiPContextValue | null>(null)
-

src/frontend/src/features/rooms/livekit/hooks/useDocumentPiP.ts

@@ -1,7 +1,10 @@
 import { useCallback, useEffect, useMemo, useState } from 'react'
 
 type DocumentPictureInPicture = {
-  requestWindow: (options?: { width?: number; height?: number }) => Promise<Window>
+  requestWindow: (options?: {
+    width?: number
+    height?: number
+  }) => Promise<Window>
 }
 
 type WindowWithDocumentPiP = Window & {
@@ -67,4 +70,3 @@ export const useDocumentPiP = ({
     closePiP,
   }
 }
-

src/frontend/src/features/rooms/livekit/hooks/useRoomPiP.tsx

@@ -8,4 +8,3 @@ export const useRoomPiP = () => {
   }
   return context
 }
-

src/frontend/src/primitives/Menu.tsx

@@ -24,7 +24,7 @@ export const Menu = ({
   const [trigger, menu] = children
   const boundaryElement = useOverlayBoundaryElement()
   const portalContainer = useOverlayPortalContainer()
-  
+
   // Detect if we're in PiP: portal container is in a different document than the main window
   const isInPiP = useMemo(
     () =>

src/frontend/src/primitives/TooltipWrapper.tsx

@@ -134,10 +134,7 @@ const Tooltip = ({
   children: ReactNode
 } & Partial<Omit<TooltipProps, 'children'>>) => {
   return (
-    <StyledTooltip
+    <StyledTooltip arrowBoundaryOffset={arrowBoundaryOffset ?? 0} {...props}>
-      arrowBoundaryOffset={arrowBoundaryOffset ?? 0}
-      {...props}
-    >
       <TooltipArrow />
       {children}
     </StyledTooltip>

src/frontend/src/primitives/VisualOnlyTooltip.tsx

@@ -82,7 +82,8 @@ export const VisualOnlyTooltip = ({
       >
         {wrappedChild}
       </div>
-      {tooltipData && portalContainer &&
+      {tooltipData &&
+        portalContainer &&
         createPortal(
           <div
             aria-hidden="true"

src/frontend/src/primitives/useOverlayPortalContainer.tsx

@@ -22,4 +22,3 @@ export const useOverlayBoundaryElement = () => {
     return undefined
   }, [portalContainer])
 }
-