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 (