wip

src/frontend/src/features/rooms/livekit/components/effects/Effects.tsx

@@ -7,6 +7,7 @@ import { usePersistentUserChoices } from '../../hooks/usePersistentUserChoices'
 export const Effects = () => {
   const { cameraTrack } = useLocalParticipant()
   const localCameraTrack = cameraTrack?.track as LocalVideoTrack
+  console.log('Effects', 'localCameraTrack', localCameraTrack)
   const { saveProcessorSerialized } = usePersistentUserChoices()
 
   return (

src/frontend/src/features/rooms/livekit/components/effects/EffectsConfiguration.tsx

@@ -12,7 +12,7 @@ import { styled } from '@/styled-system/jsx'
 import { BackgroundOptions } from '@livekit/track-processors'
 import { BlurOn } from '@/components/icons/BlurOn'
 import { BlurOnStrong } from '@/components/icons/BlurOnStrong'
-import { useTrackToggle } from '@livekit/components-react'
+import { useLocalParticipant, useTrackToggle } from '@livekit/components-react'
 import { Loader } from '@/primitives/Loader'
 
 enum BlurRadius {
@@ -87,6 +87,8 @@ export const EffectsConfiguration = ({
   const [processorPending, setProcessorPending] = useState(false)
   const processorPendingReveal = useSyncAfterDelay(processorPending)
 
+  const { localParticipant } = useLocalParticipant()
+
   useEffect(() => {
     const videoElement = videoRef.current
     if (!videoElement) return
@@ -100,28 +102,43 @@ export const EffectsConfiguration = ({
     }
   }, [videoTrack, videoTrack?.isMuted])
 
-  console.log('processorPending', processorPending)
-  console.log('processorPending Reveal', processorPendingReveal)
+  useEffect(() => {}, [videoTrack])
 
   const toggleEffect = async (
     type: ProcessorType,
     options: BackgroundOptions
   ) => {
-    if (!videoTrack) return
     setProcessorPending(true)
+    if (!videoTrack) {
+      /**
+       * 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.
+       *
+       * We arrive in this condition when we enter the room with the camera already off.
+       */
+      const newProcessorTmp = BackgroundProcessorFactory.getProcessor(
+        type,
+        options
+      )!
+      await toggle(true, {
+        processor: newProcessorTmp,
+      })
+      setTimeout(() => setProcessorPending(false))
+      return
+    }
+
+    if (!enabled) {
+      await toggle(true)
+    }
+
     const processor = getProcessor()
     try {
       if (isSelected(type, options)) {
         // Stop processor.
         await videoTrack.stopProcessor()
         onSubmit?.(undefined)
       } else if (!processor || processor.serialize().type !== type) {
-        if (!enabled) {
-          console.log('ENABLE !')
-          await toggle(true)
-          console.log('OK !')
-        }
-
         // Change processor.
         const newProcessor = BackgroundProcessorFactory.getProcessor(
           type,
@@ -130,18 +147,18 @@ export const EffectsConfiguration = ({
         await videoTrack.setProcessor(newProcessor)
         onSubmit?.(newProcessor)
       } else {
-        if (!enabled) {
-          console.log('ENABLE !')
-          await toggle(true)
-          console.log('OK !')
-        }
+        // if (!enabled) {
+        //   console.log('ENABLE !')
+        //   await toggle(true)
+        //   console.log('OK !')
+        // }
         // Update processor.
         processor?.update(options)
         // We want to trigger onSubmit when options changes so the parent component is aware of it.
         onSubmit?.(processor)
       }
     } catch (error) {
-      console.error('Error applying blur:', error)
+      console.error('Error applying effect:', error)
     } finally {
       // Without setTimeout the DOM is not refreshing when updating the options.
       setTimeout(() => setProcessorPending(false))