diff --git a/src/frontend/src/features/participantTile/components/FullScreenShareWarning.tsx b/src/frontend/src/features/participantTile/components/FullScreenShareWarning.tsx index ee230c57..f2450155 100644 --- a/src/frontend/src/features/participantTile/components/FullScreenShareWarning.tsx +++ b/src/frontend/src/features/participantTile/components/FullScreenShareWarning.tsx @@ -3,10 +3,10 @@ import { Button, Text } from '@/primitives' import { useCallback, useMemo, useRef } from 'react' import { screenSharePreferenceStore } from '@/stores/screenSharePreferences' import { useSnapshot } from 'valtio' -import { useLocalParticipant } from '@livekit/components-react' import type { TrackReferenceOrPlaceholder } from '@livekit/components-core' import { useTranslation } from 'react-i18next' import { useSize } from '@/features/rooms/livekit/hooks/useResizeObserver' +import { LocalParticipant } from 'livekit-client' export const FullScreenShareWarning = ({ trackReference, @@ -17,7 +17,6 @@ export const FullScreenShareWarning = ({ const warningContainerRef = useRef(null) const { width: containerWidth } = useSize(warningContainerRef) - const { localParticipant } = useLocalParticipant() const screenSharePreferences = useSnapshot(screenSharePreferenceStore) const isFullScreenSharing = useMemo(() => { @@ -57,8 +56,10 @@ export const FullScreenShareWarning = ({ screenSharePreferences.enabled && isFullScreenSharing const handleStopScreenShare = async () => { - if (!localParticipant.isScreenShareEnabled) return - await localParticipant.setScreenShareEnabled(false, {}, {}) + const participant = trackReference.participant + if (!(participant instanceof LocalParticipant)) return + if (!participant.isScreenShareEnabled) return + await (participant as LocalParticipant).setScreenShareEnabled(false, {}, {}) } const handleDismissWarning = useCallback(() => { diff --git a/src/frontend/src/features/pip/components/layout/StageFrame.tsx b/src/frontend/src/features/pip/components/layout/StageFrame.tsx index 7d8666f1..164b9783 100644 --- a/src/frontend/src/features/pip/components/layout/StageFrame.tsx +++ b/src/frontend/src/features/pip/components/layout/StageFrame.tsx @@ -1,18 +1,21 @@ import { useTranslation } from 'react-i18next' import { styled } from '@/styled-system/jsx' -import { useLocalParticipant } from '@livekit/components-react' +import { useTrackToggle } from '@livekit/components-react' +import { Track } from 'livekit-client' export const StageFrame = ({ children }: { children: React.ReactNode }) => { const { t } = useTranslation('rooms', { keyPrefix: 'pictureInPicture', }) - const { localParticipant } = useLocalParticipant() + const { enabled: isScreenSharing } = useTrackToggle({ + source: Track.Source.ScreenShare, + }) return ( {children} diff --git a/src/frontend/src/features/rooms/livekit/components/controls/Device/ToggleDevice.tsx b/src/frontend/src/features/rooms/livekit/components/controls/Device/ToggleDevice.tsx index e9a1c066..15092eea 100644 --- a/src/frontend/src/features/rooms/livekit/components/controls/Device/ToggleDevice.tsx +++ b/src/frontend/src/features/rooms/livekit/components/controls/Device/ToggleDevice.tsx @@ -9,8 +9,8 @@ import useLongPress from '@/features/shortcuts/useLongPress' import { ActiveSpeaker } from '@/features/rooms/components/ActiveSpeaker' import { useIsSpeaking, - useLocalParticipant, useMaybeRoomContext, + useRoomContext, } from '@livekit/components-react' import type { ButtonRecipeProps } from '@/primitives/buttonRecipe' import type { ToggleButtonProps } from '@/primitives/ToggleButton' @@ -169,7 +169,7 @@ export const ToggleDevice = ({ } const ActiveSpeakerWrapper = () => { - const { localParticipant } = useLocalParticipant() - const isSpeaking = useIsSpeaking(localParticipant) + const room = useRoomContext() + const isSpeaking = useIsSpeaking(room.localParticipant) return }