🐛(frontend) prevent effects access when camera permissions denied

Block effects functionality when users lack camera publishing
permissions since they cannot open their camera and shouldn't be able
to start effects.

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 (
     <div
       className={css({
@@ -17,6 +21,7 @@ export const Effects = () => {
       })}
     >
       <EffectsConfiguration
+        isDisabled={!canPublishCamera}
         videoTrack={localCameraTrack}
         layout="vertical"
         onSubmit={(processor) =>

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')}
             </P>
           </div>
         )}
@@ -276,7 +278,7 @@ export const EffectsConfiguration = ({
                     await clearEffect()
                   }}
                   isSelected={!getProcessor()}
-                  isDisabled={processorPendingReveal}
+                  isDisabled={processorPendingReveal || isDisabled}
                 >
                   <RiProhibited2Line />
                 </ToggleButton>
@@ -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,

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",

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",

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",

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",