diff --git a/src/frontend/src/features/settings/components/SettingsDialogExtended.tsx b/src/frontend/src/features/settings/components/SettingsDialogExtended.tsx
index a2a963c5..398aefac 100644
--- a/src/frontend/src/features/settings/components/SettingsDialogExtended.tsx
+++ b/src/frontend/src/features/settings/components/SettingsDialogExtended.tsx
@@ -14,7 +14,6 @@ import { AccountTab } from './tabs/AccountTab'
import { NotificationsTab } from './tabs/NotificationsTab'
import { GeneralTab } from './tabs/GeneralTab'
import { AudioTab } from './tabs/AudioTab'
-import { useSize } from '@/features/rooms/livekit/hooks/useResizeObserver'
import { useRef } from 'react'
import { useMediaQuery } from '@/features/rooms/livekit/hooks/useMediaQuery'
diff --git a/src/frontend/src/features/settings/components/tabs/AudioTab.tsx b/src/frontend/src/features/settings/components/tabs/AudioTab.tsx
index a2899690..f4d3e77f 100644
--- a/src/frontend/src/features/settings/components/tabs/AudioTab.tsx
+++ b/src/frontend/src/features/settings/components/tabs/AudioTab.tsx
@@ -1,4 +1,4 @@
-import { DialogProps, Field, H, Switch } from '@/primitives'
+import { DialogProps, Field, H, Switch, Text } from '@/primitives'
import { TabPanel, TabPanelProps } from '@/primitives/Tabs'
import {
@@ -174,7 +174,7 @@ export const AudioTab = ({ id }: AudioTabProps) => {
{/* Safari has a known limitation where its implementation of 'enumerateDevices' does not include audio output devices.
To prevent errors or an empty selection list, we only render the speakers selection field on non-Safari browsers. */}
- {!isSafari() && (
+ {!isSafari() ? (
{
/>
+ ) : (
+
+
+ {t('audio.speakers.safariWarning')}
+
+
+
)}
{noiseReductionAvailable && (
diff --git a/src/frontend/src/locales/de/settings.json b/src/frontend/src/locales/de/settings.json
index 53b0acf1..1fdb4c42 100644
--- a/src/frontend/src/locales/de/settings.json
+++ b/src/frontend/src/locales/de/settings.json
@@ -25,7 +25,8 @@
"heading": "Lautsprecher",
"label": "Wählen Sie Ihre Audioausgabe",
"test": "Testen",
- "ongoingTest": "Soundtest läuft…"
+ "ongoingTest": "Soundtest läuft…",
+ "safariWarning": "Die Lautsprecherauswahl ist auf Safari aufgrund von Browser-Einschränkungen noch nicht verfügbar."
},
"permissionsRequired": "Berechtigungen erforderlich"
},
diff --git a/src/frontend/src/locales/en/settings.json b/src/frontend/src/locales/en/settings.json
index 35b380c4..bc5ee6ac 100644
--- a/src/frontend/src/locales/en/settings.json
+++ b/src/frontend/src/locales/en/settings.json
@@ -25,7 +25,8 @@
"heading": "Speakers",
"label": "Select your audio output",
"test": "Test",
- "ongoingTest": "Testing sound…"
+ "ongoingTest": "Testing sound…",
+ "safariWarning": "Speaker selection is not available yet on Safari due to browser limitations."
},
"permissionsRequired": "Permissions required"
},
diff --git a/src/frontend/src/locales/fr/settings.json b/src/frontend/src/locales/fr/settings.json
index ee68b41b..6a8a7fbc 100644
--- a/src/frontend/src/locales/fr/settings.json
+++ b/src/frontend/src/locales/fr/settings.json
@@ -25,7 +25,8 @@
"heading": "Haut-parleurs",
"label": "Sélectionner votre sortie audio",
"test": "Tester",
- "ongoingTest": "Test du son…"
+ "ongoingTest": "Test du son…",
+ "safariWarning": "La sélection du haut-parleur n'est pas encore disponible sur Safari en raison de limitations du navigateur."
},
"permissionsRequired": "Autorisations nécessaires"
},
diff --git a/src/frontend/src/locales/nl/settings.json b/src/frontend/src/locales/nl/settings.json
index 3003ac08..95ad95d4 100644
--- a/src/frontend/src/locales/nl/settings.json
+++ b/src/frontend/src/locales/nl/settings.json
@@ -25,7 +25,8 @@
"heading": "Luidsprekers",
"label": "Selecteer uw audio-uitvoer",
"test": "Test",
- "ongoingTest": "Testgeluid ..."
+ "ongoingTest": "Testgeluid ...",
+ "safariWarning": "Luidsprekerselectie is nog niet beschikbaar op Safari vanwege browserbeperkingen."
},
"permissionsRequired": "Machtigingen vereist"
},
diff --git a/src/frontend/src/primitives/Text.tsx b/src/frontend/src/primitives/Text.tsx
index bd430025..a64e77e1 100644
--- a/src/frontend/src/primitives/Text.tsx
+++ b/src/frontend/src/primitives/Text.tsx
@@ -53,6 +53,9 @@ export const text = cva({
note: {
color: 'default.subtle-text',
},
+ warning: {
+ color: 'danger.subtle-text',
+ },
smNote: {
color: 'default.subtle-text',
textStyle: 'sm',