diff --git a/src/UrlParams.ts b/src/UrlParams.ts index f4ea840de..1ed4ef7af 100644 --- a/src/UrlParams.ts +++ b/src/UrlParams.ts @@ -196,6 +196,7 @@ export interface UrlConfiguration { * Element Call. */ controlledAudioDevices: boolean; + audioInputOutputSelection: boolean; /** * Setting this flag skips the lobby and brings you in the call directly. * In the widget this can be combined with preload to pass the device settings @@ -372,6 +373,7 @@ export const computeUrlParams = (search = "", hash = ""): UrlParams => { allowIceFallback: true, perParticipantE2EE: true, controlledAudioDevices: platform === "desktop" ? false : true, + audioInputOutputSelection: platform !== "ios", skipLobby: true, returnToLobby: false, sendNotificationType: "notification", @@ -427,6 +429,7 @@ export const computeUrlParams = (search = "", hash = ""): UrlParams => { allowIceFallback: false, perParticipantE2EE: false, controlledAudioDevices: false, + audioInputOutputSelection: true, skipLobby: false, returnToLobby: false, sendNotificationType: undefined, diff --git a/src/button/AudioRouteButton.tsx b/src/button/AudioRouteButton.tsx new file mode 100644 index 000000000..13073353c --- /dev/null +++ b/src/button/AudioRouteButton.tsx @@ -0,0 +1,60 @@ +/* +Copyright 2026 Element Creations Ltd. + +SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial +Please see LICENSE in the repository root for full details. +*/ + +import { useTranslation } from "react-i18next"; +import { Button, Tooltip } from "@vector-im/compound-web"; +import { + EarpieceIcon, + HeadphonesSolidIcon, + VolumeOnSolidIcon, +} from "@vector-im/compound-design-tokens/assets/web/icons"; + +import type { ComponentPropsWithoutRef, FC } from "react"; +import { RouteType } from "../controls.ts"; + +interface AudioRouteButtonProps extends ComponentPropsWithoutRef<"button"> { + size?: "md" | "lg"; + routeType: RouteType; +} + +export const AudioRouteButton: FC = ({ + routeType, + ...props +}) => { + const { t } = useTranslation(); + let label: string + let icon; + switch(routeType) { + case RouteType.speaker: + label = t("settings.devices.loudspeaker") + icon = VolumeOnSolidIcon; + break; + case RouteType.phone: + label = t("settings.devices.handset"); + icon = EarpieceIcon + break; + case RouteType.bluetooth: + label = "bluetooth headset"; + icon = HeadphonesSolidIcon; + break; + case RouteType.wired: + label = "headset"; + icon = HeadphonesSolidIcon; + break; + } + + return ( + +