♻️(frontend) extract effects-related logic in a component

Wraps all logics related to the effects on prejoin screen in a
dedicated component.

src/frontend/src/features/rooms/components/Join.tsx

@@ -13,12 +13,77 @@ import { Button, Dialog } from '@/primitives'
 import { LocalUserChoices } from '../routes/Room'
 import { Heading } from 'react-aria-components'
 import { RiImageCircleAiFill } from '@remixicon/react'
-import { EffectsConfiguration } from '../livekit/components/effects/EffectsConfiguration'
+import {
+  EffectsConfiguration,
+  EffectsConfigurationProps,
+} from '../livekit/components/effects/EffectsConfiguration'
 import { usePersistentUserChoices } from '../livekit/hooks/usePersistentUserChoices'
 import { BackgroundBlurFactory } from '../livekit/components/blur'
 
 const onError = (e: Error) => console.error('ERROR', e)
 
+const Effects = ({
+  videoTrack,
+  onSubmit,
+}: Pick<EffectsConfigurationProps, 'videoTrack' | 'onSubmit'>) => {
+  const { t } = useTranslation('rooms', { keyPrefix: 'join.effects' })
+  const [isDialogOpen, setIsDialogOpen] = useState(false)
+  const openDialog = () => setIsDialogOpen(true)
+
+  return (
+    <>
+      <Dialog
+        isOpen={isDialogOpen}
+        onOpenChange={setIsDialogOpen}
+        role="dialog"
+        type="flex"
+        size="large"
+      >
+        <Heading
+          slot="title"
+          level={1}
+          className={css({
+            textStyle: 'h1',
+            marginBottom: '1.5rem',
+          })}
+        >
+          {t('title')}
+        </Heading>
+        <EffectsConfiguration videoTrack={videoTrack} onSubmit={onSubmit} />
+      </Dialog>
+      <div
+        className={css({
+          position: 'absolute',
+          right: 0,
+          bottom: '0',
+          padding: '1rem',
+          zIndex: '1',
+        })}
+      >
+        <Button
+          variant="whiteCircle"
+          onPress={openDialog}
+          tooltip={t('description')}
+          aria-label={t('description')}
+        >
+          <RiImageCircleAiFill size={24} />
+        </Button>
+      </div>
+      <div
+        className={css({
+          position: 'absolute',
+          left: 0,
+          right: 0,
+          bottom: 0,
+          height: '20%',
+          backgroundImage:
+            'linear-gradient(0deg, rgba(0,0,0,0.8) 0%, rgba(255,255,255,0) 100%)',
+        })}
+      />
+    </>
+  )
+}
+
 export const Join = ({
   onSubmit,
 }: {
@@ -123,12 +188,6 @@ export const Join = ({
     })
   }
 
-  const [isEffectsOpen, setEffectsOpen] = useState(false)
-
-  const openEffects = () => {
-    setEffectsOpen(true)
-  }
-
   // This hook is used to setup the persisted user choice processor on initialization.
   // So it's on purpose that processor is not included in the deps.
   // We just want to wait for the videoTrack to be loaded to apply the default processor.
@@ -141,30 +200,6 @@ export const Join = ({
 
   return (
     <Screen footer={false}>
-      <Dialog
-        isOpen={isEffectsOpen}
-        onOpenChange={setEffectsOpen}
-        role="dialog"
-        type="flex"
-        size="large"
-      >
-        <Heading
-          slot="title"
-          level={1}
-          className={css({
-            textStyle: 'h1',
-            marginBottom: '1.5rem',
-          })}
-        >
-          {t('effects.title')}
-        </Heading>
-        <EffectsConfiguration
-          videoTrack={videoTrack}
-          onSubmit={(processor) => {
-            setProcessor(processor)
-          }}
-        />
-      </Dialog>
       <div
         className={css({
           display: 'flex',
@@ -257,34 +292,7 @@ export const Join = ({
                   </p>
                 </div>
               )}
-              <div
+              <Effects videoTrack={videoTrack} onSubmit={setProcessor} />
-                className={css({
-                  position: 'absolute',
-                  left: 0,
-                  right: 0,
-                  bottom: 0,
-                  height: '20%',
-                  backgroundImage:
-                    'linear-gradient(0deg, rgba(0,0,0,0.8) 0%, rgba(255,255,255,0) 100%)',
-                })}
-              ></div>
-              <div
-                className={css({
-                  position: 'absolute',
-                  right: 0,
-                  bottom: '0',
-                  padding: '1rem',
-                })}
-              >
-                <Button
-                  variant="whiteCircle"
-                  onPress={openEffects}
-                  tooltip={t('effects.description')}
-                  aria-label={t('effects.description')}
-                >
-                  <RiImageCircleAiFill size={24} />
-                </Button>
-              </div>
             </div>
             <HStack justify="center" padding={1.5}>
               <SelectToggleDevice

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

@@ -27,15 +27,17 @@ const Information = styled('div', {
   },
 })
 
+export type EffectsConfigurationProps = {
+  videoTrack: LocalVideoTrack
+  onSubmit?: (processor?: BackgroundBlurProcessorInterface) => void
+  layout?: 'vertical' | 'horizontal'
+}
+
 export const EffectsConfiguration = ({
   videoTrack,
   onSubmit,
   layout = 'horizontal',
-}: {
+}: EffectsConfigurationProps) => {
-  videoTrack: LocalVideoTrack
-  onSubmit?: (processor?: BackgroundBlurProcessorInterface) => void
-  layout?: 'vertical' | 'horizontal'
-}) => {
   const videoRef = useRef<HTMLVideoElement>(null)
   const { t } = useTranslation('rooms', { keyPrefix: 'effects' })
   const [processorPending, setProcessorPending] = useState(false)