diff --git a/src/frontend/src/features/layout/components/ControlBarRegion.tsx b/src/frontend/src/features/layout/components/ControlBarRegion.tsx new file mode 100644 index 00000000..3d3257ce --- /dev/null +++ b/src/frontend/src/features/layout/components/ControlBarRegion.tsx @@ -0,0 +1,44 @@ +import { cva, RecipeVariantProps } from '@/styled-system/css' +import { useTranslation } from 'react-i18next' + +const controlBarRegion = cva({ + base: { + display: 'flex', + alignItems: 'center', + flex: '1 1 33%', + justifyContent: 'center', + gap: '0.65rem', + }, + variants: { + mobile: { + true: { + justifyContent: 'space-between', + width: '330px', + }, + }, + }, + defaultVariants: { + mobile: false, + }, +}) + +export type ControlBarRegionProps = React.HTMLAttributes & + RecipeVariantProps + +export function ControlBarRegion({ + children, + mobile, + ...props +}: ControlBarRegionProps) { + const { t } = useTranslation('rooms') + return ( +
+ {children} +
+ ) +} diff --git a/src/frontend/src/features/rooms/livekit/prefabs/ControlBar/DesktopControlBar.tsx b/src/frontend/src/features/rooms/livekit/prefabs/ControlBar/DesktopControlBar.tsx index 846ab49b..13d19a71 100644 --- a/src/frontend/src/features/rooms/livekit/prefabs/ControlBar/DesktopControlBar.tsx +++ b/src/frontend/src/features/rooms/livekit/prefabs/ControlBar/DesktopControlBar.tsx @@ -15,6 +15,7 @@ import { useFullScreen } from '../../hooks/useFullScreen' import { VideoDeviceControl } from '../../components/controls/Device/VideoDeviceControl' import { AudioDevicesControl } from '../../components/controls/Device/AudioDevicesControl' import { ReactionsToggle } from '@/features/reactions/components/ReactionsToggle' +import { ControlBarRegion } from '@/features/layout/components/ControlBarRegion' export function DesktopControlBar({ onDeviceError, @@ -61,15 +62,7 @@ export function DesktopControlBar({ marginLeft: '0.5rem', })} /> -
+ onDeviceError?.({ source: Track.Source.Microphone, error }) @@ -93,7 +86,7 @@ export function DesktopControlBar({ -
+ ) diff --git a/src/frontend/src/features/rooms/livekit/prefabs/ControlBar/MobileControlBar.tsx b/src/frontend/src/features/rooms/livekit/prefabs/ControlBar/MobileControlBar.tsx index 3427230c..8fed2911 100644 --- a/src/frontend/src/features/rooms/livekit/prefabs/ControlBar/MobileControlBar.tsx +++ b/src/frontend/src/features/rooms/livekit/prefabs/ControlBar/MobileControlBar.tsx @@ -25,6 +25,7 @@ import { useConfig } from '@/api/useConfig' import { AudioDevicesControl } from '../../components/controls/Device/AudioDevicesControl' import { VideoDeviceControl } from '../../components/controls/Device/VideoDeviceControl' import { useSettingsDialog } from '@/features/settings/hook/useSettingsDialog' +import { ControlBarRegion } from '@/features/layout/components/ControlBarRegion' export function MobileControlBar({ onDeviceError, @@ -47,13 +48,7 @@ export function MobileControlBar({ justifyContent: 'center', })} > -
+ @@ -78,7 +73,7 @@ export function MobileControlBar({ > -
+