✨(front) turn on camera when using effects

We want to automatically turn on the camera if its off when
enabling a new effect.

src/frontend/panda.config.ts

@@ -121,6 +121,32 @@ const config: Config = {
         '50%': { opacity: '0.65' },
         '100%': { opacity: '1' },
       },
+      rotate: {
+        '0%': {
+          transform: 'rotate(0deg)',
+        },
+        '100%': {
+          transform: 'rotate(360deg)',
+        },
+      },
+      prixClipFix: {
+        '0%': {
+          clipPath: 'polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0)',
+        },
+        '25%': {
+          clipPath: 'polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0)',
+        },
+        '50%': {
+          clipPath:
+            'polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%)',
+        },
+        '75%': {
+          clipPath: 'polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%)',
+        },
+        '100%': {
+          clipPath: 'polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0)',
+        },
+      },
     },
     tokens: defineTokens({
       /* we take a few things from the panda preset but for now we clear out some stuff.

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

@@ -1,4 +1,4 @@
-import { LocalVideoTrack } from 'livekit-client'
+import { LocalVideoTrack, Track } from 'livekit-client'
 import { useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import {
@@ -12,6 +12,9 @@ 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 { Loader } from '@/primitives/Loader'
+import { useSyncAfterDelay } from '@/hooks/useSyncAfterDelay'
 
 enum BlurRadius {
   NONE = 0,
@@ -43,7 +46,9 @@ export const EffectsConfiguration = ({
 }: EffectsConfigurationProps) => {
   const videoRef = useRef<HTMLVideoElement>(null)
   const { t } = useTranslation('rooms', { keyPrefix: 'effects' })
+  const { toggle, enabled } = useTrackToggle({ source: Track.Source.Camera })
   const [processorPending, setProcessorPending] = useState(false)
+  const processorPendingReveal = useSyncAfterDelay(processorPending)
 
   useEffect(() => {
     const videoElement = videoRef.current
@@ -62,8 +67,30 @@ export const EffectsConfiguration = ({
     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)) {
@@ -85,7 +112,7 @@ export const EffectsConfiguration = ({
         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))
@@ -134,6 +161,7 @@ export const EffectsConfiguration = ({
         className={css({
           width: '100%',
           aspectRatio: 16 / 9,
+          position: 'relative',
         })}
       >
         {videoTrack && !videoTrack.isMuted ? (
@@ -170,6 +198,17 @@ export const EffectsConfiguration = ({
             </P>
           </div>
         )}
+        {processorPendingReveal && (
+          <div
+            className={css({
+              position: 'absolute',
+              right: '8px',
+              bottom: '8px',
+            })}
+          >
+            <Loader />
+          </div>
+        )}
       </div>
       <div
         className={css(
@@ -212,7 +251,7 @@ export const EffectsConfiguration = ({
                     tooltip={tooltipLabel(ProcessorType.BLUR, {
                       blurRadius: BlurRadius.LIGHT,
                     })}
-                    isDisabled={processorPending}
+                    isDisabled={processorPendingReveal}
                     onChange={async () =>
                       await toggleEffect(ProcessorType.BLUR, {
                         blurRadius: BlurRadius.LIGHT,
@@ -232,7 +271,7 @@ export const EffectsConfiguration = ({
                     tooltip={tooltipLabel(ProcessorType.BLUR, {
                       blurRadius: BlurRadius.NORMAL,
                     })}
-                    isDisabled={processorPending}
+                    isDisabled={processorPendingReveal}
                     onChange={async () =>
                       await toggleEffect(ProcessorType.BLUR, {
                         blurRadius: BlurRadius.NORMAL,
@@ -280,7 +319,7 @@ export const EffectsConfiguration = ({
                         tooltip={tooltipLabel(ProcessorType.VIRTUAL, {
                           imagePath,
                         })}
-                        isDisabled={processorPending}
+                        isDisabled={processorPendingReveal}
                         onChange={async () =>
                           await toggleEffect(ProcessorType.VIRTUAL, {
                             imagePath,

src/frontend/src/hooks/useSyncAfterDelay.ts

@@ -0,0 +1,30 @@
+import { useEffect, useRef, useState } from 'react'
+
+/**
+ * If value stays truthy for more than waitFor ms, syncValue takes the value of value.
+ * @param value
+ * @param waitFor
+ * @returns
+ */
+export function useSyncAfterDelay<T>(value: T, waitFor: number = 300) {
+  const valueRef = useRef(value)
+  const timeoutRef = useRef<NodeJS.Timeout>()
+  const [syncValue, setSyncValue] = useState<T>()
+
+  useEffect(() => {
+    valueRef.current = value
+    if (value) {
+      if (!timeoutRef.current) {
+        timeoutRef.current = setTimeout(() => {
+          setSyncValue(valueRef.current)
+          timeoutRef.current = undefined
+        }, waitFor)
+      }
+    } else {
+      setSyncValue(value)
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [value])
+
+  return syncValue
+}

src/frontend/src/primitives/Loader.tsx

@@ -0,0 +1,45 @@
+import { cva } from '@/styled-system/css'
+
+const loader = cva({
+  base: {
+    borderRadius: '50%',
+    position: 'relative',
+    animation: 'rotate 1s linear infinite',
+    '&:before, &:after': {
+      content: '""',
+      boxSizing: 'border-box',
+      position: 'absolute',
+      inset: '0',
+      borderRadius: '50%',
+      borderStyle: 'solid',
+      borderColor: 'white',
+    },
+    _before: {
+      animation: 'prixClipFix 2s linear infinite',
+    },
+    _after: {
+      borderColor: 'white',
+      animation:
+        'prixClipFix 2s linear infinite, rotate 0.5s linear infinite reverse',
+      inset: 6,
+    },
+  },
+  variants: {
+    size: {
+      small: {
+        width: '24px',
+        height: '24px',
+        '&:before, &:after': {
+          borderWidth: '2px',
+        },
+      },
+    },
+  },
+  defaultVariants: {
+    size: 'small',
+  },
+})
+
+export const Loader = () => {
+  return <div className={loader()}></div>
+}

src/frontend/src/primitives/buttonRecipe.ts

@@ -101,6 +101,11 @@ export const buttonRecipe = cva({
         '&[data-selected]': {
           boxShadow: 'token(colors.primary.400) 0px 0px 0px 3px inset',
         },
+        '&[data-disabled]': {
+          backgroundColor: 'greyscale.100',
+          color: 'greyscale.400',
+          opacity: '0.7',
+        },
       },
       tertiary: {
         backgroundColor: 'primary.100',