= ({ client, livekitRoom }) => {
)}
/>
+
+ ): void => {
+ setUseExperimentalToDeviceTransport(event.target.checked);
+ },
+ [setUseExperimentalToDeviceTransport],
+ )}
+ />
+
+
+ ): void => {
+ setMuteAllAudio(event.target.checked);
+ },
+ [setMuteAllAudio],
+ )}
+ />
+ {" "}
+
+ ): void => {
+ setAlwaysShowIphoneEarpiece(event.target.checked);
+ },
+ [setAlwaysShowIphoneEarpiece],
+ )}
+ />{" "}
+
{livekitRoom ? (
<>
@@ -169,6 +227,10 @@ export const DeveloperSettingsTab: FC = ({ client, livekitRoom }) => {
) : null}
+ {t("developer_mode.environment_variables")}
+ {JSON.stringify(import.meta.env, null, 2)}
+ {t("developer_mode.url_params")}
+ {JSON.stringify(urlParams, null, 2)}
);
};
diff --git a/src/settings/DeviceSelection.tsx b/src/settings/DeviceSelection.tsx
index 0bdabbe7..aee043c6 100644
--- a/src/settings/DeviceSelection.tsx
+++ b/src/settings/DeviceSelection.tsx
@@ -22,17 +22,20 @@ import {
} from "@vector-im/compound-web";
import { Trans, useTranslation } from "react-i18next";
-import { type MediaDevice } from "../livekit/MediaDevicesContext";
+import {
+ EARPIECE_CONFIG_ID,
+ type MediaDeviceHandle,
+} from "../livekit/MediaDevicesContext";
import styles from "./DeviceSelection.module.css";
interface Props {
- devices: MediaDevice;
+ device: MediaDeviceHandle;
title: string;
numberedLabel: (number: number) => string;
}
export const DeviceSelection: FC = ({
- devices,
+ device,
title,
numberedLabel,
}) => {
@@ -40,12 +43,13 @@ export const DeviceSelection: FC = ({
const groupId = useId();
const onChange = useCallback(
(e: ChangeEvent) => {
- devices.select(e.target.value);
+ device.select(e.target.value);
},
- [devices],
+ [device],
);
- if (devices.available.size == 0) return null;
+ // There is no need to show the menu if there is no choice that can be made.
+ if (device.available.size <= 1) return null;
return (
@@ -60,7 +64,7 @@ export const DeviceSelection: FC
= ({
- {[...devices.available].map(([id, label]) => {
+ {[...device.available].map(([id, label]) => {
let labelText: ReactNode;
switch (label.type) {
case "name":
@@ -85,6 +89,16 @@ export const DeviceSelection: FC
= ({
);
break;
+ case "earpiece":
+ labelText = t("settings.devices.earpiece");
+ break;
+ }
+
+ let isSelected = false;
+ if (device.useAsEarpiece) {
+ isSelected = id === EARPIECE_CONFIG_ID;
+ } else {
+ isSelected = id === device.selectedId;
}
return (
@@ -93,7 +107,7 @@ export const DeviceSelection: FC = ({
name={groupId}
control={
diff --git a/src/settings/FeedbackSettingsTab.tsx b/src/settings/FeedbackSettingsTab.tsx
index 9dc82043..0555ca3f 100644
--- a/src/settings/FeedbackSettingsTab.tsx
+++ b/src/settings/FeedbackSettingsTab.tsx
@@ -6,10 +6,10 @@ Please see LICENSE in the repository root for full details.
*/
import { type ChangeEvent, type FC, useCallback } from "react";
-import { secureRandomString } from "matrix-js-sdk/src/randomstring";
+import { secureRandomString } from "matrix-js-sdk/lib/randomstring";
import { Trans, useTranslation } from "react-i18next";
import { Button, Text } from "@vector-im/compound-web";
-import { logger } from "matrix-js-sdk/src/logger";
+import { logger } from "matrix-js-sdk/lib/logger";
import { FieldRow, InputField, ErrorMessage } from "../input/Input";
import { useSubmitRageshake, useRageshakeRequest } from "./submit-rageshake";
diff --git a/src/settings/ProfileSettingsTab.tsx b/src/settings/ProfileSettingsTab.tsx
index cfb6d727..7a4ac077 100644
--- a/src/settings/ProfileSettingsTab.tsx
+++ b/src/settings/ProfileSettingsTab.tsx
@@ -6,9 +6,9 @@ Please see LICENSE in the repository root for full details.
*/
import { type FC, useCallback, useEffect, useMemo, useRef } from "react";
-import { type MatrixClient } from "matrix-js-sdk/src/client";
+import { type MatrixClient } from "matrix-js-sdk";
import { useTranslation } from "react-i18next";
-import { logger } from "matrix-js-sdk/src/logger";
+import { logger } from "matrix-js-sdk/lib/logger";
import { useProfile } from "../profile/useProfile";
import { FieldRow, InputField, ErrorMessage } from "../input/Input";
diff --git a/src/settings/RageshakeButton.tsx b/src/settings/RageshakeButton.tsx
index 43ffd7d5..f4e7bea3 100644
--- a/src/settings/RageshakeButton.tsx
+++ b/src/settings/RageshakeButton.tsx
@@ -8,7 +8,7 @@ Please see LICENSE in the repository root for full details.
import { useTranslation } from "react-i18next";
import { type FC, useCallback, type JSX } from "react";
import { Button } from "@vector-im/compound-web";
-import { logger } from "matrix-js-sdk/src/logger";
+import { logger } from "matrix-js-sdk/lib/logger";
import { Config } from "../config/Config";
import styles from "./RageshakeButton.module.css";
diff --git a/src/settings/SettingsModal.tsx b/src/settings/SettingsModal.tsx
index 5239802e..57463fc7 100644
--- a/src/settings/SettingsModal.tsx
+++ b/src/settings/SettingsModal.tsx
@@ -5,11 +5,12 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE in the repository root for full details.
*/
-import { type FC, useState } from "react";
+import { type FC, type ReactNode, useState } from "react";
import { useTranslation } from "react-i18next";
-import { type MatrixClient } from "matrix-js-sdk/src/matrix";
-import { Root as Form } from "@vector-im/compound-web";
+import { type MatrixClient } from "matrix-js-sdk";
+import { Button, Root as Form, Separator } from "@vector-im/compound-web";
import { type Room as LivekitRoom } from "livekit-client";
+import { useObservableEagerState } from "observable-hooks";
import { Modal } from "../Modal";
import styles from "./SettingsModal.module.css";
@@ -19,18 +20,23 @@ import { FeedbackSettingsTab } from "./FeedbackSettingsTab";
import {
useMediaDevices,
useMediaDeviceNames,
+ iosDeviceMenu$,
} from "../livekit/MediaDevicesContext";
import { widget } from "../widget";
import {
useSetting,
- soundEffectVolumeSetting,
+ soundEffectVolume as soundEffectVolumeSetting,
+ backgroundBlur as backgroundBlurSetting,
developerMode,
} from "./settings";
import { PreferencesSettingsTab } from "./PreferencesSettingsTab";
import { Slider } from "../Slider";
import { DeviceSelection } from "./DeviceSelection";
+import { useTrackProcessor } from "../livekit/TrackProcessorContext";
import { DeveloperSettingsTab } from "./DeveloperSettingsTab";
-import { isRageshakeAvailable } from "./submit-rageshake";
+import { FieldRow, InputField } from "../input/Input";
+import { useSubmitRageshake } from "./submit-rageshake";
+import { useUrlParams } from "../UrlParams";
type SettingsTab =
| "audio"
@@ -64,31 +70,83 @@ export const SettingsModal: FC = ({
}) => {
const { t } = useTranslation();
+ // Generate a `Checkbox` input to turn blur on or off.
+ const BlurCheckbox: React.FC = (): ReactNode => {
+ const { supported } = useTrackProcessor();
+
+ const [blurActive, setBlurActive] = useSetting(backgroundBlurSetting);
+
+ return (
+ <>
+ {t("settings.background_blur_header")}
+
+
+ setBlurActive(b.target.checked)}
+ disabled={!supported}
+ />
+
+
+ );
+ };
+
const devices = useMediaDevices();
useMediaDeviceNames(devices, open);
const [soundVolume, setSoundVolume] = useSetting(soundEffectVolumeSetting);
const [soundVolumeRaw, setSoundVolumeRaw] = useState(soundVolume);
-
const [showDeveloperSettingsTab] = useSetting(developerMode);
+ const { available: isRageshakeAvailable } = useSubmitRageshake();
+
+ // For controlled devices, we will not show the input section:
+ // Controlled media devices are used on mobile platforms, where input and output are grouped into
+ // a single device. These are called "headset" or "speaker" (or similar) but contain both input and output.
+ // On EC, we decided that it is less confusing for the user if they see those options in the output section
+ // rather than the input section.
+ const { controlledAudioDevices } = useUrlParams();
+ // If we are on iOS we will show a button to open the native audio device picker.
+ const iosDeviceMenu = useObservableEagerState(iosDeviceMenu$);
+
const audioTab: Tab = {
key: "audio",
name: t("common.audio"),
content: (
<>
+
+
+
+
+
+