diff --git a/src/frontend/src/features/rooms/livekit/components/controls/Device/AudioDevicesControl.tsx b/src/frontend/src/features/rooms/livekit/components/controls/Device/AudioDevicesControl.tsx index 444eb502..9a310e2e 100644 --- a/src/frontend/src/features/rooms/livekit/components/controls/Device/AudioDevicesControl.tsx +++ b/src/frontend/src/features/rooms/livekit/components/controls/Device/AudioDevicesControl.tsx @@ -11,6 +11,8 @@ import { useCannotUseDevice } from '../../../hooks/useCannotUseDevice' import Source = Track.Source import * as React from 'react' import { SelectDevice } from './SelectDevice' +import { SettingsButton } from './SettingsButton' +import { SettingsDialogExtendedKey } from '@/features/settings/type' type AudioDevicesControlProps = Omit< UseTrackToggleProps, @@ -114,6 +116,7 @@ export const AudioDevicesControl = ({ onSubmit={saveAudioOutputDeviceId} /> + )} diff --git a/src/frontend/src/features/rooms/livekit/components/controls/Device/SettingsButton.tsx b/src/frontend/src/features/rooms/livekit/components/controls/Device/SettingsButton.tsx new file mode 100644 index 00000000..38b305ac --- /dev/null +++ b/src/frontend/src/features/rooms/livekit/components/controls/Device/SettingsButton.tsx @@ -0,0 +1,30 @@ +import { useSettingsDialog } from '../SettingsDialogContext' +import { Button } from '@/primitives' +import { RiSettings3Line } from '@remixicon/react' +import { useTranslation } from 'react-i18next' +import { SettingsDialogExtendedKey } from '@/features/settings/type' + +export const SettingsButton = ({ + settingTab, +}: { + settingTab: SettingsDialogExtendedKey +}) => { + const { t } = useTranslation('rooms', { keyPrefix: 'selectDevice' }) + const { setDialogOpen, setDefaultSelectedKey } = useSettingsDialog() + + return ( + + ) +} diff --git a/src/frontend/src/features/rooms/livekit/components/controls/Device/VideoDeviceControl.tsx b/src/frontend/src/features/rooms/livekit/components/controls/Device/VideoDeviceControl.tsx index f3279ab2..e12542ae 100644 --- a/src/frontend/src/features/rooms/livekit/components/controls/Device/VideoDeviceControl.tsx +++ b/src/frontend/src/features/rooms/livekit/components/controls/Device/VideoDeviceControl.tsx @@ -12,6 +12,8 @@ import { BackgroundProcessorFactory } from '../../blur' import Source = Track.Source import * as React from 'react' import { SelectDevice } from './SelectDevice' +import { SettingsButton } from './SettingsButton' +import { SettingsDialogExtendedKey } from '@/features/settings/type' type VideoDeviceControlProps = Omit< UseTrackToggleProps, @@ -126,6 +128,7 @@ export const VideoDeviceControl = ({ onSubmit={saveVideoInputDeviceId} /> + )} diff --git a/src/frontend/src/features/rooms/livekit/components/controls/SettingsDialogContext.tsx b/src/frontend/src/features/rooms/livekit/components/controls/SettingsDialogContext.tsx index 683acf78..1ce86a3a 100644 --- a/src/frontend/src/features/rooms/livekit/components/controls/SettingsDialogContext.tsx +++ b/src/frontend/src/features/rooms/livekit/components/controls/SettingsDialogContext.tsx @@ -1,15 +1,13 @@ -import { - SettingsDialogExtended, - SettingsDialogExtendedKeys, -} from '@/features/settings/components/SettingsDialogExtended' import React, { createContext, useContext, useState } from 'react' +import { SettingsDialogExtended } from '@/features/settings/components/SettingsDialogExtended' +import { SettingsDialogExtendedKey } from '@/features/settings/type' const SettingsDialogContext = createContext< | { dialogOpen: boolean - defaultSelectedKey?: SettingsDialogExtendedKeys + defaultSelectedKey?: SettingsDialogExtendedKey setDefaultSelectedKey: React.Dispatch< - React.SetStateAction + React.SetStateAction > setDialogOpen: React.Dispatch> } @@ -20,7 +18,7 @@ export const SettingsDialogProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => { const [defaultSelectedKey, setDefaultSelectedKey] = useState< - SettingsDialogExtendedKeys | undefined + SettingsDialogExtendedKey | undefined >(undefined) const [dialogOpen, setDialogOpen] = useState(false) return ( diff --git a/src/frontend/src/features/settings/components/SettingsDialogExtended.tsx b/src/frontend/src/features/settings/components/SettingsDialogExtended.tsx index a0ef1c5f..13e27036 100644 --- a/src/frontend/src/features/settings/components/SettingsDialogExtended.tsx +++ b/src/frontend/src/features/settings/components/SettingsDialogExtended.tsx @@ -18,6 +18,7 @@ import { AudioTab } from './tabs/AudioTab' import { VideoTab } from './tabs/VideoTab' import { useRef } from 'react' import { useMediaQuery } from '@/features/rooms/livekit/hooks/useMediaQuery' +import { SettingsDialogExtendedKey } from '@/features/settings/type' const tabsStyle = css({ maxHeight: '40.625rem', // fixme size copied from meet settings modal @@ -43,18 +44,11 @@ const tabPanelContainerStyle = css({ minWidth: 0, }) -export type SettingsDialogExtendedKeys = - | 'account' - | 'audio' - | 'video' - | 'general' - | 'notifications' - export type SettingsDialogExtended = Pick< DialogProps, 'isOpen' | 'onOpenChange' > & { - defaultSelectedKey?: SettingsDialogExtendedKeys + defaultSelectedKey?: SettingsDialogExtendedKey } export const SettingsDialogExtended = (props: SettingsDialogExtended) => { @@ -85,34 +79,38 @@ export const SettingsDialogExtended = (props: SettingsDialogExtended) => { )} - + - {isWideScreen && t('tabs.account')} + {isWideScreen && t(`tabs.${SettingsDialogExtendedKey.ACCOUNT}`)} - + - {isWideScreen && t('tabs.audio')} + {isWideScreen && t(`tabs.${SettingsDialogExtendedKey.AUDIO}`)} - + - {isWideScreen && t('tabs.video')} + {isWideScreen && t(`tabs.${SettingsDialogExtendedKey.VIDEO}`)} - + - {isWideScreen && t('tabs.general')} + {isWideScreen && t(`tabs.${SettingsDialogExtendedKey.GENERAL}`)} - + - {isWideScreen && t('tabs.notifications')} + {isWideScreen && + t(`tabs.${SettingsDialogExtendedKey.NOTIFICATIONS}`)}
- - - - - + + + + +
diff --git a/src/frontend/src/features/settings/type.ts b/src/frontend/src/features/settings/type.ts new file mode 100644 index 00000000..e0a39b6d --- /dev/null +++ b/src/frontend/src/features/settings/type.ts @@ -0,0 +1,7 @@ +export enum SettingsDialogExtendedKey { + ACCOUNT = 'account', + AUDIO = 'audio', + VIDEO = 'video', + GENERAL = 'general', + NOTIFICATIONS = 'notifications', +} diff --git a/src/frontend/src/locales/de/rooms.json b/src/frontend/src/locales/de/rooms.json index c21a4475..72f2bd52 100644 --- a/src/frontend/src/locales/de/rooms.json +++ b/src/frontend/src/locales/de/rooms.json @@ -11,6 +11,7 @@ "loading": "Laden…", "select": "Wählen Sie einen Wert", "permissionsNeeded": "Genehmigung erforderlich", + "settings": "Einstellungen", "videoinput": { "choose": "Kamera auswählen", "permissionsNeeded": "Kamera auswählen - genehmigung erforderlich", diff --git a/src/frontend/src/locales/en/rooms.json b/src/frontend/src/locales/en/rooms.json index 4ba31e91..9063ae03 100644 --- a/src/frontend/src/locales/en/rooms.json +++ b/src/frontend/src/locales/en/rooms.json @@ -11,6 +11,7 @@ "loading": "Loading…", "select": "Select a value", "permissionsNeeded": "Permission needed", + "settings": "Settings", "videoinput": { "choose": "Select camera", "permissionsNeeded": "Select camera - permission needed", diff --git a/src/frontend/src/locales/fr/rooms.json b/src/frontend/src/locales/fr/rooms.json index 31b38884..7b1587ae 100644 --- a/src/frontend/src/locales/fr/rooms.json +++ b/src/frontend/src/locales/fr/rooms.json @@ -11,6 +11,7 @@ "loading": "Chargement…", "select": "Sélectionnez une valeur", "permissionsNeeded": "Autorisations nécessaires", + "settings": "Paramètres", "videoinput": { "choose": "Choisir la webcam", "permissionsNeeded": "Choisir la webcam - autorisations nécessaires", diff --git a/src/frontend/src/locales/nl/rooms.json b/src/frontend/src/locales/nl/rooms.json index 49365a44..e29ea489 100644 --- a/src/frontend/src/locales/nl/rooms.json +++ b/src/frontend/src/locales/nl/rooms.json @@ -11,6 +11,7 @@ "loading": "Bezig met laden…", "select": "Selecteer een waarde", "permissionsNeeded": "Toestemming vereist", + "settings": "Instellingen", "videoinput": { "choose": "Selecteer camera", "permissionsNeeded": "Selecteer camera - Toestemming vereist",