From 86a04ed718da0521f441705bfba8cf3b32f64e10 Mon Sep 17 00:00:00 2001 From: lebaudantoine Date: Thu, 28 Aug 2025 17:12:13 +0200 Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B(frontend)=20prevent=20effects=20ac?= =?UTF-8?q?cess=20when=20camera=20permissions=20denied?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Block effects functionality when users lack camera publishing permissions since they cannot open their camera and shouldn't be able to start effects. --- .../rooms/livekit/components/effects/Effects.tsx | 5 +++++ .../components/effects/EffectsConfiguration.tsx | 12 +++++++----- src/frontend/src/locales/de/rooms.json | 1 + src/frontend/src/locales/en/rooms.json | 1 + src/frontend/src/locales/fr/rooms.json | 1 + src/frontend/src/locales/nl/rooms.json | 1 + 6 files changed, 16 insertions(+), 5 deletions(-) diff --git a/src/frontend/src/features/rooms/livekit/components/effects/Effects.tsx b/src/frontend/src/features/rooms/livekit/components/effects/Effects.tsx index 36de7caf..0fe7a432 100644 --- a/src/frontend/src/features/rooms/livekit/components/effects/Effects.tsx +++ b/src/frontend/src/features/rooms/livekit/components/effects/Effects.tsx @@ -3,12 +3,16 @@ import { LocalVideoTrack } from 'livekit-client' import { css } from '@/styled-system/css' import { EffectsConfiguration } from './EffectsConfiguration' import { usePersistentUserChoices } from '../../hooks/usePersistentUserChoices' +import { useCanPublishTrack } from '@/features/rooms/livekit/hooks/useCanPublishTrack' +import { TrackSource } from '@livekit/protocol' export const Effects = () => { const { cameraTrack } = useLocalParticipant() const localCameraTrack = cameraTrack?.track as LocalVideoTrack const { saveProcessorSerialized } = usePersistentUserChoices() + const canPublishCamera = useCanPublishTrack(TrackSource.CAMERA) + return (
{ })} > 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 8f7d77af..554b0ef2 100644 --- a/src/frontend/src/features/rooms/livekit/components/effects/EffectsConfiguration.tsx +++ b/src/frontend/src/features/rooms/livekit/components/effects/EffectsConfiguration.tsx @@ -37,12 +37,14 @@ const Information = styled('div', { }) export type EffectsConfigurationProps = { + isDisabled?: boolean videoTrack: LocalVideoTrack onSubmit?: (processor?: BackgroundProcessorInterface) => void layout?: 'vertical' | 'horizontal' } export const EffectsConfiguration = ({ + isDisabled, videoTrack, onSubmit, layout = 'horizontal', @@ -214,7 +216,7 @@ export const EffectsConfiguration = ({ marginBottom: 0, }} > - {t('activateCamera')} + {t(isDisabled ? 'cameraDisabled' : 'activateCamera')}

)} @@ -276,7 +278,7 @@ export const EffectsConfiguration = ({ await clearEffect() }} isSelected={!getProcessor()} - isDisabled={processorPendingReveal} + isDisabled={processorPendingReveal || isDisabled} > @@ -288,7 +290,7 @@ export const EffectsConfiguration = ({ tooltip={tooltipLabel(ProcessorType.BLUR, { blurRadius: BlurRadius.LIGHT, })} - isDisabled={processorPendingReveal} + isDisabled={processorPendingReveal || isDisabled} onChange={async () => await toggleEffect(ProcessorType.BLUR, { blurRadius: BlurRadius.LIGHT, @@ -309,7 +311,7 @@ export const EffectsConfiguration = ({ tooltip={tooltipLabel(ProcessorType.BLUR, { blurRadius: BlurRadius.NORMAL, })} - isDisabled={processorPendingReveal} + isDisabled={processorPendingReveal || isDisabled} onChange={async () => await toggleEffect(ProcessorType.BLUR, { blurRadius: BlurRadius.NORMAL, @@ -357,7 +359,7 @@ export const EffectsConfiguration = ({ tooltip={tooltipLabel(ProcessorType.VIRTUAL, { imagePath, })} - isDisabled={processorPendingReveal} + isDisabled={processorPendingReveal || isDisabled} onChange={async () => await toggleEffect(ProcessorType.VIRTUAL, { imagePath, diff --git a/src/frontend/src/locales/de/rooms.json b/src/frontend/src/locales/de/rooms.json index 7a886e3e..f3c4079b 100644 --- a/src/frontend/src/locales/de/rooms.json +++ b/src/frontend/src/locales/de/rooms.json @@ -213,6 +213,7 @@ }, "effects": { "activateCamera": "Ihre Kamera ist deaktiviert. Wählen Sie eine Option, um sie zu aktivieren.", + "cameraDisabled": "Ihre Kamera ist deaktiviert.", "notAvailable": "Videoeffekte werden bald in Ihrem Browser verfügbar sein. Wir arbeiten daran! In der Zwischenzeit können Sie Google Chrome für die beste Leistung oder Firefox verwenden :(", "heading": "Unschärfe", "clear": "Effekt deaktivieren", diff --git a/src/frontend/src/locales/en/rooms.json b/src/frontend/src/locales/en/rooms.json index 654299bc..82641b53 100644 --- a/src/frontend/src/locales/en/rooms.json +++ b/src/frontend/src/locales/en/rooms.json @@ -213,6 +213,7 @@ }, "effects": { "activateCamera": "Your camera is disabled. Choose an option to enable it.", + "cameraDisabled": "Your camera is disabled.", "notAvailable": "Video effects will be available soon on your browser. We're working on it! In the meantime, you can use Google Chrome for best performance or Firefox :(", "heading": "Blur", "clear": "Disable effect", diff --git a/src/frontend/src/locales/fr/rooms.json b/src/frontend/src/locales/fr/rooms.json index c280c07c..7db0cb37 100644 --- a/src/frontend/src/locales/fr/rooms.json +++ b/src/frontend/src/locales/fr/rooms.json @@ -213,6 +213,7 @@ }, "effects": { "activateCamera": "Votre caméra est désactivée. Choisissez une option pour l'activer.", + "cameraDisabled": "Votre caméra est désactivée.", "notAvailable": "Les effets vidéo seront bientôt disponibles sur votre navigateur. Nous y travaillons ! En attendant, vous pouvez utiliser Google Chrome pour de meilleures performances ou Firefox :(", "heading": "Flou", "clear": "Désactiver l'effect", diff --git a/src/frontend/src/locales/nl/rooms.json b/src/frontend/src/locales/nl/rooms.json index 372e11a3..db7edbeb 100644 --- a/src/frontend/src/locales/nl/rooms.json +++ b/src/frontend/src/locales/nl/rooms.json @@ -213,6 +213,7 @@ }, "effects": { "activateCamera": "Uw camera is uitgeschakeld. Kies een optie om deze in te schakelen.", + "cameraDisabled": "Uw camera is uitgeschakeld.", "notAvailable": "Video-effecten zijn binnenkort beschikbaar in uw browser. We werken eraan! In de tussentijd kunt u Google Chrome gebruiken voor de beste prestaties of Firefox :(", "heading": "Vervaging", "clear": "Effect uitschakelen",