wip

numerique-gouv · Dec 16, 2024 · dc74709 · dc74709
1 parent c6fdeaf
commit dc74709
Show file tree

Hide file tree

Showing 5 changed files with 60 additions and 26 deletions.
diff --git a/src/frontend/src/features/rooms/livekit/components/controls/SelectToggleDevice.tsx b/src/frontend/src/features/rooms/livekit/components/controls/SelectToggleDevice.tsx
@@ -67,10 +67,12 @@ type SelectToggleDeviceProps<T extends ToggleSource> =
   UseTrackToggleProps<T> & {
     onActiveDeviceChange: (deviceId: string) => void
     source: SelectToggleSource
+    hideMenu?: boolean
   }
 
 export const SelectToggleDevice = <T extends ToggleSource>({
   onActiveDeviceChange,
+  hideMenu,
   ...props
 }: SelectToggleDeviceProps<T>) => {
   const config = selectToggleDeviceConfig[props.source]
@@ -92,29 +94,41 @@ export const SelectToggleDevice = <T extends ToggleSource>({
         gap: '1px',
       })}
     >
-      <ToggleDevice {...trackProps} config={config} />
-      <Menu>
-        <Button
-          tooltip={selectLabel}
-          aria-label={selectLabel}
-          groupPosition="right"
-          square
-          variant={trackProps.enabled ? 'primaryDark' : 'error2'}
-        >
-          <RiArrowDownSLine />
-        </Button>
-        <MenuList
-          items={devices.map((d) => ({
-            value: d.deviceId,
-            label: d.label,
-          }))}
-          selectedItem={activeDeviceId}
-          onAction={(value) => {
-            setActiveMediaDevice(value as string)
-            onActiveDeviceChange(value as string)
-          }}
-        />
-      </Menu>
+      <ToggleDevice
+        {...trackProps}
+        config={config}
+        toggleButtonProps={{
+          ...(hideMenu
+            ? {
+                groupPosition: undefined,
+              }
+            : {}),
+        }}
+      />
+      {!hideMenu && (
+        <Menu>
+          <Button
+            tooltip={selectLabel}
+            aria-label={selectLabel}
+            groupPosition="right"
+            square
+            variant={trackProps.enabled ? 'primaryDark' : 'error2'}
+          >
+            <RiArrowDownSLine />
+          </Button>
+          <MenuList
+            items={devices.map((d) => ({
+              value: d.deviceId,
+              label: d.label,
+            }))}
+            selectedItem={activeDeviceId}
+            onAction={(value) => {
+              setActiveMediaDevice(value as string)
+              onActiveDeviceChange(value as string)
+            }}
+          />
+        </Menu>
+      )}
     </div>
   )
 }
diff --git a/src/frontend/src/features/rooms/livekit/components/controls/ToggleDevice.tsx b/src/frontend/src/features/rooms/livekit/components/controls/ToggleDevice.tsx
@@ -7,17 +7,20 @@ import { SelectToggleDeviceConfig } from './SelectToggleDevice'
 import useLongPress from '@/features/shortcuts/useLongPress'
 import { ActiveSpeaker } from '@/features/rooms/components/ActiveSpeaker'
 import { useIsSpeaking, useLocalParticipant } from '@livekit/components-react'
+import { ToggleButtonProps } from '@/primitives/ToggleButton'
 
 export type ToggleDeviceProps = {
   enabled: boolean
   toggle: () => void
   config: SelectToggleDeviceConfig
+  toggleButtonProps?: Partial<ToggleButtonProps>
 }
 
 export const ToggleDevice = ({
   config,
   enabled,
   toggle,
+  toggleButtonProps,
 }: ToggleDeviceProps) => {
   const { t } = useTranslation('rooms', { keyPrefix: 'join' })
 
@@ -64,6 +67,7 @@ export const ToggleDevice = ({
       aria-label={toggleLabel}
       tooltip={toggleLabel}
       groupPosition="left"
+      {...toggleButtonProps}
     >
       <Icon />
     </ToggleButton>

diff --git a/src/frontend/src/features/rooms/livekit/prefabs/ControlBar/MobileControlBar.tsx b/src/frontend/src/features/rooms/livekit/prefabs/ControlBar/MobileControlBar.tsx
@@ -10,6 +10,7 @@ import { HandToggle } from '../../components/controls/HandToggle'
 import { Button } from '@/primitives/Button'
 import {
   RiAccountBoxLine,
+  RiCameraSwitchLine,
   RiMegaphoneLine,
   RiMore2Line,
   RiSettings3Line,
@@ -55,7 +56,7 @@ export function MobileControlBar({
           className={css({
             display: 'flex',
             justifyContent: 'space-between',
-            width: '422px',
+            width: '330px',
           })}
         >
           <LeaveButton />
@@ -68,6 +69,7 @@ export function MobileControlBar({
             onActiveDeviceChange={(deviceId) =>
               saveAudioInputDeviceId(deviceId ?? '')
             }
+            hideMenu={true}
           />
           <SelectToggleDevice
             source={Track.Source.Camera}
@@ -78,6 +80,7 @@ export function MobileControlBar({
             onActiveDeviceChange={(deviceId) =>
               saveVideoInputDeviceId(deviceId ?? '')
             }
+            hideMenu={true}
           />
           <HandToggle />
           <Button
@@ -174,6 +177,17 @@ export function MobileControlBar({
             >
               <RiSettings3Line size={20} />
             </Button>
+            <Button
+              onPress={() => {
+                setIsMenuOpened(false)
+              }}
+              variant="primaryTextDark"
+              aria-label={t('options.items.switch_camera')}
+              tooltip={t('options.items.switch_camera')}
+              description={true}
+            >
+              <RiCameraSwitchLine size={20} />
+            </Button>
           </div>
         </div>
       </ResponsiveMenu>

diff --git a/src/frontend/src/locales/en/rooms.json b/src/frontend/src/locales/en/rooms.json
@@ -82,7 +82,8 @@
       "feedbacks": "Give us feedbacks",
       "settings": "Settings",
       "username": "Update Your Name",
-      "effects": "Apply effects"
+      "effects": "Apply effects",
+      "switch_camera": "Switch camera"
     }
   },
   "effects": {

diff --git a/src/frontend/src/locales/fr/rooms.json b/src/frontend/src/locales/fr/rooms.json
@@ -82,7 +82,8 @@
       "feedbacks": "Partager votre avis",
       "settings": "Paramètres",
       "username": "Choisir votre nom",
-      "effects": "Appliquer des effets"
+      "effects": "Appliquer des effets",
+      "switch_camera": "Changer de caméra"
     }
   },
   "effects": {