wip disable effects configurations when permissions are disabled

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

@@ -1,5 +1,5 @@
 import { LocalVideoTrack, Track } from 'livekit-client'
-import { useEffect, useRef, useState } from 'react'
+import { useEffect, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import {
   BackgroundProcessorFactory,
@@ -16,6 +16,8 @@ import { useTrackToggle } from '@livekit/components-react'
 import { RiProhibited2Line } from '@remixicon/react'
 import { FunnyEffects } from './FunnyEffects'
 import { useHasFunnyEffectsAccess } from '../../hooks/useHasFunnyEffectsAccess'
+import { usePermissions } from '@/features/rooms/hooks/usePermissions'
+import { useModal } from '@/features/rooms/hooks/useModal'
 
 enum BlurRadius {
   NONE = 0,
@@ -49,6 +51,9 @@ export const EffectsConfiguration = ({
   const { t } = useTranslation('rooms', { keyPrefix: 'effects' })
   const { toggle, enabled } = useTrackToggle({ source: Track.Source.Camera })
 
+  const { isCameraGranted } = usePermissions()
+  const { open } = useModal('permissions')
+
   const [processorPending, setProcessorPending] = useState(false)
 
   const hasFunnyEffectsAccess = useHasFunnyEffectsAccess()
@@ -157,6 +162,11 @@ export const EffectsConfiguration = ({
     return t(`${type}.${isSelected(type, options) ? 'clear' : 'apply'}`)
   }
 
+  const isDisabled = useMemo(
+    () => processorPending || videoTrack?.isMuted || !isCameraGranted,
+    [processorPending, videoTrack, isCameraGranted]
+  )
+
   return (
     <div
       className={css(
@@ -248,20 +258,22 @@ export const EffectsConfiguration = ({
                 marginBottom: 0,
               }}
             >
-              {t('activateCamera')}
+              {t(isCameraGranted ? 'activateCamera' : 'permissionsCamera')}
             </P>
             <Button
               size="sm"
               variant="tertiary"
-              onPress={async () => await toggle()}
-              aria-label={t('activateButton')}
+              onPress={async () => (isCameraGranted ? await toggle() : open())}
+              aria-label={t(
+                isCameraGranted ? 'activateButton' : 'permissionsButton'
+              )}
               className={css({
                 width: 'fit-content',
                 marginX: 'auto',
                 marginTop: '1rem',
               })}
             >
-              {t('activateButton')}
+              {t(isCameraGranted ? 'activateButton' : 'permissionsButton')}
             </Button>
           </div>
         )}
@@ -312,7 +324,7 @@ export const EffectsConfiguration = ({
                     await clearEffect()
                   }}
                   isSelected={!selectedProcessor}
-                  isDisabled={processorPending || videoTrack?.isMuted}
+                  isDisabled={isDisabled}
                 >
                   <RiProhibited2Line />
                 </ToggleButton>
@@ -324,7 +336,7 @@ export const EffectsConfiguration = ({
                   tooltip={tooltipLabel(ProcessorType.BLUR, {
                     blurRadius: BlurRadius.LIGHT,
                   })}
-                  isDisabled={processorPending || videoTrack?.isMuted}
+                  isDisabled={isDisabled}
                   onChange={async () =>
                     await toggleEffect(ProcessorType.BLUR, {
                       blurRadius: BlurRadius.LIGHT,
@@ -345,7 +357,7 @@ export const EffectsConfiguration = ({
                   tooltip={tooltipLabel(ProcessorType.BLUR, {
                     blurRadius: BlurRadius.NORMAL,
                   })}
-                  isDisabled={processorPending || videoTrack?.isMuted}
+                  isDisabled={isDisabled}
                   onChange={async () =>
                     await toggleEffect(ProcessorType.BLUR, {
                       blurRadius: BlurRadius.NORMAL,
@@ -393,7 +405,7 @@ export const EffectsConfiguration = ({
                         tooltip={tooltipLabel(ProcessorType.VIRTUAL, {
                           imagePath,
                         })}
-                        isDisabled={processorPending || videoTrack?.isMuted}
+                        isDisabled={isDisabled}
                         onChange={async () =>
                           await toggleEffect(ProcessorType.VIRTUAL, {
                             imagePath,

src/frontend/src/locales/de/rooms.json

@@ -178,6 +178,8 @@
   "effects": {
     "activateCamera": "Kamera ist aus.",
     "activateButton": "Kamera einschalten",
+    "permissionsCamera": "Bitte erlauben Sie der App den Zugriff auf Ihre Kamera, um fortzufahren.",
+    "permissionsButton": "Kamerazugriff erlauben",
     "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",

src/frontend/src/locales/en/rooms.json

@@ -178,6 +178,8 @@
   "effects": {
     "activateCamera": "Your camera is disabled.",
     "activateButton": "Turn on camera",
+    "permissionsCamera": "Please allow the app to access your camera to continue.",
+    "permissionsButton": "Allow camera access",
     "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",

src/frontend/src/locales/fr/rooms.json

@@ -178,6 +178,8 @@
   "effects": {
     "activateCamera": "Caméra désactivée.",
     "activateButton": "Activer la caméra",
+    "permissionsCamera": "Veuillez autoriser l'application à accéder à votre caméra pour continuer.",
+    "permissionsButton": "Autoriser l'accès à la caméra",
     "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",

src/frontend/src/locales/nl/rooms.json

@@ -178,6 +178,8 @@
   "effects": {
     "activateCamera": "Camera is uit.",
     "activateButton": "Camera inschakelen",
+    "permissionsCamera": "Sta de app toe om toegang te krijgen tot je camera om door te gaan.",
+    "permissionsButton": "Toegang tot camera toestaan",
     "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",