diff --git a/src/frontend/src/features/rooms/livekit/components/ParticipantTileFocus.tsx b/src/frontend/src/features/rooms/livekit/components/ParticipantTileFocus.tsx index babec88a..ca9fafd9 100644 --- a/src/frontend/src/features/rooms/livekit/components/ParticipantTileFocus.tsx +++ b/src/frontend/src/features/rooms/livekit/components/ParticipantTileFocus.tsx @@ -1,11 +1,24 @@ import { css } from '@/styled-system/css' import { HStack } from '@/styled-system/jsx' import { Button } from '@/primitives' -import { RiPushpin2Line, RiUnpinLine } from '@remixicon/react' -import { useFocusToggle } from '@livekit/components-react' +import { + RiImageCircleAiFill, + RiMicLine, + RiMicOffLine, + RiPushpin2Line, + RiUnpinLine, +} from '@remixicon/react' +import { + useFocusToggle, + useTrackMutedIndicator, +} from '@livekit/components-react' import { useTranslation } from 'react-i18next' import { TrackReferenceOrPlaceholder } from '@livekit/components-core' import { useEffect, useState } from 'react' +import { useSidePanel } from '@/features/rooms/livekit/hooks/useSidePanel' +import { Participant, Track } from 'livekit-client' +import { MuteAlertDialog } from './MuteAlertDialog' +import { useMuteParticipant } from '../api/muteParticipant' const FocusButton = ({ trackRef, @@ -31,6 +44,59 @@ const FocusButton = ({ ) } +const EffectsButton = () => { + const { t } = useTranslation('rooms', { keyPrefix: 'participantTileFocus' }) + const { isEffectsOpen, toggleEffects } = useSidePanel() + return ( + + ) +} + +const MuteButton = ({ participant }: { participant: Participant }) => { + const { t } = useTranslation('rooms', { keyPrefix: 'participantTileFocus' }) + + const { isMuted } = useTrackMutedIndicator({ + participant: participant, + source: Track.Source.Microphone, + }) + + const { muteParticipant } = useMuteParticipant() + const [isAlertOpen, setIsAlertOpen] = useState(false) + + const name = participant.name || participant.identity + + return ( + <> + + + muteParticipant(participant).then(() => setIsAlertOpen(false)) + } + onClose={() => setIsAlertOpen(false)} + name={name} + /> + + ) +} + export const ParticipantTileFocus = ({ trackRef, }: { @@ -50,6 +116,8 @@ export const ParticipantTileFocus = ({ } }, [hovered]) + const participant = trackRef.participant + return (
+ {participant.isLocal ? ( + + ) : ( + + )}
)} diff --git a/src/frontend/src/locales/de/rooms.json b/src/frontend/src/locales/de/rooms.json index cb91bff9..426f160b 100644 --- a/src/frontend/src/locales/de/rooms.json +++ b/src/frontend/src/locales/de/rooms.json @@ -195,6 +195,8 @@ "pin": { "enable": "", "disable": "" - } + }, + "effects": "", + "muteParticipant": "" } } diff --git a/src/frontend/src/locales/en/rooms.json b/src/frontend/src/locales/en/rooms.json index 35fa94c7..a7b19713 100644 --- a/src/frontend/src/locales/en/rooms.json +++ b/src/frontend/src/locales/en/rooms.json @@ -194,6 +194,8 @@ "pin": { "enable": "Pin", "disable": "Unpin" - } + }, + "effects": "Apply visual effects", + "muteParticipant": "Mute {{name}}" } } diff --git a/src/frontend/src/locales/fr/rooms.json b/src/frontend/src/locales/fr/rooms.json index 80c20067..577e2a51 100644 --- a/src/frontend/src/locales/fr/rooms.json +++ b/src/frontend/src/locales/fr/rooms.json @@ -194,6 +194,8 @@ "pin": { "enable": "Épingler", "disable": "Annuler l'épinglage" - } + }, + "effects": "Appliquer des effets", + "muteParticipant": "Couper le micro de {{name}}" } }