refactor

- still should not work without a fixing upstream LK:
https://github.com/livekit/components-js/pull/1042
https://github.com/livekit/components-js/pull/1043

src/settings/SettingsModal.tsx

@@ -5,12 +5,10 @@ SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */
 
-import { ChangeEvent, FC, ReactNode, useCallback, useState } from "react";
+import { ChangeEvent, FC, ReactNode, useCallback, useEffect, useState } from "react";
 import { Trans, useTranslation } from "react-i18next";
 import { MatrixClient } from "matrix-js-sdk/src/matrix";
 import { Root as Form, Separator, Text } from "@vector-im/compound-web";
-import { BackgroundBlur as backgroundBlur } from "@livekit/track-processors";
-import { logger } from "matrix-js-sdk/src/logger";
 
 import { Modal } from "../Modal";
 import styles from "./SettingsModal.module.css";
@@ -36,6 +34,7 @@ import { isFirefox } from "../Platform";
 import { PreferencesSettingsTab } from "./PreferencesSettingsTab";
 import { Slider } from "../Slider";
 import { DeviceSelection } from "./DeviceSelection";
+import { useTrackProcessor } from "../livekit/TrackProcessorContext";
 
 type SettingsTab =
   | "audio"
@@ -75,18 +74,11 @@ export const SettingsModal: FC<Props> = ({
 
   // Generate a `Checkbox` input to turn blur on or off.
   const BlurCheckbox: React.FC = (): ReactNode => {
-    const [blur, setBlur] = useSetting(backgroundBlurSetting);
-    let canBlur = true;
-    try {
-      backgroundBlur(15);
-    } catch (e) {
-      logger.debug(
-        "Cannot blur, so we do not show the option in settings. error: ",
-        e,
-      );
-      canBlur = false;
-      setBlur(false);
-    }
+    const { supported, checkSupported } = useTrackProcessor() || {};
+    useEffect(() => checkSupported?.(), [checkSupported]);
+
+    const [blurActive, setBlurActive] = useSetting(backgroundBlurSetting);
+
     return (
       <>
         <h4>{t("settings.background_blur_header")}</h4>
@@ -96,12 +88,12 @@ export const SettingsModal: FC<Props> = ({
             id="activateBackgroundBlur"
             label={t("settings.background_blur_label")}
             description={
-              canBlur ? "" : t("settings.blur_not_supported_by_browser")
+              supported ? "" : t("settings.blur_not_supported_by_browser")
             }
             type="checkbox"
-            checked={blur}
-            onChange={(b): void => setBlur(b.target.checked)}
-            disabled={!canBlur}
+            checked={!!blurActive}
+            onChange={(b): void => setBlurActive(b.target.checked)}
+            disabled={!supported}
           />
         </FieldRow>
       </>