From 7bee0de014d9ac202f8f0e0d29d9bdadb15d962f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Wed, 26 Jul 2023 15:46:08 +0200
Subject: [PATCH] Disable E2EE settings on unsupported browsers
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
---
 src/settings/SettingsModal.tsx |  9 +++++++--
 src/settings/useSetting.ts     | 14 +++++++++++---
 2 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/src/settings/SettingsModal.tsx b/src/settings/SettingsModal.tsx
index 3ebb215c..b88d99b8 100644
--- a/src/settings/SettingsModal.tsx
+++ b/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>
diff --git a/src/settings/useSetting.ts b/src/settings/useSetting.ts
index 8d3f074f..8fe85b12 100644
--- a/src/settings/useSetting.ts
+++ b/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: "",