✨(perf) hide main layout when pip is open

avoid rendering main video tiles while pip is active

src/frontend/src/features/rooms/livekit/prefabs/VideoConference.tsx

@@ -35,6 +35,7 @@ import { useVideoResolutionSubscription } from '../hooks/useVideoResolutionSubsc
 import { SettingsDialogProvider } from '@/features/settings/components/SettingsDialogProvider'
 import { IsIdleDisconnectModal } from '../components/IsIdleDisconnectModal'
 import { RoomPiP } from '@/features/pip/components/RoomPiP'
+import { useRoomPiP } from '@/features/pip/hooks/useRoomPiP'
 import { getParticipantName } from '@/features/rooms/utils/getParticipantName'
 import { useScreenReaderAnnounce } from '@/hooks/useScreenReaderAnnounce'
 import { ReactionPortals } from '@/features/reactions/components/ReactionPortals'
@@ -228,6 +229,9 @@ export function VideoConference({ ...props }: VideoConferenceProps) {
   ])
   /* eslint-enable react-hooks/exhaustive-deps */
 
+  const { isOpen: isPiPOpen } = useRoomPiP()
+  const shouldRenderMainLayout = !isPiPOpen
+
   const [isShareErrorVisible, setIsShareErrorVisible] = useState(false)
 
   return (
@@ -249,6 +253,8 @@ export function VideoConference({ ...props }: VideoConferenceProps) {
           />
           <IsIdleDisconnectModal />
           <RoomContentArea>
+            {shouldRenderMainLayout && (
+              <>
                 {!focusTrack ? (
                   <div
                     className="lk-grid-layout-wrapper"
@@ -276,6 +282,8 @@ export function VideoConference({ ...props }: VideoConferenceProps) {
                     </FocusLayoutContainer>
                   </div>
                 )}
+              </>
+            )}
           </RoomContentArea>
           <ControlBar
             onDeviceError={(e) => {