Disable E2EE settings on unsupported browsers

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

src/settings/SettingsModal.tsx

@@ -262,10 +262,15 @@ export const SettingsModal = (props: Props) => {
           id="enableE2EE"
           name="end-to-end-encryption"
           label={t("Enable end-to-end encryption (password protected calls)")}
+          description={
+            !setEnableE2EE &&
+            t("End-to-end encryption isn't supported on your browser.")
+          }
+          disabled={!setEnableE2EE}
           type="checkbox"
-          checked={enableE2EE}
+          checked={enableE2EE ?? undefined}
           onChange={(e: ChangeEvent<HTMLInputElement>) =>
-            setEnableE2EE(e.target.checked)
+            setEnableE2EE?.(e.target.checked)
           }
         />
       </FieldRow>

src/settings/useSetting.ts

@@ -16,6 +16,7 @@ limitations under the License.
 
 import { EventEmitter } from "events";
 import { useMemo, useState, useEffect, useCallback } from "react";
+import { isE2EESupported } from "livekit-client";
 
 import { PosthogAnalytics } from "../analytics/PosthogAnalytics";
 
@@ -98,15 +99,22 @@ export const useOptInAnalytics = (): DisableableSetting<boolean | null> => {
   return [false, null];
 };
 
+export const useEnableE2EE = (): DisableableSetting<boolean | null> => {
+  const settingVal = useSetting<boolean | null>(
+    "enable-end-to-end-encryption",
+    false
+  );
+  if (isE2EESupported()) return settingVal;
+
+  return [false, null];
+};
+
 export const useDeveloperSettingsTab = () =>
   useSetting("developer-settings-tab", false);
 
 export const useShowConnectionStats = () =>
   useSetting("show-connection-stats", false);
 
-export const useEnableE2EE = () =>
-  useSetting("enable-end-to-end-encryption", false);
-
 export const useDefaultDevices = () =>
   useSetting("defaultDevices", {
     audioinput: "",