diff --git a/app/components/AudioOutputSelector.tsx b/app/components/AudioOutputSelector.tsx new file mode 100644 index 00000000..c94f4a20 --- /dev/null +++ b/app/components/AudioOutputSelector.tsx @@ -0,0 +1,43 @@ +import type { FC } from 'react' +import { useAudioOutputDeviceId } from '~/hooks/globalPersistedState' +import useMediaDevices from '~/hooks/useMediaDevices' +import { useRoomContext } from '~/hooks/useRoomContext' +import { errorMessageMap } from '~/hooks/useUserMedia' +import { Option, Select } from './Select' + +export const AudioOutputSelector: FC<{ id?: string }> = ({ id }) => { + const audioOutputDevices = useMediaDevices((d) => d.kind === 'audiooutput') + const [audioDeviceId, setAudioDeviceId] = useAudioOutputDeviceId() + + const { + userMedia: { audioUnavailableReason }, + } = useRoomContext() + + if (audioUnavailableReason) { + return ( +
+ +
+ ) + } + + if (!audioDeviceId) return null + + return ( +
+ +
+ ) +} diff --git a/app/components/SettingsDialog.tsx b/app/components/SettingsDialog.tsx index 7a1d37b3..02a73d28 100644 --- a/app/components/SettingsDialog.tsx +++ b/app/components/SettingsDialog.tsx @@ -1,6 +1,8 @@ import type { FC, ReactNode } from 'react' import { useRoomContext } from '~/hooks/useRoomContext' import { AudioInputSelector } from './AudioInputSelector' +import { AudioOutputSelector } from './AudioOutputSelector' + import { Button } from './Button' import { Dialog, @@ -67,6 +69,13 @@ export const SettingsDialog: FC = ({ Mic + +