From 94488f31cf418efa78bfd5805c30ce090165aef7 Mon Sep 17 00:00:00 2001 From: Cyril Date: Thu, 22 Jan 2026 11:29:26 +0100 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8(feat)=20connect=20PiP=20to=20room=20a?= =?UTF-8?q?nd=20options=20menu?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit wire room-level PiP state to the options menu --- .../rooms/livekit/components/DocumentPiPPortal.tsx | 1 - .../rooms/livekit/components/PipControlBar.tsx | 1 - .../src/features/rooms/livekit/components/PipView.tsx | 1 - .../src/features/rooms/livekit/components/RoomPiP.tsx | 1 - .../components/controls/Options/OptionsButton.tsx | 5 +---- .../controls/Options/PictureInPictureMenuItem.tsx | 1 - .../components/controls/Options/PipOptionsMenu.tsx | 6 +++--- .../livekit/components/controls/PipLateralMenu.tsx | 1 - .../features/rooms/livekit/hooks/RoomPiPProvider.tsx | 10 ++-------- .../src/features/rooms/livekit/hooks/roomPiPContext.ts | 1 - .../src/features/rooms/livekit/hooks/useDocumentPiP.ts | 6 ++++-- .../src/features/rooms/livekit/hooks/useRoomPiP.tsx | 1 - src/frontend/src/primitives/Menu.tsx | 2 +- src/frontend/src/primitives/TooltipWrapper.tsx | 5 +---- src/frontend/src/primitives/VisualOnlyTooltip.tsx | 3 ++- .../src/primitives/useOverlayPortalContainer.tsx | 1 - 16 files changed, 14 insertions(+), 32 deletions(-) diff --git a/src/frontend/src/features/rooms/livekit/components/DocumentPiPPortal.tsx b/src/frontend/src/features/rooms/livekit/components/DocumentPiPPortal.tsx index 043644c8..9dfbc1ff 100644 --- a/src/frontend/src/features/rooms/livekit/components/DocumentPiPPortal.tsx +++ b/src/frontend/src/features/rooms/livekit/components/DocumentPiPPortal.tsx @@ -153,4 +153,3 @@ export const DocumentPiPPortal = ({ return portal } - diff --git a/src/frontend/src/features/rooms/livekit/components/PipControlBar.tsx b/src/frontend/src/features/rooms/livekit/components/PipControlBar.tsx index d57dbb56..e1afdb15 100644 --- a/src/frontend/src/features/rooms/livekit/components/PipControlBar.tsx +++ b/src/frontend/src/features/rooms/livekit/components/PipControlBar.tsx @@ -71,4 +71,3 @@ const PipControlsRight = styled('div', { right: '1.35rem', }, }) - diff --git a/src/frontend/src/features/rooms/livekit/components/PipView.tsx b/src/frontend/src/features/rooms/livekit/components/PipView.tsx index e19cf3c8..081a2d13 100644 --- a/src/frontend/src/features/rooms/livekit/components/PipView.tsx +++ b/src/frontend/src/features/rooms/livekit/components/PipView.tsx @@ -107,4 +107,3 @@ const PipGridWrapper = styled('div', { height: '100%', }, }) - diff --git a/src/frontend/src/features/rooms/livekit/components/RoomPiP.tsx b/src/frontend/src/features/rooms/livekit/components/RoomPiP.tsx index ec541725..000faabc 100644 --- a/src/frontend/src/features/rooms/livekit/components/RoomPiP.tsx +++ b/src/frontend/src/features/rooms/livekit/components/RoomPiP.tsx @@ -15,4 +15,3 @@ export const RoomPiP = () => { ) } - diff --git a/src/frontend/src/features/rooms/livekit/components/controls/Options/OptionsButton.tsx b/src/frontend/src/features/rooms/livekit/components/controls/Options/OptionsButton.tsx index 8b56a951..959d2627 100644 --- a/src/frontend/src/features/rooms/livekit/components/controls/Options/OptionsButton.tsx +++ b/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(null) @@ -33,8 +32,6 @@ export const OptionsButton = () => { } }, [isInPiP, isOpen]) - - if (isInPiP) { return ( { ) } - diff --git a/src/frontend/src/features/rooms/livekit/components/controls/Options/PipOptionsMenu.tsx b/src/frontend/src/features/rooms/livekit/components/controls/Options/PipOptionsMenu.tsx index a6258dcb..735ffda9 100644 --- a/src/frontend/src/features/rooms/livekit/components/controls/Options/PipOptionsMenu.tsx +++ b/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 = ({ )} ) -} \ No newline at end of file +} diff --git a/src/frontend/src/features/rooms/livekit/components/controls/PipLateralMenu.tsx b/src/frontend/src/features/rooms/livekit/components/controls/PipLateralMenu.tsx index 2bc80db6..9b0c24a4 100644 --- a/src/frontend/src/features/rooms/livekit/components/controls/PipLateralMenu.tsx +++ b/src/frontend/src/features/rooms/livekit/components/controls/PipLateralMenu.tsx @@ -64,4 +64,3 @@ export const PipLateralMenu = () => { ) } - diff --git a/src/frontend/src/features/rooms/livekit/hooks/RoomPiPProvider.tsx b/src/frontend/src/features/rooms/livekit/hooks/RoomPiPProvider.tsx index 172f31c3..ed470520 100644 --- a/src/frontend/src/features/rooms/livekit/hooks/RoomPiPProvider.tsx +++ b/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 ( - - {children} - + {children} ) } - diff --git a/src/frontend/src/features/rooms/livekit/hooks/roomPiPContext.ts b/src/frontend/src/features/rooms/livekit/hooks/roomPiPContext.ts index 075289b2..3771d11d 100644 --- a/src/frontend/src/features/rooms/livekit/hooks/roomPiPContext.ts +++ b/src/frontend/src/features/rooms/livekit/hooks/roomPiPContext.ts @@ -9,4 +9,3 @@ export type RoomPiPContextValue = { } export const RoomPiPContext = createContext(null) - diff --git a/src/frontend/src/features/rooms/livekit/hooks/useDocumentPiP.ts b/src/frontend/src/features/rooms/livekit/hooks/useDocumentPiP.ts index 418da7a2..1b4315de 100644 --- a/src/frontend/src/features/rooms/livekit/hooks/useDocumentPiP.ts +++ b/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 + requestWindow: (options?: { + width?: number + height?: number + }) => Promise } type WindowWithDocumentPiP = Window & { @@ -67,4 +70,3 @@ export const useDocumentPiP = ({ closePiP, } } - diff --git a/src/frontend/src/features/rooms/livekit/hooks/useRoomPiP.tsx b/src/frontend/src/features/rooms/livekit/hooks/useRoomPiP.tsx index d1bc4bc2..a0f41f50 100644 --- a/src/frontend/src/features/rooms/livekit/hooks/useRoomPiP.tsx +++ b/src/frontend/src/features/rooms/livekit/hooks/useRoomPiP.tsx @@ -8,4 +8,3 @@ export const useRoomPiP = () => { } return context } - diff --git a/src/frontend/src/primitives/Menu.tsx b/src/frontend/src/primitives/Menu.tsx index 04da8205..e68c516a 100644 --- a/src/frontend/src/primitives/Menu.tsx +++ b/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( () => diff --git a/src/frontend/src/primitives/TooltipWrapper.tsx b/src/frontend/src/primitives/TooltipWrapper.tsx index 124e3adc..7e0f0f6d 100644 --- a/src/frontend/src/primitives/TooltipWrapper.tsx +++ b/src/frontend/src/primitives/TooltipWrapper.tsx @@ -134,10 +134,7 @@ const Tooltip = ({ children: ReactNode } & Partial>) => { return ( - + {children} diff --git a/src/frontend/src/primitives/VisualOnlyTooltip.tsx b/src/frontend/src/primitives/VisualOnlyTooltip.tsx index c7a4e567..3c9efeb0 100644 --- a/src/frontend/src/primitives/VisualOnlyTooltip.tsx +++ b/src/frontend/src/primitives/VisualOnlyTooltip.tsx @@ -82,7 +82,8 @@ export const VisualOnlyTooltip = ({ > {wrappedChild} - {tooltipData && portalContainer && + {tooltipData && + portalContainer && createPortal(