✨(feat) connect PiP to room and options menu

wire room-level PiP state to the options menu

Author: Ovgodd

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 =
-    portalContainer && portalContainer.ownerDocument !== document
+  const isInPiP = 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(
-    () => setIsOpen((current) => !current),
-    []
-  )
+  const toggle = useCallback(() => setIsOpen((current) => !current), [])
 
   const value = useMemo(
     () => ({
@@ -36,9 +33,6 @@ export const RoomPiPProvider = ({
   )
 
   return (
-    <RoomPiPContext.Provider value={value}>
-      {children}
-    </RoomPiPContext.Provider>
+    <RoomPiPContext.Provider value={value}>{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)
-