diff --git a/src/frontend/src/features/pip/components/layouts/PipFocusLayout.tsx b/src/frontend/src/features/pip/components/layouts/PipFocusLayout.tsx
index 0bd2997c..dae79ecb 100644
--- a/src/frontend/src/features/pip/components/layouts/PipFocusLayout.tsx
+++ b/src/frontend/src/features/pip/components/layouts/PipFocusLayout.tsx
@@ -2,6 +2,7 @@ import { memo } from 'react'
import type { TrackReferenceOrPlaceholder } from '@livekit/components-core'
import { styled } from '@/styled-system/jsx'
import { ParticipantTile } from '@/features/rooms/livekit/components/ParticipantTile'
+import { pipLayoutStore } from '../../stores/pipLayoutStore'
import { getTrackKey } from '../../utils/pipTrackSelection'
type PipFocusLayoutProps = {
@@ -25,6 +26,7 @@ export const PipFocusLayout = memo(
{thumbnailTrack && (
@@ -32,6 +34,7 @@ export const PipFocusLayout = memo(
)}
diff --git a/src/frontend/src/features/pip/components/layouts/PipGridLayout.tsx b/src/frontend/src/features/pip/components/layouts/PipGridLayout.tsx
index ae84f44b..4d4d81fa 100644
--- a/src/frontend/src/features/pip/components/layouts/PipGridLayout.tsx
+++ b/src/frontend/src/features/pip/components/layouts/PipGridLayout.tsx
@@ -2,6 +2,7 @@ import { memo, useMemo, useRef } from 'react'
import type { TrackReferenceOrPlaceholder } from '@livekit/components-core'
import { styled } from '@/styled-system/jsx'
import { ParticipantTile } from '@/features/rooms/livekit/components/ParticipantTile'
+import { pipLayoutStore } from '../../stores/pipLayoutStore'
import { usePipElementSize } from '../../hooks/usePipElementSize'
import { usePipFlipAnimations } from '../../hooks/usePipFlipAnimations'
import { computePipGridLayout } from '../../utils/pipGrid'
@@ -46,7 +47,7 @@ export const PipGridLayout = memo(({ tracks }: PipGridLayoutProps) => {
{tracks.map((track, index) => (
-
+
))}
diff --git a/src/frontend/src/features/rooms/livekit/components/ParticipantTile.tsx b/src/frontend/src/features/rooms/livekit/components/ParticipantTile.tsx
index 629e9980..bb902116 100644
--- a/src/frontend/src/features/rooms/livekit/components/ParticipantTile.tsx
+++ b/src/frontend/src/features/rooms/livekit/components/ParticipantTile.tsx
@@ -27,6 +27,7 @@ import { HStack } from '@/styled-system/jsx'
import { MutedMicIndicator } from './MutedMicIndicator'
import { ParticipantPlaceholder } from './ParticipantPlaceholder'
import { ParticipantTileFocus } from './ParticipantTileFocus'
+import type { SidePanelStore } from '../hooks/useSidePanel'
import { FullScreenShareWarning } from './FullScreenShareWarning'
import { ParticipantName } from './ParticipantName'
import { getParticipantName } from '@/features/rooms/utils/getParticipantName'
@@ -52,6 +53,7 @@ export function TrackRefContextIfNeeded(
interface ParticipantTileExtendedProps extends ParticipantTileProps {
disableMetadata?: boolean
+ sidePanelStore?: SidePanelStore
}
export const ParticipantTile: (
@@ -66,6 +68,7 @@ export const ParticipantTile: (
onParticipantClick,
disableSpeakingIndicator,
disableMetadata,
+ sidePanelStore,
...htmlProps
}: ParticipantTileExtendedProps,
ref
@@ -235,6 +238,7 @@ export const ParticipantTile: (
)}
diff --git a/src/frontend/src/features/rooms/livekit/components/ParticipantTileFocus.tsx b/src/frontend/src/features/rooms/livekit/components/ParticipantTileFocus.tsx
index 605314ca..1c80bfcc 100644
--- a/src/frontend/src/features/rooms/livekit/components/ParticipantTileFocus.tsx
+++ b/src/frontend/src/features/rooms/livekit/components/ParticipantTileFocus.tsx
@@ -16,7 +16,7 @@ import {
import { useTranslation } from 'react-i18next'
import { TrackReferenceOrPlaceholder } from '@livekit/components-core'
import { useEffect, useRef, useState } from 'react'
-import { useSidePanel } from '../hooks/useSidePanel'
+import { type SidePanelStore, useSidePanel } from '../hooks/useSidePanel'
import { useFullScreen } from '../hooks/useFullScreen'
import { Participant, Track } from 'livekit-client'
import { MuteAlertDialog } from './MuteAlertDialog'
@@ -74,9 +74,9 @@ const FocusButton = ({
)
}
-const EffectsButton = () => {
+const EffectsButton = ({ store }: { store?: SidePanelStore }) => {
const { t } = useTranslation('rooms', { keyPrefix: 'participantTileFocus' })
- const { isEffectsOpen, toggleEffects } = useSidePanel()
+ const { isEffectsOpen, toggleEffects } = useSidePanel(store)
return (