diff --git a/src/frontend/src/features/rooms/livekit/components/effects/EffectsConfiguration.tsx b/src/frontend/src/features/rooms/livekit/components/effects/EffectsConfiguration.tsx
index 93e6bf91..649b8095 100644
--- a/src/frontend/src/features/rooms/livekit/components/effects/EffectsConfiguration.tsx
+++ b/src/frontend/src/features/rooms/livekit/components/effects/EffectsConfiguration.tsx
@@ -15,6 +15,7 @@ import { BlurOnStrong } from '@/components/icons/BlurOnStrong'
import { useTrackToggle } from '@livekit/components-react'
import { Loader } from '@/primitives/Loader'
import { useSyncAfterDelay } from '@/hooks/useSyncAfterDelay'
+import { RiProhibited2Line } from '@remixicon/react'
enum BlurRadius {
NONE = 0,
@@ -63,6 +64,11 @@ export const EffectsConfiguration = ({
}
}, [videoTrack, videoTrack?.isMuted])
+ const clearEffect = async () => {
+ await videoTrack.stopProcessor()
+ onSubmit?.(undefined)
+ }
+
const toggleEffect = async (
type: ProcessorType,
options: BackgroundOptions
@@ -72,7 +78,7 @@ export const EffectsConfiguration = ({
/**
* Special case: if no video track is available, then we must pass directly the processor into the
* toggle call. Otherwise, the rest of the function below would not have a videoTrack to call
- * setProccesor on.
+ * setProcessor on.
*
* We arrive in this condition when we enter the room with the camera already off.
*/
@@ -95,8 +101,7 @@ export const EffectsConfiguration = ({
try {
if (isSelected(type, options)) {
// Stop processor.
- await videoTrack.stopProcessor()
- onSubmit?.(undefined)
+ await clearEffect()
} else if (!processor || processor.serialize().type !== type) {
// Change processor.
const newProcessor = BackgroundProcessorFactory.getProcessor(
@@ -243,6 +248,16 @@ export const EffectsConfiguration = ({
gap: '1.25rem',
})}
>
+ {
+ await clearEffect()
+ }}
+ isSelected={!getProcessor()}
+ isDisabled={processorPendingReveal}
+ >
+
+