Add background Blur

src/settings/SettingsModal.tsx

@@ -5,10 +5,15 @@ SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */
 
-import { ChangeEvent, FC, useCallback, useState } from "react";
+import { ChangeEvent, FC, ReactNode, useCallback, useState } from "react";
 import { Trans, useTranslation } from "react-i18next";
 import { MatrixClient } from "matrix-js-sdk/src/matrix";
-import { Root as Form, Text } from "@vector-im/compound-web";
+import {
+  Root as Form,
+  Separator,
+  Text,
+  Tooltip,
+} from "@vector-im/compound-web";
 
 import { Modal } from "../Modal";
 import styles from "./SettingsModal.module.css";
@@ -26,6 +31,7 @@ import {
   useSetting,
   developerSettingsTab as developerSettingsTabSetting,
   duplicateTiles as duplicateTilesSetting,
+  backgroundBlur as backgroundBlurSetting,
   useOptInAnalytics,
   soundEffectVolumeSetting,
 } from "./settings";
@@ -70,6 +76,33 @@ export const SettingsModal: FC<Props> = ({
   );
   const [duplicateTiles, setDuplicateTiles] = useSetting(duplicateTilesSetting);
 
+  // Generate a `Checkbox` input to turn blur on or off.
+  const BlurCheckbox: React.FC = (): ReactNode => {
+    const [blur, setBlur] = useSetting(backgroundBlurSetting);
+    return (
+      <>
+        <h4>{t("settings.background_blur_header")}</h4>
+        <FieldRow>
+          <Tooltip
+            label={
+              isFirefox() ? t("settings.blur_not_supported_by_browser") : ""
+            }
+          >
+            <InputField
+              id="activateBackgroundBlur"
+              label={t("settings.background_blur_label")}
+              description={t("settings.video_tab_activate_background_blur")}
+              type="checkbox"
+              checked={blur}
+              onChange={(b): void => setBlur(b.target.checked)}
+              disabled={isFirefox()}
+            />
+          </Tooltip>
+        </FieldRow>
+      </>
+    );
+  };
+
   const optInDescription = (
     <Text size="sm">
       <Trans i18nKey="settings.opt_in_description">
@@ -124,12 +157,16 @@ export const SettingsModal: FC<Props> = ({
     key: "video",
     name: t("common.video"),
     content: (
-      <Form>
-        <DeviceSelection
-          devices={devices.videoInput}
-          caption={t("common.camera")}
-        />
-      </Form>
+      <>
+        <Form>
+          <DeviceSelection
+            devices={devices.videoInput}
+            caption={t("common.camera")}
+          />
+        </Form>
+        <Separator />
+        <BlurCheckbox />
+      </>
     ),
   };
 

src/settings/settings.ts

@@ -88,6 +88,8 @@ export const videoInput = new Setting<string | undefined>(
   undefined,
 );
 
+export const backgroundBlur = new Setting<boolean>("background-blur", true);
+
 export const showHandRaisedTimer = new Setting<boolean>(
   "hand-raised-show-timer",
   false,