From 672ca7dfe4c4cfd3e2f019c9b4acc68f2e54ab13 Mon Sep 17 00:00:00 2001 From: Arnaud Robin Date: Mon, 31 Mar 2025 09:56:57 +0200 Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=A8(frontend)=20fix=20linting=20errors?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Fix linting errors in FaceLandmarksProcessor - Fix linting errors in EffectsConfiguration - Fix linting errors in useHasFaceLandmarksAccess --- .../components/blur/FaceLandmarksProcessor.ts | 43 ++++++++++++------- .../rooms/livekit/components/blur/index.ts | 8 +++- .../effects/EffectsConfiguration.tsx | 28 +++++++++--- .../hooks/useHasFaceLandmarksAccess.ts | 2 +- 4 files changed, 56 insertions(+), 25 deletions(-) diff --git a/src/frontend/src/features/rooms/livekit/components/blur/FaceLandmarksProcessor.ts b/src/frontend/src/features/rooms/livekit/components/blur/FaceLandmarksProcessor.ts index ef4f51d3..4084072c 100644 --- a/src/frontend/src/features/rooms/livekit/components/blur/FaceLandmarksProcessor.ts +++ b/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, } } -} \ No newline at end of file +} diff --git a/src/frontend/src/features/rooms/livekit/components/blur/index.ts b/src/frontend/src/features/rooms/livekit/components/blur/index.ts index 0b345d4a..568098bc 100644 --- a/src/frontend/src/features/rooms/livekit/components/blur/index.ts +++ b/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( 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 4b9dd996..6a1c7026 100644 --- a/src/frontend/src/features/rooms/livekit/components/effects/EffectsConfiguration.tsx +++ b/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" > diff --git a/src/frontend/src/features/rooms/livekit/hooks/useHasFaceLandmarksAccess.ts b/src/frontend/src/features/rooms/livekit/hooks/useHasFaceLandmarksAccess.ts index f1ce9840..6603f30e 100644 --- a/src/frontend/src/features/rooms/livekit/hooks/useHasFaceLandmarksAccess.ts +++ b/src/frontend/src/features/rooms/livekit/hooks/useHasFaceLandmarksAccess.ts @@ -6,4 +6,4 @@ export const useHasFaceLandmarksAccess = () => { const isAnalyticsEnabled = useIsAnalyticsEnabled() return featureEnabled || !isAnalyticsEnabled -} \ No newline at end of file +}