🚨(frontend) fix linting errors

- Fix linting errors in FaceLandmarksProcessor
- Fix linting errors in EffectsConfiguration
- Fix linting errors in useHasFaceLandmarksAccess

src/frontend/src/features/rooms/livekit/components/blur/FaceLandmarksProcessor.ts

@@ -181,32 +181,32 @@ export class FaceLandmarksProcessor implements BackgroundProcessorInterface {
   ) {
     // Calculate distance between points
     const distance = Math.sqrt(
-      Math.pow(rightPoint.x - leftPoint.x, 2) + 
-      Math.pow(rightPoint.y - leftPoint.y, 2)
+      Math.pow(rightPoint.x - leftPoint.x, 2) +
+        Math.pow(rightPoint.y - leftPoint.y, 2)
     )
-    
+
     // Scale image based on distance
     const width = distance * PROCESSING_WIDTH * widthScale
     const height = width * heightScale
-    
+
     // Calculate center position between points
     const centerX = (leftPoint.x + rightPoint.x) / 2
     const centerY = (leftPoint.y + rightPoint.y) / 2 + yOffset
-    
+
     // Draw image
     this.outputCanvasCtx!.save()
     this.outputCanvasCtx!.translate(
       centerX * PROCESSING_WIDTH,
       centerY * PROCESSING_HEIGHT
     )
-    
+
     // Calculate rotation angle based on point positions
     const angle = Math.atan2(
       rightPoint.y - leftPoint.y,
       rightPoint.x - leftPoint.x
     )
     this.outputCanvasCtx!.rotate(angle)
-    
+
     // Draw image centered at the midpoint between points
     this.outputCanvasCtx!.drawImage(
       image,
@@ -215,7 +215,7 @@ export class FaceLandmarksProcessor implements BackgroundProcessorInterface {
       width,
       height
     )
-    
+
     this.outputCanvasCtx!.restore()
   }
 
@@ -242,28 +242,41 @@ export class FaceLandmarksProcessor implements BackgroundProcessorInterface {
     this.outputCanvasCtx!.lineWidth = 2
 
     for (const face of this.faceLandmarkerResult.faceLandmarks) {
-      // Find eye landmarks 
+      // Find eye landmarks
       const leftEye = face[468]
       const rightEye = face[473]
-      
+
       // Find mouth landmarks for mustache
       const leftMoustache = face[92]
       const rightMoustache = face[322]
-      
+
       // Find forehead landmarks for beret
       const leftForehead = face[103]
       const rightForehead = face[332]
-      
+
       if (leftEye && rightEye && this.options.showGlasses) {
         this.drawEffect(leftEye, rightEye, this.glassesImage!, 2.5, 0.7)
       }
 
       if (leftMoustache && rightMoustache && this.options.showFrench) {
-        this.drawEffect(leftMoustache, rightMoustache, this.mustacheImage!, 1.5, 0.5)
+        this.drawEffect(
+          leftMoustache,
+          rightMoustache,
+          this.mustacheImage!,
+          1.5,
+          0.5
+        )
       }
 
       if (leftForehead && rightForehead && this.options.showFrench) {
-        this.drawEffect(leftForehead, rightForehead, this.beretImage!, 2.1, 0.7, -0.1)
+        this.drawEffect(
+          leftForehead,
+          rightForehead,
+          this.beretImage!,
+          2.1,
+          0.7,
+          -0.1
+        )
       }
     }
   }
@@ -329,4 +342,4 @@ export class FaceLandmarksProcessor implements BackgroundProcessorInterface {
       options: this.options,
     }
   }
-} 
+}

src/frontend/src/features/rooms/livekit/components/blur/index.ts

@@ -28,12 +28,16 @@ export interface BackgroundProcessorInterface
 export enum ProcessorType {
   BLUR = 'blur',
   VIRTUAL = 'virtual',
-  FACE_LANDMARKS = 'faceLandmarks'
+  FACE_LANDMARKS = 'faceLandmarks',
 }
 
 export class BackgroundProcessorFactory {
   static isSupported() {
-    return ProcessorWrapper.isSupported || BackgroundCustomProcessor.isSupported || FaceLandmarksProcessor.isSupported
+    return (
+      ProcessorWrapper.isSupported ||
+      BackgroundCustomProcessor.isSupported ||
+      FaceLandmarksProcessor.isSupported
+    )
   }
 
   static getProcessor(

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

@@ -5,7 +5,7 @@ import {
   BackgroundProcessorFactory,
   BackgroundProcessorInterface,
   ProcessorType,
-  BackgroundOptions
+  BackgroundOptions,
 } from '../blur'
 import { css } from '@/styled-system/css'
 import { Text, P, ToggleButton, H } from '@/primitives'
@@ -15,7 +15,11 @@ import { BlurOnStrong } from '@/components/icons/BlurOnStrong'
 import { useTrackToggle } from '@livekit/components-react'
 import { Loader } from '@/primitives/Loader'
 import { useSyncAfterDelay } from '@/hooks/useSyncAfterDelay'
-import { RiProhibited2Line, RiGlassesLine, RiGoblet2Fill } from '@remixicon/react'
+import {
+  RiProhibited2Line,
+  RiGlassesLine,
+  RiGoblet2Fill,
+} from '@remixicon/react'
 import { useHasFaceLandmarksAccess } from '../../hooks/useHasFaceLandmarksAccess'
 
 enum BlurRadius {
@@ -143,7 +147,9 @@ export const EffectsConfiguration = ({
   const tooltipLabel = (type: ProcessorType, options: BackgroundOptions) => {
     if (type === ProcessorType.FACE_LANDMARKS) {
       const effect = options.showGlasses ? 'glasses' : 'french'
-      return t(`faceLandmarks.${effect}.${isSelected(type, options) ? 'clear' : 'apply'}`)
+      return t(
+        `faceLandmarks.${effect}.${isSelected(type, options) ? 'clear' : 'apply'}`
+      )
     }
     return t(`${type}.${isSelected(type, options) ? 'clear' : 'apply'}`)
   }
@@ -151,7 +157,10 @@ export const EffectsConfiguration = ({
   const getFaceLandmarksOptions = () => {
     const processor = getProcessor()
     if (processor?.serialize().type === ProcessorType.FACE_LANDMARKS) {
-      return processor.serialize().options as { showGlasses?: boolean; showFrench?: boolean }
+      return processor.serialize().options as {
+        showGlasses?: boolean
+        showFrench?: boolean
+      }
     }
     return { showGlasses: false, showFrench: false }
   }
@@ -160,7 +169,8 @@ export const EffectsConfiguration = ({
     const currentOptions = getFaceLandmarksOptions()
     const newOptions = {
       ...currentOptions,
-      [effect === 'glasses' ? 'showGlasses' : 'showFrench']: !currentOptions[effect === 'glasses' ? 'showGlasses' : 'showFrench']
+      [effect === 'glasses' ? 'showGlasses' : 'showFrench']:
+        !currentOptions[effect === 'glasses' ? 'showGlasses' : 'showFrench'],
     }
 
     if (!newOptions.showGlasses && !newOptions.showFrench) {
@@ -363,7 +373,9 @@ export const EffectsConfiguration = ({
                         showFrench: false,
                       })}
                       isDisabled={processorPendingReveal}
-                      onChange={async () => await toggleFaceLandmarkEffect('glasses')}
+                      onChange={async () =>
+                        await toggleFaceLandmarkEffect('glasses')
+                      }
                       isSelected={getFaceLandmarksOptions().showGlasses}
                       data-attr="toggle-glasses"
                     >
@@ -380,7 +392,9 @@ export const EffectsConfiguration = ({
                         showFrench: true,
                       })}
                       isDisabled={processorPendingReveal}
-                      onChange={async () => await toggleFaceLandmarkEffect('french')}
+                      onChange={async () =>
+                        await toggleFaceLandmarkEffect('french')
+                      }
                       isSelected={getFaceLandmarksOptions().showFrench}
                       data-attr="toggle-french"
                     >

src/frontend/src/features/rooms/livekit/hooks/useHasFaceLandmarksAccess.ts

@@ -6,4 +6,4 @@ export const useHasFaceLandmarksAccess = () => {
   const isAnalyticsEnabled = useIsAnalyticsEnabled()
 
   return featureEnabled || !isAnalyticsEnabled
-} 
+}